You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

478 lines
19 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class='p-2'>
<transition :enter-active-class='proxy?.animate.searchAnimate.enter'
:leave-active-class='proxy?.animate.searchAnimate.leave'>
<div v-show='showSearch' class='mb-[10px]'>
<el-card shadow='hover'>
<el-form ref='queryFormRef' :model='queryParams' :inline='true' >
<el-form-item label='所属模块' prop='moduleType'>
<el-select v-model='queryParams.moduleType' placeholder='请选择所属模块' clearable>
<el-option v-for='dict in sys_module_type' :key='dict.value' :label='dict.label' :value='dict.value' />
</el-select>
</el-form-item>
<el-form-item label='主数据标题' prop='masterDataTitle' label-width="90px">
<el-input v-model='queryParams.masterDataTitle' placeholder='请输入主数据标题' clearable
@keyup.enter='handleQuery' />
</el-form-item>
<el-form-item label='激活标识' prop='activeFlag'>
<el-select v-model='queryParams.activeFlag' placeholder='请选择激活标识' clearable>
<el-option v-for='dict in active_flag' :key='dict.value' :label='dict.label' :value='dict.value' />
</el-select>
</el-form-item>
<el-form-item>
<el-button type='primary' icon='Search' @click='handleQuery'>搜索</el-button>
<el-button icon='Refresh' @click='resetQuery'>重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow='never'>
<template #header>
<el-row :gutter='10' class='mb8'>
<el-col :span='1.5'>
<el-button type='primary' plain icon='Plus' @click='handleAdd' v-hasPermi="['system:masterData:add']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='success' plain icon='Edit' :disabled='single' @click='handleUpdate()'
v-hasPermi="['system:masterData:edit']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='danger' plain icon='Delete' :disabled='multiple' @click='handleDelete()'
v-hasPermi="['system:masterData:remove']">
</el-button>
</el-col>
<el-col :span='1.5'>
<el-button type='warning' plain icon='Download' @click='handleExport'
v-hasPermi="['system:masterData:export']">
</el-button>
</el-col>
<right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
@queryTable='getList'></right-toolbar>
</el-row>
</template>
<el-table v-loading='loading' :data='masterDataList' @selection-change='handleSelectionChange'>
<el-table-column type='selection' width='55' align='center' />
<el-table-column label='主键标识' align='center' prop='masterDataId' v-if='columns[0].visible' />
<el-table-column label='所属模块' align='center' prop='moduleType' v-if='columns[2].visible'>
<template #default='scope'>
<dict-tag :options='sys_module_type' :value='scope.row.moduleType' />
</template>
</el-table-column>
<el-table-column label='父级标识' align='center' prop='parentFlag' v-if='columns[3].visible'>
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.parentFlag' />
</template>
</el-table-column>
<el-table-column label='菜单ID' align='center' prop='menuId' v-if='columns[4].visible' />
<el-table-column label='路由参数' align='center' prop='queryParam' v-if='columns[5].visible' width="130"/>
<el-table-column label='主数据标题' align='center' prop='masterDataTitle' v-if='columns[6].visible' width="100"/>
<el-table-column label='预留字段1名称' align='center' prop='fieldName1' v-if='columns[7].visible' />
<el-table-column label='预留字段1显示标识' align='center' prop='displayFlag1' v-if='columns[8].visible' width="90">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.displayFlag1' />
</template>
</el-table-column>
<el-table-column label='预留字段2名称' align='center' prop='fieldName2' v-if='columns[9].visible' />
<el-table-column label='预留字段2显示标识' align='center' prop='displayFlag2' v-if='columns[10].visible' width="90">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.displayFlag2' />
</template>
</el-table-column>
<el-table-column label='预留字段3名称' align='center' prop='fieldName3' v-if='columns[11].visible' />
<el-table-column label='预留字段3显示标识' align='center' prop='displayFlag3' v-if='columns[12].visible' width="90">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.displayFlag3' />
</template>
</el-table-column>
<el-table-column label='预留字段4名称' align='center' prop='fieldName4' v-if='columns[13].visible' />
<el-table-column label='预留字段4显示标识' align='center' prop='displayFlag4' v-if='columns[14].visible' width="90">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.displayFlag4' />
</template>
</el-table-column>
<el-table-column label='预留字段5名称' align='center' prop='fieldName5' v-if='columns[15].visible' />
<el-table-column label='预留字段5显示标识' align='center' prop='displayFlag5' v-if='columns[16].visible' width="90">
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.displayFlag5' />
</template>
</el-table-column>
<el-table-column label='激活标识' align='center' prop='activeFlag' v-if='columns[17].visible'>
<template #default='scope'>
<dict-tag :options='active_flag' :value='scope.row.activeFlag' />
</template>
</el-table-column>
<el-table-column label='备注' align='center' prop='remark' v-if='columns[18].visible' />
<el-table-column label='操作' align='center' class-name='small-padding fixed-width'>
<template #default='scope'>
<el-tooltip content='修改' placement='top'>
<el-button link type='primary' icon='Edit' @click='handleUpdate(scope.row)'
v-hasPermi="['system:masterData:edit']"></el-button>
</el-tooltip>
<el-tooltip content='删除' placement='top'>
<el-button link type='primary' icon='Delete' @click='handleDelete(scope.row)'
v-hasPermi="['system:masterData:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show='total > 0' :total='total' v-model:page='queryParams.pageNum'
v-model:limit='queryParams.pageSize' @pagination='getList' />
</el-card>
<!-- 添加或修改主数据维护对话框 -->
<el-dialog :title='dialog.title' v-model='dialog.visible' width='600px' append-to-body>
<el-form ref='masterDataFormRef' :model='form' :rules='rules' label-width='150px'>
<el-form-item label='所属模块' prop='moduleType'>
<el-radio-group v-model='form.moduleType'>
<el-radio
v-for='dict in sys_module_type'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='父级标识' prop='parentFlag'>
<el-radio-group v-model='form.parentFlag'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='菜单ID' prop='menuId'>
<el-input v-model='form.menuId' disabled/>
</el-form-item>
<el-form-item label='路由参数' prop='queryParam'>
<el-input v-model='form.queryParam' placeholder='请输入路由参数' />
</el-form-item>
<el-form-item label='主数据标题' prop='masterDataTitle'>
<el-input v-model='form.masterDataTitle' placeholder='请输入主数据标题' />
</el-form-item>
<el-form-item label='预留字段1名称' prop='fieldName1'>
<el-input v-model='form.fieldName1' placeholder='请输入预留字段1名称' />
</el-form-item>
<el-form-item label='预留字段1显示标识' prop='displayFlag1'>
<el-radio-group v-model='form.displayFlag1'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='预留字段2名称' prop='fieldName2'>
<el-input v-model='form.fieldName2' placeholder='请输入预留字段2名称' />
</el-form-item>
<el-form-item label='预留字段2显示标识' prop='displayFlag2'>
<el-radio-group v-model='form.displayFlag2'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='预留字段3名称' prop='fieldName3'>
<el-input v-model='form.fieldName3' placeholder='请输入预留字段3名称' />
</el-form-item>
<el-form-item label='预留字段3显示标识' prop='displayFlag3'>
<el-radio-group v-model='form.displayFlag3'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='预留字段4名称' prop='fieldName4'>
<el-input v-model='form.fieldName4' placeholder='请输入预留字段4名称' />
</el-form-item>
<el-form-item label='预留字段4显示标识' prop='displayFlag4'>
<el-radio-group v-model='form.displayFlag4'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='预留字段5名称' prop='fieldName5'>
<el-input v-model='form.fieldName5' placeholder='请输入预留字段5名称' />
</el-form-item>
<el-form-item label='预留字段5显示标识' prop='displayFlag5'>
<el-radio-group v-model='form.displayFlag5'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='激活标识' prop='activeFlag'>
<el-radio-group v-model='form.activeFlag'>
<el-radio
v-for='dict in active_flag'
:key='dict.value'
:value='dict.value'
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label='备注' prop='remark'>
<el-input v-model='form.remark' placeholder='请输入备注' />
</el-form-item>
</el-form>
<template #footer>
<div class='dialog-footer'>
<el-button :loading='buttonLoading' type='primary' @click='submitForm'>确 定</el-button>
<el-button @click='cancel'>取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name='MasterData' lang='ts'>
import { listMasterData, getMasterData, delMasterData, addMasterData, updateMasterData } from '@/api/system/masterData';
import { MasterDataVO, MasterDataQuery, MasterDataForm } from '@/api/system/masterData/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {
active_flag,
sys_yes_no,
sys_module_type
} = toRefs<any>(proxy?.useDict('active_flag', 'sys_yes_no', 'sys_module_type'));
const masterDataList = ref<MasterDataVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const masterDataFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
// 列显隐信息
const columns = ref<FieldOption[]>([
{ key: 0, label: `主键标识`, visible: false },
{ key: 1, label: `租户编号`, visible: false },
{ key: 2, label: `所属模块`, visible: true },
{ key: 3, label: `父级标识`, visible: true },
{ key: 4, label: `菜单ID`, visible: false },
{ key: 5, label: `路由参数`, visible: true },
{ key: 6, label: `主数据标题`, visible: true },
{ key: 7, label: `预留字段1名称`, visible: true },
{ key: 8, label: `预留字段1显示标识`, visible: true },
{ key: 9, label: `预留字段2名称`, visible: true },
{ key: 10, label: `预留字段2显示标识`, visible: true },
{ key: 11, label: `预留字段3名称`, visible: true },
{ key: 12, label: `预留字段3显示标识`, visible: true },
{ key: 13, label: `预留字段4名称`, visible: true },
{ key: 14, label: `预留字段4显示标识`, visible: true },
{ key: 15, label: `预留字段5名称`, visible: true },
{ key: 16, label: `预留字段5显示标识`, visible: true },
{ key: 17, label: `激活标识`, visible: true },
{ key: 18, label: `备注`, visible: true },
{ key: 19, label: `创建部门`, visible: false },
{ key: 20, label: `创建人`, visible: false },
{ key: 21, label: `创建时间`, visible: false },
{ key: 22, label: `更新人`, visible: false },
{ key: 23, label: `更新时间`, visible: false }
]);
const initFormData: MasterDataForm = {
masterDataId: undefined,
moduleType: undefined,
parentFlag: '0',
menuId: undefined,
queryParam: undefined,
masterDataTitle: undefined,
fieldName1: undefined,
displayFlag1: '0',
fieldName2: undefined,
displayFlag2: '0',
fieldName3: undefined,
displayFlag3: '0',
fieldName4: undefined,
displayFlag4: '0',
fieldName5: undefined,
displayFlag5: '0',
activeFlag: '1',
remark: undefined
};
const data = reactive<PageData<MasterDataForm, MasterDataQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
masterDataId: undefined,
moduleType: undefined,
parentFlag: undefined,
menuId: undefined,
queryParam: undefined,
masterDataTitle: undefined,
fieldName1: undefined,
displayFlag1: undefined,
fieldName2: undefined,
displayFlag2: undefined,
fieldName3: undefined,
displayFlag3: undefined,
fieldName4: undefined,
displayFlag4: undefined,
fieldName5: undefined,
displayFlag5: undefined,
activeFlag: undefined,
params: {}
},
rules: {
moduleType: [
{ required: true, message: '所属模块不能为空', trigger: 'change' }
],
parentFlag: [
{ required: true, message: '父级标识不能为空', trigger: 'change' }
],
queryParam: [
{ required: true, message: '路由参数不能为空', trigger: 'blur' }
],
masterDataTitle: [
{ required: true, message: '主数据标题不能为空', trigger: 'blur' }
],
displayFlag1: [
{ required: true, message: '预留字段1显示标识不能为空', trigger: 'change' }
],
displayFlag2: [
{ required: true, message: '预留字段2显示标识不能为空', trigger: 'change' }
],
displayFlag3: [
{ required: true, message: '预留字段3显示标识不能为空', trigger: 'change' }
],
displayFlag4: [
{ required: true, message: '预留字段4显示标识不能为空', trigger: 'change' }
],
displayFlag5: [
{ required: true, message: '预留字段5显示标识不能为空', trigger: 'change' }
],
activeFlag: [
{ required: true, message: '激活标识不能为空', trigger: 'change' }
]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询主数据维护列表 */
const getList = async () => {
loading.value = true;
const res = await listMasterData(queryParams.value);
masterDataList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
masterDataFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: MasterDataVO[]) => {
ids.value = selection.map(item => item.masterDataId);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加主数据维护';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: MasterDataVO) => {
reset();
const _masterDataId = row?.masterDataId || ids.value[0];
const res = await getMasterData(_masterDataId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改主数据维护';
};
/** 提交按钮 */
const submitForm = () => {
masterDataFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.masterDataId) {
await updateMasterData(form.value).finally(() => buttonLoading.value = false);
} else {
await addMasterData(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: MasterDataVO) => {
const _masterDataIds = row?.masterDataId || ids.value;
await proxy?.$modal.confirm('是否确认删除主数据维护编号为"' + _masterDataIds + '"的数据项').finally(() => loading.value = false);
await delMasterData(_masterDataIds);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('system/masterData/export', {
...queryParams.value
}, `masterData_${new Date().getTime()}.xlsx`);
};
onMounted(() => {
getList();
});
</script>