tianheng-ui 0.1.43 → 0.1.45

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,8 @@
       <widget-config
         :data="widgetFormSelect"
         :config="formConfig.config"
-        :fields="fields"
-        :apiConfig="apiConfig"
+        :apiOptions="apiOptions"
         ref="configRef"
-        @fieldsChange="handleFieldsChange"
         @update="handleWidgetConfigUpdate"
       >
       </widget-config>
@@ -229,9 +226,7 @@ export default {
     return {
       formConfig: this.baseConfig,
       widgetFormSelect: {},
-      widgetValue: {},
       configTab: "form",
-      fields: [],
       apiConfig: {},
       collapseValue: ["group-basic", "group-advance", "group-layout"]
     };
@@ -265,11 +260,10 @@ export default {
     },
     config(val) {
       this.setConfig(val);
-      this.initApiConfig();
+      this.handleNetworkConfig();
     },
     apiOptions(val) {
-      this.initApiConfig();
-      this.handleFieldsChange();
+      this.handleNetworkConfig();
     }
   },
   created() {
@@ -283,7 +277,7 @@ export default {
     }
   },
   mounted() {
-    this.initApiConfig();
+    this.handleNetworkConfig();
   },
   methods: {
     // 初始化组件配置
@@ -310,14 +304,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) {
+            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 +344,7 @@ export default {
       this.widgetFormSelect = {};
     },
     handleWidgetToolsChange(val, data) {
+      console.log(val, data);
       switch (val) {
         case "import-excel":
         case "import-json":
@@ -345,55 +361,46 @@ 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 = [];
-    },
     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 +413,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-h5.vue

@@ -57,48 +57,21 @@ export default {
       return [];
     },
     cellStyle() {
-      let styleText = "";
       if (this.config.style) {
         const style = this.config.style.cell || {};
-        const keys = Object.keys(style).filter(key => {
-          return key !== "customStyle";
-        });
-        for (let key of keys) {
-          styleText += `${key}: ${style[key]};`;
-        }
-        styleText += style.customStyle;
-        styleText = styleText.replace(/rpx/g, "px");
-        return styleText;
+        return this.initStyle(style);
       }
     },
     titleStyle() {
-      let styleText = "";
       if (this.config.style) {
         const style = this.config.style.title || {};
-        const keys = Object.keys(style).filter(key => {
-          return key !== "customStyle";
-        });
-        for (let key of keys) {
-          styleText += `${key}: ${style[key]};`;
-        }
-        styleText += style.customStyle;
-        styleText = styleText.replace(/rpx/g, "px");
-        return styleText;
+        return this.initStyle(style);
       }
     },
     valueStyle() {
-      let styleText = "";
       if (this.config.style) {
         const style = this.config.style.value || {};
-        const keys = Object.keys(style).filter(key => {
-          return key !== "customStyle";
-        });
-        for (let key of keys) {
-          styleText += `${key}: ${style[key]};`;
-        }
-        styleText += style.customStyle;
-        styleText = styleText.replace(/rpx/g, "px");
-        return styleText;
+        return this.initStyle(style);
       }
     }
   },
@@ -109,6 +82,24 @@ export default {
     },
     handleActionClick(action, item) {
       this.$emit("action", action, item);
+    },
+    initStyle(style) {
+      let styleText = "";
+      let customStyle = "";
+      for (let key of Object.keys(style)) {
+        const value = style[key];
+        if (!value) continue;
+        if (key === "customStyle") {
+          customStyle = value.replace(/{/g, "");
+          customStyle = customStyle.replace(/}/g, "");
+          customStyle = customStyle.replace(/\/n/g, "");
+        } else {
+          styleText += `${key}: ${value};`;
+        }
+      }
+      if (customStyle) styleText += customStyle;
+      styleText = styleText.replace(/rpx/g, "px");
+      return styleText;
     }
   }
 };

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"
                 >
@@ -340,14 +353,19 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="自定义">
-              <el-input
+            <el-form-item label-width="0">
+              <el-tooltip effect="light" placement="top">
+                <div slot="content">
+                  <div>样式编辑器，可编写css样式</div>
+                  <div>示例：</div>
+                  <div v-html="cssDemo"></div>
+                </div>
+                <span style="color: #409EFF;">css样式</span>
+              </el-tooltip>
+              <th-code-editor
                 v-model="config.table.style.cell.customStyle"
-                type="textarea"
-                :rows="2"
-                placeholder="请输入"
-              >
-              </el-input>
+                language="css"
+              ></th-code-editor>
             </el-form-item>
           </el-collapse-item>
           <el-collapse-item name="group-style_title">
@@ -397,14 +415,19 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="自定义">
-              <el-input
+            <el-form-item label-width="0">
+              <el-tooltip effect="light" placement="top">
+                <div slot="content">
+                  <div>样式编辑器，可编写css样式</div>
+                  <div>示例：</div>
+                  <div v-html="cssDemo"></div>
+                </div>
+                <span style="color: #409EFF;">css样式</span>
+              </el-tooltip>
+              <th-code-editor
                 v-model="config.table.style.title.customStyle"
-                type="textarea"
-                :rows="2"
-                placeholder="请输入"
-              >
-              </el-input>
+                language="css"
+              ></th-code-editor>
             </el-form-item>
           </el-collapse-item>
           <el-collapse-item name="group-style_value">
@@ -454,14 +477,19 @@
                 clearable
               ></el-input>
             </el-form-item>
-            <el-form-item label="自定义">
-              <el-input
+            <el-form-item label-width="0">
+              <el-tooltip effect="light" placement="top">
+                <div slot="content">
+                  <div>样式编辑器，可编写css样式</div>
+                  <div>示例：</div>
+                  <div v-html="cssDemo"></div>
+                </div>
+                <span style="color: #409EFF;">css样式</span>
+              </el-tooltip>
+              <th-code-editor
                 v-model="config.table.style.value.customStyle"
-                type="textarea"
-                :rows="2"
-                placeholder="请输入"
-              >
-              </el-input>
+                language="css"
+              ></th-code-editor>
             </el-form-item>
           </el-collapse-item>
         </el-collapse>
@@ -601,7 +629,7 @@
                 <el-option
                   v-for="item in apiOptions"
                   :key="item.id"
-                  :label="item.label"
+                  :label="item.name"
                   :value="item.id"
                 >
                 </el-option>
@@ -669,32 +697,36 @@ 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: {
         search: [],
         table: []
       },
-      dialog: { show: false, data: null }
+      dialog: { show: false, data: null },
+      cssDemo: `
+{<br>
+  padding: 10px;<br>
+  margin: 10px;<br>
+  color: red;<br>
+}
+      `
     };
   },
   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: {
@@ -717,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") {