流程设计,节点后页面搭建,数据收集,修改

zkqy-ui/src/api/dragform/form.js

@@ -109,3 +109,5 @@ export function getProcessPopupTableList(data) {
 
 
 
+
+

zkqy-ui/src/api/system/formGroup.js

@@ -47,3 +47,12 @@ export function delFormGroup(id) {
     baseURL: process.env.VUE_APP_BASE_API3
   })
 }
+
+// 获取表单组字段数据
+export function getFormGroupData(groupKey) {
+  return request({
+    url: `/system/formGroup/getInfoByGroupKey/${groupKey}`,
+    method: 'get',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}

zkqy-ui/src/views/system/bpmnPro/components/Panel/components/ElementAfterNode.vue

@@ -23,7 +23,13 @@
       </edit-item>
     </div>
     <el-dialog title="" :visible.sync="show" width="1200px">
-      <div class="main-wrap">
+      <exeList
+        ref="exeListRef"
+        :formItemsList="formItemsList"
+        :afterNodeData="afterNodeData"
+        :isEdit="isEdit"
+      ></exeList>
+      <!-- <div class="main-wrap">
         <div class="header">
           <el-select
             v-model="tableName"
@@ -59,22 +65,8 @@
                 >{{ item.model }}</el-descriptions-item
               >
             </el-descriptions>
-            <!-- <el-form ref="form" :rules="rules" :inline="true" size="small">
-              <el-form-item
-                v-for="item in formItemsList"
-                :key="item.model"
-                :label="item.label + ':'"
-              >
-                <el-input :disabled="true"></el-input>
-              </el-form-item>
-            </el-form> -->
           </div>
           <div class="center-wrap">
-            <!-- <el-form ref="form" :rules="rules" size="small">
-              <el-form-item v-for="item in formItemsList" :key="item.model">
-                <el-input :disabled="true"></el-input>
-              </el-form-item>
-            </el-form> -->
             <el-descriptions title="同步表格字段" :column="1" :colon="false">
               <el-descriptions-item
                 v-for="(item, index) in listData"
@@ -110,11 +102,6 @@
             </el-descriptions>
           </div>
           <div class="right-wrap">
-            <!-- <el-form ref="form" :rules="rules" size="small">
-              <el-form-item v-for="item in formItemsList" :key="item.model">
-                <el-input :disabled="true"></el-input>
-              </el-form-item>
-            </el-form> -->
             <el-descriptions title="默认值" :column="1" :colon="false">
               <el-descriptions-item
                 v-for="(item, index) in listData"
@@ -125,7 +112,7 @@
             </el-descriptions>
           </div>
         </div>
-      </div>
+      </div> -->
       <template #footer>
         <span>
           <el-button @click="show = false">取消</el-button>
@@ -141,6 +128,8 @@ import EventEmitter from "@utils/EventEmitter";
 import {
   setAfterNdoe,
   getAfterNdoe,
+  getAfterNodeData,
+  setAfterNodeData,
   getFormKey,
   setFormKey,
   setFId,
@@ -154,10 +143,13 @@ import {
   getListName,
   dragTablePreview,
 } from "@/api/dragform/form.js";
+import { getFormGroup, getFormGroupData } from "@/api/system/formGroup";
 import { getDicts } from "@/api/system/dict/data";
 import { mapState } from "vuex";
+import exeList from "./afterNodeComponents/index.vue";
 export default {
   name: "ElementAfterNode",
+  components: { exeList },
   data() {
     return {
       afterNodeValue: "",
@@ -167,6 +159,9 @@ export default {
       tableList: [], //表格列表
       tableItemList: [], //表格字段列表
       listData: [],
+
+      isEdit: false,
+      afterNodeData: [],
     };
   },
   inject: {
@@ -174,6 +169,10 @@ export default {
       from: "getMyFid",
       default: "",
     },
+    getFormType: {
+      from: "getFormType",
+      default: "",
+    },
   },
   mounted() {
     this.initFormData();
@@ -239,9 +238,13 @@ export default {
     },
     // 确认回调
     confirmHandler() {
-      console.log(this.listData);
-      let temp = this.filterListData(this.listData);
-      console.log("temp", temp);
+      // console.log(this.listData);
+      // let temp = this.filterListData(this.listData);
+      // console.log("temp", temp);
+      let exeData = this.$refs.exeListRef.getExeData();
+      console.log("exeData", exeData);
+      setAfterNodeData(getActive(), JSON.stringify(exeData));
+      this.show = false;
     },
     // 过滤数据返回有效数据
     filterListData(data) {
@@ -275,6 +278,14 @@ export default {
     },
     initFormData() {
       this.afterNodeValue = getAfterNdoe(getActive()) || "";
+      let afterNodeData = getAfterNodeData(getActive()) || "";
+
+      if (afterNodeData) {
+        this.isEdit = true;
+        this.afterNodeData = JSON.parse(afterNodeData);
+      } else {
+        this.isEdit = false;
+      }
     },
     updateBeforeNodeValue(value) {
       setAfterNdoe(getActive(), value);
@@ -283,12 +294,35 @@ export default {
     async editHandler() {
       // let fId = getFId(getActive());
       let fId = this.getMyFid();
-      console.log(fId);
+      let formType = this.getFormType();
+
+      console.log(fId, formType);
       if (!fId) {
         this.$message.warning(`请在'常规信息'中绑定表单`);
         return;
       }
+      if (formType == "") {
+        this.$message.warning(`请在'常规信息'中选择表单类型`);
+        return;
+      }
+      if (formType == "dragForm") {
+        //单个表单
+        //获取表单数据
+        this.initDragFormData(fId);
+      } else {
+        //表单组
+        this.initDragFormGroupData(fId);
+      }
       //获取表单数据
+
+      this.show = true;
+      this.$nextTick(() => {
+        this.$refs.exeListRef.initData();
+      });
+    },
+
+    // 初始化单独表单数据
+    async initDragFormData(fId) {
       try {
         let res = await getInfoByFormKey(fId);
         if (res.code == 200) {
@@ -301,7 +335,54 @@ export default {
         console.log(e);
         this.$message.error("网络异常请稍后再试");
       }
-      this.show = true;
+    },
+    // 初始化表单组数据
+    async initDragFormGroupData(fId) {
+      console.log("表单组", fId);
+      try {
+        let res = await getFormGroupData(fId);
+        console.log(res);
+        if (res.code == 200) {
+          let jsonData = res.data.relationJson;
+          if (jsonData) {
+            this.getFormGroupData(jsonData);
+          }
+        }
+        if ((res.code = 200)) {
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 格式化表单组字段数据
+    getFormGroupData(jsonData) {
+      let { mainForm, subFormList } = JSON.parse(jsonData);
+      let res = [];
+      let { formKey, mainFormName, showTemplate } = mainForm;
+      res.push({
+        formKey, //表单key
+        formName: mainFormName, //表单name
+        template: showTemplate.dfVueTemplate, //表单模板
+        tableName: showTemplate.dfTableName, //表名
+      });
+      subFormList.forEach((item) => {
+        let { formKey, showTemplate } = item;
+        res.push({
+          formKey, //表单key
+          formName: showTemplate.dfName, //表单name
+          template: showTemplate.dfVueTemplate, //表单模板
+          tableName: item.formItem?.split(".")[0], //表名
+        });
+      });
+      this.formItemsList = [];
+      res.forEach((item) => {
+        item.itemList = getFormItems(item.template);
+        this.formItemsList.push(...item.itemList);
+      });
+
+      console.log(res);
     },
   },
 };

zkqy-ui/src/views/system/bpmnPro/components/Panel/components/ElementGenerations.vue

@@ -336,6 +336,10 @@ export default {
       from: "setMyFid",
       default: () => {},
     },
+    setMyFormType: {
+      from: "setFormType",
+      default: () => {},
+    },
   },
   mounted() {
     this.reloadGenerationData();
@@ -362,6 +366,8 @@ export default {
         if (!this.elFormData.formType) {
           this.elFormData.formType = "dragForm";
           this.updateFormType("dragForm");
+        } else {
+          this.setMyFormType()(this.elFormData.formType);
         }
       } else {
         this.elFormData.nodeDescription = getNodeDescription(getActive()) || "";
@@ -383,6 +389,7 @@ export default {
     },
     updateFormType(value) {
       setFormType(getActive(), value);
+      this.setMyFormType()(value);
       this.elFormData.fId = "";
       this.updateFId("");
     },

zkqy-ui/src/views/system/bpmnPro/components/Panel/components/afterNodeComponents/exeItem.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="">
+    <!-- <el-divider content-position="left">{{
+      index + ". " + itemData.timiLabel + " " + itemData.exeTypeLabel
+    }}</el-divider> -->
+    <div class="title">
+      <span>{{
+        index +
+        1 +
+        ".  执行时机: " +
+        itemData.timiLabel +
+        "  操作类型: " +
+        itemData.exeTypeLabel
+      }}</span>
+      <el-button type="danger" size="mini" @click="deleteItem">删除</el-button>
+    </div>
+    <el-table :data="tableData" border stripe>
+      <el-table-column label="序号" type="index" width="50" />
+      <el-table-column prop="fieldName" label="字段名">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.fieldName" clearable filterable>
+            <el-option
+              v-for="item in formItemsList"
+              :key="item.model + item.tableName"
+              :label="item.label"
+              :value="item.tableName + '.' + item.model"
+            >
+              <span class="discribe" style="float: left">{{ item.label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.tableName + "." + item.model
+              }}</span>
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="relaTableName" label="关联表">
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.relaTableName"
+            placeholder="请选择数据表"
+            filterable
+            @change="getList(scope.row)"
+            class="mb10"
+          >
+            <el-option
+              v-for="item in baseTableList"
+              :key="item.tableName"
+              :label="item.tableComment"
+              :value="item.tableName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.tableComment
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.tableName
+              }}</span>
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="relaFieldName" label="关联字段">
+        <template slot-scope="scope">
+          <el-select
+            v-model="scope.row.relaFieldName"
+            placeholder="请选择字段"
+            filterable
+            class="mb10"
+          >
+            <el-option
+              v-for="item in scope.row.relaFieldOptions"
+              :key="item.fieldName"
+              :label="item.fieldDescription"
+              :value="item.fieldName"
+            >
+              <span class="discribe" style="float: left">{{
+                item.fieldDescription
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldName
+              }}</span>
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isCondition" label="是否为条件">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.isCondition"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-value="true"
+            inactive-value="false"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="defaultValue" label="默认值">
+        <template slot-scope="scope">
+          <el-input
+            v-model="scope.row.defaultValue"
+            placeholder="请输入默认值"
+          ></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="danger"
+            size="mini"
+            @click="handleDelete(scope.$index, scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button
+      style="width: 100%"
+      type="primary"
+      size="medium"
+      @click="addHandler"
+      >添加</el-button
+    >
+  </div>
+</template>
+
+<script>
+import { getListName } from "@/api/dragform/form.js";
+import { mapState } from "vuex";
+export default {
+  name: "exeItem",
+  props: ["itemData", "index", "baseTableList", "formItemsList"],
+  components: {},
+  data() {
+    return {
+      tableData: [],
+      commonFieldOption: {},
+    };
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+    myTableData() {
+      return this.itemData;
+    },
+  },
+  watch: {
+    myTableData: {
+      handler(val) {
+        this.tableData = val.tableData;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    // 获取执行数据
+    getItemData() {
+      this.tableData.forEach((item, index) => {
+        delete item.relaFieldOptions;
+      });
+      return this.tableData;
+    },
+    // 删除操作
+    handleDelete(index) {
+      this.tableData.splice(index, 1);
+    },
+    // 添加操作
+    addHandler() {
+      this.tableData.push({
+        fieldName: "",
+        relaTableName: "",
+        relaFieldName: "",
+        isCondition: false,
+        defaultValue: "",
+        relaFieldOptions: [],
+      });
+    },
+    // 删除item
+    deleteItem() {
+      console.log(this.index);
+      this.$emit("handleDelete", this.index);
+    },
+    // 查询表单字段
+    getList(row) {
+      if (!row.relaTableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: row.relaTableName,
+      };
+      console.log(row);
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        row.relaFieldOptions = res.map((item) => {
+          return {
+            fieldName: item.fieldName,
+            fieldDescription: item.fieldDescription,
+          };
+        });
+        // console.log(res);
+        // this.tableFieldList = res.map((item, index) => {
+        //   return {
+        //     id: this.tableName + "_" + item.fieldName,
+        //     fieldName: item.fieldName,
+        //     fieldDescription: item.fieldDescription,
+        //     relationTable: "",
+        //     relationFieldName: "",
+        //     relaFieldNameList: [],
+        //     disableRelaFieldName: false,
+        //     relationType: "",
+        //     relationShowField: [],
+        //     relationShowFiledList: [],
+        //     disableRelaType: false,
+        //     isShow: true,
+        //     isSearch: false,
+        //     isExport: false,
+        //     relationTableList: this.relationTableList,
+        //     tableName: this.tableName,
+        //     tableComment,
+        //     relationFieldList: [],
+        //   };
+        // });
+        // console.log(this.tableFieldList);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.title {
+  padding: 10px;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

zkqy-ui/src/views/system/bpmnPro/components/Panel/components/afterNodeComponents/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="list-wrap">
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="80px"
+      :inline="true"
+      size="normal"
+    >
+      <el-form-item label="执行时机" prop="timing">
+        <el-select v-model="form.timing" placeholder="请选择执行时机">
+          <el-option
+            v-for="item in timingList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="执行类型" prop="exeType">
+        <el-select v-model="form.exeType" placeholder="请选择执行类型">
+          <el-option
+            v-for="item in exeTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="createHandler">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="list-content">
+      <exeItem
+        v-for="(item, index) in exeList"
+        :key="index"
+        :ref="'exeItem' + index"
+        :itemData="item"
+        :index="index"
+        :baseTableList="baseTableList"
+        :formItemsList="formItemsList"
+        @handleDelete="handleDelete"
+      ></exeItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import exeItem from "./exeItem.vue";
+import { mapState } from "vuex";
+import { getFormName } from "@/api/dragform/form.js";
+export default {
+  name: "exeList",
+  props: ["formItemsList", "isEdit", "afterNodeData"],
+  components: { exeItem },
+  data() {
+    return {
+      form: {
+        timing: "",
+        exeType: "",
+      },
+      rules: {
+        timing: [
+          { required: true, message: "请选择执行时机", trigger: "change" },
+        ],
+        exeType: [
+          { required: true, message: "请选择执行类型", trigger: "change" },
+        ],
+      },
+      // 执行时机
+      timingList: [
+        {
+          value: "pass",
+          label: "通过",
+        },
+        {
+          value: "reject",
+          label: "驳回",
+        },
+        {
+          value: "nopass",
+          label: "不通过",
+        },
+      ],
+      // 执行类型
+      exeTypeList: [
+        {
+          value: "update",
+          label: "修改",
+        },
+        {
+          value: "insert",
+          label: "新增",
+        },
+      ],
+      // 执行数据列表
+      exeList: [
+        // {
+        //   timing: "",
+        //   exeType: "",
+        //   tableData: [],
+        // },
+      ],
+      // 基础表列表
+      baseTableList: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+  },
+  methods: {
+    // 获取执行数据
+    getExeData() {
+      this.exeList.forEach((item, index) => {
+        console.log(this.$refs["exeItem" + index]);
+        item.tableData = this.$refs["exeItem" + index][0].getItemData();
+      });
+      return this.exeList;
+    },
+    // 新增操作回调
+    createHandler() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(valid);
+          this.exeList.push({
+            timing: this.form.timing,
+            exeType: this.form.exeType,
+            timiLabel: this.timingList.find(
+              (item) => item.value == this.form.timing
+            ).label,
+            exeTypeLabel: this.exeTypeList.find(
+              (item) => item.value == this.form.exeType
+            ).label,
+            tableData: [],
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    // 删除操作回调
+    handleDelete(index) {
+      this.exeList.splice(index, 1);
+    },
+    // 获取所有基础表
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+
+      const baseTable = await this.getDicts("base_table");
+
+      this.baseTableList = res.data.filter((item) => {
+        return !baseTable.data.some(
+          (value) =>
+            value.dictValue.toLowerCase() == item.tableName.toLowerCase()
+        );
+      });
+      console.log("baseTableList", this.baseTableList);
+    },
+    initData() {
+      this.getAllTable();
+      if (this.isEdit) {
+        this.exeList = this.afterNodeData;
+      } else {
+        this.exeList = [];
+      }
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss"></style>

zkqy-ui/src/views/system/bpmnPro/components/Panel/index.vue

@@ -229,8 +229,8 @@ export default {
           this.renderComponents.push(ElementExcuteType); //执行类型
       } else if (this.myProcessType == 1) {
         this.renderComponents.push(ElementGenerations); //常规信息
-        // !isProcess(element) && this.renderComponents.push(ElementAfterNode);
-        isUserTask(element) && this.renderComponents.push(ElementExecuteUser);
+        !isProcess(element) && this.renderComponents.push(ElementAfterNode); //节点后
+        isUserTask(element) && this.renderComponents.push(ElementExecuteUser); //执行人
         !isProcess(element) && this.renderComponents.push(ElementNormalTask); //正常节点`
       }
       // switch (this.myProcessType) {

zkqy-ui/src/views/system/bpmnPro/components/bo-utils/getNodeMsg.js

@@ -70,6 +70,7 @@ export function getNodeMsg(xmlObj, processType) {
       let tempAttr = prefix + ':' + attr
       nodeObj[attr] = node.attributes[tempAttr]?.nodeValue
     });
+    nodeObj.task3 = node.getAttribute(`${prefix}:afterNodeData`); //节点后数据
     nodeObj.nodeKey = node.id;
     nodeObj.nodeName = node.getAttribute('name');
     // if (nodeObj.nodeName.includes('-')) {

zkqy-ui/src/views/system/bpmnPro/components/bo-utils/myFieldUtil.js

@@ -435,4 +435,18 @@ export function setNodeExecuteType(element, value) {
     [`${prefix}:nodeExecuteType`]: value
   });
 }
+/*               节点后数据                */
+export function getAfterNodeData(element) {
+  const prefix = getProcessEngine();
+  const businessObject = getBusinessObject(element);
+  return businessObject.get(`${prefix}:afterNodeData`);
+}
 
+export function setAfterNodeData(element, value) {
+  const prefix = getProcessEngine();
+  const modeling = getModeler.getModeling();
+  const businessObject = getBusinessObject(element);
+  modeling.updateModdleProperties(element, businessObject, {
+    [`${prefix}:afterNodeData`]: value
+  });
+}

zkqy-ui/src/views/system/bpmnPro/index.vue

@@ -106,6 +106,7 @@ export default {
       dragFormList: [],
       groupDragFormList: [],
       FID: "",
+      formType: "", //表单类型
 
       // 流程类型数据
       show: false,
@@ -130,6 +131,8 @@ export default {
       groupDragFormList: () => this.groupDragFormList,
       setMyFid: () => this.setFid,
       getMyFid: () => this.FID,
+      getFormType: () => this.formType,
+      setFormType: () => this.setFormType,
     };
   },
   methods: {
@@ -154,6 +157,10 @@ export default {
     setFid(fId) {
       this.FID = fId;
     },
+    // 设置表单类型
+    setFormType(formType) {
+      this.formType = formType;
+    },
     // 获取所有用户列表
     async getAllUserList() {
       // console.log(this.$store.state.user.tenant.tenantId);