hxd/zky_mandate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

分类，物种

Browse Source
This commit is contained in:
hxd 2025-08-07 18:40:43 +08:00
parent 575c278572
commit 0f7c42b949
16 changed files with 1654 additions and 627 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/dynamicpage/ProTable/index.vue
View File

@ -15,6 +15,13 @@
@sort-change="onSortChange" @sort-change="onSortChange"
v-bind="tableProps" v-bind="tableProps"
> >
<!-- 展开行 -->
<el-table-column v-if="showExpand" type="expand" align="center" :width="expandWidth">
<template #default="scope">
<slot name="expand" v-bind="scope" />
</template>
</el-table-column>
<!-- 选择框 --> <!-- 选择框 -->
<el-table-column v-if="showSelection" type="selection" width="55" align="center" /> <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
@ -22,7 +29,7 @@
<el-table-column v-if="showIndex" type="index" width="55" align="center" label="#" /> <el-table-column v-if="showIndex" type="index" width="55" align="center" label="#" />
<template v-for="col in columns" :key="col.prop"> <template v-for="col in columns" :key="col.prop">
<!-- <el-table-column <el-table-column
v-if="col.isFormater" v-if="col.isFormater"
:prop="col.prop" :prop="col.prop"
:label="col.label" :label="col.label"
@ -32,11 +39,10 @@
:sortable="col.sortable || false" :sortable="col.sortable || false"
:fixed="col.fixed || false" :fixed="col.fixed || false"
:show-overflow-tooltip="col.showOverflowTooltip || true" :show-overflow-tooltip="col.showOverflowTooltip || true"
:formatter="(row:any,col:any)=>col.formater(row,col)" :formatter="col.formater"
/> --> />
<div >{{col}}</div>
<!-- <el-table-column <el-table-column
v-else v-else
:prop="col.prop" :prop="col.prop"
:label="col.label" :label="col.label"
@ -56,7 +62,7 @@
/> />
<span v-else>{{ scope.row[col.prop] }}</span> <span v-else>{{ scope.row[col.prop] }}</span>
</template> </template>
</el-table-column> --> </el-table-column>
</template> </template>
<!-- 操作列 --> <!-- 操作列 -->
@ -66,6 +72,7 @@
:fixed="actionFixed" :fixed="actionFixed"
:width="actionWidth" :width="actionWidth"
align="center" align="center"
class-name="small-padding"
> >
<template #default="scope"> <template #default="scope">
<slot name="actions" v-bind="scope" /> <slot name="actions" v-bind="scope" />
@ -77,7 +84,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'; import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { formatter, type TableColumnCtx } from 'element-plus'; import { type TableColumnCtx } from 'element-plus';
import { TableColumn } from '../type'; import { TableColumn } from '../type';
interface Props { interface Props {
@ -90,6 +97,8 @@ interface Props {
size?: 'small' | 'default' | 'large'; size?: 'small' | 'default' | 'large';
showIndex?: boolean; showIndex?: boolean;
showSelection?: boolean; showSelection?: boolean;
showExpand?: boolean; // 新增：是否显示展开行
expandWidth?: string | number; // 新增：展开列宽度
highlightCurrentRow?: boolean; highlightCurrentRow?: boolean;
actionWidth?: string | number; actionWidth?: string | number;
actionFixed?: 'left' | 'right' | boolean; actionFixed?: 'left' | 'right' | boolean;
@ -108,8 +117,10 @@ const props = withDefaults(defineProps<Props>(), {
size: 'default', size: 'default',
showIndex: false, showIndex: false,
showSelection: false, showSelection: false,
showExpand: false, // 默认不显示展开行
expandWidth: 55, // 默认宽度与选择框一致
highlightCurrentRow: false, highlightCurrentRow: false,
actionWidth: 180, actionWidth: 200,
actionFixed: 'right', actionFixed: 'right',
tableProps: () => ({}), tableProps: () => ({}),
autoHeight: true, autoHeight: true,
@ -154,10 +165,17 @@ const toggleRowSelection = (row: any, selected?: boolean) =>
tableRef.value?.toggleRowSelection(row, selected); tableRef.value?.toggleRowSelection(row, selected);
const getSelectionRows = () => tableRef.value?.getSelectionRows(); const getSelectionRows = () => tableRef.value?.getSelectionRows();
// 新增：展开行相关方法
const toggleRowExpansion = (row: any, expanded?: boolean) =>
tableRef.value?.toggleRowExpansion(row, expanded);
const setExpandedRows = (rows: any[]) => tableRef.value?.setExpandedRows(rows);
defineExpose({ defineExpose({
clearSelection, clearSelection,
toggleRowSelection, toggleRowSelection,
getSelectionRows, getSelectionRows,
tableRef, tableRef,
toggleRowExpansion, // 暴露展开行方法
setExpandedRows, // 暴露设置展开行方法
}); });
</script> </script>

114
src/components/dynamicpage/auditForm/index.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<el-dialog :model-value="visible" :title="title" width="30%" @close="handleCancel">
<el-form :model="form" ref="formRef" label-width="80px" :rules="rules">
<slot>
<el-form-item label="审批意见" prop="auditView">
<el-input v-model="form.auditView" placeholder="请输入审批意见" />
</el-form-item>
<el-form-item label="审核状态" prop="auditStatus">
<el-radio v-model="form.auditStatus" label="1" size="large">通过</el-radio>
<el-radio v-model="form.auditStatus" label="2" size="large">不通过</el-radio>
</el-form-item>
<el-form-item label="审核人" prop="auditUser">
<el-select v-model="form.auditUser" placeholder="请选择审核人" filterable clearable>
<el-option
v-for="item in userList"
:key="item.id"
:label="item.userNickname"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="日期" prop="auditDate">
<el-date-picker
v-model="form.auditDate"
type="date"
placeholder="请选择日期"
style="width: 100%"
/>
</el-form-item>
</slot>
</el-form>
<template #footer>
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import type { AuditFormModel } from '../type';
import { UserItem, VersionMap } from '/@/types';
defineOptions({
name: 'AuditForm',
});
const props = defineProps<{
modelValue: boolean;
title?: string;
defaultForm?: Partial<AuditFormModel>;
}>();
const formRef = ref();
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const rules = ref({
auditView: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
auditUser: [{ required: true, message: '请选择审核人', trigger: 'change' }],
auditDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
});
const visible = ref(props.modelValue);
const userList = ref<UserItem[]>([]);
watch(
() => props.modelValue,
(val) => (visible.value = val)
);
watch(visible, (val) => emit('update:modelValue', val));
const form = ref<AuditFormModel>({
id: '',
auditView: '',
auditStatus: '',
auditUser: '',
auditDate: '',
...(props.defaultForm || {}),
});
const open = (row: AuditFormModel, userOptions: UserItem[]) => {
visible.value = true;
row.auditStatus='1'
form.value = row;
userList.value = userOptions;
};
defineExpose({
open,
});
const handleSubmit = () => {
formRef.value.validate((valid: boolean) => {
if (valid) {
emit('submit', form.value);
handleCancel();
} else {
console.log('error submit!!');
return false;
}
});
};
const handleCancel = () => {
visible.value = false;
form.value = {
id: '',
auditView: '',
auditStatus: '',
auditUser: '',
auditDate: '',
};
};
</script>

176
src/components/dynamicpage/modalForm/index.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<el-dialog
v-model="localVisible"
:title="title"
:width="width"
:close-on-click-modal="false"
@closed="handleCancel"
@open="handleOpen"
v-bind="$attrs"
>
<el-form
ref="formRef"
:model="modelValue"
:rules="rules"
:label-width="labelWidth"
:label-position="labelPosition"
>
<el-row :gutter="gutter">
<template v-for="(item, index) in fields" :key="item.prop">
<el-col :span="item.span||24">
<el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
<!-- 插槽优先 -->
<slot :name="item.prop" :item="item" :form="modelValue">
<component
:is="getComponent(item.type)"
v-model="modelValue[item.prop]"
v-bind="getProps(item)"
>
<!-- 下拉选项 -->
<template v-if="item.type === 'select'" #default>
<el-option
v-for="opt in item.options || []"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</template>
</component>
</slot>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
<!-- 操作按钮 -->
<template #footer v-if="showFooter">
<slot name="footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</slot>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {PopupFormField} from '../type'
defineOptions({ name: 'ModalForm' });
const props = defineProps<{
visible: boolean;
title?: string;
width?: string;
modelValue: Record<string, any>;
fields: PopupFormField[];
labelWidth?: string;
labelPosition?: 'left' | 'right' | 'top';
gutter?: number;
showFooter?: boolean;
}>();
const emit = defineEmits<{
(e: 'update:visible', val: boolean): void;
(e: 'update:modelValue', val: Record<string, any>): void;
(e: 'submit', val:any): void;
(e: 'cancel'): void;
(e: 'open'): void;
}>();
const formRef = ref<FormInstance>();
const localVisible = ref(props.visible);
watch(() => props.visible, val => localVisible.value = val);
watch(localVisible, val => emit('update:visible', val));
const labelWidth = computed(() => props.labelWidth || '100px');
const labelPosition = computed(() => props.labelPosition || 'right');
const gutter = computed(() => props.gutter || 10);
const showFooter = computed(() => props.showFooter !== false);
const rules = computed<FormRules>(() => {
const map: FormRules = {};
props.fields.forEach(field => {
if (field.rules) map[field.prop] = field.rules;
});
return map;
});
const componentMap: Record<string, any> = {
input: 'el-input',
select: 'el-select',
date: 'el-date-picker',
dateTime: 'el-date-picker',
daterange: 'el-date-picker',
datetimerange: 'el-date-picker',
switch: 'el-switch',
radio: 'el-radio-group',
checkbox: 'el-checkbox-group',
upload: 'el-upload',
cascader: 'el-cascader',
rate: 'el-rate',
slider: 'el-slider',
timePicker: 'el-time-picker',
inputNumber: 'el-input-number',
colorPicker: 'el-color-picker',
treeSelect: 'el-tree-select',
};
const getComponent = (type?: string) => componentMap[type || 'input'] || 'el-input';
const getProps = (item: PopupFormField) => {
const props = item.componentProps || {};
if (item.type === 'select') {
return { ...props, filterable: true };
}
if (item.type === 'daterange' || item.type === 'datetimerange') {
return {
...props,
type: item.type,
'value-format': 'YYYY-MM-DD',
'range-separator': '至',
'start-placeholder': '开始日期',
'end-placeholder': '结束日期',
};
}
return props;
};
const handleSubmit = async () => {
if (!formRef.value) return;
await formRef.value.validate((valid) => {
if (valid) emit('submit', props.modelValue);
});
};
const handleCancel = () => {
emit('cancel');
localVisible.value = false;
formRef.value?.resetFields();
};
const handleOpen = () => {
emit('open');
};
const loadOptions = async () => {
const loaded = new Set();
for (const field of props.fields) {
if (field.fetchOptions && !loaded.has(field.fetchOptions)) {
field.options = await field.fetchOptions();
loaded.add(field.fetchOptions);
}
}
};
onMounted(loadOptions);
</script>
<style scoped>
.form-item-wrapper {
display: block;
}
</style>

23
src/components/dynamicpage/type.ts
View File

@ -29,6 +29,27 @@ export interface TableColumn {
fixed?: 'left' | 'right' | boolean; fixed?: 'left' | 'right' | boolean;
render?: any; render?: any;
showOverflowTooltip?: boolean; showOverflowTooltip?: boolean;
formater?: (row: any, column: any) => any; formater?: (row: any, column: any, cellValue: any, index: number) => any;
isFormater?: boolean; isFormater?: boolean;
} }
export interface PopupFormField {
label: string;
prop: string;
type?: string;
rules?: any;
span?: number;
defaultValue?: any;
componentProps?: Record<string, any>;
options?: Array<{ label: string; value: any }>;
fetchOptions?: () => Promise<Array<{ label: string; value: any }>>;
}
export interface AuditFormModel {
auditView: string
auditStatus: string
auditUser: string | number
auditDate: string
id: string | number
}

58
src/components/pagination/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="{'hidden':hidden}" class="pagination-container"> <div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination <el-pagination
:background="background" :background="background"
v-model:current-page="currentPage" v-model:current-page="currentPage"
@ -15,84 +15,86 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { toRefs, defineComponent,computed } from 'vue'; import { toRefs, defineComponent, computed } from 'vue';
const props = { const props = {
total: { total: {
required: true, required: true,
type: Number type: Number,
}, },
page: { page: {
type: Number, type: Number,
default: 1 default: 1,
}, },
limit: { limit: {
type: Number, type: Number,
default: 20 default: 20,
}, },
pageSizes: { pageSizes: {
type: Array, type: Array,
default() { default() {
return [10, 20, 30, 50] return [10, 20, 30, 50];
} },
}, },
// 移动端页码按钮的数量端默认值5 // 移动端页码按钮的数量端默认值5
pagerCount: { pagerCount: {
type: Number, type: Number,
default: document.body.clientWidth < 992 ? 5 : 7 default: document.body.clientWidth < 992 ? 5 : 7,
}, },
layout: { layout: {
type: String, type: String,
default: 'total, sizes, prev, pager, next, jumper' default: 'total, sizes, prev, pager, next, jumper',
}, },
background: { background: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
hidden: { hidden: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}; };
export default defineComponent({ export default defineComponent({
name: 'pagination', name: 'pagination',
props: props, props: props,
setup(props,{emit}){ setup(props, { emit }) {
const { page,limit,pageSizes } = toRefs(props); const { page, limit, pageSizes } = toRefs(props);
const currentPage = computed({ const currentPage = computed({
get() { get() {
return page.value; return page.value;
}, },
set(val) { set(val) {
emit('update:page', val) emit('update:page', val);
} },
}); });
const pageSize = computed({ const pageSize = computed({
get() { get() {
return limit.value return limit.value;
}, },
set(val) { set(val) {
emit('update:limit', val) emit('update:limit', val);
} },
}); });
const handleSizeChange = (val:number) => { const handleSizeChange = (val: number) => {
emit('pagination', { page: currentPage.value, limit: val }) emit('pagination', { page: currentPage.value, limit: val });
};
const handleCurrentChange = (val: number) => {
emit('pagination', { page: val, limit: pageSizes.value });
}; };
const handleCurrentChange=(val:number) => {
emit('pagination', { page: val, limit: pageSizes.value })
}
return { return {
currentPage, currentPage,
pageSize, pageSize,
handleSizeChange, handleSizeChange,
handleCurrentChange handleCurrentChange,
} };
} },
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.pagination-container { .pagination-container {
padding: 32px 16px; padding: 20px 16px;
display: flex;
justify-content: flex-end;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;

5
src/types/index.ts
View File

@ -41,3 +41,8 @@ export interface UserItem {
roleInfo: null; roleInfo: null;
post: null; post: null;
}; };
export interface VersionMap{
[key: string]: number
}

0
src/utils/index.ts Normal file
View File

54
src/views/businesses/classifyStatuse/api.ts Normal file
View File

@ -0,0 +1,54 @@
import request from '/@/utils/request'
// 查询分类地位列表
export function listClassifyStatuse(query:object) {
return request({
url: '/api/v1/businesses/classifyStatuse/list',
method: 'get',
params: query
})
}
// 查询分类地位详细
export function getClassifyStatuse(id:number) {
return request({
url: '/api/v1/businesses/classifyStatuse/get',
method: 'get',
params: {
id: id.toString()
}
})
}
// 新增分类地位
export function addClassifyStatuse(data:object) {
return request({
url: '/api/v1/businesses/classifyStatuse/add',
method: 'post',
data: data
})
}
// 修改分类地位
export function updateClassifyStatuse(data:object) {
return request({
url: '/api/v1/businesses/classifyStatuse/edit',
method: 'put',
data: data
})
}
// 删除分类地位
export function delClassifyStatuse(ids:number[],version:number[]) {
return request({
url: '/api/v1/businesses/classifyStatuse/delete',
method: 'delete',
data:{
ids:ids,
version:version
}
})
}
export function auditSpeciesName(data:object) {
return request({
url: '/api/v1/businesses/classifyStatuse/audit',
method: 'post',
data: data,
});
}

681
src/views/businesses/classifyStatuse/index.vue Normal file
View File

@ -0,0 +1,681 @@
<template>
<div class="businesses-classifyStatuse-container">
<el-card shadow="hover">
<QueryForm
v-model="searchForm"
:fields="searchFields"
@search="onSearch"
@reset="onReset"
ref="queryFormRef"
/>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
@click="handleAdd"
v-auth="'api/v1/businesses/classifyStatuse/add'"
><el-icon><ele-Plus /></el-icon>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
:disabled="multiple"
@click="handleDelete(null)"
v-auth="'api/v1/businesses/classifyStatuse/delete'"
><el-icon><ele-Delete /></el-icon>删除</el-button
>
</el-col>
</el-row>
<ProTable
v-if="columns.length > 0"
ref="proTableRef"
:columns="columns"
:data="tableData.data"
:loading="loading"
:show-selection="true"
@selection-change="handleSelectionChange"
:heightOffset="400"
:action-width="280"
>
<template #actions="{ row }">
<el-button
type="primary"
@click="handleUpdate(row)"
size="small"
v-auth="'api/v1/businesses/classifyStatuse/edit'"
v-if="row.auditStatus != 1"
><el-icon><ele-EditPen /></el-icon>修改</el-button
>
<el-button
type="danger"
size="small"
@click="handleDelete(row)"
v-auth="'api/v1/businesses/classifyStatuse/delete'"
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
>
<el-button
type="warning"
size="small"
@click="handleAudit(row)"
v-if="row.auditStatus == 0"
v-auth="'api/v1/businesses/classifyStatuse/audit'"
><el-icon><ele-Check /></el-icon>审核</el-button
>
</template>
</ProTable>
<pagination
v-show="tableData.total > 0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="getList"
/>
</el-card>
<ModalForm
v-model:visible="showDialog"
:title="formTitle"
:fields="formFields"
v-model:modelValue="formData"
:type="formType"
:show-footer="true"
:label-width="'120px'"
:width="'50%'"
@submit="handleFormSubmit"
@cancel="handleCancel"
ref="modalFormRef"
>
</ModalForm>
<AuditForm
ref="auditFormRef"
v-model="showAuditDialog"
title="审核数据"
@submit="onAuditSubmit"
/>
</div>
</template>
<script setup lang="ts">
import { toRefs, reactive, onMounted, ref, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {
listClassifyStatuse,
delClassifyStatuse,
addClassifyStatuse,
updateClassifyStatuse,
auditSpeciesName,
} from './api';
import {
ClassifyStatuseTableColumns,
ClassifyStatuseInfoData,
ClassifyStatuseTableDataState,
} from './type';
import { getUserList } from '/@/api/system/user/index';
import { UserItem, VersionMap } from '/@/types';
import { parseTime } from '/@/utils/gfast';
import { cloneDeep } from 'lodash';
import { QueryFormField, TableColumn, PopupFormField } from '/@/components/dynamicpage/type';
import QueryForm from '/@/components/dynamicpage/queryForm/index.vue';
import ProTable from '/@/components/dynamicpage/ProTable/index.vue';
import ModalForm from '/@/components/dynamicpage/modalForm/index.vue';
import AuditForm from '/@/components/dynamicpage/auditForm/index.vue';
defineOptions({ name: 'ClassifyStatuse' });
const loading = ref(false);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
const userOptions = ref<UserItem[]>([]);
const state = reactive<ClassifyStatuseTableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
},
},
});
const versionMap = ref<VersionMap>({} as VersionMap);
const proTableRef = ref();
const { tableData } = toRefs(state);
const columns: TableColumn[] = [
{ label: '物种编码', prop: 'speciesCode' },
{ label: '界', prop: 'jie' },
{ label: 'Kingdom', prop: 'kingdom' },
{ label: '门', prop: 'men' },
{ label: 'Phylum', prop: 'phylum' },
{ label: '纲', prop: 'gang' },
{ label: 'Class', prop: 'classTitle' },
{ label: '目', prop: 'mu' },
{ label: 'Order', prop: 'orderTitle' },
{ label: '科', prop: 'ke' },
{ label: 'Family', prop: 'family' },
{ label: '属', prop: 'shu' },
{ label: 'Genus', prop: 'genus' },
{ label: '种', prop: 'zhong' },
{ label: 'Species', prop: 'species' },
{ label: '其他分类信息', prop: 'otherInfo', minWidth: 120 },
{ label: '数据来源', prop: 'sourcesData' },
{
label: '数据采集人',
prop: 'createUser',
isFormater: true,
minWidth: 120,
formater(row, column, cellValue, index) {
const user = userOptions.value.find((i) => i.id === cellValue);
return user ? user.userNickname : '';
},
},
{
label: '数据采集日期',
prop: 'createDate',
isFormater: true,
minWidth: 120,
formater(_: ClassifyStatuseTableColumns, col: any, val: string) {
return parseTime(val, '{y}-{m}-{d}');
},
},
{
label: '数据核查人',
prop: 'auditUser',
isFormater: true,
minWidth: 120,
formater(row, column, cellValue, index) {
const user = userOptions.value.find((i) => i.id === cellValue);
return user ? user.userNickname : '';
},
},
{
label: '数据核查日期',
prop: 'auditDate',
minWidth: 120,
isFormater: true,
formater(_: ClassifyStatuseTableColumns, col: any, val: string) {
return parseTime(val, '{y}-{m}-{d}');
},
},
{
label: '状态',
prop: 'auditStatus',
isFormater: true,
formater(row, column, cellValue, index) {
return cellValue == 0 ? '待审核' : cellValue == 1 ? '通过' : '不通过';
},
},
{ label: '备注', prop: 'remark' },
];
const onSearch = async (val: Record<string, any>) => {
let newVal: Record<string, any> = {};
for (const v in val) {
if (val[v]) {
newVal[v] = val[v];
}
}
state.tableData.param = { ...state.tableData.param, ...newVal };
getList();
};
const onReset = () => {
state.tableData.param = {
pageNum: 1,
pageSize: 10,
};
getList();
};
const searchForm = ref<Partial<ClassifyStatuseInfoData>>({
speciesCode: undefined,
jie: undefined,
kingdom: undefined,
men: undefined,
phylum: undefined,
gang: undefined,
classTitle: undefined,
mu: undefined,
orderTitle: undefined,
ke: undefined,
family: undefined,
shu: undefined,
genus: undefined,
zhong: undefined,
species: undefined,
otherInfo: undefined,
sourcesData: undefined,
});
const searchFields = computed<QueryFormField[]>(() => [
{ label: '物种编码', prop: 'speciesCode', type: 'input', placeholder: '请输入物种编码' },
{ label: '界', prop: 'jie', type: 'input', placeholder: '请输入界' },
{ label: 'kingdom', prop: 'kingdom', type: 'input', placeholder: '请输入kingdom' },
{ label: '门', prop: 'men', type: 'input', placeholder: '请输入门' },
{ label: 'Phylum', prop: 'phylum', type: 'input', placeholder: '请输入Phylum' },
{ label: '纲', prop: 'gang', type: 'input', placeholder: '请输入纲' },
{ label: 'Class', prop: 'classTitle', type: 'input', placeholder: '请输入Class' },
{ label: '目', prop: 'mu', type: 'input', placeholder: '请输入目' },
{ label: 'Order', prop: 'orderTitle', type: 'input', placeholder: '请输入Order' },
{ label: '科', prop: 'ke', type: 'input', placeholder: '请输入科' },
{ label: 'Family', prop: 'family', type: 'input', placeholder: '请输入Family' },
{ label: '属', prop: 'shu', type: 'input', placeholder: '请输入属' },
{ label: 'Genus', prop: 'genus', type: 'input', placeholder: '请输入Genus' },
{ label: '种', prop: 'zhong', type: 'input', placeholder: '请输入种' },
{ label: 'Species', prop: 'species', type: 'input', placeholder: '请输入Species' },
]);
// 页面加载时
onMounted(() => {
initTableData();
});
// 初始化表格数据
const initTableData = () => {
getList();
reqGetUserList();
};
// 获取列表数据
const getList = async () => {
loading.value = true;
const res = await listClassifyStatuse(state.tableData.param);
let list = res.data.list ?? [];
state.tableData.data = list;
versionMap.value = list.reduce((acc: any, cur: any) => {
acc[cur.id] = cur.version;
return acc;
}, {});
state.tableData.total = res.data.total;
loading.value = false;
};
const reqGetUserList = async () => {
if (userOptions.value.length > 0) return;
const res = await getUserList({ pageSize: 9999, pageNum: 1 });
userOptions.value = res.data.userList;
};
// 多选框选中数据
const handleSelectionChange = (selection: Array<ClassifyStatuseInfoData>) => {
state.ids = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
const showDialog = ref(false);
const formTitle = ref('');
const formFields = computed<PopupFormField[]>(() => [
{
label: '物种编码',
prop: 'speciesCode',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入物种编码', trigger: 'blur' }],
componentProps: {
placeholder: '请输入物种编码',
},
},
{
label: '界',
prop: 'jie',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入界', trigger: 'blur' }],
componentProps: {
placeholder: '请输入界',
},
},
{
label: 'kingdom',
prop: 'kingdom',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入kingdom', trigger: 'blur' }],
componentProps: {
placeholder: '请输入界',
}
},
{
label: '门',
prop: 'men',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入门', trigger: 'blur' }],
componentProps: {
placeholder: '请输入门',
},
},
{
label: 'Phylum',
prop: 'phylum',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Phylum', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Phylum',
},
},
{
label: '纲',
prop: 'gang',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入纲', trigger: 'blur' }],
componentProps: {
placeholder: '请输入纲',
},
},
{
label: 'Class',
prop: 'classTitle',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Class', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Class',
},
},
{
label: '目',
prop: 'mu',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入目', trigger: 'blur' }],
componentProps: {
placeholder: '请输入目',
}
},
{
label: 'Order',
prop: 'orderTitle',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Order', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Order',
},
},
{
label: '科',
prop: 'ke',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入科', trigger: 'blur' }],
componentProps: {
placeholder: '请输入科',
}
},
{
label: 'Family',
prop: 'family',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Family', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Family',
},
},
{
label: '属',
prop: 'shu',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入属', trigger: 'blur' }],
componentProps: {
placeholder: '请输入属',
}
},
{
label: 'Genus',
prop: 'genus',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Genus', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Genus',
},
},
{
label: '种',
prop: 'zhong',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入种', trigger: 'blur' }],
componentProps: {
placeholder: '请输入种',
},
},
{
label: 'Species',
prop: 'species',
type: 'input',
span: 12,
rules: [{ required: true, message: '请输入Species', trigger: 'blur' }],
componentProps: {
placeholder: '请输入Species',
},
},
{
label: '数据来源',
prop: 'sourcesData',
span: 12,
type: 'input',
rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
componentProps: {
placeholder: '请输入数据来源',
},
},
{
label: '其他分类信息',
prop: 'otherInfo',
span: 24,
type: 'input',
rules: [{ required: true, message: '请输入其他分类信息', trigger: 'blur' }],
componentProps: {
placeholder: '请输入其他信息',
type: 'textarea',
},
},
{
label: '数据采集人',
span: 12,
prop: 'createUser',
type: 'select',
rules: [{ required: true, message: '请选择数据采集人', trigger: 'change' }],
componentProps: {
placeholder: '请选择数据采集人',
},
options: userOptions.value.map((i) => {
return {
label: i.userNickname,
value: i.id,
};
}),
},
{
label: '数据采集日期',
span: 12,
prop: 'createDate',
type: 'date',
rules: [{ required: true, message: '请选择数据采集日期', trigger: 'change' }],
componentProps: {
placeholder: '请选择数据采集日期',
},
},
{
label: '备注',
prop: 'remark',
span: 24,
type: 'input',
componentProps: {
placeholder: '请输入备注',
type: 'textarea',
},
},
]);
const formData = ref<ClassifyStatuseInfoData>({
speciesCode: undefined,
jie: undefined,
kingdom: undefined,
men: undefined,
phylum: undefined,
gang: undefined,
classTitle: undefined,
mu: undefined,
orderTitle: undefined,
ke: undefined,
family: undefined,
shu: undefined,
genus: undefined,
id: undefined,
zhong: undefined,
species: undefined,
otherInfo: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
remark: undefined,
auditStatus: undefined,
auditUser: undefined,
auditDate: undefined,
version: undefined,
auditView: undefined,
});
const formType = ref<'add' | 'edit'>('add');
const handleFormSubmit = (form: ClassifyStatuseInfoData) => {
if (formType.value === 'add') {
addClassifyStatuse(form)
.then(() => {
ElMessage.success('新增成功');
handleCancel();
getList();
})
.catch(() => {
ElMessage.error('新增失败');
handleCancel();
getList();
});
} else {
form.auditStatus = 0;
updateClassifyStatuse(form)
.then(() => {
ElMessage.success('编辑成功');
handleCancel();
getList();
})
.catch(() => {
ElMessage.error('编辑失败');
handleCancel();
getList();
});
}
};
const handleCancel = () => {
showDialog.value = false;
formTitle.value = '';
formType.value = 'add';
formData.value = {
speciesCode: undefined,
jie: undefined,
kingdom: undefined,
men: undefined,
phylum: undefined,
gang: undefined,
classTitle: undefined,
mu: undefined,
orderTitle: undefined,
ke: undefined,
family: undefined,
shu: undefined,
genus: undefined,
zhong: undefined,
species: undefined,
otherInfo: undefined,
sourcesData: undefined,
id: undefined,
createUser: undefined,
createDate: undefined,
remark: undefined,
auditStatus: undefined,
auditUser: undefined,
auditDate: undefined,
version: undefined,
auditView: undefined,
};
};
const handleAdd = () => {
showDialog.value = true;
formTitle.value = '新增分类地位';
formType.value = 'add';
};
const handleUpdate = (row: ClassifyStatuseInfoData) => {
showDialog.value = true;
formTitle.value = '编辑分类地位';
formType.value = 'edit';
formData.value = cloneDeep(row);
};
const handleDelete = (row: ClassifyStatuseTableColumns | null) => {
let msg = '你确定要删除所选数据？';
let id: number[] = [];
if (row) {
msg = `此操作将永久删除数据，是否继续?`;
id = [row.id];
} else {
id = state.ids;
}
if (id.length === 0) {
ElMessage.error('请选择要删除的数据。');
return;
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delClassifyStatuse(
id,
id.map((i) => versionMap.value[i])
).then(() => {
ElMessage.success('删除成功');
getList();
});
})
.catch(() => {});
};
const auditFormRef = ref();
const showAuditDialog = ref(false);
const handleAudit = (row: ClassifyStatuseTableColumns) => {
auditFormRef.value.open(cloneDeep(row), userOptions.value);
};
const onAuditSubmit = (val: ClassifyStatuseTableColumns) => {
auditSpeciesName(val)
.then(() => {
ElMessage.success('审核成功');
showAuditDialog.value = false;
getList();
})
.catch(() => {
ElMessage.error('审核失败');
showAuditDialog.value = false;
getList();
});
};
</script>
<style lang="scss" scoped>
.colBlock {
display: block;
}
.colNone {
display: none;
}
.ml-2 {
margin: 3px;
}
</style>

78
src/views/businesses/classifyStatuse/type.ts Normal file
View File

@ -0,0 +1,78 @@
export interface ClassifyStatuseTableColumns {
id: number; //
speciesCode: string; // 物种编码
jie: string; // 界
kingdom: string; // Kingdom
men: string; // 门
phylum: string; // Phylum
gang: string; // 纲
classTitle: string; // Class
mu: string; // 目
orderTitle: string; // Order
ke: string; // 科
family: string; // Family
shu: string; // 属
genus: string; // Genus
zhong: string; // Genus
species: string; // Species
otherInfo: string; // 其他分类信息
sourcesData: string; // 数据来源
createUser: number; // 数据采集人
createDate: string; // 数据采集日期
auditUser: number; // 数据核查人
auditDate: string; // 数据核查日期
auditStatus: number; // 核查
auditView: string; // 核查意见
remark: string; // 备注
version: number; // 版本
createdAt: string; //
}
export interface ClassifyStatuseInfoData {
id?: number | undefined; //
speciesCode: string | undefined; // 物种编码
jie: string | undefined; // 界
kingdom: string | undefined; // Kingdom
men: string | undefined; // 门
phylum: string | undefined; // Phylum
gang: string | undefined; // 纲
classTitle: string | undefined; // Class
mu: string | undefined; // 目
orderTitle: string | undefined; // Order
ke: string | undefined; // 科
family: string | undefined; // Family
shu: string | undefined; // 属
genus: string | undefined; // Genus
zhong: string | undefined; // Genus
species: string | undefined; // Species
otherInfo: string | undefined; // 其他分类信息
sourcesData: string | undefined; // 数据来源
createUser: number | undefined; // 数据采集人
createDate: string | undefined; // 数据采集日期
auditUser: number | undefined; // 数据核查人
auditDate: string | undefined; // 数据核查日期
auditStatus: number | undefined; // 核查
auditView: string | undefined; // 核查意见
remark: string | undefined; // 备注
version: number | undefined; // 版本
}
export interface ClassifyStatuseTableDataState {
ids: any[];
tableData: {
data: Array<ClassifyStatuseTableColumns>;
total: number;
loading: boolean;
param: {
pageNum: number;
pageSize: number;
};
};
}
export interface ClassifyStatuseEditState {
loading: boolean;
isShowDialog: boolean;
formData: ClassifyStatuseInfoData;
rules: object;
}

200
src/views/businesses/speciesName/ApiV1BusinessesSpeciesNameDetail.vue
View File

@ -1,200 +0,0 @@
<template>
<!-- 详情抽屉 -->
<div class="demo-speciesName-detail">
<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
<template #header>
<h4>详情</h4>
</template>
<el-descriptions
class="margin-top"
:column="3"
border
style="margin: 8px;"
>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
主键
</div>
</template>
{{ formData.id }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
物种编号
</div>
</template>
{{ formData.speciesCode }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
物种名称
</div>
</template>
{{ formData.name }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
物种名称内容
</div>
</template>
{{ formData.content }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
数据来源
</div>
</template>
{{ formData.sourcesData }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
数据采集人
</div>
</template>
{{ formData.createUser }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
数据采集信息
</div>
</template>
{{ proxy.parseTime(formData.createDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
数据核查人
</div>
</template>
{{ formData.auditUser }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
数据核查日期
</div>
</template>
{{ proxy.parseTime(formData.auditDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
</el-descriptions-item>
<el-descriptions-item :span="1">
<template #label>
<div class="cell-item">
备注
</div>
</template>
{{ formData.remark }}
</el-descriptions-item>
</el-descriptions>
</el-drawer>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
listSpeciesName,
getSpeciesName,
delSpeciesName,
addSpeciesName,
updateSpeciesName,
} from "./api";
import {
SpeciesNameTableColumns,
SpeciesNameInfoData,
SpeciesNameTableDataState,
SpeciesNameEditState
} from "./type"
defineOptions({ name: "ApiV1BusinessesSpeciesNameDetail"})
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SpeciesNameEditState>({
loading:false,
isShowDialog: false,
formData: {
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
},
// 表单校验
rules: {
id : [
{ required: true, message: "主键不能为空", trigger: "blur" }
],
name : [
{ required: true, message: "物种名称不能为空", trigger: "blur" }
],
}
});
const { isShowDialog,formData } = toRefs(state);
// 打开弹窗
const openDialog = (row?: SpeciesNameInfoData) => {
resetForm();
if(row) {
getSpeciesName(row.id!).then((res:any)=>{
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
defineExpose({
openDialog,
});
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
}
};
</script>
<style scoped>
.demo-speciesName-detail :deep(.el-form-item--large .el-form-item__label){
font-weight: bolder;
}
.pic-block{
margin-right: 8px;
}
.file-block{
width: 100%;
border: 1px solid var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
margin-bottom: 5px;
padding: 3px 6px;
}
.ml-2{margin-right: 5px;}
</style>

173
src/views/businesses/speciesName/ApiV1BusinessesSpeciesNameEdit.vue
View File

@ -1,173 +0,0 @@
<template>
<div class="demo-speciesName-edit">
<!-- 添加或修改对话框 -->
<el-dialog v-model="isShowDialog" width="800px" :close-on-click-modal="false" :destroy-on-close="true">
<template #header>
<div v-drag="['.demo-speciesName-edit .el-dialog', '.demo-speciesName-edit .el-dialog__header']">{{(!formData.id || formData.id==0?'添加':'修改')+''}}</div>
</template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="物种编号" prop="speciesCode">
<el-input v-model="formData.speciesCode" placeholder="请输入物种编号" />
</el-form-item>
<el-form-item label="物种名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入物种名称" />
</el-form-item>
<el-form-item label="物种名称内容" prop="content">
<el-input v-model="formData.content" placeholder="请输入物种名称内容" />
</el-form-item>
<el-form-item label="数据来源" prop="sourcesData">
<el-input v-model="formData.sourcesData" placeholder="请输入数据来源" />
</el-form-item>
<el-form-item label="数据采集人" prop="createUser">
<el-input v-model="formData.createUser" placeholder="请输入数据采集人" />
</el-form-item>
<el-form-item label="数据采集信息" prop="createDate">
<el-date-picker clearable style="width: 200px"
v-model="formData.createDate"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择数据采集信息">
</el-date-picker>
</el-form-item>
<el-form-item label="数据核查人" prop="auditUser">
<el-input v-model="formData.auditUser" placeholder="请输入数据核查人" />
</el-form-item>
<el-form-item label="数据核查日期" prop="auditDate">
<el-date-picker clearable style="width: 200px"
v-model="formData.auditDate"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择数据核查日期">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit" :disabled="loading">确 定</el-button>
<el-button @click="onCancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
import {
listSpeciesName,
getSpeciesName,
delSpeciesName,
addSpeciesName,
updateSpeciesName,
} from "./api";
import {
SpeciesNameTableColumns,
SpeciesNameInfoData,
SpeciesNameTableDataState,
SpeciesNameEditState
} from "./type"
defineOptions({ name: "ApiV1BusinessesSpeciesNameEdit"})
const emit = defineEmits(['speciesNameList'])
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const state = reactive<SpeciesNameEditState>({
loading:false,
isShowDialog: false,
formData: {
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
},
// 表单校验
rules: {
id : [
{ required: true, message: "主键不能为空", trigger: "blur" }
],
name : [
{ required: true, message: "物种名称不能为空", trigger: "blur" }
],
}
});
const { loading,isShowDialog,formData,rules } = toRefs(state);
// 打开弹窗
const openDialog = (row?: SpeciesNameInfoData) => {
resetForm();
if(row) {
getSpeciesName(row.id!).then((res:any)=>{
const data = res.data;
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
defineExpose({
openDialog,
});
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
state.loading = true;
if(!state.formData.id || state.formData.id===0){
//添加
addSpeciesName(state.formData).then(()=>{
ElMessage.success('添加成功');
closeDialog(); // 关闭弹窗
emit('speciesNameList')
}).finally(()=>{
state.loading = false;
})
}else{
//修改
updateSpeciesName(state.formData).then(()=>{
ElMessage.success('修改成功');
closeDialog(); // 关闭弹窗
emit('speciesNameList')
}).finally(()=>{
state.loading = false;
})
}
}
});
};
const resetForm = ()=>{
state.formData = {
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
}
};
</script>
<style scoped>
.kv-label{margin-bottom: 15px;font-size: 14px;}
.mini-btn i.el-icon{margin: unset;}
.kv-row{margin-bottom: 12px;}
</style>

54
src/views/businesses/speciesName/api.ts Normal file
View File

@ -0,0 +1,54 @@
import request from '/@/utils/request';
// 查询列表
export function listSpeciesName(query: object) {
return request({
url: '/api/v1/businesses/speciesName/list',
method: 'get',
params: query,
});
}
// 查询详细
export function getSpeciesName(id: number) {
return request({
url: '/api/v1/businesses/speciesName/get',
method: 'get',
params: {
id: id.toString(),
},
});
}
// 新增
export function addSpeciesName(data: object) {
return request({
url: '/api/v1/businesses/speciesName/add',
method: 'post',
data: data,
});
}
// 修改
export function updateSpeciesName(data: object) {
return request({
url: '/api/v1/businesses/speciesName/edit',
method: 'put',
data: data,
});
}
// 删除
export function delSpeciesName(ids: number[], version: number[]) {
return request({
url: '/api/v1/businesses/speciesName/delete',
method: 'delete',
data: {
ids: ids,
version: version,
},
});
}
export function auditSpeciesName(data:object) {
return request({
url: '/api/v1/businesses/speciesName/audit',
method: 'post',
data: data,
});
}

45
src/views/businesses/speciesName/api/index.ts
View File

@ -1,45 +0,0 @@
import request from '/@/utils/request'
// 查询列表
export function listSpeciesName(query:object) {
return request({
url: '/api/v1/businesses/speciesName/list',
method: 'get',
params: query
})
}
// 查询详细
export function getSpeciesName(id:number) {
return request({
url: '/api/v1/businesses/speciesName/get',
method: 'get',
params: {
id: id.toString()
}
})
}
// 新增
export function addSpeciesName(data:object) {
return request({
url: '/api/v1/businesses/speciesName/add',
method: 'post',
data: data
})
}
// 修改
export function updateSpeciesName(data:object) {
return request({
url: '/api/v1/businesses/speciesName/edit',
method: 'put',
data: data
})
}
// 删除
export function delSpeciesName(ids:number[]) {
return request({
url: '/api/v1/businesses/speciesName/delete',
method: 'delete',
data:{
ids:ids
}
})
}

441
src/views/businesses/speciesName/index.vue
View File

@ -25,39 +25,54 @@
> >
</el-col> </el-col>
</el-row> </el-row>
<ProTable <ProTable
v-if="columns.length > 0"
ref="proTableRef" ref="proTableRef"
:columns="columns" :columns="columns"
:data="tableData.data" :data="tableData.data"
:loading="loading" :loading="loading"
:show-selection="true" :show-selection="true"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
:heightOffset="400"
:action-width="280"
:show-expand="true"
> >
</ProTable> <template #expand="{ row }">
<!-- <el-table-column <el-form-item label="核查意见">
label="操作" {{ row.auditView }}
align="center" </el-form-item>
class-name="small-padding" <el-form-item label="备注">
min-width="160px" {{ row.remark }}
fixed="right" </el-form-item>
> </template>
<template #default="scope"> <template #actions="{ row }">
<el-button <el-button
type="primary" type="primary"
link @click="handleUpdate(row)"
@click="handleUpdate(scope.row)" size="small"
v-auth="'api/v1/businesses/speciesName/edit'" v-auth="'api/v1/businesses/speciesName/edit'"
v-if="row.auditStatus != 1"
><el-icon><ele-EditPen /></el-icon>修改</el-button ><el-icon><ele-EditPen /></el-icon>修改</el-button
> >
<el-button <el-button
type="primary" type="danger"
link size="small"
@click="handleDelete(scope.row)" @click="handleDelete(row)"
v-auth="'api/v1/businesses/speciesName/delete'" v-auth="'api/v1/businesses/speciesName/delete'"
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
> >
<el-button
type="warning"
size="small"
@click="handleAudit(row)"
v-if="row.auditStatus == 0"
v-auth="'api/v1/businesses/speciesName/audit'"
><el-icon><ele-Check /></el-icon>审核</el-button
>
</template> </template>
</el-table-column> --> </ProTable>
<pagination <pagination
v-show="tableData.total > 0" v-show="tableData.total > 0"
:total="tableData.total" :total="tableData.total"
@ -66,60 +81,142 @@
@pagination="speciesNameList" @pagination="speciesNameList"
/> />
</el-card> </el-card>
<ApiV1BusinessesSpeciesNameEdit
ref="editRef" <ModalForm
@speciesNameList="speciesNameList" v-model:visible="showDialog"
></ApiV1BusinessesSpeciesNameEdit> :title="formTitle"
<ApiV1BusinessesSpeciesNameDetail :fields="formFields"
ref="detailRef" v-model:modelValue="formData"
@speciesNameList="speciesNameList" :type="formType"
></ApiV1BusinessesSpeciesNameDetail> :show-footer="true"
:label-width="'120px'"
:width="'50%'"
@submit="handleFormSubmit"
@cancel="handleCancel"
ref="modalFormRef"
>
</ModalForm>
<AuditForm
ref="auditFormRef"
v-model="showAuditDialog"
title="审核数据"
@submit="onAuditSubmit"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { toRefs, reactive, onMounted, ref, getCurrentInstance, toRaw, computed } from 'vue'; import { toRefs, reactive, onMounted, ref, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import { listSpeciesName, delSpeciesName } from './api/index'; import {
import { SpeciesNameTableColumns, SpeciesNameInfoData, SpeciesNameTableDataState } from './type'; listSpeciesName,
import ApiV1BusinessesSpeciesNameDetail from './ApiV1BusinessesSpeciesNameDetail.vue'; delSpeciesName,
import ApiV1BusinessesSpeciesNameEdit from './ApiV1BusinessesSpeciesNameEdit.vue'; addSpeciesName,
updateSpeciesName,
auditSpeciesName,
} from './api';
import {
SpeciesNameTableColumns,
SpeciesNameInfoData,
SpeciesNameTableDataState,
} from '/@/views/businesses/speciesName/type';
import QueryForm from '/@/components/dynamicpage/queryForm/index.vue'; import QueryForm from '/@/components/dynamicpage/queryForm/index.vue';
import ProTable from '/@/components/dynamicpage/ProTable/index.vue'; import ProTable from '/@/components/dynamicpage/ProTable/index.vue';
import { QueryFormField, TableColumn } from '/@/components/dynamicpage/type'; import ModalForm from '/@/components/dynamicpage/modalForm/index.vue';
import AuditForm from '/@/components/dynamicpage/auditForm/index.vue';
import { QueryFormField, TableColumn, PopupFormField } from '/@/components/dynamicpage/type';
import { getUserList } from '/@/api/system/user/index'; import { getUserList } from '/@/api/system/user/index';
import { UserItem } from '/@/types'; import { UserItem, VersionMap } from '/@/types';
import { parseTime } from '/@/utils/gfast'; import { parseTime } from '/@/utils/gfast';
import { cloneDeep } from 'lodash';
defineOptions({ name: 'apiV1DemoSpeciesNameList' }); defineOptions({ name: 'apiV1DemoSpeciesNameList' });
const { proxy } = <any>getCurrentInstance();
const loading = ref(false);
const editRef = ref();
const detailRef = ref();
const loading = ref(false);
// 非单个禁用 // 非单个禁用
const single = ref(true); const single = ref(true);
// 非多个禁用 // 非多个禁用
const multiple = ref(true); const multiple = ref(true);
const userOptions = ref<UserItem[]>([]); const userOptions = ref<UserItem[]>([]);
const state = reactive<SpeciesNameTableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
},
},
});
const versionMap = ref<VersionMap>({} as VersionMap);
const proTableRef = ref();
const { tableData } = toRefs(state);
const columns: TableColumn[] = [
{ label: '物种编码', prop: 'speciesCode' },
{ label: '物种名称', prop: 'name' },
{ label: '物种名称内容', prop: 'content' },
{ label: '数据来源', prop: 'sourcesData' },
{
label: '数据采集人',
prop: 'createUser',
isFormater: true,
formater(row, column, cellValue, index) {
const user = userOptions.value.find((i) => i.id === cellValue);
return user ? user.userNickname : '';
},
},
{
label: '数据采集日期',
prop: 'createDate',
isFormater: true,
formater(_: SpeciesNameTableColumns, col: any, val: string) {
return parseTime(val, '{y}-{m}-{d}');
},
},
{
label: '数据核查人',
prop: 'auditUser',
isFormater: true,
formater(row, column, cellValue, index) {
const user = userOptions.value.find((i) => i.id === cellValue);
return user ? user.userNickname : '';
},
},
{
label: '数据核查日期',
prop: 'auditDate',
isFormater: true,
formater(_: SpeciesNameTableColumns, col: any, val: string) {
return parseTime(val, '{y}-{m}-{d}');
},
},
{
label: '状态',
prop: 'auditStatus',
isFormater: true,
formater(row, column, cellValue, index) {
return cellValue == 0 ? '待审核' : cellValue == 1 ? '通过' : '不通过';
},
},
];
const onSearch = async (val: Record<string, any>) => { const onSearch = async (val: Record<string, any>) => {
console.log('搜索参数', val); let newVal: Record<string, any> = {};
state.tableData.param = { ...state.tableData.param, ...val }; for (const v in val) {
if (val[v]) {
newVal[v] = val[v];
}
}
console.log(newVal);
state.tableData.param = { ...state.tableData.param, ...newVal };
speciesNameList(); speciesNameList();
}; };
const onReset = () => { const onReset = () => {
state.tableData.param = { state.tableData.param = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
dateRange: [],
}; };
speciesNameList(); speciesNameList();
}; };
@ -165,45 +262,6 @@ const searchFields = computed<QueryFormField[]>(() => [
{ label: '数据核查日期', prop: 'auditDate', type: 'daterange', valueFormat: 'YYYY-MM-DD' }, { label: '数据核查日期', prop: 'auditDate', type: 'daterange', valueFormat: 'YYYY-MM-DD' },
]); ]);
const state = reactive<SpeciesNameTableDataState>({
ids: [],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
dateRange: [],
},
},
});
const { tableData } = toRefs(state);
const columns: TableColumn[] = [
{ label: '物种编码', prop: 'speciesCode' },
{ label: '物种名称', prop: 'name' },
{ label: '物种名称内容', prop: 'content' },
{ label: '数据来源', prop: 'sourcesData' },
{ label: '数据采集人', prop: 'createUser' },
{ label: '数据采集日期', prop: 'createDate',isFormater:true,formater(row,col){
console.log(row,col);
return parseTime(row.createDate,'{y}-{m}-{d}')
} },
{ label: '数据核查人', prop: 'auditUser' },
{ label: '数据核查日期', prop: 'auditDate' },
{ label: '备注', prop: 'remark' },
];
const proTableRef = ref();
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
initTableData(); initTableData();
@ -219,6 +277,10 @@ const speciesNameList = async () => {
const res = await listSpeciesName(state.tableData.param); const res = await listSpeciesName(state.tableData.param);
let list = res.data.list ?? []; let list = res.data.list ?? [];
state.tableData.data = list; state.tableData.data = list;
versionMap.value = list.reduce((acc: any, cur: any) => {
acc[cur.id] = cur.version;
return acc;
}, {});
state.tableData.total = res.data.total; state.tableData.total = res.data.total;
loading.value = false; loading.value = false;
}; };
@ -233,16 +295,183 @@ const handleSelectionChange = (selection: Array<SpeciesNameInfoData>) => {
single.value = selection.length != 1; single.value = selection.length != 1;
multiple.value = !selection.length; multiple.value = !selection.length;
}; };
const handleAdd = () => {
editRef.value.openDialog(); const showDialog = ref(false);
}; const formTitle = ref('');
const handleUpdate = (row: SpeciesNameTableColumns | null) => { const formFields = computed<PopupFormField[]>(() => [
if (!row) { {
row = state.tableData.data.find((item: SpeciesNameTableColumns) => { label: '物种编码',
return item.id === state.ids[0]; prop: 'speciesCode',
}) as SpeciesNameTableColumns; type: 'input',
span: 12,
rules: [{ required: true, message: '请输入物种编码', trigger: 'blur' }],
componentProps: {
placeholder: '请输入物种编码',
},
},
{
label: '物种名称',
prop: 'name',
span: 12,
type: 'input',
rules: [{ required: true, message: '请输入物种名称', trigger: 'blur' }],
componentProps: {
placeholder: '请输入物种名称',
},
},
{
label: '物种名称内容',
prop: 'content',
type: 'input',
rules: [{ required: true, message: '请输入物种名称内容', trigger: 'blur' }],
componentProps: {
placeholder: '请输入物种名称内容',
type: 'textarea',
},
},
{
label: '数据来源',
prop: 'sourcesData',
span: 24,
type: 'input',
rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
componentProps: {
placeholder: '请输入数据来源',
},
},
{
label: '数据采集人',
span: 12,
prop: 'createUser',
type: 'select',
rules: [{ required: true, message: '请选择数据采集人', trigger: 'change' }],
componentProps: {
placeholder: '请选择数据采集人',
},
options: userOptions.value.map((i) => {
return {
label: i.userNickname,
value: i.id,
};
}),
},
{
label: '数据采集日期',
span: 12,
prop: 'createDate',
type: 'date',
rules: [{ required: true, message: '请选择数据采集日期', trigger: 'change' }],
componentProps: {
placeholder: '请选择数据采集日期',
},
},
// {
// label: '数据核查人',
// span: 12,
// prop: 'auditUser',
// type: 'select',
// rules: [{ required: true, message: '请选择数据核查人', trigger: 'change' }],
// componentProps: {
// placeholder: '请选择数据核查人',
// },
// options: userOptions.value.map((i) => {
// return {
// label: i.userNickname,
// value: i.id,
// };
// }),
// },
// {
// label: '数据核查日期',
// span: 12,
// prop: 'auditDate',
// type: 'date',
// rules: [{ required: true, message: '请选择数据核查日期', trigger: 'change' }],
// componentProps: {
// placeholder: '请选择数据核查日期',
// },
// },
{
label: '备注',
prop: 'remark',
span: 24,
type: 'input',
componentProps: {
placeholder: '请输入备注',
type: 'textarea',
},
},
]);
const formData = ref<SpeciesNameInfoData>({
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
});
const formType = ref<'add' | 'edit'>('add');
const handleFormSubmit = (form: SpeciesNameInfoData) => {
if (formType.value === 'add') {
addSpeciesName(form)
.then(() => {
ElMessage.success('新增成功');
handleCancel();
speciesNameList();
})
.catch(() => {
ElMessage.error('新增失败');
handleCancel();
speciesNameList();
});
} else {
form.auditStatus = 0;
updateSpeciesName(form)
.then(() => {
ElMessage.success('编辑成功');
handleCancel();
speciesNameList();
})
.catch(() => {
ElMessage.error('编辑失败');
handleCancel();
speciesNameList();
});
} }
editRef.value.openDialog(toRaw(row)); };
const handleCancel = () => {
showDialog.value = false;
formTitle.value = '';
formType.value = 'add';
formData.value = {
id: undefined,
speciesCode: undefined,
name: undefined,
content: undefined,
sourcesData: undefined,
createUser: undefined,
createDate: undefined,
auditUser: undefined,
auditDate: undefined,
remark: undefined,
};
};
const handleAdd = () => {
showDialog.value = true;
formTitle.value = '新增物种名称';
formType.value = 'add';
};
const handleUpdate = (row: SpeciesNameTableColumns) => {
showDialog.value = true;
formTitle.value = '编辑物种名称';
formType.value = 'edit';
formData.value = cloneDeep(row);
}; };
const handleDelete = (row: SpeciesNameTableColumns | null) => { const handleDelete = (row: SpeciesNameTableColumns | null) => {
let msg = '你确定要删除所选数据？'; let msg = '你确定要删除所选数据？';
@ -263,11 +492,33 @@ const handleDelete = (row: SpeciesNameTableColumns | null) => {
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
delSpeciesName(id).then(() => { delSpeciesName(
id,
id.map((i) => versionMap.value[i])
).then(() => {
ElMessage.success('删除成功'); ElMessage.success('删除成功');
speciesNameList(); speciesNameList();
}); });
}) })
.catch(() => {}); .catch(() => {});
}; };
const auditFormRef = ref();
const showAuditDialog = ref(false);
const handleAudit = (row: SpeciesNameTableColumns) => {
auditFormRef.value.open(cloneDeep(row), userOptions.value);
};
const onAuditSubmit = (val: SpeciesNameTableColumns) => {
auditSpeciesName(val)
.then(() => {
ElMessage.success('审核成功');
showAuditDialog.value = false;
speciesNameList();
})
.catch(() => {
ElMessage.error('审核失败');
showAuditDialog.value = false;
speciesNameList();
});
};
</script> </script>

11
src/views/businesses/speciesName/type/index.ts → src/views/businesses/speciesName/type.ts
View File

@ -22,6 +22,7 @@ export interface SpeciesNameInfoData {
auditUser: number | undefined; // 数据核查人 auditUser: number | undefined; // 数据核查人
auditDate: string | undefined; // 数据核查日期 auditDate: string | undefined; // 数据核查日期
remark: string | undefined; // 备注 remark: string | undefined; // 备注
auditStatus?: number | undefined; // 审核状态
} }
export interface SpeciesNameTableDataState { export interface SpeciesNameTableDataState {
@ -33,16 +34,6 @@ export interface SpeciesNameTableDataState {
param: { param: {
pageNum: number; pageNum: number;
pageSize: number; pageSize: number;
id: number | undefined;
speciesCode: string | undefined;
name: string | undefined;
content: string | undefined;
sourcesData: string | undefined;
createUser: number | undefined;
createDate: string | undefined;
auditUser: number | undefined;
auditDate: string | undefined;
dateRange: string[];
}; };
}; };
} }