123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309 |
- <script>
- export default {
- name: "SuperTable",
- props: {
- value: {
- type: [Array],
- require: true,
- },
- dict: {
- type: [Object],
- require: true,
- },
- columns: {
- type: [Array],
- require: true,
- },
- stroage: {
- type: Boolean,
- default: false,
- },
- hideOperationColumns: {
- type: Boolean,
- default: false,
- },
- },
- components: {
- ElDictTag: () => import("@/components/DictTag/index.vue"),
- ElDraggable: () => import("@/components/draggable/index.vue"),
- ElFilePreview: () => import("@/components/file-preview/index.vue"),
- ElComputedInput: () => import("@/components/computed-input/index.vue"),
- ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
- ElComputedInputV2: () => import("@/components/computed-input-v2/index.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;
- return {
- drawer: false,
- visible: false,
- top: 0,
- left: 0,
- stroageKey: stroageKey,
- innerColumns: innerColumns,
- currentData: {},
- };
- },
- computed: {
- innerValue: {
- get() {
- return this.value;
- },
- set(value) {
- this.$emit("input", value);
- },
- },
- showColumns: {
- get() {
- const { stroage, hideOperationColumns } = this.$props;
- return stroage && hideOperationColumns
- ? this.innerColumns.filter(({ item }) => item.hidden)
- : this.innerColumns;
- },
- },
- },
- 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);
- }
- },
- },
- methods: {
- setColumns() {
- const { stroageKey, innerColumns } = this;
- 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 },
- }));
- this.$nextTick(() => {
- this.$refs.superTable.doLayout();
- localStorage.removeItem(stroageKey);
- });
- },
- openContextmenu(row, column, event) {
- this.visible = true;
- this.currentData = { row, column };
- 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;
- });
- },
- hideContextmenu(event) {
- const { type } = event;
- if (type === "click") {
- this.visible = false;
- }
- if (type === "keydown") {
- const { keyCode } = event;
- if (keyCode === 27) this.visible = false;
- }
- },
- },
- created() {},
- mounted() {},
- destroyed() {},
- };
- </script>
- <template>
- <div class="el-super-table" @contextmenu.prevent.stop>
- <el-table
- v-bind="$attrs"
- v-on="$listeners"
- :data="innerValue"
- border
- ref="superTable"
- @row-contextmenu="openContextmenu"
- >
- <slot></slot>
- <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"
- show-overflow-tooltip
- >
- <template slot-scope="scope">
- <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
- <template v-if="attr.is">
- <component
- v-if="attr.is === 'el-dict-tag'"
- v-bind="attr"
- :size="$attrs.size"
- :value="scope.row[item.key]"
- :options="dict.type[attr.dictName]"
- ></component>
- <component
- v-else-if="attr.is === 'el-popover-select-v2'"
- v-bind="attr"
- v-model="scope.row[item.key]"
- :size="$attrs.size"
- :source.sync="scope.row"
- >
- </component>
- <component
- v-else-if="attr.is === 'el-select'"
- v-bind="attr"
- v-model="scope.row[item.key]"
- :size="$attrs.size"
- >
- <template>
- <el-option
- v-for="item in dict.type[attr.dictName]"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </template>
- </component>
- <component
- v-else
- v-bind="attr"
- v-model="scope.row[item.key]"
- :size="$attrs.size"
- >
- </component
- ></template>
- <template v-else>
- <component v-if="attr.formatter" is="span">{{
- attr.formatter(scope.row)
- }}</component>
- <component v-else is="span">{{
- scope.row[item.key] || "--"
- }}</component>
- </template>
- </slot>
- </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;
- "
- >
- <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>
- </div>
- </template>
- <style lang="scss">
- .el-super-table .el-table {
- overflow: hidden;
- border-radius: 5px;
- }
- .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;
- }
- }
- }
- </style>
|