From 95809576107ccfdb8ac7a0778bef8ede067420f6 Mon Sep 17 00:00:00 2001 From: zch Date: Thu, 17 Jul 2025 16:22:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(qms):=20=E9=87=8D=E6=9E=84=E6=A3=80?= =?UTF-8?q?=E6=B5=8B=E9=A1=B9=E7=B1=BB=E5=88=AB=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=A0=91=E5=BD=A2=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将检测项类别页面改为树形结构展示 - 添加检测类型筛选功能 - 优化表单布局和字段 - 新增展开/折叠功能 - 修改检测单类型和检测项类别的顺序 --- src/views/qms/qcInspectionItem/index.vue | 20 +- .../qms/qcInspectionItemCategory/index.vue | 268 ++++++++++-------- 2 files changed, 152 insertions(+), 136 deletions(-) diff --git a/src/views/qms/qcInspectionItem/index.vue b/src/views/qms/qcInspectionItem/index.vue index cf458f1..c058820 100644 --- a/src/views/qms/qcInspectionItem/index.vue +++ b/src/views/qms/qcInspectionItem/index.vue @@ -104,8 +104,8 @@ - - + + @@ -135,12 +132,21 @@ import { QcInspectionTypeVO } from '@/api/qms/qcInspectionType/types'; import type { TreeInstance } from 'element-plus'; import { watch } from "vue"; -const { proxy } = getCurrentInstance() as ComponentInternalInstance; +type QcInspectionItemCategoryOption = { + categoryId: number; + categoryName: string; + children?: QcInspectionItemCategoryOption[]; +} + +const { proxy } = getCurrentInstance() as ComponentInternalInstance;; + const qcInspectionItemCategoryList = ref([]); +const qcInspectionItemCategoryOptions = ref([]); const buttonLoading = ref(false); -const loading = ref(true); const showSearch = ref(true); +const isExpandAll = ref(true); +const loading = ref(false); const ids = ref>([]); const single = ref(true); const multiple = ref(true); @@ -148,42 +154,32 @@ const total = ref(0); const queryFormRef = ref(); const qcInspectionItemCategoryFormRef = ref(); +// const qcInspectionItemCategoryTableRef = ref(); const inspectionTypeTreeRef = ref(); const inspectionTypeName = ref(''); const dialog = reactive({ - visible: false, - title: '' + visible: false, + title: '' }); -// 列显隐信息 -const columns = ref([ - { key: 0, label: `序号`, visible: true }, - // { key: 1, label: `检测项类别主键`, visible: false }, - { key: 1, label: `检测项类别编码`, visible: true }, - { key: 2, label: `检测项类别名称`, visible: true }, - { key: 3, label: `检测单类型`, visible: true }, - { key: 4, label: `描述`, visible: true }, - // { key: 6, label: `创建人`, visible: true }, - // { key: 7, label: `创建部门`, visible: true }, - // { key: 8, label: `创建时间`, visible: true }, - // { key: 9, label: `修改人`, visible: true }, - // { key: 10, label: `修改时间`, visible: true }, -]); const initFormData: QcInspectionItemCategoryForm = { - categoryId: undefined, - categoryCode: undefined, - categoryName: undefined, - typeId: undefined, - description: undefined, + categoryId: undefined, + parentId: undefined, + ancestors: undefined, + categoryCode: undefined, + categoryName: undefined, + typeId: undefined, + description: undefined, } + const data = reactive>({ form: {...initFormData}, queryParams: { - pageNum: 1, - pageSize: 10, categoryId: undefined, + parentId: undefined, + ancestors: undefined, categoryCode: undefined, categoryName: undefined, typeId: undefined, @@ -195,6 +191,9 @@ const data = reactive { loading.value = true; const res = await listQcInspectionItemCategory(queryParams.value); - qcInspectionItemCategoryList.value = res.rows; - total.value = res.total; - loading.value = false; + const data = proxy?.handleTree(res.data, "categoryId", "parentId"); + if (data) { + qcInspectionItemCategoryList.value = data; + loading.value = false; + } } -/** 取消按钮 */ +/** 查询检测项类别下拉树结构 */ +const getTreeselect = async () => { + const res = await listQcInspectionItemCategory(); + qcInspectionItemCategoryOptions.value = []; + const data: QcInspectionItemCategoryOption = { categoryId: 0, categoryName: '顶级节点', children: [] }; + data.children = proxy?.handleTree(res.data, "categoryId", "parentId"); + qcInspectionItemCategoryOptions.value.push(data); +} + +// 取消按钮 const cancel = () => { reset(); dialog.visible = false; } -/** 表单重置 */ +// 表单重置 const reset = () => { - form.value = {...initFormData}; + form.value = {...initFormData} qcInspectionItemCategoryFormRef.value?.resetFields(); } /** 搜索按钮操作 */ const handleQuery = () => { - queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ const resetQuery = () => { queryFormRef.value?.resetFields(); - queryParams.value.typeId = undefined; - inspectionTypeTreeRef.value?.setCurrentKey(null); handleQuery(); } -/** 多选框选中数据 */ -const handleSelectionChange = (selection: QcInspectionItemCategoryVO[]) => { - ids.value = selection.map(item => item.categoryId); - single.value = selection.length != 1; - multiple.value = !selection.length; -} - /** 新增按钮操作 */ -const handleAdd = () => { +const handleAdd = (row?: QcInspectionItemCategoryVO) => { reset(); + getTreeselect(); + if (row != null && row.categoryId) { + form.value.parentId = row.categoryId; + } else { + form.value.parentId = 0; + } dialog.visible = true; dialog.title = "添加检测项类别"; } +/** 展开/折叠操作 */ +const handleToggleExpandAll = () => { + isExpandAll.value = !isExpandAll.value; + toggleExpandAll(qcInspectionItemCategoryList.value, isExpandAll.value) +} + +/** 展开/折叠操作 */ +const toggleExpandAll = (data: QcInspectionItemCategoryVO[], status: boolean) => { + data.forEach((item) => { + qcInspectionItemCategoryTableRef.value?.toggleRowExpansion(item, status) + if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) + }) +} + /** 修改按钮操作 */ -const handleUpdate = async (row?: QcInspectionItemCategoryVO) => { +const handleUpdate = async (row: QcInspectionItemCategoryVO) => { reset(); - const _categoryId = row?.categoryId || ids.value[0] - const res = await getQcInspectionItemCategory(_categoryId); + await getTreeselect(); + if (row != null) { + form.value.parentId = row.parentId; + } + const res = await getQcInspectionItemCategory(row.categoryId); Object.assign(form.value, res.data); dialog.visible = true; dialog.title = "修改检测项类别"; @@ -265,35 +288,28 @@ const submitForm = () => { if (valid) { buttonLoading.value = true; if (form.value.categoryId) { - await updateQcInspectionItemCategory(form.value).finally(() => buttonLoading.value = false); + await updateQcInspectionItemCategory(form.value).finally(() => buttonLoading.value = false); } else { - await addQcInspectionItemCategory(form.value).finally(() => buttonLoading.value = false); + await addQcInspectionItemCategory(form.value).finally(() => buttonLoading.value = false); } proxy?.$modal.msgSuccess("操作成功"); dialog.visible = false; - await getList(); + getList(); } }); } /** 删除按钮操作 */ -const handleDelete = async (row?: QcInspectionItemCategoryVO) => { - const _categoryIds = row?.categoryId || ids.value; - await proxy?.$modal.confirm('是否确认删除检测项类别编号为"' + _categoryIds + '"的数据项？').finally(() => loading.value = false); - await delQcInspectionItemCategory(_categoryIds); - proxy?.$modal.msgSuccess("删除成功"); +const handleDelete = async (row: QcInspectionItemCategoryVO) => { + await proxy?.$modal.confirm('是否确认删除检测项类别编号为"' + row.categoryId + '"的数据项？'); + loading.value = true; + await delQcInspectionItemCategory(row.categoryId).finally(() => loading.value = false); await getList(); -} - -/** 导出按钮操作 */ -const handleExport = () => { - proxy?.download('qms/qcInspectionItemCategory/export', { - ...queryParams.value - }, `qcInspectionItemCategory_${new Date().getTime()}.xlsx`) + proxy?.$modal.msgSuccess("删除成功"); } //获取检测类型列表（不分页，获取全部） -let qcInspectionTypeList = ref([]); +let qcInspectionTypeList = ref([]); const getInspectionTypeList = async () => { const res = await getQcInspectionTypeList(null); qcInspectionTypeList.value = proxy?.handleTree(res.data, "typeId", "parentId") || [];