tianheng-ui 0.1.39 → 0.1.41

package/packages/TableMaking/widgetConfig.vue

@@ -3,49 +3,45 @@
     <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">
-      <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-collapse-item>
-        <el-collapse-item title="列表字段" name="group-fields_list">
-          <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-collapse-item>
-      </el-collapse>
+      <template v-if="fieldsTree.search.length || fieldsTree.table.length">
+        <el-collapse v-model="collapseValue">
+          <el-collapse-item title="查询字段" name="group-fields_search">
+            <el-tree
+              :data="fieldsTree.search"
+              :default-checked-keys="searchActiveFields"
+              show-checkbox
+              node-key="key"
+              :props="{ label: 'label', value: 'prop' }"
+              ref="fieldsTreeRef"
+              @check-change="handleTreeCheckChange('search')"
+            >
+            </el-tree>
+          </el-collapse-item>
+          <el-collapse-item title="列表字段" name="group-fields_table">
+            <el-tree
+              :data="fieldsTree.table"
+              :default-checked-keys="tableActiveFields"
+              show-checkbox
+              node-key="key"
+              :check-strictly="true"
+              :props="{ label: 'label', value: 'prop' }"
+              ref="fieldsTreeRef"
+              @check-change="handleTreeCheckChange('table')"
+            >
+            </el-tree>
+          </el-collapse-item>
+        </el-collapse>
+      </template>
+      <th-empty v-else description="请选择列表接口"></th-empty>
     </div>
     <div v-if="activeTab.value === 'table' && config.table" class="configItem">
       <el-form
@@ -112,7 +108,7 @@
               <el-switch v-model="config.search.show"> </el-switch>
             </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="排序配置" name="group-sort">
+          <el-collapse-item title="排序配置" name="group-table_sort">
             <el-form-item label="排序类型">
               <el-radio-group v-model="config.table.sort.type">
                 <el-radio-button label="1">降序</el-radio-button>
@@ -126,7 +122,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"
@@ -135,7 +131,7 @@
               </el-select>
             </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="分页配置" name="group-pageInfo">
+          <el-collapse-item title="分页配置" name="group-table_pageInfo">
             <el-form-item label="开启分页">
               <el-switch v-model="config.table.pageInfo.show"> </el-switch>
             </el-form-item>
@@ -207,7 +203,7 @@
               </el-form-item>
             </template>
           </el-collapse-item>
-          <el-collapse-item title="提示语配置" name="group-hint">
+          <el-collapse-item title="提示语配置" name="group-table_hint">
             <el-form-item label="空数据">
               <el-input
                 v-model="config.table.empty.text"
@@ -221,9 +217,9 @@
               ></el-input>
             </el-form-item>
           </el-collapse-item>
-          <!-- <el-collapse-item title="数据接口配置" name="group-network">
+          <!-- <el-collapse-item title="数据接口配置" name="group-table_network">
           </el-collapse-item> -->
-          <el-collapse-item name="group-button">
+          <el-collapse-item name="group-table_button">
             <template slot="title">
               <div class="collapse-title">
                 <div>按钮配置</div>
@@ -475,17 +471,39 @@
       :modal-append-to-body="false"
       :showFooter="false"
     >
-      <div class="toolsSeting th-flex_box">
-        <el-card class="th-flex_aside" style="width:200px;margin-right:10px;">
-          <el-tree
-            :data="Object.values(config.tools || [])"
-            :props="{ label: 'name' }"
-            node-key="name"
-            @node-click="handleActionConfig"
-          ></el-tree>
-        </el-card>
-        <el-card v-if="dialog.data" class="th-fiex_content">
+      <div class="eventsSetting th-flex_box th-is_border">
+        <div class="list th-flex_aside">
+          <div class="events-header th-sticky_top">
+            <div>按钮库</div>
+            <!-- <el-button type="text" icon="el-icon-plus" size="mini" disabled
+              >添加</el-button
+            > -->
+          </div>
+          <div
+            v-for="(item, index) in Object.values(config.tools || [])"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active': dialog.data && dialog.data.name === item.name
+            }"
+            :key="item.key"
+            @click="dialog.data = item"
+          >
+            <div class="list-item-value">{{ item.name }}</div>
+            <!-- <el-popconfirm
+              :title="`是否确定删除方法 ${item.name}`"
+              confirm-button-text="删除"
+              confirm-button-type="danger"
+              @confirm="handleEventDialogDelete(item, index)"
+            >
+              <i class="el-icon-delete" slot="reference"></i>
+            </el-popconfirm> -->
+          </div>
+        </div>
+        <div class="detail th-fiex_content">
+          <div class="events-header th-sticky_top">按钮详情</div>
           <el-form
+            v-if="dialog.data"
+            class="detail-form"
             ref="form"
             :model="dialog.data"
             label-width="80px"
@@ -587,7 +605,7 @@
               </el-select>
             </el-form-item>
           </el-form>
-        </el-card>
+        </div>
       </div>
     </th-dialog>
   </div>
@@ -616,7 +634,6 @@ export default {
         { title: "样式设置", value: "css" }
       ],
       activeTab: { title: "列表属性", value: "table" },
-      fields: [],
       searchField: {
         isCheckAll: false,
         isIndeterminate: false
@@ -626,12 +643,14 @@ export default {
         isIndeterminate: false
       },
       collapseValue: [
+        "group-fields_search",
+        "group-fields_table",
         "group-table",
-        "group-pageInfo",
-        "group-sort",
-        "group-hint",
-        "group-network",
-        "group-button"
+        "group-table_pageInfo",
+        "group-table_sort",
+        "group-table_hint",
+        "group-table_network",
+        "group-table_button"
       ],
       pageInfoLayout: [
         { label: "总条数", value: "total" },
@@ -660,16 +679,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);
@@ -678,113 +697,76 @@ 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) {
+      let nodes = deepClone(this.$refs.fieldsTreeRef.getCheckedNodes());
+      if (action === "search") {
+        const keys = this.config.search.options.map(item => {
+          return item.key;
+        });
+        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;
+        });
+
+        nodes = nodes.map(item => {
+          const index = keys.indexOf(item.key);
+          if (index > -1) {
+            return this.config.table.options[index];
+          } else {
+            return item;
+          }
         });
-        this.fields = fields;
-      } else this.fields = [];
+        this.config.table.options = nodes;
+      }
+      console.log("handleTreeCheckChange =>", nodes);
     },
+    // 对外暴露表单校验
     formValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {
@@ -865,6 +847,54 @@ export default {
       }
     }
   }
+
+  .eventsSetting {
+    height: 100%;
+
+    .events-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+      height: 40px;
+      background-color: #f2f6fc;
+      z-index: 10;
+    }
+
+    .list {
+      width: 200px;
+      min-height: 430px;
+      overflow-y: overlay;
+      border-right: 1px solid #eee;
+
+      .list-item {
+        display: flex;
+        // align-items: center;
+        margin: 5px;
+        padding: 10px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe6;
+        transition: 0.25s;
+
+        .list-item-title {
+          color: var(--th-green);
+        }
+        .list-item-value {
+          flex: 1;
+          padding: 0 5px;
+        }
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .detail {
+      .detail-form {
+        padding: 10px;
+      }
+    }
+  }
 }
 </style>
 

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="对应列内容的字段名，支持eval函数，非必要不修改！"
+          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"
@@ -79,11 +86,17 @@
       <div v-else class="search-content"></div>
     </div>
     <div class="table-title">列表字段</div>
-    <div class="tableList" style="height: calc(100% - 340px);">
+    <div class="tableList" style="height: calc(100% - 350px);">
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
-        <!-- <div>字段</div> -->
+        <el-tooltip
+          content="对应列内容的字段名，支持eval函数，非必要不修改！"
+          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
@@ -219,9 +233,11 @@ export default {
 
 <style lang="scss" scoped>
 .widgetTable {
-  height: 100%;
+  height: calc(100% - 45px);
   padding: 10px;
   background-color: white;
+  overflow-y: overlay;
+
   .table-title {
     height: 25px;
     line-height: 25px;