Procházet zdrojové kódy

更新oa保存问题

lex před 2 roky
rodič
revize
5f77c30114

+ 534 - 530
src/components/VueFormMaking/components/GenerateForm.vue

@@ -1,530 +1,534 @@
-<template>
-  <div>
-    <el-form
-      ref="generateForm"
-      label-suffix=":"
-      :size="data.config.size"
-      :model="models"
-      :rules="rules"
-      :label-position="data.config.labelPosition"
-      :label-width="150 + 'px'"
-    >
-      <template v-for="item in templateData">
-        <template v-if="item.type == 'grid'">
-          <el-row
-            :key="item.key"
-            type="flex"
-            :gutter="item.options.gutter ? item.options.gutter : 0"
-            :justify="item.options.justify"
-            :align="item.options.align"
-          >
-            <el-col
-              v-for="(col, colIndex) in item.columns"
-              :key="colIndex"
-              :span="col.span"
-            >
-              <template v-for="citem in col.list">
-                <el-form-item
-                  v-if="citem.type == 'blank'"
-                  :key="citem.key"
-                  :label="citem.name"
-                  :prop="citem.model"
-                >
-                  <slot :name="citem.model" :model="models" />
-                </el-form-item>
-                <genetate-form-item
-                  v-else
-                  :key="citem.key"
-                  :preview="preview"
-                  :models.sync="models"
-                  :organ-list="itemOrganList"
-                  :remote="remote"
-                  :widget="citem"
-                  :data="data"
-                  :prop-value="citem.model"
-                />
-              </template>
-            </el-col>
-          </el-row>
-        </template>
-
-        <template v-else-if="item.type == 'blank'">
-          <el-form-item :key="item.key" :label="item.name" :prop="item.model">
-            <slot :name="item.model" :model="models" />
-          </el-form-item>
-        </template>
-        <!-- 子表单 -->
-        <template v-else-if="item.type === 'subform' && !item.hidden">
-          <!-- <span :key="item.key">{{ item.type }}{{ item.hidden }}---</span> -->
-          <el-form-item
-            :key="item.key"
-            :label-width="!item.options.labelWidthStatus ? '0px' : 150 + 'px'"
-            :label="!item.options.labelWidthStatus ? '' : item.name"
-          >
-            <el-table
-              :data="models[item.model]"
-              border
-              style="width: 100%"
-              :header-cell-style="{ padding: '5px 0' }"
-              size="mini"
-              :class="!preview ? 'table-subform' : ''"
-            >
-              <el-table-column v-if="!preview" fixed width="50">
-                <template slot="header">
-                  <i
-                    style="font-size: 25px; color: #409eff; cursor: pointer"
-                    class="el-icon-circle-plus"
-                    @click="addSubformCol(item)"
-                  />
-                </template>
-                <template slot-scope="scope">
-                  <i
-                    style="font-size: 25px; color: red"
-                    class="el-icon-remove"
-                    v-if="models[item.model].length > 1"
-                    @click="delSubformCol(item, scope.$index)"
-                  />
-                </template>
-              </el-table-column>
-              <template v-for="(c, i) in item.columns">
-                <div :key="i">
-                  <el-table-column
-                    v-for="v in c.list"
-                    :key="v.key"
-                    :prop="v.model"
-                    :label="v.name"
-                    min-width="250"
-                  >
-                    <template slot-scope="scope">
-                      <genetate-form-item
-                        :prop-value="
-                          item.model + '.' + scope.$index + '.' + v.model
-                        "
-                        :parent-form="item.model + scope.$index"
-                        :preview="preview"
-                        :models.sync="models"
-                        :widget="v"
-                        :remote="remote"
-                        :data="data"
-                        :disabled="disabled"
-                        :fileCheck="!!fileCheckList[item.model]"
-                        :is-label="false"
-                        :organ-list="itemOrganList"
-                        :cooperation-list="cooperationList"
-                        :subform-index="scope.$index"
-                        :subform-model="item.model"
-                        @relationFormChange="formChange"
-                        @fileCheckRequired="fileCheckRequired"
-                      />
-                    </template>
-                  </el-table-column>
-                </div>
-              </template>
-            </el-table>
-          </el-form-item>
-        </template>
-
-        <template v-else>
-          <genetate-form-item
-            :key="item.key"
-            :prop-value="item.model"
-            :preview="preview"
-            :models.sync="models"
-            :widget="item"
-            :remote="remote"
-            :data="data"
-            :organ-list="itemOrganList"
-            :disabled="disabled"
-            @relationFormChange="formChange"
-            @fileCheckRequired="fileCheckRequired"
-          />
-        </template>
-      </template>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import GenetateFormItem from "./GenerateFormItem";
-import { getOrganCooperation } from "@/api/process/work-order";
-export default {
-  name: "FmGenerateForm",
-  components: {
-    GenetateFormItem,
-  },
-  /* eslint-disable */
-  props: [
-    "data",
-    "remote",
-    "value",
-    "insite",
-    "disabled",
-    "preview",
-    "organList",
-  ],
-  data() {
-    return {
-      fileCheck: false,
-      templateData: [], // 临时对象
-      formStatus: false,
-      formRelationList: [], // 表单中所在关联的表单
-      fileCheckList: {},
-      tableData: [],
-      models: {},
-      originRules: {}, // 原始规则
-      rules: {},
-      subformFields: {},
-      itemOrganList: [],
-      selectOrganId: [],
-      cooperationList: [], // 合作单位列表
-    };
-  },
-  watch: {
-    data: {
-      deep: true,
-      handler(val) {
-        this.generateModle(val.list);
-      },
-    },
-    value: {
-      deep: true,
-      handler(val) {
-        this.models = { ...this.models, ...val };
-      },
-    },
-    fileCheck: {
-      deep: true,
-      handler(val) {
-        // // 监听是否必填
-        // if(val) {
-        //   this.changeFormRulesRequired();
-        // } else {
-        //   this.rules = JSON.parse(JSON.stringify(this.rules));
-        // }
-      },
-    },
-  },
-  created() {
-    this.itemOrganList = this.organList;
-    this.templateData = JSON.parse(JSON.stringify(this.data.list));
-    this.generateModle(this.templateData);
-    // 选项关联不支付子表单
-    if (!this.preview) {
-      let tempData = this.templateData;
-      let hiddenFormList = this.getSelectValueObject(tempData);
-      this.formStatus = hiddenFormList;
-      this.relationFormChange();
-      if (!this.value) {
-        // 如果不是预览时,则默认给子表单添加一行数据
-        tempData.forEach(async (item) => {
-          if (item.type === "subform") {
-            await this.addSubformCol(item);
-          }
-        });
-      }
-    } else {
-      let tempData = this.templateData;
-      let hiddenFormList = this.getSelectValueObject(tempData);
-      this.formStatus = hiddenFormList;
-      // let ids = this.getSelectValueObject(tempData, true);
-      this.relationFormChange();
-
-      // const values = this.models[ids.model];
-      // let relationArray = [];
-      // ids.options &&
-      //   ids.options.options.forEach((item) => {
-      //     if (values == item.value) {
-      //       let tempRelation = item.relationOptions || [];
-      //       relationArray.push(...tempRelation);
-      //     }
-      //   });
-      // if (relationArray.length > 0) {
-      //   this.relationFormChange(relationArray);
-      // }
-    }
-
-    this.originRules = JSON.parse(JSON.stringify(this.rules));
-  },
-  methods: {
-    changeFormRulesRequired() {
-      const rules = this.rules || [];
-      for (let rule in rules) {
-        // 判断是否是子表单
-        if (rule.indexOf("subform") >= 0 && rule) {
-          // 子表单有多个
-          rules[rule].forEach((subItem) => {
-            for (let sub in subItem) {
-              subItem[sub].forEach((last) => {
-                last["required"] = false;
-              });
-            }
-          });
-        }
-      }
-      this.rules = rules;
-      this.$forceUpdate();
-    },
-    addSubformCol(item) {
-      var subformFields = {};
-      for (var c of item.columns) {
-        for (var l of c.list) {
-          if (l.options !== null && l.options !== undefined) {
-            subformFields[l.model] =
-              l.options.defaultValue !== undefined &&
-              l.options.defaultValue !== null
-                ? l.options.defaultValue
-                : "";
-          } else {
-            subformFields[l.model] = "";
-          }
-
-          if (this.rules[item.model] === undefined) {
-            this.rules[item.model] = [];
-          }
-          if (
-            this.rules[item.model][this.models[item.model].length] === undefined
-          ) {
-            this.rules[item.model][this.models[item.model].length] = {};
-          }
-          this.rules[item.model][this.models[item.model].length][l.model] = [
-            ...l.rules.map((item) => {
-              if (item.pattern) {
-                return { ...item, pattern: eval(item.pattern) };
-              } else {
-                if (this.fileCheck) {
-                  item.required = false;
-                }
-                return { ...item };
-              }
-            }),
-          ];
-        }
-      }
-      this.originRules = JSON.parse(JSON.stringify(this.rules));
-      // if(this.fileCheck) {
-      //   this.changeFormRulesRequired()
-      // }
-      this.models[item.model].push(subformFields);
-      this.models.status = 1;
-    },
-    getSelectValueObject(tpls, relationStatus) {
-      let tempList = tpls || [];
-      let status = false;
-      let relationId = "";
-      const relationList = []; // 关联的表单
-      tempList.forEach((list) => {
-        if (list.type == "select" && list.options.relationStatus) {
-          status = true;
-          relationId = list;
-          const relations = list.options.options || [];
-          relations.forEach((item) => {
-            if (item.relationOptions && item.relationOptions.length > 0) {
-              relationList.push(...item.relationOptions);
-            }
-          });
-        }
-      });
-      this.formRelationList = relationList.filter(function (item, index) {
-        return relationList.indexOf(item) === index; // 因为indexOf 只能查找到第一个
-      });
-      return relationStatus ? relationId : status;
-    },
-    // 处理是否需要校验
-    fileCheckRequired(state) {
-      this.fileCheck = state;
-    },
-    relationFormChange(value) {
-      // false 为显示,true 为隐藏
-      let temp = value || [];
-      let tempData = JSON.parse(JSON.stringify(this.templateData));
-
-      tempData.forEach((item) => {
-        if (this.formStatus) {
-          //   判断表单是否在关联列表里,如果在则隐藏
-          if (this.formRelationList.includes(item.model)) {
-            item.hidden = true;
-            this.fileCheckList[item.model] =
-              item.type == "subform" ? true : false;
-          }
-          //   判断是否是文本类型,一直默认显示
-          if (item.type == "text") {
-            item.hidden = false;
-          }
-        } else {
-          item.hidden = false;
-        }
-      });
-      this.templateData = tempData;
-      this.$forceUpdate();
-    },
-    async formInit(options) {
-      const _this = this;
-      options = options || [];
-      await new Promise(function (resolve) {
-        let tempData = JSON.parse(JSON.stringify(_this.templateData));
-        tempData.forEach((item) => {
-          if (_this.formStatus) {
-            if (options.includes(item.model)) {
-              item.hidden = true;
-              // 判断下拉选择框是否设置了关联
-              if (item.type == "select" && item.options.relationStatus) {
-                const selectOptions = item.options.options || [];
-                const relationOptions = [];
-                selectOptions.forEach((option) => {
-                  relationOptions.push(...option.relationOptions);
-                });
-                // 遍历子结点表单状态
-                _this.formChange([], relationOptions);
-                // return false;
-              }
-            }
-          } else {
-            item.hidden = false;
-          }
-          if (item.type == "subform") {
-            _this.fileCheckList[item.model] = item.hidden ? true : false;
-          }
-        });
-        _this.templateData = tempData;
-        _this.$forceUpdate();
-        resolve();
-      });
-    },
-    async formChange(value, options) {
-      // new Promise(function(resolve, reject) {)
-      console.log(value, options);
-      await this.formInit(options);
-      let tempData = JSON.parse(JSON.stringify(this.templateData));
-      tempData.forEach(async (item) => {
-        if (this.formStatus) {
-          if (value.includes(item.model)) {
-            item.hidden = false;
-          }
-        } else {
-          item.hidden = false;
-        }
-        // this.fileCheckList[item.model] = item.type == "subform" ? true : false;
-        if (item.type == "subform") {
-          this.fileCheckList[item.model] = item.hidden ? true : false;
-        }
-      });
-      this.templateData = tempData;
-      this.$forceUpdate();
-    },
-    relationFormChange() {
-      let tempData = JSON.parse(JSON.stringify(this.templateData));
-      tempData.forEach((item) => {
-        if (this.formStatus) {
-          //   判断表单是否在关联列表里,如果在则隐藏
-          if (this.formRelationList.includes(item.model)) {
-            item.hidden = true;
-            this.fileCheckList[item.model] =
-              item.type == "subform" ? true : false;
-          }
-          //   判断是否是文本类型,一直默认显示
-          if (item.type == "text") {
-            item.hidden = false;
-          }
-        } else {
-          item.hidden = false;
-        }
-      });
-      this.templateData = tempData;
-      this.$forceUpdate();
-    },
-    delSubformCol(item, index) {
-      this.models[item.model].splice(index, 1);
-      this.models.status = -1;
-    },
-    generateModle(genList) {
-      for (let i = 0; i < genList.length; i++) {
-        if (genList[i].type === "grid") {
-          genList[i].columns.forEach((item) => {
-            this.generateModle(item.list);
-          });
-        } else {
-          if (
-            this.value &&
-            Object.keys(this.value).indexOf(genList[i].model) >= 0
-          ) {
-            this.models[genList[i].model] = this.value[genList[i].model];
-          } else {
-            if (genList[i].type === "blank") {
-              this.$set(
-                this.models,
-                genList[i].model,
-                genList[i].options.defaultType === "String"
-                  ? ""
-                  : genList[i].options.defaultType === "Object"
-                  ? {}
-                  : []
-              );
-            }
-            if (genList[i].type === "subform") {
-              this.$set(this.models, genList[i].model, []);
-            } else {
-              this.models[genList[i].model] = genList[i].options.defaultValue;
-            }
-          }
-
-          if (!this.preview) {
-            if (this.rules[genList[i].model]) {
-              this.rules[genList[i].model] = [
-                ...this.rules[genList[i].model],
-                ...genList[i].rules.map((item) => {
-                  if (item.pattern) {
-                    return { ...item, pattern: eval(item.pattern) };
-                  } else {
-                    return { ...item };
-                  }
-                }),
-              ];
-            } else {
-              this.rules[genList[i].model] = [
-                ...genList[i].rules.map((item) => {
-                  if (item.pattern) {
-                    return { ...item, pattern: eval(item.pattern) };
-                  } else {
-                    return { ...item };
-                  }
-                }),
-              ];
-            }
-          }
-        }
-      }
-    },
-    getData() {
-      return new Promise((resolve, reject) => {
-        this.$refs.generateForm.validate((valid) => {
-          if (valid) {
-            resolve(this.models);
-          } else {
-            reject(new Error("表单数据校验失败").message);
-          }
-        });
-      });
-    },
-    getDataNoValid() {
-      return this.models;
-    },
-    reset() {
-      this.$refs.generateForm.resetFields();
-    },
-    async onInputChange(value) {
-      if (!value || this.selectOrganId.includes(value)) {
-        return;
-      }
-      let res = await getOrganCooperation({ organId: value });
-      this.cooperationList.push(...res.data);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.table-subform td .cell {
-  padding-top: 10px;
-  padding-bottom: 15px;
-}
-</style>
+<template>
+  <div>
+    <el-form
+      ref="generateForm"
+      label-suffix=":"
+      :size="data.config.size"
+      :model="models"
+      :rules="rules"
+      :label-position="data.config.labelPosition"
+      :label-width="150 + 'px'"
+    >
+      <template v-for="item in templateData">
+        <template v-if="item.type == 'grid'">
+          <el-row
+            :key="item.key"
+            type="flex"
+            :gutter="item.options.gutter ? item.options.gutter : 0"
+            :justify="item.options.justify"
+            :align="item.options.align"
+          >
+            <el-col
+              v-for="(col, colIndex) in item.columns"
+              :key="colIndex"
+              :span="col.span"
+            >
+              <template v-for="citem in col.list">
+                <el-form-item
+                  v-if="citem.type == 'blank'"
+                  :key="citem.key"
+                  :label="citem.name"
+                  :prop="citem.model"
+                >
+                  <slot :name="citem.model" :model="models" />
+                </el-form-item>
+                <genetate-form-item
+                  v-else
+                  :key="citem.key"
+                  :preview="preview"
+                  :models.sync="models"
+                  :organ-list="itemOrganList"
+                  :remote="remote"
+                  :widget="citem"
+                  :data="data"
+                  :prop-value="citem.model"
+                />
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+
+        <template v-else-if="item.type == 'blank'">
+          <el-form-item :key="item.key" :label="item.name" :prop="item.model">
+            <slot :name="item.model" :model="models" />
+          </el-form-item>
+        </template>
+        <!-- 子表单 -->
+        <template v-else-if="item.type === 'subform' && !item.hidden">
+          <!-- <span :key="item.key">{{ item.type }}{{ item.hidden }}---</span> -->
+          <el-form-item
+            :key="item.key"
+            :label-width="!item.options.labelWidthStatus ? '0px' : 150 + 'px'"
+            :label="!item.options.labelWidthStatus ? '' : item.name"
+          >
+            <el-table
+              :data="models[item.model]"
+              border
+              style="width: 100%"
+              :header-cell-style="{ padding: '5px 0' }"
+              size="mini"
+              :class="!preview ? 'table-subform' : ''"
+            >
+              <el-table-column v-if="!preview" fixed width="50">
+                <template slot="header">
+                  <i
+                    style="font-size: 25px; color: #409eff; cursor: pointer"
+                    class="el-icon-circle-plus"
+                    @click="addSubformCol(item)"
+                  />
+                </template>
+                <template slot-scope="scope">
+                  <i
+                    style="font-size: 25px; color: red"
+                    class="el-icon-remove"
+                    v-if="models[item.model].length > 1"
+                    @click="delSubformCol(item, scope.$index)"
+                  />
+                </template>
+              </el-table-column>
+              <template v-for="(c, i) in item.columns">
+                <div :key="i">
+                  <el-table-column
+                    v-for="v in c.list"
+                    :key="v.key"
+                    :prop="v.model"
+                    :label="v.name"
+                    min-width="250"
+                  >
+                    <template slot-scope="scope">
+                      <genetate-form-item
+                        :prop-value="
+                          item.model + '.' + scope.$index + '.' + v.model
+                        "
+                        :parent-form="item.model + scope.$index"
+                        :preview="preview"
+                        :models.sync="models"
+                        :widget="v"
+                        :remote="remote"
+                        :data="data"
+                        :disabled="disabled"
+                        :fileCheck="!!fileCheckList[item.model]"
+                        :is-label="false"
+                        :organ-list="itemOrganList"
+                        :cooperation-list="cooperationList"
+                        :subform-index="scope.$index"
+                        :subform-model="item.model"
+                        @relationFormChange="formChange"
+                        @fileCheckRequired="fileCheckRequired"
+                      />
+                    </template>
+                  </el-table-column>
+                </div>
+              </template>
+            </el-table>
+          </el-form-item>
+        </template>
+
+        <template v-else>
+          <genetate-form-item
+            :key="item.key"
+            :prop-value="item.model"
+            :preview="preview"
+            :models.sync="models"
+            :widget="item"
+            :remote="remote"
+            :data="data"
+            :organ-list="itemOrganList"
+            :disabled="disabled"
+            @relationFormChange="formChange"
+            @fileCheckRequired="fileCheckRequired"
+          />
+        </template>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import GenetateFormItem from "./GenerateFormItem";
+import { getOrganCooperation } from "@/api/process/work-order";
+export default {
+  name: "FmGenerateForm",
+  components: {
+    GenetateFormItem,
+  },
+  /* eslint-disable */
+  props: [
+    "data",
+    "remote",
+    "value",
+    "insite",
+    "disabled",
+    "preview",
+    "organList",
+  ],
+  data() {
+    return {
+      fileCheck: false,
+      templateData: [], // 临时对象
+      formStatus: false,
+      formRelationList: [], // 表单中所在关联的表单
+      fileCheckList: {},
+      tableData: [],
+      models: {},
+      originRules: {}, // 原始规则
+      rules: {},
+      subformFields: {},
+      itemOrganList: [],
+      selectOrganId: [],
+      cooperationList: [], // 合作单位列表
+    };
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler(val) {
+        console.log(val, "deep", "handler");
+        this.generateModle(val.list);
+      },
+    },
+    value: {
+      deep: true,
+      handler(val) {
+        this.models = { ...this.models, ...val };
+      },
+    },
+    fileCheck: {
+      deep: true,
+      handler(val) {
+        // // 监听是否必填
+        // if(val) {
+        //   this.changeFormRulesRequired();
+        // } else {
+        //   this.rules = JSON.parse(JSON.stringify(this.rules));
+        // }
+      },
+    },
+  },
+  created() {
+    this.itemOrganList = this.organList;
+    this.templateData = JSON.parse(JSON.stringify(this.data.list));
+    this.generateModle(this.templateData);
+    // 选项关联不支付子表单
+    if (!this.preview) {
+      let tempData = this.templateData;
+      let hiddenFormList = this.getSelectValueObject(tempData);
+      this.formStatus = hiddenFormList;
+      this.relationFormChange();
+      if (!this.value) {
+        // 如果不是预览时,则默认给子表单添加一行数据
+        tempData.forEach(async (item) => {
+          if (item.type === "subform") {
+            await this.addSubformCol(item);
+          }
+        });
+      }
+    } else {
+      let tempData = this.templateData;
+      let hiddenFormList = this.getSelectValueObject(tempData);
+      this.formStatus = hiddenFormList;
+      // let ids = this.getSelectValueObject(tempData, true);
+      this.relationFormChange();
+
+      // const values = this.models[ids.model];
+      // let relationArray = [];
+      // ids.options &&
+      //   ids.options.options.forEach((item) => {
+      //     if (values == item.value) {
+      //       let tempRelation = item.relationOptions || [];
+      //       relationArray.push(...tempRelation);
+      //     }
+      //   });
+      // if (relationArray.length > 0) {
+      //   this.relationFormChange(relationArray);
+      // }
+    }
+
+    this.originRules = JSON.parse(JSON.stringify(this.rules));
+  },
+  // mounted() {
+  //   this.relationFormChange();
+  // },
+  methods: {
+    changeFormRulesRequired() {
+      const rules = this.rules || [];
+      for (let rule in rules) {
+        // 判断是否是子表单
+        if (rule.indexOf("subform") >= 0 && rule) {
+          // 子表单有多个
+          rules[rule].forEach((subItem) => {
+            for (let sub in subItem) {
+              subItem[sub].forEach((last) => {
+                last["required"] = false;
+              });
+            }
+          });
+        }
+      }
+      this.rules = rules;
+      this.$forceUpdate();
+    },
+    addSubformCol(item) {
+      var subformFields = {};
+      for (var c of item.columns) {
+        for (var l of c.list) {
+          if (l.options !== null && l.options !== undefined) {
+            subformFields[l.model] =
+              l.options.defaultValue !== undefined &&
+              l.options.defaultValue !== null
+                ? l.options.defaultValue
+                : "";
+          } else {
+            subformFields[l.model] = "";
+          }
+
+          if (this.rules[item.model] === undefined) {
+            this.rules[item.model] = [];
+          }
+          if (
+            this.rules[item.model][this.models[item.model].length] === undefined
+          ) {
+            this.rules[item.model][this.models[item.model].length] = {};
+          }
+          this.rules[item.model][this.models[item.model].length][l.model] = [
+            ...l.rules.map((item) => {
+              if (item.pattern) {
+                return { ...item, pattern: eval(item.pattern) };
+              } else {
+                if (this.fileCheck) {
+                  item.required = false;
+                }
+                return { ...item };
+              }
+            }),
+          ];
+        }
+      }
+      this.originRules = JSON.parse(JSON.stringify(this.rules));
+      // if(this.fileCheck) {
+      //   this.changeFormRulesRequired()
+      // }
+      this.models[item.model].push(subformFields);
+      this.models.status = 1;
+    },
+    getSelectValueObject(tpls, relationStatus) {
+      let tempList = tpls || [];
+      let status = false;
+      let relationId = "";
+      const relationList = []; // 关联的表单
+      tempList.forEach((list) => {
+        if (list.type == "select" && list.options.relationStatus) {
+          status = true;
+          relationId = list;
+          const relations = list.options.options || [];
+          relations.forEach((item) => {
+            if (item.relationOptions && item.relationOptions.length > 0) {
+              relationList.push(...item.relationOptions);
+            }
+          });
+        }
+      });
+      this.formRelationList = relationList.filter(function (item, index) {
+        return relationList.indexOf(item) === index; // 因为indexOf 只能查找到第一个
+      });
+      return relationStatus ? relationId : status;
+    },
+    // 处理是否需要校验
+    fileCheckRequired(state) {
+      this.fileCheck = state;
+    },
+    relationFormChange(value) {
+      // false 为显示,true 为隐藏
+      let temp = value || [];
+      let tempData = JSON.parse(JSON.stringify(this.templateData));
+
+      tempData.forEach((item) => {
+        if (this.formStatus) {
+          //   判断表单是否在关联列表里,如果在则隐藏
+          if (this.formRelationList.includes(item.model)) {
+            item.hidden = true;
+            this.fileCheckList[item.model] =
+              item.type == "subform" ? true : false;
+          }
+          //   判断是否是文本类型,一直默认显示
+          if (item.type == "text") {
+            item.hidden = false;
+          }
+        } else {
+          item.hidden = false;
+        }
+      });
+      this.templateData = tempData;
+      this.$forceUpdate();
+    },
+    async formInit(options) {
+      const _this = this;
+      options = options || [];
+      await new Promise(function (resolve) {
+        let tempData = JSON.parse(JSON.stringify(_this.templateData));
+        tempData.forEach((item) => {
+          if (_this.formStatus) {
+            if (options.includes(item.model)) {
+              item.hidden = true;
+              // 判断下拉选择框是否设置了关联
+              if (item.type == "select" && item.options.relationStatus) {
+                const selectOptions = item.options.options || [];
+                const relationOptions = [];
+                selectOptions.forEach((option) => {
+                  relationOptions.push(...option.relationOptions);
+                });
+                // 遍历子结点表单状态
+                _this.formChange([], relationOptions);
+                // return false;
+              }
+            }
+          } else {
+            item.hidden = false;
+          }
+          if (item.type == "subform") {
+            _this.fileCheckList[item.model] = item.hidden ? true : false;
+          }
+        });
+        _this.templateData = tempData;
+        _this.$forceUpdate();
+        resolve();
+      });
+    },
+    async formChange(value, options) {
+      // new Promise(function(resolve, reject) {)
+      console.log(value, options);
+      await this.formInit(options);
+      let tempData = JSON.parse(JSON.stringify(this.templateData));
+      tempData.forEach(async (item) => {
+        if (this.formStatus) {
+          if (value.includes(item.model)) {
+            item.hidden = false;
+          }
+        } else {
+          item.hidden = false;
+        }
+        // this.fileCheckList[item.model] = item.type == "subform" ? true : false;
+        if (item.type == "subform") {
+          this.fileCheckList[item.model] = item.hidden ? true : false;
+        }
+      });
+      this.templateData = tempData;
+      this.$forceUpdate();
+    },
+    relationFormChange() {
+      let tempData = JSON.parse(JSON.stringify(this.templateData));
+      tempData.forEach((item) => {
+        if (this.formStatus) {
+          //   判断表单是否在关联列表里,如果在则隐藏
+          if (this.formRelationList.includes(item.model)) {
+            item.hidden = true;
+            this.fileCheckList[item.model] =
+              item.type == "subform" ? true : false;
+          }
+          //   判断是否是文本类型,一直默认显示
+          if (item.type == "text") {
+            item.hidden = false;
+          }
+        } else {
+          item.hidden = false;
+        }
+      });
+      this.templateData = tempData;
+      this.$forceUpdate();
+    },
+    delSubformCol(item, index) {
+      this.models[item.model].splice(index, 1);
+      this.models.status = -1;
+    },
+    generateModle(genList) {
+      for (let i = 0; i < genList.length; i++) {
+        if (genList[i].type === "grid") {
+          genList[i].columns.forEach((item) => {
+            this.generateModle(item.list);
+          });
+        } else {
+          if (
+            this.value &&
+            Object.keys(this.value).indexOf(genList[i].model) >= 0
+          ) {
+            this.models[genList[i].model] = this.value[genList[i].model];
+          } else {
+            if (genList[i].type === "blank") {
+              this.$set(
+                this.models,
+                genList[i].model,
+                genList[i].options.defaultType === "String"
+                  ? ""
+                  : genList[i].options.defaultType === "Object"
+                  ? {}
+                  : []
+              );
+            }
+            if (genList[i].type === "subform") {
+              this.$set(this.models, genList[i].model, []);
+            } else {
+              this.models[genList[i].model] = genList[i].options.defaultValue;
+            }
+          }
+
+          if (!this.preview) {
+            if (this.rules[genList[i].model]) {
+              this.rules[genList[i].model] = [
+                ...this.rules[genList[i].model],
+                ...genList[i].rules.map((item) => {
+                  if (item.pattern) {
+                    return { ...item, pattern: eval(item.pattern) };
+                  } else {
+                    return { ...item };
+                  }
+                }),
+              ];
+            } else {
+              this.rules[genList[i].model] = [
+                ...genList[i].rules.map((item) => {
+                  if (item.pattern) {
+                    return { ...item, pattern: eval(item.pattern) };
+                  } else {
+                    return { ...item };
+                  }
+                }),
+              ];
+            }
+          }
+        }
+      }
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.$refs.generateForm.validate((valid) => {
+          if (valid) {
+            resolve(this.models);
+          } else {
+            reject(new Error("表单数据校验失败").message);
+          }
+        });
+      });
+    },
+    getDataNoValid() {
+      return this.models;
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
+    async onInputChange(value) {
+      if (!value || this.selectOrganId.includes(value)) {
+        return;
+      }
+      let res = await getOrganCooperation({ organId: value });
+      this.cooperationList.push(...res.data);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.table-subform td .cell {
+  padding-top: 10px;
+  padding-bottom: 15px;
+}
+</style>

+ 964 - 963
src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -1,963 +1,964 @@
-<template>
-  <el-form-item
-    v-if="showStatus && hidden"
-    :label-width="
-      isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
-    "
-    :label="
-      isLabel === false ||
-      widget.type === 'divider' ||
-      !widget.options.labelWidthStatus
-        ? ''
-        : widget.name
-    "
-    :prop="propValue"
-    :class="[parentForm, widget.type == 'text' && 'dataModelText']"
-    :style="subformIndex !== undefined ? { 'margin-bottom': '0' } : {}"
-  >
-    <template v-if="preview">
-      <template v-if="widget.type === 'color'">
-        <div
-          style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px"
-          :style="{ 'background-color': dataModel }"
-        />
-      </template>
-      <template v-else-if="widget.type == 'switch'">
-        <el-switch v-model="dataModel" :disabled="true" />
-      </template>
-      <template v-else-if="widget.type === 'editor'">
-        <div class="previewEditorDiv" v-html="dataModel" />
-      </template>
-
-      <template v-else-if="widget.type == 'file'">
-        <div
-          v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
-          :key="uploadUrlIndex"
-        >
-          <i style="color: #909399" class="el-icon-document" />
-          <span>{{ uploadUrlItem.name || uploadUrlItem.url }}</span>
-          <el-button
-            round
-            size="mini"
-            @click="onDownload(uploadUrlItem, 'download')"
-            >下载</el-button
-          >
-          <el-button
-            round
-            type="primary"
-            @click="onDownload(uploadUrlItem)"
-            v-if="
-              checkFileSuffix(uploadUrlItem.url) &&
-              !isCheckImage(uploadUrlItem.url)
-            "
-            size="mini"
-            >预览</el-button
-          >
-          <div
-            v-if="isCheckImage(uploadUrlItem.url)"
-            style="display: inline-flex; position: relative"
-          >
-            <el-button
-              style="position: absolute; left: 0; top: 0"
-              round
-              type="primary"
-              @click="onDownload(uploadUrlItem)"
-              v-if="checkFileSuffix(uploadUrlItem.url)"
-              size="mini"
-              >预览</el-button
-            >
-            <el-image
-              style="width: 56px; height: 28px; opacity: 0"
-              :src="uploadUrlItem.url"
-              :preview-src-list="[uploadUrlItem.url]"
-            >
-            </el-image>
-          </div>
-          <!-- <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name || uploadUrlItem.url }}</a> -->
-        </div>
-      </template>
-
-      <template v-else-if="widget.type == 'imgupload'">
-        <fm-upload
-          v-model="dataModel"
-          :style="{ width: widget.options.width }"
-          :width="widget.options.size.width"
-          :height="widget.options.size.height"
-          :preview="preview"
-        />
-      </template>
-      <template v-else-if="widget.type == 'rate'">
-        <el-rate
-          v-model="dataModel"
-          :max="widget.options.max"
-          :disabled="true"
-          :allow-half="widget.options.allowHalf"
-        />
-      </template>
-      <template v-else-if="widget.type === 'divider'">
-        <el-divider
-          :direction="widget.options.direction"
-          :content-position="widget.options.content_position"
-        >
-          <span
-            :style="{
-              'font-size': widget.options.font_size,
-              'font-family': widget.options.font_family,
-              'font-weight': widget.options.font_weight,
-              color: widget.options.font_color,
-            }"
-          >
-            {{ widget.options.defaultValue }}
-          </span>
-        </el-divider>
-      </template>
-      <template
-        v-else-if="widget.type === 'input' && widget.options.showPassword"
-      >
-        <input
-          :value="dataModel"
-          type="password"
-          style="border: none; background-color: #ffffff; color: #303133"
-          disabled="disabled"
-        />
-      </template>
-      <template v-else-if="widget.type === 'cascader'">
-        <el-cascader
-          v-model="dataModel"
-          class="preview-cascader-class"
-          :disabled="true"
-          :show-all-levels="widget.options.showAllLevels"
-          :options="
-            widget.options.remote
-              ? widget.options.remoteOptions
-              : widget.options.options
-          "
-        />
-      </template>
-      <template v-else-if="widget.type === 'textarea'">
-        <span v-html="dataFormatBr(dataModel)"></span>
-      </template>
-      <template v-else-if="widget.type === 'text'">
-        <span class="dataModelText">{{ dataModel }}</span>
-      </template>
-      <template v-else>
-        <div v-if="dataModel">
-          <template v-if="widget.type == 'organ' || widget.type == 'school'">
-            {{ dataModelStr }}
-          </template>
-          <template v-else>
-            {{ dataModel }}
-          </template>
-        </div>
-      </template>
-    </template>
-    <template v-else>
-      <template v-if="widget.type === 'input'">
-        <el-input
-          v-if="
-            widget.options.dataType === 'number' ||
-            widget.options.dataType === 'integer' ||
-            widget.options.dataType === 'float'
-          "
-          v-model="dataModel"
-          :type="widget.options.dataType"
-          @input="onInputChangeNumber($event)"
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          :disabled="widget.options.disabled"
-          :show-password="widget.options.showPassword"
-        />
-        <el-input
-          v-else
-          v-model="dataModel"
-          :type="widget.options.dataType"
-          :disabled="widget.options.disabled"
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          :show-password="widget.options.showPassword"
-        />
-      </template>
-
-      <template v-if="widget.type === 'textarea'">
-        <el-input
-          v-model="dataModel"
-          type="textarea"
-          :rows="5"
-          :disabled="widget.options.disabled"
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-        />
-      </template>
-
-      <template v-if="widget.type === 'number'">
-        <el-input-number
-          v-model="dataModel"
-          :style="{ width: widget.options.width }"
-          :step="widget.options.step"
-          controls-position="right"
-          :disabled="widget.options.disabled"
-        />
-      </template>
-
-      <template v-if="widget.type === 'radio'">
-        <el-radio-group
-          v-model="dataModel"
-          :style="{ width: widget.options.width }"
-          :disabled="widget.options.disabled"
-        >
-          <el-radio
-            v-for="(item, index) in widget.options.remote
-              ? widget.options.remoteOptions
-              : widget.options.options"
-            :key="index"
-            :style="{
-              display: widget.options.inline ? 'inline-block' : 'block',
-            }"
-            :label="item.value"
-          >
-            <template v-if="widget.options.remote">{{ item.label }}</template>
-            <template v-else>{{
-              widget.options.showLabel ? item.label : item.value
-            }}</template>
-          </el-radio>
-        </el-radio-group>
-      </template>
-
-      <template v-if="widget.type === 'checkbox'">
-        <el-checkbox-group
-          v-model="dataModel"
-          :style="{ width: widget.options.width }"
-          :disabled="widget.options.disabled"
-        >
-          <el-checkbox
-            v-for="(item, index) in widget.options.remote
-              ? widget.options.remoteOptions
-              : widget.options.options"
-            :key="index"
-            :style="{
-              display: widget.options.inline ? 'inline-block' : 'block',
-            }"
-            :label="item.value"
-          >
-            <template v-if="widget.options.remote">{{ item.label }}</template>
-            <template v-else>{{
-              widget.options.showLabel ? item.label : item.value
-            }}</template>
-          </el-checkbox>
-        </el-checkbox-group>
-      </template>
-
-      <template v-if="widget.type === 'time'">
-        <el-time-picker
-          v-model="dataModel"
-          :is-range="widget.options.isRange"
-          :placeholder="widget.options.placeholder"
-          :start-placeholder="widget.options.startPlaceholder"
-          :end-placeholder="widget.options.endPlaceholder"
-          :readonly="widget.options.readonly"
-          :disabled="widget.options.disabled"
-          :editable="widget.options.editable"
-          :clearable="widget.options.clearable"
-          :arrow-control="widget.options.arrowControl"
-          :value-format="widget.options.format"
-          :style="{ width: widget.options.width }"
-        />
-      </template>
-
-      <template v-if="widget.type == 'date'">
-        <el-date-picker
-          v-model="dataModel"
-          :type="widget.options.type"
-          :placeholder="widget.options.placeholder"
-          :start-placeholder="widget.options.startPlaceholder"
-          :end-placeholder="widget.options.endPlaceholder"
-          :readonly="widget.options.readonly"
-          :disabled="widget.options.disabled"
-          :editable="widget.options.editable"
-          :clearable="widget.options.clearable"
-          :value-format="
-            widget.options.timestamp ? 'timestamp' : widget.options.format
-          "
-          :format="widget.options.format"
-          :style="{ width: widget.options.width }"
-        />
-      </template>
-
-      <template v-if="widget.type == 'rate'">
-        <el-rate
-          v-model="dataModel"
-          :max="widget.options.max"
-          :disabled="widget.options.disabled"
-          :allow-half="widget.options.allowHalf"
-        />
-      </template>
-
-      <template v-if="widget.type === 'color'">
-        <el-color-picker
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :show-alpha="widget.options.showAlpha"
-        />
-      </template>
-
-      <template v-if="widget.type === 'select'">
-        <el-select
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :multiple="widget.options.multiple"
-          :clearable="widget.options.clearable"
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          filterable
-          @change="onChangeSelect"
-        >
-          <el-option
-            v-for="item in widget.options.remote
-              ? widget.options.remoteOptions
-              : widget.options.options"
-            :key="item.value"
-            :value="item.value"
-            :label="
-              widget.options.showLabel || widget.options.remote
-                ? item.label
-                : item.value
-            "
-          />
-        </el-select>
-      </template>
-
-      <template v-if="widget.type === 'organ'">
-        <el-select
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :multiple="widget.options.multiple"
-          clearable
-          filterable
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          :name="widget.model"
-        >
-          <el-option
-            v-for="item in organList"
-            :key="item.id"
-            :value="item.id"
-            :label="item.name"
-          />
-        </el-select>
-      </template>
-
-      <template v-if="widget.type === 'school'">
-        <el-select
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :multiple="widget.options.multiple"
-          clearable
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          filterable
-          :loading="selectLoading"
-          @visible-change="onGetSchoolList"
-        >
-          <el-option
-            v-for="item in cooperationList"
-            :key="item.id"
-            :value="item.id"
-            :label="item.name"
-          />
-        </el-select>
-      </template>
-
-      <template v-if="widget.type == 'switch'">
-        <el-switch v-model="dataModel" :disabled="widget.options.disabled" />
-      </template>
-
-      <template v-if="widget.type == 'slider'">
-        <el-slider
-          v-model="dataModel"
-          :min="widget.options.min"
-          :max="widget.options.max"
-          :disabled="widget.options.disabled"
-          :step="widget.options.step"
-          :show-input="widget.options.showInput"
-          :range="widget.options.range"
-          :style="{ width: widget.options.width }"
-        />
-      </template>
-
-      <template v-if="widget.type == 'imgupload'">
-        <fm-upload
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :style="{ width: widget.options.width }"
-          :width="widget.options.size.width"
-          :height="widget.options.size.height"
-          :token="widget.options.token"
-          :domain="widget.options.domain"
-          :multiple="widget.options.multiple"
-          :length="widget.options.length"
-          :is-qiniu="widget.options.isQiniu"
-          :is-delete="widget.options.isDelete"
-          :min="widget.options.min"
-          :is-edit="widget.options.isEdit"
-          :action="widget.options.action"
-        />
-      </template>
-
-      <template v-if="widget.type == 'file'">
-        <FileUpload
-          :element="widget"
-          :data-model="dataModel"
-          @fileList="fileList"
-        />
-      </template>
-
-      <template v-if="widget.type === 'editor'">
-        <vue-editor
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :style="{ width: widget.options.width }"
-        />
-      </template>
-
-      <template v-if="widget.type === 'cascader'">
-        <el-cascader
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-          :show-all-levels="widget.options.showAllLevels"
-          :clearable="widget.options.clearable"
-          :placeholder="widget.options.placeholder"
-          :style="{ width: widget.options.width }"
-          :options="
-            widget.options.remote
-              ? widget.options.remoteOptions
-              : widget.options.options
-          "
-        />
-      </template>
-
-      <template v-if="widget.type === 'text'">
-        <!-- color: widget.options.font_color, -->
-        <span
-          :style="{
-            'font-size': widget.options.font_size,
-            'font-family': widget.options.font_family,
-            'font-weight': widget.options.font_weight,
-          }"
-          class="dataModelText"
-        >
-          {{ widget.options.defaultValue }}
-        </span>
-      </template>
-
-      <template v-if="widget.type === 'divider'">
-        <el-divider
-          :direction="widget.options.direction"
-          :content-position="widget.options.content_position"
-        >
-          <span
-            :style="{
-              'font-size': widget.options.font_size,
-              'font-family': widget.options.font_family,
-              'font-weight': widget.options.font_weight,
-              color: widget.options.font_color,
-            }"
-          >
-            {{ widget.options.defaultValue }}
-          </span>
-        </el-divider>
-      </template>
-    </template>
-
-    <el-drawer :title="'预览'" direction="rtl" :visible.sync="open" size="50%">
-      <div>
-        <iframe :src="previewUrl"></iframe>
-        <div style="text-align: center">
-          <el-button type="primary" @click="open = false">确定</el-button>
-        </div>
-      </div>
-    </el-drawer>
-  </el-form-item>
-</template>
-
-<script>
-import XLSX from "xlsx";
-import FmUpload from "./Upload";
-import FileUpload from "./Upload/file";
-import { getOrganCooperation } from "@/api/process/work-order";
-export default {
-  name: "GenetateFormItem",
-  components: {
-    FmUpload,
-    FileUpload,
-  },
-  /* eslint-disable */
-  props: [
-    "widget",
-    "models",
-    "propValue",
-    "parentForm",
-    "remote",
-    "data",
-    "disabled",
-    "preview",
-    "isLabel",
-    "subformIndex",
-    "subformModel",
-    "organList",
-  ],
-  data() {
-    return {
-      open: false,
-      showStatus: true,
-      widgetLabelWidth: "",
-      dataModel:
-        this.subformIndex === undefined
-          ? this.models[this.widget.model]
-          : this.models[this.subformModel][this.subformIndex][
-              this.widget.model
-            ],
-      dataModelStr: null,
-      tableData: [],
-      cooperationList: [],
-      selectLoading: true,
-      previewUrl: "",
-    };
-  },
-  computed: {
-    hidden() {
-      console.log(this.subformModel, this.widget.hidden);
-      return this.subformModel ? true : !this.widget.hidden;
-    },
-  },
-  watch: {
-    dataModel: {
-      deep: true,
-      handler(newValue) {
-        // console.log(newValue, 'model', this.widget.model)
-        if (newValue !== undefined && newValue !== null) {
-          if (this.subformIndex !== undefined) {
-            this.models[this.subformModel][this.subformIndex][
-              this.widget.model
-            ] = newValue;
-            this.$emit("update:models", {
-              ...this.models,
-              [this.subformModel]: this.models[this.subformModel],
-            });
-            // this.$emit('input-change', val, this.widget.model, this.subformIndex)
-          } else {
-            this.models[this.widget.model] = newValue;
-            this.$emit("update:models", {
-              ...this.models,
-              [this.widget.model]: newValue,
-            });
-            // this.$emit('input-change', val, this.widget.model)
-          }
-        }
-      },
-    },
-    models: {
-      deep: true,
-      async handler(val) {
-        // console.log(val, 'show')
-        if (val.status === undefined && val.status === null) {
-          if (this.subformIndex === undefined) {
-            this.dataModel = val[this.widget.model];
-          } else {
-            this.dataModel =
-              val[this.subformModel][this.subformIndex][this.widget.model];
-          }
-        }
-        delete this.models.status;
-        this.handleDisplayVerifiy();
-      },
-    },
-    cooperationList: {
-      deep: true,
-      handler(val) {
-        if (this.widget.type == "school" && this.preview) {
-          let tempStr = null;
-          val.forEach((item) => {
-            if (item.id == this.dataModel) {
-              tempStr = item.name;
-            }
-          });
-          this.dataModelStr = tempStr;
-        }
-      },
-    },
-  },
-  created() {
-    // 判断当前元素是否是分部表单()
-    // console.log(this.widget, 'widget subform')
-    if (this.widget.type == "organ" && this.preview) {
-      let tempStr = null;
-      this.organList.forEach((item) => {
-        if (item.id == this.dataModel) {
-          tempStr = item.name;
-        }
-      });
-      this.dataModelStr = tempStr;
-    }
-    // 学校信息
-    if (this.widget.type == "school" && this.preview) {
-      this.onGetSchoolList(true);
-      //   let tempStr = null
-      //   this.cooperationList.forEach(item => {
-      //     if(item.id == this.dataModel) {
-      //       tempStr = item.name
-      //     }
-      //   });
-      //   // this.dataModel = tempStr
-    }
-
-    if (
-      this.widget.options.remote &&
-      this.remote[this.widget.options.remoteFunc]
-    ) {
-      this.remote[this.widget.options.remoteFunc]((data) => {
-        this.widget.options.remoteOptions = data.map((item) => {
-          return {
-            value: item[this.widget.options.props.value],
-            label: item[this.widget.options.props.label],
-            children: item[this.widget.options.props.children],
-          };
-        });
-      });
-    }
-
-    if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
-      this.remote[this.widget.options.tokenFunc]((data) => {
-        this.widget.options.token = data;
-      });
-    }
-
-    if (this.disabled !== undefined && this.disabled !== null) {
-      this.widget.options.disabled = this.disabled;
-    }
-
-    // label width
-    if (this.widget.options.labelWidthDisabled) {
-      this.widgetLabelWidth = this.widget.options.labelWidth;
-    } else if (this.widget.type === "divider") {
-      this.widgetLabelWidth = 0;
-    } else {
-      this.widgetLabelWidth = 150;
-    }
-
-    this.handleDisplayVerifiy();
-  },
-  mounted() {
-    // console.log(this.widget, "12121", this.dataModel);
-    if (this.widget.type == "select" && this.widget.options.relationStatus) {
-      console.log(true, "false");
-      this.onChangeSelect();
-    }
-  },
-  methods: {
-    isCheckImage(file) {
-      const urlArr = file.split(".");
-      const suffix = urlArr[urlArr.length - 1];
-      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
-      console.log(imgSuffix.includes(suffix), "11");
-      return imgSuffix.includes(suffix);
-    },
-    // 获取学校列表
-    onDownload(item, type) {
-      if (type == "download") {
-        window.location.href = item.url;
-        return;
-      }
-
-      let urlArr = item.url.split(".");
-      let suffix = urlArr[urlArr.length - 1];
-      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
-      if (imgSuffix.includes(suffix)) {
-      } else if (suffix != "pdf") {
-        this.previewUrl =
-          "https://view.officeapps.live.com/op/view.aspx?src=" + item.url;
-        window.open(this.previewUrl);
-        return;
-      } else {
-        this.previewUrl =
-          this.validManageUrl() + "/pdf/web/viewer.html?file=" + item.url;
-        window.open(this.previewUrl);
-        return;
-      }
-    },
-    // 教务地址
-    validManageUrl() {
-      let url = window.location.href;
-      let returnUrl = "";
-      if (/dev/.test(url)) {
-        // dev 环境
-        returnUrl = "http://mandev.dayaedu.com";
-      } else if (/test/.test(url)) {
-        // dev 环境
-        returnUrl = "http://mantest.dayaedu.com";
-      } else if (/online/.test(url)) {
-        //线上
-        returnUrl = "https://manonline.dayaedu.com";
-      } else {
-        // 默认dev环境
-        returnUrl = "http://mandev.dayaedu.com";
-      }
-      return returnUrl;
-    },
-    readWorkbookFromRemoteFile: function (url) {
-      var xhr = new XMLHttpRequest();
-      xhr.open("get", url, true);
-      xhr.responseType = "arraybuffer";
-      let _this = this;
-      xhr.onload = function (e) {
-        var binary = "";
-        console.log(xhr);
-        if (xhr.status === 200) {
-          var bytes = new Uint8Array(xhr.response);
-          var length = bytes.byteLength;
-          for (var i = 0; i < length; i++) {
-            binary += String.fromCharCode(bytes[i]);
-          }
-          var wb = XLSX.read(binary, { type: "binary" });
-          var wsname = wb.SheetNames[0];
-          var ws = wb.Sheets[wsname];
-          console.log(ws);
-          var HTML = XLSX.utils.sheet_to_html(ws);
-          if (_this.$refs.preview) {
-            _this.$refs.preview.innerHTML = HTML;
-          }
-        }
-      };
-      xhr.send();
-    },
-    getData() {
-      let that = this;
-      let element = that.$refs.preview;
-      // Transform(element);
-      var initScale = 1;
-      this.af = new AlloyFinger(element, {
-        // rotate: function (evt) {  //实现旋转
-        //   element.rotateZ += evt.angle;
-        // },
-        multipointStart: function () {
-          initScale = element.scaleX;
-        },
-        pinch: function (evt) {
-          //实现缩放
-          element.scaleX = element.scaleY = initScale * evt.zoom;
-        },
-        pressMove: function (evt) {
-          //实现移动
-          element.translateX += evt.deltaX;
-          element.translateY += evt.deltaY;
-          evt.preventDefault();
-        },
-      });
-    },
-    checkFileSuffix(url) {
-      let urlArr = url.split(".");
-      let suffix = urlArr[urlArr.length - 1];
-      const passSuffix = [
-        "xlsx",
-        "xls",
-        "pdf",
-        "png",
-        "jpg",
-        "jpeg",
-        "gif",
-        "ico",
-      ];
-      if (passSuffix.includes(suffix)) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    // select 选择时触发
-    onChangeSelect() {
-      let relationArray = [];
-      // console.log(this.widget.options.options)
-      let allArray = [];
-      this.widget.options &&
-        this.widget.options.options.forEach((item) => {
-          // 判断是否是多选
-          let tempRelation = item.relationOptions || [];
-          allArray.push(...tempRelation);
-          if (this.widget.options.multiple) {
-            if (this.dataModel.includes(item.value)) {
-              relationArray.push(...tempRelation);
-            }
-          } else {
-            if (this.dataModel == item.value) {
-              let tempRelation = item.relationOptions || [];
-              relationArray.push(...tempRelation);
-            }
-          }
-        });
-      console.log(relationArray, "111", this.dataModel, this.widget.options);
-      // if (relationArray.length > 0) {
-      this.$emit("relationFormChange", relationArray, allArray);
-      // }
-
-      // this.dataModel = this.selectValue.join(",");
-      // this.showSelect = false;
-      // let relationArray = [];
-      // let allArray = [];
-      // this.options?.options?.forEach((item) => {
-      //   let tempRelation = item.relationOptions || [];
-      //   allArray.push(...tempRelation);
-      //   if (this.selectValue.includes(item.value)) {
-      //     relationArray.push(...tempRelation);
-      //   }
-      // });
-      // let uniqueArr = [...new Set(relationArray)];
-      // this.$emit("relationFormChange", uniqueArr, allArray);
-    },
-    fileCheckRequired(state) {
-      this.$emit("fileCheckRequired", state);
-    },
-    async onGetSchoolList(val) {
-      // 隐藏的时候的不获取数据,
-      // 为什么每次都需要请求,因为我没有判断分部数据是否有修改
-      if (!val) {
-        return;
-      }
-      let organId = null;
-      this.selectLoading = true;
-      if (this.subformModel) {
-        organId =
-          this.models[this.subformModel][this.subformIndex][
-            this.widget.options.displayRelation
-          ];
-      } else {
-        organId = this.models[this.widget.options.displayRelation];
-      }
-      // // 判断是否有选择分部 判断列表已经有数据了
-      if (organId) {
-        let res = await getOrganCooperation({ organId });
-        this.cooperationList = [...res.data];
-      }
-      this.selectLoading = false;
-    },
-    // 处理用户输入的值 input框
-    onInputChangeNumber(event) {
-      // 不用处理string类型的
-      // console.log(event, this.widget.options)
-      const type = this.widget.options.dataType;
-      if (type == "number" || type == "integer") {
-        this.onVerifiyNumberInteger(event);
-      } else if (type == "float") {
-        this.verifyNumberIntegerAndFloat(event);
-      }
-    },
-    verifyNumberIntegerAndFloat(val) {
-      // val = this.ruleForm.test;
-      const t = val.charAt(0);
-      // 匹配空格
-      // console.log(val)
-      let v = val.replace(/(^\s*)|(\s*$)/g, "");
-      // 只能是数字和小数点,不能是其他输入
-      v = v.replace(/[^\d.]/g, "");
-      // 以0开始只能输入一个
-      v = v.replace(/^0{2}$/g, "0");
-      // 保证第一位只能是数字,不能是点
-      v = v.replace(/^\./g, "");
-      // 小数只能出现1位
-      v = v.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
-      // 小数点后面保留2位
-      v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
-      if (t == "-") {
-        v = "-" + v;
-      }
-      // 返回结果
-      this.dataModel = v;
-    },
-    onVerifiyNumberInteger(val) {
-      const t = val.charAt(0);
-      // 匹配空格
-      let v = val.replace(/(^\s*)|(\s*$)/g, "");
-      // 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
-      v = v.replace(/[\.]*/g, "");
-      // 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
-      v = v.replace(/(^0[\d]*)$/g, "0");
-      // 首位是0,只能出现一次
-      v = v.replace(/^0\d$/g, "0");
-      // 只匹配数字
-      v = v.replace(/[^\d]/g, "");
-      if (t == "-") {
-        v = "-" + v;
-      }
-      // 返回结果
-      this.dataModel = v;
-    },
-    fileList(files) {
-      // 只处理乐团退费
-      const query = this.$route.query;
-      if (query.processId == 19) {
-        if (files && files.length > 0) {
-          this.$emit("fileCheckRequired", true);
-        } else {
-          this.$emit("fileCheckRequired", false);
-        }
-      } else {
-        this.$emit("fileCheckRequired", false);
-      }
-      this.dataModel = files;
-    },
-    handleDisplayVerifiy() {
-      if (Object.keys(this.widget.options).indexOf("displayVerifiy") >= 0) {
-        if (this.widget.options.displayVerifiy.type !== "hide") {
-          var c = 0;
-          for (var v of this.widget.options.displayVerifiy.list) {
-            if (this.models[v.model].toString() === v.value) {
-              c++;
-            }
-          }
-          if (this.widget.options.displayVerifiy.type === "and") {
-            if (c !== this.widget.options.displayVerifiy.list.length) {
-              this.showStatus = false;
-            } else {
-              this.showStatus = true;
-            }
-          } else if (this.widget.options.displayVerifiy.type === "or") {
-            if (c === 0) {
-              this.showStatus = false;
-            } else {
-              this.showStatus = true;
-            }
-          }
-        }
-      }
-    },
-    dataFormatBr(str) {
-      return str ? str.replace(/\n/gi, "<br />") : str;
-    },
-  },
-};
-</script>
-
-<style>
-.previewEditorDiv > p {
-  margin: 0;
-}
-
-.preview-cascader-class .el-input.is-disabled .el-input__inner {
-  background-color: #fff;
-  border: none;
-  color: #303133;
-}
-
-.preview-cascader-class
-  .el-input.is-disabled
-  .el-input__suffix
-  .el-input__suffix-inner
-  .el-input__icon.el-icon-arrow-down:before {
-  content: "";
-}
-
-.dataModelText {
-  color: #e7af84;
-}
-.dataModelText .el-form-item__label {
-  color: #e7af84 !important;
-}
-</style>
+<template>
+  <el-form-item
+    v-if="showStatus && hidden"
+    :label-width="
+      isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
+    "
+    :label="
+      isLabel === false ||
+      widget.type === 'divider' ||
+      !widget.options.labelWidthStatus
+        ? ''
+        : widget.name
+    "
+    :key="propValue"
+    :prop="propValue"
+    :class="[parentForm, widget.type == 'text' && 'dataModelText']"
+    :style="subformIndex !== undefined ? { 'margin-bottom': '0' } : {}"
+  >
+    <template v-if="preview">
+      <template v-if="widget.type === 'color'">
+        <div
+          style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px"
+          :style="{ 'background-color': dataModel }"
+        />
+      </template>
+      <template v-else-if="widget.type == 'switch'">
+        <el-switch v-model="dataModel" :disabled="true" />
+      </template>
+      <template v-else-if="widget.type === 'editor'">
+        <div class="previewEditorDiv" v-html="dataModel" />
+      </template>
+
+      <template v-else-if="widget.type == 'file'">
+        <div
+          v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
+          :key="uploadUrlIndex"
+        >
+          <i style="color: #909399" class="el-icon-document" />
+          <span>{{ uploadUrlItem.name || uploadUrlItem.url }}</span>
+          <el-button
+            round
+            size="mini"
+            @click="onDownload(uploadUrlItem, 'download')"
+            >下载</el-button
+          >
+          <el-button
+            round
+            type="primary"
+            @click="onDownload(uploadUrlItem)"
+            v-if="
+              checkFileSuffix(uploadUrlItem.url) &&
+              !isCheckImage(uploadUrlItem.url)
+            "
+            size="mini"
+            >预览</el-button
+          >
+          <div
+            v-if="isCheckImage(uploadUrlItem.url)"
+            style="display: inline-flex; position: relative"
+          >
+            <el-button
+              style="position: absolute; left: 0; top: 0"
+              round
+              type="primary"
+              @click="onDownload(uploadUrlItem)"
+              v-if="checkFileSuffix(uploadUrlItem.url)"
+              size="mini"
+              >预览</el-button
+            >
+            <el-image
+              style="width: 56px; height: 28px; opacity: 0"
+              :src="uploadUrlItem.url"
+              :preview-src-list="[uploadUrlItem.url]"
+            >
+            </el-image>
+          </div>
+          <!-- <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name || uploadUrlItem.url }}</a> -->
+        </div>
+      </template>
+
+      <template v-else-if="widget.type == 'imgupload'">
+        <fm-upload
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :width="widget.options.size.width"
+          :height="widget.options.size.height"
+          :preview="preview"
+        />
+      </template>
+      <template v-else-if="widget.type == 'rate'">
+        <el-rate
+          v-model="dataModel"
+          :max="widget.options.max"
+          :disabled="true"
+          :allow-half="widget.options.allowHalf"
+        />
+      </template>
+      <template v-else-if="widget.type === 'divider'">
+        <el-divider
+          :direction="widget.options.direction"
+          :content-position="widget.options.content_position"
+        >
+          <span
+            :style="{
+              'font-size': widget.options.font_size,
+              'font-family': widget.options.font_family,
+              'font-weight': widget.options.font_weight,
+              color: widget.options.font_color,
+            }"
+          >
+            {{ widget.options.defaultValue }}
+          </span>
+        </el-divider>
+      </template>
+      <template
+        v-else-if="widget.type === 'input' && widget.options.showPassword"
+      >
+        <input
+          :value="dataModel"
+          type="password"
+          style="border: none; background-color: #ffffff; color: #303133"
+          disabled="disabled"
+        />
+      </template>
+      <template v-else-if="widget.type === 'cascader'">
+        <el-cascader
+          v-model="dataModel"
+          class="preview-cascader-class"
+          :disabled="true"
+          :show-all-levels="widget.options.showAllLevels"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
+        />
+      </template>
+      <template v-else-if="widget.type === 'textarea'">
+        <span v-html="dataFormatBr(dataModel)"></span>
+      </template>
+      <template v-else-if="widget.type === 'text'">
+        <span class="dataModelText">{{ dataModel }}</span>
+      </template>
+      <template v-else>
+        <div v-if="dataModel">
+          <template v-if="widget.type == 'organ' || widget.type == 'school'">
+            {{ dataModelStr }}
+          </template>
+          <template v-else>
+            {{ dataModel }}
+          </template>
+        </div>
+      </template>
+    </template>
+    <template v-else>
+      <template v-if="widget.type === 'input'">
+        <el-input
+          v-if="
+            widget.options.dataType === 'number' ||
+            widget.options.dataType === 'integer' ||
+            widget.options.dataType === 'float'
+          "
+          v-model="dataModel"
+          :type="widget.options.dataType"
+          @input="onInputChangeNumber($event)"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+          :show-password="widget.options.showPassword"
+        />
+        <el-input
+          v-else
+          v-model="dataModel"
+          :type="widget.options.dataType"
+          :disabled="widget.options.disabled"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :show-password="widget.options.showPassword"
+        />
+      </template>
+
+      <template v-if="widget.type === 'textarea'">
+        <el-input
+          v-model="dataModel"
+          type="textarea"
+          :rows="5"
+          :disabled="widget.options.disabled"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+        />
+      </template>
+
+      <template v-if="widget.type === 'number'">
+        <el-input-number
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :step="widget.options.step"
+          controls-position="right"
+          :disabled="widget.options.disabled"
+        />
+      </template>
+
+      <template v-if="widget.type === 'radio'">
+        <el-radio-group
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+        >
+          <el-radio
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block',
+            }"
+            :label="item.value"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-radio>
+        </el-radio-group>
+      </template>
+
+      <template v-if="widget.type === 'checkbox'">
+        <el-checkbox-group
+          v-model="dataModel"
+          :style="{ width: widget.options.width }"
+          :disabled="widget.options.disabled"
+        >
+          <el-checkbox
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block',
+            }"
+            :label="item.value"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-checkbox>
+        </el-checkbox-group>
+      </template>
+
+      <template v-if="widget.type === 'time'">
+        <el-time-picker
+          v-model="dataModel"
+          :is-range="widget.options.isRange"
+          :placeholder="widget.options.placeholder"
+          :start-placeholder="widget.options.startPlaceholder"
+          :end-placeholder="widget.options.endPlaceholder"
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :arrow-control="widget.options.arrowControl"
+          :value-format="widget.options.format"
+          :style="{ width: widget.options.width }"
+        />
+      </template>
+
+      <template v-if="widget.type == 'date'">
+        <el-date-picker
+          v-model="dataModel"
+          :type="widget.options.type"
+          :placeholder="widget.options.placeholder"
+          :start-placeholder="widget.options.startPlaceholder"
+          :end-placeholder="widget.options.endPlaceholder"
+          :readonly="widget.options.readonly"
+          :disabled="widget.options.disabled"
+          :editable="widget.options.editable"
+          :clearable="widget.options.clearable"
+          :value-format="
+            widget.options.timestamp ? 'timestamp' : widget.options.format
+          "
+          :format="widget.options.format"
+          :style="{ width: widget.options.width }"
+        />
+      </template>
+
+      <template v-if="widget.type == 'rate'">
+        <el-rate
+          v-model="dataModel"
+          :max="widget.options.max"
+          :disabled="widget.options.disabled"
+          :allow-half="widget.options.allowHalf"
+        />
+      </template>
+
+      <template v-if="widget.type === 'color'">
+        <el-color-picker
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :show-alpha="widget.options.showAlpha"
+        />
+      </template>
+
+      <template v-if="widget.type === 'select'">
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          :clearable="widget.options.clearable"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          filterable
+          @change="onChangeSelect"
+        >
+          <el-option
+            v-for="item in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="item.value"
+            :value="item.value"
+            :label="
+              widget.options.showLabel || widget.options.remote
+                ? item.label
+                : item.value
+            "
+          />
+        </el-select>
+      </template>
+
+      <template v-if="widget.type === 'organ'">
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          clearable
+          filterable
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :name="widget.model"
+        >
+          <el-option
+            v-for="item in organList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
+        </el-select>
+      </template>
+
+      <template v-if="widget.type === 'school'">
+        <el-select
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :multiple="widget.options.multiple"
+          clearable
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          filterable
+          :loading="selectLoading"
+          @visible-change="onGetSchoolList"
+        >
+          <el-option
+            v-for="item in cooperationList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
+        </el-select>
+      </template>
+
+      <template v-if="widget.type == 'switch'">
+        <el-switch v-model="dataModel" :disabled="widget.options.disabled" />
+      </template>
+
+      <template v-if="widget.type == 'slider'">
+        <el-slider
+          v-model="dataModel"
+          :min="widget.options.min"
+          :max="widget.options.max"
+          :disabled="widget.options.disabled"
+          :step="widget.options.step"
+          :show-input="widget.options.showInput"
+          :range="widget.options.range"
+          :style="{ width: widget.options.width }"
+        />
+      </template>
+
+      <template v-if="widget.type == 'imgupload'">
+        <fm-upload
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :style="{ width: widget.options.width }"
+          :width="widget.options.size.width"
+          :height="widget.options.size.height"
+          :token="widget.options.token"
+          :domain="widget.options.domain"
+          :multiple="widget.options.multiple"
+          :length="widget.options.length"
+          :is-qiniu="widget.options.isQiniu"
+          :is-delete="widget.options.isDelete"
+          :min="widget.options.min"
+          :is-edit="widget.options.isEdit"
+          :action="widget.options.action"
+        />
+      </template>
+
+      <template v-if="widget.type == 'file'">
+        <FileUpload
+          :element="widget"
+          :data-model="dataModel"
+          @fileList="fileList"
+        />
+      </template>
+
+      <template v-if="widget.type === 'editor'">
+        <vue-editor
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :style="{ width: widget.options.width }"
+        />
+      </template>
+
+      <template v-if="widget.type === 'cascader'">
+        <el-cascader
+          v-model="dataModel"
+          :disabled="widget.options.disabled"
+          :show-all-levels="widget.options.showAllLevels"
+          :clearable="widget.options.clearable"
+          :placeholder="widget.options.placeholder"
+          :style="{ width: widget.options.width }"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
+        />
+      </template>
+
+      <template v-if="widget.type === 'text'">
+        <!-- color: widget.options.font_color, -->
+        <span
+          :style="{
+            'font-size': widget.options.font_size,
+            'font-family': widget.options.font_family,
+            'font-weight': widget.options.font_weight,
+          }"
+          class="dataModelText"
+        >
+          {{ widget.options.defaultValue }}
+        </span>
+      </template>
+
+      <template v-if="widget.type === 'divider'">
+        <el-divider
+          :direction="widget.options.direction"
+          :content-position="widget.options.content_position"
+        >
+          <span
+            :style="{
+              'font-size': widget.options.font_size,
+              'font-family': widget.options.font_family,
+              'font-weight': widget.options.font_weight,
+              color: widget.options.font_color,
+            }"
+          >
+            {{ widget.options.defaultValue }}
+          </span>
+        </el-divider>
+      </template>
+    </template>
+
+    <el-drawer :title="'预览'" direction="rtl" :visible.sync="open" size="50%">
+      <div>
+        <iframe :src="previewUrl"></iframe>
+        <div style="text-align: center">
+          <el-button type="primary" @click="open = false">确定</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </el-form-item>
+</template>
+
+<script>
+import XLSX from "xlsx";
+import FmUpload from "./Upload";
+import FileUpload from "./Upload/file";
+import { getOrganCooperation } from "@/api/process/work-order";
+export default {
+  name: "GenetateFormItem",
+  components: {
+    FmUpload,
+    FileUpload,
+  },
+  /* eslint-disable */
+  props: [
+    "widget",
+    "models",
+    "propValue",
+    "parentForm",
+    "remote",
+    "data",
+    "disabled",
+    "preview",
+    "isLabel",
+    "subformIndex",
+    "subformModel",
+    "organList",
+  ],
+  data() {
+    return {
+      open: false,
+      showStatus: true,
+      widgetLabelWidth: "",
+      dataModel:
+        this.subformIndex === undefined
+          ? this.models[this.widget.model]
+          : this.models[this.subformModel][this.subformIndex][
+              this.widget.model
+            ],
+      dataModelStr: null,
+      tableData: [],
+      cooperationList: [],
+      selectLoading: true,
+      previewUrl: "",
+    };
+  },
+  computed: {
+    hidden() {
+      console.log(this.subformModel, this.widget.hidden);
+      return this.subformModel ? true : !this.widget.hidden;
+    },
+  },
+  watch: {
+    dataModel: {
+      deep: true,
+      handler(newValue) {
+        // console.log(newValue, 'model', this.widget.model)
+        if (newValue !== undefined && newValue !== null) {
+          if (this.subformIndex !== undefined) {
+            this.models[this.subformModel][this.subformIndex][
+              this.widget.model
+            ] = newValue;
+            this.$emit("update:models", {
+              ...this.models,
+              [this.subformModel]: this.models[this.subformModel],
+            });
+            // this.$emit('input-change', val, this.widget.model, this.subformIndex)
+          } else {
+            this.models[this.widget.model] = newValue;
+            this.$emit("update:models", {
+              ...this.models,
+              [this.widget.model]: newValue,
+            });
+            // this.$emit('input-change', val, this.widget.model)
+          }
+        }
+      },
+    },
+    models: {
+      deep: true,
+      async handler(val) {
+        // console.log(val, 'show')
+        if (val.status === undefined && val.status === null) {
+          if (this.subformIndex === undefined) {
+            this.dataModel = val[this.widget.model];
+          } else {
+            this.dataModel =
+              val[this.subformModel][this.subformIndex][this.widget.model];
+          }
+        }
+        delete this.models.status;
+        this.handleDisplayVerifiy();
+      },
+    },
+    cooperationList: {
+      deep: true,
+      handler(val) {
+        if (this.widget.type == "school" && this.preview) {
+          let tempStr = null;
+          val.forEach((item) => {
+            if (item.id == this.dataModel) {
+              tempStr = item.name;
+            }
+          });
+          this.dataModelStr = tempStr;
+        }
+      },
+    },
+  },
+  created() {
+    // 判断当前元素是否是分部表单()
+    // console.log(this.widget, 'widget subform')
+    if (this.widget.type == "organ" && this.preview) {
+      let tempStr = null;
+      this.organList.forEach((item) => {
+        if (item.id == this.dataModel) {
+          tempStr = item.name;
+        }
+      });
+      this.dataModelStr = tempStr;
+    }
+    // 学校信息
+    if (this.widget.type == "school") {
+      this.onGetSchoolList(true);
+      //   let tempStr = null
+      //   this.cooperationList.forEach(item => {
+      //     if(item.id == this.dataModel) {
+      //       tempStr = item.name
+      //     }
+      //   });
+      //   // this.dataModel = tempStr
+    }
+
+    if (
+      this.widget.options.remote &&
+      this.remote[this.widget.options.remoteFunc]
+    ) {
+      this.remote[this.widget.options.remoteFunc]((data) => {
+        this.widget.options.remoteOptions = data.map((item) => {
+          return {
+            value: item[this.widget.options.props.value],
+            label: item[this.widget.options.props.label],
+            children: item[this.widget.options.props.children],
+          };
+        });
+      });
+    }
+
+    if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
+      this.remote[this.widget.options.tokenFunc]((data) => {
+        this.widget.options.token = data;
+      });
+    }
+
+    if (this.disabled !== undefined && this.disabled !== null) {
+      this.widget.options.disabled = this.disabled;
+    }
+
+    // label width
+    if (this.widget.options.labelWidthDisabled) {
+      this.widgetLabelWidth = this.widget.options.labelWidth;
+    } else if (this.widget.type === "divider") {
+      this.widgetLabelWidth = 0;
+    } else {
+      this.widgetLabelWidth = 150;
+    }
+
+    this.handleDisplayVerifiy();
+  },
+  mounted() {
+    // console.log(this.widget, "12121", this.dataModel);
+    if (this.widget.type == "select" && this.widget.options.relationStatus) {
+      console.log(true, "false");
+      this.onChangeSelect();
+    }
+  },
+  methods: {
+    isCheckImage(file) {
+      const urlArr = file.split(".");
+      const suffix = urlArr[urlArr.length - 1];
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      console.log(imgSuffix.includes(suffix), "11");
+      return imgSuffix.includes(suffix);
+    },
+    // 获取学校列表
+    onDownload(item, type) {
+      if (type == "download") {
+        window.location.href = item.url;
+        return;
+      }
+
+      let urlArr = item.url.split(".");
+      let suffix = urlArr[urlArr.length - 1];
+      const imgSuffix = ["png", "jpg", "jpeg", "gif", "ico"];
+      if (imgSuffix.includes(suffix)) {
+      } else if (suffix != "pdf") {
+        this.previewUrl =
+          "https://view.officeapps.live.com/op/view.aspx?src=" + item.url;
+        window.open(this.previewUrl);
+        return;
+      } else {
+        this.previewUrl =
+          this.validManageUrl() + "/pdf/web/viewer.html?file=" + item.url;
+        window.open(this.previewUrl);
+        return;
+      }
+    },
+    // 教务地址
+    validManageUrl() {
+      let url = window.location.href;
+      let returnUrl = "";
+      if (/dev/.test(url)) {
+        // dev 环境
+        returnUrl = "http://mandev.dayaedu.com";
+      } else if (/test/.test(url)) {
+        // dev 环境
+        returnUrl = "http://mantest.dayaedu.com";
+      } else if (/online/.test(url)) {
+        //线上
+        returnUrl = "https://manonline.dayaedu.com";
+      } else {
+        // 默认dev环境
+        returnUrl = "http://mandev.dayaedu.com";
+      }
+      return returnUrl;
+    },
+    readWorkbookFromRemoteFile: function (url) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("get", url, true);
+      xhr.responseType = "arraybuffer";
+      let _this = this;
+      xhr.onload = function (e) {
+        var binary = "";
+        console.log(xhr);
+        if (xhr.status === 200) {
+          var bytes = new Uint8Array(xhr.response);
+          var length = bytes.byteLength;
+          for (var i = 0; i < length; i++) {
+            binary += String.fromCharCode(bytes[i]);
+          }
+          var wb = XLSX.read(binary, { type: "binary" });
+          var wsname = wb.SheetNames[0];
+          var ws = wb.Sheets[wsname];
+          console.log(ws);
+          var HTML = XLSX.utils.sheet_to_html(ws);
+          if (_this.$refs.preview) {
+            _this.$refs.preview.innerHTML = HTML;
+          }
+        }
+      };
+      xhr.send();
+    },
+    getData() {
+      let that = this;
+      let element = that.$refs.preview;
+      // Transform(element);
+      var initScale = 1;
+      this.af = new AlloyFinger(element, {
+        // rotate: function (evt) {  //实现旋转
+        //   element.rotateZ += evt.angle;
+        // },
+        multipointStart: function () {
+          initScale = element.scaleX;
+        },
+        pinch: function (evt) {
+          //实现缩放
+          element.scaleX = element.scaleY = initScale * evt.zoom;
+        },
+        pressMove: function (evt) {
+          //实现移动
+          element.translateX += evt.deltaX;
+          element.translateY += evt.deltaY;
+          evt.preventDefault();
+        },
+      });
+    },
+    checkFileSuffix(url) {
+      let urlArr = url.split(".");
+      let suffix = urlArr[urlArr.length - 1];
+      const passSuffix = [
+        "xlsx",
+        "xls",
+        "pdf",
+        "png",
+        "jpg",
+        "jpeg",
+        "gif",
+        "ico",
+      ];
+      if (passSuffix.includes(suffix)) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    // select 选择时触发
+    onChangeSelect() {
+      let relationArray = [];
+      // console.log(this.widget.options.options)
+      let allArray = [];
+      this.widget.options &&
+        this.widget.options.options.forEach((item) => {
+          // 判断是否是多选
+          let tempRelation = item.relationOptions || [];
+          allArray.push(...tempRelation);
+          if (this.widget.options.multiple) {
+            if (this.dataModel.includes(item.value)) {
+              relationArray.push(...tempRelation);
+            }
+          } else {
+            if (this.dataModel == item.value) {
+              let tempRelation = item.relationOptions || [];
+              relationArray.push(...tempRelation);
+            }
+          }
+        });
+      console.log(relationArray, "111", this.dataModel, this.widget.options);
+      // if (relationArray.length > 0) {
+      this.$emit("relationFormChange", relationArray, allArray);
+      // }
+
+      // this.dataModel = this.selectValue.join(",");
+      // this.showSelect = false;
+      // let relationArray = [];
+      // let allArray = [];
+      // this.options?.options?.forEach((item) => {
+      //   let tempRelation = item.relationOptions || [];
+      //   allArray.push(...tempRelation);
+      //   if (this.selectValue.includes(item.value)) {
+      //     relationArray.push(...tempRelation);
+      //   }
+      // });
+      // let uniqueArr = [...new Set(relationArray)];
+      // this.$emit("relationFormChange", uniqueArr, allArray);
+    },
+    fileCheckRequired(state) {
+      this.$emit("fileCheckRequired", state);
+    },
+    async onGetSchoolList(val) {
+      // 隐藏的时候的不获取数据,
+      // 为什么每次都需要请求,因为我没有判断分部数据是否有修改
+      if (!val) {
+        return;
+      }
+      let organId = null;
+      this.selectLoading = true;
+      if (this.subformModel) {
+        organId =
+          this.models[this.subformModel][this.subformIndex][
+            this.widget.options.displayRelation
+          ];
+      } else {
+        organId = this.models[this.widget.options.displayRelation];
+      }
+      // // 判断是否有选择分部 判断列表已经有数据了
+      if (organId) {
+        let res = await getOrganCooperation({ organId });
+        this.cooperationList = [...res.data];
+      }
+      this.selectLoading = false;
+    },
+    // 处理用户输入的值 input框
+    onInputChangeNumber(event) {
+      // 不用处理string类型的
+      // console.log(event, this.widget.options)
+      const type = this.widget.options.dataType;
+      if (type == "number" || type == "integer") {
+        this.onVerifiyNumberInteger(event);
+      } else if (type == "float") {
+        this.verifyNumberIntegerAndFloat(event);
+      }
+    },
+    verifyNumberIntegerAndFloat(val) {
+      // val = this.ruleForm.test;
+      const t = val.charAt(0);
+      // 匹配空格
+      // console.log(val)
+      let v = val.replace(/(^\s*)|(\s*$)/g, "");
+      // 只能是数字和小数点,不能是其他输入
+      v = v.replace(/[^\d.]/g, "");
+      // 以0开始只能输入一个
+      v = v.replace(/^0{2}$/g, "0");
+      // 保证第一位只能是数字,不能是点
+      v = v.replace(/^\./g, "");
+      // 小数只能出现1位
+      v = v.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
+      // 小数点后面保留2位
+      v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
+      if (t == "-") {
+        v = "-" + v;
+      }
+      // 返回结果
+      this.dataModel = v;
+    },
+    onVerifiyNumberInteger(val) {
+      const t = val.charAt(0);
+      // 匹配空格
+      let v = val.replace(/(^\s*)|(\s*$)/g, "");
+      // 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
+      v = v.replace(/[\.]*/g, "");
+      // 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
+      v = v.replace(/(^0[\d]*)$/g, "0");
+      // 首位是0,只能出现一次
+      v = v.replace(/^0\d$/g, "0");
+      // 只匹配数字
+      v = v.replace(/[^\d]/g, "");
+      if (t == "-") {
+        v = "-" + v;
+      }
+      // 返回结果
+      this.dataModel = v;
+    },
+    fileList(files) {
+      // 只处理乐团退费
+      const query = this.$route.query;
+      if (query.processId == 19) {
+        if (files && files.length > 0) {
+          this.$emit("fileCheckRequired", true);
+        } else {
+          this.$emit("fileCheckRequired", false);
+        }
+      } else {
+        this.$emit("fileCheckRequired", false);
+      }
+      this.dataModel = files;
+    },
+    handleDisplayVerifiy() {
+      if (Object.keys(this.widget.options).indexOf("displayVerifiy") >= 0) {
+        if (this.widget.options.displayVerifiy.type !== "hide") {
+          var c = 0;
+          for (var v of this.widget.options.displayVerifiy.list) {
+            if (this.models[v.model].toString() === v.value) {
+              c++;
+            }
+          }
+          if (this.widget.options.displayVerifiy.type === "and") {
+            if (c !== this.widget.options.displayVerifiy.list.length) {
+              this.showStatus = false;
+            } else {
+              this.showStatus = true;
+            }
+          } else if (this.widget.options.displayVerifiy.type === "or") {
+            if (c === 0) {
+              this.showStatus = false;
+            } else {
+              this.showStatus = true;
+            }
+          }
+        }
+      }
+    },
+    dataFormatBr(str) {
+      return str ? str.replace(/\n/gi, "<br />") : str;
+    },
+  },
+};
+</script>
+
+<style>
+.previewEditorDiv > p {
+  margin: 0;
+}
+
+.preview-cascader-class .el-input.is-disabled .el-input__inner {
+  background-color: #fff;
+  border: none;
+  color: #303133;
+}
+
+.preview-cascader-class
+  .el-input.is-disabled
+  .el-input__suffix
+  .el-input__suffix-inner
+  .el-input__icon.el-icon-arrow-down:before {
+  content: "";
+}
+
+.dataModelText {
+  color: #e7af84;
+}
+.dataModelText .el-form-item__label {
+  color: #e7af84 !important;
+}
+</style>

+ 33 - 6
src/views/process/list/create.vue

@@ -173,17 +173,41 @@ export default {
 
     await this.getUserInfo();
     await this.getAllOrgan();
-    this.getProcessNodeList();
+    await this.getProcessNodeList();
   },
   methods: {
     onGetFormData() {
       var promiseList = [];
       for (var tpl of this.processStructureValue.tpls) {
+        const beforData =
+          this.$refs["generateForm-" + tpl.id][0].getDataNoValid();
+        const afterData = {};
+
+        // 去除数据为空的对象,其它的保留
+        for (let i in beforData) {
+          if (i.indexOf("subform") != -1) {
+            afterData[i] = [];
+            for (let j in beforData[i]) {
+              afterData[i][j] = {};
+              for (let k in beforData[i][j]) {
+                if (beforData[i][j][k]) {
+                  afterData[i][j][k] = beforData[i][j][k];
+                }
+              }
+            }
+          } else {
+            if (beforData[i]) {
+              afterData[i] = beforData[i];
+            }
+          }
+        }
+        // console.log(afterData, "afterData");
+
         promiseList.push({
           tplId: tpl.id,
           priority: this.ruleForm.priority,
           deptId: this.ruleForm.deptId,
-          formData: this.$refs["generateForm-" + tpl.id][0].getDataNoValid(),
+          formData: afterData,
         });
       }
       this.searchs.update(promiseList, null);
@@ -251,12 +275,12 @@ export default {
       //   });
       // }
     },
-    getProcessNodeList() {
+    async getProcessNodeList() {
       const processId = this.$route.query.processId;
       if (!processId) {
         return;
       }
-      processStructure({
+      await processStructure({
         processId: this.$route.query.processId,
         userId: this.userId,
       }).then((response) => {
@@ -540,7 +564,7 @@ export default {
             }
           }
 
-          var promiseList = [];
+          let promiseList = [];
           for (var tpl of this.processStructureValue.tpls) {
             tpl.form_structure.id = tpl.id;
             this.ruleForm.tpls.form_structure.push(tpl.form_structure);
@@ -553,7 +577,10 @@ export default {
               this.ruleForm.tpls.form_data = values;
               const formData = values[0];
               const tplInfo = this.processStructureValue.tpls[0]; // 默认只用第一个模板
-              // console.log(this.ruleForm.tpls.form_data);
+              console.log(this.ruleForm.tpls.form_data);
+              console.log(this.ruleForm, "this.ruleForm");
+              this.submitDisabled = false;
+              return;
               // 校验数据
               const res = await checkCourseReturnFee({
                 tplInfoId: tplInfo.id,

+ 15 - 3
src/views/process/list/save-data.js

@@ -5,6 +5,7 @@ export class Searchs {
   initSearch = {};
 
   searchs = {};
+  type = "session";
 
   constructor(key) {
     this.key = key;
@@ -12,13 +13,20 @@ export class Searchs {
   }
 
   save() {
-    localStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    if (this.type == "session") {
+      sessionStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    } else {
+      localStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    }
   }
 
   parse() {
     let json = {};
     try {
-      const val = localStorage.getItem(this.saveKey);
+      const val =
+        this.type == "session"
+          ? sessionStorage.getItem(this.saveKey)
+          : localStorage.getItem(this.saveKey);
       json = JSON.parse(val) || json;
     } catch (error) {}
     return json;
@@ -55,7 +63,11 @@ export class Searchs {
 
   removeAll() {
     this.searchs = {};
-    localStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    if (this.type === "session") {
+      sessionStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    } else {
+      localStorage.setItem(this.saveKey, JSON.stringify(this.searchs));
+    }
     return this.searchs;
   }