BusinessBenchmark/src/components/taskCenter/taskCenterDeptStartFrom.vue

<template>
    <div class="deptstartFrom">
        <el-dialog title="考评启动详情" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="startDetail">
                <p class="starttitleSty">单据信息：</p>
                <el-row class="danjuMsg">
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">业务编号:</span>
                            <span>{{receiptMsg.code}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">创建日期:</span>
                            <span>{{receiptMsg.createDate}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">业务简述:</span>
                            <span>{{receiptMsg.des}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">考评周期:</span>
                            <span>{{receiptMsg.type}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">流程状态:</span>
                            <span>{{receiptMsg.stage}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">年度:</span>
                            <span>{{receiptMsg.year}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="danjuMsg_data">
                            <span class="data_tit">创建人:</span>
                            <span>{{receiptMsg.createName}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">单据状态:</span>
                            <span>{{receiptMsg.recStage}}</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="btnStartSeach">
                    <div class="seachFor" v-if="ispersonDept === 'true'">
                        <el-input v-model="compNameSa" placeholder="请输入部门名称" @keyup.enter="getDetails(importId)">
                        </el-input>
                    </div>
                    <div class="detaTableBtns">
                        <div class="tableBtn add" @click="addTableDetail">
                            <img :src="addIcon" alt="">
                            <span>新增</span>
                        </div>
                        <div class="tableBtn save" @click="saveDetail">
                            <img :src="saveIcon" alt="">
                            <span>保存</span>
                        </div>
                        <div class="tableBtn import" @click="handleImport">
                            <img :src="importIcon" alt="">
                            <span>导入</span>
                        </div>
                        <div class="tableBtn export" @click="handleExport">
                            <img :src="exportIcon" alt="">
                            <span>导出</span>
                        </div>
                    </div>
                </div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="考评指标项内容" name="first">
                        <el-table
                            :data="quantifiedList.slice((pageLeft.currentPage-1)*pageLeft.pagesize, pageLeft.currentPage*pageLeft.pagesize)"
                            style="width: 100%" @select="rowClick" @select-all="rowClick">
                            <el-table-column label="序号" type="index" width="80" />
                            <el-table-column label="部门名称" prop="deptName" width="300">
                                <template #default="scope">
                                    <!-- <el-select v-model="scope.row.deptName"
                                        :disabled="scope.row.dataPermission === '-1' && scope.row.deptName !== ''"
                                        placeholder="请选择所属部门" filterable v-if="scope.row.showInput">
                                        <el-option v-for="item in departData" :key="item.deptId" :label="item.deptName"
                                            :value="item.deptId">
                                        </el-option>
                                    </el-select> -->
                                    <span v-if="scope.row.showInput">{{receiptMsg.deptName}}</span>
                                    <span v-else>{{scope.row.deptName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="指标名称" width="200">
                                <template #default="scope">
                                    <el-input v-model="scope.row.targetName"
                                        :disabled="scope.row.dataPermission === '-1'" placeholder="请输入指标名称"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="目标值" width="500">
                                <template #default="scope">
                                    <el-input v-model="scope.row.targetValue"
                                        :disabled="scope.row.dataPermission === '-1'" type="textarea" :rows="2"
                                        placeholder="请输入目标值"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="基础分" width="150">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.baseScore" :precision="2" :step="0.1"
                                        :min="0" />
                                </template>
                            </el-table-column>
                            <el-table-column label="评价标准">
                                <template #default="scope">
                                    <el-input v-model="scope.row.evaluationCriteria" type="textarea" :rows="2"
                                        placeholder="请输入评价标准"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="排序" width="130">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.serialNumber"
                                        :disabled="(scope.row.dataPermission === '-1' && scope.row.serialNumber !== '')"
                                        :min="1" />
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="审核状态" width="150">
                                <template #default="scope">
                                    <el-select v-model="scope.row.auditStatus"
                                        :disabled="(scope.row.dataPermission === '-1' && scope.row.auditStatus !== '') || ispersonDept !== 'true'"
                                        placeholder="请选择审核状态">
                                        <el-option v-for="item in statusData" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="操作" width="80" align="center">
                                <template #default="scope">
                                    <p class="indicitem" v-if="scope.row.dataPermission !== '-1'"
                                        @click="handleDelete(scope.row)">删除</p>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @current-change="handleCurrentChangeLeft" :current-page="pageLeft.currentPage"
                            :page-size="pageLeft.pagesize" layout="total, prev, pager, next, jumper"
                            :total="pageLeft.total">
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
                <div>
                    <p class="starttitleSty">审批意见：</p>
                    <el-input v-model="descMsg" :rows="3" type="textarea" placeholder="请输入审批意见"></el-input>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="examineAndApprove('agree')">同 意</el-button>
                    <el-button @click="examineAndApprove('reject')">拒 绝</el-button>
                </span>
            </template>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
    </div>
</template>

<script>
    import importDailog from '../importPage/importDailog.vue'
    import {
        apiGetevaluationdeptplanDetail,
        apiGetevaluationdeptplanUpdate,
        apiGetdatadictionaryList,
        apiGetcheckAuditStatus,
        apiGetevaluationdetailDeptData,
        apiPostIsdoAction,
        apiGetevaluationdeptplanDetailHeader,
        apiGetevaluationdeptplandelete
    } from '../../api/api'
    import ExcelJS from 'exceljs'
    import fileSave from 'file-saver'
    import addIcon from '../../assets/btnIcon/add.png'
    import saveIcon from '../../assets/btnIcon/save.png'
    import editIcon from '../../assets/btnIcon/edit.png'
    import deleteIcon from '../../assets/btnIcon/delete.png'
    import exportIcon from '../../assets/btnIcon/export.png'
    import importIcon from '../../assets/btnIcon/import.png'
    export default {
        components: {
            importDailog
        },
        data() {
            return {
                descMsg: '',
                dialogVisible: false,
                activeName: 'first',
                quantifiedList: [],
                changeDateSelect: [],
                receiptMsg: {
                    code: '',
                    des: '',
                    stage: '',
                    createName: '',
                    createDate: '',
                    type: '',
                    year: '',
                    recStage: ''
                },
                addIcon: addIcon,
                saveIcon: saveIcon,
                editIcon: editIcon,
                deleteIcon: deleteIcon,
                exportIcon: exportIcon,
                importIcon: importIcon,
                rowMsg: {},
                orgruleData: [],
                indicItemoptions: [],
                sectionNameArr: [],
                deptNameArr: [],
                statusData: [],
                pageLeft: {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                },
                pageRight: {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                },
                departData: [],
                instanceChild: {},
                importId: '',
                userMes: {},
                ispersonDept: window.sessionStorage.getItem('ispersonDept'),
                compNameSa: ''
            }
        },
        created() {
            this.statusData = [{
                    name: '已通过',
                    id: '0'
                },
                {
                    name: '待审核',
                    id: '-1'
                },
                {
                    name: '未通过',
                    id: '-2'
                }
            ]
        },
        methods: {
            init(row, id, datas) {
                this.dialogVisible = true
                this.instanceChild = datas
                this.activeName = 'first'
                this.importId = id
                this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
                this.getDetails(id)
                this.getDepartmentFromTreeData(datas)
                this.rowMsg = row
            },
            // 查询部门
            getDepartmentFromTreeData(datas) {
                let that = this
                that.departData = []
                // let params = {
                //     superKey: 'BM0001'
                // }
                // apiGetdatadictionaryList(params).then(datas =>{
                //     if (datas && datas.data) {
                //         let departData = datas.data
                //         that.getshowDepartDataFn(row, departData)
                //     }
                // })
                let params = {
                    // id: datas.bizKey,
                    deptId: that.userMes.deptId
                }
                // 获取部门数据
                apiGetevaluationdetailDeptData(params).then(datas => {
                    if (datas && datas.data && datas.data.length > 0) {
                        that.departData = datas.data
                        // for(let i in datas.data) {
                        //     let obj = {
                        //         id: i,
                        //         name: datas.data[i]
                        //     } 
                        //     that.departData.push(obj)
                        // }
                    }
                })
            },
            // 整合部门数据
            // getshowDepartDataFn(row, deptData) {
            //     let deptIdArr = row.deptId.split(',')
            //     deptIdArr.forEach(it =>{
            //         deptData.forEach(itv =>{
            //             if (itv.id === it) {
            //                 that.departData.push(itv)
            //             }
            //         })
            //     })
            // },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this
                    if (!row.id) {
                        that.quantifiedList.forEach((it, index) => {
                            if (it === row) {
                                that.quantifiedList.splice(index, 1)
                            }
                        })
                    } else {
                        let params = {
                            id: row.id,
                            deptId: that.userMes.deptId
                        }
                        apiGetevaluationdeptplandelete(params).then(datas => {
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            that.getDetails(that.importId)
                            that.changeDateSelect = []
                        })
                    }
                })
            },
            handleClick() {
                this.changeDateSelect = []
            },
            rowClick(selection, row) {
                this.changeDateSelect = selection
            },
            handleCurrentChangeLeft(val) {
                this.pageLeft.currentPage = val
            },
            handleCurrentChangeRight(val) {
                this.pageRight.currentPage = val
            },
            //获取详情
            getDetails(id) {
                let that = this
                that.quantifiedList = []
                let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                let params = {
                    id: id,
                    deptId: userMes.deptId,
                    com: that.compNameSa ? that.compNameSa : 'null'
                }
                apiGetevaluationdeptplanDetailHeader(id).then(datas => {
                    if (datas && datas.data) {
                        let item = datas.data
                        this.receiptMsg = {
                            code: item.responsibilityCode,
                            des: item.des,
                            stage: item.stage,
                            createName: item.createName,
                            createDate: item.createTime,
                            type: item.checkCycle === 'YDKP' ? '月度考评' : item.checkCycle === 'JDKP' ?
                                '季度考评' : '年度考评',
                            year: item.appraisalYear,
                            recStage: '有效',
                            deptName: item.deptName,
                            deptId: item.deptId
                        }
                    }
                })
                apiGetevaluationdeptplanDetail(params).then(datas => {
                    if (datas && datas.data) {
                        that.quantifiedList = datas.data
                        that.pageLeft.total = datas.data.length
                    }
                })
            },
            addTableDetail() {
                let obj = {
                    showInput: true,
                    businessPlanId: this.importId,
                    serialNumber: 1,
                    deptId: this.receiptMsg.deptId,
                    targetName: '',
                    targetValue: '',
                    baseScore: 0,
                    evaluationCriteria: '',
                    // auditStatus: '-1',
                    dataPermission: '1'
                }
                this.quantifiedList.unshift(obj)
            },
            saveDetail() {
                let that = this
                let params = []
                let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                that.quantifiedList.forEach(item => {
                    let obj = {
                        targetName: item.targetName,
                        targetValue: encodeURI(item.targetValue),
                        baseScore: item.baseScore.toString(),
                        evaluationCriteria: item.evaluationCriteria,
                        // auditStatus: item.auditStatus,
                        serialNumber: item.serialNumber,
                        createDept: userMes.deptId
                    }
                    if (item.showInput) {
                        obj.deptId = item.deptId
                        obj.businessPlanId = item.businessPlanId
                    } else {
                        obj.id = item.id
                    }
                    params.push(obj)
                })
                apiGetevaluationdeptplanUpdate(params).then(datas => {
                    if (datas) {
                        if (datas.success) {
                            that.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            that.getDetails(that.importId)
                        } else {
                            that.$message({
                                message: datas.data,
                                type: 'error'
                            })
                        }
                    }
                })
            },
            examineAndApprove(type) {
                let that = this
                let actionCS = ''
                if (type === 'agree') {
                    if (that.rowMsg.taskType === 'SIGN') {
                        actionCS = 'signAgree'
                    } else if (that.rowMsg.taskType === 'NORMAL') {
                        actionCS = 'agree'
                    }
                } else {
                    if (that.rowMsg.taskType === 'SIGN') {
                        actionCS = 'signReject'
                    } else if (that.rowMsg.taskType === 'NORMAL') {
                        actionCS = 'reject'
                    }
                }
                let params = {
                    taskId: that.rowMsg.id, //任务ID
                    nodeId: that.rowMsg.nodeId, //节点ID
                    action: actionCS, //固定值
                    instanceId: that.rowMsg.instId, //流程实例ID
                    opinion: that.descMsg, //审批意见
                    iamCode: window.localStorage.getItem('code'), //认证后code值
                    taskName: that.rowMsg.name,
                    defKey: that.instanceChild.defKey,
                    bizKey: that.instanceChild.bizKey
                }
                if (type === 'agree') {
                    let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                    let paramsob = {
                        id: that.importId,
                        deptId: userMes.deptId
                    }
                    apiGetcheckAuditStatus(paramsob).then(datas => {
                        if (datas) {
                            if (datas.success) {
                                that.IsdoActionFn(params)
                            } else {
                                that.$message({
                                    message: datas.data,
                                    type: 'error'
                                })
                            }
                        }
                    })
                } else {
                    that.IsdoActionFn(params)
                }
            },
            IsdoActionFn(params) {
                let that = this
                apiPostIsdoAction(params).then(datas => {
                    if (datas && datas.data) {
                        if (datas.data.isOk) {
                            that.$message({
                                message: datas.data.data,
                                type: 'success'
                            })
                            that.dialogVisible = false
                            that.$emit('approveMsg', datas.data.isOk)
                        } else {
                            that.$message({
                                message: datas.data.msg,
                                type: 'error'
                            })
                        }
                    }
                })
            },
            handleImport() {
                this.$refs.importPage.upload.title = "本部部门业绩指标计划信息导入"
                this.$refs.importPage.upload.data = {
                    id: this.importId
                }
                this.$refs.importPage.upload.open = true
                this.$refs.importPage.upload.url = '/evaluation-dept-plan/import'
            },
            successImport(val) {
                this.getDetails(this.importId)
            },
            handleExport() {
                let data = this.quantifiedList //接口返回数据
                const workbook = new ExcelJS.Workbook()
                const worksheet = workbook.addWorksheet('Sheet1')
                //根据数据自己调整
                let colums = []
                colums = [
                    // { header: 'ID', key: 'id', width: 26 },
                    // { header: '业务ID', key: 'businessPlanId', width: 26 },
                    {
                        header: '部门编码',
                        key: 'deptId',
                        width: 26
                    },
                    {
                        header: '部门名称',
                        key: 'deptName',
                        width: 26
                    },
                    // { header: '部门编码', key: 'deptCode', width: 26 },
                    {
                        header: '排序',
                        key: 'serialNumber',
                        width: 26
                    },
                    {
                        header: '指标名称',
                        key: 'targetName',
                        width: 18
                    },
                    {
                        header: '目标值',
                        key: 'targetValue',
                        width: 18
                    },
                    {
                        header: '评价标准',
                        key: 'evaluationCriteria',
                        width: 18
                    },
                    {
                        header: '基础分',
                        key: 'baseScore',
                        width: 18
                    },
                ]
                worksheet.columns = colums
                worksheet.getRow(1).font = {
                    size: 12,
                    bold: true
                }
                worksheet.addRows(data)

                workbook.xlsx.writeBuffer().then(buffer => {
                    //这里为type
                    const blob = new Blob([buffer], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                    })
                    fileSave(blob, `本部部门业绩指标计划数据导出.xlsx`)
                })
            },
        }
    }
</script>

<style lang="less">
    .deptstartFrom {
        .el-overlay {
            .el-dialog {

                // margin-top: 7vh;
                .el-dialog__body {
                    padding: 0 20px !important;

                    .startDetail {
                        .starttitleSty {
                            font-size: 18px;
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #3B7AD1;
                            // line-height: 12px;
                            margin: 20px 0 20px 10px;
                        }

                        .danjuMsg {
                            border: 1px solid #D6DBEA;
                            padding: 10px 20px;
                            border-radius: 10px;
                            margin-bottom: 20px;

                            .danjuMsg_data {
                                padding: 5px 0 10px 0;

                                .data_tit {
                                    margin-right: 10px;
                                    font-weight: bold;
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    color: #8991B0;
                                }

                                .data_tit_wd {
                                    display: inline-block;
                                    width: 90px;
                                }

                                .el-form-item--small {
                                    .el-input {
                                        height: 25px;
                                        width: 160px;
                                    }

                                    margin-bottom: 0;

                                    .el-input-number {
                                        height: 25px;

                                        .el-input-number__decrease,
                                        .el-input-number__increase {
                                            right: -39px;
                                        }
                                    }
                                }
                            }
                        }

                        .el-select,
                        .el-input {
                            width: 100%;
                        }

                        .btnStartSeach {
                            display: flex;
                            z-index: 11111;
                            justify-content: flex-end;
                            position: relative;
                            top: 32px;
                            // left: 50vw;
                            width: 100%;

                            .seachFor {
                                .el-input {
                                    height: 30px;

                                    .el-input__inner {
                                        height: 30px;
                                    }

                                    .el-input__suffix {
                                        .el-select__caret {
                                            line-height: 30px;
                                        }
                                    }
                                }
                            }

                            .detaTableBtns {
                                display: flex;
                                justify-content: flex-end;
                                // width: 300px;
                                width: fit-content;
                                margin-top: 5px;

                                .tableBtn {
                                    display: flex;
                                    height: 20px;
                                    margin: 0 10px;
                                    // width: 20%;
                                    width: fit-content;

                                    img {
                                        margin-right: 5px;
                                        margin-top: 1px;
                                    }

                                    span {
                                        display: inline-block;
                                        // width: 100%;
                                        width: 35px;
                                        font-size: 14px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                    }
                                }

                                .add {
                                    cursor: pointer;

                                    span {
                                        color: #3B7AD1;
                                    }
                                }

                                .save {
                                    cursor: pointer;

                                    span {
                                        color: #50C14E;
                                    }
                                }

                                .edit {
                                    span {
                                        color: #F5A623;
                                    }
                                }

                                .delete {
                                    cursor: no-drop;

                                    span {
                                        color: #F65177;
                                    }
                                }

                                .import {
                                    cursor: pointer;

                                    span {
                                        color: #ce1e78;
                                    }
                                }

                                .export {
                                    cursor: pointer;

                                    span {
                                        color: #2baa8a;
                                    }
                                }
                            }
                        }

                        .el-tabs {
                            .el-tabs__header {
                                .el-tabs__nav {
                                    .el-tabs__item {
                                        font-size: 18px;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        margin: 0 10px;
                                        color: #8991B0;
                                    }

                                    .is-active {
                                        font-size: 18px;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #3B7AD1;
                                        margin: 0 10px;
                                    }
                                }
                            }

                            .el-table {
                                margin-bottom: 10px;

                                .el-table__body-wrapper {
                                    height: 38vh;
                                }

                                .el-table__row {
                                    .cell {
                                        .el-input {
                                            height: 24px;

                                            .el-input__inner {
                                                height: 24px;
                                            }
                                        }
                                    }
                                }

                                .indicitem {
                                    color: #409EFF;
                                    font-size: 12px;
                                    margin-right: 20px;
                                    cursor: pointer;

                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }
                    }
                }

                .el-dialog__footer {
                    .dialog-footer {
                        display: flex;
                        justify-content: center;

                        .el-button {
                            width: 180px !important;
                            height: 40px !important;
                        }
                    }
                }
            }
        }

    }
</style>