tianheng-ui 0.1.46 → 0.1.48

package/package.json

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

package/packages/FormMaking/WidgetConfig.vue

@@ -198,6 +198,7 @@
                   style="width:100%"
                   clearable
                   placeholder="请选择"
+                  filterable
                   no-data-text="暂无接口，请前往【数据源模块】创建"
                 >
                   <el-option
@@ -506,13 +507,16 @@ export default {
   },
   watch: {
     "config.fields.api"(val) {
+      this.handleFieldsApiChange(val, true);
+    },
+    "config.mounted.api"(val) {
       this.handleFieldsApiChange(val);
     },
     "data.options.remoteFunc"(val) {
       this.handleFieldsApiChange(val);
     },
     apiOptions() {
-      this.handleFieldsApiChange(this.config.fields.api);
+      this.handleFieldsApiChange(this.config.fields.api, true);
     }
   },
   created() {
@@ -572,17 +576,15 @@ export default {
       const config = deepClone(this.compsData[val].config);
       this.$emit("update", config);
     },
-    handleFieldsApiChange(apiId) {
-      if (!this.apiOptions.length || !this.config.fields.api) {
-        this.fieldsData = { inParams: [], outParams: [] };
-        return;
-      }
+    handleFieldsApiChange(apiId, isFields) {
+      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.fieldsData = { inParams: [], outParams: [] };
+        this.$message.warning("未知的接口，请检查配置信息");
         return;
       }
 
@@ -596,21 +598,28 @@ export default {
           }
         });
       };
+
       if (this.config.fields.remote) {
         const callback = res => {
           api.inParams = res.inParams;
           api.outParams = res.outParams;
-          this.fieldsData.inParams = deepClone(res.inParams) || [];
-          initParams(this.fieldsData.inParams);
-          this.fieldsData.outParams = deepClone(res.outParams) || [];
-          initParams(this.fieldsData.outParams);
+          if (isFields) {
+            this.fieldsData.inParams = deepClone(res.inParams || []);
+            initParams(this.fieldsData.inParams);
+            this.fieldsData.outParams = deepClone(res.outParams || []);
+            initParams(this.fieldsData.outParams);
+          }
         };
         this.$emit("remote-params", apiId, callback);
-      } else {
-        this.fieldsData.inParams = deepClone(api.inParams) || [];
+        return;
+      }
+
+      if (isFields) {
+        this.fieldsData.inParams = deepClone(api.inParams || []);
         initParams(this.fieldsData.inParams);
-        this.fieldsData.outParams = deepClone(api.outParams) || [];
+        this.fieldsData.outParams = deepClone(api.outParams || []);
         initParams(this.fieldsData.outParams);
+        return;
       }
     },
     formValidate() {

package/packages/FormMaking/WidgetTools.vue

@@ -166,9 +166,8 @@
           v-if="dialog.show"
           :config="formData"
           :oauthConfig="oauthConfig"
-          :remoteData="remoteData"
           :slotKeys="slotKeys"
-          @on-change="handleDataChange"
+          @change="handleDataChange"
           @button-submit="handleButtonSubmit"
           ref="generateForm"
         >
@@ -189,9 +188,7 @@
             class="box"
             :config="formData"
             :oauthConfig="oauthConfig"
-            :remote="remoteData"
-            insite="true"
-            @on-change="handleDataChange"
+            @change="handleDataChange"
             @button-submit="handleButtonSubmit"
             ref="generateForm"
           >
@@ -258,29 +255,6 @@ export default {
         generateJson: "生成JSON",
         generateCode: "生成代码"
       },
-      remoteData: {
-        func_test(resolve) {
-          setTimeout(() => {
-            const options = [
-              { id: "1", name: "1111" },
-              { id: "2", name: "2222" },
-              { id: "3", name: "3333" }
-            ];
-
-            resolve(options);
-          }, 2000);
-        },
-        funcGetToken(resolve) {
-          request
-            .get("http://tools-server.making.link/api/uptoken")
-            .then(res => {
-              resolve(res.uptoken);
-            });
-        },
-        upload_callback(response, file, fileList) {
-          console.log("callback", response, file, fileList);
-        }
-      },
       slotKeys: ["blank_1681093126000_96387"]
     };
   },

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

@@ -45,7 +45,14 @@
       </el-form-item>
 
       <el-form-item label="数据类型">
-        <el-radio-group v-model="widget.options.remote">
+        <el-radio-group
+          v-model="widget.options.remote"
+          @input="
+            val => {
+              if (!val) widget.options.remoteFunc = '';
+            }
+          "
+        >
           <el-radio-button :label="false">静态数据</el-radio-button>
           <el-radio-button :label="true">远端数据</el-radio-button>
         </el-radio-group>

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

@@ -32,7 +32,14 @@
       </el-form-item>
 
       <el-form-item label="数据类型">
-        <el-radio-group v-model="widget.options.remote">
+        <el-radio-group
+          v-model="widget.options.remote"
+          @input="
+            val => {
+              if (!val) widget.options.remoteFunc = '';
+            }
+          "
+        >
           <el-radio-button :label="false">静态数据</el-radio-button>
           <el-radio-button :label="true">远端数据</el-radio-button>
         </el-radio-group>

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

@@ -29,7 +29,14 @@
       </el-form-item>
 
       <el-form-item label="数据类型">
-        <el-radio-group v-model="widget.options.remote">
+        <el-radio-group
+          v-model="widget.options.remote"
+          @input="
+            val => {
+              if (!val) widget.options.remoteFunc = '';
+            }
+          "
+        >
           <el-radio-button :label="false">静态数据</el-radio-button>
           <el-radio-button :label="true">远端数据</el-radio-button>
         </el-radio-group>

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

@@ -41,7 +41,14 @@
       </el-form-item>
 
       <el-form-item label="数据类型">
-        <el-radio-group v-model="widget.options.remote">
+        <el-radio-group
+          v-model="widget.options.remote"
+          @input="
+            val => {
+              if (!val) widget.options.remoteFunc = '';
+            }
+          "
+        >
           <el-radio-button :label="false">静态数据</el-radio-button>
           <el-radio-button :label="true">远端数据</el-radio-button>
         </el-radio-group>

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

@@ -61,7 +61,15 @@
       </el-form-item>
 
       <el-form-item label="上传地址" :required="true">
-        <el-radio-group v-model="widget.options.remote" size="mini">
+        <el-radio-group
+          v-model="widget.options.remote"
+          size="mini"
+          @input="
+            val => {
+              if (!val) widget.options.remoteFunc = '';
+            }
+          "
+        >
           <el-radio-button :label="false">静态接口</el-radio-button>
           <el-radio-button :label="true">远端接口</el-radio-button>
         </el-radio-group>

package/packages/FormMaking/index.vue

@@ -261,10 +261,10 @@ export default {
     },
     config(val) {
       this.setConfig(val);
-      this.handleNetworkConfig();
+      this.handleNetworkConfig(true);
     },
     apiOptions(val) {
-      this.handleNetworkConfig();
+      this.handleNetworkConfig(true);
     }
   },
   created() {
@@ -278,7 +278,7 @@ export default {
     }
   },
   mounted() {
-    this.handleNetworkConfig();
+    this.handleNetworkConfig(true);
   },
   methods: {
     // 初始化组件配置
@@ -305,7 +305,7 @@ export default {
         });
       }
     },
-    handleNetworkConfig() {
+    handleNetworkConfig(isGetParams) {
       if (!this.apiOptions.length || !this.formConfig.config) {
         this.formConfig.config.network = {};
         return;
@@ -330,8 +330,18 @@ export default {
       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.apiOptions.map(api => {
+        if (apis.includes(api.id)) {
+          // 初始化接口参数
+          if (this.formConfig.config.fields.remote && isGetParams) {
+            const callback = res => {
+              api.inParams = res.inParams;
+              api.outParams = res.outParams;
+            };
+            this.$emit("remote-params", api.id, callback);
+          }
+          network[api.id] = api;
+        }
       });
       this.formConfig.config.network = network;
     },
@@ -345,7 +355,6 @@ export default {
       this.widgetFormSelect = {};
     },
     handleWidgetToolsChange(val, data) {
-      console.log(val, data);
       switch (val) {
         case "import-excel":
         case "import-json":

package/packages/TableMaking/WidgetTools.vue

@@ -4,7 +4,7 @@
       <slot> </slot>
     </div>
     <div class="right">
-      <el-button
+      <!-- <el-button
         v-if="permissions.includes('clearable')"
         style="margin-left:10px;"
         type="text"
@@ -13,7 +13,7 @@
         disabled
         @click="handleClick('clear')"
         >重置
-      </el-button>
+      </el-button> -->
       <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
         <el-button
           v-if="permissions.includes('preview')"
@@ -131,10 +131,14 @@
       @on-affirm="handleDialogAffirm"
     >
       <template v-if="dialog.action === 'previewPc'">
-        <th-table-generate :config="deepClone(config)"> </th-table-generate>
+        <th-table-generate :config="deepClone(tableConfig)">
+        </th-table-generate>
       </template>
       <template v-if="dialog.action === 'previewH5'">
-        <th-list-generate :data="[]" :config="deepClone(config)">
+        <th-list-generate
+          :data="[{ id: new Date().getTime() }]"
+          :config="deepClone(tableConfig)"
+        >
         </th-list-generate>
       </template>
       <template v-else-if="dialog.action === 'importJson'">
@@ -142,17 +146,11 @@
           type="info"
           title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
         ></el-alert>
-        <th-code-editor
-          v-model="dialog.data.config"
-          ref="codeEditor"
-        ></th-code-editor>
+        <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
       </template>
       <template v-else-if="dialog.action === 'importTemplate'"></template>
       <template v-else-if="dialog.action === 'generateJson'">
-        <th-code-editor
-          v-model="dialog.data.config"
-          ref="codeEditor"
-        ></th-code-editor>
+        <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
       </template>
       <template v-else-if="dialog.action === 'generateCode'"></template>
     </th-dialog>
@@ -165,10 +163,12 @@ import { deepClone } from "./util";
 export default {
   props: {
     config: Object,
+    apiOptions: Array,
     permissions: Array
   },
   data() {
     return {
+      tableConfig: this.config,
       dialog: {
         show: false,
         action: "",
@@ -184,23 +184,48 @@ export default {
       }
     };
   },
+  watch: {
+    config(val) {
+      this.tableConfig = val;
+    },
+    tableConfig(val) {
+      this.$emit("update:config", val);
+    }
+  },
   created() {},
   mounted() {},
   methods: {
     deepClone: deepClone,
-    handleClick(val, data) {
-      this.$emit("click", val, data);
+    handleNetworkConfig() {
+      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 && item.show) apis.push(item.api);
+      }
+
+      const network = {};
+      this.apiOptions.map(api => {
+        if (apis.includes(api.id)) {
+          network[api.id] = api;
+        }
+      });
+      this.tableConfig.network = network;
     },
     handleDialogOpen(action, data = {}) {
-      // if (action === "preview") {
-      //   const { href } = this.$router.resolve({ path: "" });
-      //   window.open(href, "_blank");
-      //   return;
-      // }
       switch (action) {
         case "generateJson":
-          const configText = JSON.stringify(this.config, null, 2);
-          data.config = configText;
+          this.handleNetworkConfig();
+          data = JSON.stringify(this.tableConfig, null, 2);
+          break;
+        case "importJson":
+          data = "";
+          break;
+        case "previewPc":
+        case "previewH5":
+        case "generateCode":
+          this.handleNetworkConfig();
           break;
 
         default:
@@ -220,7 +245,7 @@ export default {
       const action = this.dialog.action;
       switch (action) {
         case "importJson":
-          this.handleClick("import-json", JSON.parse(this.dialog.data.config));
+          this.tableConfig = JSON.parse(this.dialog.data);
           break;
 
         default:

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

@@ -1,11 +1,11 @@
 <template>
   <div class="generateTable-table">
     <div
-      v-for="item in data"
+      v-for="(groupItem, groupIndex) in data"
       class="table-list-item"
       :style="cellStyle"
-      :key="item.id"
-      @click="handleCellClick(item)"
+      :key="groupItem.id"
+      @click="handleClick({ type: 'listClick' }, groupItem, groupIndex)"
     >
       <div
         v-for="(column, index) in getList"
@@ -16,7 +16,7 @@
           {{ column.label }}
         </div>
         <div class="table-list-item-row-value" :style="valueStyle">
-          {{ item[column.prop] != null ? item[column.prop] : "" }}
+          {{ groupItem[column.prop] != null ? groupItem[column.prop] : "" }}
         </div>
       </div>
       <div class="table-list-item-tools">
@@ -29,7 +29,7 @@
           :round="button.style.round"
           :circle="button.style.circle"
           :size="button.style.size"
-          @click="handleActionClick(button, item)"
+          @click.stop="handleClick(button, groupItem, groupIndex)"
           >{{ button.text }}</el-button
         >
       </div>
@@ -76,12 +76,8 @@ export default {
     }
   },
   methods: {
-    stopClick() {},
-    handleCellClick(item) {
-      this.$emit("click", item);
-    },
-    handleActionClick(action, item) {
-      this.$emit("action", action, item);
+    handleClick(action, item, index) {
+      this.$emit("click", action, item, index);
     },
     initStyle(style) {
       let styleText = "";

package/packages/TableMaking/generateList.vue

@@ -6,6 +6,7 @@
       v-if="tableData.length"
       :data="tableData"
       :config="tableConfig"
+      @click="handleListClick"
     ></list>
     <th-empty v-else style="padding:100px 0;">
       <img
@@ -15,7 +16,7 @@
         alt=""
       />
     </th-empty>
-    <tools :config="toolsConfig" @click="handleActionClick"></tools>
+    <tools :config="toolsConfig" @click="handleListClick"></tools>
   </div>
 </template>
 
@@ -77,11 +78,22 @@ export default {
     handleSearchChange(data) {
       this.$emit("search", data);
     },
-    handleTableClick(data) {
-      this.$emit("click", data);
-    },
-    handleActionClick(action, data) {
-      this.tableData.push({ id: new Date().getTime() });
+    handleListClick(action, data, index) {
+      if (action.type === "listClick") {
+        this.$emit("click", data, index);
+        return;
+      }
+      switch (action.type) {
+        case "add":
+          this.tableData.push({ id: new Date().getTime() });
+          break;
+        case "delete":
+          this.tableData.splice(index, 1);
+          break;
+
+        default:
+          break;
+      }
       this.$emit("action", action, data);
     }
   }

package/packages/TableMaking/generateTable.vue

@@ -400,7 +400,7 @@ export default {
       let params = {};
       switch (actionType) {
         case "list":
-          for (let key of Object.keys(config.interfaceParameterInputList)) {
+          for (let key of Object.keys(config.inParams)) {
             params[key] = paramsData[key] || this.query[key];
           }
           if (this.tableConfig.pageInfo.show) {
@@ -411,7 +411,7 @@ export default {
         case "add":
         case "edit":
         case "delete":
-          for (let key of Object.keys(config.interfaceParameterInputList)) {
+          for (let key of Object.keys(config.inParams)) {
             params[key] = paramsData[key];
           }
           break;

package/packages/TableMaking/index.vue

@@ -2,10 +2,9 @@
   <div class="th-tableMaking th-flex_box">
     <div class="th-fiex_content">
       <widget-tools
-        :config="tableConfig"
-        :client="client"
+        :config.sync="tableConfig"
+        :apiOptions="apiOptions"
         :permissions="permissions"
-        @click="handleToolsClick"
       >
         <slot name="action"></slot>
       </widget-tools>
@@ -83,66 +82,49 @@ export default {
   data() {
     this.baseConfig = deepClone(baseConfig);
     return {
-      tableConfig: this.baseConfig,
-      client: "monitor"
+      tableConfig: this.baseConfig
     };
   },
   watch: {
     apiOptions(val) {
-      this.handleNetwork();
+      this.handleNetworkConfig();
     },
     config(val) {
       this.tableConfig = Object.assign(this.baseConfig, val);
-      this.handleNetwork();
+      this.handleNetworkConfig();
     },
     tableConfig: {
       deep: true,
       handler: function(val) {
         this.$emit("update:config", val);
       }
-    },
-    "tableConfig.table.mounted.api"(val) {
-      this.handleNetwork();
-    },
-    "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();
     }
   },
   mounted() {
     this.tableConfig = Object.assign(this.baseConfig, this.config);
   },
   methods: {
-    handleNetwork() {
+    handleNetworkConfig() {
       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);
+        if (item.api && item.show) apis.push(item.api);
       }
 
       const network = {};
-      this.apiOptions.map(item => {
-        if (apis.includes(item.id)) {
-          network[item.id] = item;
+      this.apiOptions.map(api => {
+        if (apis.includes(api.id)) {
+          // 初始化接口参数
+          // if (this.tableConfig.table.fields.remote) {
+          //   const callback = res => {
+          //     api.inParams = res.inParams;
+          //     api.outParams = res.outParams;
+          //   };
+          //   this.$emit("remote-params", api.id, callback);
+          // }
+          network[api.id] = api;
         }
       });
       this.tableConfig.network = network;
@@ -152,10 +134,6 @@ export default {
         case "import-json":
           this.tableConfig = data;
           break;
-        case "monitor":
-        case "mobile":
-          this.client = action;
-          break;
 
         default:
           break;