el-table 复杂表头行内增删改代码示例

效果如图
在这里插入图片描述

<template>
    <div class="app-container">
        <el-card class="box-card item">
            <div slot="header" class="clearfix" @click="showCondition = !showCondition">
                <span>
                    <i class="el-icon-search"></i>
                    {{ $t("commom.selectCondition") }}
                </span>
                <el-button style="float: right; padding: 3px 0" type="text">
                    <i class="el-icon-arrow-up" v-bind:class="showCondition ? 'active' : ''"></i>
                </el-button>
            </div>
            <el-collapse-transition>
                <div class="text item" v-show="showCondition">
                    <el-form :inline="true" :model="searchParam" class="demo-form-inline" label-width="120px"
                        label-position="right" label-suffix="">
                        <el-form-item label="部门类型">
                            <el-select v-model="searchParam.type" placeholder="请选择" size="mini" style="width:120px"
                                @change="getDpList">
                                <el-option :key="1" label="维护部门" :value="1"></el-option>
                                <el-option :key="2" label="运营部门" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-cascader change-on-select size="mini" v-model="searchParam.topList"
                                :options="departmentList" filterable :props="defaultProps" clearable @change="getMenList">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="员工">
                            <el-select v-model="searchParam.menId" placeholder="请选择" filterable size="mini">
                                <el-option v-for="item in MenList" :key="item.id" :label="item.name" :value="item.id">
                                    <span style="float: left">{{ item.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择时间">
                            <el-date-picker :picker-options="pickerOptions" align="left" size="mini"
                                v-if="searchParam.menId != null && searchParam.menId != 0" v-model="searchParam.time"
                                value-format="yyyy-MM" type="monthrange" range-separator="" start-placeholder="开始月份"
                                end-placeholder="结束月份">
                            </el-date-picker>
                            <el-date-picker v-else :picker-options="pickerOptions" size="mini" v-model="searchParam.time"
                                type="month" value-format="yyyy-MM" placeholder="选择月份">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-button v-if="!showAdd" icon="el-icon-search" size="mini"
                                @click="search()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-collapse-transition>
        </el-card>
        <el-row :gutter="5">
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span style="font-size:16px">
                            <i class="el-icon-tickets"></i> 详细信息
                        </span>
                        <el-button v-if="!showAdd" type="primary" style="float:right;" icon="el-icon-circle-plus-outline"
                            size="mini" @click="add()">新增人员考评</el-button>
                        <el-button v-if="showAdd" type="primary" style="float:right;" size="mini"
                            @click="cancelAdd()">结束添加</el-button>
                        <el-button v-if="showAdd" type="primary" style="float:right;margin-right:20px"
                            icon="el-icon-circle-plus-outline" size="mini" @click="addEvaluation()">添加</el-button>
                    </div>
                    <div>
                        <el-table height="750px" id="tb" :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }" :data="dataList" style="width: 100%;">
                            <el-table-column width="140" label="姓名">
                                <template slot-scope="scope">
                                    <el-select class="input_div" v-if="scope.row.isAdd" v-model="scope.row.menId"
                                        placeholder="请选择" filterable size="mini">
                                        <el-option v-for="item in MenList" :key="item.id" :label="item.name"
                                            :value="item.id">
                                            <span style="float: left">{{ item.name }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}</span>
                                        </el-option>
                                    </el-select>
                                    <span v-else v-text="scope.row.menName"></span>
                                </template>
                            </el-table-column>
                            <el-table-column width="160" label="月份">
                                <template slot-scope="scope">
                                    <el-date-picker :picker-options="pickerOptions" class="month_div" size="mini"
                                        v-if="scope.row.isAdd" v-model="scope.row.date" type="month" value-format="yyyy-MM"
                                        placeholder="选择月">
                                    </el-date-picker>
                                    <span v-else v-text="scope.row.date"></span>
                                </template>
                            </el-table-column>
                            <el-table-column label="人工评分">
                                <el-table-column width="70" label="">
                                    <template slot="header">
                                        <div>
                                            <el-tooltip content="着装:工作服、鞋" placement="top">
                                                <span>*着装</span>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.clothing"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.clothing"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="出勤">
                                    <el-table-column width="60" label="病假">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="2" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.sickLeave"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.sickLeave"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="60" label="事假">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.compassionateLeave"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.compassionateLeave"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="80" label="未按规定办理请假">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.inappropriateLeave"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.inappropriateLeave"></span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column label="专业技能水平">
                                    <el-table-column width="60" label="一级">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="4" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.skillLevelOne"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.skillLevelOne"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="60" label="二级">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="3" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.skillLevelTwo"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.skillLevelTwo"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="60" label="三级">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="2" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.skillLevelThree"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.skillLevelThree"></span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column label="工作态度">
                                    <el-table-column width="60" label="主管反馈">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.manageFeedBack"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.manageFeedBack"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="60" label="投诉情况">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.complaint"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.complaint"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="84">
                                        <template slot="header">
                                            <div>
                                                <el-tooltip content="违纪情况:上班打游戏、睡觉、带无关人员进入办公区域" placement="top">
                                                    <span>*违纪情况</span>
                                                </el-tooltip>
                                            </div>
                                        </template>
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="14" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.lowViolation"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.lowViolation"></span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column width="77" label="">
                                    <template slot="header">
                                        <div>
                                            <el-tooltip content="违反安全规定:吸烟等" placement="top">
                                                <span>*违反安全规定</span>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="20" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.security"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.security"></span>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="系统评分">
                                <el-table-column label="设备清洁保养">
                                    <el-table-column width="70" label="根据系统工单">
                                        <template slot-scope="scope">
                                            <el-input-number class="num_div_one" :controls="false" :max="20" :min="0"
                                                v-if="scope.row.isEdit" v-model="scope.row.maintenance"
                                                size="mini"></el-input-number>
                                            <span v-else v-text="scope.row.maintenance"></span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column width="70" label="记录本填写">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.noteRecord"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.noteRecord"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="80" label="设备及配电间巡检情况">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.inspection"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.inspection"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60" label="迟到">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.late" size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.late"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60" label="早退">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="5" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.earlyLeave"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.earlyLeave"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60" label="旷工">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="15" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.absenteeism"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.absenteeism"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60" label="响应时间">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.responseTime"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.responseTime"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="70" label="维修量">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.repairCount"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.repairCount"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60" label="维修时间">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.repairTime"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.repairTime"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="84" label="">
                                    <template slot="header">
                                        <div>
                                            <el-tooltip content="维修质量:维修完后重复故障率" placement="top">
                                                <span>*维修质量</span>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.repairQuality"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.repairQuality"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="84" label="">
                                    <template slot="header">
                                        <div>
                                            <el-tooltip content="工单填写情况:误填、漏填、填错" placement="top">
                                                <span>*工单填写情况</span>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.planFilling"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.planFilling"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column width="70" label="接转单加权分">
                                    <template slot-scope="scope">
                                        <el-input-number class="num_div_one" :controls="false" :max="10" :min="0"
                                            v-if="scope.row.isEdit" v-model="scope.row.transferPlan"
                                            size="mini"></el-input-number>
                                        <span v-else v-text="scope.row.transferPlan"></span>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column width="90" label="得分">
                                <template slot-scope="scope">
                                    <!-- <el-input-number class="num_div_one" :controls="false" :max="5" :min="0" v-if="scope.row.isEdit" v-model="scope.row.total" size="mini"></el-input> -->
                                    <span>
                                        {{
                                            Number(scope.row.clothing) +
                                            Number(scope.row.sickLeave) +
                                            Number(scope.row.compassionateLeave) +
                                            Number(scope.row.inappropriateLeave) +
                                            Number(scope.row.skillLevelOne) +
                                            Number(scope.row.skillLevelTwo) +
                                            Number(scope.row.skillLevelThree) +
                                            Number(scope.row.manageFeedBack) +
                                            Number(scope.row.complaint) +
                                            Number(scope.row.lowViolation) +
                                            Number(scope.row.security) +
                                            Number(scope.row.maintenance) +
                                            Number(scope.row.noteRecord) +
                                            Number(scope.row.inspection) +
                                            Number(scope.row.late) +
                                            Number(scope.row.earlyLeave) +
                                            Number(scope.row.absenteeism) +
                                            Number(scope.row.responseTime) +
                                            Number(scope.row.repairCount) +
                                            Number(scope.row.repairTime) +
                                            Number(scope.row.repairQuality) +
                                            Number(scope.row.planFilling) +
                                            Number(scope.row.transferPlan) +
                                            Number(scope.row.repairTime)
                                        }}
                                        <!-- {{ scope.row.total }} -->
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button v-if="!scope.row.isEdit" type="text" size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button v-if="scope.row.isEdit" type="text" @click="doEdit(scope.$index, scope.row)"
                                        size="mini">确定</el-button>
                                    <el-button v-if="scope.row.isEdit" type="text"
                                        @click="cancelEdit(scope.$index, scope.row)" size="mini">取消</el-button>
                                    <el-button v-if="!scope.row.isEdit" type="text" size="mini"
                                        @click="handleDelete(scope.$index, scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination :current-page.sync="searchParam.page" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" :page-count="pageCount" :total="total"
                            :page-sizes="[50, 80, 100]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import { parseTime, removeNull } from '@/utils'
import common from '@/api/common.js'
import personnelEvaluation from '@/api/performanceAssessment/personnelEvaluation.js'
import * as echarts from 'echarts'
import MyTable from '../../dashBoard/operationBoard/components/myTable.vue'

export default {
    name: 'personnelEvaluation',
    data () {
        return {
            col: [],
            tableData: [],
            showCondition: true, // 手风琴
            searchParam: {
                // lineCode: '华虹计通',
                // stationCode: '8号线维保组',
                // macSysNo: '所有',
                topList: [],
                type: 1,
                menId: 0,
                departmentId: 0,
                startTime: '',
                endTime: '',
                time: [],
                page: 1,
                row: 50,
            },
            MenList: [{ id: 0, name: '全部' }],
            defaultProps: {
                children: 'children',
                label: 'name',
                id: 'id',
                value: 'id'
            },
            departmentList: [],
            departmentList1: [],
            departmentList2: [],
            companyList: [],
            groupList: [],
            menList: [],
            dataList: [],
            pageCount: 0, // 页数
            total: 0, // 条目数
            showAdd: false,
            pickerOptions: this.getTime(),
        }
    },
    created () {
        var dayjs = this.dayjs
        this.searchParam.time = dayjs(new Date()).add(-1, 'month').format('YYYY-MM')
        this.getDeptList()
    },
    components: {
        MyTable
    },
    mounted () {

    },
    methods: {
        getDeptList () {
            // 异步加载默认部门
            var that = this
            function p (arr) {
                arr.reduce((promise, item) => {
                    return promise.then(res => {
                        return item()
                    })
                }, Promise.resolve())
            }
            function p1 () {
                return new Promise(res => {
                    setTimeout(() => {
                        // 获取维护部门
                        common.GetDepartmentListEnable({ type: 1 }).then((val) => {
                            if (val.data != null) {
                                that.departmentList1 = removeNull(val.data)
                            }
                        })
                        // 获取运营部门
                        common.GetOperateDepartmentListEnable({ type: 1 }).then((val) => {
                            if (val.data != null) {
                                that.departmentList2 = removeNull(val.data)
                            }
                        })
                        res()
                    }, 100)
                })
            }
            function p2 () {
                return new Promise(res => {
                    setTimeout(() => {
                        that.getDpList(1)
                        res()
                    }, 100)
                })
            }
            function p3 () {
                return new Promise(res => {
                    setTimeout(() => {
                        if (that.departmentList.length > 0) {
                            that.searchParam.type = 1
                        }
                        that.getMenList()
                        that.searchData()
                        res()
                    }, 100)
                })
            }
            p([p1, p2, p3])
        },
        changeMen (val) {
            if (val) {
                var dayjs = this.dayjs
                var arr = []
                arr.push(dayjs(new Date()).format('YYYY-MM'))
                arr.push(dayjs(new Date()).format('YYYY-MM'))
                this.searchParam.time = arr
            }
        },
        search(){
            this.searchParam.page =1
            this.searchData()
        },
        searchData () {
            if (!this.searchParam.time) {
                this.$message({
                    type: 'warning',
                    message: '请选择时间!',
                })
                return
            }
            if (this.searchParam.menId != null && this.searchParam.menId != 0) {
                this.searchParam.startTime = this.searchParam.time[0] + '-01'
                this.searchParam.endTime = this.searchParam.time[1] + '-01'
            } else {
                this.searchParam.startTime = this.searchParam.time + '-01'
                this.searchParam.endTime = this.searchParam.time + '-01'
            }
            this.searchParam.departmentId = this.searchParam.topList[this.searchParam.topList.length - 1]
            var obj = {
                menId: this.searchParam.menId,
                departmentId: this.searchParam.departmentId,
                startTime: this.searchParam.startTime,
                endTime: this.searchParam.endTime,
                page: this.searchParam.page,
                row: this.searchParam.row
            }
            personnelEvaluation.getAssessment(obj).then((val) => {
                if (val.status == 0) {
                    this.tableData = val.data.listData
                    this.tableData.forEach(item => {
                        item.isAdd = false
                        item.isEdit = false
                    });
                    this.dataList = this.tableData
                    this.total = val.data.data
                    this.pageCount = val.data.pageNum
                }
            })
        },
        getTime () {
            return {
                disabledDate (time) {
                    const date = new Date();
                    const year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    const currentdate = year.toString() + month.toString();
                    const timeyear = time.getFullYear();
                    let timemonth = time.getMonth() + 1;
                    if (timemonth >= 1 && timemonth <= 9) {
                        timemonth = "0" + timemonth;
                    }
                    const timedate = timeyear.toString() + timemonth.toString();
                    return currentdate <= timedate;
                },
            };
        },
        handleEdit (index, row) {
            row.isEdit = true
            this.$forceUpdate()
        },
        // 编辑
        doEdit (index, row) {
            if (row.isAdd) {
                // 新增
                if (!row.menId) {
                    this.$message({
                        type: 'warning',
                        message: '请选择人员!',
                    })
                    return
                }
                if (!row.date) {
                    this.$message({
                        type: 'warning',
                        message: '请选择月份!',
                    })
                    return
                }

                var date = row.date + '-01'
                var men = this.MenList.find(item => item.id == row.menId)
                var menName = men.name

                var obj = {
                    menId: row.menId,
                    menName: menName,
                    clothing: row.clothing,
                    sickLeave: row.sickLeave,
                    compassionateLeave: row.compassionateLeave,
                    inappropriateLeave: row.inappropriateLeave,
                    skillLevelOne: row.skillLevelOne,
                    skillLevelTwo: row.skillLevelTwo,
                    skillLevelThree: row.skillLevelThree,
                    manageFeedBack: row.manageFeedBack,
                    complaint: row.complaint,
                    lowViolation: row.lowViolation,
                    security: row.security,
                    maintenance: row.maintenance,
                    noteRecord: row.noteRecord,
                    inspection: row.inspection,
                    late: row.late,
                    earlyLeave: row.earlyLeave,
                    absenteeism: row.absenteeism,
                    responseTime: row.responseTime,
                    repairCount: row.repairCount,
                    repairTime: row.repairTime,
                    repairQuality: row.repairQuality,
                    planFilling: row.planFilling,
                    transferPlan: row.transferPlan,
                    date: date
                }

                personnelEvaluation.addAssessment(obj).then((val) => {
                    if (val.status == 0) {
                        row.isAdd = false
                        row.isEdit = false
                        var men = this.MenList.find(item => item.id == row.menId)
                        row.menName = men.name
                        this.$message({
                            type: 'success',
                            message: '添加成功!',
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '添加失败!',
                        })
                    }
                })
            } else {
                if (row.date != null && row.date != undefined && row.date.includes('-')) {
                    row.date = row.date.substring(0, 4) + row.date.substring(5, 7)
                }
                // 修改
                personnelEvaluation.editAssessment(row).then((val) => {
                    if (val != null && val.status == 0) {
                        if (!this.showAdd) {
                            this.searchData()
                        } else {
                            row.isEdit = false
                            this.$forceUpdate()
                        }
                        this.$message({
                            type: 'success',
                            message: '编辑成功!',
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '编辑失败!',
                        })
                    }
                })
            }
        },
        // 取消编辑
        cancelEdit (index, row) {
            row.isEdit = false
            if (row.isAdd) {
                this.dataList.splice(index, 1)
            }
            this.$forceUpdate()
        },
        // 删除
        handleDelete (index, row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    var obj = {
                        date: row.date,
                        menId: row.menId
                    }
                    personnelEvaluation.deleteAssessment(obj).then((val) => {
                        if (val.status == 0) {
                            this.searchData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })

        },
        handleCurrentChange (val) {
            this.searchParam.page = val
            // 查询数据
            this.searchData()
        },
        // 调整每页显示条数
        handleSizeChange (val) {
            this.searchParam.row = val
            // 查询数据
            this.searchData()
        },
        // 点击添加按钮
        add () {
            this.showAdd = true
            this.dataList = []
        },
        // 点击完成添加按钮
        cancelAdd () {
            this.showAdd = false
            this.searchData()
        },
        addEvaluation () {
            if (this.searchParam.topList.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择部门!',
                })
                return
            }
            let row = {
                menName: '',
                clothing: 5,
                sickLeave: 2,
                compassionateLeave: 5,
                inappropriateLeave: 10,
                skillLevelOne: 4,
                skillLevelTwo: 3,
                skillLevelThree: 2,
                manageFeedBack: 10,
                complaint: 10,
                lowViolation: 14,
                security: 20,
                maintenance: 20,
                noteRecord: 5,
                inspection: 5,
                late: 5,
                earlyLeave: 5,
                absenteeism: 15,
                responseTime: 10,
                repairCount: 10,
                repairTime: 10,
                repairQuality: 10,
                planFilling: 10,
                transferPlan: 10,
                total: 210,
                date: '',
                isEdit: true,
                isAdd: true
            }
            this.dataList.unshift(row);
        },
        // 根据部门类型获取部门列表
        getDpList (type) {
            new Promise((resolve) => {
                this.searchParam.menId = 0
                this.MenList = [{ id: 0, name: '全部' }]
                if (type == 1) {
                    this.departmentList = this.departmentList1
                }
                if (type == 2) {
                    this.departmentList = this.departmentList2
                }
                if (!type) {
                    this.departmentList = []
                }
                resolve('成功')
            }).then((resolve) => {
                if (this.departmentList.length > 0) {
                    this.searchParam.topList.push(this.departmentList[0].id)
                }
            })

        },
        // 获取部门员工
        getMenList (list) {
            this.searchParam.menId = 0
            this.searchParam.departmentId = 0
            if (!this.searchParam.type || this.searchParam.topList.length == 0) {
                this.MenList = [{ id: 0, name: '全部' }]
            } else {
                var model = {}
                if (this.searchParam.type == 1) {
                    model = {
                        iPage: 1,
                        count: 9999,
                        noName: '',
                        departmentId: -1,
                        departmentIdList: [],
                        specialty: ''
                    }
                    model.departmentId =
                        this.searchParam.topList[this.searchParam.topList.length - 1]
                    common.GetMenInfor(model).then((val) => {
                        if (val.data != null) {
                            this.MenList = val.data.listData
                        } else {
                            this.MenList = []
                        }
                        this.MenList.push({ id: 0, name: '全部' })
                    })
                }
                if (this.searchParam.type == 2) {
                    model = {
                        iPage: 1,
                        count: 9999,
                        noName: '',
                        departmentId: -1,
                        departmentIdList: [],
                        specialty: ''
                    }
                    model.departmentId =
                        this.searchParam.topList[this.searchParam.topList.length - 1]
                    common.GetOperateMenInfor(model).then((val) => {
                        if (val.data != null) {
                            this.MenList = val.data.listData
                        } else {
                            this.MenList = []
                        }
                        this.MenList.push({ id: 0, name: '全部' })
                    })
                }
            }
        },
    }
}
</script>
  
<style lang="scss">
.el-card__body {
    padding: 0px;
}

.input_div input.el-input__inner {
    width: 140px;
}

.month_div input.el-input__inner {
    width: 63% !important;
}

#tb {
    .num_div_one {
        width: 54px;
    }

    .el-input-number.is-without-controls .el-input__inner {
        padding-left: 8px;
        padding-right: 8px;
    }
}
</style>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值