htui-yllkbz 1.2.42 → 1.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.2.42",
+  "version": "1.2.43",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",

package/src/packages/HtTable/index.vue

@@ -5,10 +5,11 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:30:09
+ * @LastEditTime: 2022-01-10 13:40:53
 -->
 <template>
   <div v-loading="state.loading">
+
     <article>
       <el-table ref="comTable"
                 :height="height"
@@ -42,28 +43,39 @@
                 @cell-click="(row, column, cell, event)=>$emit('cell-click',row, column, cell, event)"
                 @cell-dblclick="(row, column, cell, event)=>$emit('cell-dblclick',row, column, cell, event)">
         <el-table-column width="55"
+                         :resizable="false"
                          v-if="checked"
                          :reserve-selection="reserveSelection"
                          :selectable="selectable"
                          type='selection'>
         </el-table-column>
         <el-table-column v-if="!hideOrder"
+                         :resizable="false"
                          :label="keyName===undefined?'序号':keyName"
                          :align="'center'"
                          width="55">
           <template slot="header">
-            <slot :name="'header_order'"></slot>
+            <slot :name="'header_order'">
+              <div @click="showFilterModel"
+                   v-if="showFilter"
+                   title="筛选排序">
+                <el-button type="text"><i class="el-icon-s-grid"></i></el-button>
+              </div>
+              <span v-else>{{keyName||'序号'}}</span>
+
+            </slot>
           </template>
           <template slot-scope="scope">
             {{(state.pageInfo.currentPage-1)*state.pageInfo.pageSize+(scope.$index+1)}}
           </template>
         </el-table-column>
-        <template v-for="item in columns">
+        <template v-for="item in showColumns">
           <el-table-column :label="item.title"
                            :key='item.key'
                            :fixed="item.fixed"
                            :align="item.align"
                            v-if="!item.hide"
+                           :resizable="item.resizable"
                            :header-align="item.headerAlign"
                            :column-key="item.columnKey"
                            :class-name="item.className"
@@ -160,6 +172,39 @@
 
       </el-row>
     </footer>
+    <!-- 详情弹框 -->
+    <el-dialog :visible.sync="state.visibleFilter"
+               title="属性设置"
+               :close-on-click-modal="true"
+               width="400px"
+               :center="true">
+      <div style='overflow:hidden;height:500px'>
+        <el-scrollbar style='height: calc(100% + 17px)'>
+          <el-tree :data="columns"
+                   ref="tree"
+                   show-checkbox
+                   node-key="key"
+                   :check-on-click-node="false"
+                   @node-drag-start="handleDragStart"
+                   @node-drag-enter="handleDragEnter"
+                   @node-drag-leave="handleDragLeave"
+                   @node-drag-over="handleDragOver"
+                   @node-drag-end="handleDragEnd"
+                   @node-drop="handleDrop"
+                   :default-checked-keys="state.showColumnKeys"
+                   @check-change="changeColumns"
+                   :allow-drag="allowDrag"
+                   draggable
+                   :allow-drop="allowDrop">
+            <span class="custom-tree-node"
+                  slot-scope="{ node, data }">
+              <slot :name="'header_'+data.key"
+                    :column="data">{{data.title}}</slot>
+            </span>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script lang='ts'>
@@ -169,6 +214,13 @@ import PageInfo from "@/packages/PageInfo/index.vue";
 interface State {
   pageInfo: PageInfoType;
   loading: boolean;
+  /** 展示出来的列表名 */
+  showColumns: Column[];
+  showColumnKeys: string[];
+  /** 是否展示筛选框 */
+  visibleFilter: boolean;
+  /** 当前拖动的数据 */
+  currentColumn?: Column;
 }
 @Component({
   name: "HtTable",
@@ -182,6 +234,10 @@ export default class HtTable extends Vue {
   @Prop() data!: any[];
   /**  序号对应的名称 */
   @Prop() keyName?: string;
+  /**  是否增加筛选功能 */
+  @Prop() showFilter?: boolean;
+  /**  table的唯一值用于table数据筛选 */
+  @Prop() uuId?: string;
   /** 是否隐藏分页 */
   @Prop() hidePage!: boolean;
   /** 是否启用复选框 */
@@ -215,9 +271,84 @@ export default class HtTable extends Vue {
       skipCount: 0,
       totalCount: 0,
     },
+    showColumns: [],
+    currentColumn: undefined,
+    visibleFilter: false,
+    showColumnKeys: [],
   };
   created() {
     this.setPageInfo(this.pageInfo);
+    this.state.showColumns = this.columns;
+    if (this.uuId) {
+      //通过uuid获取缓存起来的header显示信息
+      const showKeys: string | null = window.localStorage.getItem(
+        "table_" + this.uuId
+      );
+      if (showKeys) {
+        this.state.showColumnKeys = JSON.parse(showKeys);
+      } else {
+        this.creatInitColumnKey();
+      }
+    } else {
+      this.creatInitColumnKey();
+    }
+  }
+  creatInitColumnKey() {
+    this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
+      arr.push(item.key);
+      return arr;
+    }, []);
+  }
+  changeColumns(node: any, checked: boolean) {
+    let { showColumnKeys } = this.state;
+    if (checked) {
+      showColumnKeys.push(node.key);
+    } else {
+      showColumnKeys = showColumnKeys.filter((item) => item !== node.key);
+    }
+    this.state.showColumnKeys = showColumnKeys;
+  }
+  handleDragStart(node: any) {
+    this.state.currentColumn = node.data;
+  }
+  handleDragEnter() {
+    // console.log("tree drag enter: ", dropNode.label);
+  }
+  handleDragLeave() {
+    //console.log("tree drag leave: ", dropNode.label);
+  }
+  handleDragOver() {
+    // console.log("tree drag over: ", dropNode.label);
+  }
+  handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
+    const { showColumns, currentColumn, showColumnKeys } = this.state;
+    // if ((dropType === "before" || dropType === "after") && currentColumn) {
+    //   const data = showColumns.filter(
+    //     (item) => item.key !== currentColumn?.key
+    //   );
+    //   const index = data.findIndex((item) => item.key === dropNode.data.key);
+    //   dropType === "before"
+    //     ? data.splice(index, 0, currentColumn)
+    //     : data.splice(index + 1, 0, currentColumn);
+    // console.log("tree drag end: ", currentColumn, showColumnKeys);
+    if (currentColumn && showColumnKeys.includes(currentColumn.key)) {
+      setTimeout(() => {
+        (this.$refs.tree as any).setChecked(currentColumn, true);
+      }, 0);
+    }
+
+    // }
+  }
+  handleDrop() {
+    // console.log("tree drop: ", dropNode, dropType);
+  }
+  /** 节点是否被插入 */
+  allowDrop(draggingNode: any, dropNode: any, type: string) {
+    return type !== "inner";
+  }
+  /** 节点是否允许拖动 */
+  allowDrag(draggingNode: any) {
+    return !draggingNode.data.disabled;
   }
   /**  处理table里面根据字段获取对应的值 */
   getPropByPath(obj: any, path: string, strict = true) {
@@ -246,6 +377,9 @@ export default class HtTable extends Vue {
     // };
     return tempObj ? tempObj[keyArr[i]] : null;
   }
+  showFilterModel() {
+    this.state.visibleFilter = true;
+  }
   /** 遍历循环展示row数据 */
   showValue(row: any, key: string) {
     if (key) {
@@ -270,6 +404,25 @@ export default class HtTable extends Vue {
       return "";
     }
   }
+  /** 获取显示出来的table头信息 */
+  get showColumns() {
+    const { showColumnKeys, showColumns } = this.state;
+    let obj: any = {};
+    for (const key in showColumnKeys) {
+      obj = { ...obj, [showColumnKeys[key]]: true };
+    }
+    /** 缓存起来下次使用  --todo只做了显示没有做排序缓存 */
+    if (this.uuId) {
+      window.localStorage.setItem(
+        "table_" + this.uuId,
+        JSON.stringify(showColumnKeys)
+      );
+    }
+
+    const data = showColumns.filter((item) => obj[item.key as string]);
+    return data;
+  }
+
   /** 监听 */
   @Watch("pageInfo")
   setPageInfo(val?: PageInfoType) {
@@ -283,6 +436,10 @@ export default class HtTable extends Vue {
       };
     }
   }
+  @Watch("columns")
+  setColumns(columns?: Column[]) {
+    this.state.showColumns = columns || [];
+  }
 }
 </script>
 <style lang='scss' scoped></style>

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:55:26
+ * @LastEditTime: 2022-01-10 09:32:46
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -53,6 +53,7 @@ export interface Column {
 
   key: string;
   title: string;
+
   width?: number | string;
   minWidth?: number | string;
   fixed?: 'left' | 'rigth' | boolean;
@@ -73,6 +74,8 @@ export interface Column {
   /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
   commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue',
   showOverflowTooltip?: boolean,
+  /** 筛选时候是否禁用 */
+  disabled?: boolean;
 }
 export interface PageInfoType {
   currentPage: number;

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-01-04 09:47:44
+ * @LastEditTime: 2022-01-10 09:32:22
 -->
 <template>
   <div>
@@ -89,6 +89,7 @@ export default class Index extends Vue {
         age: 12,
         sex: 0,
         id: 1,
+
         test: { title: "测试" },
         time: "2022-01-20T00:00:00+08:00",
       },
@@ -130,6 +131,7 @@ export default class Index extends Vue {
         title: "姓名",
         key: "test.title",
         width: "300px",
+        disabled: true,
       },
       {
         title: "姓额外名",