htui-yllkbz 1.2.57 → 1.2.58

package/package.json

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

package/src/packages/HtTable/index.vue

@@ -5,7 +5,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2022-02-13 16:12:46
+ * @LastEditTime: 2022-02-14 11:07:24
 -->
 <template>
   <div v-loading="state.loading"
@@ -73,12 +73,12 @@
             {{(state.pageInfo.currentPage-1)*state.pageInfo.pageSize+(scope.$index+1)}}
           </template>
         </el-table-column>
-        <template v-for="item in showColumns">
+        <template v-for="(item,index) in state.showColumns">
           <el-table-column :label="item.title"
-                           :key='item.key'
+                           :key='`${item.key}_${index}`'
                            :fixed="item.fixed"
                            :align="item.align"
-                           v-if="!item.hide"
+                           v-if="!item.hide&&item.checked"
                            :resizable="item.resizable"
                            :header-align="item.headerAlign"
                            :column-key="item.columnKey"
@@ -205,15 +205,15 @@
                title="属性设置"
                :append-to-body="true"
                :close-on-click-modal="true"
-               width="400px"
-               :center="true">
-               <p slot="title"
+               width="400px">
+      <p slot="title"
          style="font-weight:700;font-size:18px;float:left;margin:0">自定义列展示</p>
-      <div style='overflow:hidden;height:40vh;margin-top:12px'>
-        <el-scrollbar style='height: calc(40vh + 17px)'>
-          <el-tree :data="columns"
+      <div style='overflow:hidden;height:35vh;margin-top:12px'>
+        <el-scrollbar style='height: calc(35vh + 17px)'>
+          <el-tree :data="getAllColumns"
                    ref="tree"
                    show-checkbox
+                   :expand-on-click-node="false"
                    node-key="key"
                    :check-on-click-node="false"
                    @node-drag-start="handleDragStart"
@@ -222,7 +222,7 @@
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
-                   :default-checked-keys="state.showColumnKeys"
+                   :default-checked-keys="state.checkedColumnKeys"
                    @check-change="changeColumns"
                    :allow-drag="allowDrag"
                    draggable
@@ -234,7 +234,13 @@
             </span>
           </el-tree>
         </el-scrollbar>
+
       </div>
+      <span slot="footer">
+        <el-button type="primary"
+                   @click="confirmSortAndshow">确定</el-button>
+        <el-button @click="state.visibleFilter=false">取消</el-button>
+      </span>
     </el-dialog>
     <!-- 附件详情弹框 -->
     <el-dialog :visible.sync="state.visibleFile"
@@ -245,7 +251,7 @@
                :center="true">
       <p slot="title"
          style="font-weight:700;font-size:18px;float:left;margin:0">附件查看</p>
-     
+
       <div style='overflow:hidden;height:calc(30vh)'>
         <el-scrollbar style='height: calc(100% + 17px)'>
           <HtUploadFiles :disabled="true"
@@ -265,7 +271,12 @@ interface State {
   loading: boolean;
   /** 展示出来的列表名 */
   showColumns: Column[];
+  /** 全部的列 */
+  allColumns: Column[];
+  /** 列表展示的列 */
   showColumnKeys: string[];
+  /** 自定义列表选中的列 */
+  checkedColumnKeys: string[];
   /** 是否展示筛选框 */
   visibleFilter: boolean;
   /** 是否展示附件 */
@@ -317,6 +328,7 @@ export default class HtTable extends Vue {
   @Prop() emptyText?: string | number;
   @Prop() headerRowStyle?: any;
   @Prop() headerRowClassName?: any;
+  @Prop() headerCellClassName?: any;
   @Prop() headerCellStyle?: any;
 
   /** 分页的所有额外信息通过此参数传递 */
@@ -331,48 +343,65 @@ export default class HtTable extends Vue {
       totalCount: 0,
     },
     showColumns: [],
+    allColumns: [],
     currentColumn: undefined,
     visibleFilter: false,
     visibleFile: false,
     showColumnKeys: [],
+    checkedColumnKeys: [],
   };
   created() {
     this.setPageInfo(this.pageInfo);
-    this.state.showColumns = this.columns;
+    //this.setColumns(this.columns);
     if (this.uuId) {
       //通过uuid获取缓存起来的header显示信息
-      const showKeys: string | null = window.localStorage.getItem(
+      //-todo
+      //---columns 要改变
+      //---showColumnKeys 要改变
+      //---排列顺序要改变 todo
+      const allColumns: string | null = window.localStorage.getItem(
         "table_" + this.uuId
       );
-      if (showKeys) {
-        this.state.showColumnKeys = JSON.parse(showKeys);
+      if (allColumns) {
+        this.state.allColumns = JSON.parse(allColumns);
+        this.state.showColumns = JSON.parse(allColumns);
+        this.getShowKeys(this.state.allColumns);
       } else {
-        this.creatInitColumnKey();
+        this.creatInitColumnKey(this.columns || []);
       }
     } else {
-      this.creatInitColumnKey();
+      this.creatInitColumnKey(this.columns || []);
     }
   }
-  creatInitColumnKey() {
-    this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
-      arr.push(item.key);
-      return arr;
-    }, []);
+  /** 获取展示的keys值 */
+  getShowKeys(data: Column[]) {
+    const arr: string[] = [];
+    data.forEach((item) => {
+      if (item.checked) {
+        arr.push(item.key);
+      }
+    });
+    this.state.showColumnKeys = arr;
+  }
+  /** 初始化columns */
+  creatInitColumnKey(columns: Column[]) {
+    this.state.allColumns = columns;
+    this.state.showColumns = columns;
+    this.state.allColumns.forEach((item) => {
+      item.checked = true;
+    });
+    this.getShowKeys(this.state.allColumns);
+    // this.state.showColumnKeys = this.columns.reduce((arr: string[], item) => {
+    //   arr.push(item.key);
+    //   return arr;
+    // }, []);
   }
   /** 展示附件信息 */
   showFiles(val = "") {
     this.state.files = val;
     this.state.visibleFile = true;
   }
-  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;
   }
@@ -386,7 +415,7 @@ export default class HtTable extends Vue {
     // console.log("tree drag over: ", dropNode.label);
   }
   handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
-    const { showColumns, currentColumn, showColumnKeys } = this.state;
+    const { showColumns, currentColumn, checkedColumnKeys } = this.state;
     // if ((dropType === "before" || dropType === "after") && currentColumn) {
     //   const data = showColumns.filter(
     //     (item) => item.key !== currentColumn?.key
@@ -396,11 +425,12 @@ export default class HtTable extends Vue {
     //     ? data.splice(index, 0, currentColumn)
     //     : data.splice(index + 1, 0, currentColumn);
     // console.log("tree drag end: ", currentColumn, showColumnKeys);
-    if (currentColumn && showColumnKeys.includes(currentColumn.key)) {
+    if (currentColumn && checkedColumnKeys.includes(currentColumn.key)) {
       setTimeout(() => {
         (this.$refs.tree as any).setChecked(currentColumn, true);
       }, 0);
     }
+    //console.log("handleDragEnd", this.columns);
 
     // }
   }
@@ -442,8 +472,46 @@ export default class HtTable extends Vue {
     // };
     return tempObj ? tempObj[keyArr[i]] : null;
   }
+  /** 现在自定义列弹窗 */
   showFilterModel() {
     this.state.visibleFilter = true;
+    this.state.checkedColumnKeys = this.state.showColumnKeys;
+    this.state.allColumns = JSON.parse(JSON.stringify(this.state.showColumns));
+  }
+  /** 自定义列表时候选中列 */
+  changeColumns(node: any, checked: boolean) {
+    let { checkedColumnKeys } = this.state;
+    if (checked) {
+      checkedColumnKeys.push(node.key);
+    } else {
+      checkedColumnKeys = checkedColumnKeys.filter((item) => item !== node.key);
+    }
+    this.state.checkedColumnKeys = checkedColumnKeys;
+  }
+  /** 自定义列排序的确定功能 */
+  confirmSortAndshow() {
+    this.state.loading = true;
+    this.state.showColumns = [];
+    const { allColumns, checkedColumnKeys } = this.state;
+    //对列表check复制
+    allColumns.forEach(
+      (item) => (item.checked = checkedColumnKeys.includes(item.key))
+    );
+    //将复选框选中行展示到列中 */
+    this.state.showColumnKeys = checkedColumnKeys;
+    //将列的顺序进行处理已经存储
+
+    if (this.uuId) {
+      window.localStorage.setItem(
+        "table_" + this.uuId,
+        JSON.stringify(allColumns)
+      );
+    }
+    this.state.showColumns = allColumns;
+    this.state.visibleFilter = false;
+    this.state.loading = false;
+    /** 自定义列回调 */
+    this.$emit("customColumn", allColumns);
   }
   /** 遍历循环展示row数据 */
   showValue(row: any, key: string) {
@@ -501,9 +569,47 @@ export default class HtTable extends Vue {
       };
     }
   }
+  get getAllColumns() {
+    const { allColumns } = this.state;
+    return allColumns.filter((item) => !item.hide);
+  }
   @Watch("columns")
   setColumns(columns?: Column[]) {
-    this.state.showColumns = columns || [];
+    const { showColumns } = this.state;
+    /** 当前所有key */
+    let allKeys: any = {};
+    /** 新来的所有key */
+    let newKeys: any = {};
+    showColumns.forEach((item) => {
+      allKeys = { ...allKeys, [item.key]: true };
+    });
+    columns?.forEach((item) => {
+      newKeys = { ...newKeys, [item.key]: true };
+    });
+    /** 查找出所有的当前不存在的key */
+    const newColumns = columns?.filter((item) => !allKeys[item.key]);
+    /** 查找出当前已有的key */
+    const successColumns = showColumns?.filter((item) => newKeys[item.key]);
+    const tempColumns: Column[] = [];
+    const lastColumn: Column[] = [];
+    successColumns.forEach((item, index) => {
+      /** 去除操作列 */
+      if (item.key !== "handel") {
+        tempColumns.push(item);
+      } else {
+        lastColumn.push(item);
+      }
+    });
+    newColumns?.forEach((item, index) => {
+      /** 去除操作列 */
+      if (item.key !== "handel") {
+        tempColumns.push(item);
+      } else {
+        lastColumn.push(item);
+      }
+    });
+    /** 去除多余并且添加新增的 */
+    this.creatInitColumnKey([...tempColumns, ...lastColumn]);
   }
 }
 </script>

package/src/packages/type.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-25 17:05:17
  * @LastEditors: hutao
- * @LastEditTime: 2022-02-10 10:33:52
+ * @LastEditTime: 2022-02-14 09:39:55
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -76,8 +76,10 @@ export interface Column {
   showOverflowTooltip?: boolean;
   /** 筛选时候是否禁用 */
   disabled?: boolean;
-   /** 自定义列时候展示额外信息 */
+  /** 自定义列时候展示额外信息 */
   property?: string;
+  /** 自定义列时候处理是否被选中 */
+  checked?: 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-02-13 16:11:09
+ * @LastEditTime: 2022-02-14 10:13:10
 -->
 <template>
   <div>
@@ -30,10 +30,10 @@
     <div ref="ht-pdf">
       <HtTable :data="state.data"
                :height="200"
+               uuId="54598fs1okdsfsdfk2"
                :showFilter="true"
                :columns="state.columns">
 
-        <div slot="header_name">测试名字</div>
       </HtTable>
     </div>
     <!-- <el-dropdown>
@@ -82,7 +82,7 @@ export default class Index extends Vue {
     data: [
       {
         name: "胡涛",
-        
+
         age: 12,
         sex: "e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90,e49961a4f385e5d341ce3a01ee674c90ea9e037b734228fe26753a01ee674c90",
         id: 1,