feat : workflow适配

src/views/workflow/approve/InitiateProcess.vue

@@ -2,8 +2,9 @@
   <div v-loading="loading" class="initiate_process">
     <div v-if="!loading" style="min-width:30%">
       <!--渲染表单-->
-      <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
-                   v-model:value="formData" mode="E"/>
+      <!--      todo 关闭以前的表单渲染 , 此处需要根据参数来定制当前需要展示的页面信息 -->
+      <!--      <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"-->
+      <!--                   v-model:value="formData" mode="E"/>-->
     </div>
     <div v-if="!loading" id="approveTree"
          style="display: flex;justify-content: center;flex-direction: column;min-width:60%">
@@ -18,8 +19,9 @@ import {getInitiateInfo} from "@/api/workflow/process-definition.js";
 import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
 import FormRender from '@/views/workflow/form/FormRender.vue'
 import {useProcessStore} from '@/stores/processStore.js'
+
 const processStore = useProcessStore()
-import {defineProps,defineExpose} from 'vue'
+import {defineProps, defineExpose} from 'vue'
 import {ElMessage} from "element-plus";
 
 const props = defineProps({

src/views/workflow/approve/index.vue

@@ -101,6 +101,7 @@ const handleReset = () => {
 }
 
 const submitForm = () => {
+  // todo 重新编写表单数据, 不适用当前的动态表单
   let formData = processInstance.value.formData
   let paramsData = {
     processDefinitionId: selectItem.value.processDefinitionId,

src/views/workflow/common/InstanceDetails.vue

@@ -29,8 +29,8 @@
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render ref="taskViewForm" :form-items="processInstanceData.formItems"
-                     v-model:value="processInstanceData.formData"/>
+<!--        <form-render ref="taskViewForm" :form-items="processInstanceData.formItems"-->
+<!--                     v-model:value="processInstanceData.formData"/>-->
         <div style="height: 15px;background:#f5f5f5;"></div>
         <operation-render :operation-list="processInstanceData.operationList"
                           :state="instance.state"/>
@@ -45,7 +45,7 @@
 
 <script setup>
 import Tag from '@/components/Tag.vue'
-import FormRender from '@/views/workflow/form/FormRender.vue'
+// import FormRender from '@/views/workflow/form/FormRender.vue'
 import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
 import {getInitiatedInstanceInfo} from "@/api/workflow/process-instance.js";

src/views/workflow/process/ProcessEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="margin-top: 15px">
     <el-button @click="changPan('processSetting')">流程设置</el-button>
-    <el-button @click="changPan('formDesign')">表单</el-button>
+    <!--    <el-button @click="changPan('formDesign')">表单</el-button>-->
     <el-button @click="changPan('processDesign')">流程</el-button>
     <el-button @click="publishProcess">发布</el-button>
     <div class="layout-body" v-if="visible">
@@ -11,9 +11,9 @@
       <div v-show="activeSelect === 'processDesign'">
         <process-design ref="processDesign"/>
       </div>
-      <div v-show="activeSelect === 'formDesign'">
-        <form-design ref="formDesign"/>
-      </div>
+      <!--      <div v-show="activeSelect === 'formDesign'">-->
+      <!--        <form-design ref="formDesign"/>-->
+      <!--      </div>-->
     </div>
 
   </div>
@@ -72,7 +72,8 @@ import {ElMessage, ElMessageBox} from "element-plus";
 const processDesign = ref()
 const visible = ref(false)
 const timer = ref(null)
-const validComponents = ref(['processSetting', 'formDesign', 'processDesign'])
+// const validComponents = ref(['processSetting', 'formDesign', 'processDesign'])
+const validComponents = ref(['processSetting', 'processDesign'])
 // const activeSelect = ref('formDesign')
 // const activeSelect = ref('processSetting')
 const activeSelect = ref('processDesign')
@@ -81,7 +82,7 @@ const validStep = ref(0)
 const validResult = ref({})
 const validOptions = ref([
   {title: '基础信息', description: '', icon: '', status: ''},
-  {title: '审批表单', description: '', icon: '', status: ''},
+  // {title: '审批表单', description: '', icon: '', status: ''},
   {title: '审批流程', description: '', icon: '', status: ''},
   // {title: '扩展设置', description: '', icon: '', status: ''}
 ])
@@ -118,21 +119,21 @@ const loadInitFrom = () => {
   let design = {
     processDefinitionKey: 'pro' + getRandomId(),
     deploymentName: "未命名表单",
-    logo: {
-      icon: "el-icon-eleme",
-      background: "#1e90ff"
-    },
-    settings: {
-      commiter: [],
-      admin: [],
-      sign: false,
-      notify: {
-        types: ["APP"],
-        title: "消息通知标题"
-      }
-    },
+    // logo: {
+    //   icon: "el-icon-eleme",
+    //   background: "#1e90ff"
+    // },
+    // settings: {
+    //   commiter: [],
+    //   admin: [],
+    //   sign: false,
+    //   notify: {
+    //     types: ["APP"],
+    //     title: "消息通知标题"
+    //   }
+    // },
     groupId: 1,
-    formItems: [],
+    // formItems: [],
     process: [
       {
         id: "root",
@@ -151,6 +152,27 @@ const loadInitFrom = () => {
         type: "END",
       }
     ],
+    processFromPerms: [{
+      id: "projectName",
+      title: "项目名称",
+      required: true,
+      perm: "R"
+    }, {
+      id: "projectType",
+      title: "项目类型",
+      required: true,
+      perm: "R"
+    }, {
+      id: "projectDesc",
+      title: "项目描述",
+      required: true,
+      perm: "R"
+    }, {
+      id: "projectManager",
+      title: "项目经理",
+      required: true,
+      perm: "R"
+    }],
     remark: "备注说明"
   }
   processStore.setDesign(design)

src/views/workflow/process/config/ConditionGroupItemConfig.vue

@@ -94,7 +94,9 @@
                 <org-items :modelValue="users"/>
               </span>
             <span v-else-if="condition.valueType === ValueType.date"></span>
-            <el-icon class="delete-icon" @click="delSubCondition(group, cindex)"><Minus /></el-icon>
+            <el-icon class="delete-icon" @click="delSubCondition(group, cindex)">
+              <Minus/>
+            </el-icon>
           </el-form-item>
         </el-form>
       </div>
@@ -140,14 +142,20 @@ const selectedNode = computed(() => {
   return processStore.getSelectedNode()
 })
 
+const processFromPerms = computed(() => {
+  return processStore.getDesign().processFromPerms;
+});
+
 const conditionList = computed(() => {
   //条件数组
   //构造可用条件选项
   const conditionItems = []
-  processStore.getDesign().formItems.forEach(item => filterCondition(item, conditionItems))
-  if (conditionItems.length === 0 || conditionItems[0].id !== 'root') {
-    conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
-  }
+  filterConditionMosr(conditionItems)
+  // processStore.getDesign().formItems.forEach(item => filterCondition(item, conditionItems))
+  // if (conditionItems.length === 0 || conditionItems[0].id !== 'root') {
+  //   conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
+  // }
+  conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
   return conditionItems
 })
 
@@ -184,6 +192,14 @@ const selectUser = (value, orgType) => {
   users.value = value
   orgPicker.value.showUserPicker()
 }
+const filterConditionMosr = (list) => {
+  processFromPerms.value.forEach((item) => {
+    console.log(item)
+    if (item.required){
+      list.push({title: item.title, id: item.id, valueType: item.valueType})
+    }
+  })
+}
 
 const filterCondition = (item, list) => {
   //从表单中过滤出可以选择的条件
@@ -206,8 +222,7 @@ const selected = (selected) => {
   users.value = userInfoList
   //组织选择器的选中回调函数
   // users.value.length = 0
-  // console.log('processStore.getAssignedUser()',processStore.getAssignedUser())
-  processStore.getAssignedUser().forEach(u => users.value=userInfoList)
+  processStore.getAssignedUser().forEach(u => users.value = userInfoList)
 }
 
 const delGroup = (index) => {
@@ -228,7 +243,6 @@ const conditionChange = (index, group) => {
     if (0 > group.conditions.findIndex(cd => cd.id === cid)) {
       //新增条件
       let condition = {...conditionList.value[index]}
-      console.log('fs', condition, conditionList.value, index)
       condition.compare = '';
       condition.value = []
       group.conditions.push(condition)

src/views/workflow/process/config/FormAuthorityConfig.vue

@@ -66,7 +66,30 @@ const init = () => {
     }
   }
   processStore.getSelectedNode().props.formPerms = [];
-  formPermsLoad(oldPermMap, processStore.getDesign().formItems);
+  //todo 项目字段测试
+  let perms = [{
+    id: "projectName",
+    title: "项目名称",
+    required: true,
+    perm: "R"
+  }, {
+    id: "projectType",
+    title: "项目类型",
+    required: true,
+    perm: "R"
+  }, {
+    id: "projectDesc",
+    title: "项目描述",
+    required: true,
+    perm: "R"
+  }, {
+    id: "projectManager",
+    title: "项目经理",
+    required: true,
+    perm: "R"
+  }];
+  // formPermsLoad(oldPermMap, processStore.getDesign().formItems);
+  formPermsLoadMosr(oldPermMap, processFromPerms.value);
 };
 
 const formPerms = computed(() => {
@@ -81,12 +104,40 @@ const formItems = computed(() => {
   return processStore.getDesign().formItems;
 });
 
+const processFromPerms = computed(() => {
+  return processStore.getDesign().processFromPerms;
+});
+
+
+
+
+
 const allSelect = (type) => {
   permSelect.value = type;
   formPerms.value.forEach(f => f.perm = type);
 };
+const formPermsLoadMosr = (oldPermMap, perms) => {
 
+  perms.forEach(perm =>{
+    console.log(perm)
+    //刷新名称
+    let old = oldPermMap.get(perm.id)
+    if (old) {
+      old.title = perm.title;
+      old.required = perm.required;
+      formPerms.value.push(old);
+    } else {
+      formPerms.value.push({
+        id: perm.id, //todo ,id 就是字段名称
+        title: perm.title,
+        required: perm.required,
+        perm: nowNode.type === "ROOT" ? "E" : "R"
+      });
+    }
+  })
+}
 
+//todo  初始化表单权限的位置,表单字段信息放在config配置中心
 const formPermsLoad = (oldPermMap, forms) => {
   forms.forEach(form => {
     if (form.name === "SpanLayout") {
@@ -100,7 +151,7 @@ const formPermsLoad = (oldPermMap, forms) => {
         formPerms.value.push(old);
       } else {
         formPerms.value.push({
-          id: form.id,
+          id: form.id, //todo ,id 就是字段名称
           title: form.title,
           required: form.props.required,
           perm: nowNode.type === "ROOT" ? "E" : "R"

src/views/workflow/process/config/NodeConfig.vue

@@ -1,15 +1,16 @@
 <template>
-    <el-tabs v-model="active" v-if="visible && name && formConfig.length > 0">
-      <el-tab-pane :label="name" name="properties">
-        <component :is="com" :config="selectNode.props" @initRender="emit('initRender')"/>
-      </el-tab-pane>
-      <el-tab-pane label="表单权限设置" name="permissions">
-        <form-authority-config :node-type="selectNode.type"/>
-      </el-tab-pane>
-    </el-tabs>
-    <div v-else>
+  <!--  <el-tabs v-model="active" v-if="visible && name && formConfig.length > 0">-->
+  <el-tabs v-model="active" v-if="visible && name">
+    <el-tab-pane :label="name" name="properties">
       <component :is="com" :config="selectNode.props" @initRender="emit('initRender')"/>
-    </div>
+    </el-tab-pane>
+    <el-tab-pane label="表单权限设置" name="permissions">
+      <form-authority-config :node-type="selectNode.type"/>
+    </el-tab-pane>
+  </el-tabs>
+  <div v-else>
+    <component :is="com" :config="selectNode.props" @initRender="emit('initRender')"/>
+  </div>
 </template>
 
 <script setup>
@@ -21,7 +22,8 @@ import CcNode from './CcNodeConfig.vue'
 import Condition from './ConditionNodeConfig.vue'
 import Trigger from './TriggerNodeConfig.vue'
 import {useProcessStore} from '@/stores/processStore.js'
-import {computed,defineEmits} from 'vue'
+import {computed, defineEmits} from 'vue'
+
 const emit = defineEmits()
 
 const processStore = useProcessStore()
@@ -31,9 +33,9 @@ const selectNode = computed(() => {
 })
 
 
-const formConfig = computed(() => {
-  return processStore.getDesign().formItems
-})
+// const formConfig = computed(() => {
+//   return processStore.getDesign().formItems
+// })
 
 
 const com = ref()
@@ -41,7 +43,7 @@ const active = ref('properties')
 const visible = ref(false)
 
 
-const name = computed(()=>{
+const name = computed(() => {
   switch (processStore.getSelectedNode().type) {
     case 'ROOT':
       return '设置发起人';
@@ -56,7 +58,6 @@ const name = computed(()=>{
 
 
 const init = () => {
-  console.log(processStore.getSelectedNode().type)
   switch (processStore.getSelectedNode().type) {
     case 'APPROVAL' :
       com.value = Approval;