tianheng-ui 0.1.48 → 0.1.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateForm.vue

@@ -63,7 +63,7 @@
 
 <script>
 import * as Axios from "lib/theme-chalk/js/axios";
-import { deepClone } from "./util/index";
+import { deepClone, getProperty, setProperty } from "./util/index";
 import GenetateFormItem from "./GenerateFormItem";
 
 export default {
@@ -216,13 +216,13 @@ export default {
           trigger: "change"
         });
       }
-      this.hendleRemoteData(item);
+      this.hendleElementRemoteData(item);
     },
-    hendleRemoteData(item) {
+    hendleElementRemoteData(item) {
       if (!item.options.remote) return;
       if (item.type === "upload" || item.type === "button") return;
       const api = this.formConfig.config.network[item.options.remoteFunc];
-      if (!api) return this.$message.warning("未知的请求接口，请检查配置信息");
+      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
 
       const requestConfig = {
         url: api.url,
@@ -231,31 +231,80 @@ export default {
       };
       const params = {};
       for (let e of api.inParams) {
-        params[e.alias] =
-          eval(`this.models.${e.pAlias}`) ||
-          eval(`this.query.${e.pAlias}`) ||
+        const value =
+          getProperty(this.models, e.pAlias) ||
+          getProperty(this.query, e.pAlias) ||
           null;
+        setProperty(params, e.pAlias, value);
       }
       if (api.needPage) {
         params.pageNum = 1;
         params.pageSize = 20;
       }
-      if (["POST", "PUT"].includes(api.method)) requestConfig.data = params;
-      else requestConfig.params = requestConfig;
+      if (["get", "delete"].includes(api.method.toLowerCase()))
+        requestConfig.params = params;
+      else requestConfig.data = params;
 
       this.axios(requestConfig).then(res => {
+        const props = {
+          value: item.options.props.value || "value",
+          label: item.options.props.label || "label",
+          children: item.options.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;
+          });
+        };
         const resultData = res.data.records ? res.data.records : res.data;
-        item.options.remoteOptions = resultData.map(element => {
-          return {
-            value: element[item.options.props.value || "value"],
-            label: element[item.options.props.label || "label"],
-            children: element[item.options.props.children || "children"]
-          };
-        });
+        item.options.remoteOptions = initOptions(resultData);
       });
     },
     handleButtonSubmit(val) {
-      this.$emit("button-submit", val);
+      const api = this.formConfig.config.network[val];
+      if (!api) return this.$message.warning("未知的接口，请检查配置信息");
+
+      const requestConfig = {
+        url: api.url,
+        method: api.method,
+        headers: api.headers
+      };
+
+      let params = {};
+      const inParams = api.inParams;
+      const initParams = list => {
+        list.map(item => {
+          if (item.children) {
+            initParams(item.children);
+          } else {
+            const value = getProperty(this.models, item.pAlias);
+            setProperty(params, item.pAlias, value);
+          }
+        });
+      };
+      initParams(inParams);
+
+      if (api.needPage) {
+        params.pageNum = 1;
+        params.pageSize = 20;
+      }
+      if (["get", "delete"].includes(api.method.toLowerCase()))
+        requestConfig.params = params;
+      else requestConfig.data = params;
+
+      this.$refs.generateForm.validate(valid => {
+        if (!valid) return;
+        this.axios(requestConfig).then(res => {
+          this.$emit("button-submit", requestConfig);
+        });
+      });
     },
     getData() {
       return new Promise((resolve, reject) => {

package/packages/FormMaking/WidgetConfig.vue

@@ -177,7 +177,7 @@
                 <el-tooltip
                   slot="label"
                   effect="light"
-                  content="开启后，列表接口值修改，会触发 remote-params 回调，用于从服务器查询字段，"
+                  content="开启后，字段接口值修改，会触发 remote-params 回调，用于从服务器查询字段"
                   placement="top"
                 >
                   <span style="color: #409EFF;">远程字段</span>
@@ -196,10 +196,10 @@
                 <el-select
                   v-model="config.fields.api"
                   style="width:100%"
-                  clearable
                   placeholder="请选择"
-                  filterable
                   no-data-text="暂无接口，请前往【数据源模块】创建"
+                  clearable
+                  filterable
                 >
                   <el-option
                     v-for="item in apiOptions"
@@ -588,10 +588,12 @@ export default {
         return;
       }
 
-      const initParams = (paramsList, pAlias) => {
+      const initParams = (paramsList, pAlias, bool) => {
         paramsList.forEach(item => {
-          item.elType = "input";
-          item.align = "left";
+          if (bool) {
+            item.elType = "input";
+            item.align = "left";
+          }
           item.pAlias = pAlias ? `${pAlias}.${item.alias}` : item.alias;
           if (item.children && item.children.length) {
             initParams(item.children, item.pAlias);
@@ -601,25 +603,28 @@ export default {
 
       if (this.config.fields.remote) {
         const callback = res => {
-          api.inParams = res.inParams;
-          api.outParams = res.outParams;
+          api.inParams = deepClone(res.inParams);
+          api.outParams = deepClone(res.outParams);
+          initParams(api.inParams, null, false);
+          initParams(api.outParams, null, false);
+
           if (isFields) {
             this.fieldsData.inParams = deepClone(res.inParams || []);
-            initParams(this.fieldsData.inParams);
+            initParams(this.fieldsData.inParams, null, true);
             this.fieldsData.outParams = deepClone(res.outParams || []);
-            initParams(this.fieldsData.outParams);
+            initParams(this.fieldsData.outParams, null, true);
           }
         };
         this.$emit("remote-params", apiId, callback);
-        return;
-      }
-
-      if (isFields) {
-        this.fieldsData.inParams = deepClone(api.inParams || []);
-        initParams(this.fieldsData.inParams);
-        this.fieldsData.outParams = deepClone(api.outParams || []);
-        initParams(this.fieldsData.outParams);
-        return;
+      } else {
+        initParams(api.inParams, null, false);
+        initParams(api.outParams, null, false);
+        if (isFields) {
+          this.fieldsData.inParams = deepClone(api.inParams || []);
+          initParams(this.fieldsData.inParams, null, true);
+          this.fieldsData.outParams = deepClone(api.outParams || []);
+          initParams(this.fieldsData.outParams, null, true);
+        }
       }
     },
     formValidate() {

package/packages/FormMaking/custom/configs/button.vue

@@ -90,10 +90,10 @@
         <el-select
           style="width:100%"
           v-model="widget.options.remoteFunc"
-          value-key="id"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
           clearable
-          placeholder="请选择提交方法"
-          no-data-text="暂无接口，请前往【接口模块】创建"
+          filterable
         >
           <el-option
             v-for="item in apiOptions"

package/packages/FormMaking/custom/configs/cascader.vue

@@ -60,9 +60,10 @@
         <el-select
           style="width:100%"
           v-model="widget.options.remoteFunc"
-          value-key="id"
-          placeholder="请选择远端方法"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
           clearable
+          filterable
         >
           <el-option
             v-for="item in apiOptions"

package/packages/FormMaking/custom/configs/checkbox.vue

@@ -60,19 +60,21 @@
       <el-form-item label-width="0">
         <template v-if="widget.options.remote">
           <el-select
-            style="width:100%"
-            v-model="widget.options.remoteFunc"
-            placeholder="请选择远端方法"
-            clearable
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in apiOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in apiOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
 
           <el-input v-model="widget.options.props.value">
             <div slot="prepend" style="width:50px;">值</div>

package/packages/FormMaking/custom/configs/radio.vue

@@ -48,19 +48,21 @@
       <el-form-item label-width="0">
         <template v-if="widget.options.remote">
           <el-select
-            style="width:100%"
-            v-model="widget.options.remoteFunc"
-            placeholder="请选择远端方法"
-            clearable
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in apiOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in apiOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
 
           <el-input v-model="widget.options.props.value">
             <div slot="prepend" style="width:50px;">值</div>

package/packages/FormMaking/custom/configs/select.vue

@@ -45,19 +45,21 @@
       <el-form-item label-width="0">
         <template v-if="widget.options.remote">
           <el-select
-            style="width:100%"
-            v-model="widget.options.remoteFunc"
-            placeholder="请选择远端方法"
-            clearable
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in apiOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in apiOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
 
           <el-input v-model="widget.options.props.value">
             <div slot="prepend" style="width:50px;">值</div>

package/packages/FormMaking/custom/configs/tabs.vue

@@ -57,18 +57,21 @@
       <el-form-item label-width="0">
         <div v-if="widget.options.remote">
           <el-select
-            v-model="widget.options.remoteFunc"
-            style="width:100%;"
-            placeholder="请选择远端方法"
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in apiOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in apiOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
 
           <!-- <el-input size="mini" style="" v-model="widget.options.props.value">
             <template slot="prepend">

package/packages/FormMaking/custom/configs/upload.vue

@@ -75,9 +75,12 @@
         </el-radio-group>
         <el-select
           v-if="widget.options.remote"
-          v-model="widget.options.remoteFunc"
           style="width:100%"
-          placeholder="请选择远端方法"
+          v-model="widget.options.remoteFunc"
+          placeholder="请选择"
+          no-data-text="暂无数据，请查阅相关文档说明"
+          clearable
+          filterable
         >
           <el-option
             v-for="item in apiOptions"

package/packages/FormMaking/custom/items/button.vue

@@ -33,28 +33,29 @@ export default {
     this.axios = Axios.init(JSON.parse(oauthConfig));
   },
   methods: {
-    hendleRemoteData() {
-      const remoteFunc = this.widget.options.remoteFunc;
-      const requestConfig = {
-        url: `/lc/api${remoteFunc.url}`,
-        method: remoteFunc.method,
-        headers: remoteFunc.headers
-      };
-      let params = { ...remoteFunc.params };
-      if (remoteFunc.needPage) {
-        params.pageNum = 1;
-        params.pageSize = 20;
-      }
-      if (remoteFunc.method.toLowerCase() === "get") {
-        requestConfig.params = params;
-      } else {
-        params = Object.assign(params, this.models);
-        requestConfig.data = params;
-      }
-      this.axios(requestConfig).then(res => {
-        this.$emit("button-submit", requestConfig);
-      });
-    }
+    // hendleRemoteData() {
+    //   const remoteFunc = this.config.network[this.widget.options.remoteFunc];
+    //   console.log(remoteFunc);
+    //   const requestConfig = {
+    //     url: remoteFunc.url,
+    //     method: remoteFunc.method,
+    //     headers: remoteFunc.headers
+    //   };
+    //   let params = { ...remoteFunc.params };
+    //   if (remoteFunc.needPage) {
+    //     params.pageNum = 1;
+    //     params.pageSize = 20;
+    //   }
+    //   if (remoteFunc.method.toLowerCase() === "get") {
+    //     requestConfig.params = params;
+    //   } else {
+    //     params = Object.assign(params, this.models);
+    //     requestConfig.data = params;
+    //   }
+    //   this.axios(requestConfig).then(res => {
+    //     this.$emit("button-submit", requestConfig);
+    //   });
+    // }
   }
 };
 </script>

package/packages/FormMaking/custom/mixins/index.js

@@ -81,7 +81,8 @@ export const eventMixin = {
         }
       }
       if (this.widget.type === "button") {
-        this.hendleRemoteData();
+        this.$emit("button-submit", this.widget.options.remoteFunc);
+        // this.hendleRemoteData();
         return;
       }
     },

package/packages/FormMaking/util/index.js

@@ -65,3 +65,34 @@ export const deepClone = (obj, clone) => {
   }
   return clone;
 };
+
+// 链式读取对象属性
+export const getProperty = (obj = {}, str = "") => {
+  let dic = deepClone(obj);
+  const props = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
+  const keys = props.split(".");
+  for (const key of keys) {
+    dic = dic[key] || "";
+  }
+  return dic;
+};
+
+// 链式设置对象属性
+export const setProperty = (obj = {}, str = "", value = "", isClone) => {
+  let dic = isClone ? deepClone(obj) : obj;
+  let propValue = "";
+  const props = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
+  const keys = props.split(".");
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    if (keys.length === 1) {
+      dic[key] = value;
+    } else if (i === keys.length - 1) {
+      propValue[key] = value;
+    } else {
+      if (!dic[key]) dic[key] = {};
+      propValue = dic[key];
+    }
+  }
+  return dic;
+};

package/packages/TableMaking/util/index.js

@@ -484,3 +484,34 @@ export const deepMerge = (target, other) => {
   }
   return target;
 };
+
+// 链式读取对象属性
+export const getProperty = (obj = {}, str = "") => {
+  let dic = deepClone(obj);
+  const props = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
+  const keys = props.split(".");
+  for (const key of keys) {
+    dic = dic[key] || "";
+  }
+  return dic;
+};
+
+// 链式设置对象属性
+export const setProperty = (obj = {}, str = "", value = "", isClone) => {
+  let dic = isClone ? deepClone(obj) : obj;
+  let propValue = "";
+  const props = str.replace(/\[(\w+)\]/g, ".$1"); // 处理数组下标
+  const keys = props.split(".");
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    if (keys.length === 1) {
+      dic[key] = value;
+    } else if (i === keys.length - 1) {
+      propValue[key] = value;
+    } else {
+      if (!dic[key]) dic[key] = {};
+      propValue = dic[key];
+    }
+  }
+  return dic;
+};

package/packages/TableMaking/widgetConfig.vue

@@ -79,7 +79,7 @@
               <el-tooltip
                 slot="label"
                 effect="light"
-                content="开启后，列表接口值修改，会触发 remote-params 回调，用于从服务器查询字段，"
+                content="开启后，列表接口值修改，会触发 remote-params 回调，用于从服务器查询字段"
                 placement="top"
               >
                 <span style="color: #409EFF;">远程字段</span>
@@ -724,6 +724,9 @@ export default {
     "config.table.mounted.api"(val) {
       this.handleFieldsApiChange(val, true);
     },
+    "config.table.fields.remote"(bool) {
+      if (bool) this.handleFieldsApiChange(this.config.table.mounted.api, true);
+    },
     "config.tools.add.show"(bool) {
       if (bool) this.handleFieldsApiChange(this.config.tools.add.api);
     },
@@ -802,10 +805,12 @@ export default {
         return;
       }
 
-      const initParams = (paramsList, pAlias) => {
+      const initParams = (paramsList, pAlias, bool) => {
         paramsList.forEach(item => {
-          item.elType = "input";
-          item.align = "left";
+          if (bool) {
+            item.elType = "input";
+            item.align = "left";
+          }
           item.pAlias = pAlias ? `${pAlias}.${item.alias}` : item.alias;
           if (item.children && item.children.length) {
             initParams(item.children, item.pAlias);
@@ -815,25 +820,27 @@ export default {
 
       if (this.config.table.fields.remote) {
         const callback = res => {
-          api.inParams = res.inParams;
-          api.outParams = res.outParams;
+          api.inParams = deepClone(res.inParams);
+          api.outParams = deepClone(res.outParams);
+          initParams(api.inParams, null, false);
+          initParams(api.outParams, null, false);
           if (isFields) {
             this.fieldsData.inParams = deepClone(res.inParams || []);
-            initParams(this.fieldsData.inParams);
+            initParams(this.fieldsData.inParams, null, true);
             this.fieldsData.outParams = deepClone(res.outParams || []);
-            initParams(this.fieldsData.outParams);
+            initParams(this.fieldsData.outParams, null, true);
           }
         };
         this.$emit("remote-params", apiId, callback);
-        return;
-      }
-
-      if (isFields) {
-        this.fieldsData.inParams = deepClone(api.inParams || []);
-        initParams(this.fieldsData.inParams);
-        this.fieldsData.outParams = deepClone(api.outParams || []);
-        initParams(this.fieldsData.outParams);
-        return;
+      } else {
+        initParams(deepClone(api.inParams), null, false);
+        initParams(deepClone(api.outParams), null, false);
+        if (isFields) {
+          this.fieldsData.inParams = deepClone(api.inParams || []);
+          initParams(this.fieldsData.inParams, null, true);
+          this.fieldsData.outParams = deepClone(api.outParams || []);
+          initParams(this.fieldsData.outParams, null, true);
+        }
       }
     },
     handleTreeCheckChange(action) {