OA流程节点后数据处理及页面搭建

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

@@ -7,26 +7,127 @@
     </template>
     <div class="element-after-node">
       <edit-item label="节点后操作" :label-width="100">
-        <el-input
+        <!-- <el-input
           v-model="afterNodeValue"
           maxlength="32"
           @change="updateBeforeNodeValue"
-        />
+        /> -->
+        <el-button
+          icon="el-icon-edit"
+          type="info"
+          size="small"
+          @click="editHandler"
+        >
+          编辑
+        </el-button>
       </edit-item>
     </div>
+    <el-dialog title="" :visible.sync="show" width="1200px">
+      <div class="main-wrap">
+        <div class="header"></div>
+        <div class="list-wrap">
+          <div class="left-wrap">
+            <el-descriptions title="表单字段信息" :column="1">
+              <el-descriptions-item
+                v-for="(item, index) in formItemsList"
+                :key="item.model"
+                :label="item.label"
+                :label-class-name="(index + 1) % 2 == 0 ? 'light' : 'deep'"
+                :content-class-name="(index + 1) % 2 == 0 ? 'light' : 'deep'"
+                >{{ 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 in formItemsList"
+                :key="item.model"
+              >
+                <div class="item-wrap">
+                  <div class="switch-wrap">
+                    <el-switch
+                      v-model="item.isRelated"
+                      active-color="#13ce66"
+                      inactive-color="#ff4949"
+                      active-value="100"
+                      inactive-value="0"
+                    >
+                    </el-switch>
+                  </div>
+                  <el-select clearable filterable @change="() => {}">
+                    <el-option
+                      v-for="item in []"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </el-descriptions-item>
+            </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 in formItemsList"
+                :key="item.model"
+              >
+                <el-input> </el-input>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span>
+          <el-button @click="show = false">取消</el-button>
+          <el-button type="primary" @click="() => {}">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </el-collapse-item>
 </template>
 
 <script>
 import EventEmitter from "@utils/EventEmitter";
-import { setAfterNdoe, getAfterNdoe } from "@packages/bo-utils/myFieldUtil";
+import {
+  setAfterNdoe,
+  getAfterNdoe,
+  getFormKey,
+  setFormKey,
+} from "@packages/bo-utils/myFieldUtil";
 import { getActive } from "@packages/bpmn-utils/BpmnDesignerUtils";
+import { getForm } from "@/api/dragform/form";
+import { getFormItems } from "@packages/bo-utils/getFormItems";
 
 export default {
   name: "ElementAfterNode",
   data() {
     return {
       afterNodeValue: "",
+      show: false,
+      formItemsList: [],
     };
   },
 
@@ -43,6 +144,26 @@ export default {
     updateBeforeNodeValue(value) {
       setAfterNdoe(getActive(), value);
     },
+    // 编辑回调
+    async editHandler() {
+      let fId = getFormKey(getActive());
+      if (!fId) {
+        this.$message.warning(`请在'常规信息'中绑定表单`);
+        return;
+      }
+      try {
+        let res = await getForm(fId);
+        if (res.code == 200) {
+          this.formItemsList = getFormItems(res.data.dfVueTemplate);
+          console.log(res);
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+      } catch (e) {
+        this.$message.error(e.message);
+      }
+      this.show = true;
+    },
   },
 };
 </script>
@@ -51,4 +172,55 @@ export default {
   display: flex;
   padding-right: 25px;
 }
+::v-deep(.deep) {
+  background-color: #7bdd4a;
+}
+.main-wrap {
+  width: 100%;
+  .header {
+  }
+  .list-wrap {
+    display: flex;
+    ::v-deep .el-descriptions__header {
+      display: flex;
+      justify-content: center;
+    }
+    .left-wrap {
+      width: 30%;
+      // ::v-deep(.el-descriptions-item__container) {
+      ::v-deep .el-descriptions-item__container {
+        // height: 36px;
+        & .deep {
+          background: #899c8b28;
+        }
+        .el-descriptions-item__label {
+          line-height: 36px;
+          margin-right: 0px !important;
+        }
+        .el-descriptions-item__content {
+          line-height: 36px;
+          padding-left: 10px;
+        }
+      }
+    }
+    .center-wrap {
+      width: 30%;
+      ::v-deep .el-descriptions-item__container {
+        .item-wrap {
+          display: flex;
+          justify-content: center;
+          width: 100%;
+          .switch-wrap {
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+    .right-wrap {
+      width: 30%;
+    }
+  }
+}
 </style>

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

@@ -90,7 +90,7 @@
             </el-option>
           </el-select>
         </edit-item>
-        <edit-item key="bpmType" label="流程类型">
+        <!-- <edit-item key="bpmType" label="流程类型">
           <el-select
             v-model="elFormData.bpmType"
             value-key="value"
@@ -107,7 +107,7 @@
             >
             </el-option>
           </el-select>
-        </edit-item>
+        </edit-item> -->
 
         <!-- <edit-item key="executable" label="可执行">
           <el-switch
@@ -228,11 +228,27 @@ export default {
       // }
       return res;
     },
+    myProcessType() {
+      return this.processType();
+    },
     formList() {
+      console.log(this.myProcessType);
+      if (this.myProcessType == "1") {
+        return this.dragFormList();
+      }
       return formList;
     },
   },
-
+  inject: {
+    processType: {
+      from: "processType",
+      default: "",
+    },
+    dragFormList: {
+      from: "dragFormList",
+      default: [],
+    },
+  },
   mounted() {
     this.reloadGenerationData();
     EventEmitter.on("element-update", this.reloadGenerationData);

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

@@ -229,6 +229,9 @@ export default {
             !isEnd(element) &&
             this.renderComponents.push(ElementExcuteType); //执行类型
           break;
+        case "1": //OA类型
+          this.renderComponents.push(ElementGenerations); //常规信息
+          !isProcess(element) && this.renderComponents.push(ElementAfterNode);
         default:
           break;
       }

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

@@ -0,0 +1,74 @@
+
+const wrapTypeList = ["table", "grid", "tabs", "card", 'batch', 'selectInputList'];
+
+const onlyShowList = ['text', 'divider']
+
+/**
+ * 
+ * @param {string} JSONStr 表单数据
+ * @returns 表单中item绑定的字段数据
+ */
+export function getFormItems(JSONStr = '{}') {
+  let allFormList = JSON.parse(JSONStr)?.list
+  if (!allFormList || !allFormList.length) return [];
+  let itemArr = []
+  getItemArr(allFormList, itemArr)
+  itemArr = itemArr.filter(item => !onlyShowList.includes(item.type))//去除只是展示的item
+  let res = itemArr.map(item => {
+    let { label, tableName, model } = item
+    return {
+      label, tableName, model
+    }
+  })
+  console.log(itemArr);
+  console.log(res);
+  return res
+
+}
+
+// 递归获取item数组
+function getItemArr(list = [], res = []) {
+  if (list.length == 0) return;
+  list.forEach(item => {
+    if (isWrapItem(item)) {//递归处理布局item
+      switch (item.type) {
+        case 'table':
+          item.trs.forEach((n) => {
+            n.tds.forEach((m) => {
+              getItemArr(m.list, res);
+            });
+          });
+          break;
+        case "grid":
+          item.columns.forEach((n) => {
+            getItemArr(n.list, res);
+          });
+          break;
+        case "tabs":
+          item.columns.forEach((n) => {
+            getItemArr(n.list, res);
+          });
+          break;
+        case "card":
+          getItemArr(item.list, res);
+          break;
+        case "batch"://动态表格
+          getItemArr(item.list, res);
+          break;
+        case "selectInputList": //选项输入列
+          item.columns.forEach((n) => {
+            this.getAllSelectItems(n.list, res);
+          });
+          break;
+        default:
+          break;
+      }
+    } else {//非布局item
+      res.push(item);
+    }
+  })
+}
+
+function isWrapItem(item) {
+  return wrapTypeList.includes(item.type)
+}

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

@@ -8,7 +8,7 @@
     </div>
     <bpmn-settings v-show="false" />
     <bpmn-context-menu />
-    <!-- <el-dialog
+    <el-dialog
       title="请选择流程类型"
       :visible.sync="show"
       width="30%"
@@ -48,7 +48,7 @@
           <el-button type="primary" @click="confirmHandler">确认</el-button>
         </span>
       </template>
-    </el-dialog> -->
+    </el-dialog>
   </div>
 </template>
 
@@ -81,6 +81,7 @@ import { getProcess, getNodeData } from "@/api/bpmprocess/process";
 import { listScript } from "@/api/bpmprocess/process";
 import { listUser, getUserListByTenantId } from "@/api/system/user";
 import { listRole } from "@/api/system/role";
+import { listForm } from "@/api/dragform/form";
 
 export default {
   name: "App",
@@ -101,6 +102,7 @@ export default {
       allScriptList: [],
       allUserList: [],
       allRoleList: [],
+      dragFormList: [],
 
       // 流程类型数据
       show: true,
@@ -121,6 +123,7 @@ export default {
       allUserList: () => this.allUserList,
       allRoleList: () => this.allRoleList,
       processType: () => this.processForm.processType,
+      dragFormList: () => this.dragFormList,
     };
   },
   methods: {
@@ -168,7 +171,7 @@ export default {
     // 获取所有角色列表
     async getAllRoleList() {
       try {
-        let res = await listRole(this.queryParams);
+        let res = await listRole({ isEnablePaging: false });
         if (res.code == 200) {
           // res.rows.forEach((item) => {
           //   this.exeUserValueList.push({
@@ -184,6 +187,23 @@ export default {
         this.$message.warning("网络异常,请稍后再试");
       }
     },
+    // 获取所有拖拽表单列表
+    async getAllDragFormList() {
+      try {
+        let res = await listForm({ isEnablePaging: false });
+        if (res.code == 200) {
+          res.rows.forEach((element) => {
+            element.formKey = element.fId;
+            element.formName = element.dfName;
+          });
+          this.dragFormList = res.rows;
+        } else {
+          throw Error(res?.msg);
+        }
+      } catch (error) {
+        this.$message.warning("网络异常,请稍后再试");
+      }
+    },
     confirmHandler() {
       this.show = false;
     },
@@ -198,6 +218,7 @@ export default {
     this.getAllScriptList();
     this.getAllRoleList();
     this.getAllUserList();
+    this.getAllDragFormList();
   },
   async created() {
     if (this.$route.query?.id) {

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

@@ -69,7 +69,14 @@ export default {
   data() {
     return {
       fid: null,
-      needHandlerTypeList: ["table", "grid", "tabs", "card"],
+      needHandlerTypeList: [
+        "table",
+        "grid",
+        "tabs",
+        "card",
+        "batch",
+        "selectInputList",
+      ],
     };
   },
   methods: {
@@ -80,7 +87,6 @@ export default {
         if (this.isNeedSql(item)) {
           res.push(item);
         } else {
-          console.log(item.type);
           switch (item.type) {
             case "table":
               item.trs.forEach((n) => {
@@ -95,7 +101,6 @@ export default {
               });
               break;
             case "tabs":
-              console.log("item.columns", item.columns);
               item.columns.forEach((n) => {
                 this.getAllSelectItems(n.list, res);
               });
@@ -106,6 +111,14 @@ export default {
               // });
               this.getAllSelectItems(item.list, res);
               break;
+            case "batch":
+              this.getAllSelectItems(item.list, res);
+              break;
+            case "selectInputList": //选项输入列
+              item.columns.forEach((n) => {
+                this.getAllSelectItems(n.list, res);
+              });
+              break;
             default:
               break;
           }