oa-system/src/components/OP/SpecialPerformance.vue

<template>
    <div class="SPerformance-all" v-loading.fullscreen.lock="SPLoading">
        <div class="SPerformance-Search">
            <div class="SPerformance-Search-ul">
                <div class="SPerformance-Search-li">
                    <label>选择月份:</label>
                    <el-date-picker @change="CompanyDailyKpiInfo" size="small" style="width:200px" v-model="months" type="month" placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="SPerformance-Search-li">
                    <label>人员名称:</label>
                    <el-select @change="CompanyDailyKpiInfo" size="small" style="width:200px" v-model="value" filterable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
             <el-button :disabled="!isOp" @click="CompanyDailyKpiSave" size="small" type="primary">保存</el-button>
        </div>
        <div class="SPerformance-Search-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="evalContentOrder" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="evalContent" label="工作内容" width="520">
                    <template slot-scope="scope">
                        <div style="text-align: left;">{{ scope.row.evalContent }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="工作是否失误" width="100">
                    <template slot-scope="scope">
                        <el-checkbox :disabled="!isOp" v-model="scope.row.isMistake"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="失误原因描述">
                    <template slot-scope="scope">
                        <el-input :disabled="!isOp" style="width:100%" v-model="scope.row.mistakeReason" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userId:'',
            months:new Date(),
            value:'',
            options:[],
            tableData: [],
            SPLoading:false,
            isOp:false,
        }
    },
    methods: {
        //获取人员名单
        CompanyDailyKpiInit() {
            var url = "/api/PersonnelModule/CompanyDailyKpiInit/"+this.userId;
            var that = this;
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                }
            }).then(function (res) {
                that.options=[];
                if (res.data.code == 200) {
                    that.options=res.data.data.userInfos;
                    that.isOp=res.data.data.isOp;
                    if(that.value==''){
                        that.value=that.options[0].id;
                    }
                    that.CompanyDailyKpiInfo();
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //处理日期
        datetime(val){
            var date=new Date(val);
            var y=date.getFullYear();
            var m=date.getMonth()+1>=10?date.getMonth()+1:'0'+(date.getMonth()+1).toString();
            var d=date.getDate()>=10?date.getDate():'0'+(date.getDate()).toString();
            return y+'-'+m
        },
        //获取任务明细
        CompanyDailyKpiInfo() {
            this.SPLoading=true;
            if (this.months==''||this.months==null){
                this.$message.error('请选择月份！');
                return
            }
            var url = "/api/PersonnelModule/CompanyDailyKpiInfo?month="+this.datetime(this.months)+"&evaluator="+this.value;
            var that = this;
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableData=res.data.data;
                    that.SPLoading=false;
                } else {
                    that.SPLoading=false;
                    that.$message.error(res.data.msg);
                }
            })
        },
        //保存任务
        CompanyDailyKpiSave() {
            this.SPLoading=true;
            var url = "/api/PersonnelModule/CompanyDailyKpiSave";
            var that = this;
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    currUserId:that.userId,
                    infos:that.tableData
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message.success(res.data.msg);
                    that.CompanyDailyKpiInfo();
                } else {
                    that.SPLoading=false;
                    that.$message.error(res.data.msg);
                }
            })
        },
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.CompanyDailyKpiInit();
    }
}
</script>
<style>
.SPerformance-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 780px;
}
.SPerformance-Search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.SPerformance-Search-ul{
    display: flex;
    align-items: center;
}
.SPerformance-Search-li{
    margin-right: 20px;
}
</style>