SmartCommunity/operationSupport/src/views/performanceManagement/evaluationSet/levelSetting/popups/levelAddOrEdit.vue

<!--
 * @Author: zwy
 * @Date: 2021-02-01 11:46:07
 * @LastEditors: zwy
 * @LastEditTime: 2021-05-19 16:46:42
 * @Descripttion: 考评等级设置-编辑弹框
-->
<template>
    <div class="levelModal">
        <div class="tree-style" v-if="params.todo == 'add'">
            <el-tree
                :data="organList"
                ref="tree"
                node-key="id"
                :highlight-current="true"
                :props="defaultProps"
                :expand-on-click-node="false"
                default-expand-all
                :check-strictly="true"
                @check="changeOrgan"
                :show-checkbox="true"
            >
                <span class="ellipsis" slot-scope="{ node }">
                    <span :title="node.label">{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
        <zz-form class="form" :cols="formCols" :data="formData" :rules="formRules" labelWidth="100" ref="form">
            <template slot="evaluationGrade">
                <el-select v-model="formData.evaluationGrade" placeholder="请选择绩效等级">
                    <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="+item.dictCode">{{
                        item.dictValue
                    }}</el-option>
                </el-select>
            </template>
            <template slot="type">
                <div style="display: flex">
                    <el-select  v-model="formData.type" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in gradeList"
                            :key="index"
                            :value="+item.dictCode"
                            :label="item.dictValue"
                        ></el-option>
                    </el-select>
                    <el-input v-model="formData.valueOne" v-number-input></el-input>
                    <span style="margin:0 5px;">-</span>
                    <el-input v-model="formData.valueTwo" :disabled='formData.type!==1' v-number-input></el-input>
                </div>
            </template>
            <template slot="remarks">
                <el-input class="textarea" type="textarea" maxlength="100" v-model="formData.remarks"></el-input>
            </template>
        </zz-form>
    </div>
</template>

<script>
export default {
    props: ['params'],
    data() {
        return {
            organList: [],
            defaultProps: {
                children: 'orgs',
                label: 'orgName'
            },
            formData: {
                id: '',
                companyOrgIds: [], //所属公司
                evaluationGrade: '', //绩效等级
                type: '', //类型
                valueOne: '', //分值1
                valueTwo: '', //分值2
                remarks: '' //备注
            },
            taskTypeList: [],
            levelList: [],
            gradeList: [],
            formCols: [
                [
                    {
                        label: '绩效等级',
                        slot: 'evaluationGrade'
                    },
                    {
                        label: '分值',
                        slot: 'type'
                    },
                    {
                        label: '备注',
                        slot: 'remarks'
                    }
                ]
            ],
            formRules: {
                evaluationGrade: [this.$valid.selectRequired('绩效等级')],
                type:[this.$valid.selectRequired('分值')],
            }
        };
    },
    watch:{
        'formData.type'(val){
            if(val!==1){
                this.formData.valueTwo="";
            }
        }
    },
    methods: {
        //获取绩效等级
        getLevelList() {
            this.$api.common.getDictionaryData('SC_EVALUATION_GRADE').then(({ msg, status, data }) => {
                if (status == 0) {
                    this.levelList = data;
                }
            });
        },
        //获取分值符号
        getGradeType() {
            this.$api.common.getDictionaryData('SC_EVALUATION_GRADE_TYPE').then(({ msg, status, data }) => {
                if (status == 0) {
                    this.gradeList = data;
                }
            });
        },
        changeOrgan() {
            var data = this.$refs.tree.getCheckedNodes();
            let arr = [];
            data.map((item, index) => {
                arr.push(item.id);
            });
            this.formData.companyOrgIds = arr;
        },
        getOrgTreeList() {
            this.$http.postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'company', id: '000' }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                }
            });
        },
        submit() {
            new Promise((resolve) => {
                if(this.formData.type!==1&&this.formData.valueOne==""){
                    this.$message.error("请输入分值");
                    return;
                }else if(this.formData.type==1&&(this.formData.valueOne==""||this.formData.valueTwo=="")){
                    this.$message.error("请输入分值");
                    return
                }else if(this.formData.type==1&&this.formData.valueOne>this.formData.valueTwo){
                    this.$message.error("前一个分值必须小于等于后一个分值");
                    return
                }else if(this.formData.valueOne<0||this.formData.valueTwo<0){
                    this.$message.error("分值不能为负数");
                    return
                }
                this.$refs.form.validate(resolve);
            }).then(() => {
                var posturl = '',
                    method = 'post';
                if (this.params.todo === 'edit') {
                    posturl = '/sc-community/evaluation/grade/edit';
                    delete this.formData.companyOrgIds;
                } else {
                    posturl = '/sc-community/evaluation/grade/add';
                    if (!this.formData.companyOrgIds.length) {
                        this.$message.error('请勾选所属公司');
                        loading.close();
                        return;
                    }
                }
                var loading = this.$loading();
                this.$http[method](posturl, this.formData)
                    .then(({ status, data, msg }) => {
                        loading.close();
                        if (0 == status) {
                            this.$message.success(msg);
                            this.params.callback && this.params.callback();
                            this.$emit('close');
                        } else {
                            this.$message.error(msg);
                        }
                    })
                    .catch((err) => {
                        loading.close();
                    });
            });
        }
    },
    created() {
        this.getLevelList();
        this.getGradeType();
        this.getOrgTreeList();
        if (this.params.todo == 'edit') {
            this.__setValue('formData');
        }
    }
};
</script>

<style lang="scss" scoped>
.levelModal {
    display: flex;
    min-height: 100%;
    .tree-style {
        width: 340px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        overflow: auto;
        padding: 20px;
    }
    .form {
        width: 100%;
        margin-left: 20px;
        border: 1px solid #d8d8d8;
        padding: 20px;
        .textarea {
            /deep/.el-textarea__inner {
                width: 100%;
                height: 200px;
            }
        }
    }
}
</style>