htui-yllkbz 2.0.0 → 2.0.2

package/src/packages/HtTable/table.vue

@@ -1,604 +0,0 @@
-<!--
- * @Descripttion: ht-table
- * @version: 
- * @Author: hutao
- * @Date: 2021-11-11 11:23:24
- * @LastEditors: hutao
- * @LastEditTime: 2023-04-09 16:00:36
--->
-<template>
-  <div v-loading="state.loading">
-    <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"
-        :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"
-            @showFiles="showFiles"
-          ></HtTableColumn>
-        </template>
-      </el-table>
-    </article>
-    <footer v-if="!hidePage" class="ht-table-footer">
-      <el-row name="footer" style="margin-top: 16px;">
-        <el-col :span="$slots['footerRight'] ? 12 : 24">
-          <PageInfo
-            :hide-on-single-page="pagination && pagination.hideOnSinglePage"
-            :style="pageStyle"
-            @onchange="(e) => $emit('onchange', e)"
-            :page-sizes="pagination && pagination.pageSizes"
-            :page-info="state.pageInfo"
-          ></PageInfo>
-        </el-col>
-        <!-- 此处建议使用el-col -->
-        <slot name="footerRight"></slot>
-      </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>