htui-yllkbz 2.0.13 → 2.0.15

package/src/packages/HtTable/index.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-11 11:23:24
  * @LastEditors: hutao
- * @LastEditTime: 2026-01-29 12:49:42
+ * @LastEditTime: 2026-01-29 18:07:56
 -->
 <template>
   <div v-loading="state.loading">
@@ -39,39 +39,23 @@
                 :data="data"
                 tooltip-effect="dark"
                 :tree-props="treeProps"
-                @row-click="(row, column, event) => $emit('row-click', row, column, event)
-    "
-                @row-contextmenu="(row, column, event) => $emit('row-contextmenu', row, column, event)
-    "
-                @row-dblclick="(row, column, event) => $emit('row-dblclick', row, column, event)
-    "
-                @header-click="(column, event) => $emit('header-click', column, event)"
-                @header-contextmenu="(column, event) => $emit('header-contextmenu', column, event)
-    "
+                @row-click="emitRowClick"
+                @row-contextmenu="emitRowContextmenu"
+                @row-dblclick="emitRowDblclick"
+                @header-click="emitHeaderClick"
+                @header-contextmenu="emitHeaderContextmenu"
                 @header-dragend="headerDragend"
-                @sort-change="({ column, prop, order }) =>
-      $emit('sort-change', { column, prop, order })
-    "
-                @expand-change="(row, da) => $emit('expand-change', row, da)"
-                @filter-change="(filter) => $emit('filter-change', filter)"
-                @current-change="(currentRow, oldCurrentRow) =>
-      $emit('current-change', currentRow, oldCurrentRow)
-    "
-                @select="(selection, row) => $emit('select', selection, row)"
-                @select-all="(selection) => $emit('select-all', selection)"
-                @selection-change="(selection) => $emit('selection-change', selection)"
-                @cell-mouse-enter="(row, column, cell, event) =>
-      $emit('cell-mouse-enter', row, column, cell, event)
-    "
-                @cell-mouse-leave="(row, column, cell, event) =>
-      $emit('cell-mouse-leave', row, column, cell, event)
-    "
-                @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)
-    ">
+                @sort-change="emitSortChange"
+                @expand-change="emitExpandChange"
+                @filter-change="emitFilterChange"
+                @current-change="emitCurrentChange"
+                @select="emitSelect"
+                @select-all="emitSelectAll"
+                @selection-change="emitSelectionChange"
+                @cell-mouse-enter="emitCellMouseEnter"
+                @cell-mouse-leave="emitCellMouseLeave"
+                @cell-click="emitCellClick"
+                @cell-dblclick="emitCellDblclick">
         <template slot="empty">
           <slot name="empty"> </slot>
         </template>
@@ -79,7 +63,7 @@
                          :resizable="false"
                          v-if="checked"
                          :reserve-selection="reserveSelection"
-                         :selectable="(row) => row[selectKey] !== false"
+                         :selectable="isSelectableRow"
                          type="selection">
         </el-table-column>
         <el-table-column v-if="isExpand"
@@ -175,7 +159,7 @@
           <PageInfo :hide-on-single-page="pagination && pagination.hideOnSinglePage"
                     :small="pagination && pagination.small"
                     :style="pageStyle"
-                    @onchange="(e) => $emit('onchange', e)"
+                    @onchange="emitPageChange"
                     :page-sizes="pagination && pagination.pageSizes"
                     :page-info="state.pageInfo"></PageInfo>
         </el-col>
@@ -258,23 +242,22 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { Column, PageInfoType } from "@/packages/type";
-import PageInfo from "@/packages/PageInfo/index.vue";
-import HtUploadFiles from "@/packages/HtUploadFiles/index.vue";
-import HtShowBaseData from "@/packages/HtShowBaseData";
-import HtOrgInfo from "@/packages/HtOrgInfo";
-import HtSelectUnit from "@/packages/HtSelectUnit";
+import { Column, PageInfoType } from "../type";
+import PageInfo from "../PageInfo/index.vue";
+import HtUploadFiles from "../HtUploadFiles/index.vue";
+import HtShowBaseData from "../HtShowBaseData";
+import HtOrgInfo from "../HtOrgInfo";
+import HtSelectUnit from "../HtSelectUnit";
 import HtTableColumn from "./htTableColumn.vue";
 import ElmentUI from "element-ui";
 import { getSpanMethod } from "./table-span-method";
-import {CreateJsonSettingDto, JsonSettingApi, JsonSettingDto}  from "@/plugins/jsonsetting"
+import {CreateJsonSettingDto, JsonSettingApi, JsonSettingDto}  from "../../plugins/jsonsetting"
 import {
   getAllBaseData,
   getAllOrg,
   getAllRole,
   getAllUser,
   getCurrentUser,
-  trackPageAndGenerateNumber,
 } from "../common";
 import { _axios } from "vue-kst-auth";
 Vue.use(ElmentUI);
@@ -283,8 +266,12 @@ interface State {
   loading: boolean;
   /** 展示出来的列表名 */
   showColumns: Column[];
+  /** 实际渲染的列 */
+  renderColumns: Column[];
   /** 全部的列 */
   allColumns: Column[];
+  /** 插槽转发需要的子列 */
+  slotColumns: Column[];
   /** 列表展示的列 */
   showColumnKeys: string[];
   /** 自定义列表选中的列 */
@@ -314,6 +301,8 @@ interface State {
   },
 })
 export default class HtTable extends Vue {
+  private layoutPending = false;
+
   /** 默认的table头 */
   @Prop({ default: [] }) columns!: Column[];
   @Prop({ default: "file-management-service" }) proxy?: string;
@@ -404,7 +393,9 @@ export default class HtTable extends Vue {
       totalCount: 0,
     },
     showColumns: [],
+    renderColumns: [],
     allColumns: [],
+    slotColumns: [],
     currentColumn: undefined,
     settingColumns:[],
     settingColumnId: undefined,
@@ -428,26 +419,76 @@ export default class HtTable extends Vue {
     //console.log(trackPageAndGenerateNumber());
     //console.log("this.columns", data);
   }
+  cloneColumns(columns: Column[] = []): Column[] {
+    return columns.map((item) => ({
+      ...item,
+      children: item.children?.length ? this.cloneColumns(item.children) : undefined,
+    }));
+  }
+  syncRenderColumns(columns: Column[] = []) {
+    const renderColumns = this.cloneColumns(columns);
+
+    renderColumns.forEach((item: Column) => {
+      if (item.children?.length && item.checked === false) {
+        const visibleChildren = item.children.filter(
+          (child: Column) => child.checked !== false
+        );
+        item.checked = visibleChildren.length > 0;
+        item.children = visibleChildren;
+      }
+    });
+
+    this.state.renderColumns = renderColumns;
+    this.state.slotColumns = columns.reduce((result: Column[], item) => {
+      if (item.children?.length) {
+        result.push(...item.children);
+      }
+      return result;
+    }, []);
+  }
+  scheduleLayout() {
+    if (this.layoutPending) {
+      return;
+    }
+    this.layoutPending = true;
+    this.$nextTick(() => {
+      this.layoutPending = false;
+      const table = this.$refs.comTable as any;
+      if (table && table.doLayout) {
+        table.doLayout();
+      }
+    });
+  }
+  normalizeColumns(columns: Column[] = []) {
+    const nextColumns = this.cloneColumns(columns);
+    const checkTrueArr = nextColumns.filter((item) => item.checked !== false);
+    if (!checkTrueArr.length) {
+      nextColumns.forEach((item) => {
+        item.checked = true;
+      });
+    } else {
+      nextColumns.forEach((item) => {
+        item.checked = item.checked === false ? false : true;
+      });
+    }
+    return nextColumns;
+  }
   resetColumn() {
+    let resetColumns: Column[] = [];
     if (this._configShow) {
-      this.columns.forEach((item) => {
+      const columns = this.cloneColumns(this.columns || []);
+      columns.forEach((item: Column) => {
         item.checked = !!item.deafaultShow;
       });
 
-      this.creatInitColumnKey(this.columns);
+      resetColumns = this.normalizeColumns(columns);
+      this.creatInitColumnKey(resetColumns);
     } else {
-      this.creatInitColumnKey(this.columns || []);
+      resetColumns = this.normalizeColumns(this.columns || []);
+      this.creatInitColumnKey(resetColumns);
     }
 
     this.state.visibleFilter = false;
-    if (this.uuId) {
-      
-      this.settingColums(this.uuId,this.columns)
-      // window.localStorage.setItem(
-      //   "table_" + this.uuId,
-      //   JSON.stringify(this.columns || [])
-      // );
-    }
   }
   settingColums(id: string,columns: Column[]){
     const data: CreateJsonSettingDto =new CreateJsonSettingDto ({
@@ -463,6 +504,7 @@ export default class HtTable extends Vue {
         }
         else{
            this.JsonSettingApi.jsonsetting(data).then((res)=>{
+            this.state.settingColumnId=res.id;
         this.state.settingColumns=res.value?JSON.parse(res.value):[];
        });
         }
@@ -487,26 +529,12 @@ export default class HtTable extends Vue {
   }
   /** 初始化columns */
   creatInitColumnKey(columns: Column[]) {
-    this.state.allColumns = columns;
-    /** 如果没有配置默认展示的字段则展示全部字段 */
-    const checkTrueArr = columns.filter((item) => item.checked !== false);
-    if (!checkTrueArr.length) {
-      this.state.allColumns.forEach((item) => {
-        item.checked = true;
-      });
-    } else {
-      this.state.allColumns.forEach((item) => {
-        item.checked = item.checked === false ? false : true;
-      });
-    }
+    this.state.allColumns = this.normalizeColumns(columns);
     this.setTableHeader(this.state.allColumns);
     this.getShowKeys(this.state.allColumns);
   }
   doLayout() {
-    this.$nextTick(() => {
-      (this.$refs.comTable as any).doLayout();
-      // el-table加ref="comTable"
-    });
+    this.scheduleLayout();
   }
   /** 展示附件信息 */
   showFiles(val = "") {
@@ -526,8 +554,8 @@ export default class HtTable extends Vue {
   handleDragOver() {
     // console.log("tree drag over: ", dropNode.label);
   }
-  handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
-    const { showColumns, currentColumn, checkedColumnKeys } = this.state;
+  handleDragEnd() {
+    const { currentColumn, checkedColumnKeys } = this.state;
     // if ((dropType === "before" || dropType === "after") && currentColumn) {
     //   const data = showColumns.filter(
     //     (item) => item.key !== currentColumn?.key
@@ -562,8 +590,7 @@ export default class HtTable extends Vue {
   async headerDragend(
     newWidth: number,
     _oldWidth: number,
-    column: any,
-    _event: MouseEvent
+    column: any
   ) {
     //  const data: JsonSettingDto =await  this.JsonSettingApi.jsonsetting2( "table_" + this.uuId,undefined,undefined);
     //  const allColumnsStr=data.value;
@@ -617,16 +644,17 @@ const Columns: any = this.state.settingColumns || [];
       // );
     }
     this.state.showColumns = allColumns;
+    this.syncRenderColumns(allColumns);
 
     this.state.visibleFilter = false;
     this.state.loading = false;
-    this.doLayout();
+    this.scheduleLayout();
   }
   /** 现在自定义列弹窗 */
   showFilterModel() {
     this.state.visibleFilter = true;
     this.state.checkedColumnKeys = this.state.showColumnKeys;
-    this.state.allColumns = JSON.parse(JSON.stringify(this.state.showColumns));
+    this.state.allColumns = this.cloneColumns(this.state.showColumns);
   }
   /** 自定义列表时候选中列 */
   changeColumns() {
@@ -635,8 +663,7 @@ const Columns: any = this.state.settingColumns || [];
   /** 自定义列排序的确定功能 */
   confirmSortAndshow() {
     this.state.loading = true;
-    this.state.showColumns = [];
-    this.state.allColumns = this.getAllColumns;
+    this.state.allColumns = this.cloneColumns(this.getAllColumns);
     const { allColumns, checkedColumnKeys } = this.state;
 
     function findChecked(colums: Column[]) {
@@ -663,29 +690,11 @@ const Columns: any = this.state.settingColumns || [];
 
   /** 获取显示出来的table头信息 */
   get showColumns() {
-    const stateColumns: Column[] = JSON.parse(
-      JSON.stringify(this.state.showColumns)
-    );
-    stateColumns.forEach((item) => {
-      if (item.children?.length && item.checked == false) {
-        const isChecked = !!item.children.find((item) => item.checked);
-        item.checked = isChecked;
-        item.children = item.children.filter((item) => item.checked !== false);
-      }
-    });
-    //console.log("showColumns", stateColumns);
-    return stateColumns;
+    return this.state.renderColumns;
   }
 
   get allChildren() {
-    const { showColumns } = this.state;
-    let allchildren: Column[] = [];
-    showColumns.forEach((item) => {
-      if (item.children) {
-        allchildren = [...allchildren, ...item.children];
-      }
-    });
-    return allchildren;
+    return this.state.slotColumns;
   }
   /** 获取所有基础信息 */
   get getAllBaseData() {
@@ -726,11 +735,6 @@ const Columns: any = this.state.settingColumns || [];
 
     return allColumns.filter((item) => !item.hide);
   }
-  @Watch("showColumns")
-  resetShowCOlums() {
-    // console.log("重置");
-    this.doLayout();
-  }
   @Watch("columns", { immediate: true })
   async setColumns(columns?: Column[]) {
     if (!columns||!columns.length) {
@@ -755,30 +759,86 @@ const Columns: any = this.state.settingColumns || [];
       // );
       const allColumns=allColumnsStr?JSON.parse(allColumnsStr):[];
       if (allColumnsStr && allColumns?.length) {
-        this.state.allColumns = allColumns;
-        this.state.showColumns = allColumns;
-        this.state.settingColumns=allColumns;
+        const normalizedColumns = this.normalizeColumns(allColumns);
+        this.state.allColumns = normalizedColumns;
+        this.state.showColumns = normalizedColumns;
+        this.syncRenderColumns(normalizedColumns);
+        this.state.settingColumns = normalizedColumns;
         this.getShowKeys(this.state.allColumns);
       } else {
         if (this._configShow) {
-       
-          columns.forEach((item) => (item.checked = !!item.deafaultShow));
-          this.creatInitColumnKey(columns);
+          const nextColumns = this.cloneColumns(columns);
+          nextColumns.forEach((item: Column) => (item.checked = !!item.deafaultShow));
+          this.creatInitColumnKey(nextColumns);
         } else {
-            //  console.log('this.configShow22222222222222222222222222222222',columns);
           this.creatInitColumnKey(columns || []);
         }
       }
     } else {
-     
       if (this._configShow) {
-        columns.forEach((item) => (item.checked = !!item.deafaultShow));
-        this.creatInitColumnKey(columns);
+        const nextColumns = this.cloneColumns(columns);
+        nextColumns.forEach((item: Column) => (item.checked = !!item.deafaultShow));
+        this.creatInitColumnKey(nextColumns);
       } else {
         this.creatInitColumnKey(columns || []);
       }
     }
   }
+  isSelectableRow(row: any) {
+    const selectKey = this.selectKey || "selectable";
+    return row[selectKey] !== false;
+  }
+  emitPageChange(event: any) {
+    this.$emit("onchange", event);
+  }
+  emitRowClick(row: any, column: any, event: MouseEvent) {
+    this.$emit("row-click", row, column, event);
+  }
+  emitRowContextmenu(row: any, column: any, event: MouseEvent) {
+    this.$emit("row-contextmenu", row, column, event);
+  }
+  emitRowDblclick(row: any, column: any, event: MouseEvent) {
+    this.$emit("row-dblclick", row, column, event);
+  }
+  emitHeaderClick(column: any, event: MouseEvent) {
+    this.$emit("header-click", column, event);
+  }
+  emitHeaderContextmenu(column: any, event: MouseEvent) {
+    this.$emit("header-contextmenu", column, event);
+  }
+  emitSortChange(payload: { column: any; prop: string; order: string }) {
+    this.$emit("sort-change", payload);
+  }
+  emitExpandChange(row: any, data: any) {
+    this.$emit("expand-change", row, data);
+  }
+  emitFilterChange(filter: any) {
+    this.$emit("filter-change", filter);
+  }
+  emitCurrentChange(currentRow: any, oldCurrentRow: any) {
+    this.$emit("current-change", currentRow, oldCurrentRow);
+  }
+  emitSelect(selection: any[], row: any) {
+    this.$emit("select", selection, row);
+  }
+  emitSelectAll(selection: any[]) {
+    this.$emit("select-all", selection);
+  }
+  emitSelectionChange(selection: any[]) {
+    this.$emit("selection-change", selection);
+  }
+  emitCellMouseEnter(row: any, column: any, cell: HTMLElement, event: MouseEvent) {
+    this.$emit("cell-mouse-enter", row, column, cell, event);
+  }
+  emitCellMouseLeave(row: any, column: any, cell: HTMLElement, event: MouseEvent) {
+    this.$emit("cell-mouse-leave", row, column, cell, event);
+  }
+  emitCellClick(row: any, column: any, cell: HTMLElement, event: MouseEvent) {
+    this.$emit("cell-click", row, column, cell, event);
+  }
+  emitCellDblclick(row: any, column: any, cell: HTMLElement, event: MouseEvent) {
+    this.$emit("cell-dblclick", row, column, cell, event);
+  }
   get spanMethodCom() {
     return this.spanMethod
       ? this.spanMethod

package/src/packages/common.ts

@@ -246,7 +246,7 @@ export const roundHalfToEven = (num: number, precision = 2) => {
 
 /** 获取所有部门信息 */
 export const getAllOrg = () => {
-  if (dataCache.allOrg) {
+  if (dataCache.allOrg && Object.keys(dataCache.allOrg).length) {
     return dataCache.allOrg;
   }
   const baseDataItem: any = {}
@@ -288,12 +288,14 @@ export const getAllOrg = () => {
     });
   }
   getBaseDataItem(organizationUnit);
-  dataCache.allOrg = baseDataItem;
+  if (Object.keys(baseDataItem).length) {
+    dataCache.allOrg = baseDataItem;
+  }
   return baseDataItem
 }
 /** 获取所有角色信息 */
 export const getAllRole = () => {
-  if (dataCache.allRole) {
+  if (dataCache.allRole && Object.keys(dataCache.allRole).length) {
     return dataCache.allRole;
   }
   const baseDataItem: any = {}
@@ -335,12 +337,14 @@ export const getAllRole = () => {
     });
   }
   getBaseDataItem(roleList);
-  dataCache.allRole = baseDataItem;
+  if (Object.keys(baseDataItem).length) {
+    dataCache.allRole = baseDataItem;
+  }
   return baseDataItem
 }
 /** 获取所有用户信息 */
 export const getAllUser = () => {
-  if (dataCache.allUser) {
+  if (dataCache.allUser && Object.keys(dataCache.allUser).length) {
     return dataCache.allUser;
   }
   const baseDataItem: any = {}
@@ -383,13 +387,15 @@ export const getAllUser = () => {
     });
   }
   getBaseDataItem(items);
-  dataCache.allUser = baseDataItem;
+  if (Object.keys(baseDataItem).length) {
+    dataCache.allUser = baseDataItem;
+  }
   return baseDataItem
 }
 
 /** 获取所有的base信息通过KEY:VALUE形式 */
 export const getAllBaseData = () => {
-  if (dataCache.allBaseData) {
+  if (dataCache.allBaseData && Object.keys(dataCache.allBaseData).length) {
     return dataCache.allBaseData;
   }
   const baseDataItem: any = {}
@@ -432,7 +438,9 @@ export const getAllBaseData = () => {
   }
   getBaseDataItem(items);
 
-  dataCache.allBaseData = baseDataItem;
+  if (Object.keys(baseDataItem).length) {
+    dataCache.allBaseData = baseDataItem;
+  }
   return baseDataItem
 }
 export function getCurrentTime() {

package/src/views/About.vue

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2026-01-29 11:08:04
+ * @LastEditTime: 2026-04-01 16:59:57
 -->
 <template>
   <div>
@@ -42,9 +42,7 @@
     <!-- <ht-md v-model="state.content" :subfield="true"></ht-md> -->
     <div ref="ht-pdf">
       <HtTable :data="state.data"
-               
-               :uuId="'dhjdsfgsdfs4443334'"
-              
+               :uuId="'dhjdsfgsdf111s4443334'"
                :checked="true"
                :isExpand="false"
                :height="500"
@@ -123,10 +121,10 @@ export default class Index extends Vue {
     colData: [],
     data: [
       {
-        name: "胡涛",
-        userId: "50eb2d57-8529-00fb-4244-3a0c8ec117b0",
-        basedata: "0af4e2e8-21a8-85ed-bca5-3a0f9d36eb5f",
-        orgId: "2c3f739e-3c8d-3095-c7c4-3a0e59500dc0",
+        name: "胡涛333",
+        userId: "97647de0-e220-72da-f384-3a152fde09dc",
+        basedata: "8544c882-a62a-de52-89b3-3a1ddb2fe980",
+        orgId: "d3a872be-582e-70c4-e43b-3a13f4f0b3e0",
         selectable: true,
         times: 1,
 
@@ -138,7 +136,7 @@ export default class Index extends Vue {
       },
       {
         name: "胡涛",
-        userId: "50eb2d57-8529-00fb-4244-3a0c8ec117b0",
+        userId: "97647de0-e220-72da-f384-3a152fde09dc",
         times: 1,
         age: 12,
         selectable: false,
@@ -149,7 +147,7 @@ export default class Index extends Vue {
       },
       {
         name: "胡涛1",
-        userId: "50eb2d57-8529-00fb-4244-3a0c8ec117b0",
+        userId: "97647de0-e220-72da-f384-3a152fde09dc",
         age: 13,
         times: 1,
         sex: "tt",
@@ -159,7 +157,7 @@ export default class Index extends Vue {
       },
       {
         name: "胡涛",
-        userId: "50eb2d57-8529-00fb-4244-3a0c8ec117b0",
+        userId: "97647de0-e220-72da-f384-3a152fde09dc",
         age: 13,
         times: 4,
         file: [],
@@ -170,7 +168,7 @@ export default class Index extends Vue {
       },
       {
         name: "胡涛",
-        userId: "50eb2d57-8529-00fb-4244-3a0c8ec117b0",
+        userId: "97647de0-e220-72da-f384-3a152fde09dc",
         age: 12,
         times: 8,
         sex: "tt",