FE_occupationlab_server/src/pages/information/columnManage/index.vue

<template>
    <div>
        <div class="page">
            <!--
            <div class='tabs'>
                <a class='item' v-for='(item,index) in tabs' :key='index' :class='{active: index == activeName}' @click='tabChange(index)'>{{ item }}</a>
            </div>
            -->
            <div class="btn-wrap">
                <template v-if="sorting">
                    <el-button class="action-btn" type="primary" round @click="cancelSort">取消</el-button>
                    <el-button class="action-btn" type="primary" round @click="sortSubmit">保存</el-button>
                </template>
                <template v-if="!sorting">
                    <el-button v-if="auth('栏目管理-更改排序')" class="action-btn" type="primary" round @click="openSort">更改排序
                    </el-button>
                    <el-button v-if="auth('栏目管理-添加栏目')" class="action-btn" type="info" round @click="addColumn">添加栏目
                    </el-button>
                </template>
            </div>
            <div class="page-content" style="padding-top: 24px; margin-top: 24px">
                <div class="el-table">
                    <div class="list">
                        <div class="thead">
                            <span>栏目名称</span>
                            <span><em :class="{hide: sorting}" style="font-style: normal">操作</em></span>
                        </div>
                    </div>
                    <el-tree :data="listData" node-key="id" default-expand-all @node-drop="handleDrop"
                             :draggable="sorting" :allow-drop="allowDrop" :allow-drag="allowDrag">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="name">{{ node.label }}</span>
                            <span class="action" v-show="!sorting">
                                <el-button v-if="auth('栏目管理-编辑')" type="text" @click.stop="editType(data)">编辑</el-button>
                                <el-divider v-if="auth('栏目管理-编辑')" direction="vertical"></el-divider>
                                <template v-if="node.level == 1">
                                    <el-button v-if="auth('栏目管理-新增')" type="text" @click.stop="addType(data)">新增</el-button>
                                    <el-divider v-if="auth('栏目管理-新增')" direction="vertical"></el-divider>
                                </template>
                                <el-button v-if="auth('栏目管理-删除')" type="text" @click.stop="delData(data)">删除</el-button>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </div>

        <el-dialog :title="isAddColumn ? '添加栏目' : '编辑栏目'" :visible.sync="columnVisible" width="400px"
                   :close-on-click-modal="false" @close="closeColumn">
            <el-form>
                <el-form-item>
                    <el-input placeholder="栏目名称" v-model="columnName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="columnVisible = false">取 消</el-button>
                <el-button type="primary" @click="columnSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :title="isAddType ? '添加分类' : '编辑分类'" :visible.sync="typeVisible" width="400px"
                   :close-on-click-modal="false" @close="closeType">
            <el-form>
                <el-form-item>
                    <el-input placeholder="分类名称" v-model="typeName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="typeVisible = false">取 消</el-button>
                <el-button type="primary" @click="typeSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import util from "@/libs/util";

export default {
    name: "columnManage",
    data() {
        return {
            activeName: "first",
            tabs: {
                first: "栏目管理"
            },
            name: this.$store.state.name,
            originalList: [],
            listData: [],
            multipleSelection: [],
            pageNo: 1,
            pageSize: 10,
            totals: 0,
            columnVisible: false,
            columnName: "",
            typeVisible: false,
            typeName: "",
            curRow: {},
            sortObj: null,
            sorting: false,
            curParentId: "",
            isAddColumn: false,
            isAddType: false,
            defaultProps: {
                children: "children",
                label: "label"
            }
        };
    },
    mounted() {
        this.getData();
    },
    beforeRouteLeave(to, from, next) {
        if (JSON.stringify(this.originalList) !== JSON.stringify(this.listData)) {
            this.$confirm("确定返回？排序尚未保存。", "提示", {
                type: "warning"
            })
                .then(() => {
                    next();
                })
                .catch(() => {
                });
        } else {
            next();
        }
    },
    methods: {
        getData() {
            let data = {
                page: this.pageNo,
                size: this.pageSize
            };
            this.$get(this.api.queryAllColumns, data).then(res => {
                let columnTree = res.columnTree;
                let total = columnTree.length;
                let list = [];
                columnTree.forEach((n, k) => {
                    list.push({
                        id: n.id,
                        label: n.name,
                        level: n.level,
                        parentId: n.parentId,
                        sort: n.sort,
                        children: []
                    });
                    n.secondColumn.forEach((j, i) => {
                        list[k].children.push({
                            id: j.id,
                            label: j.name,
                            level: j.level,
                            parentId: j.parentId,
                            sort: j.sort
                        });
                    });
                    total += n.secondColumn.length;
                });
                this.listData = list;
                this.originalList = JSON.parse(JSON.stringify(this.listData));
                this.totals = total;
                if (!this.listData.length && this.totals) {
                    this.pageNo--;
                    this.getData();
                }
            }).catch(res => {
            });
        },
        delData(row) {
            this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.$del(`${this.api.deleteColumn}/${row.id}`).then(res => {
                        util.successMsg("删除成功");
                        this.getData();
                    }).catch(res => {
                    });
                })
                .catch(() => {
                });
        },
        addColumn() {
            this.isAddColumn = true;
            this.columnVisible = true;
        },
        sortSubmit() {
            let list = JSON.parse(JSON.stringify(this.listData));
            list.forEach((n, k) => {
                n.name = n.label;
                n.parentId = 1;
                n.level = 1;
                n.sort = k + 1;
                n.children && n.children.forEach((j, i) => {
                    j.name = j.label;
                    j.parentId = n.id;
                    j.level = 2;
                    j.sort = i + 1;
                    delete j.label;
                    j.secondColumn = [];
                });
                delete n.label;
                n.secondColumn = n.children;
                n.children = null;
            });
            let data = { columnTree: list };
            this.$post(this.api.columnReorder, data).then(res => {
                util.successMsg("保存成功");
                this.sorting = false;
                this.getData();
            }).catch(res => {
            });
        },
        columnSubmit() {
            if (!this.columnName) return util.warningMsg("请填写栏目名称");
            let data = {
                level: 1,
                parentId: 1,
                name: this.columnName
            };
            if (this.curRow.id) {
                data.id = this.curRow.id;
                this.$put(this.api.editColumn, data).then(res => {
                    util.warningMsg("修改成功");
                    this.columnVisible = false;
                    this.getData();
                }).catch(res => {
                });
            } else {
                this.$post(this.api.addColumn, data).then(res => {
                    util.successMsg("添加成功");
                    this.columnVisible = false;
                    this.getData();
                }).catch(res => {
                });
            }
        },
        addType(row) {
            this.isAddType = true;
            this.curRow = row;
            this.typeVisible = true;
        },
        editType(row) {
            this.curRow = row;
            if (row.level == 1) {
                this.isAddColumn = false;
                this.columnVisible = true;
                this.columnName = row.label;
            } else {
                this.isAddType = false;
                this.typeVisible = true;
                this.typeName = row.label;
            }
        },
        typeSubmit(row) {
            if (!this.typeName) return util.warningMsg("请填写分类名称");
            let data = {
                level: 2,
                name: this.typeName
            };
            if (this.curRow.level == 2) {
                data.id = this.curRow.id;
                data.parentId = this.curRow.parentId;
                this.$put(this.api.editColumn, data).then(res => {
                    util.successMsg("修改成功");
                    this.typeVisible = false;
                    this.getData();
                }).catch(res => {
                });
            } else {
                data.parentId = this.curRow.id;
                this.$post(this.api.addColumn, data).then(res => {
                    util.successMsg("新增成功");
                    this.typeVisible = false;
                    this.getData();
                }).catch(res => {
                });
            }
        },
        cancelSort() {
            this.sorting = false;
            this.listData = JSON.parse(JSON.stringify(this.originalList));
            this.sortObj.destroy();
        },
        openSort() {
            this.sorting = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        onSearch() {
            this.pageNo = 1;
            this.getData();
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getData();
        },
        closeColumn() {
            this.columnName = "";
            this.curRow = {};
        },
        closeType() {
            this.typeName = "";
            this.curRow = {};
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
            // console.log('tree drop: ', dropNode, dropType);
        },
        allowDrop(draggingNode, dropNode, type) {
            if (dropNode.level == 2 && draggingNode.childNodes.length == 0) {
                return type !== "inner";
            } else if ((draggingNode.childNodes.length > 0 && dropNode.level == 2) || (draggingNode.childNodes.length > 0 && type == "inner")) {
                return false;
            } else {
                return true;
            }
        },
        allowDrag(draggingNode) {
            return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
        }
    }
};
</script>

<style lang="scss" scoped>
.btn-wrap {
    position: absolute;
    top: 15px;
    right: 15px;
}

.list {
    .thead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.04) !important;

        span {
            padding: 0.75rem 0.625rem;
            text-align: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: normal;
            box-sizing: border-box;

            &:first-child {
                padding-left: 23.5vw;
                @media(max-width: 1270px) {
                    padding-left: 25.5%;
                }
            }

            &:last-child {
                width: 16%;
            }
        }
    }
}

/deep/ .el-tree {
    .el-tree-node__expand-icon {
        margin-left: 22.5vw;
        @media(max-width: 1270px) {
            margin-left: 23.5%;
        }
    }

    .el-tree-node__content {
        padding: 20px;
        border-bottom: 0.0625rem solid #EBEEF5;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

    .name {
        line-height: 44px;
    }

    .action {
        width: 8.5vw;
        text-align: left;
        @media(max-width: 1270px) {
            width: 16%;
        }
    }
}

.hide {
    opacity: 0;
}
</style>