meixioacomponent 0.1.0

package/packages/components/proPageTable/oa_pro_table.vue

@@ -0,0 +1,804 @@
+<template>
+  <div class="oa-pro-table-wrap" :style="{ height: height }">
+    <!-- 表格的头部 -->
+    <div
+      class="oa-pro-header-wrap"
+      v-if="headerConfig"
+      :style="{ height: `${config.headerHeight}px` }"
+    >
+      <!-- 表格头部 -->
+      <oaProHeader :headerText="headerConfig.headerText">
+        <template slot="prefix">
+          <slot name="prefix"></slot>
+        </template>
+        <div class="header-extend" slot="headerExtend">
+          <slot name="headerExtend"></slot>
+        </div>
+        <template slot="suffix">
+          <slot name="suffix"></slot>
+        </template>
+      </oaProHeader>
+    </div>
+    <!-- 表格搜索 -->
+
+    <div class="oa-pro-table-search">
+      <oa_pro_table_searchVue
+        v-model="module"
+        :screenList="screenList"
+        :placeholder="placeholder"
+        :proScreenList="proScreenList"
+        :proScreenConfig="_proScreenConfig"
+        @searchContentHeightChange="searchContentHeightChange"
+      ></oa_pro_table_searchVue>
+    </div>
+
+    <!-- 表格内容 -->
+
+    <div
+      :class="{
+        'oa-pro-table': true,
+        'check-type-single': tableCheckboxConfig.type == 'single',
+        'check-type-multiple': tableCheckboxConfig.type == 'multiple',
+      }"
+    >
+      <el-table
+        ref="elTable"
+        :stripe="true"
+        :data="tableData"
+        :height="tableHeight"
+        @cell-mouse-enter="cellMouseEnter"
+        @cell-mouse-leave="cellMouseLeave"
+        @selection-change="handleSelectionChange"
+        :style="{
+          width: width,
+        }"
+        border
+      >
+        <!-- 表格暂无数据 -->
+        <template slot="empty">
+          <baseDefaultSvgVue
+            :width="280"
+            :height="280"
+            v-show="defaultSvg"
+            :svgName="`no-data`"
+            :text="`暂无表格数据`"
+          ></baseDefaultSvgVue>
+          <!-- 加载骨架屏 -->
+          <oa_pro_table_skeletonVue
+            slot="append"
+            :height="`${tableHeight}px`"
+            v-show="loading"
+          ></oa_pro_table_skeletonVue>
+          <span></span>
+        </template>
+
+        <el-table-column type="selection" width="60px"></el-table-column>
+        <el-table-column
+          :key="index"
+          :align="align"
+          :fixed="item.lock"
+          v-show="item.show"
+          :prop="item.key"
+          :label="item.label"
+          :width="item.width"
+          v-for="(item, index) in showTableHeader"
+          sortable
+        >
+          <template slot="header" slot-scope="scope">
+            <oaProtableHeader
+              :scope="scope"
+              :config="item"
+              :index="index"
+              @headerItemLock="headerItemLock"
+              @headerItemUnlock="headerItemUnlock"
+              @handleScreenItem="handleScreenItem"
+            ></oaProtableHeader>
+          </template>
+
+          <template slot-scope="scope">
+            <slot :name="item.key" :scope="scope.row" v-if="item.template">
+            </slot>
+
+            <span
+              v-else
+              :class="
+                item.click
+                  ? 'cell-content-text active'
+                  : `cell-content-text ${item.color}`
+              "
+              @click="rowClick(item, scope.row)"
+              >{{ scope.row[`${item.key}`] }}</span
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="table-suffix">
+        <oa_pro_colum_configVue
+          :config="tableConfig"
+          @setTableHeaderConfig="setTableHeaderConfig"
+        ></oa_pro_colum_configVue>
+      </div>
+      <!-- 每一个单元格提示内容 -->
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :manual="true"
+        placement="top"
+        ref="tableTooltip"
+        v-model="tooltip.show"
+        :visible-arrow="false"
+        :content="`${tooltip.content}`"
+      >
+        <span class="table-tooltip-wrap" :style="toolTipsStyle"> </span>
+      </el-tooltip>
+    </div>
+
+    <!-- 表格尾部 -->
+    <div
+      class="oa-pro-table-footer"
+      :style="{ height: `${config.footHeight}px` }"
+    >
+      <oa_pro_footerVue
+        :pageProps="pageProps"
+        :totalList="totalList"
+        :pageConfig="pageConfig"
+      ></oa_pro_footerVue>
+    </div>
+
+    <!-- 高级筛选的弹框 -->
+    <base-dialog
+      :title="`高级筛选`"
+      ref="dialog"
+      :width="`1000px`"
+      :modal="proScreenModel"
+      :modallAppendToBody="false"
+    >
+      <oa_pro_screenVue
+        slot="dialog-content"
+        :proScreenList="proScreenList"
+        :proScreenConfig="_proScreenConfig"
+        @insertDefaultItem="insertDefaultItem"
+        @deleteProscreenItem="deleteProscreenItem"
+      ></oa_pro_screenVue>
+
+      <baseButtonHandle
+        slot="dialog-footer"
+        :config="footerHandleConfig"
+      ></baseButtonHandle>
+    </base-dialog>
+  </div>
+</template>
+
+<script>
+import oaProHeader from "./oa_pro_header.vue"; //表格头部
+import oa_pro_footerVue from "./oa_pro_footer.vue"; //表格尾部
+import oa_pro_screenVue from "./oa_pro_screen.vue"; //表格高级搜索组件
+import oaProtableHeader from "./oa_pro_table-header.vue"; //表格自定义列表头组件
+import oa_pro_table_searchVue from "./oa_pro-table-search.vue"; //表格搜索组件
+import oa_pro_colum_configVue from "./oa_pro_colum_config.vue"; //表格列配置组件
+import oa_pro_table_skeletonVue from "./oa_pro_table_skeleton.vue"; //表格骨架屏
+import baseDefaultSvgVue from "../base/baseDefaultSvg/baseDefaultSvg.vue"; //缺省页组件
+import baseButtonHandle from "../base/baseButtonHandle/baseButtonHandle.vue"; //通用组件 排列尾部按钮的组件
+export default {
+  name: "baseProTable",
+  data() {
+    return {
+      /* 表格数据 */
+      tableData: [],
+      /* 尾部显示当前列表的统计 */
+      totalList: [],
+      /* 搜索内容的高度*/
+      searchContentHeight: 70,
+      /* 高级筛选的配置 */
+      _proScreenConfig: [],
+      /* 需要高级筛选的列表 */
+      proScreenList: [],
+      /* 对话框的尾部的按钮 */
+      footerHandleConfig: [],
+      /* 控制loading动画 */
+      loading: false,
+      defaultSvg: false,
+      /* 黑色提示框数据 */
+      tooltip: {
+        top: null,
+        left: null,
+        width: null,
+        height: null,
+        show: false,
+        content: "",
+      },
+      /* 单选表格  记录之前选择的表格数据 */
+      preSingleTableValue: null,
+    };
+  },
+  created() {
+    this.init();
+  },
+  mounted() {
+    // this.init();
+  },
+  beforeDestroy() {},
+  computed: {
+    config() {
+      return {
+        footHeight: 60,
+        headerHeight: this.headerConfig ? 36 : 0,
+        searchContentHeight: this.searchContentHeight,
+      };
+    },
+
+    tableHeight() {
+      return (
+        this.$props.height -
+        this.config.footHeight -
+        this.config.headerHeight -
+        this.config.searchContentHeight
+      );
+    },
+    fixedList() {
+      return this.$props.tableConfig.filter((item) => {
+        return item.lock;
+      });
+    },
+
+    module: {
+      get() {
+        return this.$props.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+
+    showTableHeader() {
+      return this.$props.tableConfig.filter((item) => {
+        return item.show;
+      });
+    },
+
+    toolTipsStyle() {
+      return {
+        top: `${this.tooltip.top}px`,
+        left: `${this.tooltip.left}px`,
+        width: `${this.tooltip.width}px`,
+        height: `${this.tooltip.height}px`,
+      };
+    },
+  },
+  props: {
+    // 网络请求
+    httpRequire: {
+      type: Function,
+
+      default: () => {},
+    },
+    // 头部的配置
+    headerConfig: {
+      type: Object,
+      require: false,
+    },
+    //  表格的配置
+    tableConfig: {
+      type: Array,
+      require: true,
+    },
+
+    // 是否显示统计:
+    totalPropsList: {
+      type: Array,
+      default: () => [],
+    },
+
+    // 对齐方式
+    align: {
+      type: String,
+      require: false,
+      default: "left",
+    },
+    // 宽度
+    width: {
+      type: String,
+      require: false,
+      default: "100%",
+    },
+    // 宽度
+    height: {
+      type: Number,
+      require: true,
+    },
+    /*
+      keyword需要展现的提示
+    */
+    placeholder: {
+      type: String,
+      default: "回车键进行搜索",
+    },
+    /*
+         快捷筛选的列表
+     */
+    screenList: {},
+    /* 高级筛选的配置 */
+    proScreenConfig: {
+      type: Array,
+      default: () => [],
+    },
+
+    /* keyword的搜索关键字 */
+    value: {},
+
+    /* 分页属性 */
+    pageProps: {
+      type: Object,
+      require: true,
+    },
+
+    // 分页配置
+    pageConfig: {
+      type: Object,
+      require: true,
+    },
+
+    // 表格选择框的配置
+    tableCheckboxConfig: {
+      type: Object,
+      default: () => {
+        return {
+          value: [],
+          type: "single",
+        };
+      },
+    },
+
+    // 打开高级筛选是否需要model层
+    proScreenModel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    oaProHeader,
+    baseButtonHandle,
+    oa_pro_screenVue,
+    oa_pro_footerVue,
+    oaProtableHeader,
+    baseDefaultSvgVue,
+    oa_pro_table_searchVue,
+    oa_pro_colum_configVue,
+    oa_pro_table_skeletonVue,
+  },
+  methods: {
+    init() {
+      this.initProScreenConfig();
+      this.initFooterHandleConfig();
+      this.$props.tableConfig.forEach((item, index) => {
+        item.preIndex = index;
+        this.$set(item, "show", true);
+        if (!item.width || item.width < 150) {
+          item.width = 150;
+        }
+      });
+
+      this.$props.tableConfig.push({
+        label: "",
+        key: "noData",
+        lock: false,
+        width: 80,
+        show: true,
+        template: false,
+      });
+
+      this.startHttp();
+    },
+    searchContentHeightChange(height) {
+      this.searchContentHeight = height;
+    },
+
+    cellMouseEnter(row, column, cell, event) {
+      let content = row[`${column.property}`];
+      this.tooltip.show = false;
+      if (!content) return;
+      let style = event.target;
+      let position = style.getBoundingClientRect();
+      this.tooltip.width = style.clientWidth;
+      this.tooltip.height = style.clientHeight;
+      this.tooltip.top = position.top;
+      this.tooltip.left = position.left;
+      this.tooltip.content = content;
+
+      this.$nextTick(() => {
+        this.tooltip.show = true;
+      });
+    },
+
+    cellMouseLeave() {
+      this.tooltip.show = false;
+    },
+    headerItemLock(params) {
+      let { preIndex, index } = { ...params };
+      let tableConfig = this.$props.tableConfig;
+      tableConfig[index].lock = true;
+      if (tableConfig[index].preIndex == undefined) {
+        tableConfig[index].preIndex = preIndex;
+      }
+      if (this.fixedList.length == 0) {
+        tableConfig.unshift(tableConfig[index]);
+      } else {
+        const _fixedList = this.fixedList;
+        for (let i = 0; i < _fixedList.length; i++) {
+          if (tableConfig[index].preIndex < _fixedList[i].preIndex) {
+            tableConfig.splice(i, 0, tableConfig[index]);
+            break;
+          } else if (i == _fixedList.length - 1) {
+            tableConfig.splice(_fixedList.length - 1, 0, tableConfig[index]);
+            break;
+          }
+        }
+      }
+      tableConfig.splice(index + 1, 1);
+    },
+    headerItemUnlock(params) {
+      let { preIndex, index } = { ...params };
+      let tableConfig = this.$props.tableConfig;
+      tableConfig[index].lock = false;
+
+      tableConfig.splice(
+        preIndex - index + this.fixedList.length,
+        0,
+        tableConfig.splice(index, 1)[0]
+      );
+    },
+    rowClick(config, row) {
+      if (!config.fun) return;
+      config.fun(row);
+    },
+    computedTotalList() {
+      this.totalList = [];
+      this.totalList = this.$props.totalPropsList;
+      if (this.totalList.length > 0 && this.tableData.length > 0) {
+        for (let i = 0; i < this.totalList.length; i++) {
+          if (
+            typeof this.tableData[0][`${this.totalList[i].value}`] == "number"
+          ) {
+            let total = this.tableData.reduce(
+              (preTotal, currentItem) =>
+                preTotal + currentItem[`${this.totalList[i].value}`],
+              0
+            );
+
+            this.totalList[i].total = total;
+          }
+        }
+      }
+    },
+    /* 当快捷筛选的按钮被点击后 */
+    handleScreen(index) {
+      this.$props.screenList.index = index;
+      this.startHttp();
+    },
+    // 初始化高级筛选
+    initProScreenConfig() {
+      let proScreenConfig = this.$props.proScreenConfig;
+      if (proScreenConfig.length > 0) {
+        this._proScreenConfig = proScreenConfig.map((item) => {
+          let index = this.$props.tableConfig.findIndex((citem) => {
+            console.log(citem);
+            return citem.key == item.key;
+          });
+
+          if (index > -1) {
+            this.$set(item, "label", this.$props.tableConfig[index].label);
+            this.$set(item, "isCheck", false);
+            return item;
+          }
+        });
+
+        console.log(this._proScreenConfig);
+      }
+    },
+    // 打开高级筛选
+    handleOpenProScreen() {
+      this.$refs.dialog.showDialog();
+    },
+    // 插入默认的高级筛选item
+    insertDefaultItem() {
+      let obj = {
+        key: "",
+        value: "",
+        exposed: false,
+        type: undefined,
+      };
+      this.proScreenList.push(obj);
+    },
+
+    handleScreenItem(config) {
+      console.log(config);
+
+      let index = this.proScreenList.findIndex((item) => {
+        return item.key == config.value;
+      });
+
+      if (index < 0) {
+        let _configIndex = this.$props.proScreenConfig.findIndex((item) => {
+          return item.key == config.value;
+        });
+
+        if (_configIndex >= 0) {
+          let _configItem = this.$props.proScreenConfig[_configIndex];
+          this.proScreenList.push({
+            key: _configItem.key,
+            value: "",
+            exposed: false,
+            type: _configItem.type,
+            configIndex: _configIndex,
+          });
+        }
+      }
+
+      this.$nextTick(() => {
+        this.$refs.dialog.showDialog();
+      });
+    },
+    // 删除高级筛选的item
+    deleteProscreenItem(index) {
+      this.proScreenList.splice(index, 1);
+    },
+    // 弹框确定的按钮
+    dialogProscreenConfirm(type) {
+      if (type) {
+        this.startHttp();
+      }
+      this.$refs.dialog.closeDialog();
+    },
+    // 初始化对话框尾部按钮
+    initFooterHandleConfig() {
+      this.footerHandleConfig = [
+        {
+          text: "取消",
+          type: "info",
+          plain: true,
+          click: () => {
+            this.dialogProscreenConfirm(false);
+          },
+        },
+        {
+          text: "确定",
+          type: "primary",
+          plain: false,
+          click: () => {
+            this.dialogProscreenConfirm(true);
+          },
+        },
+      ];
+    },
+    // 返回筛选条件的
+    returnProScreenResult() {
+      let result = {};
+      if (this.$props.screenList) {
+        let _screenListIndexItem =
+          this.$props.screenList.list[this.$props.screenList.index];
+        result[`keyword`] = this.module;
+        result[`${_screenListIndexItem.key}`] = _screenListIndexItem.value;
+      }
+
+      this.proScreenList.forEach((item) => {
+        result[`${item.key}`] = item.value;
+      });
+      result = Object.assign(result, this.$props.pageProps);
+      return result;
+    },
+    // 开始调用http请求
+    async startHttp(init = true) {
+      this.loading = true;
+      this.defaultSvg = false;
+      this.cleanCheckValue();
+      if (init) {
+        this.$props.pageProps[this.$props.pageConfig.page] = 1;
+      }
+
+      let screenResult = this.returnProScreenResult();
+      this.$props.httpRequire(screenResult).then((res) => {
+        this.setTableData(res);
+      });
+    },
+    // 设置表格数据
+    setTableData(data) {
+      this.tableData = [];
+      setTimeout(() => {
+        this.tableData = data;
+        if (this.tableData.length == 0) {
+          this.defaultSvg = true;
+        }
+        this.loading = false;
+
+        this.computedTotalList();
+      }, 500);
+    },
+    // element表格的重新渲染方法
+    daLayoutTable() {
+      this.$nextTick(() => {
+        console.log(this.$props.tableConfig);
+        this.$refs.elTable.doLayout();
+      });
+    },
+    // 清空高级筛选的条件
+    cleanProscreenCondition() {
+      if (this.proScreenList.length <= 0) return;
+      this.proScreenList.forEach((item) => {
+        item.value = null;
+      });
+    },
+    // 自定义表格的列
+    setTableHeaderConfig(configList) {
+      console.log(configList);
+      const index = this.$props.tableConfig.filter((item) => {
+        return item.lock;
+      }).length;
+      this.$props.tableConfig.splice(index, configList.length + 1);
+      this.$nextTick(() => {
+        configList.forEach((item) => {
+          this.$props.tableConfig.push(item);
+        });
+        this.$props.tableConfig.push({
+          label: "",
+          key: "noData",
+          lock: false,
+          width: 80,
+          show: true,
+          template: false,
+        });
+      });
+    },
+    // 表格行被选中时
+    handleSelectionChange(val) {
+      let tableCheckboxConfig = this.$props.tableCheckboxConfig;
+      if (tableCheckboxConfig.type == "single") {
+        if (!this.preSingleTableValue) {
+          this.preSingleTableValue = val[0];
+          tableCheckboxConfig.value = val;
+        } else {
+          let index = val.findIndex((item) => {
+            return item == this.preSingleTableValue;
+          });
+          if (index > -1) {
+            this.$refs.elTable.toggleRowSelection(
+              tableCheckboxConfig.value[index],
+              false
+            );
+            val.splice(index, 1);
+            tableCheckboxConfig.value = val;
+            this.preSingleTableValue = val[0];
+          }
+        }
+      } else {
+        tableCheckboxConfig.value = val;
+      }
+      console.log(tableCheckboxConfig.value);
+    },
+
+    // 返回被选中的值
+    returnCheckValue() {
+      return this.$props.tableCheckboxConfig.value;
+    },
+
+    // 清空被单选框选中的值
+    cleanCheckValue() {
+      this.preSingleTableValue = null;
+      this.tableCheckboxConfig.value = [];
+      this.$refs.elTable?.clearSelection();
+    },
+  },
+  watch: {
+    fixedList(newValue, oldValue) {
+      console.log("fixedList:");
+      console.log(newValue);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.oa-pro-table-wrap {
+  position: relative;
+  .oa-pro-header-wrap {
+    width: 100%;
+    background: inherit;
+    .header-extend {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      margin-right: var(--margin-5);
+    }
+  }
+  .table-suffix {
+    top: 0px;
+    right: 0px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    background: inherit;
+    position: absolute;
+    justify-content: center;
+    flex-flow: row nowrap;
+  }
+  /deep/ .caret-wrapper {
+    display: none;
+  }
+  .oa-pro-table {
+    position: relative;
+    /deep/ th {
+      padding: 0px 0px;
+      .cell {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+        .el-checkbox {
+          margin: 0px var(--margin-5);
+        }
+      }
+    }
+    /deep/ td {
+      padding: var(--padding-4) var(--padding-5);
+      .cell {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+        .el-checkbox {
+          margin: 0px var(--margin-5);
+        }
+      }
+    }
+    .table-tooltip-wrap {
+      z-index: -1;
+      position: fixed;
+      visibility: hidden;
+    }
+    .cell-content-text {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: var(--font-weight-g);
+      color: var(--form-label-color) !important;
+      font-size: calc(var(--font-size-s) * 1.1) !important;
+    }
+    .active {
+      cursor: pointer;
+      font-weight: var(--font-weight-g);
+      font-size: var(--font-size-base) !important;
+      color: var(--color-primary) !important;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .warn {
+      font-size: var(--font-size-base) !important;
+      color: var(--color-warn) !important;
+    }
+
+    .error {
+      font-size: var(--font-size-base) !important;
+      color: var(--color-error) !important;
+    }
+
+    .success {
+      font-size: var(--font-size-base) !important;
+      color: var(--color-success) !important;
+    }
+  }
+  .check-type-single {
+    /deep/ th {
+      .el-checkbox {
+        visibility: hidden;
+      }
+    }
+  }
+  .oa-pro-table-footer {
+    width: 100%;
+    background: inherit;
+    box-sizing: border-box;
+    padding-top: var(--padding-5);
+  }
+}
+</style>