封装禁用表单列表渲染组件,优化递归处理表单数据逻辑

zkqy-ui/src/assets/js/formArray.js

@@ -0,0 +1,471 @@
+const List = [
+  {
+    formInfo: {
+      formKey: 'name',
+      jsonData: {
+        "list": [
+          {
+            "type": "text",
+            "label": "主制任务",
+            "options": {
+              "textAlign": "center",
+              "hidden": false,
+              "showRequiredMark": false,
+              "noFormItem": true,
+              "color": "#1e497b",
+              "fontFamily": "FangSong",
+              "fontSize": "26pt"
+            },
+            "key": "text_1704780481164"
+          },
+          {
+            "type": "divider",
+            "label": "",
+            "options": {
+              "orientation": "",
+              "noFormItem": true
+            },
+            "key": "divider_1704780533061"
+          },
+          {
+            "type": "select",
+            "label": "选择流程",
+            "options": {
+              "width": "100%",
+              "multiple": false,
+              "disabled": false,
+              "clearable": false,
+              "showLabel": true,
+              "hidden": false,
+              "placeholder": "请选择",
+              "dynamicKey": "aa",
+              "dynamic": true,
+              "options": [
+                {
+                  "value": "1",
+                  "label": "下拉框1"
+                },
+                {
+                  "value": "2",
+                  "label": "下拉框2"
+                }
+              ],
+              "showSearch": false,
+              "sqlData": {
+                "dynamicName": "aa",
+                "sqls": [
+                  "SELECT bpm_process.process_name AS `label`,bpm_process.process_key AS `value`,bpm_process.* FROM {DBNAME}.bpm_process AS bpm_process WHERE bpm_process.del_flag = 0 AND bpm_process.process_version = 0 AND bpm_process.process_type = 0"
+                ],
+                "echoDatas": [
+                  "{\"formData\":{\"dynamicName\":\"aa\",\"tableName\":\"bpm_process\",\"optLabelData\":\"process_name\",\"optValueData\":\"process_key\"},\"filterTableData\":[{\"fieldName\":\"del_flag\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}},{\"fieldName\":\"process_version\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}},{\"fieldName\":\"process_type\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}}]}"
+                ]
+              }
+            },
+            "model": "process_key",
+            "key": "select_1704780630524",
+            "help": "",
+            "rules": [
+              {
+                "required": true,
+                "message": "必填项"
+              }
+            ],
+            "tableName": "master_task"
+          },
+          {
+            "type": "divider",
+            "label": "",
+            "options": {
+              "orientation": "left",
+              "noFormItem": true
+            },
+            "key": "divider_1704780618241"
+          },
+          {
+            "type": "grid",
+            "label": "栅格布局",
+            "columns": [
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "input",
+                    "label": "任务号",
+                    "icon": "icon-write",
+                    "options": {
+                      "type": "text",
+                      "width": "100%",
+                      "defaultValue": "",
+                      "placeholder": "请输入",
+                      "clearable": false,
+                      "maxLength": null,
+                      "addonBefore": "",
+                      "addonAfter": "",
+                      "showLabel": true,
+                      "hidden": false,
+                      "disabled": false
+                    },
+                    "model": "task_no",
+                    "key": "input_1704780688105",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": false,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              },
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "input",
+                    "label": "图号",
+                    "icon": "icon-write",
+                    "options": {
+                      "type": "text",
+                      "width": "100%",
+                      "defaultValue": "",
+                      "placeholder": "请输入",
+                      "clearable": false,
+                      "maxLength": null,
+                      "addonBefore": "",
+                      "addonAfter": "",
+                      "showLabel": true,
+                      "hidden": false,
+                      "disabled": false
+                    },
+                    "model": "map_number",
+                    "key": "input_1704780715270",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": false,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              }
+            ],
+            "options": {
+              "noFormItem": true,
+              "gutter": 0
+            },
+            "key": "grid_1704780671155"
+          },
+          {
+            "type": "grid",
+            "label": "栅格布局",
+            "columns": [
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "input",
+                    "label": "图号名称",
+                    "icon": "icon-write",
+                    "options": {
+                      "type": "text",
+                      "width": "100%",
+                      "defaultValue": "",
+                      "placeholder": "请输入",
+                      "clearable": false,
+                      "maxLength": null,
+                      "addonBefore": "",
+                      "addonAfter": "",
+                      "showLabel": true,
+                      "hidden": false,
+                      "disabled": false
+                    },
+                    "model": "map_name",
+                    "key": "input_1704780754718",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": true,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              },
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "number",
+                    "label": "任务数量",
+                    "icon": "icon-number",
+                    "options": {
+                      "width": "100%",
+                      "defaultValue": null,
+                      "min": null,
+                      "max": null,
+                      "precision": null,
+                      "step": 1,
+                      "showLabel": true,
+                      "hidden": false,
+                      "disabled": false,
+                      "placeholder": "请输入"
+                    },
+                    "model": "task_number",
+                    "key": "number_1704780762217",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": false,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              }
+            ],
+            "options": {
+              "noFormItem": true,
+              "gutter": 0
+            },
+            "key": "grid_1704781049305"
+          },
+          {
+            "type": "grid",
+            "label": "栅格布局",
+            "columns": [
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "input",
+                    "label": "工艺路线",
+                    "icon": "icon-write",
+                    "options": {
+                      "type": "text",
+                      "width": "100%",
+                      "defaultValue": "",
+                      "placeholder": "请输入",
+                      "clearable": false,
+                      "maxLength": null,
+                      "addonBefore": "",
+                      "addonAfter": "",
+                      "showLabel": true,
+                      "hidden": false,
+                      "disabled": false
+                    },
+                    "model": "craft_route",
+                    "key": "input_1704780817399",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": false,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              },
+              {
+                "span": 12,
+                "list": [
+                  {
+                    "type": "date",
+                    "label": "日期选择框",
+                    "icon": "icon-calendar",
+                    "options": {
+                      "width": "100%",
+                      "defaultValue": "",
+                      "rangeDefaultValue": [],
+                      "range": false,
+                      "showTime": false,
+                      "disabled": false,
+                      "showLabel": true,
+                      "hidden": false,
+                      "clearable": false,
+                      "placeholder": "请选择",
+                      "rangePlaceholder": [
+                        "开始时间",
+                        "结束时间"
+                      ],
+                      "format": "YYYY-MM-DD"
+                    },
+                    "model": "accomplish_time",
+                    "key": "date_1704781175232",
+                    "help": "",
+                    "rules": [
+                      {
+                        "required": true,
+                        "message": "必填项"
+                      }
+                    ],
+                    "tableName": "master_task"
+                  }
+                ]
+              }
+            ],
+            "options": {
+              "noFormItem": true,
+              "gutter": 0
+            },
+            "key": "grid_1704781060272"
+          },
+          {
+            "type": "editor",
+            "label": "备注",
+            "list": [],
+            "options": {
+              "height": 300,
+              "placeholder": "请输入",
+              "defaultValue": "",
+              "chinesization": true,
+              "hidden": false,
+              "disabled": false,
+              "showLabel": false,
+              "width": "100%"
+            },
+            "model": "remark",
+            "key": "editor_1704780859897",
+            "help": "",
+            "rules": [
+              {
+                "required": false,
+                "message": "必填项"
+              }
+            ],
+            "tableName": "master_task"
+          },
+          {
+            "type": "textarea",
+            "label": "状态",
+            "options": {
+              "width": "100%",
+              "minRows": 4,
+              "maxRows": 6,
+              "maxLength": null,
+              "defaultValue": "0",
+              "clearable": false,
+              "showLabel": true,
+              "hidden": true,
+              "disabled": false,
+              "placeholder": "请输入"
+            },
+            "model": "status",
+            "key": "textarea_1705473717123",
+            "help": "",
+            "rules": [
+              {
+                "required": false,
+                "message": "必填项"
+              }
+            ],
+            "tableName": "master_task"
+          }
+        ],
+        "config": {
+          "layout": "horizontal",
+          "labelCol": {
+            "xs": 4,
+            "sm": 4,
+            "md": 4,
+            "lg": 4,
+            "xl": 4,
+            "xxl": 4
+          },
+          "labelWidth": 100,
+          "labelLayout": "flex",
+          "wrapperCol": {
+            "xs": 18,
+            "sm": 18,
+            "md": 18,
+            "lg": 18,
+            "xl": 18,
+            "xxl": 18
+          },
+          "hideRequiredMark": false,
+          "customStyle": "",
+          "formName": "主制任务表单",
+          "nickFormName": "ZZRWBD",
+          "mainTableName": "master_task",
+          "tdId": 1,
+          "formDescription": "主制任务表单"
+        }
+      },
+    },
+    dynamicData: {},
+    defaultValue: {},
+  }
+  , {
+    formInfo: {
+      formKey: "plan",
+      jsonData: {
+        list: [
+          {
+            type: "input",
+            label: "货品名称",
+            options: {
+              type: "text",
+              width: "100%",
+              defaultValue: "",
+              placeholder: "请输入",
+              clearable: false,
+              maxLength: null,
+              addonBefore: "",
+              addonAfter: "",
+              showLabel: true,
+              hidden: false,
+              disabled: false,
+            },
+            model: "goodsname",
+            key: "input_1703555460307",
+            help: "",
+            rules: [
+              {
+                required: false,
+                message: "必填项",
+              },
+            ],
+            tableName: "goods",
+          },
+        ],
+        config: {
+          layout: "horizontal",
+          labelCol: {
+            xs: 4,
+            sm: 4,
+            md: 4,
+            lg: 4,
+            xl: 4,
+            xxl: 4,
+          },
+          labelWidth: 100,
+          labelLayout: "flex",
+          wrapperCol: {
+            xs: 18,
+            sm: 18,
+            md: 18,
+            lg: 18,
+            xl: 18,
+            xxl: 18,
+          },
+          hideRequiredMark: false,
+          customStyle: "",
+          formName: "货品表单",
+          nickFormName: "HPBD",
+          mainTableName: "goods",
+          tdId: 1,
+        },
+      },
+    },
+
+    dynamicData: {},
+    defaultValue: {},
+
+  },
+]
+export default List

zkqy-ui/src/components/FormGroup/Approve.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="list-wrap">
+    <div class="list-item" v-for="(item, index) in formList" :key="index">
+      <k-form-build
+        :dynamicData="item.dynamicData"
+        :defaultValue="item.defaultValue"
+        class="formBuild"
+        ref="addFromRef"
+        :value="item.formInfo.jsonData"
+      />
+    </div>
+    <el-divider></el-divider>
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="80px"
+      :inline="false"
+      size="normal"
+    >
+      <el-form-item label="审批:">
+        <el-select
+          v-model="form.approvalStatus"
+          placeholder="请选择审批结果"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="审批意见:" size="normal">
+        <el-input
+          type="textarea"
+          :rows="3"
+          v-model="form.approvalRemark"
+          placeholder="请输入"
+          :maxlength="-1"
+          :show-word-limit="false"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+        >
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import formList from "@/assets/js/formArray";
+import { disableFormItem } from "@/utils/kFormDesign";
+export default {
+  name: "Approve",
+  props: [],
+  components: {},
+  data() {
+    return {
+      // formList: [
+      //   {
+      //     formJson: formList,
+      //   },
+      // ],
+      form: {
+        approvalStatus: "", //审批结果
+        approvalRemark: "", //审批备注
+      },
+      statusOptions: [
+        {
+          value: "pass",
+          label: "通过",
+        },
+        {
+          value: "noPass",
+          label: "不通过",
+        },
+        {
+          value: "reject",
+          label: "驳回",
+        },
+      ],
+      rules: {
+        approvalStatus: [
+          {
+            required: true,
+            message: "请选择审批结果",
+            trigger: "change",
+          },
+        ],
+        approvalRemark: [
+          {
+            required: true,
+            message: "请输入审批备注",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    formList() {
+      return this.disableHandler(formList);
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {array} formList 表单列表
+     * @return {array} 处理后的表单列表-添加disable属性
+
+     */
+    disableHandler(formList) {
+      if (formList.length == 0) return [];
+      formList.forEach((item) => {
+        item.formInfo.jsonData = disableFormItem(item.formInfo.jsonData);
+      });
+      return formList;
+    },
+    // 获取表单信息
+    getformInfo() {
+      let res = {
+        flag: false,
+      };
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          // alert('submit!');
+          res.flag = true;
+          res.data = this.form;
+          return res;
+        } else {
+          return res;
+        }
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped lang="scss">
+// .list-wrap {
+//   display: flex;
+//   flex-direction: column;
+//   .list-item {
+//     margin-top: 10px;
+//     &::after {
+//       content: "";
+//       display: block;
+//       border: 1px dashed #41baeb; /* 设置虚线样式 */
+//     }
+//     &:last-child::after {
+//       display: none;
+//     }
+//   }
+// }
+</style>

zkqy-ui/src/components/FormGroup/index.vue

@@ -1,33 +1,84 @@
 <template>
   <div class="list-wrap">
-    <k-form-build
-      v-if="jsonData"
-      class="formBuild"
-      ref="addFromRef"
-      :dynamicData="dynamicData"
-      :defaultValue="defaultValue"
-      :value="jsonData"
-    />
+    <div class="list-item" v-for="(item, index) in formList" :key="index">
+      <!--  :dynamicData="dynamicData"
+        :defaultValue="defaultValue" -->
+      <k-form-build
+        :dynamicData="item.dynamicData"
+        :defaultValue="item.defaultValue"
+        class="formBuild"
+        ref="addFromRef"
+        :value="item.jsonData"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import formList from "./formList.js";
 export default {
-  name: "FormGroup",
+  name: "FormList",
   props: [],
   components: {},
   data() {
     return {
-      formList: [
-        {
-          formJson: formList,
-        },
-      ],
+      // formList: [
+      //   {
+      //     formJson: formList,
+      //   },
+      // ],
     };
   },
-  computed: {},
-  methods: {},
+  computed: {
+    formList() {
+      // return this.disableHandler(formList);
+      return this.removeValidate(formList, mainFormName);
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {array} formList 表单列表
+     * @return {array} 处理后的表单列表-添加disable属性
+
+     */
+    disableHandler(formList) {
+      if (formList.length == 0) return [];
+      let last = formList.pop();
+      formList.forEach((item) => {
+        item.jsonData.list.forEach((i) => {
+          i.options.disabled = true;
+        });
+      });
+      formList.push(last);
+      return formList;
+    },
+    /**
+     *
+     * @param {Object} formObj 表单对象
+     * @param {String} mainFormName 主表单名
+     *
+     */
+    removeValidate(formObj, mainFormName) {},
+  },
+  mounted() {},
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.list-wrap {
+  display: flex;
+  flex-direction: column;
+  .list-item {
+    margin-top: 10px;
+    &::after {
+      content: "";
+      display: block;
+      border: 1px dashed #41baeb; /* 设置虚线样式 */
+    }
+    &:last-child::after {
+      display: none;
+    }
+  }
+}
+</style>

zkqy-ui/src/utils/kFormDesign.js

@@ -0,0 +1,135 @@
+
+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 => !isShowItem(item))//去除只是展示的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) => {
+            getItemArr(n.list, res);
+          });
+          break;
+        default:
+          break;
+      }
+    } else {//非布局item
+      res.push(item);
+    }
+  })
+}
+
+// 是否是包含类型的type
+function isWrapItem(item) {
+  return wrapTypeList.includes(item.type)
+}
+// 是否是仅展示的type
+function isShowItem(item) {
+  return onlyShowList.includes(item.type)
+}
+
+
+// 递归禁用表单项
+export function disableFormItem(jsonData = {}) {
+  // let jsonData = JSON.parse(JSONStr);
+  if (!jsonData.list || !jsonData.list.length) return {};
+  disableHandler(jsonData.list);
+  return jsonData;
+}
+
+function disableHandler(list) {
+  if (!list.length) return;
+  list.forEach((item) => {
+    if (isWrapItem(item)) { //递归处理保函类型的type
+      switch (item.type) {
+        case 'table':
+          item.trs.forEach((n) => {
+            n.tds.forEach((m) => {
+              disableHandler(m.list);
+            });
+          });
+          break;
+        case "grid":
+          item.columns.forEach((n) => {
+            disableHandler(n.list);
+          });
+          break;
+        case "tabs":
+          item.columns.forEach((n) => {
+            disableHandler(n.list);
+          });
+          break;
+        case "card":
+          disableHandler(item.list);
+          break;
+        case "batch"://动态表格
+          disableHandler(item.list);
+          break;
+        case "selectInputList": //选项输入列
+          item.columns.forEach((n) => {
+            disableHandler(n.list);
+          });
+          break;
+        default:
+          break;
+      }
+    } else if (isShowItem(item)) { //跳过仅展示类型
+      return;
+    } else {
+      item.options.disabled = true;
+    }
+  })
+
+}
+
+

zkqy-ui/src/views/bussiness/detail/formList.js

@@ -1,37 +1,33 @@
 const List = [
 	{
 		jsonData: {
-			list: [
+			"list": [
 				{
-					"type": "input",
-					"label": "计划名称",
+					"type": "text",
+					"label": "主制任务",
 					"options": {
-						"type": "text",
-						"width": "100%",
-						"defaultValue": "",
-						"placeholder": "请输入计划名称",
-						"clearable": false,
-						"maxLength": null,
-						"addonBefore": "",
-						"addonAfter": "",
-						"showLabel": true,
+						"textAlign": "center",
 						"hidden": false,
-						"disabled": false
+						"showRequiredMark": false,
+						"noFormItem": true,
+						"color": "#1e497b",
+						"fontFamily": "FangSong",
+						"fontSize": "26pt"
 					},
-					"model": "name",
-					"key": "input_1703556025735",
-					"help": "",
-					"rules": [
-						{
-							"required": false,
-							"message": "必填项"
-						}
-					],
-					"tableName": "plan"
+					"key": "text_1704780481164"
+				},
+				{
+					"type": "divider",
+					"label": "",
+					"options": {
+						"orientation": "",
+						"noFormItem": true
+					},
+					"key": "divider_1704780533061"
 				},
 				{
 					"type": "select",
-					"label": "货品",
+					"label": "选择流程",
 					"options": {
 						"width": "100%",
 						"multiple": false,
@@ -39,8 +35,8 @@ const List = [
 						"clearable": false,
 						"showLabel": true,
 						"hidden": false,
-						"placeholder": "请选择货品",
-						"dynamicKey": "SP",
+						"placeholder": "请选择",
+						"dynamicKey": "aa",
 						"dynamic": true,
 						"options": [
 							{
@@ -54,43 +50,285 @@ const List = [
 						],
 						"showSearch": false,
 						"sqlData": {
-							"dynamicName": "SP",
+							"dynamicName": "aa",
 							"sqls": [
-								"SELECT goods.goodsname AS `label`,goods.id AS `value`,goods.* FROM goods AS goods "
+								"SELECT bpm_process.process_name AS `label`,bpm_process.process_key AS `value`,bpm_process.* FROM {DBNAME}.bpm_process AS bpm_process WHERE bpm_process.del_flag = 0 AND bpm_process.process_version = 0 AND bpm_process.process_type = 0"
 							],
 							"echoDatas": [
-								"{\"formData\":{\"dynamicName\":\"SP\",\"tableName\":\"goods\",\"optLabelData\":\"goodsname\",\"optValueData\":\"id\"},\"filterTableData\":[]}"
+								"{\"formData\":{\"dynamicName\":\"aa\",\"tableName\":\"bpm_process\",\"optLabelData\":\"process_name\",\"optValueData\":\"process_key\"},\"filterTableData\":[{\"fieldName\":\"del_flag\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}},{\"fieldName\":\"process_version\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}},{\"fieldName\":\"process_type\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}}]}"
 							]
 						}
 					},
-					"model": "good_id",
-					"key": "select_1703556044150",
+					"model": "process_key",
+					"key": "select_1704780630524",
 					"help": "",
 					"rules": [
 						{
-							"required": false,
+							"required": true,
 							"message": "必填项"
 						}
 					],
-					"tableName": "plan"
+					"tableName": "master_task"
 				},
 				{
-					"type": "number",
-					"label": "计划产量",
+					"type": "divider",
+					"label": "",
 					"options": {
-						"width": "100%",
-						"defaultValue": null,
-						"min": null,
-						"max": null,
-						"precision": null,
-						"step": 1,
-						"showLabel": true,
+						"orientation": "left",
+						"noFormItem": true
+					},
+					"key": "divider_1704780618241"
+				},
+				{
+					"type": "grid",
+					"label": "栅格布局",
+					"columns": [
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "input",
+									"label": "任务号",
+									"icon": "icon-write",
+									"options": {
+										"type": "text",
+										"width": "100%",
+										"defaultValue": "",
+										"placeholder": "请输入",
+										"clearable": false,
+										"maxLength": null,
+										"addonBefore": "",
+										"addonAfter": "",
+										"showLabel": true,
+										"hidden": false,
+										"disabled": false
+									},
+									"model": "task_no",
+									"key": "input_1704780688105",
+									"help": "",
+									"rules": [
+										{
+											"required": false,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						},
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "input",
+									"label": "图号",
+									"icon": "icon-write",
+									"options": {
+										"type": "text",
+										"width": "100%",
+										"defaultValue": "",
+										"placeholder": "请输入",
+										"clearable": false,
+										"maxLength": null,
+										"addonBefore": "",
+										"addonAfter": "",
+										"showLabel": true,
+										"hidden": false,
+										"disabled": false
+									},
+									"model": "map_number",
+									"key": "input_1704780715270",
+									"help": "",
+									"rules": [
+										{
+											"required": false,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						}
+					],
+					"options": {
+						"noFormItem": true,
+						"gutter": 0
+					},
+					"key": "grid_1704780671155"
+				},
+				{
+					"type": "grid",
+					"label": "栅格布局",
+					"columns": [
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "input",
+									"label": "图号名称",
+									"icon": "icon-write",
+									"options": {
+										"type": "text",
+										"width": "100%",
+										"defaultValue": "",
+										"placeholder": "请输入",
+										"clearable": false,
+										"maxLength": null,
+										"addonBefore": "",
+										"addonAfter": "",
+										"showLabel": true,
+										"hidden": false,
+										"disabled": false
+									},
+									"model": "map_name",
+									"key": "input_1704780754718",
+									"help": "",
+									"rules": [
+										{
+											"required": true,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						},
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "number",
+									"label": "任务数量",
+									"icon": "icon-number",
+									"options": {
+										"width": "100%",
+										"defaultValue": null,
+										"min": null,
+										"max": null,
+										"precision": null,
+										"step": 1,
+										"showLabel": true,
+										"hidden": false,
+										"disabled": false,
+										"placeholder": "请输入"
+									},
+									"model": "task_number",
+									"key": "number_1704780762217",
+									"help": "",
+									"rules": [
+										{
+											"required": false,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						}
+					],
+					"options": {
+						"noFormItem": true,
+						"gutter": 0
+					},
+					"key": "grid_1704781049305"
+				},
+				{
+					"type": "grid",
+					"label": "栅格布局",
+					"columns": [
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "input",
+									"label": "工艺路线",
+									"icon": "icon-write",
+									"options": {
+										"type": "text",
+										"width": "100%",
+										"defaultValue": "",
+										"placeholder": "请输入",
+										"clearable": false,
+										"maxLength": null,
+										"addonBefore": "",
+										"addonAfter": "",
+										"showLabel": true,
+										"hidden": false,
+										"disabled": false
+									},
+									"model": "craft_route",
+									"key": "input_1704780817399",
+									"help": "",
+									"rules": [
+										{
+											"required": false,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						},
+						{
+							"span": 12,
+							"list": [
+								{
+									"type": "date",
+									"label": "日期选择框",
+									"icon": "icon-calendar",
+									"options": {
+										"width": "100%",
+										"defaultValue": "",
+										"rangeDefaultValue": [],
+										"range": false,
+										"showTime": false,
+										"disabled": false,
+										"showLabel": true,
+										"hidden": false,
+										"clearable": false,
+										"placeholder": "请选择",
+										"rangePlaceholder": [
+											"开始时间",
+											"结束时间"
+										],
+										"format": "YYYY-MM-DD"
+									},
+									"model": "accomplish_time",
+									"key": "date_1704781175232",
+									"help": "",
+									"rules": [
+										{
+											"required": true,
+											"message": "必填项"
+										}
+									],
+									"tableName": "master_task"
+								}
+							]
+						}
+					],
+					"options": {
+						"noFormItem": true,
+						"gutter": 0
+					},
+					"key": "grid_1704781060272"
+				},
+				{
+					"type": "editor",
+					"label": "备注",
+					"list": [],
+					"options": {
+						"height": 300,
+						"placeholder": "请输入",
+						"defaultValue": "",
+						"chinesization": true,
 						"hidden": false,
 						"disabled": false,
-						"placeholder": "请输入计划产量"
+						"showLabel": false,
+						"width": "100%"
 					},
-					"model": "plan_weight",
-					"key": "number_1703556096465",
+					"model": "remark",
+					"key": "editor_1704780859897",
 					"help": "",
 					"rules": [
 						{
@@ -98,44 +336,25 @@ const List = [
 							"message": "必填项"
 						}
 					],
-					"tableName": "plan"
+					"tableName": "master_task"
 				},
 				{
-					"type": "select",
-					"label": "发起流程",
+					"type": "textarea",
+					"label": "状态",
 					"options": {
 						"width": "100%",
-						"multiple": false,
-						"disabled": false,
+						"minRows": 4,
+						"maxRows": 6,
+						"maxLength": null,
+						"defaultValue": "0",
 						"clearable": false,
 						"showLabel": true,
-						"hidden": false,
-						"placeholder": "请选择",
-						"dynamicKey": "FQLC",
-						"dynamic": true,
-						"options": [
-							{
-								"value": "1",
-								"label": "下拉框1"
-							},
-							{
-								"value": "2",
-								"label": "下拉框2"
-							}
-						],
-						"showSearch": false,
-						"sqlData": {
-							"dynamicName": "FQLC",
-							"sqls": [
-								"SELECT bpm_process.process_name AS `label`,bpm_process.process_key AS `value`,bpm_process.* FROM bpm_process AS bpm_process WHERE bpm_process.del_flag = 0"
-							],
-							"echoDatas": [
-								"{\"formData\":{\"dynamicName\":\"FQLC\",\"tableName\":\"bpm_process\",\"optLabelData\":\"process_name\",\"optValueData\":\"process_key\"},\"filterTableData\":[{\"fieldName\":\"del_flag\",\"flagValue\":\"\",\"fieldOptions\":[],\"flagFormData\":{\"flagType\":0,\"tableField\":{\"tableName\":\"\",\"fieldName\":\"\"},\"flagValue\":\"0\"}}]}"
-							]
-						}
+						"hidden": true,
+						"disabled": false,
+						"placeholder": "请输入"
 					},
-					"model": "process_key",
-					"key": "select_1703556257092",
+					"model": "status",
+					"key": "textarea_1705473717123",
 					"help": "",
 					"rules": [
 						{
@@ -143,10 +362,10 @@ const List = [
 							"message": "必填项"
 						}
 					],
-					"tableName": "plan"
+					"tableName": "master_task"
 				}
 			],
-			config: {
+			"config": {
 				"layout": "horizontal",
 				"labelCol": {
 					"xs": 4,
@@ -168,10 +387,11 @@ const List = [
 				},
 				"hideRequiredMark": false,
 				"customStyle": "",
-				"formName": "计划表单",
-				"nickFormName": "JHBD",
-				"mainTableName": "plan",
-				"tdId": 3
+				"formName": "主制任务表单",
+				"nickFormName": "ZZRWBD",
+				"mainTableName": "master_task",
+				"tdId": 1,
+				"formDescription": "主制任务表单"
 			}
 		},
 		dynamicData: {},

zkqy-ui/src/views/bussiness/detail/formList.vue

@@ -16,6 +16,7 @@
 
 <script>
 import formList from "./formList.js";
+import { disableFormItem } from "@/utils/kFormDesign";
 export default {
   name: "FormList",
   props: [],
@@ -45,13 +46,12 @@ export default {
       if (formList.length == 0) return [];
       let last = formList.pop();
       formList.forEach((item) => {
-        item.jsonData.list.forEach((i) => {
-          i.options.disabled = true;
-        });
+        item.jsonData = disableFormItem(item.jsonData);
       });
       formList.push(last);
       return formList;
     },
+    // 递归禁用表单项
   },
   mounted() {},
 };

zkqy-ui/src/views/bussiness/detail/index.vue

@@ -20,7 +20,8 @@
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
             <div class="test-form">
-              <FormList></FormList>
+              <!-- <FormList></FormList> -->
+              <Approve></Approve>
             </div>
           </el-col>
         </el-tab-pane>
@@ -41,6 +42,7 @@
 
 <script>
 import FormList from "./formList.vue";
+import Approve from "@/components/FormGroup/Approve"; //审批表单
 import FlowChart from "@/views/bussiness/detail/FlowChart";
 import RecordList from "@/views/bussiness/detail/RecordList";
 
@@ -49,7 +51,7 @@ import formList from "./formList.js";
 import flowData from "./flowData.js";
 export default {
   name: "Record",
-  components: { FormList, FlowChart, RecordList },
+  components: { FormList, FlowChart, RecordList, Approve },
   props: {},
   data() {
     return {