tianheng-ui 0.1.40 → 0.1.42

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

@@ -12,7 +12,7 @@
       <template v-for="item in getList">
         <el-table-column
           v-if="item.type"
-          :key="item.prop"
+          :key="item.type"
           :type="item.type"
           :label="item.label"
           :width="item.width || 50"
@@ -20,10 +20,10 @@
         </el-table-column>
         <el-table-column
           v-else
-          :key="item.prop"
-          :prop="item.prop"
+          :key="item.pProp"
+          :prop="item.pProp"
           :label="item.label"
-          :width="item.width || 180"
+          :width="item.width"
         >
           <template slot-scope="scope">
             <slot
@@ -32,7 +32,7 @@
               :scope="scope"
               :option="item"
             />
-            <span v-else>{{ scope.row[item.prop] }}</span>
+            <span v-else>{{ getValue(scope.row, item.pProp) }}</span>
           </template>
         </el-table-column>
       </template>
@@ -68,7 +68,11 @@ export default {
   },
   created() {},
   mounted() {},
-  methods: {}
+  methods: {
+    getValue(item, key) {
+      return eval(`item.${key}`);
+    }
+  }
 };
 </script>
 

package/packages/TableMaking/generateTable.vue

@@ -400,7 +400,7 @@ export default {
       let params = {};
       switch (actionType) {
         case "list":
-          for (let key of Object.keys(config.params)) {
+          for (let key of Object.keys(config.interfaceParameterInputList)) {
             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.params)) {
+          for (let key of Object.keys(config.interfaceParameterInputList)) {
             params[key] = paramsData[key];
           }
           break;

package/packages/TableMaking/widgetConfig.vue

@@ -3,48 +3,44 @@
     <div class="tabs ">
       <div
         v-for="(item, index) in tabsMenus"
-        :key="index"
         class="tabs-item"
         :class="{ 'tabs-item__active': activeTab.value === item.value }"
+        :key="index"
         @click="activeTab = item"
       >
         {{ item.title }}
       </div>
     </div>
     <div v-if="activeTab.value === 'field'" class="configItem fieldsView">
-      <template v-if="fields.length">
+      <template v-if="fieldsTree.search.length || fieldsTree.table.length">
         <el-collapse v-model="collapseValue">
           <el-collapse-item title="查询字段" name="group-fields_search">
-            <el-checkbox
-              v-model="searchField.isCheckAll"
-              :indeterminate="searchField.isIndeterminate"
-              @change="val => handleCheckAllChange(val, 'searchField')"
-              >全选</el-checkbox
-            >
-            <el-checkbox
-              v-for="item in fields"
-              :label="item.prop"
-              :key="`searchField-${item.prop}-${item.isSearch}`"
-              :checked="item.isSearch"
-              @change="val => handleCheckboxChange(val, 'searchField', item)"
-              >{{ item.label }}</el-checkbox
+            <el-tree
+              ref="fieldsSearchTreeRef"
+              :data="fieldsTree.search"
+              :default-checked-keys="searchActiveFields"
+              show-checkbox
+              node-key="key"
+              :default-expand-all="true"
+              :check-strictly="true"
+              :props="{ label: 'label', value: 'prop' }"
+              @check-change="handleTreeCheckChange('search')"
             >
+            </el-tree>
           </el-collapse-item>
           <el-collapse-item title="列表字段" name="group-fields_table">
-            <el-checkbox
-              v-model="tableField.isCheckAll"
-              :indeterminate="tableField.isIndeterminate"
-              @change="val => handleCheckAllChange(val, 'tableField')"
-              >全选</el-checkbox
-            >
-            <el-checkbox
-              v-for="item in fields"
-              :label="item.prop"
-              :key="`tableField-${item.prop}-${item.isTable}`"
-              :checked="item.isTable"
-              @change="val => handleCheckboxChange(val, 'tableField', item)"
-              >{{ item.label }}</el-checkbox
+            <el-tree
+              ref="fieldsTableTreeRef"
+              :data="fieldsTree.table"
+              :default-checked-keys="tableActiveFields"
+              show-checkbox
+              node-key="key"
+              :default-expand-all="true"
+              :check-strictly="true"
+              :props="{ label: 'label', value: 'prop' }"
+              @check-change="handleTreeCheckChange('table')"
             >
+            </el-tree>
           </el-collapse-item>
         </el-collapse>
       </template>
@@ -129,7 +125,7 @@
                 clearable
               >
                 <el-option
-                  v-for="item in fields"
+                  v-for="item in config.table.options"
                   :key="item.prop"
                   :label="item.label"
                   :value="item.alias"
@@ -641,7 +637,6 @@ export default {
         { title: "样式设置", value: "css" }
       ],
       activeTab: { title: "列表属性", value: "table" },
-      fields: [],
       searchField: {
         isCheckAll: false,
         isIndeterminate: false
@@ -687,16 +682,16 @@ export default {
           { required: true, message: "请选择列表接口", trigger: "change" }
         ]
       },
+      fieldsTree: {
+        search: [],
+        table: []
+      },
       dialog: { show: false, data: null }
     };
   },
   watch: {
     config(val) {
       this.handleFieldsApiChange(val.table.mounted.api);
-      this.handleFields();
-    },
-    fields(val) {
-      this.handleFields();
     },
     apiOptions() {
       this.handleFieldsApiChange(this.config.table.mounted.api);
@@ -705,113 +700,77 @@ export default {
   computed: {
     searchActiveFields() {
       const data = this.config.search.options.map(item => {
-        return item.prop;
+        return item.key;
       });
       return data;
     },
     tableActiveFields() {
       const data = this.config.table.options.map(item => {
-        return item.prop;
+        return item.key;
       });
       return data;
     }
   },
   mounted() {},
   methods: {
-    handleFields() {
-      this.fields.forEach(item => {
-        item.isSearch = this.searchActiveFields.includes(item.prop);
-        item.isTable = this.tableActiveFields.includes(item.prop);
-      });
-      this.searchField = {
-        isCheckAll: this.searchActiveFields.length === this.fields.length,
-        isIndeterminate:
-          this.searchActiveFields.length !== 0 &&
-          this.searchActiveFields.length !== this.fields.length
-      };
-      this.tableField = {
-        isCheckAll: this.tableActiveFields.length === this.fields.length,
-        isIndeterminate:
-          this.tableActiveFields.length !== 0 &&
-          this.tableActiveFields.length !== this.fields.length
-      };
-    },
-    handleCheckAllChange(bool, action) {
-      if (action === "searchField") {
-        this.fields.forEach(item => {
-          item.isSearch = bool;
-        });
-        const data = deepClone(this.fields);
-        this.config.search.options = bool ? data : [];
-        this.searchField = { isCheckAll: bool, isIndeterminate: false };
-        return;
-      }
-      if (action === "tableField") {
-        this.fields.forEach(item => {
-          item.isTable = bool;
-        });
-        const data = deepClone(this.fields);
-        this.config.table.options = bool ? data : [];
-        this.tableField = { isCheckAll: bool, isIndeterminate: false };
-        return;
-      }
-    },
-    handleCheckboxChange(bool, action, data) {
-      if (action === "searchField") {
-        data.isSearch = bool;
-        bool
-          ? this.config.search.options.push(deepClone(data))
-          : (this.config.search.options = this.config.search.options.filter(
-              item => {
-                return item.prop !== data.prop;
-              }
-            ));
-        this.searchField = {
-          isCheckAll: this.config.search.options.length === this.fields.length,
-          isIndeterminate:
-            this.config.search.options.length !== 0 &&
-            this.config.search.options.length !== this.fields.length
-        };
-        return;
-      }
-      if (action === "tableField") {
-        data.isTable = bool;
-        bool
-          ? this.config.table.options.push(deepClone(data))
-          : (this.config.table.options = this.config.table.options.filter(
-              item => {
-                return item.prop !== data.prop;
-              }
-            ));
-        this.tableField = {
-          isCheckAll: this.config.table.options.length === this.fields.length,
-          isIndeterminate:
-            this.config.table.options.length !== 0 &&
-            this.config.table.options.length !== this.fields.length
-        };
-        return;
-      }
-    },
     handleActionConfig(data) {
       this.dialog = { show: true, data };
     },
     handleFieldsApiChange(val) {
-      const dataArr = this.apiOptions.filter(item => {
+      const api = this.apiOptions.filter(item => {
         return item.id === val;
-      });
-      if (dataArr.length && dataArr[0].paramsOut) {
-        const fields = dataArr[0].paramsOut.map(item => {
-          return {
-            label: item.note || item.name,
-            alias: item.name,
-            prop: item.name,
-            elType: "input",
-            align: "left"
-          };
+      })[0];
+      if (!api) return (this.fieldsTree = { search: [], table: [] });
+
+      const initParams = (paramsList, pProp) => {
+        paramsList.forEach(item => {
+          item.elType = "input";
+          item.align = "left";
+          item.pProp = pProp ? `${pProp}.${item.prop}` : item.prop;
+          if (item.children && item.children.length) {
+            initParams(item.children, item.pProp);
+          }
+        });
+      };
+      this.fieldsTree.search = deepClone(api.interfaceParameterInputList) || [];
+      initParams(this.fieldsTree.search);
+      this.fieldsTree.table = deepClone(api.interfaceParameterOutPutList) || [];
+      initParams(this.fieldsTree.table);
+    },
+    handleTreeCheckChange(action) {
+      if (action === "search") {
+        const keys = this.config.search.options.map(item => {
+          return item.key;
+        });
+        let nodes = deepClone(this.$refs.fieldsSearchTreeRef.getCheckedNodes());
+        nodes.map(item => {
+          const index = keys.indexOf(item.key);
+          if (index > -1) {
+            return this.config.search.options[index];
+          } else {
+            return item;
+          }
+        });
+        this.config.search.options = nodes;
+      } else {
+        const keys = this.config.table.options.map(item => {
+          return item.key;
         });
-        this.fields = fields;
-      } else this.fields = [];
+
+        let nodes = deepClone(this.$refs.fieldsTableTreeRef.getCheckedNodes());
+        nodes = nodes.map(item => {
+          const index = keys.indexOf(item.key);
+          if (index > -1) {
+            return this.config.table.options[index];
+          } else {
+            return item;
+          }
+        });
+        this.config.table.options = nodes;
+      }
+      console.log("handleTreeCheckChange =>", nodes);
     },
+    // 对外暴露表单校验
     formValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {

package/packages/TableMaking/widgetTable.vue

@@ -11,7 +11,13 @@
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
-        <!-- <div>字段</div> -->
+        <el-tooltip
+          content="对应列内容的字段名，非必要不修改！"
+          placement="top-start"
+          effect="light"
+        >
+          <div><el-button type="text">字段</el-button></div>
+        </el-tooltip>
         <div>类型</div>
         <div>默认值</div>
         <!-- <div>数据来源</div> -->
@@ -38,6 +44,7 @@
             <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>
           <div>
             <el-select
               v-model="item.elType"
@@ -83,7 +90,13 @@
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
-        <!-- <div>字段</div> -->
+        <el-tooltip
+          content="对应列内容的字段名，非必要不修改！"
+          placement="top-start"
+          effect="light"
+        >
+          <div><el-button type="text">字段</el-button></div>
+        </el-tooltip>
         <div>对齐</div>
         <div>宽度</div>
         <div class="table-item-custom">排序</div>
@@ -109,6 +122,7 @@
             <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>
           <div>
             <el-select v-model="item.align" placeholder="请选择" size="mini">
               <el-option