SmartCommunity/operationSupport/src/views/performanceManagement/evaluationSet/itemSettings/popups/itemAddOrEdit.vue

<!--
 * @Author: zwy
 * @Date: 2021-02-01 11:46:07
 * @LastEditors: zwy
 * @LastEditTime: 2021-05-19 15:45:27
 * @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="110" ref="form">
            <template slot="type">
                <el-select v-model="formData.type" placeholder="请选择考评项">
                    <!-- <el-option v-for="(item, index) in itemList" :key="index" :label="item.dictValue" :value="+item.dictCode">{{
                        item.dictValue
                    }}</el-option> -->

                    <el-option label="任务完成数" :value="0"></el-option>
                    <el-option label="任务按时完成率" :value="1"></el-option>
                    <el-option label="用户评价" :value="3"></el-option>
                    <el-option label="自定义" :value="2"></el-option>
                </el-select>
            </template>
            <!-- 条件 -->
            <template slot="valueCondition">
                <div style="display: flex">
                    <span>任务延迟完成时间小于</span>
                    <el-input v-model="formData.valueCondition" v-number-input style="width: 250px; margin: 0 10px" max="10"></el-input>
                    <span>分钟</span>
                </div>
            </template>
            <!-- 分值条件设置 -->
            <template slot="itemValues">
                <div class="conditionTitle" v-if="formData.type == 1">
                    <span>得分</span>
                    <span>按时完成率</span>
                    <span>百分比(%)</span>
                </div>
                <div class="conditionTitle" v-if="formData.type == 0 || formData.type == 3">
                    <span>得分</span>
                    <span>任务数</span>
                    <span>数值</span>
                </div>
                <div class="conditionContent" v-for="(item, index) in formData.itemValues" :key="index">
                    <el-form-item class="item" :prop="'itemValues.' + index + '.value'">
                        <el-input v-model="item.value" v-number-input></el-input>
                    </el-form-item>
                    <el-form-item
                        class="item"
                        :prop="'itemValues.' + index + '.type'"
                        :rules="[
                            {
                                validator: (rule, value, callback) => {
                                    checkType(rule, value, callback, index);
                                }
                            }
                        ]"
                    >
                        <el-select placeholder="请选择" v-model="item.type">
                            <el-option
                                v-for="(item, index) in gradeList"
                                :key="index"
                                :value="+item.dictCode"
                                :label="item.dictValue"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="item">
                        <el-form-item style="width: 100px" :prop="'itemValues.' + index + '.valueOne'">
                            <el-input v-model="item.valueOne" v-number-input></el-input>
                        </el-form-item>
                        <span style="margin: 0 5px">-</span>
                        <el-form-item
                            style="width: 100px"
                            :prop="'itemValues.' + index + '.valueTwo'"
                            :rules="[
                                {
                                    validator: (rule, value, callback) => {
                                        checkValueTwo(rule, value, callback, index);
                                    }
                                }
                            ]"
                        >
                            <el-input v-model="item.valueTwo" :disabled="item.type !== 1" v-number-input></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <i class="iconfont" v-if="index == formData.itemValues.length - 1" @click="add">&#xe67c;</i>
                        <i class="iconfont" v-else @click="deleteOne(index)">&#xe682;</i>
                    </div>
                </div>
            </template>
            <template slot="cycle">
                <el-checkbox-group v-model="formData.cycle">
                    <el-checkbox v-for="(item, index) in cycleList" :key="index" :label="item.dictCode">{{ item.dictValue }}</el-checkbox>
                </el-checkbox-group>
            </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 {
            checkList: [],
            organList: [],
            defaultProps: {
                children: 'orgs',
                label: 'orgName'
            },
            formData: {
                id: '',
                deptOrgIds: [], //所属公司
                type: 2, //考评项
                name: '', //名称
                value: '', //分值
                valueCondition: '', //条件值
                itemValues: [
                    //考评项分值
                    {
                        value: '', //得分
                        type: '', //符号
                        valueOne: '', //值1
                        valueTwo: '' //值2
                    }
                ],
                cycle: [], //考评周期
                remarks: '' //评分标准
            },
            itemList: [], //考评项列表
            cycleList: [], //考评周期列表
            gradeList: [], //符号
            formCols: [],
            formCols1: [
                //任务按时完成率
                [
                    {
                        label: '考评项',
                        prop: 'type',
                        slot: 'type'
                    },
                    {
                        label: '分值',
                        prop: 'value',
                        input: true
                    },
                    {
                        label: '条件',
                        prop: 'valueCondition',
                        slot: 'valueCondition'
                    },
                    {
                        label: '得分规则设置',
                        prop: 'itemValues',
                        slot: 'itemValues'
                    },
                    {
                        label: '考评周期',
                        prop: 'cycle',
                        slot: 'cycle'
                    },
                    {
                        label: '评分标准',
                        prop: 'remarks',
                        slot: 'remarks'
                    }
                ]
            ],
            formCols2: [
                //任务
                [
                    {
                        label: '考评项',
                        prop: 'type',
                        slot: 'type'
                    },
                    {
                        label: '分值',
                        prop: 'value',
                        input: true
                    },
                    {
                        label: '得分规则设置',
                        prop: 'itemValues',
                        slot: 'itemValues'
                    },
                    {
                        label: '考评周期',
                        prop: 'cycle',
                        slot: 'cycle'
                    },
                    {
                        label: '评分标准',
                        prop: 'remarks',
                        slot: 'remarks'
                    }
                ]
            ],
            formCols3: [
                //自定义列
                [
                    {
                        label: '考评项',
                        prop: 'type',
                        slot: 'type'
                    },
                    {
                        label: '名称',
                        prop: 'name',
                        maxlength: 20,
                        input: true
                    },
                    {
                        label: '分值',
                        prop: 'value',
                        maxlength: 10,
                        input: true
                    },
                    {
                        label: '考评周期',
                        prop: 'cycle',
                        slot: 'cycle'
                    },
                    {
                        label: '评分标准',
                        prop: 'remarks',
                        slot: 'remarks'
                    }
                ]
            ],
            formRules: {
                type: [this.$valid.selectRequired('考评项')],
                name: [this.$valid.inputRequired('名称')],
                value: [this.$valid.inputRequired('分值'), this.$valid.pattern(/^(?:[1-9]?\d|100)$/)],
                valueCondition: [this.$valid.inputRequired('条件')],
                itemValues: [this.$valid.inputRequired('得分规则设置')],
                cycle: [this.$valid.selectRequired('考评周期')],
                remarks: [this.$valid.inputRequired('评分标准')]
            }
        };
    },
    watch: {
        'formData.type'(val) {
            this.$refs.form.$refs.form.clearValidate();
            if (val == 1) {
                //任务按时完成率
                this.formData.name = '任务按时完成率';
                this.formCols = this.formCols1;
            } else if (val == 2) {
                //自定义
                this.formCols = this.formCols3;
            } else {
                //任务完成数
                this.formData.name = '任务完成数';
                this.formCols = this.formCols2;
            }
        }
    },
    methods: {
        // 校验
        checkType(rule, value, callback, index) {
            if (this.formData.itemValues[index].type !== 1) {
                this.formData.itemValues[index].valueTwo = '';
            }
            callback();
        },
        checkValueTwo(rule, value, callback, index) {
            if (
                this.formData.itemValues[index].type == 1 &&
                this.formData.itemValues[index].valueOne > this.formData.itemValues[index].valueTwo
            ) {
                callback('前一个分值必须小于等于后一个分值');
            }
            callback();
        },
        //获取考评项
        getEvalutionItem() {
            this.$api.common.getDictionaryData('SC_EVALUATION_ITEM').then(({ msg, status, data }) => {
                if (status == 0) {
                    this.itemList = data;
                }
            });
        },
        //获取考评周期
        getEvalutionCycle() {
            this.$api.common.getDictionaryData('SC_EVALUATION_CYCLE').then(({ msg, status, data }) => {
                if (status == 0) {
                    this.cycleList = 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.deptOrgIds = arr;
        },
        getOrgTreeList() {
            this.$http.postForm('/sc-user-center/org/getOrgTree', { orgType: 1 }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = data;
                }
            });
        },
        deleteOne(index) {
            this.formData.itemValues.splice(index, 1);
        },
        add() {
            let arr = {
                value: '', //得分
                type: '', //符号
                valueOne: '', //值1
                valueTwo: '' //值2
            };
            this.formData.itemValues.push(arr);
        },
        submit() {
            new Promise((resolve) => {
                this.$refs.form.validate(resolve);
            }).then(() => {
                var posturl = '',
                    method = 'post';
                if (this.params.todo === 'edit') {
                    posturl = '/sc-community/evaluation/item/edit';
                    delete this.formData.deptOrgIds;
                } else {
                    posturl = '/sc-community/evaluation/item/add';
                    if (!this.formData.deptOrgIds.length) {
                        this.$message.error('请勾选所属公司');
                        loading.close();
                        return;
                    }
                }
                var loading = this.$loading();
                this.formData.cycle = this.formData.cycle.join(',');
                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.getEvalutionItem();
        this.getEvalutionCycle();
        this.getGradeType();
        this.getOrgTreeList();
        this.formCols = this.formCols3;
        if (this.params.todo == 'edit') {
            this.params.data.cycle = this.params.data.cycle.split(',');
            this.__setValue('formData');
        }
    }
};
</script>

<style lang="scss" scoped>
.levelModal {
    display: flex;
    min-height: 100%;
    .tree-style {
        width: 300px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        overflow: auto;
        padding: 20px;
    }
    .form {
        width: 100%;
        margin-left: 20px;
        border: 1px solid #d8d8d8;
        padding: 20px;
        .conditionTitle {
            display: flex;
            span:nth-child(1) {
                width: 17%;
            }
            span:nth-child(2) {
                width: 35%;
            }
            span:nth-child(3) {
                width: 50%;
            }
        }
        .conditionContent {
            display: flex;
            .item:nth-child(1) {
                width: 15%;
                margin-right: 10px;
            }
            .item:nth-child(2) {
                width: 30%;
                margin-right: 20px;
            }
            .item:nth-child(3) {
                width: 50%;
                display: flex;
            }
        }
        .textarea {
            /deep/.el-textarea__inner {
                width: 100%;
                height: 200px;
            }
        }
    }
}
</style>