Project-Annex/operationSupport/src/views/performanceManagement/evaluationSet/levelSetting/levelSetting.vue

<!--
 * @Author: zwy
 * @Date: 2021-05-08 08:28:00
 * @LastEditors: zwy
 * @LastEditTime: 2021-05-17 10:37:51
 * @Descripttion:考评设置-考评等级设置
-->
<template>
    <div class="levelSetting">
        <div class="organ-tree">
            <el-input v-model="filterText" placeholder="请输入机构名称" suffix-icon="el-icon-search"></el-input>
            <div class="tree-style-box">
                <el-scrollbar style="height: 100%">
                    <el-tree
                        class="tree-style"
                        :data="organList"
                        ref="tree"
                        node-key="id"
                        :highlight-current="true"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        @node-click="treeClick"
                        default-expand-all
                        :filter-node-method="filterNode"
                    >
                        <span class="ellipsis" slot-scope="{ node }">
                            <span :title="node.label">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-scrollbar>
            </div>
        </div>
        <div class="levelSetting-content">
            <div class="search">
                <el-select v-model="mixins_query.grade" clearable placeholder="请选择绩效等级">
                    <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.dictCode">{{
                        item.dictValue
                    }}</el-option>
                </el-select>
                <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
                <div class="search-icon">
                    <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                        <i class="zoniot_font zoniot-icon-shanchu2" @click="deleteAll"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="新增">
                        <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
                    </el-tooltip>
                </div>
            </div>
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, showCheckbox: true }"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                :data="mixins_list"
                :loading="mixins_onQuery"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip effect="light" placement="bottom" content="编辑">
                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.index)"></i>
                        </el-tooltip>
                        <el-tooltip effect="light" placement="bottom" content="删除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteOne(scope.row.id)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            currentId: '',
            selectRow: [],
            filterText: '',
            organList: [],
            defaultProps: {
                children: 'orgs',
                label: 'orgName'
            },
            cols: [
                {
                    label: '所属公司',
                    prop: 'companyOrgName'
                },
                {
                    label: '绩效等级',
                    prop: 'evaluationGradeName'
                },
                {
                    label: '分值1',
                    prop: 'valueOne'
                },
                {
                    label: '分值2',
                    prop: 'valueTwo'
                },
                {
                    label: '类型',
                    prop: 'typeName'
                },
                {
                    label: '备注',
                    prop: 'remarks'
                },
                {
                    label: '创建时间',
                    prop: 'createDate'
                },
                {
                    label: '操作',
                    slot: 'opt'
                }
            ],
            levelList: [] //绩效等级分类
        };
    },
    methods: {
        getOrgTreeList() {
            this.$http.postForm('/sc-user-center/org/getOrgTree', { orgType: 'company', id: '000' }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                    this.$nextTick().then(() => {
                        const firstNode = document.querySelector('.el-tree-node');
                        firstNode.click();
                    });
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.orgName.indexOf(value) !== -1;
        },
        treeClick(e) {
            if (e.id == 0) return;
            this.currentId = e.id;
        },
        addOrEdit(todo, index) {
            new Promise((resolve) => {
                let row,
                    title = '编辑考评等级';
                if ('add' == todo) {
                    title = '新增考评等级';
                } else {
                    row = this.mixins_list[index] || {};
                    row = JSON.parse(JSON.stringify(row));
                }
                this.$store.dispatch('openModal', {
                    url: '/performanceManagement/evaluationSet/levelSetting/popups/levelAddOrEdit.vue',
                    title: title,
                    width: todo == 'add' ? '926px' : '562px',
                    height: todo == 'add' ? '662px' : '520px',
                    props: {
                        data: row,
                        todo: todo,
                        callback: resolve
                    }
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        deleteOne(id) {
            this.$msgBox(`刪除考评等级`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.postForm('/sc-community/evaluation/grade/deleteById', { id }).then(({ msg, status, data }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.mixins_search();
                        } else {
                            this.$message.error(msg);
                        }
                    });
                })
                .catch(() => {});
        },
        deleteAll() {
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });
            this.$msgBox(`刪除考评等级`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-community/evaluation/grade/deleteByIds', ids).then(({ status, data, msg }) => {
                        if (status == 0) {
                            this.$message.success(msg);
                            this.mixins_search();
                        } else {
                            this.$message.error(msg);
                        }
                    });
                })
                .catch(() => {});
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        //获取绩效等级
        getLevelList() {
            this.$api.common.getDictionaryData('SC_EVALUATION_GRADE ').then(({ msg, status, data }) => {
                if (status == 0) {
                    this.levelList = data;
                }
            });
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            this.mixins_query.companyOrgId = newValue;
            this.mixins_search();
        },
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        this.getLevelList();
        this.getOrgTreeList();
        this.mixins_dataUrl = '/sc-community/evaluation/grade/selectPage';
        this.mixins_post = 'get';
        this.mixins_query = {
            companyOrgId: '',
            grade: ''
        };
    }
};
</script>

<style lang="scss" scoped>
.levelSetting {
    height: calc(100% - 80px);
    .organ-tree {
        width: 260px;
        height: 100%;
        background: #ffffff;
        padding: 20px;
        float: left;
        font-size: 14px;
        .tree-style-box {
            margin-top: 20px;
        }
    }
    .levelSetting-content {
        margin-left: 20px;
        width: calc(100% - 280px);
        float: left;
        .search {
            background: #ffffff;
            height: 60px;
            padding: 16px 20px 14px 20px;
            .search-icon {
                vertical-align: top;
                float: right;
                .fr-fs-fc {
                    color: #2787f1;
                    font-size: 30px;
                }
                .fr-fs-fc:first-child {
                    margin-right: 20px;
                }
            }
            .searchbutton {
                width: 0.6rem;
                vertical-align: middle;
                margin-right: 5px;
            }
        }
    }
}
</style>