From 5e440a7dc434c43eb828fa62cf9c12b0078b8565 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 20 一月 2025 11:36:18 +0800 Subject: [PATCH] !173 发布 5.3.0-BETA 公测版本 Merge pull request !173 from 疯狂的狮子Li/dev --- src/views/workflow/category/index.vue | 194 +++++++++++++++++++++++------------------------- 1 files changed, 94 insertions(+), 100 deletions(-) diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue index fd3bfc5..d3e87ea 100644 --- a/src/views/workflow/category/index.vue +++ b/src/views/workflow/category/index.vue @@ -6,9 +6,6 @@ <el-form-item label="鍒嗙被鍚嶇О" prop="categoryName"> <el-input v-model="queryParams.categoryName" placeholder="璇疯緭鍏ュ垎绫诲悕绉�" clearable @keyup.enter="handleQuery" /> </el-form-item> - <el-form-item label="鍒嗙被缂栫爜" prop="categoryCode"> - <el-input v-model="queryParams.categoryCode" placeholder="璇疯緭鍏ュ垎绫荤紪鐮�" clearable @keyup.enter="handleQuery" /> - </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> @@ -21,64 +18,66 @@ <template #header> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> - <el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">鏂板</el-button> + <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['workflow:category:add']">鏂板</el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">灞曞紑/鎶樺彔</el-button> </el-col> - <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> </template> <el-table ref="categoryTableRef" v-loading="loading" :data="categoryList" - row-key="id" + row-key="categoryId" :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > - <el-table-column label="鍒嗙被鍚嶇О" prop="categoryName" /> - <el-table-column label="鍒嗙被缂栫爜" align="center" prop="categoryCode" /> - <el-table-column label="鎺掑簭" align="center" prop="sortNum" /> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column label="鍒嗙被鍚嶇О" prop="categoryName" width="260"/> + <el-table-column label="鏄剧ず椤哄簭" align="center" prop="orderNum" width="200" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180" /> + <el-table-column label="鎿嶄綔" fixed="right" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-tooltip content="淇敼" placement="top"> - <el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" /> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['workflow:category:edit']" /> </el-tooltip> <el-tooltip content="鏂板" placement="top"> - <el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" /> + <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['workflow:category:add']" /> </el-tooltip> <el-tooltip content="鍒犻櫎" placement="top"> - <el-button v-hasPermi="['workflow:category:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" /> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['workflow:category:remove']" /> </el-tooltip> </template> </el-table-column> </el-table> </el-card> - <!-- 娣诲姞鎴栦慨鏀规祦绋嬪垎绫诲璇濇 --> - <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> - <el-form ref="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="鐖剁骇鍒嗙被" prop="parentId"> + <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> + <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="涓婄骇鍒嗙被" prop="parentId"> <el-tree-select v-model="form.parentId" :data="categoryOptions" - :props="{ value: 'id', label: 'categoryName', children: 'children' }" - value-key="id" - placeholder="璇烽�夋嫨鐖剁骇id" + :props="{ value: 'categoryId', label: 'categoryName', children: 'children' }" + value-key="categoryId" + placeholder="璇烽�夋嫨涓婄骇鍒嗙被" check-strictly /> </el-form-item> - <el-form-item label="鍒嗙被鍚嶇О" prop="categoryName"> - <el-input v-model="form.categoryName" placeholder="璇疯緭鍏ュ垎绫诲悕绉�" /> - </el-form-item> - <el-form-item label="鍒嗙被缂栫爜" prop="categoryCode"> - <el-input v-model="form.categoryCode" placeholder="璇疯緭鍏ュ垎绫荤紪鐮�" /> - </el-form-item> - <el-form-item label="鎺掑簭" prop="sortNum"> - <el-input-number v-model="form.sortNum" placeholder="璇疯緭鍏ユ帓搴�" controls-position="right" :min="0" /> - </el-form-item> + <el-row :gutter="20"> + <el-col :span="12"> + <el-form-item label="鍒嗙被鍚嶇О" prop="categoryName"> + <el-input v-model="form.categoryName" placeholder="璇疯緭鍏ュ垎绫诲悕绉�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鎺掑簭" prop="orderNum"> + <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> + </el-form-item> + </el-col> + </el-row> </el-form> - <template #footer> + <template #footer> <div class="dialog-footer"> <el-button :loading="buttonLoading" type="primary" @click="submitForm">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> @@ -89,16 +88,17 @@ </template> <script setup name="Category" lang="ts"> -import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category'; +import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/workflow/category"; import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types'; type CategoryOption = { - id: number; + categoryId: number; categoryName: string; children?: CategoryOption[]; -}; +} -const { proxy } = getCurrentInstance() as ComponentInternalInstance; +const { proxy } = getCurrentInstance() as ComponentInternalInstance;; + const categoryList = ref<CategoryVO[]>([]); const categoryOptions = ref<CategoryOption[]>([]); @@ -109,34 +109,32 @@ const queryFormRef = ref<ElFormInstance>(); const categoryFormRef = ref<ElFormInstance>(); -const categoryTableRef = ref<ElTableInstance>(); +const categoryTableRef = ref<ElTableInstance>() const dialog = reactive<DialogOption>({ visible: false, title: '' }); + const initFormData: CategoryForm = { - id: undefined, - categoryName: undefined, - categoryCode: undefined, + categoryId: undefined, + categoryName: "", parentId: undefined, - sortNum: 0 -}; + orderNum: 0, +} const data = reactive<PageData<CategoryForm, CategoryQuery>>({ - form: { ...initFormData }, + form: {...initFormData}, queryParams: { - pageNum: 1, - pageSize: 10, categoryName: undefined, - categoryCode: undefined }, rules: { - id: [{ required: true, message: '涓婚敭涓嶈兘涓虹┖', trigger: 'blur' }], - categoryName: [{ required: true, message: '鍒嗙被鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }], - categoryCode: [{ required: true, message: '鍒嗙被缂栫爜涓嶈兘涓虹┖', trigger: 'blur' }], - parentId: [{ required: true, message: '鐖剁骇id涓嶈兘涓虹┖', trigger: 'blur' }] + categoryId: [ + { required: true, message: "娴佺▼鍒嗙被ID涓嶈兘涓虹┖", trigger: "blur" } + ], + parentId: [{ required: true, message: "璇烽�夋嫨涓婄骇鍒嗙被", trigger: "change" }], + categoryName: [{ required: true, message: "璇疯緭鍏ュ垎绫诲悕绉�", trigger: "blur" }] } }); @@ -146,116 +144,112 @@ const getList = async () => { loading.value = true; const res = await listCategory(queryParams.value); - const data = proxy?.handleTree<CategoryVO>(res.data, 'id', 'parentId'); + const data = proxy?.handleTree<CategoryVO>(res.data, "categoryId", "parentId"); if (data) { categoryList.value = data; loading.value = false; } -}; +} /** 鏌ヨ娴佺▼鍒嗙被涓嬫媺鏍戠粨鏋� */ const getTreeselect = async () => { const res = await listCategory(); categoryOptions.value = []; - const data: CategoryOption = { id: 0, categoryName: '椤剁骇鑺傜偣', children: [] }; - data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); - categoryOptions.value.push(data); + // 澶勭悊鏍戝舰鏁版嵁 + const data = proxy?.handleTree<CategoryOption>(res.data, "categoryId", "parentId"); + if (data) { + categoryOptions.value = data; // 灏嗗鐞嗗悗鐨勬爲褰㈡暟鎹祴鍊� + } }; // 鍙栨秷鎸夐挳 const cancel = () => { reset(); dialog.visible = false; -}; +} // 琛ㄥ崟閲嶇疆 const reset = () => { - form.value = { ...initFormData }; + form.value = {...initFormData} categoryFormRef.value?.resetFields(); -}; +} /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { getList(); -}; +} /** 閲嶇疆鎸夐挳鎿嶄綔 */ const resetQuery = () => { queryFormRef.value?.resetFields(); handleQuery(); -}; +} /** 鏂板鎸夐挳鎿嶄綔 */ const handleAdd = (row?: CategoryVO) => { + reset(); + getTreeselect(); + if (row?.categoryId) { + form.value.parentId = row.categoryId; + } else { + form.value.parentId = undefined; + } dialog.visible = true; - dialog.title = '娣诲姞娴佺▼鍒嗙被'; - nextTick(() => { - reset(); - getTreeselect(); - if (row != null && row.id) { - form.value.parentId = row.id; - } else { - form.value.parentId = 0; - } - }); -}; + dialog.title = "娣诲姞娴佺▼鍒嗙被"; +} /** 灞曞紑/鎶樺彔鎿嶄綔 */ const handleToggleExpandAll = () => { isExpandAll.value = !isExpandAll.value; - toggleExpandAll(categoryList.value, isExpandAll.value); -}; + toggleExpandAll(categoryList.value, isExpandAll.value) +} /** 灞曞紑/鎶樺彔鎿嶄綔 */ const toggleExpandAll = (data: CategoryVO[], status: boolean) => { data.forEach((item) => { - categoryTableRef.value?.toggleRowExpansion(item, status); - if (item.children && item.children.length > 0) toggleExpandAll(item.children, status); - }); -}; + categoryTableRef.value?.toggleRowExpansion(item, status) + if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) + }) +} /** 淇敼鎸夐挳鎿嶄綔 */ -const handleUpdate = (row: CategoryVO) => { - loading.value = true; +const handleUpdate = async (row: CategoryVO) => { + reset(); + await getTreeselect(); + if (row != null) { + form.value.parentId = row.parentId; + } + const res = await getCategory(row.categoryId); + Object.assign(form.value, res.data); dialog.visible = true; - dialog.title = '淇敼娴佺▼鍒嗙被'; - nextTick(async () => { - reset(); - await getTreeselect(); - if (row != null) { - form.value.parentId = row.id; - } - const res = await getCategory(row.id); - loading.value = false; - Object.assign(form.value, res.data); - }); -}; + dialog.title = "淇敼娴佺▼鍒嗙被"; +} /** 鎻愪氦鎸夐挳 */ const submitForm = () => { - categoryFormRef.value.validate(async (valid: boolean) => { + categoryFormRef.value?.validate(async (valid: boolean) => { if (valid) { buttonLoading.value = true; - if (form.value.id) { - await updateCategory(form.value).finally(() => (buttonLoading.value = false)); + if (form.value.categoryId) { + await updateCategory(form.value).finally(() => buttonLoading.value = false); } else { - await addCategory(form.value).finally(() => (buttonLoading.value = false)); + await addCategory(form.value).finally(() => buttonLoading.value = false); } - proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); + proxy?.$modal.msgSuccess("鎿嶄綔鎴愬姛"); dialog.visible = false; - await getList(); + getList(); } }); -}; +} /** 鍒犻櫎鎸夐挳鎿嶄綔 */ const handleDelete = async (row: CategoryVO) => { - await proxy?.$modal.confirm('鏄惁纭鍒犻櫎娴佺▼鍒嗙被缂栧彿涓�"' + row.id + '"鐨勬暟鎹」锛�'); + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎"' + row.categoryName + '"鐨勫垎绫伙紵'); loading.value = true; - await delCategory(row.id).finally(() => (loading.value = false)); + await delCategory(row.categoryId).finally(() => loading.value = false); await getList(); - proxy?.$modal.msgSuccess('鍒犻櫎鎴愬姛'); -}; + proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); +} onMounted(() => { getList(); -- Gitblit v1.9.3