chore: compose tree

src/api/platform/workflow/controller/process.ts

@@ -31,7 +31,7 @@ export const exist = (processDefKey: string) => defHttp.get<string>({url: `${Api
 export const listProcessRun = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.runList, params }, { isReturnResultResponse: true });
 export const listProcessHistory = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.historyList, params }, { isReturnResultResponse: true });
 export const getFlowChart = (processDefId: string) => defHttp.get<string>({ url: `${Api.getFlowChart}/${processDefId}` });
-export const setProcessCategory = (processDefKeys: string | string[], category: string) => defHttp.put({url: Api.setProcessCategory, params: { processDefKeys, category } });
+export const setProcessCategory = (params?: Recordable) => defHttp.delete({ url: Api.setProcessCategory, params });
 export const setProcessInstanceStatus = (processDefKeys: string | string[], status: string) =>  defHttp.put({url: Api.setProcessInstanceStatus, params: { processDefKeys, status } });
 export const removeDeployment = (ids: string) => defHttp.delete({ url: `${Api.removeDeployment}/${ids}` });
 export const removeProcessInstance = (processDefKeys: string | string[], reason: string) => defHttp.delete({url: Api.removeProcessInstance, params: { processDefKeys, reason } });

src/api/platform/workflow/extension/controller/processCategory.ts

@@ -3,23 +3,23 @@
  * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
  * author wangxiang4
  */
-import { FormCategory, FormCategoryParams, FormCategoryResult } from '/@/api/platform/workflow/extension/entity/formCategory';
+import { ProcessCategory, ProcessCategoryParams, ProcessCategoryResult } from '/@/api/platform/workflow/extension/entity/processCategory';
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  list = '/workflow_proxy/workflow/extension/formCategory/list',
-  get = '/workflow_proxy/workflow/extension/formCategory',
-  save = '/workflow_proxy/workflow/extension/formCategory/save',
-  edit = '/workflow_proxy/workflow/extension/formCategory/update',
-  del = '/workflow_proxy/workflow/extension/formCategory/remove',
+  list = '/workflow_proxy/workflow/extension/category/list',
+  get = '/workflow_proxy/workflow/extension/category',
+  save = '/workflow_proxy/workflow/extension/category/save',
+  edit = '/workflow_proxy/workflow/extension/category/update',
+  del = '/workflow_proxy/workflow/extension/category/remove',
 }
 
-export const listFormCategory = (params?: Partial<FormCategoryParams>) => defHttp.get({ url: Api.list, params });
+export const listProcessCategory = (params?: Partial<ProcessCategoryParams>) => defHttp.get({ url: Api.list, params });
 
-export const addFormCategory = (params: Partial<FormCategory>)=> defHttp.post({ url: Api.save ,data: params });
+export const addProcessCategory = (params: Partial<ProcessCategory>)=> defHttp.post({ url: Api.save ,data: params });
 
-export const editFormCategory = (params: Partial<FormCategory>) => defHttp.put({ url: Api.edit, data: params });
+export const editProcessCategory = (params: Partial<ProcessCategory>) => defHttp.put({ url: Api.edit, data: params });
 
-export const getFormCategory = (id: string) => defHttp.get<FormCategory>({ url: `${Api.get}/${id}` });
+export const getProcessCategory = (id: string) => defHttp.get<ProcessCategory>({ url: `${Api.get}/${id}` });
 
-export const delFormCategory = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
+export const delProcessCategory = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });

src/api/platform/workflow/extension/entity/processCategory.ts

@@ -1,10 +1,10 @@
 import type { R } from '/#/axios';
 import type { TreeEntity, Page } from '/@/api/common/data/entity';
 
-export type FormCategoryParams = Page & FormCategory;
+export type ProcessCategoryParams = Page & ProcessCategory;
 
-export interface FormCategory extends TreeEntity<FormCategory> {
+export interface ProcessCategory extends TreeEntity<ProcessCategory> {
   [key: string]: any;
 }
 
-export type FormCategoryResult = R<FormCategory[]>;
+export type ProcessCategoryResult = R<ProcessCategory[]>;

src/components/Form/src/components/ApiTreeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-tree-select v-bind="getAttrs" @change="handleChange">
+  <a-tree-select v-bind="getAttrs" @change="handleChange" @dropdown-visible-change="handleFetch">
     <template v-for="item in Object.keys($slots)" #[item]="data">
       <slot :name="item" v-bind="data || {}"/>
     </template>
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { computed, defineComponent, watch, ref, unref, watchEffect } from 'vue';
   import { TreeSelect } from 'ant-design-vue';
   import { isArray, isFunction } from '/@/utils/is';
   import { get } from 'lodash-es';
@@ -27,13 +27,14 @@
       immediate: { type: Boolean, default: true },
       resultField: propTypes.string.def(''),
       listToTree: { type: Boolean, default: false },
-      treeConfig: { type: Object as PropType<TreeHelperConfig>,}
+      treeConfig: { type: Object as PropType<TreeHelperConfig> },
+      alwaysLoad: propTypes.bool.def(false),
     },
     emits: ['options-change', 'change'],
     setup(props, { attrs, emit }) {
       const treeData = ref<Recordable[]>([]);
-      const isFirstLoaded = ref<Boolean>(false);
       const loading = ref(false);
+      const isFirstLoad = ref(true);
       const getAttrs = computed(() => {
         return {
           ...(props.api ? { treeData: unref(treeData) } : {}),
@@ -41,29 +42,18 @@
         };
       });
 
-      function handleChange(...args) {
-        emit('change', ...args);
-      }
+      watchEffect(() => {
+        props.immediate && !props.alwaysLoad && fetch();
+      });
 
       watch(
           () => props.params,
           () => {
-            !unref(isFirstLoaded) && fetch();
+            !unref(isFirstLoad) && fetch();
           },
           { deep: true },
       );
 
-      watch(
-          () => props.immediate,
-          (v) => {
-            v && !isFirstLoaded.value && fetch();
-          },
-      );
-
-      onMounted(() => {
-        props.immediate && fetch();
-      });
-
       async function fetch() {
         const { api } = props;
         if (!api || !isFunction(api)) return;
@@ -77,15 +67,28 @@
         }
         loading.value = false;
         if (!result) return;
-        if (!isArray(result)) {
-          result = get(result, props.resultField);
+        if (!isArray(result)) result = get(result, props.resultField);
         props.listToTree && (result = listToTree(result, props.treeConfig));
-        }
         treeData.value = (result as Recordable[]) || [];
-        isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
-      return { getAttrs, loading, handleChange, fetch };
+
+      async function handleFetch(visible: boolean) {
+        if (visible) {
+          if (props.alwaysLoad) {
+            await fetch();
+          } else if (!props.immediate && unref(isFirstLoad)) {
+            await fetch();
+            isFirstLoad.value = false;
+          }
+        }
+      }
+
+      function handleChange(...args) {
+        emit('change', ...args);
+      }
+
+      return { getAttrs, loading, handleChange, handleFetch, fetch };
     },
   });
 </script>

src/views/workflow/model/helper/ProcessCategoryModal.vue

@@ -1,55 +1,97 @@
 <template>
   <BasicModal
     v-bind="$attrs"
-    width="720px"
+    title="设置流程分类"
     minHeight="100px"
-    @register="registerModal"
     @ok="handleSubmit"
+    @register="registerModal"
   >
-    待实现
+    <Form :model="modelRef" :rules="rulesRef">
+      <FormItem name="category" :wrapperCol="{ style: { padding:'8px' } }" v-bind="validateInfos.category">
+        <ApiTreeSelect
+          placeholder="请选择流程分类"
+          :fieldNames="{
+            label: 'name',
+            key: 'id',
+            value: 'id'
+          }"
+          :treeDefaultExpandAll="true"
+          :api="listProcessCategory"
+          :listToTree="true"
+          @change="handleValueBind"
+        />
+      </FormItem>
+    </Form>
   </BasicModal>
 </template>
+
 <script lang="ts" setup>
   /**
    * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
- * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * 采用ant-design-vue原生组件编写表单,采用 setup 写法
    * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
    * author wangxiang4
    */
-import { ref, unref } from 'vue';
+  import { reactive } from 'vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { Form } from 'ant-design-vue';
+  import { setProcessCategory } from '/@/api/platform/workflow/controller/process';
+  import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import ApiTreeSelect from '/@/components/Form/src/components/ApiTreeSelect.vue';
+  import type { ChangeEventExtra } from 'ant-design-vue/lib/vc-tree-select/TreeSelect';
 
+  /** 类型规范统一声明定义区域 */
+  interface WindowState {
+    processDefKeys: string;
+    category: string;
+  }
   /** 通用变量统一声明区域 */
-const tag = ref<Nullable<string>>('');
+  const { createMessage } = useMessage();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-  // 处理设置数据
-  tag.value = data._tag;
-  const rootTree = { id: '0', name: '顶级分类', children: [] };
-
-  const id = data.record?.id;
+  const FormItem = Form.Item;
+  const useForm = Form.useForm;
+  const modelRef = reactive<WindowState>({
+    processDefKeys: '',
+    category: ''
+  });
 
+  const rulesRef = reactive<Recordable>({
+    category: [
+      {
+        required: true,
+        whitespace: true,
+        message: '请选择流程分类！',
+      }
+    ]
+  });
+  const { resetFields, clearValidate, validate, validateInfos } = useForm(modelRef, rulesRef);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner( (data: BoxPayload) => {
+    // 处理清除脏数据
+    resetFields();
+    clearValidate();
+    // 处理设置数据
+    modelRef.processDefKeys = data.id;
     const props: Partial<ModalProps> = { confirmLoading: false };
-  props.title = '设置流程表单分类';
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
-/** 处理弹出框提交 */
+  function handleValueBind(value: string, label: string[] = [], extra: ChangeEventExtra) {
+    label.unshift(value);
+    modelRef.category = label.join(',');
+  }
+
+  /** 处理模态框提交 */
   async function handleSubmit() {
     try {
+      // 验证数据
+      await validate();
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
-    // 采用tag标签区分操作
-    switch (unref(tag)) {
-      case 'add':
-
-        break;
-      case 'edit':
-
-        break;
-    }
+      if (!modelRef.processDefKeys) return createMessage.error('流程定义key不存在,请检查!');
+      await setProcessCategory(modelRef);
       // 处理提交完成之后逻辑
       closeModal();
       emit('success');

src/views/workflow/model/index.vue

@@ -68,6 +68,7 @@
       </template>
     </BasicTable>
     <WorkflowModelDesign @register="registerWorkflowModelDesign" @success="handleRefreshTable"/>
+    <ProcessCategoryModal @register="registerProcessCategory" @success="handleRefreshTable"/>
   </div>
 </template>
 
@@ -86,6 +87,7 @@
   import { columns, searchFormSchema } from './model.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import WorkflowModelDesign from './helper/WorkflowModelDesign.vue';
+  import ProcessCategoryModal from './helper/ProcessCategoryModal.vue';
 
   interface TableState {
     ids: string[];
@@ -98,6 +100,7 @@
       BasicTable,
       TableAction,
       WorkflowModelDesign,
+      ProcessCategoryModal,
     },
     setup() {
       const state = reactive<TableState>({
@@ -110,7 +113,8 @@
       });
       const { createConfirm, createMessage } = useMessage();
       const [registerWorkflowModelDesign , { openModal: openWorkflowModelDesign }] = useModal();
-      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+      const [registerProcessCategory , { openModal: openProcessCategory }] = useModal();
+      const [registerTable, { reload, clearSelectedRowKeys, getSelectRows }] = useTable({
         api: listModel,
         rowKey: 'id',
         columns,
@@ -145,7 +149,12 @@
       }
 
       function setProcessCategory() {
-
+        const row = getSelectRows()[0];
+        if (row?.processDefinition) {
+          openProcessCategory(true,{ id: row.modelKey });
+        } else {
+          createMessage.error('未发布的流程不能设置分类,请先发布流程!');
+        }
       }
 
       function  handleModelAdd() {
@@ -246,7 +255,8 @@
         handleCopy,
         handleProcessActive,
         handleProcessSuspend,
-        handleDeploy
+        handleDeploy,
+        registerProcessCategory
       };
     }
   });