|
|
@@ -2,26 +2,70 @@
|
|
|
export default {
|
|
|
name: "SuperTable",
|
|
|
props: {
|
|
|
+ // 数据
|
|
|
value: {
|
|
|
type: [Array],
|
|
|
require: true,
|
|
|
},
|
|
|
+ // 字典
|
|
|
dict: {
|
|
|
type: [Object],
|
|
|
require: true,
|
|
|
},
|
|
|
+ // 分页
|
|
|
+ page: {
|
|
|
+ type: [Object],
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ // 模板
|
|
|
columns: {
|
|
|
type: [Array],
|
|
|
require: true,
|
|
|
},
|
|
|
- stroage: {
|
|
|
+ // 是否显示序号
|
|
|
+ index: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否显示单选
|
|
|
+ radio: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
- hideOperationColumns: {
|
|
|
+ // 是否显示多选
|
|
|
+ checkbox: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
+ // 是否显示分页
|
|
|
+ pagination: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否显示操作图标
|
|
|
+ iconOperation: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否显示操作按钮
|
|
|
+ buttonOperation: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 是否禁止选择
|
|
|
+ selectable: {
|
|
|
+ type: Function,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+
|
|
|
+ // stroage: {
|
|
|
+ // type: Boolean,
|
|
|
+ // default: false,
|
|
|
+ // },
|
|
|
+ // hideOperationColumns: {
|
|
|
+ // type: Boolean,
|
|
|
+ // default: false,
|
|
|
+ // },
|
|
|
},
|
|
|
components: {
|
|
|
ElDictTag: () => import("@/components/DictTag/index.vue"),
|
|
|
@@ -30,28 +74,37 @@ export default {
|
|
|
ElComputedInput: () => import("@/components/computed-input/index.vue"),
|
|
|
ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
|
|
|
ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
|
|
|
+ ButtonHide: () => import("./hide.vue"),
|
|
|
+ ButtonFreeze: () => import("./freeze.vue"),
|
|
|
+ IconHide: () => import("./once/hide.vue"),
|
|
|
+ IconSort: () => import("./once/sort.vue"),
|
|
|
+ IconFilter: () => import("./once/filter.vue"),
|
|
|
+ IconFreeze: () => import("./once/freeze.vue"),
|
|
|
},
|
|
|
data() {
|
|
|
- const { columns, stroage } = this.$props;
|
|
|
- const stroageKey = (
|
|
|
- this.$parent.$parent.$options.name + "_table"
|
|
|
- ).toUpperCase();
|
|
|
- const loaclColumns = JSON.parse(localStorage.getItem(stroageKey));
|
|
|
- const innerColumns = stroage && !!loaclColumns ? loaclColumns : columns;
|
|
|
+ const { columns } = this.$props;
|
|
|
+ const innerColumns = columns;
|
|
|
return {
|
|
|
- drawer: false,
|
|
|
- visible: false,
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- stroageKey: stroageKey,
|
|
|
innerColumns: innerColumns,
|
|
|
- currentData: {},
|
|
|
+ rowKey: "id",
|
|
|
+ // 选择
|
|
|
+ selectData: [],
|
|
|
+ selectState: false,
|
|
|
+ // 过滤
|
|
|
+ filterData: [],
|
|
|
+ filterState: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
innerValue: {
|
|
|
get() {
|
|
|
- return this.value;
|
|
|
+ if (this.filterState) {
|
|
|
+ return this.filterData;
|
|
|
+ } else if (this.selectState) {
|
|
|
+ return this.selectData;
|
|
|
+ } else {
|
|
|
+ return this.$props.value;
|
|
|
+ }
|
|
|
},
|
|
|
set(value) {
|
|
|
this.$emit("input", value);
|
|
|
@@ -59,77 +112,128 @@ export default {
|
|
|
},
|
|
|
showColumns: {
|
|
|
get() {
|
|
|
- const { stroage, hideOperationColumns } = this.$props;
|
|
|
- return stroage && hideOperationColumns
|
|
|
- ? this.innerColumns.filter(({ item }) => item.hidden)
|
|
|
- : this.innerColumns;
|
|
|
+ return this.innerColumns.filter(({ item }) => item.hidden);
|
|
|
+ },
|
|
|
+ set() {},
|
|
|
+ },
|
|
|
+ filterRules: {
|
|
|
+ get() {
|
|
|
+ return Object.fromEntries(
|
|
|
+ this.innerColumns
|
|
|
+ .filter(({ item }) => item.filter && !!item.filter.length)
|
|
|
+ .map(({ item }) => [item.key, item.filter])
|
|
|
+ );
|
|
|
},
|
|
|
+ set() {},
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
- visible(value) {
|
|
|
- if (value) {
|
|
|
- document.body.addEventListener("click", this.hideContextmenu);
|
|
|
- document.body.addEventListener("keydown", this.hideContextmenu);
|
|
|
- } else {
|
|
|
- document.body.removeEventListener("click", this.hideContextmenu);
|
|
|
- document.body.removeEventListener("keydown", this.hideContextmenu);
|
|
|
- }
|
|
|
+ filterRules: {
|
|
|
+ handler: function (newValue) {
|
|
|
+ function multiFilter(array, filters) {
|
|
|
+ const filterKeys = Object.keys(filters);
|
|
|
+ // filters all elements passing the criteria
|
|
|
+ return array.filter((item) => {
|
|
|
+ // dynamically validate all filter criteria
|
|
|
+ return filterKeys.every((key) => {
|
|
|
+ //ignore when the filter is empty Anne
|
|
|
+ if (!filters[key].length) return true;
|
|
|
+ return !!~filters[key].indexOf(item[key]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.filterState = JSON.stringify(newValue) !== "{}";
|
|
|
+ this.filterData = multiFilter(this.$props.value, newValue);
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
- setColumns() {
|
|
|
- const { stroageKey, innerColumns } = this;
|
|
|
+ //
|
|
|
+ onSelectionChange(value) {
|
|
|
+ this.selectData = value;
|
|
|
+ },
|
|
|
+ //
|
|
|
+ onCellStyle({ row, column }) {
|
|
|
+ const { selectable } = this.$props;
|
|
|
+ // 禁止状态
|
|
|
+ if (!selectable(row)) {
|
|
|
+ return {
|
|
|
+ cursor: "no-drop",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 选中状态
|
|
|
+ // if (
|
|
|
+ // column.label === "#" &&
|
|
|
+ // this.selectData.find((item) => item.id === row.id)
|
|
|
+ // ) {
|
|
|
+ // return {
|
|
|
+ // color: "#fff",
|
|
|
+ // backgroundColor: "#409EFF",
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ //
|
|
|
+ onRowClick(row, column, event) {
|
|
|
+ const { radio, checkbox, selectable } = this.$props;
|
|
|
+ // 单选
|
|
|
+ if (radio && selectable(row)) {
|
|
|
+ this.selectData = [row];
|
|
|
+ this.innerValue = this.innerValue.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ isChecked: item.id === row.id ? true : false,
|
|
|
+ }));
|
|
|
+ this.$emit("row-select", this.selectData);
|
|
|
+ }
|
|
|
+ // 多选
|
|
|
+ if (checkbox && selectable(row)) {
|
|
|
+ this.$refs.superTable.toggleRowSelection(
|
|
|
+ this.innerValue.find((item) => item.id === row.id)
|
|
|
+ );
|
|
|
+ this.$emit("row-select", this.selectData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 冻结
|
|
|
+ onHide() {
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.superTable.doLayout();
|
|
|
- localStorage.setItem(stroageKey, JSON.stringify(innerColumns));
|
|
|
});
|
|
|
},
|
|
|
- resetColumns() {
|
|
|
- const { stroageKey, innerColumns } = this;
|
|
|
- this.innerColumns = innerColumns.map(({ item, attr }) => ({
|
|
|
- attr,
|
|
|
- item: { ...item, hidden: true, fixed: false },
|
|
|
- }));
|
|
|
+ // 排序
|
|
|
+ onSort(prop) {
|
|
|
+ const { key, sort } = prop;
|
|
|
this.$nextTick(() => {
|
|
|
+ this.$refs.superTable.sort(key, sort);
|
|
|
this.$refs.superTable.doLayout();
|
|
|
- localStorage.removeItem(stroageKey);
|
|
|
});
|
|
|
},
|
|
|
- openContextmenu(row, column, event) {
|
|
|
- this.visible = true;
|
|
|
- this.currentData = { row, column };
|
|
|
+ // 冻结
|
|
|
+ onFreeze() {
|
|
|
this.$nextTick(() => {
|
|
|
- // 鼠标坐标
|
|
|
- const { x, y } = event;
|
|
|
- // 侧边栏宽度
|
|
|
- const [{ clientWidth: sideWidth }] =
|
|
|
- document.getElementsByClassName("sidebar-container");
|
|
|
- // 导航栏宽度
|
|
|
- const { clientHeight: navHeight } =
|
|
|
- document.getElementsByClassName("main-container")[0].firstChild;
|
|
|
- // 菜单宽度
|
|
|
- const [{ clientWidth: contextmenuWidth }] =
|
|
|
- document.getElementsByClassName("el-super-table_contextmenu");
|
|
|
- // 最大Y轴偏差
|
|
|
- const maxLeft = this.$el.offsetWidth - contextmenuWidth;
|
|
|
- if (x > maxLeft) {
|
|
|
- this.left = maxLeft + 10;
|
|
|
- } else {
|
|
|
- this.left = x - sideWidth;
|
|
|
- }
|
|
|
- this.top = y - navHeight;
|
|
|
+ this.$refs.superTable.doLayout();
|
|
|
});
|
|
|
},
|
|
|
- hideContextmenu(event) {
|
|
|
- const { type } = event;
|
|
|
- if (type === "click") {
|
|
|
- this.visible = false;
|
|
|
- }
|
|
|
- if (type === "keydown") {
|
|
|
- const { keyCode } = event;
|
|
|
- if (keyCode === 27) this.visible = false;
|
|
|
- }
|
|
|
+ // 过滤
|
|
|
+ onFilter() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.superTable.doLayout();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onFilters(value) {
|
|
|
+ const {
|
|
|
+ item: { key },
|
|
|
+ attr: { dictName },
|
|
|
+ } = value;
|
|
|
+ let dataList = [];
|
|
|
+ const dict = this.dict.type[dictName];
|
|
|
+ dataList = Array.from(
|
|
|
+ new Set(this.innerValue.map((item) => item[key]).filter((item) => item))
|
|
|
+ ).map((item) => ({
|
|
|
+ text: dictName
|
|
|
+ ? (dict.find((dictItem) => dictItem.value == item) || {}).label
|
|
|
+ : item,
|
|
|
+ value: item,
|
|
|
+ }));
|
|
|
+ return dataList;
|
|
|
},
|
|
|
},
|
|
|
created() {},
|
|
|
@@ -139,25 +243,106 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="el-super-table" @contextmenu.prevent.stop>
|
|
|
+ <div class="el-super-table">
|
|
|
<el-table
|
|
|
v-bind="$attrs"
|
|
|
v-on="$listeners"
|
|
|
- :data="innerValue"
|
|
|
- border
|
|
|
ref="superTable"
|
|
|
- @row-contextmenu="openContextmenu"
|
|
|
+ border
|
|
|
+ :data="innerValue"
|
|
|
+ :row-key="rowKey"
|
|
|
+ :row-style="{ height: '50px' }"
|
|
|
+ :cell-style="onCellStyle"
|
|
|
+ :header-row-style="{ height: '50px' }"
|
|
|
+ @row-click="onRowClick"
|
|
|
+ @selection-change="onSelectionChange"
|
|
|
>
|
|
|
- <slot></slot>
|
|
|
+ <!-- 序号 -->
|
|
|
+ <el-table-column
|
|
|
+ v-if="index"
|
|
|
+ :resizable="false"
|
|
|
+ fixed
|
|
|
+ width="50"
|
|
|
+ label="序号"
|
|
|
+ align="center"
|
|
|
+ class="is-index"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 多选 -->
|
|
|
+ <el-table-column
|
|
|
+ v-if="checkbox"
|
|
|
+ :column-key="rowKey"
|
|
|
+ :selectable="selectable"
|
|
|
+ fixed
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ type="selection"
|
|
|
+ reserve-selection
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
v-for="({ item, attr }, index) in showColumns"
|
|
|
:key="index"
|
|
|
:prop="item.key"
|
|
|
:label="item.title"
|
|
|
:fixed="item.fixed"
|
|
|
- :width="item.width || 250"
|
|
|
+ :width="item.width"
|
|
|
show-overflow-tooltip
|
|
|
>
|
|
|
+ <template slot="header" slot-scope="scope">
|
|
|
+ <template v-if="iconOperation">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ item.sort ||
|
|
|
+ item.fixed ||
|
|
|
+ (item.filter && !!item.filter.length)
|
|
|
+ ? '#1890ff'
|
|
|
+ : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ <icon-sort
|
|
|
+ v-model="item.sort"
|
|
|
+ class="icon-sort"
|
|
|
+ @sort="onSort(item)"
|
|
|
+ :style="{
|
|
|
+ color: item.sort ? '#1890ff' : '',
|
|
|
+ display: item.sort ? 'inline-block' : '',
|
|
|
+ }"
|
|
|
+ ></icon-sort>
|
|
|
+ <icon-freeze
|
|
|
+ v-model="item.fixed"
|
|
|
+ class="icon-freeze"
|
|
|
+ @freeze="onFreeze"
|
|
|
+ :style="{
|
|
|
+ color: item.fixed ? '#1890ff' : '',
|
|
|
+ display: item.fixed ? 'inline-block' : '',
|
|
|
+ }"
|
|
|
+ ></icon-freeze>
|
|
|
+ <icon-filter
|
|
|
+ v-model="item.filter"
|
|
|
+ class="icon-filter"
|
|
|
+ :filters="onFilters({ item, attr })"
|
|
|
+ @filter="onFilter"
|
|
|
+ :style="{
|
|
|
+ color: item.filter && item.filter.length ? '#1890ff' : '',
|
|
|
+ display:
|
|
|
+ item.filter && item.filter.length ? 'inline-block' : '',
|
|
|
+ }"
|
|
|
+ ></icon-filter>
|
|
|
+ <icon-hide
|
|
|
+ v-model="item.hidden"
|
|
|
+ class="icon-hide"
|
|
|
+ @hide="onHide"
|
|
|
+ ></icon-hide>
|
|
|
+ </template>
|
|
|
+ <template v-else>{{ item.title }}</template>
|
|
|
+ </template>
|
|
|
<template slot-scope="scope">
|
|
|
<slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
|
|
|
<template v-if="attr.is">
|
|
|
@@ -212,98 +397,82 @@ export default {
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <el-drawer :visible.sync="drawer" size="25%" title="操作列" append-to-body>
|
|
|
- <el-row :gutter="20" style="margin: 0">
|
|
|
- <el-draggable
|
|
|
- v-model="innerColumns"
|
|
|
- :group="{ item: 'key' }"
|
|
|
- @change="setColumns"
|
|
|
- >
|
|
|
- <el-col
|
|
|
- v-for="({ item }, index) in innerColumns"
|
|
|
- :key="index"
|
|
|
- :span="24"
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15px 20px;
|
|
|
- "
|
|
|
+ <div
|
|
|
+ v-if="pagination && buttonOperation"
|
|
|
+ style="
|
|
|
+ height: 57px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <template v-show="selectState">
|
|
|
+ <el-button
|
|
|
+ v-show="selectState"
|
|
|
+ size="mini"
|
|
|
+ @click="selectState = !selectState"
|
|
|
>
|
|
|
- <span style="cursor: move">
|
|
|
- <i class="el-icon-rank"></i>
|
|
|
- {{ item.title }}
|
|
|
- </span>
|
|
|
- <div>
|
|
|
- <el-radio-group
|
|
|
- v-model="item.hidden"
|
|
|
- :size="$attrs.size"
|
|
|
- style="margin: 0 15px 0 0"
|
|
|
- @change="setColumns"
|
|
|
- >
|
|
|
- <el-radio-button :label="true">显</el-radio-button>
|
|
|
- <el-radio-button :label="false">隐</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- <el-radio-group
|
|
|
- v-model="item.fixed"
|
|
|
- :size="$attrs.size"
|
|
|
- @change="setColumns"
|
|
|
- >
|
|
|
- <el-radio-button :label="false">不</el-radio-button>
|
|
|
- <el-radio-button label="left">左</el-radio-button>
|
|
|
- <el-radio-button label="right">右</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-draggable>
|
|
|
- </el-row>
|
|
|
- </el-drawer>
|
|
|
- <transition name="el-fade-in-linear">
|
|
|
- <ul
|
|
|
- v-show="visible"
|
|
|
- :style="{ left: left + 'px', top: top + 'px' }"
|
|
|
- class="el-super-table_contextmenu"
|
|
|
- >
|
|
|
- <li v-if="hideOperationColumns" @click="drawer = true">
|
|
|
- <i class="el-icon-setting"></i>
|
|
|
- <span>设置布局</span>
|
|
|
- </li>
|
|
|
- <li v-if="hideOperationColumns" @click="resetColumns">
|
|
|
- <i class="el-icon-refresh"></i>
|
|
|
- <span>重置布局</span>
|
|
|
- </li>
|
|
|
- <slot name="contextmenu" v-bind="currentData"> </slot>
|
|
|
- </ul>
|
|
|
- </transition>
|
|
|
+ 所有列
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-show="!selectState">
|
|
|
+ <button-hide v-model="innerColumns" @hide="onHide"></button-hide>
|
|
|
+ <button-freeze
|
|
|
+ v-model="showColumns"
|
|
|
+ @freeze="onFreeze"
|
|
|
+ ></button-freeze>
|
|
|
+ <el-button
|
|
|
+ :disabled="!selectData.length"
|
|
|
+ size="mini"
|
|
|
+ @click="selectState = !selectState"
|
|
|
+ >
|
|
|
+ 选择列
|
|
|
+ {{ selectData.length ? ` ：${selectData.length}` : "" }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <pagination
|
|
|
+ v-show="!selectState"
|
|
|
+ :total="page.total"
|
|
|
+ :page.sync="page.pageNum"
|
|
|
+ :limit.sync="page.pageSize"
|
|
|
+ @pagination="$emit('pagination', { ...$event })"
|
|
|
+ style="height: 32px; padding: 0 !important"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.el-super-table .el-table {
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 5px;
|
|
|
+.el-super-table {
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-.el-super-table_contextmenu {
|
|
|
- margin: 0;
|
|
|
- background: #fff;
|
|
|
- z-index: 3000;
|
|
|
- position: absolute;
|
|
|
- list-style-type: none;
|
|
|
- padding: 5px 0;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
- li {
|
|
|
- margin: 0;
|
|
|
- padding: 7px 16px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background: #ddd;
|
|
|
- }
|
|
|
- span {
|
|
|
- margin: 0 0 0 5px;
|
|
|
- }
|
|
|
+.el-super-table .el-table__header .cell {
|
|
|
+ display: flex;
|
|
|
+ .icon-sort {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:hover .icon-sort {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-freeze {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:hover .icon-freeze {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-filter {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:hover .icon-filter {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-hide {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:hover .icon-hide {
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
002201