!168 优化流程分类

Merge pull request !168 from AprilWind/warm-flw-future

src/api/workflow/category/index.ts

@@ -18,11 +18,11 @@ export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]>
 
 /**
  * 查询流程分类详细
- * @param id
+ * @param categoryId
  */
-export const getCategory = (id: string | number): AxiosPromise<CategoryVO> => {
+export const getCategory = (categoryId: string | number): AxiosPromise<CategoryVO> => {
   return request({
-    url: '/workflow/category/' + id,
+    url: '/workflow/category/' + categoryId,
     method: 'get'
   });
 };
@@ -53,11 +53,11 @@ export const updateCategory = (data: CategoryForm) => {
 
 /**
  * 删除流程分类
- * @param id
+ * @param categoryId
  */
-export const delCategory = (id: string | number | Array<string | number>) => {
+export const delCategory = (categoryId: string | number | Array<string | number>) => {
   return request({
-    url: '/workflow/category/' + id,
+    url: '/workflow/category/' + categoryId,
     method: 'delete'
   });
 };

src/api/workflow/category/types.ts

@@ -5,10 +5,10 @@ export interface CategoryTreeVO {
   weight: number;
   children: CategoryTreeVO[];
 }
-
 export interface CategoryVO {
+
   /**
-   * 主键
+   * 流程分类ID
    */
   categoryId: string | number;
 
@@ -18,17 +18,7 @@ export interface CategoryVO {
   parentId: string | number;
 
   /**
-   * 父类别名称
+   * 流程分类名称
-   */
-  parentName: string;
-
-  /**
-   * 祖级列表
-   */
-  ancestors: string;
-
-  /**
-   * 分类名称
    */
   categoryName: string;
 
@@ -38,45 +28,45 @@ export interface CategoryVO {
   orderNum: number;
 
   /**
-   * 流程分类状态（0正常 1停用）
+   * 创建时间
    */
-  status: number;
+  createTime: string;
 
+  /**
+   * 子对象
+   */
   children: CategoryVO[];
-
 }
 
 export interface CategoryForm extends BaseEntity {
+
   /**
-   * 主键
+   * 流程分类ID
    */
   categoryId?: string | number;
 
   /**
-   * 父级id
+   * 流程分类名称
-   */
-  parentId: string | number;
-
-  /**
-   * 分类名称
    */
   categoryName?: string;
 
   /**
-   * 排序
+   * 父流程分类id
+   */
+  parentId?: string | number;
+
+  /**
+   * 显示顺序
    */
   orderNum?: number;
 
-  /**
-   * 流程分类状态（0正常 1停用）
-   */
-  status: number;
-
 }
 
-export interface CategoryQuery extends PageQuery {
+export interface CategoryQuery {
+
   /**
-   * 分类名称
+   * 流程分类名称
    */
   categoryName?: string;
+
 }

src/views/workflow/category/index.vue

@@ -18,12 +18,12 @@
       <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:show-search="showSearch" @query-table="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
       </template>
       <el-table
@@ -34,44 +34,50 @@
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <el-table-column label="分类名称" prop="categoryName" />
+        <el-table-column label="分类名称" prop="categoryName" width="260"/>
-        <el-table-column label="排序" align="center" prop="sortNum" />
+        <el-table-column label="显示顺序" align="center" prop="orderNum" width="200" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <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 :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
-      <el-form ref="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级分类" prop="parentId">
-        <el-form-item label="父级分类" prop="parentId">
           <el-tree-select
             v-model="form.parentId"
             :data="categoryOptions"
             :props="{ value: 'categoryId', label: 'categoryName', children: 'children' }"
             value-key="categoryId"
-            placeholder="请选择父级id"
+            placeholder="请选择上级分类"
             check-strictly
           />
         </el-form-item>
-        <el-form-item label="分类名称" prop="categoryName">
+        <el-row :gutter="20">
-          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+          <el-col :span="12">
-        </el-form-item>
+            <el-form-item label="分类名称" prop="categoryName">
-        <el-form-item label="排序" prop="orderNum">
+              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
-          <el-input-number v-model="form.orderNum" placeholder="请输入排序" controls-position="right" :min="0" />
+            </el-form-item>
-        </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>
@@ -82,17 +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 = {
-  categoryId: string | number;
+  categoryId: number;
   categoryName: string;
-  parentId: string | number;
   children?: CategoryOption[];
-};
+}
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const categoryList = ref<CategoryVO[]>([]);
 const categoryOptions = ref<CategoryOption[]>([]);
@@ -103,32 +109,32 @@ const loading = ref(false);
 
 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 = {
   categoryId: undefined,
-  categoryName: undefined,
+  categoryName: "",
   parentId: undefined,
   orderNum: 0,
-  status: 0
+}
-};
 
 const data = reactive<PageData<CategoryForm, CategoryQuery>>({
-  form: { ...initFormData },
+  form: {...initFormData},
   queryParams: {
-    pageNum: 1,
+    categoryName: undefined,
-    pageSize: 10,
-    categoryName: undefined
   },
   rules: {
-    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    categoryId: [
-    categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+      { required: true, message: "流程分类ID不能为空", trigger: "blur" }
-    parentId: [{ required: true, message: '父级id不能为空', trigger: 'blur' }]
+    ],
+    parentId: [{ required: true, message: "请选择上级分类", trigger: "change" }],
+    categoryName: [{ required: true, message: "请输入分类名称", trigger: "blur" }]
   }
 });
 
@@ -138,117 +144,112 @@ const { queryParams, form, rules } = toRefs(data);
 const getList = async () => {
   loading.value = true;
   const res = await listCategory(queryParams.value);
-  const data = proxy?.handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
+  const data = proxy?.handleTree<CategoryVO>(res.data, "categoryId", "parentId");
   if (data) {
     categoryList.value = data;
     loading.value = false;
   }
-};
+}
 
 /** 查询流程分类下拉树结构 */
-const getTreeSelect = async () => {
+const getTreeselect = async () => {
   const res = await listCategory();
   categoryOptions.value = [];
-  const data: CategoryOption = { categoryId: 0, categoryName: '顶级节点', parentId: 0, children: [] };
+  // 处理树形数据
-  data.children = proxy?.handleTree<CategoryOption>(res.data, 'categoryId', 'parentId');
+  const data = proxy?.handleTree<CategoryOption>(res.data, "categoryId", "parentId");
-  categoryOptions.value.push(data);
+  if (data) {
-  console.log(categoryOptions.value)
+    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 = '添加流程分类';
+  dialog.title = "添加流程分类";
-  nextTick(() => {
+}
-    reset();
-    getTreeSelect();
-    if (row != null && row.categoryId) {
-      form.value.parentId = row.categoryId;
-    } else {
-      form.value.parentId = 0;
-    }
-  });
-};
 
 /** 展开/折叠操作 */
 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);
+    categoryTableRef.value?.toggleRowExpansion(item, status)
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  });
+  })
-};
+}
 
 /** 修改按钮操作 */
-const handleUpdate = (row: CategoryVO) => {
+const handleUpdate = async (row: CategoryVO) => {
-  loading.value = true;
+  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 = '修改流程分类';
+  dialog.title = "修改流程分类";
-  nextTick(async () => {
+}
-    reset();
-    await getTreeSelect();
-    if (row != null) {
-      form.value.parentId = row.categoryId;
-    }
-    const res = await getCategory(row.categoryId);
-    loading.value = false;
-    Object.assign(form.value, res.data);
-  });
-};
 
 /** 提交按钮 */
 const submitForm = () => {
-  categoryFormRef.value.validate(async (valid: boolean) => {
+  categoryFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.categoryId) {
-        await updateCategory(form.value).finally(() => (buttonLoading.value = false));
+        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.categoryId + '"的数据项？');
+  await proxy?.$modal.confirm('是否确认删除"' + row.categoryName + '"的分类？');
   loading.value = true;
-  await delCategory(row.categoryId).finally(() => (loading.value = false));
+  await delCategory(row.categoryId).finally(() => loading.value = false);
   await getList();
-  proxy?.$modal.msgSuccess('删除成功');
+  proxy?.$modal.msgSuccess("删除成功");
-};
+}
 
 onMounted(() => {
   getList();