tianheng-ui 0.1.47 → 0.1.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "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 {
@@ -222,7 +222,7 @@ export default {
       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,10 +231,10 @@ export default {
       };
       const params = {};
       for (let e of api.inParams) {
-        params[e.alias] =
-          eval(`this.models.${e.pAlias}`) ||
-          eval(`this.query.${e.pAlias}`) ||
-          null;
+        const value =
+          getProperty(this.models, e.pAlias) ||
+          getProperty(this.query, e.pAlias);
+        setProperty(params, e.pAlias, value || null);
       }
       if (api.needPage) {
         params.pageNum = 1;
@@ -255,7 +255,43 @@ export default {
       });
     },
     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

@@ -196,9 +196,10 @@
                 <el-select
                   v-model="config.fields.api"
                   style="width:100%"
-                  clearable
                   placeholder="请选择"
                   no-data-text="暂无接口，请前往【数据源模块】创建"
+                  clearable
+                  filterable
                 >
                   <el-option
                     v-for="item in apiOptions"
@@ -577,23 +578,22 @@ export default {
     },
     handleFieldsApiChange(apiId, isFields) {
       if (isFields) this.fieldsData = { inParams: [], outParams: [] };
+      if (!this.apiOptions.length || !apiId) return;
 
-      if (!this.apiOptions.length || !this.config.fields.api || !apiId) {
-        return;
-      }
       const api = this.apiOptions.filter(item => {
         return item.id === apiId;
       })[0];
-
       if (!api) {
-        this.$message.warning("未知的接口名，请检查配置信息");
+        this.$message.warning("未知的接口，请检查配置信息");
         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);
@@ -603,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/widgetConfig.vue

@@ -102,6 +102,7 @@
                 placeholder="请选择"
                 no-data-text="暂无接口，请前往【接口模块】创建"
                 filterable
+                @change="handleResetTableFields"
               >
                 <el-option
                   v-for="item in apiOptions"
@@ -782,28 +783,31 @@ export default {
   },
   mounted() {},
   methods: {
+    handleResetTableFields() {
+      this.config.search.options = [];
+      this.config.table.options = [];
+    },
     handleActionConfig(data) {
       this.dialog = { show: true, data };
     },
     handleFieldsApiChange(apiId, isFields) {
-      if (isFields) {
-        // this.config.search.options = [];
-        // this.config.table.options = [];
-        this.fieldsData = { inParams: [], outParams: [] };
-      }
-      if (!apiId) return;
+      if (isFields) this.fieldsData = { inParams: [], outParams: [] };
+      if (!this.apiOptions.length || !apiId) return;
+
       const api = this.apiOptions.filter(item => {
         return item.id === apiId;
       })[0];
       if (!api) {
-        this.$message.warning("未知的接口名，请检查配置信息");
+        this.$message.warning("未知的接口，请检查配置信息");
         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,23 +819,25 @@ export default {
         const callback = res => {
           api.inParams = res.inParams;
           api.outParams = 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);
+        }
       }
     },
     handleTreeCheckChange(action) {

package/packages/TableMaking/widgetTable.vue

@@ -47,7 +47,7 @@
       >
         <div
           v-for="item in config.search.options"
-          :key="item.pAlias"
+          :key="item.id"
           class="table-item"
         >
           <div class="table-item-custom drag">
@@ -135,7 +135,7 @@
       >
         <div
           v-for="item in config.table.options"
-          :key="item.pAlias"
+          :key="item.id"
           class="table-item"
         >
           <div class="table-item-custom drag">