htui-yllkbz 1.4.9 → 1.4.11

package/src/packages/HtTable/table.vue

@@ -0,0 +1,607 @@
+<!--
+ * @Descripttion: ht-table
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-11 11:23:24
+ * @LastEditors: hutao
+ * @LastEditTime: 2023-04-09 15:35:02
+-->
+<template>
+  <div v-loading="state.loading" style="background:#fff">
+    <article>
+      <el-table
+        ref="comTable"
+        :height="height"
+        :max-height="maxHeight"
+        :sum-text="sumText"
+        :show-summary="showSummary"
+        :summary-method="summaryMethod"
+        :border="border"
+        :default-expand-all="defaultExpandAll"
+        :expand-row-keys="expandRowKeys"
+        :stripe="stripe !== undefined ? stripe : true"
+        :size="size || 'small'"
+        :fit="fit"
+        :span-method="spanMethodCom"
+        :header-row-style="
+          headerRowStyle || { background: 'var(--primary-92)' }
+        "
+        :header-row-class-name="headerRowClassName"
+        :header-cell-class-name="headerCellClassName"
+        :header-cell-style="headerCellStyle"
+        :show-header="showHeader"
+        :empty-text="emptyText || '暂无数据'"
+        :row-style="rowStyle"
+        :row-class-name="rowClassName"
+        :current-row-key="currentRowKey"
+        :highlight-current-row="highlightCurrentRow"
+        :row-key="rowKey || 'id'"
+        :data="data"
+        tooltip-effect="dark"
+        @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)
+        "
+        @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)
+        "
+      >
+        <el-table-column
+          width="55"
+          :resizable="false"
+          v-if="checked"
+          :reserve-selection="reserveSelection"
+          :selectable="(row) => row[selectKey] !== false"
+          type="selection"
+        >
+        </el-table-column>
+        <el-table-column v-if="isExpand" type="expand">
+          <!-- 展开行专用 -->
+          <template slot-scope="props">
+            <slot
+              name="expand"
+              :row="props.row"
+              :column="props.column"
+              :rowIndex="props.$index"
+            >
+            </slot>
+          </template>
+        </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'">
+              <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="{ row, column, $index }">
+            <slot
+              name="body_order"
+              :row="row"
+              :column="column"
+              :$index="$index"
+            >
+              {{
+                (state.pageInfo.currentPage - 1) * state.pageInfo.pageSize +
+                  ($index + 1)
+              }}
+            </slot>
+          </template>
+        </el-table-column>
+        <template v-for="(item, index) in state.showColumns">
+          <HtTableColumn
+            :key="`${item.key}_${index}`"
+            :item="item"
+          ></HtTableColumn>
+        </template>
+      </el-table>
+    </article>
+    <footer v-if="!hidePage" class="ht-table-footer">
+      <el-row name="footer">
+        <!-- 此处建议使用el-col -->
+        <slot name="footerLeft"></slot>
+
+        <el-col :span="$slots['footerLeft'] ? 12 : 24">
+          <!-- <p style="width:90px;float:left">共{{data.length}}条</p> -->
+          <PageInfo
+            :hide-on-single-page="pagination && pagination.hideOnSinglePage"
+            :small="pagination && pagination.small"
+            :style="pageStyle"
+            @onchange="(e) => $emit('onchange', e)"
+            :page-sizes="pagination && pagination.pageSizes"
+            :page-info="state.pageInfo"
+          ></PageInfo>
+        </el-col>
+      </el-row>
+    </footer>
+    <!-- 详情弹框 -->
+    <el-dialog
+      :visible.sync="state.visibleFilter"
+      title="属性设置"
+      v-if="state.visibleFilter"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="true"
+      width="400px"
+    >
+      <p
+        slot="title"
+        style="font-weight:700;font-size:18px;float:left;margin:0"
+      >
+        自定义列展示
+      </p>
+      <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"
+            @node-drag-enter="handleDragEnter"
+            @node-drag-leave="handleDragLeave"
+            @node-drag-over="handleDragOver"
+            @node-drag-end="handleDragEnd"
+            @node-drop="handleDrop"
+            :default-checked-keys="state.checkedColumnKeys"
+            @check-change="changeColumns"
+            :allow-drag="allowDrag"
+            :draggable="draggable"
+            :allow-drop="allowDrop"
+          >
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <slot :name="'header_' + data.key" :column="data"
+                >{{ data.title
+                }}<span style="color:#C0C4CC">{{
+                  data.property ? `(${data.property})` : ''
+                }}</span></slot
+              >
+            </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>
+        <el-button @click="resetColumn">重置</el-button>
+      </span>
+    </el-dialog>
+    <!-- 附件详情弹框 -->
+    <el-dialog
+      :visible.sync="state.visibleFile"
+      v-if="state.visibleFile"
+      title="附件查看"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="true"
+      width="400px"
+      :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" v-model="state.files"></HtUploadFiles>
+        </el-scrollbar>
+      </div>
+    </el-dialog>
+  </div>
+</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 HtTableColumn from './htTableColumn.vue';
+import ElmentUI from 'element-ui';
+import { getSpanMethod } from './table-span-method';
+Vue.use(ElmentUI);
+interface State {
+  pageInfo: PageInfoType;
+  loading: boolean;
+  /** 展示出来的列表名 */
+  showColumns: Column[];
+  /** 全部的列 */
+  allColumns: Column[];
+  /** 列表展示的列 */
+  showColumnKeys: string[];
+  /** 自定义列表选中的列 */
+  checkedColumnKeys: string[];
+  /** 是否展示筛选框 */
+  visibleFilter: boolean;
+  /** 是否展示附件 */
+  visibleFile: boolean;
+  /** 当前拖动的数据 */
+  currentColumn?: Column;
+  /** 附件ids */
+  files?: string;
+}
+@Component({
+  name: 'HtTable',
+  components: {
+    PageInfo,
+    HtUploadFiles,
+    HtShowBaseData,
+    HtOrgInfo,
+    HtSelectUnit,
+    HtTableColumn,
+  },
+})
+export default class HtTable extends Vue {
+  /** 默认的table头 */
+  @Prop({ default: [] }) columns!: Column[];
+  @Prop() data!: any[];
+  /** 是否在表尾显示合计行 */
+  @Prop({ default: false }) showSummary!: boolean;
+  /** 分页样式自定义 */
+  @Prop() pageStyle!: string;
+  /** 合计行第一列的文本 */
+  @Prop({ default: '合计' }) sumText!: string;
+  @Prop({ default: false }) defaultExpandAll!: boolean;
+  @Prop() expandRowKeys!: string[];
+  /** 自定义合并方法 */
+  @Prop() summaryMethod!: any;
+  /**  序号对应的名称 */
+  @Prop() keyName?: string;
+  /** 合并单元格 */
+  @Prop() spanMethod?: {
+    rowspan: number;
+    colspan: number;
+  };
+  /** 是否启用展开行功能 */
+  @Prop() isExpand?: boolean;
+  /** 打开配置列 */
+  @Prop() configShow?: boolean;
+  /**  是否增加筛选功能 */
+  @Prop() showFilter?: boolean;
+  /**  table的唯一值用于table数据筛选 */
+  @Prop() uuId?: string;
+  /** 是否隐藏分页 */
+  @Prop() hidePage!: boolean;
+
+  /**  仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） */
+  @Prop() reserveSelection!: boolean;
+  @Prop() height?: string | number;
+  @Prop() maxHeight?: string | number;
+  @Prop() rowKey?: string;
+  @Prop() stripe?: boolean;
+  @Prop() border?: boolean;
+  @Prop() size?: 'medium' | 'small' | 'mini';
+  @Prop() fit?: boolean;
+  @Prop() showHeader?: boolean;
+  @Prop() rowClassName?: any;
+  /** 是否启用复选框 */
+  @Prop() checked!: boolean;
+  /** 设置的禁用字段值--与check同步 */
+  @Prop({ default: 'selectable' }) selectKey?: string;
+  /**    仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
+  @Prop() selectable?: any;
+  @Prop() currentRowKey?: string | number;
+  @Prop() highlightCurrentRow?: boolean;
+  @Prop() rowStyle?: any;
+  @Prop() hideOrder?: boolean;
+  @Prop() pageInfo?: PageInfoType;
+  @Prop() emptyText?: string | number;
+  @Prop() headerRowStyle?: any;
+  @Prop() headerRowClassName?: any;
+  @Prop() headerCellClassName?: any;
+  @Prop() headerCellStyle?: any;
+  /** 是否可以拖动排序 */
+  @Prop({ default: true }) draggable?: boolean;
+  @Prop() spanMethodProps?: {
+    /** 需要合并的key值--将指定的列的行进行合并 */
+    colRows?: string[];
+    /** 将指定的列进行合并时候 合并规则必须相同 */
+    sameColRows?: string[];
+    relateProps?: { [key: string]: string };
+  };
+
+  /** 分页的所有额外信息通过此参数传递 */
+  @Prop() pagination?: any;
+  state: State = {
+    loading: false,
+    files: undefined,
+    pageInfo: {
+      currentPage: 1,
+      pageSize: 10,
+      skipCount: 0,
+      totalCount: 0,
+    },
+    showColumns: [],
+    allColumns: [],
+    currentColumn: undefined,
+    visibleFilter: false,
+    visibleFile: false,
+    showColumnKeys: [],
+    checkedColumnKeys: [],
+  };
+  created() {
+    this.setPageInfo(this.pageInfo);
+    //this.setColumns(this.columns);
+
+    // console.log("this.columns", this.columns);
+  }
+  resetColumn() {
+    if (this.configShow) {
+      this.columns.forEach((item) => {
+        item.checked = !!item.deafaultShow;
+      });
+
+      this.creatInitColumnKey(this.columns);
+    } else {
+      this.creatInitColumnKey(this.columns || []);
+    }
+
+    this.state.visibleFilter = false;
+    if (this.uuId) {
+      window.localStorage.setItem(
+        'table_' + this.uuId,
+        JSON.stringify(this.columns || [])
+      );
+    }
+  }
+  /** 获取展示的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 = item.checked === false ? false : true;
+    });
+    this.$nextTick(() => {
+      (this.$refs.comTable as any).doLayout();
+      // el-table加ref="comTable"
+    });
+    this.getShowKeys(this.state.allColumns);
+  }
+  doLayout() {
+    this.$nextTick(() => {
+      (this.$refs.comTable as any).doLayout();
+      // el-table加ref="comTable"
+    });
+  }
+  /** 展示附件信息 */
+  showFiles(val = '') {
+    this.state.files = val;
+    this.state.visibleFile = true;
+  }
+
+  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, checkedColumnKeys } = 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);
+
+    if (currentColumn && checkedColumnKeys.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;
+  }
+
+  /** 现在自定义列弹窗 */
+  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 = [];
+    this.state.allColumns = this.getAllColumns;
+    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.$nextTick(() => {
+      (this.$refs.comTable as any).doLayout();
+      // el-table加ref="multipleTable"
+    });
+
+    /** 自定义列回调 */
+    this.$emit('customColumn', allColumns);
+  }
+
+  /** 获取显示出来的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) {
+    if (val) {
+      const pageInfo: PageInfoType = val;
+      this.state.pageInfo = {
+        currentPage: Number(pageInfo.currentPage),
+        pageSize: Number(pageInfo.pageSize),
+        skipCount: Number(pageInfo.skipCount),
+        totalCount: Number(pageInfo.totalCount),
+      };
+    }
+  }
+  get getAllColumns() {
+    const { allColumns } = this.state;
+
+    return allColumns.filter((item) => !item.hide);
+  }
+  @Watch('columns', { immediate: true })
+  setColumns(columns?: Column[]) {
+    if (!columns) {
+      return;
+    }
+    if (this.uuId) {
+      //通过uuid获取缓存起来的header显示信息
+      //-todo
+      //---columns 要改变
+      //---showColumnKeys 要改变
+      //---排列顺序要改变 todo
+      const allColumns: string | null = window.localStorage.getItem(
+        'table_' + this.uuId
+      );
+      if (allColumns) {
+        this.state.allColumns = JSON.parse(allColumns);
+        this.state.showColumns = JSON.parse(allColumns);
+        this.getShowKeys(this.state.allColumns);
+      } else {
+        if (this.configShow) {
+          columns.forEach((item) => (item.checked = !!item.deafaultShow));
+          this.creatInitColumnKey(columns);
+        } else {
+          this.creatInitColumnKey(columns || []);
+        }
+      }
+    } else {
+      if (this.configShow) {
+        columns.forEach((item) => (item.checked = !!item.deafaultShow));
+        this.creatInitColumnKey(columns);
+      } else {
+        this.creatInitColumnKey(columns || []);
+      }
+    }
+  }
+  get spanMethodCom() {
+    return this.spanMethod
+      ? this.spanMethod
+      : getSpanMethod(
+          this.data,
+          this.spanMethodProps?.colRows || [],
+          this.spanMethodProps?.sameColRows || [],
+          this.spanMethodProps?.relateProps
+        );
+  }
+}
+</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: 2023-03-30 15:17:48
+ * @LastEditTime: 2023-04-09 10:34:44
  */
 /** 初始的默认条数 */
 export const defalutPageSize = 10
@@ -68,9 +68,9 @@ export interface Column {
   hide?: boolean;
   /**  时间是否跨行展示 */
   spread?: boolean;
-  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值|图片 |附件*/
-  type?: 'userId' | 'org' | 'time' | 'common' | 'boolean' | 'img' | 'file' | 'unit' | 'position';
-  /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  unit是新资产的单位  position资产位置*/
+  /** 通过type展示相应的数据  用户id|部门id|时间格式化|是否布尔值|图片 |附件 |* |unit是新资产的单位  position资产位置 |日期 */
+  type?: 'userId' | 'org' | 'time' | 'common' | 'boolean' | 'img' | 'file' | 'unit' | 'position' | 'date';
+  /**    只有当type='common'时候有效  数据类型个ca common里面的一样但不包括时间 时间使用time  */
   commonType?: 'userId' | 'departmentId' | 'baseDataId' | 'roleId' | 'baseDataName' | 'baseDataValue';
   /** 当type===common时候 设置是否隐藏基础数据的value */
   hideCode?: boolean;
@@ -83,6 +83,8 @@ export interface Column {
   property?: string;
   /** 自定义列时候处理是否被选中 */
   checked?: boolean;
+  /** 是否存在合并单元格,如果有子项则用children处理 */
+  children?: Column[];
 }
 export interface PageInfoType {
   currentPage: number;

package/src/router/index.ts

@@ -4,11 +4,12 @@
  * @Author: hutao
  * @Date: 2021-12-29 15:18:26
  * @LastEditors: hutao
- * @LastEditTime: 2023-03-30 16:41:47
+ * @LastEditTime: 2023-04-09 11:05:05
  */
 import { RouteConfig } from "vue-router";
 import Index from "../views/Index.vue";
 import Login from "vue-kst-auth";
+import About from "../views/About.vue";
 
 const routes: Array<RouteConfig> = [
   {
@@ -28,7 +29,7 @@ const routes: Array<RouteConfig> = [
         meta: {
           title: "资产管理"
         },
-        component: Index
+        component: About
       },
       {
         path: "assetManagement",