tianheng-ui 0.1.81 → 0.1.84

package/packages/FormMaking/GenerateForm.vue

@@ -1,392 +1,392 @@
-<template>
-  <div v-if="formConfig.config && showForm">
-    <el-form
-      class="generateForm"
-      :class="{ isHideLabel: formConfig.config.hideLabel }"
-      :style="{ width: formConfig.config.width }"
-      :model="models"
-      :label-suffix="formConfig.config.labelSuffix"
-      :label-position="formConfig.config.labelPosition"
-      :label-width="formConfig.config.labelWidth + 'px'"
-      :size="formConfig.config.size"
-      ref="generateForm"
-    >
-      <genetate-form-item
-        v-for="item in formConfig.list"
-        :key="item.key"
-        :widget="item"
-        :model.sync="
-          item.type === 'grid' && !item.options.isEntity
-            ? models
-            : models[item.model]
-        "
-        :models="models"
-        :slotKeys="slotKeys"
-        :config="formConfig.config"
-        :componentsData="componentsData"
-        @input-change="handleInputChange"
-        @button-submit="handleButtonSubmit"
-      >
-        <template v-for="name in slotKeys" :slot="name">
-          <slot :name="name" />
-        </template>
-      </genetate-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import GenetateFormItem from "./GenerateFormItem";
-import * as Axios from "./network/axios";
-import appConfig from "./config/index";
-import { deepClone, getProperty, setProperty } from "./util/index";
-
-export default {
-  name: "thFormGenerate",
-  components: { GenetateFormItem },
-  props: {
-    businessId: {
-      type: String,
-      default: ""
-    },
-    formId: String,
-    query: Object,
-    oauthConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    config: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    value: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    slotKeys: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {
-      formConfig: this.config,
-      models: this.value,
-      componentsData: [],
-      axios: null,
-      showForm: false
-    };
-  },
-  computed: {
-    formWidth() {
-      if (this.formConfig.config.width) return this.formConfig.config.width;
-      return "";
-    }
-  },
-  watch: {
-    config(val) {
-      this.setConfig(val);
-    },
-    value(val) {
-      if (val) this.models = val;
-      console.log("watch models =>", this.models);
-    }
-  },
-  created() {},
-  mounted() {
-    sessionStorage.setItem(
-      appConfig.storageKeys.oauthConfig,
-      JSON.stringify(this.oauthConfig)
-    );
-    this.axios = Axios.init(this.oauthConfig);
-
-    this.generateModle(this.formConfig.list, this.models);
-    console.log("mounted models =>", this.models);
-    this.handleMountedRemotData();
-    this.showForm = true;
-  },
-  methods: {
-    generateModle(genList, modelObj) {
-      if (!genList) return;
-      genList.map(item => {
-        if (item.type === "grid") {
-          if (item.options.isEntity) {
-            const dic = {};
-            modelObj[item.model] = dic;
-
-            item.options.columns.forEach(item => {
-              this.generateModle(item.list, dic, item.model);
-            });
-          } else {
-            item.options.columns.forEach(item => {
-              this.generateModle(item.list, modelObj);
-            });
-          }
-        } else if (item.type === "tabs") {
-          const dic = {};
-          modelObj[item.model] = dic;
-
-          item.options.columns.forEach(item2 => {
-            dic[item2.value] = {};
-            this.generateModle(item2.list, dic[item2.value]);
-          });
-        } else if (item.type === "table" || item.type === "list") {
-          !item.options.defaultValue && (item.options.defaultValue = []);
-          modelObj[item.model] = deepClone(item.options.defaultValue);
-          this.generateModle(item.options.columns);
-        } else if (item.type === "blank" && modelObj) {
-          const value =
-            getProperty(this.value, item.model) ||
-            { String: "", Object: {}, Array: [] }[item.options.defaultType];
-          // setProperty(modelObj, item.model, value);
-          this.$set(modelObj, item.model, value);
-          this.generateRules(item);
-        } else if (modelObj) {
-          const value =
-            getProperty(this.value, item.model) ||
-            JSON.parse(JSON.stringify(item.options.defaultValue));
-          // setProperty(modelObj, item.model, value);
-          this.$set(modelObj, item.model, value);
-          this.generateRules(item);
-        } else {
-          this.generateRules(item);
-        }
-      });
-    },
-    generateRules(item) {
-      // 配置正则校验
-      if (item.rules) {
-        item.rules.forEach(rule => {
-          if (rule.patternStr) {
-            rule.pattern = new RegExp(rule.patternStr);
-          }
-        });
-      } else {
-        item.rules = [];
-      }
-      // 配置必填项校验
-      // if (item.options.required) {
-      //   item.rules.push({
-      //     required: true,
-      //     message: "必需项",
-      //     trigger: "change"
-      //   });
-      // }
-      this.hendleElementRemoteData(item);
-    },
-    // 获取组件的远端数据
-    hendleElementRemoteData(item) {
-      if (!item.options.remote || !item.options.remote.open) return;
-      if (item.type === "upload" || item.type === "button") return;
-
-      let api = "";
-      if (item.options.remote.api.constructor === String) {
-        api = this.formConfig.config.network[item.options.remote.api];
-      } else {
-        api = deepClone(item.options.remote.api);
-      }
-      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
-
-      const requestConfig = {
-        url: api.url,
-        method: api.method,
-        headers: { ...api.headers, businessId: this.businessId }
-      };
-
-      // 因为是组件的远端接口，优先级：默认值 > 路由参数
-      const params = {};
-      for (let e of api.inParams) {
-        const value =
-          e.defaultValue || getProperty(this.query, e.pAlias) || null;
-        setProperty(params, e.pAlias, value);
-      }
-      if (api.needPage) {
-        params.pageNum = params.pageNum || 1;
-        params.pageSize = params.pageSize || 20;
-      }
-      if (["get", "delete"].includes(api.method.toLowerCase()))
-        requestConfig.params = params;
-      else requestConfig.data = params;
-
-      this.axios(requestConfig).then(res => {
-        const resultData = res.data.records ? res.data.records : res.data;
-        if (item.type === "descriptions" || item.type === "workflow") {
-          item.options.defaultValue = resultData;
-        } else {
-          const props = {
-            value: item.options.remote.props.value || "value",
-            label: item.options.remote.props.label || "label",
-            children: item.options.remote.props.children || "children"
-          };
-          const initOptions = list => {
-            return list.map(element => {
-              const dic = {
-                value: element[props.value],
-                label: element[props.label]
-              };
-              if (element[props.children] && element[props.children].length) {
-                dic.children = initOptions(element[props.children]);
-              }
-              return dic;
-            });
-          };
-          item.options.options = initOptions(resultData);
-        }
-      });
-    },
-    handleMountedRemotData() {
-      if (!this.formConfig.config.mounted.api) return;
-
-      let api = "";
-      if (this.formConfig.config.mounted.api.constructor === String) {
-        api = this.formConfig.config.network[
-          this.formConfig.config.mounted.api
-        ];
-      } else {
-        api = deepClone(this.formConfig.config.mounted.api);
-      }
-
-      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
-
-      const requestConfig = {
-        url: api.url,
-        method: api.method,
-        headers: { ...api.headers, businessId: this.businessId }
-      };
-      const params = {};
-      for (let e of api.inParams) {
-        const value =
-          e.defaultValue ||
-          getProperty(this.models, e.pAlias) ||
-          getProperty(this.query, e.pAlias) ||
-          null;
-        setProperty(params, e.pAlias, value);
-      }
-      if (api.needPage) {
-        params.pageNum = params.pageNum || 1;
-        params.pageSize = params.pageSize || 20;
-      }
-      if (["get", "delete"].includes(api.method.toLowerCase()))
-        requestConfig.params = params;
-      else requestConfig.data = params;
-
-      this.axios(requestConfig).then(res => {
-        const resultData = api.needPage ? res.data.records : res.data;
-        this.models = Object.assign(this.models, resultData);
-      });
-    },
-    handleButtonSubmit(element) {
-      if (!element.options.remote.api)
-        return this.$emit("button-submit", element);
-
-      let api = "";
-      if (element.options.remote.api.constructor === String) {
-        api = this.formConfig.config.network[element.options.remote.api];
-      } else {
-        api = deepClone(element.options.remote.api);
-      }
-
-      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
-
-      let params = {};
-      const initParams = list => {
-        list.map(item => {
-          if (item.children) {
-            initParams(item.children);
-          } else {
-            const value =
-              item.defaultValue ||
-              getProperty(this.models, item.pAlias) ||
-              null;
-            setProperty(params, item.pAlias, value);
-          }
-        });
-      };
-      api.inParams && initParams(api.inParams);
-      if (api.needPage) {
-        params.pageNum = params.pageNum || 1;
-        params.pageSize = params.pageNum || 20;
-      }
-
-      const requestConfig = {
-        url: api.url,
-        method: api.method,
-        headers: {
-          ...api.headers,
-          formId: this.formId,
-          businessId: this.businessId
-        }
-      };
-      if (["get", "delete"].includes(api.method.toLowerCase()))
-        requestConfig.params = params;
-      else requestConfig.data = params;
-
-      this.$refs.generateForm.validate(valid => {
-        if (!valid) return;
-        element.options.loading = true;
-        this.axios(requestConfig)
-          .then(res => {
-            element.options.loading = false;
-            this.$emit("button-submit", element);
-          })
-          .catch(err => {
-            element.options.loading = false;
-          });
-      });
-    },
-    handleInputChange(value, field) {
-      this.$emit("change", field, value, this.models);
-    },
-    reset() {
-      this.$refs.generateForm.resetFields();
-    },
-    getData() {
-      return new Promise((resolve, reject) => {
-        this.$refs.generateForm.validate(valid => {
-          if (valid) {
-            resolve(this.models);
-          } else {
-            reject(new Error("表单数据校验失败").message);
-          }
-        });
-      });
-    },
-    setConfig(json) {
-      this.formConfig = json;
-      this.generateModle(this.formConfig.list, this.models);
-      this.handleMountedRemotData();
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.generateForm {
-  margin: 0 auto;
-  /deep/ .widget-form-list-table > .el-form-item__content {
-    .el-form-item__label {
-      display: none;
-    }
-    .el-form-item__content {
-      margin-left: 0 !important;
-    }
-  }
-
-  .isHideLabel {
-    .el-form-item__label {
-      display: none;
-    }
-    .el-form-item__content {
-      margin-left: 0 !important;
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="formConfig.config && showForm">
+    <el-form
+      class="generateForm"
+      :class="{ isHideLabel: formConfig.config.hideLabel }"
+      :style="{ width: formConfig.config.width }"
+      :model="models"
+      :label-suffix="formConfig.config.labelSuffix"
+      :label-position="formConfig.config.labelPosition"
+      :label-width="formConfig.config.labelWidth + 'px'"
+      :size="formConfig.config.size"
+      ref="generateForm"
+    >
+      <genetate-form-item
+        v-for="item in formConfig.list"
+        :key="item.key"
+        :widget="item"
+        :model.sync="
+          item.type === 'grid' && !item.options.isEntity
+            ? models
+            : models[item.model]
+        "
+        :models="models"
+        :slotKeys="slotKeys"
+        :config="formConfig.config"
+        :componentsData="componentsData"
+        @input-change="handleInputChange"
+        @button-submit="handleButtonSubmit"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </genetate-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import GenetateFormItem from "./GenerateFormItem";
+import * as Axios from "./network/axios";
+import appConfig from "./config/index";
+import { deepClone, getProperty, setProperty } from "./util/index";
+
+export default {
+  name: "thFormGenerate",
+  components: { GenetateFormItem },
+  props: {
+    businessId: {
+      type: String,
+      default: ""
+    },
+    formId: String,
+    query: Object,
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    slotKeys: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      formConfig: this.config,
+      models: this.value,
+      componentsData: [],
+      axios: null,
+      showForm: false
+    };
+  },
+  computed: {
+    formWidth() {
+      if (this.formConfig.config.width) return this.formConfig.config.width;
+      return "";
+    }
+  },
+  watch: {
+    config(val) {
+      this.setConfig(val);
+    },
+    value(val) {
+      if (val) this.models = val;
+      console.log("watch models =>", this.models);
+    }
+  },
+  created() {},
+  mounted() {
+    sessionStorage.setItem(
+      appConfig.storageKeys.oauthConfig,
+      JSON.stringify(this.oauthConfig)
+    );
+    this.axios = Axios.init(this.oauthConfig);
+
+    this.generateModle(this.formConfig.list, this.models);
+    console.log("mounted models =>", this.models);
+    this.handleMountedRemotData();
+    this.showForm = true;
+  },
+  methods: {
+    generateModle(genList, modelObj) {
+      if (!genList) return;
+      genList.map(item => {
+        if (item.type === "grid") {
+          if (item.options.isEntity) {
+            const dic = {};
+            modelObj[item.model] = dic;
+
+            item.options.columns.forEach(item => {
+              this.generateModle(item.list, dic, item.model);
+            });
+          } else {
+            item.options.columns.forEach(item => {
+              this.generateModle(item.list, modelObj);
+            });
+          }
+        } else if (item.type === "tabs") {
+          const dic = {};
+          modelObj[item.model] = dic;
+
+          item.options.columns.forEach(item2 => {
+            dic[item2.value] = {};
+            this.generateModle(item2.list, dic[item2.value]);
+          });
+        } else if (item.type === "table" || item.type === "list") {
+          !item.options.defaultValue && (item.options.defaultValue = []);
+          modelObj[item.model] = deepClone(item.options.defaultValue);
+          this.generateModle(item.options.columns);
+        } else if (item.type === "blank" && modelObj) {
+          const value =
+            getProperty(this.value, item.model) ||
+            { String: "", Object: {}, Array: [] }[item.options.defaultType];
+          // setProperty(modelObj, item.model, value);
+          this.$set(modelObj, item.model, value);
+          this.generateRules(item);
+        } else if (modelObj) {
+          const value =
+            getProperty(this.value, item.model) ||
+            JSON.parse(JSON.stringify(item.options.defaultValue || ''));
+          // setProperty(modelObj, item.model, value);
+          this.$set(modelObj, item.model, value);
+          this.generateRules(item);
+        } else {
+          this.generateRules(item);
+        }
+      });
+    },
+    generateRules(item) {
+      // 配置正则校验
+      if (item.rules) {
+        item.rules.forEach(rule => {
+          if (rule.patternStr) {
+            rule.pattern = new RegExp(rule.patternStr);
+          }
+        });
+      } else {
+        item.rules = [];
+      }
+      // 配置必填项校验
+      // if (item.options.required) {
+      //   item.rules.push({
+      //     required: true,
+      //     message: "必需项",
+      //     trigger: "change"
+      //   });
+      // }
+      this.hendleElementRemoteData(item);
+    },
+    // 获取组件的远端数据
+    hendleElementRemoteData(item) {
+      if (!item.options.remote || !item.options.remote.open) return;
+      if (item.type === "upload" || item.type === "button") return;
+
+      let api = "";
+      if (item.options.remote.api.constructor === String) {
+        api = this.formConfig.config.network[item.options.remote.api];
+      } else {
+        api = deepClone(item.options.remote.api);
+      }
+      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
+
+      const requestConfig = {
+        url: api.url,
+        method: api.method,
+        headers: { ...api.headers, businessId: this.businessId }
+      };
+
+      // 因为是组件的远端接口，优先级：默认值 > 路由参数
+      const params = {};
+      for (let e of api.inParams) {
+        const value =
+          e.defaultValue || getProperty(this.query, e.pAlias) || null;
+        setProperty(params, e.pAlias, value);
+      }
+      if (api.needPage) {
+        params.pageNum = params.pageNum || 1;
+        params.pageSize = params.pageSize || 20;
+      }
+      if (["get", "delete"].includes(api.method.toLowerCase()))
+        requestConfig.params = params;
+      else requestConfig.data = params;
+
+      this.axios(requestConfig).then(res => {
+        const resultData = res.data.records ? res.data.records : res.data;
+        if (item.type === "descriptions" || item.type === "workflow") {
+          item.options.defaultValue = resultData;
+        } else {
+          const props = {
+            value: item.options.remote.props.value || "value",
+            label: item.options.remote.props.label || "label",
+            children: item.options.remote.props.children || "children"
+          };
+          const initOptions = list => {
+            return list.map(element => {
+              const dic = {
+                value: element[props.value],
+                label: element[props.label]
+              };
+              if (element[props.children] && element[props.children].length) {
+                dic.children = initOptions(element[props.children]);
+              }
+              return dic;
+            });
+          };
+          item.options.options = initOptions(resultData);
+        }
+      });
+    },
+    handleMountedRemotData() {
+      if (!this.formConfig.config.mounted.api) return;
+
+      let api = "";
+      if (this.formConfig.config.mounted.api.constructor === String) {
+        api = this.formConfig.config.network[
+          this.formConfig.config.mounted.api
+        ];
+      } else {
+        api = deepClone(this.formConfig.config.mounted.api);
+      }
+
+      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
+
+      const requestConfig = {
+        url: api.url,
+        method: api.method,
+        headers: { ...api.headers, businessId: this.businessId }
+      };
+      const params = {};
+      for (let e of api.inParams) {
+        const value =
+          e.defaultValue ||
+          getProperty(this.models, e.pAlias) ||
+          getProperty(this.query, e.pAlias) ||
+          null;
+        setProperty(params, e.pAlias, value);
+      }
+      if (api.needPage) {
+        params.pageNum = params.pageNum || 1;
+        params.pageSize = params.pageSize || 20;
+      }
+      if (["get", "delete"].includes(api.method.toLowerCase()))
+        requestConfig.params = params;
+      else requestConfig.data = params;
+
+      this.axios(requestConfig).then(res => {
+        const resultData = api.needPage ? res.data.records : res.data;
+        this.models = Object.assign(this.models, resultData);
+      });
+    },
+    handleButtonSubmit(element) {
+      if (!element.options.remote.api)
+        return this.$emit("button-submit", element);
+
+      let api = "";
+      if (element.options.remote.api.constructor === String) {
+        api = this.formConfig.config.network[element.options.remote.api];
+      } else {
+        api = deepClone(element.options.remote.api);
+      }
+
+      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
+
+      let params = {};
+      const initParams = list => {
+        list.map(item => {
+          if (item.children) {
+            initParams(item.children);
+          } else {
+            const value =
+              item.defaultValue ||
+              getProperty(this.models, item.pAlias) ||
+              null;
+            setProperty(params, item.pAlias, value);
+          }
+        });
+      };
+      api.inParams && initParams(api.inParams);
+      if (api.needPage) {
+        params.pageNum = params.pageNum || 1;
+        params.pageSize = params.pageNum || 20;
+      }
+
+      const requestConfig = {
+        url: api.url,
+        method: api.method,
+        headers: {
+          ...api.headers,
+          formId: this.formId,
+          businessId: this.businessId
+        }
+      };
+      if (["get", "delete"].includes(api.method.toLowerCase()))
+        requestConfig.params = params;
+      else requestConfig.data = params;
+
+      this.$refs.generateForm.validate(valid => {
+        if (!valid) return;
+        element.options.loading = true;
+        this.axios(requestConfig)
+          .then(res => {
+            element.options.loading = false;
+            this.$emit("button-submit", element);
+          })
+          .catch(err => {
+            element.options.loading = false;
+          });
+      });
+    },
+    handleInputChange(value, field) {
+      this.$emit("change", field, value, this.models);
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.$refs.generateForm.validate(valid => {
+          if (valid) {
+            resolve(this.models);
+          } else {
+            reject(new Error("表单数据校验失败").message);
+          }
+        });
+      });
+    },
+    setConfig(json) {
+      this.formConfig = json;
+      this.generateModle(this.formConfig.list, this.models);
+      this.handleMountedRemotData();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.generateForm {
+  margin: 0 auto;
+  /deep/ .widget-form-list-table > .el-form-item__content {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .isHideLabel {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+}
+</style>