init

src/main.js

@@ -32,18 +32,20 @@ if (process.env.NODE_ENV === 'production') {
 //Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
 Vue.use(ElementUI)
-import { VxeButton, VxeIcon, VxeTable, VxeColumn, VxeColgroup, VxeModal, VxeToolbar, VxeTableEditModule, VxeTableValidatorModule, VxeTableExportModule } from "vxe-table";
+import VxeTable from 'vxe-table'
+//import { VxeButton, VxeIcon, VxeTable, VxeColumn, VxeColgroup, VxeModal, VxeToolbar, VxeTableEditModule, VxeTableValidatorModule, VxeTableExportModule } from "vxe-table";
 import "vxe-table/styles/index.scss"
-Vue.use(VxeTableEditModule);
-Vue.use(VxeTableValidatorModule);
-Vue.use(VxeTableExportModule);
-Vue.use(VxeIcon);
-Vue.use(VxeTable);
-Vue.use(VxeColumn);
-Vue.use(VxeColgroup);
-Vue.use(VxeModal);
-Vue.use(VxeToolbar);
-Vue.use(VxeButton);
+Vue.use(VxeTable)
+// Vue.use(VxeTableEditModule);
+// Vue.use(VxeTableValidatorModule);
+// Vue.use(VxeTableExportModule);
+// Vue.use(VxeIcon);
+// Vue.use(VxeTable);
+// Vue.use(VxeColumn);
+// Vue.use(VxeColgroup);
+// Vue.use(VxeModal);
+// Vue.use(VxeToolbar);
+// Vue.use(VxeButton);
 
 Vue.config.productionTip = false
 

src/views/flow/components/assign.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="visible"
+      fullscreen
+      append-to-body
+      :show-close="false"
+    >
+      <div>
+        <div class="steps">
+          <el-steps :space="120" finish-status="success" align-center>
+            <el-step
+              :title="node.name"
+              status="finish"
+              icon="el-icon-edit"
+            ></el-step>
+            <el-step
+              title="流转到下一节点"
+              icon="el-icon-right"
+              status="wait"
+            ></el-step>
+          </el-steps>
+        </div>
+
+        <el-divider></el-divider>
+
+        <div class="next-nodes">
+          <div class="next-nodes__label">下一节点</div>
+
+          <div>
+            <el-radio-group v-model="form.next_node_id">
+              <el-radio v-for="node in node.nextNodes" :label="node.id">{{ node.name }}</el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+
+        <el-divider></el-divider>
+
+        <div class="users">
+          <div class="users__label">承办人员</div>
+
+          <div>
+
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="$emit('update:visible',false)"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getNextNodeUsers } from "@/api/flow";
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    config: Object,
+    result: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      form: {
+        cc_users: [],
+        user_id: "",
+        next_node_id: "",
+      },
+
+      node2Users: new Map()
+    };
+  },
+  methods: {
+    async getNextNodesUsers() {
+      try {
+
+        const res = await Promise.all(this.node?.nextNodes?.map(node => getNextNodeUsers({
+          id: this.result.id,
+          next_node_id: node.id,
+        },false)));
+        console.log(res)
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.config?.customModel?.name + '流转'
+    },
+    node() {
+      return this.config?.currentNode || {};
+    },
+  },
+  watch: {
+    node: {
+      handler:function (newVal) {
+        if(newVal && newVal.nextNodes && newVal.nextNodes?.length > 0) {
+          this.getNextNodesUsers()
+        }
+      }
+    },
+    immediate: true
+  },
+  created() {}
+};
+</script>
+
+<style scoped lang="scss">
+.next-nodes,.users {
+  display: flex;
+
+  &__label {
+    flex-basis: 100px;
+    font-weight: 600;
+    color: #666;
+  }
+}
+</style>

src/views/flow/create.vue

@@ -2,18 +2,24 @@
   <div class="container">
     <el-card shadow="always" class="card">
       <template #header>
-        <p>{{ config.customModel ? config.customModel.name : '办理' }}</p>
+        <p>{{ config.customModel ? config.customModel.name : "办理" }}</p>
       </template>
 
       <template>
         <div class="steps">
           <el-steps :space="120" finish-status="success" align-center>
-            <el-step :title="node.name" status="finish" icon="el-icon-edit"></el-step>
-            <el-step v-for="nextNode in node.nextNodes"
-                     :key="nextNode.id"
-                     :title="nextNode.name"
-                     icon="el-icon-right"
-                     status="wait"></el-step>
+            <el-step
+              :title="node.name"
+              status="finish"
+              icon="el-icon-edit"
+            ></el-step>
+            <el-step
+              v-for="nextNode in node.nextNodes"
+              :key="nextNode.id"
+              :title="nextNode.name"
+              icon="el-icon-right"
+              status="wait"
+            ></el-step>
           </el-steps>
         </div>
 
@@ -21,36 +27,43 @@
 
         <div class="form-container">
           <template v-if="device === 'desktop'">
-            <DesktopForm :device="device"
-                         ref="desktopForm"
-                         :sub-form="subConfig"
-                         :fields="fields"
-                         :original-form="form"
-                         :readable="readableFields"
-                         :file-list="fileList"
-                         :script-content="scriptContent"
-                         :writeable="writeableFields"></DesktopForm>
+            <DesktopForm
+              :device="device"
+              ref="desktopForm"
+              :sub-form="subConfig"
+              :fields="fields"
+              :original-form="form"
+              :readable="readableFields"
+              :file-list="fileList"
+              :script-content="scriptContent"
+              :writeable="writeableFields"
+            ></DesktopForm>
           </template>
           <template v-else>
-            <MobileForm :device="device"
-                        ref="mobileForm"
-                        :sub-form="subConfig"
-                        :fields="fields"
-                        :original-form="form"
-                        :readable="readableFields"
-                        :file-list="fileList"
-                        :script-content="scriptContent"
-                        :writeable="writeableFields"></MobileForm>
+            <MobileForm
+              :device="device"
+              ref="mobileForm"
+              :sub-form="subConfig"
+              :fields="fields"
+              :original-form="form"
+              :readable="readableFields"
+              :file-list="fileList"
+              :script-content="scriptContent"
+              :writeable="writeableFields"
+            ></MobileForm>
           </template>
         </div>
       </template>
 
-
       <div class="btns" ref="btns">
-        <el-button type="primary" size="small" @click="submit">保存并流转 <i class="el-icon-right"></i></el-button>
+        <el-button type="primary" size="small" @click="submit('assign')"
+          >保存并流转 <i class="el-icon-right"></i
+        ></el-button>
       </div>
     </el-card>
 
+    <assign ref="assign" :visible.sync="isShowAssign" :config="config"></assign>
+
     <el-backtop></el-backtop>
   </div>
 </template>
@@ -58,82 +71,90 @@
 <script>
 import DesktopForm from "./DesktopForm.vue";
 import MobileForm from "./MobileForm.vue";
-import { preConfig, preDeal, create, fieldConfig, getNextNodeUsers, checkIsThroughNode } from "@/api/flow"
-import { deepCopy } from "@/utils";
+import assign from "./components/assign.vue";
+import {create, fieldConfig, preConfig,} from "@/api/flow";
+import {deepCopy} from "@/utils";
+
 export default {
   components: {
     DesktopForm,
-    MobileForm
+    MobileForm,
+    assign,
   },
   data() {
     return {
+      isShowAssign: false,
       info: [],
       config: {},
       subConfig: new Map(),
 
       form: {},
-      fileList: {}
-    }
+      result: {},
+      fileList: {},
+    };
   },
   methods: {
-    generateForm(object,fields) {
-      fields.forEach(field => {
-        if(field.type === 'file') {
-          this.fileList[field.name] = []
+    generateForm(object, fields) {
+      fields.forEach((field) => {
+        if (field.type === "file") {
+          this.fileList[field.name] = [];
         }
-        if(field.type === 'relation') {
-          object[field.name] = [{}]
+        if (field.type === "relation") {
+          object[field.name] = [{}];
 
-          this.generateForm(object[field.name][0], this.subConfig.get(field.sub_custom_model_id)?.customModel?.fields)
+          this.generateForm(
+            object[field.name][0],
+            this.subConfig.get(field.sub_custom_model_id)?.customModel?.fields
+          );
         } else {
-          object[field.name] = ""
+          object[field.name] = "";
         }
-      })
+      });
     },
     async getConfig() {
       const loading = this.$loading({
         lock: true,
-        text: '拼命加载中',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.8)'
+        text: "拼命加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.8)",
       });
       try {
-        const res = await preConfig(this.$route.query.module_id)
+        const res = await preConfig(this.$route.query.module_id);
         const { fields } = res?.customModel;
-        let subFormRequest = []
+        let subFormRequest = [];
         const getSubForm = (id) => {
-          subFormRequest.push(fieldConfig(id))
-        }
-        fields.forEach(field => {
-          if(field.sub_custom_model_id) {
-            getSubForm(field.sub_custom_model_id)
+          subFormRequest.push(fieldConfig(id));
+        };
+        fields.forEach((field) => {
+          if (field.sub_custom_model_id) {
+            getSubForm(field.sub_custom_model_id);
           }
-        })
-        const subConfigs = await Promise.all(subFormRequest)
-        subConfigs.forEach(sub => {
-          if(sub.customModel?.id) {
-            this.subConfig.set(sub.customModel?.id, sub)
+        });
+        const subConfigs = await Promise.all(subFormRequest);
+        subConfigs.forEach((sub) => {
+          if (sub.customModel?.id) {
+            this.subConfig.set(sub.customModel?.id, sub);
           }
-        })
+        });
         this.config = res;
-        this.generateForm(this.form, fields)
-        this.form = Object.assign({},this.form)
-        loading.close()
+        this.generateForm(this.form, fields);
+        this.form = Object.assign({}, this.form);
+        loading.close();
       } catch (err) {
-        console.error(err)
-        this.$message.error("配置失败")
-        loading.close()
+        console.error(err);
+        this.$message.error("配置失败");
+        loading.close();
       }
     },
 
-    async submit() {
-      if(this.device === 'desktop') {
-        console.log(this.$refs['desktopForm'].form)
-        let copyForm = deepCopy(this.$refs['desktopForm'].form)
-        let copyFile = deepCopy(this.$refs['desktopForm'].file)
+    async submit(type) {
+      if (this.device === "desktop") {
+        console.log(this.$refs["desktopForm"].form);
+        let copyForm = deepCopy(this.$refs["desktopForm"].form);
+        let copyFile = deepCopy(this.$refs["desktopForm"].file);
         for (let [key, value] of Object.entries(copyFile)) {
           if (copyForm.hasOwnProperty(key)) {
-            copyForm[key] = value.map(i => i.response?.id)?.toString()
+            copyForm[key] = value.map((i) => i.response?.id)?.toString();
           }
         }
         // for (let key in copyForm) {
@@ -155,50 +176,56 @@ export default {
         // }
 
         try {
-          const res = await create(copyForm,this.$route.query.module_id)
-          await getNextNodeUsers({
-            id: res.id,
-            next_node_id: this.config?.currentNode?.nextNodes[0]?.id
-          })
-        } catch(err) {
-          console.error(err)
+          this.result = await create(copyForm, this.$route.query.module_id);
+          switch (type) {
+            case "only-submit":
+              this.$router.push("/flow/list");
+              break;
+            case "assign":
+              this.isShowAssign = true;
+              // await getNextNodeUsers({
+              //   id: res.id,
+              //   next_node_id: this.config?.currentNode?.nextNodes[0]?.id,
+              // });
+              break;
+          }
+        } catch (err) {
+          console.error(err);
         }
       }
-    }
+    },
   },
   computed: {
     device() {
-      return this.$store.state.app.device
+      return this.$store.state.app.device;
     },
     fields() {
-      return this.config?.customModel?.fields || []
+      return this.config?.customModel?.fields || [];
     },
     readableFields() {
-      return this.config?.currentNode?.readable || []
+      return this.config?.currentNode?.readable || [];
     },
     writeableFields() {
-      return this.config?.currentNode?.writeable || []
+      return this.config?.currentNode?.writeable || [];
     },
     node() {
-      return this.config?.currentNode || {}
+      return this.config?.currentNode || {};
     },
     scriptContent() {
-      if(this.config?.customModel?.js) {
-        return this.config?.customModel?.js
+      if (this.config?.customModel?.js) {
+        return this.config?.customModel?.js;
       }
-    }
+    },
   },
   created() {
-    this.getConfig()
+    this.getConfig();
   },
-  mounted() {
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style scoped lang="scss">
 ::v-deep .el-card__header {
-
 }
 .container {
   padding: 20px;
@@ -207,7 +234,6 @@ export default {
     position: relative;
   }
   .btns {
-
     margin-top: 10px;
     position: sticky;
     bottom: 20px;