tianheng-ui 0.1.44 → 0.1.46

package/packages/FormMaking/index.vue

@@ -111,7 +111,6 @@
         :basicComponents="basicComponents"
         :layoutComponents="layoutComponents"
         :formData="formConfig"
-        :formValue="widgetValue"
         :oauthConfig="oauthConfig"
         :apiOptions="apiOptions"
         @click="handleWidgetToolsChange"
@@ -133,10 +132,9 @@
       <widget-config
         :data="widgetFormSelect"
         :config="formConfig.config"
-        :fields="fields"
-        :apiConfig="apiConfig"
+        :apiOptions="apiOptions"
         ref="configRef"
-        @fieldsChange="handleFieldsChange"
+        @remote-params="handleRemoteParams"
         @update="handleWidgetConfigUpdate"
       >
       </widget-config>
@@ -229,9 +227,7 @@ export default {
     return {
       formConfig: this.baseConfig,
       widgetFormSelect: {},
-      widgetValue: {},
       configTab: "form",
-      fields: [],
       apiConfig: {},
       collapseValue: ["group-basic", "group-advance", "group-layout"]
     };
@@ -265,11 +261,10 @@ export default {
     },
     config(val) {
       this.setConfig(val);
-      this.initApiConfig();
+      this.handleNetworkConfig();
     },
     apiOptions(val) {
-      this.initApiConfig();
-      this.handleFieldsChange();
+      this.handleNetworkConfig();
     }
   },
   created() {
@@ -283,7 +278,7 @@ export default {
     }
   },
   mounted() {
-    this.initApiConfig();
+    this.handleNetworkConfig();
   },
   methods: {
     // 初始化组件配置
@@ -310,14 +305,35 @@ export default {
         });
       }
     },
-    initApiConfig() {
-      this.apiConfig = {};
-      if (this.apiOptions.length) {
-        this.apiOptions.map(item => {
-          this.apiConfig[item.id] = item;
-        });
+    handleNetworkConfig() {
+      if (!this.apiOptions.length || !this.formConfig.config) {
+        this.formConfig.config.network = {};
+        return;
       }
-      this.formConfig.config.network = this.apiConfig;
+      const fieldsApi = {
+        fields: this.formConfig.config.fields.api,
+        mounted: this.formConfig.config.mounted.api
+      };
+      const initList = list => {
+        for (const item of list) {
+          if (item.type === "grid" || item.type === "tabs") {
+            item.options.columns.forEach(e => {
+              initList(e.list);
+            });
+          } else if (item.type === "table" || item.type === "tableH5") {
+            initList(item.options.columns);
+          } else if (item.options.remote || item.options.remoteFunc) {
+            fieldsApi[item.model] = item.options.remoteFunc;
+          }
+        }
+      };
+      initList(this.formConfig.list);
+      const apis = Object.values(fieldsApi);
+      const network = {};
+      this.apiOptions.map(item => {
+        if (apis.includes(item.id)) network[item.id] = item;
+      });
+      this.formConfig.config.network = network;
     },
 
     handleConfigSelect(value) {
@@ -329,6 +345,7 @@ export default {
       this.widgetFormSelect = {};
     },
     handleWidgetToolsChange(val, data) {
+      console.log(val, data);
       switch (val) {
         case "import-excel":
         case "import-json":
@@ -345,55 +362,49 @@ export default {
     handleWidgetConfigUpdate(val) {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
-    handleFieldsChange() {
-      const data = this.apiConfig[this.formConfig.config.fieldsApi];
-      if (data) {
-        this.fields = data.paramsOut.map(item => {
-          return {
-            label: item.note || item.name,
-            alias: item.name,
-            prop: item.name,
-            type: "input",
-            align: "left"
-          };
-        });
-      } else this.fields = [];
+    handleRemoteParams(val, callback) {
+      this.$emit("remote-params", val, callback);
     },
     clear() {
       this.handleClear();
     },
     getConfig() {
+      const formValidate = () => {
+        if (!this.formConfig.config.fields.type) {
+          this.$message.warning("请选择字段类型");
+          return false;
+        }
+        if (
+          this.formConfig.config.fields.type === "api" &&
+          !this.formConfig.config.fields.api
+        ) {
+          this.$message.warning("请选择字段接口");
+          return false;
+        }
+        if (!this.formConfig.config.title) {
+          this.$message.warning("请填写表单标题");
+          return false;
+        }
+        return true;
+      };
       return new Promise((resolve, reject) =>
         this.$refs.configRef
           .formValidate()
           .then(res => {
             if (res) {
-              const data = deepClone(this.formConfig);
-              data.config.network = this.apiConfig;
-              resolve(data);
-            } else {
-              reject();
-            }
+              if (formValidate()) {
+                this.handleNetworkConfig();
+                const data = deepClone(this.formConfig);
+                resolve(data);
+              } else reject();
+            } else reject();
           })
           .catch(err => {
-            if (!this.formConfig.config.fieldsType) {
-              this.$message.warning("请选择字段类型");
-              return reject();
-            }
-            if (
-              this.formConfig.config.fieldsType === "fieldsApi" &&
-              !this.formConfig.config.fieldsApi
-            ) {
-              this.$message.warning("请选择字段接口");
-              return reject();
-            }
-            if (!this.formConfig.config.title) {
-              this.$message.warning("请填写表单标题");
-              return reject();
-            }
-            const data = deepClone(this.formConfig);
-            data.config.network = this.apiConfig;
-            resolve(data);
+            if (formValidate()) {
+              this.handleNetworkConfig();
+              const data = deepClone(this.formConfig);
+              resolve(data);
+            } else reject();
           })
       );
     },
@@ -406,8 +417,6 @@ export default {
       if (this.formConfig.list.length > 0) {
         this.widgetFormSelect = this.formConfig.list[0];
       }
-
-      this.handleFieldsChange();
     }
   }
 };

package/packages/TableMaking/custom/config.js

@@ -6,7 +6,10 @@ export const search = {
 
 // 列表配置
 export const table = {
-  fieldsType: "fieldsApi",
+  fields: {
+    type: "api",
+    remote: false
+  },
   mounted: { api: "" },
   options: [],
   pageInfo: {

package/packages/TableMaking/custom/items/table/index-pc.vue

@@ -20,8 +20,8 @@
         </el-table-column>
         <el-table-column
           v-else
-          :key="item.pProp"
-          :prop="item.pProp"
+          :key="item.pAlias"
+          :prop="item.pAlias"
           :label="item.label"
           :width="item.width"
         >
@@ -32,7 +32,7 @@
               :scope="scope"
               :option="item"
             />
-            <span v-else>{{ getValue(scope.row, item.pProp) }}</span>
+            <span v-else>{{ getValue(scope.row, item.pAlias) }}</span>
           </template>
         </el-table-column>
       </template>

package/packages/TableMaking/index.vue

@@ -19,6 +19,7 @@
         :config="tableConfig"
         :formOptions="formOptions"
         :apiOptions="apiOptions"
+        @remote-params="handleRemoteParams"
         ref="configRef"
       ></widget-config>
     </div>
@@ -87,17 +88,41 @@ export default {
     };
   },
   watch: {
+    apiOptions(val) {
+      this.handleNetwork();
+    },
+    config(val) {
+      this.tableConfig = Object.assign(this.baseConfig, val);
+      this.handleNetwork();
+    },
     tableConfig: {
       deep: true,
       handler: function(val) {
         this.$emit("update:config", val);
       }
     },
-    config(val) {
-      this.tableConfig = Object.assign(this.baseConfig, val);
+    "tableConfig.table.mounted.api"(val) {
       this.handleNetwork();
     },
-    apiOptions(val) {
+    "tableConfig.tools.add.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.edit.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.look.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.delete.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.batchDelete.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.export.api"(val) {
+      this.handleNetwork();
+    },
+    "tableConfig.tools.import.api"(val) {
       this.handleNetwork();
     }
   },
@@ -106,9 +131,19 @@ export default {
   },
   methods: {
     handleNetwork() {
+      const apis = [];
+      if (this.tableConfig.table.mounted.api)
+        apis.push(this.tableConfig.table.mounted.api);
+      const toolsArr = Object.values(this.tableConfig.tools);
+      for (const item of toolsArr) {
+        if (item.api) apis.push(item.api);
+      }
+
       const network = {};
       this.apiOptions.map(item => {
-        network[item.id] = item;
+        if (apis.includes(item.id)) {
+          network[item.id] = item;
+        }
       });
       this.tableConfig.network = network;
     },
@@ -126,6 +161,9 @@ export default {
           break;
       }
     },
+    handleRemoteParams(val, callback) {
+      this.$emit("remote-params", val, callback);
+    },
     getConfig() {
       return new Promise((resolve, reject) =>
         this.$refs.configRef
@@ -139,12 +177,12 @@ export default {
             }
           })
           .catch(err => {
-            if (!this.tableConfig.table.fieldsType) {
+            if (!this.tableConfig.table.fields.type) {
               this.$message.warning("请选择字段表");
               return reject();
             }
             if (
-              this.tableConfig.table.fieldsType === "fieldsApi" &&
+              this.tableConfig.table.fields.type === "api" &&
               !this.tableConfig.table.mounted.api
             ) {
               this.$message.warning("请选择列表接口");

package/packages/TableMaking/widgetConfig.vue

@@ -23,7 +23,7 @@
               node-key="key"
               :default-expand-all="true"
               :check-strictly="true"
-              :props="{ label: 'label', value: 'prop' }"
+              :props="{ label: 'label', value: 'alias' }"
               @check-change="handleTreeCheckChange('search')"
             >
             </el-tree>
@@ -37,7 +37,7 @@
               node-key="key"
               :default-expand-all="true"
               :check-strictly="true"
-              :props="{ label: 'label', value: 'prop' }"
+              :props="{ label: 'label', value: 'alias' }"
               @check-change="handleTreeCheckChange('table')"
             >
             </el-tree>
@@ -57,7 +57,7 @@
       >
         <el-collapse v-model="collapseValue">
           <el-collapse-item title="列表配置" name="group-table">
-            <el-form-item required prop="table.fieldsType">
+            <el-form-item required prop="table.fields.type">
               <el-tooltip
                 slot="label"
                 effect="light"
@@ -66,13 +66,25 @@
               >
                 <span style="color: #409EFF;">字段类型</span>
               </el-tooltip>
-              <el-radio-group v-model="config.table.fieldsType">
+              <el-radio-group v-model="config.table.fields.type">
                 <el-radio-button label="custom" disabled
                   >自定义</el-radio-button
                 >
-                <el-radio-button label="fieldsApi">接口导入</el-radio-button>
-              </el-radio-group> </el-form-item
-            ><el-form-item required prop="table.mounted.api">
+                <el-radio-button label="api">接口导入</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip
+                slot="label"
+                effect="light"
+                content="开启后，列表接口值修改，会触发 remote-params 回调，用于从服务器查询字段，"
+                placement="top"
+              >
+                <span style="color: #409EFF;">远程字段</span>
+              </el-tooltip>
+              <el-switch v-model="config.table.fields.remote"> </el-switch>
+            </el-form-item>
+            <el-form-item required prop="table.mounted.api">
               <el-tooltip
                 slot="label"
                 effect="light"
@@ -87,12 +99,13 @@
                 clearable
                 placeholder="请选择"
                 no-data-text="暂无接口，请前往【接口模块】创建"
+                filterable
                 @change="handleFieldsApiChange"
               >
                 <el-option
                   v-for="item in apiOptions"
                   :key="item.id"
-                  :label="item.label"
+                  :label="item.name"
                   :value="item.id"
                 >
                 </el-option>
@@ -126,7 +139,7 @@
               >
                 <el-option
                   v-for="item in config.table.options"
-                  :key="item.prop"
+                  :key="item.alias"
                   :label="item.label"
                   :value="item.alias"
                 >
@@ -616,7 +629,7 @@
                 <el-option
                   v-for="item in apiOptions"
                   :key="item.id"
-                  :label="item.label"
+                  :label="item.name"
                   :value="item.id"
                 >
                 </el-option>
@@ -684,17 +697,14 @@ export default {
         { label: "右对齐", value: "right" }
       ],
       formRules: {
-        "table.fieldsType": [
+        "table.fields.type": [
           { required: true, message: "请选择字段类型", trigger: "change" }
         ],
-        "table.fieldsApi": [
-          { required: true, message: "请选择字段表", trigger: "change" }
+        "table.mounted.api": [
+          { required: true, message: "请选择列表接口", trigger: "change" }
         ],
         "table.title": [
           { required: true, message: "请选择列表名称", trigger: "change" }
-        ],
-        "table.mounted.api": [
-          { required: true, message: "请选择列表接口", trigger: "change" }
         ]
       },
       fieldsTree: {
@@ -713,10 +723,10 @@ export default {
   },
   watch: {
     config(val) {
-      this.handleFieldsApiChange(val.table.mounted.api);
+      this.handleInitFields(val.table.mounted.api);
     },
     apiOptions() {
-      this.handleFieldsApiChange(this.config.table.mounted.api);
+      this.handleInitFields(this.config.table.mounted.api);
     }
   },
   computed: {
@@ -739,25 +749,43 @@ export default {
       this.dialog = { show: true, data };
     },
     handleFieldsApiChange(val) {
+      this.fieldsTree = { search: [], table: [] };
+      this.config.search.options = [];
+      this.config.table.options = [];
+      this.handleInitFields(val);
+    },
+    handleInitFields(apiId) {
       const api = this.apiOptions.filter(item => {
-        return item.id === val;
+        return item.id === apiId;
       })[0];
-      if (!api) return (this.fieldsTree = { search: [], table: [] });
+      if (!api) return;
 
-      const initParams = (paramsList, pProp) => {
+      const initParams = (paramsList, pAlias) => {
         paramsList.forEach(item => {
           item.elType = "input";
           item.align = "left";
-          item.pProp = pProp ? `${pProp}.${item.prop}` : item.prop;
+          item.pAlias = pAlias ? `${pAlias}.${item.alias}` : item.alias;
           if (item.children && item.children.length) {
-            initParams(item.children, item.pProp);
+            initParams(item.children, item.pAlias);
           }
         });
       };
-      this.fieldsTree.search = deepClone(api.interfaceParameterInputList) || [];
-      initParams(this.fieldsTree.search);
-      this.fieldsTree.table = deepClone(api.interfaceParameterOutPutList) || [];
-      initParams(this.fieldsTree.table);
+      if (this.config.table.fields.remote) {
+        const callback = res => {
+          api.inParams = res.inParams;
+          api.outParams = res.outParams;
+          this.fieldsTree.search = deepClone(res.inParams) || [];
+          initParams(this.fieldsTree.search);
+          this.fieldsTree.table = deepClone(res.outParams) || [];
+          initParams(this.fieldsTree.table);
+        };
+        this.$emit("remote-params", apiId, callback);
+      } else {
+        this.fieldsTree.search = deepClone(api.inParams) || [];
+        initParams(this.fieldsTree.search);
+        this.fieldsTree.table = deepClone(api.outParams) || [];
+        initParams(this.fieldsTree.table);
+      }
     },
     handleTreeCheckChange(action) {
       if (action === "search") {

package/packages/TableMaking/widgetTable.vue

@@ -47,14 +47,14 @@
       >
         <div
           v-for="item in config.search.options"
-          :key="item.prop"
+          :key="item.pAlias"
           class="table-item"
         >
           <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
           <el-input v-model="item.label" size="mini"></el-input>
-          <el-input v-model="item.pProp" size="mini"></el-input>
+          <el-input v-model="item.pAlias" size="mini"></el-input>
           <div>
             <el-select
               v-model="item.elType"
@@ -135,14 +135,14 @@
       >
         <div
           v-for="item in config.table.options"
-          :key="item.prop"
+          :key="item.pAlias"
           class="table-item"
         >
           <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
           <el-input v-model="item.label" size="mini"></el-input>
-          <el-input v-model="item.pProp" size="mini"></el-input>
+          <el-input v-model="item.pAlias" size="mini"></el-input>
           <div>
             <el-select v-model="item.align" placeholder="请选择" size="mini">
               <el-option