274 lines
7.7 KiB
Vue
274 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-card shadow="hover">
|
|
<QueryForm
|
|
v-model="searchForm"
|
|
:fields="searchFields"
|
|
@search="onSearch"
|
|
@reset="onReset"
|
|
ref="queryFormRef"
|
|
/>
|
|
|
|
<el-row :gutter="10" style="padding-bottom: 10px">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" @click="handleAdd" v-auth="'api/v1/businesses/speciesName/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/speciesName/delete'"
|
|
><el-icon><ele-Delete /></el-icon>删除</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
<ProTable
|
|
ref="proTableRef"
|
|
:columns="columns"
|
|
:data="tableData.data"
|
|
:loading="loading"
|
|
:show-selection="true"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
</ProTable>
|
|
<!-- <el-table-column
|
|
label="操作"
|
|
align="center"
|
|
class-name="small-padding"
|
|
min-width="160px"
|
|
fixed="right"
|
|
>
|
|
<template #default="scope">
|
|
<el-button
|
|
type="primary"
|
|
link
|
|
@click="handleUpdate(scope.row)"
|
|
v-auth="'api/v1/businesses/speciesName/edit'"
|
|
><el-icon><ele-EditPen /></el-icon>修改</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
link
|
|
@click="handleDelete(scope.row)"
|
|
v-auth="'api/v1/businesses/speciesName/delete'"
|
|
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column> -->
|
|
<pagination
|
|
v-show="tableData.total > 0"
|
|
:total="tableData.total"
|
|
v-model:page="tableData.param.pageNum"
|
|
v-model:limit="tableData.param.pageSize"
|
|
@pagination="speciesNameList"
|
|
/>
|
|
</el-card>
|
|
<ApiV1BusinessesSpeciesNameEdit
|
|
ref="editRef"
|
|
@speciesNameList="speciesNameList"
|
|
></ApiV1BusinessesSpeciesNameEdit>
|
|
<ApiV1BusinessesSpeciesNameDetail
|
|
ref="detailRef"
|
|
@speciesNameList="speciesNameList"
|
|
></ApiV1BusinessesSpeciesNameDetail>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { toRefs, reactive, onMounted, ref, getCurrentInstance, toRaw, computed } from 'vue';
|
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
import { listSpeciesName, delSpeciesName } from './api/index';
|
|
import { SpeciesNameTableColumns, SpeciesNameInfoData, SpeciesNameTableDataState } from './type';
|
|
import ApiV1BusinessesSpeciesNameDetail from './ApiV1BusinessesSpeciesNameDetail.vue';
|
|
import ApiV1BusinessesSpeciesNameEdit from './ApiV1BusinessesSpeciesNameEdit.vue';
|
|
import QueryForm from '/@/components/dynamicpage/queryForm/index.vue';
|
|
import ProTable from '/@/components/dynamicpage/ProTable/index.vue';
|
|
import { QueryFormField, TableColumn } from '/@/components/dynamicpage/type';
|
|
import { getUserList } from '/@/api/system/user/index';
|
|
import { UserItem } from '/@/types';
|
|
import { parseTime } from '/@/utils/gfast';
|
|
defineOptions({ name: 'apiV1DemoSpeciesNameList' });
|
|
const { proxy } = <any>getCurrentInstance();
|
|
const loading = ref(false);
|
|
const editRef = ref();
|
|
const detailRef = ref();
|
|
|
|
// 非单个禁用
|
|
const single = ref(true);
|
|
// 非多个禁用
|
|
const multiple = ref(true);
|
|
const userOptions = ref<UserItem[]>([]);
|
|
|
|
const onSearch = async (val: Record<string, any>) => {
|
|
console.log('搜索参数', val);
|
|
state.tableData.param = { ...state.tableData.param, ...val };
|
|
speciesNameList();
|
|
};
|
|
const onReset = () => {
|
|
state.tableData.param = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
id: undefined,
|
|
speciesCode: undefined,
|
|
name: undefined,
|
|
content: undefined,
|
|
sourcesData: undefined,
|
|
createUser: undefined,
|
|
createDate: undefined,
|
|
auditUser: undefined,
|
|
auditDate: undefined,
|
|
dateRange: [],
|
|
};
|
|
speciesNameList();
|
|
};
|
|
const searchForm = ref<Omit<SpeciesNameInfoData, 'id' | 'remark' | 'content'>>({
|
|
speciesCode: undefined,
|
|
name: undefined,
|
|
sourcesData: undefined,
|
|
createUser: undefined,
|
|
createDate: undefined,
|
|
auditUser: undefined,
|
|
auditDate: undefined,
|
|
});
|
|
const searchFields = computed<QueryFormField[]>(() => [
|
|
{ label: '物种编码', prop: 'speciesCode', type: 'input', placeholder: '请输入物种编码' },
|
|
{ label: '物种名称', prop: 'name', type: 'input', placeholder: '请输入物种名称' },
|
|
{ label: '数据来源', prop: 'sourcesData', type: 'input', placeholder: '请输入数据来源' },
|
|
{
|
|
label: '数据采集人',
|
|
prop: 'createUser',
|
|
type: 'select',
|
|
options: userOptions.value.map((i) => {
|
|
return {
|
|
label: i.userNickname,
|
|
value: i.id,
|
|
};
|
|
}),
|
|
placeholder: '请选择数据采集人',
|
|
},
|
|
{ label: '数据采集日期', prop: 'createDate', type: 'daterange', valueFormat: 'YYYY-MM-DD' },
|
|
|
|
{
|
|
label: '数据核查人',
|
|
prop: 'auditUser',
|
|
type: 'select',
|
|
options: userOptions.value.map((i) => {
|
|
return {
|
|
label: i.userNickname,
|
|
value: i.id,
|
|
};
|
|
}),
|
|
placeholder: '请选择数据核查人',
|
|
},
|
|
{ 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(() => {
|
|
initTableData();
|
|
});
|
|
// 初始化表格数据
|
|
const initTableData = () => {
|
|
speciesNameList();
|
|
reqGetUserList();
|
|
};
|
|
// 获取列表数据
|
|
const speciesNameList = async () => {
|
|
loading.value = true;
|
|
const res = await listSpeciesName(state.tableData.param);
|
|
let list = res.data.list ?? [];
|
|
state.tableData.data = list;
|
|
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<SpeciesNameInfoData>) => {
|
|
state.ids = selection.map((item) => item.id);
|
|
single.value = selection.length != 1;
|
|
multiple.value = !selection.length;
|
|
};
|
|
const handleAdd = () => {
|
|
editRef.value.openDialog();
|
|
};
|
|
const handleUpdate = (row: SpeciesNameTableColumns | null) => {
|
|
if (!row) {
|
|
row = state.tableData.data.find((item: SpeciesNameTableColumns) => {
|
|
return item.id === state.ids[0];
|
|
}) as SpeciesNameTableColumns;
|
|
}
|
|
editRef.value.openDialog(toRaw(row));
|
|
};
|
|
const handleDelete = (row: SpeciesNameTableColumns | 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(() => {
|
|
delSpeciesName(id).then(() => {
|
|
ElMessage.success('删除成功');
|
|
speciesNameList();
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
</script>
|