add 添加模型分类查询

src/api/workflow/model/types.ts

@@ -1,10 +1,12 @@
 export interface ModelForm {
   name: string;
   key: string;
+  categoryCode: string;
   description: string;
 }
 
 export interface ModelQuery extends PageQuery {
   name: string;
   key: string;
+  categoryCode: string;
 }

src/views/workflow/model/index.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input placeholder="请输入流程分类名" v-model="categoryName" prefix-icon="Search" clearable />
+          <el-tree
+            class="mt-2"
+            ref="categoryTreeRef"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
           <div class="mb-[10px]" v-show="showSearch">
             <el-card shadow="hover">
@@ -63,8 +83,16 @@
               </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" />
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
         </el-card>
+      </el-col>
+    </el-row>
     <!-- 设计流程开始 -->
     <design ref="designModel" :modelId="modelId" @handleClose="getList" />
     <!-- 设计流程结束 -->
@@ -77,6 +105,16 @@
         <el-form-item label="标识Key：" prop="key">
           <el-input v-model="form.key" maxlength="20" show-word-limit />
         </el-form-item>
+        <el-form-item label="流程分类" prop="categoryCode">
+          <el-tree-select
+            v-model="form.categoryCode"
+            :data="categoryOptions"
+            :props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }"
+            value-key="categoryCode"
+            placeholder="请选择流程分类"
+            check-strictly
+          />
+        </el-form-item>
         <el-form-item label="备注：" prop="description">
           <el-input type="textarea" v-model="form.description" maxlength="30" show-word-limit></el-input>
         </el-form-item>
@@ -96,6 +134,8 @@ import { listModel, addModel, delModel, modelDeploy } from '@/api/workflow/model
 import { ModelQuery, ModelForm } from '@/api/workflow/model/types';
 import { ComponentInternalInstance } from 'vue';
 import Design from './design.vue';
+import { listCategory } from "@/api/workflow/category";
+import { ElTree } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -103,6 +143,12 @@ const designModel = ref<InstanceType<typeof Design>>();
 const formRef = ref(ElForm);
 const queryFormRef = ref(ElForm);
 
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+}
+
 const buttonLoading = ref(false);
 const loading = ref(true);
 const ids = ref<Array<string | number>>([]);
@@ -111,6 +157,9 @@ const multiple = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
 const modelList = ref<Record<string, any>>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+const categoryTreeRef = ref(ElTree);
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -120,6 +169,7 @@ const dialog = reactive<DialogOption>({
 const initFormData: ModelForm = {
   name: '',
   key: '',
+  categoryCode: '',
   description: ''
 };
 const data = reactive<PageData<ModelForm, ModelQuery>>({
@@ -132,7 +182,8 @@ const data = reactive<PageData<ModelForm, ModelQuery>>({
   },
   rules: {
     name: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
-    key: [{ required: true, message: 'key不能为空', trigger: 'blur' }]
+    key: [{ required: true, message: 'key不能为空', trigger: 'blur' }],
+    categoryCode: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
   }
 });
 const { queryParams, form, rules } = toRefs(data);
@@ -141,7 +192,31 @@ const modelId = ref<string>('');
 
 onMounted(() => {
   getList();
+  getTreeselect();
 });
+
+/** 节点单击事件 */
+const handleNodeClick = (data: ModelForm) => {
+    queryParams.value.categoryCode = data.categoryCode;
+    console.log(data.categoryCode)
+    if(data.categoryCode === 'ALL'){
+        queryParams.value.categoryCode =''
+    }
+    handleQuery()
+}
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.categoryName.indexOf(value) !== -1
+}
+/** 根据名称筛选部门树 */
+watchEffect(
+    () => {categoryTreeRef.value.filter(categoryName.value);},
+    {
+        flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+    }
+);
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -187,6 +262,7 @@ const clickDeploy = async (id: string, key: string) => {
   proxy?.$modal.msgSuccess('部署成功');
 };
 const handleAdd = () => {
+  getTreeselect();
   form.value = { ...initFormData };
   dialog.visible = true;
   dialog.title = '新增模型';
@@ -227,4 +303,12 @@ const clickDesign = (id: string) => {
 const clickExportZip = (data: any) => {
   proxy?.$download.zip('/workflow/model/export/zip/' + data.id, data.name + '-' + data.key);
 };
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, "id", "parentId");
+  categoryOptions.value.push(data);
+}
 </script>