From d9a690ad5c54a1c5085ce4fdb46752dfb72742aa Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 5 Sep 2024 18:01:35 +0800
Subject: [PATCH] init

---
 src/api/flow/index.js          |  30 +-
 src/utils/formBuilder.js       | 950 +++++++++++++++++----------------
 src/views/flow/DesktopForm.vue |  31 +-
 src/views/flow/create.vue      |  93 +++-
 src/views/flow/index.vue       |   2 +-
 5 files changed, 644 insertions(+), 462 deletions(-)

diff --git a/src/api/flow/index.js b/src/api/flow/index.js
index b7ceace..13959a6 100644
--- a/src/api/flow/index.js
+++ b/src/api/flow/index.js
@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-
+import qs from 'qs'
 export function flow(isLoading=false) {
   return request({
     method: 'get',
@@ -8,6 +8,15 @@ export function flow(isLoading=false) {
   })
 }
 
+export function flowList(params, type) {
+  return request({
+    method: 'get',
+    url: `/api/oa/flow/list/${type}`,
+    params
+  })
+}
+
+
 export function preConfig(custom_model_id,isLoading=false) {
   return request({
     method: 'get',
@@ -15,3 +24,22 @@ export function preConfig(custom_model_id,isLoading=false) {
     isLoading
   })
 }
+
+export function create(data,custom_model_id) {
+  return request({
+    method: 'post',
+    url: `/api/oa/flow/create/${custom_model_id}`,
+    data: qs.stringify(data, { arrayFormat: 'brackets' }),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+export function deal(data,flow_id) {
+  return request({
+    method: 'post',
+    url: `/api/oa/flow/deal/${flow_id}`,
+    data
+  })
+}
diff --git a/src/utils/formBuilder.js b/src/utils/formBuilder.js
index 4c1fcee..75be40f 100644
--- a/src/utils/formBuilder.js
+++ b/src/utils/formBuilder.js
@@ -1,504 +1,552 @@
 import formBuilderMap from './formBuilderMap'
-import { CreateElement } from 'vue'
+import { CreateElement, VNode } from 'vue'
 import moment from 'moment'
 import { getToken } from "@/utils/auth";
-import {deepCopy} from "@/utils/index";
+import { deepCopy } from "@/utils/index";
 /**
  * @param {String} device 'desktop' or 'mobile'
  * @param {Object} info field参数
  * @param {CreateElement} h
- * @param {Object} pForm 父级表单对象
+ * @param {Object} row 子表单的row
+ * @param {Boolean} pWrite 主表单中子表单字段是否可写
+ * @return {VNode} 主表单包含el-form-item 子表单表单组件
 **/
-export default function formBuilder (device, info,h,pForm) {
+export default function formBuilder (device, info, h, row, pWrite=false) {
   let formItem;
   if (device === 'desktop') {
-    switch (info.type) {
-      case 'text':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
-            }
-          }
-        })
-        break;
-      case 'textarea':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            type: 'textarea',
-            autosize: {
-              minRows: 2
+    if(info._writeable || (info.type === 'relation' && info._readable) || pWrite) {
+      switch (info.type) {
+        case 'text':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text
             },
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
-            }
-          }
-        })
-        break;
-      case 'date':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            type: 'date',
-            'value-format': 'yyyy-MM-dd',
-            format: 'yyyy年MM月dd日',
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text,
-            'picker-options': {
-              shortcuts: [
-                {
-                  text: '一年前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'years').toDate());
-                  }
-                },
-                {
-                  text: '一月前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'months').toDate());
-                  }
-                },
-                {
-                  text: '一周前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'weeks').toDate());
-
-                  }
-                },
-                {
-                  text: '今天',
-                  onClick(picker) {
-                    picker.$emit('pick', new Date());
-                  }
-                },
-                {
-                  text: '一周后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'weeks').toDate());
-                  }
-                },
-                {
-                  text: '一月后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'months').toDate());
-                  }
-                },
-                {
-                  text: '一年后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'years').toDate());
-                  }
-                },
-              ]
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          style: {
-            width: '100%'
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
+          })
+          break;
+        case 'textarea':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              type: 'textarea',
+              autosize: {
+                minRows: 2
+              },
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          }
-        })
-        break;
-      case 'datetime':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            type: 'datetime',
-            'value-format': 'yyyy-MM-dd',
-            format: 'yyyy年MM月dd日',
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text,
-            'picker-options': {
-              shortcuts: [
-                {
-                  text: '一年前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'years').toDate());
-                  }
-                },
-                {
-                  text: '一月前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'months').toDate());
-                  }
-                },
-                {
-                  text: '一周前',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().subtract(1,'weeks').toDate());
+          })
+          break;
+        case 'date':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              type: 'date',
+              'value-format': 'yyyy-MM-dd',
+              format: 'yyyy年MM月dd日',
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text,
+              'picker-options': {
+                shortcuts: [
+                  {
+                    text: '一年前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'years').toDate());
+                    }
+                  },
+                  {
+                    text: '一月前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'months').toDate());
+                    }
+                  },
+                  {
+                    text: '一周前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'weeks').toDate());
 
-                  }
-                },
-                {
-                  text: '今天',
-                  onClick(picker) {
-                    picker.$emit('pick', new Date());
-                  }
-                },
-                {
-                  text: '一周后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'weeks').toDate());
-                  }
-                },
-                {
-                  text: '一月后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'months').toDate());
-                  }
-                },
-                {
-                  text: '一年后',
-                  onClick(picker) {
-                    picker.$emit('pick', moment().add(1,'years').toDate());
-                  }
-                },
-              ]
-            }
-          },
-          style: {
-            width: '100%'
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
-            }
-          }
-        })
-        break;
-      case 'select':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
+                    }
+                  },
+                  {
+                    text: '今天',
+                    onClick(picker) {
+                      picker.$emit('pick', new Date());
+                    }
+                  },
+                  {
+                    text: '一周后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'weeks').toDate());
+                    }
+                  },
+                  {
+                    text: '一月后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'months').toDate());
+                    }
+                  },
+                  {
+                    text: '一年后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'years').toDate());
+                    }
+                  },
+                ]
+              }
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            style: {
+              width: '100%'
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          }
-        },[1,2,3].map(option => (
-          h('el-option',{
+          })
+          break;
+        case 'datetime':
+          formItem = h(formBuilderMap(device).get(info.type),{
             props: {
-              label: option,
-              value: option
+              type: 'datetime',
+              'value-format': 'yyyy-MM-dd',
+              format: 'yyyy年MM月dd日',
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text,
+              'picker-options': {
+                shortcuts: [
+                  {
+                    text: '一年前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'years').toDate());
+                    }
+                  },
+                  {
+                    text: '一月前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'months').toDate());
+                    }
+                  },
+                  {
+                    text: '一周前',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().subtract(1,'weeks').toDate());
+
+                    }
+                  },
+                  {
+                    text: '今天',
+                    onClick(picker) {
+                      picker.$emit('pick', new Date());
+                    }
+                  },
+                  {
+                    text: '一周后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'weeks').toDate());
+                    }
+                  },
+                  {
+                    text: '一月后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'months').toDate());
+                    }
+                  },
+                  {
+                    text: '一年后',
+                    onClick(picker) {
+                      picker.$emit('pick', moment().add(1,'years').toDate());
+                    }
+                  },
+                ]
+              }
+            },
+            style: {
+              width: '100%'
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
           })
-        )))
-        break;
-      case 'radio':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            value: pForm ? pForm[info.name] : this.form[info.name],
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
-            }
-          }
-        },[1,2,3].map(option => (
-          h('el-radio',{
+          break;
+        case 'select':
+          formItem = h(formBuilderMap(device).get(info.type),{
             props: {
-              label: option
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          },option)
-        )))
-        break;
-      case 'file':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            action: process.env.VUE_APP_UPLOAD_API,
-            headers: {
-              Authorization: `Bearer ${getToken()}`,
+          },[1,2,3].map(option => (
+            h('el-option',{
+              props: {
+                label: option,
+                value: option
+              }
+            })
+          )))
+          break;
+        case 'radio':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              value: row ? row[info.name] : this.form[info.name],
             },
-            accept: "application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-            multiple: true,
-            fileList: this.file[info.name],
-            beforeUpload:  (file) => {
-              if ((file.size / 1024 / 1024) > (20)) {
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
+            }
+          },[1,2,3].map(option => (
+            h('el-radio',{
+              props: {
+                label: option
+              }
+            },option)
+          )))
+          break;
+        case 'file':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              action: process.env.VUE_APP_UPLOAD_API,
+              headers: {
+                Authorization: `Bearer ${getToken()}`,
+              },
+              accept: "application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              multiple: true,
+              fileList: this.file[info.name],
+              beforeUpload:  (file) => {
+                if ((file.size / 1024 / 1024) > (20)) {
+                  this.$message({
+                    type: "warning",
+                    message: "上传图片大小超过20Mb！",
+                  });
+                  return false;
+                }
+              },
+              onSuccess: (response, file, fileList) => {
+                this.file[info.name] = fileList;
+              },
+              onRemove: (file, fileList) => {
+                this.file[info.name] = fileList;
+              },
+              onError: (err, file, fileList) => {
+                this.file[info.name] = fileList;
                 this.$message({
                   type: "warning",
-                  message: "上传图片大小超过20Mb！",
+                  message: err,
                 });
-                return false;
               }
             },
-            onSuccess: (response, file, fileList) => {
-              this.file[info.name] = fileList;
-            },
-            onRemove: (file, fileList) => {
-              this.file[info.name] = fileList;
-            },
-            onError: (err, file, fileList) => {
-              this.file[info.name] = fileList;
-              this.$message({
-                type: "warning",
-                message: err,
-              });
-            }
-          },
-          scopedSlots: {
-            file: (scope) => {
-              let { file } = scope;
-              return [
-                h("div", {}, [
-                  h("i", {
-                    class: {
-                      "el-icon-circle-check":
-                        file.status ===
-                        "success",
-                      "el-icon-loading":
-                        file.status ===
-                        "uploading",
-                    },
-                    style: {
-                      color:
-                        file.status ===
-                        "success"
-                          ? "green"
-                          : "",
-                    },
-                  }),
-                  h(
-                    "a",
-                    {
-                      attrs: {
-                        href: file.url,
-                        download: file.name,
-                      },
+            scopedSlots: {
+              file: (scope) => {
+                let { file } = scope;
+                return [
+                  h("div", {}, [
+                    h("i", {
                       class: {
-                        "uploaded-a":
+                        "el-icon-circle-check":
                           file.status ===
                           "success",
+                        "el-icon-loading":
+                          file.status ===
+                          "uploading",
                       },
                       style: {
-                        padding: "0 4px",
+                        color:
+                          file.status ===
+                          "success"
+                            ? "green"
+                            : "",
                       },
+                    }),
+                    h(
+                      "a",
+                      {
+                        attrs: {
+                          href: file.url,
+                          download: file.name,
+                        },
+                        class: {
+                          "uploaded-a":
+                            file.status ===
+                            "success",
+                        },
+                        style: {
+                          padding: "0 4px",
+                        },
+                      },
+                      file.name
+                    ),
+                  ]),
+                  h("i", {
+                    class: "el-icon-close",
+                    on: {
+                      ["click"]: () => {
+                        this.$set(this.file, info.field, this.file[info.field].filter((item) => item !== file))
+                      }
                     },
-                    file.name
-                  ),
-                ]),
-                h("i", {
-                  class: "el-icon-close",
-                  on: {
-                    ["click"]: () => {
-                      this.$set(this.file, info.field, this.file[info.field].filter((item) => item !== file))
-                    }
-                  },
-                }),
-              ];
+                  }),
+                ];
+              }
             }
-          }
-        },[
-          h(
-            "el-button",
-            {
-              slot: "trigger",
-              props: {
-                size: "small",
-                type: "primary",
+          },[
+            h(
+              "el-button",
+              {
+                slot: "trigger",
+                props: {
+                  size: "small",
+                  type: "primary",
+                },
               },
-            },
-            "选取文件"
-          ),
-          h(
-            "div",
-            {
-              class: "el-upload__tip",
-              slot: "tip",
-            },
-            "文件不超过20Mb"
-          )
-        ])
-        break;
-      case  'label':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            type: 'primary'
-          }
-        },info.label)
-        break;
-      case  'static':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            type: 'primary'
-          },
-          attrs: {
-            href: pForm ? pForm[info.name] : this.form[info.name],
-            target: "_blank"
-          }
-        },info.label)
-        break;
-      case 'hr':
-        formItem = h(formBuilderMap(device).get(info.type),{
-        },info.label)
-        break;
-      case 'choice':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
+              "选取文件"
+            ),
+            h(
+              "div",
+              {
+                class: "el-upload__tip",
+                slot: "tip",
+              },
+              "文件不超过20Mb"
+            )
+          ])
+          break;
+        case 'label':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              type: 'primary'
             }
-          }
-        },[1,2,3].map(option => (
-          h('el-option',{
+          },info.label)
+          break;
+        case  'static':
+          formItem = h(formBuilderMap(device).get(info.type),{
             props: {
-              label: option,
-              value: option
+              type: 'primary'
+            },
+            attrs: {
+              href: row ? row[info.name] : this.form[info.name],
+              target: "_blank"
             }
-          })
-        )))
-        break;
-      case 'choices':
-        formItem = h(formBuilderMap(device).get(info.type),{
-          props: {
-            value: pForm ? pForm[info.name] : this.form[info.name],
-            clearable: true,
-            placeholder: info.help_text,
-            multiple: true
-          },
-          attrs: {
-            placeholder: info.help_text
-          },
-          on: {
-            input: e => {
-              pForm ? this.$set(pForm,info.name,e) : this.$set(this.form,info.name,e)
+          },info.label)
+          break;
+        case 'hr':
+          formItem = h(formBuilderMap(device).get(info.type),{
+          },info.label)
+          break;
+        case 'choice':
+          formItem = h(formBuilderMap(device).get(info.type),{
+            props: {
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          }
-        },[1,2,3].map(option => (
-          h('el-option',{
+          },[1,2,3].map(option => (
+            h('el-option',{
+              props: {
+                label: option,
+                value: option
+              }
+            })
+          )))
+          break;
+        case 'choices':
+          formItem = h(formBuilderMap(device).get(info.type),{
             props: {
-              label: option,
-              value: option
+              value: row ? row[info.name] : this.form[info.name],
+              clearable: true,
+              placeholder: info.help_text,
+              multiple: true
+            },
+            attrs: {
+              placeholder: info.help_text
+            },
+            on: {
+              input: e => {
+                row ? this.$set(row,info.name,e) : this.$set(this.form,info.name,e)
+              }
             }
-          })
-        )))
-        break;
-      case 'relation':
-        formItem = h('div',{
-
-        },[
-          h('vxe-toolbar',[
-            h('el-button',{
-              slot: 'buttons',
+          },[1,2,3].map(option => (
+            h('el-option',{
               props: {
-                type: 'primary',
-                size: 'small',
-                icon: "el-icon-plus"
-              },
-              on: {
-                click: _ => {
-                  this.form[info.name].push(deepCopy(pForm))
-                }
+                label: option,
+                value: option
               }
-            },'增加')
-          ]),
-          h('vxe-table',{
+            })
+          )))
+          break;
+        case 'relation':
+          formItem =  h('vxe-table',{
+            ref: `subForm-${info.name}`,
             style: {
               'margin-top': '10px'
             },
             props: {
+              'min-height': '200px',
+              border: true,
               stripe: true,
-              data: this.form[info.name]
-            }
-          },this.subForm.get(info.sub_custom_model_id)?.customModel?.fields?.map((subField,subIndex) => h('vxe-column',{
-            props: {
-              field: subField.name,
-              title: subField.label,
-              align: 'center'
+              data: this.form[info.name],
+              'keep-source': true,
+              'column-config': { resizable: true },
+              'show-overflow': true,
+              'edit-config': info._writeable ? {
+                trigger: 'click',
+                mode: 'row',
+                showStatus: false,
+                isHover: true,
+                autoClear: false
+              } : {}
+            },
+            on: {
+              'edit-closed': ({ row, column }) => {
+                const $table = this.$refs[`subForm-${info.name}`]
+                if ($table) {
+                  const field = column.field
+                  const cellValue = row[field]
+                  // 判断单元格值是否被修改
+                  if ($table.isUpdateByRow(row, field)) {
+                    setTimeout(() => {
+                      console.log(`局部保存成功！ ${field}=${cellValue}`)
+                      // 局部更新单元格为已保存状态
+                      $table.reloadRow(row, null, field)
+                    }, 300)
+                  }
+                }
+              }
             }
-          },formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex]))))
-        ])
-        // formItem = h('div', [
-        //   h('div',[
-        //     h('el-button',{
-        //       props: {
-        //         size: "small",
-        //         type: "primary",
-        //         icon: "el-icon-plus"
-        //       },
-        //       on: {
-        //         click: _ => {
-        //           this.form[info.name].push(deepCopy(pForm))
-        //         }
-        //       }
-        //     },'增加')
-        //   ]),
-        //   ...this.form[info.name]?.map((i,subIndex) => h('el-card',[
-        //     h('el-button',{
-        //       props: {
-        //         size: 'small',
-        //         type: 'primary'
-        //       },
-        //       on: {
-        //         click: _ => {
-        //           this.form[info.name].splice(subIndex,1)
-        //         }
-        //       }
-        //     },'删除'),
-        //     h('el-form', {
-        //       class: 'form',
-        //       props: {
-        //         model: this.form[info.name][subIndex],
-        //         'label-position': 'top'
-        //       }
-        //     },this.subForm.get(info.sub_custom_model_id)?.customModel?.fields.map(subField => formBuilder.bind(this)(device, subField, h, this.form[info.name][subIndex])))
-        //   ]))
-        // ])
-        break;
-    }
-    return h('el-form-item',{
-      props: {
-        prop: info.name,
-        label: info.label
-      },
-      style: {
-        'grid-column-start': info.gs_x+1,
-        'grid-column-end': info.gs_x+1 + info.gs_width,
-        'grid-row-start': info.gs_y+1,
-        'grid-row-end': info.gs_y+1 + info.gs_height
+          },[
+            h('vxe-column',{
+              props: {
+                width: 56,
+                align: 'center'
+              },
+              scopedSlots: {
+                default: ({ row }) => {
+                  return h('el-button',{
+                    slot: 'default',
+                    style: {
+                      'padding': '9px'
+                    },
+                    props: {
+                      type: 'danger',
+                      size: 'small',
+                      icon: "el-icon-minus"
+                    },
+                    on: {
+                      click: async _ => {
+                        const $table = this.$refs[`subForm-${info.name}`]
+                        if ($table) {
+                          await $table.remove(row)
+                        }
+                      }
+                    }
+                  })
+                }
+              }
+            },[
+              h('el-button',{
+                slot: 'header',
+                style: {
+                  'padding': '9px'
+                },
+                props: {
+                  type: 'primary',
+                  size: 'small',
+                  icon: "el-icon-plus"
+                },
+                on: {
+                  click: async _ => {
+                    const $table = this.$refs[`subForm-${info.name}`]
+                    if ($table) {
+                      const record = {}
+                      const { row: newRow } = await $table.insert(record)
+                      await this.$nextTick()
+                      await $table.setEditRow(newRow)
+                    }
+                  }
+                }
+              }),
+            ]),
+            ...this.subForm.get(info.sub_custom_model_id)?.customModel?.fields?.map((subField,subIndex) => h('vxe-column',{
+              props: {
+                field: subField.name,
+                title: subField.label,
+                align: 'center',
+                'edit-render': {}
+              },
+              scopedSlots: {
+                edit:({ row }) => {
+                  return formBuilder.bind(this)(device, subField, h, row, info._writeable)
+                }
+              }
+            }))
+          ])
+          break;
       }
-    },[formItem])
+    } else if (info._readable) {
+      formItem = h('span',{
+        style: {
+          color: '#333'
+        }
+      },this.form[info.name])
+    }
+
+    if (formItem) {
+      return row ? formItem : h('el-form-item',{
+        props: {
+          prop: info.name,
+          label: info.label
+        },
+        style: {
+          'grid-column-start': info.gs_x+1,
+          'grid-column-end': info.gs_x+1 + info.gs_width,
+          'grid-row-start': info.gs_y+1,
+          'grid-row-end': info.gs_y+1 + info.gs_height
+        }
+      },[formItem])
+    }
   }
   if(device === 'mobile') {
     switch (info.type) {
diff --git a/src/views/flow/DesktopForm.vue b/src/views/flow/DesktopForm.vue
index d510d11..7d2e3ff 100644
--- a/src/views/flow/DesktopForm.vue
+++ b/src/views/flow/DesktopForm.vue
@@ -3,6 +3,16 @@ import { deepCopy } from "@/utils"
 import formBuilder from '@/utils/formBuilder'
 export default {
   props: {
+    readable: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    writeable: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
     originalForm: {
       type: Object,
       default: () => ({}),
@@ -17,18 +27,21 @@ export default {
       default: 'desktop',
       required: true
     },
-    info: {
+    fields: {
       type: Array,
       default: () => [],
       required: true
+    },
+    fileList: {
+      type: Object,
+      default: () => ({}),
+      required: true
     }
   },
   data() {
     return {
       form: {},
-      file: {
-        ggg: []
-      }
+      file: {}
     }
   },
   methods: {
@@ -45,16 +58,24 @@ export default {
     },
     originalForm(newVal) {
       this.form = deepCopy(newVal)
+    },
+    fileList(newVal) {
+      this.file = deepCopy(newVal)
     }
   },
   render(h) {
+    const authFields = this.fields.map(field => ({
+      ...field,
+      _readable: this.readable.indexOf(field.id) !== -1,
+      _writeable: this.writeable.indexOf(field.id) !== -1
+    }))
     return h('el-form', {
       class: 'form',
       props: {
         model: this.form,
         'label-position': 'top'
       }
-    },this.info.map(field => formBuilder.bind(this)(this.device, field, h)))
+    },authFields.map(field => formBuilder.bind(this)(this.device, field, h)))
   }
 }
 </script>
diff --git a/src/views/flow/create.vue b/src/views/flow/create.vue
index e6c65d0..f19f515 100644
--- a/src/views/flow/create.vue
+++ b/src/views/flow/create.vue
@@ -1,28 +1,56 @@
 <template>
   <div class="container">
-    <el-card shadow="always">
+    <el-card shadow="always" class="card" style="height: 2000px;">
       <template #header>
         <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-steps>
+        </div>
+
+        <el-divider></el-divider>
+
         <div class="form-container">
           <template v-if="device === 'desktop'">
-            <DesktopForm :device="device" :sub-form="subConfig" :info="fields" :original-form="form"></DesktopForm>
+            <DesktopForm :device="device"
+                         ref="desktopForm"
+                         :sub-form="subConfig"
+                         :fields="fields"
+                         :original-form="form"
+                         :readable="readableFields"
+                         :file-list="fileList"
+                         :writeable="writeableFields"></DesktopForm>
           </template>
           <template v-else>
             <MobileForm :device="device" :info="fields"></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>
+      </div>
     </el-card>
+
+    <el-backtop></el-backtop>
   </div>
 </template>
 
 <script>
 import DesktopForm from "./DesktopForm.vue";
 import MobileForm from "./MobileForm.vue";
-import { preConfig } from "@/api/flow"
+import { preConfig, deal, create } from "@/api/flow"
+import { deepCopy } from "@/utils";
 export default {
   components: {
     DesktopForm,
@@ -41,6 +69,9 @@ export default {
   methods: {
     generateForm(object,fields) {
       fields.forEach(field => {
+        if(field.type === 'file') {
+          this.fileList[field.name] = []
+        }
         if(field.type === 'relation') {
           object[field.name] = [{}]
 
@@ -58,7 +89,7 @@ export default {
         background: 'rgba(0, 0, 0, 0.8)'
       });
       try {
-        const res = await preConfig(this.$route.query.id)
+        const res = await preConfig(this.$route.query.module_id)
         const { fields } = res?.customModel;
         let subFormRequest = []
         const getSubForm = (id) => {
@@ -84,6 +115,39 @@ export default {
         this.$message.error("配置失败")
         loading.close()
       }
+    },
+
+    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)
+        for (let [key, value] of Object.entries(copyFile)) {
+          if (copyForm.hasOwnProperty(key)) {
+            copyForm[key] = value.map(i => i.response?.id)?.toString()
+          }
+        }
+        for (let key in copyForm) {
+          if(copyForm[key] instanceof Array && copyForm[key][0]) {
+            let formatObj = {}
+            let subKeys = Object.keys(copyForm[key][0])
+            subKeys.forEach(key => {
+              formatObj[key] = []
+            })
+            copyForm[key].forEach(item => {
+              subKeys.forEach(subKey => {
+                formatObj[subKey].push(item[subKey])
+              })
+            })
+            delete formatObj['_X_ROW_KEY']
+            copyForm[key] = formatObj
+
+          }
+        }
+
+        create(copyForm,this.$route.query.module_id)
+        console.log(copyForm)
+      }
     }
   },
   computed: {
@@ -92,10 +156,21 @@ export default {
     },
     fields() {
       return this.config?.customModel?.fields || []
+    },
+    readableFields() {
+      return this.config?.currentNode?.readable || []
+    },
+    writeableFields() {
+      return this.config?.currentNode?.writeable || []
+    },
+    node() {
+      return this.config?.currentNode || {}
     }
   },
   created() {
     this.getConfig()
+  },
+  mounted() {
   }
 }
 </script>
@@ -106,6 +181,16 @@ export default {
 }
 .container {
   padding: 20px;
+
+  .card {
+    position: relative;
+  }
+  .btns {
+
+    margin-top: 10px;
+    position: sticky;
+    bottom: 20px;
+  }
 }
 .form-container {
 }
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index 14eed47..0c609d4 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -93,7 +93,7 @@ export default {
         this.$router.push({
           path: '/flow/create',
           query: {
-            id: flow.id
+            module_id: flow.id
           }
         })
       }