auth-web/src/pages/common/table/index.vue

<!--
    @Modular：表格组件
    @Author: zouwf
    @Date: 2019-03-23
-->
<template>
    <dg-table
        border
        :auto-page="h => h * 0.6"
        :expand-row-keys="expands"
        overflow="tooltip"
        @change-current="handleChangeCurrent"
        @change-size="handleChangeSize"
        @selection-change="handleSelectionChange"
        @expand-change="handleExpandChange"
        @row-click="handleRowClick"
        @cell-click="handleCellClick"
        ref="grid"
        row-key="id"
        :url="url"
        :condition="condition"
        :pagination="pagination"
        :pagination-props="paginationProps"
        :mapping="mapping"
        stripe
        :lazyLoad="lazyLoad"
        highlight-current-row
        :before-search="_beforeSearch"
        :before-quest="beforeQuest"
    >
        <!--序号-->
        <dg-table-column type="index" width="70" label="序号" align="center" fixed="left" />
        <!--复选框情况-->
        <dg-table-column type="selection" width="55" v-if="selection" />
        <slot name="expand" />
        <template v-for="(item, indexs) in headerData">
            <dg-table-column :key="indexs" v-bind="item" align="center">
                <template slot-scope="scope">
                    <slot v-if="item.custom" v-bind:row="scope.row" :name="item.prop"></slot>
                    <span v-if="item.state">{{ converterText(scope.row, item) }}</span>
                    <span v-if="item.timestamp">{{ formatTimestamp(scope.row, item) }}</span>
                    <span v-if="item.adminAudit">{{ transformText(scope.row, item) }}</span>
                    <span v-if="item.transOperateType">{{ transformOperateType(scope.row, item) }}</span>
                    <!-- <span v-if="item.tranformBusiness">{{ tranformBusinessText(scope.row, item) }}</span> -->
                </template>
            </dg-table-column>
        </template>
        <!--操作栏-->
        <slot></slot>
    </dg-table>
</template>

<script>
import moment from "moment";
import * as dd from "@/api/dd";
import * as roleAuthApi from "@/api/role-auth-info";

export default {
    name: "Ltable",
    props: {
        lazyLoad: {
            type: Boolean,
            default: false
        },
        data: {
            type: Array,
            default: () => []
        },
        // 表头配置
        headerData: {
            type: Array,
            default: () => []
        },
        // 开启复选
        selection: {
            type: Boolean,
            default: false
        },
        // 开启复选
        url: {
            type: String,
            default: "",
            require: true
        },
        // 表格查询参数
        condition: {
            type: Object,
            default: () => {}
        },
        // 是否开启分页
        pagination: {
            type: Boolean,
            default: true
        },
        // 分页选项
        paginationProps: {
            type: Object,
            default: () => {
                return {
                    currentPage: 1,
                    pageSizes: [10, 20, 30],
                    pageSize: 10,
                    layout: "total, sizes, prev, pager, next, jumper"
                };
            }
        },
        // 最大高度
        maxheight: {
            type: [Number, String],
            default: ""
        },
        converter: Function,
        beforeSearch: {
            type: Function,
            default: conditions => conditions
        },
        tableName: {
            type: String,
            default: "表格"
        }
    },

    // 页面数据绑定
    data() {
        return {
            expands: [],
            mapping: {
                list: "content",
                total: "totalPages"
            }
        };
    },

    mounted() {},

    // 方法
    methods: {
        _beforeSearch(conditions) {
            conditions = this.beforeSearch(conditions);
            let tmpCond = JSON.parse(conditions.searchCondition);
            let result = [];
            tmpCond.map((item, i) => {
                if (item.op === "between") {
                    if (item.value[0]) {
                        // tmpCond.splice(i, 1);
                        result.push({ ...item, op: ">=", value: item.value[0] });
                        result.push({ ...item, op: "<=", value: item.value[1] });
                    }
                } else {
                    result.push(item);
                }
            });

            conditions.searchCondition = JSON.stringify(result);
            return conditions;
        },
        /**
         * 页码切换
         * @current 切换值
         * */
        handleChangeCurrent(current) {
            this.$emit("handleChangeCurrent", current);
        },

        /**
         * 页面切换
         * @current 切换值
         * */
        handleChangeSize(size) {
            this.$emit("handleChangeSize", size);
        },

        /**
         * 页码切换
         * @data 选中数据数组
         * */
        handleSelectionChange(data) {
            this.$emit("handleSelectionChange", data);
        },

        handleExpandChange(row, expanded) {
            const that = this;
            if (expanded.length) {
                that.expands = [];
                if (row) {
                    that.expands.push(row.id);
                    this.$emit("expand", row, expanded);
                }
            } else {
                that.expands = [];
            }
        },

        /**
         * 查询
         * */
        handleSearchClick() {
            this.$refs.grid.searchForm();
        },
        /**
         * 表格某行被点击
         * */
        handleRowClick(row, column, event) {
            this.$refs.grid.setCurrentRow(row);

            this.$emit("handleRowClick", { row, column });
        },
        // 某单元格被点击
        handleCellClick(row, column, cell, event) {
            this.$emit("handleCellClick", { row, column });
        },
        /**
         * 文案转换状态
         * */
        converterText(rowData, item) {
            const prop = item.prop || { label: "label", value: "value" };
            let resultItem = item.state.find(val => val["value"] == rowData[item.prop]);
            if (resultItem) {
                return resultItem["label"];
            } else {
                return moment(rowData[item.prop]).format("YYYY-MM-DD");
            }

            // return resultItem ? resultItem["label"] : rowData[item.prop];
        },
        /**
         * 时间戳转换
         * */
        formatTimestamp(rowData, item) {
            let str = "";
            const type = item.format || "YYYY-MM-DD";
            if (rowData[item.prop]) {
                return moment(parseInt(rowData[item.prop])).format(type);
            }
        },
        /**
         * 管理员表格 文案转换
         * */
        transformText(rowData, item) {
            const user = dd.adminAuditsLabel.user;
            const org = dd.adminAuditsLabel.org;
            const admin = dd.adminAuditsLabel.admin;
            let transformString = "";
            if (rowData.auditType == "user_audit") {
                for (let i = 0; i < user.length; i++) {
                    if (rowData[item.prop] == user[i].value) {
                        transformString = user[i].label;
                        break;
                    }
                }
            } else if (rowData.auditType == "org_audit") {
                transformString = org[0].label;
            } else {
                for (let i = 0; i < admin.length; i++) {
                    if (rowData[item.prop] == admin[i].value) {
                        transformString = admin[i].label;
                        break;
                    }
                }
            }
            return transformString;
        },
        /**
         * 管理员审计 文案转换
         * 操作内容
         * */
        transformOperateType(rowData, item) {
            let transformString = "";
            if (rowData.auditType == "user_audit") {
                if (rowData.operateType == "10") {
                    transformString = "新增";
                } else if (rowData.operateType == "20") {
                    transformString = "修改";
                } else if (rowData.operateType == "30") {
                    transformString = "删除";
                } else if (rowData.operateType == "40") {
                    transformString = "审批通过";
                } else if (rowData.operateType == "41") {
                    transformString = "审批不通过";
                } else if (rowData.operateType == "50") {
                    transformString = "启用";
                } else if (rowData.operateType == "51") {
                    transformString = "停用";
                } else if (rowData.operateType == "61") {
                    transformString = "入职";
                } else if (rowData.objectType == "62") {
                    transformString = "离职";
                } else {
                    transformString = "";
                }
            }
            if (rowData.auditType == "org_audit") {
                if (rowData.operateType == "10") {
                    transformString = "新增机构";
                } else if (rowData.operateType == "20") {
                    transformString = "修改机构";
                } else if (rowData.operateType == "30") {
                    transformString = "删除机构";
                } else if (rowData.operateType == "40") {
                    transformString = "调离机构";
                } else if (rowData.operateType == "50") {
                    transformString = "合并机构";
                } else {
                    transformString = "";
                }
            } else {
                if (rowData.operateType == "10") {
                    transformString = "管理员创建";
                } else if (rowData.operateType == "11") {
                    transformString = "管理员删除";
                } else if (rowData.operateType == "20") {
                    transformString = "平台菜单权限新增";
                } else if (rowData.operateType == "21") {
                    transformString = "平台菜单权限移除";
                } else if (rowData.operateType == "30") {
                    transformString = "机构管理范围新增";
                } else if (rowData.operateType == "31") {
                    transformString = "机构管理范围变更";
                } else if (rowData.operateType == "40") {
                    transformString = "用户管理范围新增";
                } else if (rowData.operateType == "41") {
                    transformString = "用户管理范围变更";
                } else if (rowData.objectType == "50") {
                    transformString = "授权管理范围新增";
                } else if (rowData.objectType == "51") {
                    transformString = "授权管理范围变更";
                } else if (rowData.objectType == "60") {
                    transformString = "管理员管理范围新增";
                } else if (rowData.objectType == "61") {
                    transformString = "管理员管理范围变更";
                } else {
                    transformString = "";
                }
            }
            return transformString;
        },
        /**
         * 转换业务域
         * */
        tranformBusinessText(row, item) {},
        /*
         * 切换勾选状态
         * */
        toggleRowSelection(row, bool = false) {
            return this.$refs.grid.toggleRowSelection(row, bool);
        },
        getReqSearchCondition() {
            return this.$refs.grid.getReqSearchCondition();
        },
        beforeQuest(res) {
            const { content, totalElements } = res.data;
            const result = {
                data: {
                    content,
                    totalElements
                }
            };
            this.$emit("getTotalElements", { totalElements, tableName: this.tableName });
            return result;
        }
    },
    created() {}
};
</script>

<style scoped lang="scss">
.el-table__body tr.current-row > td {
    　　background-color: #f5f7fa !important;
}
</style>