BusinessBenchmark/src/components/assessment/monthQuarterFrom.vue

<template>
    <div class="startFrom">
        <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="btnASeach">
                    <div class="seachFor">
                        <el-select v-model="moduleNameSa" placeholder="请选择业务属性">
                            <el-option
                            v-for="item in moduleData"
                            :key="item.id"
                            :label="item.sectionName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                        <el-input v-model="compNameSa" placeholder="请输入单位名称"></el-input>
                        <el-input v-model="deptNameSa" placeholder="请输入填报部门"></el-input>
                        <el-input v-model="evalNameSa" placeholder="请输入指标名称"></el-input>
                        <el-icon :size="20" color="#3B7AD1" @click="seachDeptAEval"><Search /></el-icon>
                        <el-icon :size="20" color="#3B7AD1" @click="clearDeptAEval"><CircleClose /></el-icon>
                    </div>
                    <div class="dateTableBtns">
                         <!--  -->
                        <div class="tableBtn add" @click="addTableDetail" v-if="activeName === 'second'">
                            <img :src="addIcon" alt="">
                            <span>新增</span>
                        </div>
                         <!-- v-if="$utils.havePurview('monthQuarter:twoLevel:save')" -->
                        <div class="tableBtn save" @click="saveDetail" v-if="$utils.havePurview('monthQuarter:twoLevel:save')">
                            <img :src="saveIcon" alt="">
                            <span>保存</span>
                        </div>
                        <!-- <div class="tableBtn edit">
                            <img :src="editIcon" alt="">
                            <span>新增</span>
                        </div> -->
                        <!-- <div class="tableBtn delete">
                            <img :src="deleteIcon" 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)" ref="table" style="width: 100%" @select="rowClick" @select-all="rowClick">
                            <el-table-column type="selection" label="操作" align="center"></el-table-column>
                            <el-table-column type="index" label="序号" width="80" />
                            <el-table-column label="业务阶段" prop="stageName" />
                            <el-table-column label="业务属性" prop="sectionName" />
                            <el-table-column label="单位名称" prop="organizationShortName" width="300" />
                            <el-table-column label="填报部门"  prop="deptName" width="260" />
                            <el-table-column label="指标分类" prop="typeName" />
                            <el-table-column label="指标名称" prop="childName" />
                            <el-table-column label="指标项" prop="optionName" />
                            <el-table-column label="值" width="150">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.quantifiedValue"
                                     :precision="2" :step="0.1" :min="0" :disabled="!scope.row.updateMark" />
                                </template>
                            </el-table-column>
                            <el-table-column label="单位" prop="unit" />
                            <el-table-column label="审核状态">
                                <template #default="scope">
                                    <el-select v-model="scope.row.state" placeholder="请选择审核状态" :disabled="!scope.row.updateMark">
                                        <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>
                        <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-tab-pane label="考评评价指标内容" name="second">
                        <el-table :data="nonQuantifiedList.slice((pageRight.currentPage-1)*pageRight.pagesize, pageRight.currentPage*pageRight.pagesize)" style="width: 100%">
                            <el-table-column type="index" label="序号" width="80" />
                            <el-table-column label="单位名称" prop="organizationShortName" width="300">
                                <template #default="scope">
                                    <el-select v-model="scope.row.organizationShortName" placeholder="请选择单位名称"
                                    :disabled="!scope.row.showInput"
                                     @change="changeOrgZa">
                                        <el-option
                                        v-for="item in orgruleData"
                                        :key="item.id"
                                        :label="item.shortName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="指标分类" prop="typeName">
                                <template #default="scope">
                                    <el-select v-model="scope.row.typeName" :disabled="!scope.row.showInput" placeholder="请选择指标分类">
                                        <el-option
                                        v-for="item in indicatorTypeData"
                                        :key="item.id"
                                        :label="item.typeName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="业务阶段" prop="stageName">
                                <template #default="scope">
                                    <el-select v-model="scope.row.stageName" placeholder="请选择业务阶段"
                                    :disabled="!scope.row.showInput"
                                     @change="(val)=>changeIndic(val, scope.row)">
                                        <el-option
                                        v-for="item in stageData"
                                        :key="item.id"
                                        :label="item.stageName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="业务属性" prop="sectionName">
                                <template #default="scope">
                                    <el-select v-model="scope.row.sectionName" placeholder="请选择业务阶段"
                                    :disabled="!scope.row.showInput"
                                     @change="(val)=>changeIndic(val, scope.row)">
                                        <el-option
                                        v-for="item in sectionNameArr"
                                        :key="item.id"
                                        :label="item.secName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="指标名称" prop="childName">
                                <template #default="scope">
                                    <el-select v-model="scope.row.childName" placeholder="请选择指标名称"
                                    :disabled="!scope.row.showInput"
                                     @change="changeDept">
                                        <el-option
                                        v-for="item in indicItemoptions"
                                        :key="item.id"
                                        :label="item.indicatorName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="填报部门" prop="deptName" width="260">
                                <template #default="scope">
                                    <el-select v-model="scope.row.deptName" placeholder="请选择填报部门" :disabled="!scope.row.showInput">
                                        <el-option
                                        v-for="item in deptNameArr"
                                        :key="item.id"
                                        :label="item.deptName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="指标项" prop="optionName">
                                <template #default="scope">
                                    <el-input v-model="scope.row.optionName" disabled />
                                </template>
                            </el-table-column>
                            <el-table-column label="值">
                                <template #default="scope">
                                    <el-input v-model="scope.row.nonQuantifiedValue" :disabled="!scope.row.updateMark" />
                                </template>
                            </el-table-column>
                            <el-table-column label="审核状态">
                                <template #default="scope">
                                    <el-select v-model="scope.row.state" placeholder="请选择审核状态" :disabled="!scope.row.updateMark">
                                        <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>
                        <el-pagination
                            @current-change="handleCurrentChangeRight"
                            :current-page="pageRight.currentPage"
                            :page-size="pageRight.pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total="pageRight.total">
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
                
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import {apiGetOrgEvalInfoList,apiGetOrgEvaInfoBatchDto, apiGetOrganizationRule, apiGetbinsectionList,
apiGetindicatorListAll, apiGetbinstageList, apiGetIndicatorTypeList} 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 {
            dialogVisible: false,
            activeName: 'first',
            quantifiedList: [],
            nonQuantifiedList: [],
            changeDateSelect: [],
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                createName: '',
                createDate: '',
                type: '',
                year: '',
                recStage: ''
            },
            addIcon: addIcon,
            saveIcon: saveIcon,
            editIcon: editIcon,
            deleteIcon: deleteIcon,
            exportIcon: exportIcon,
            importIcon: importIcon,
            rowMsg: {},
            statusData: [],
            pageLeft:{
                pagesize: 15,
                currentPage: 1,
                total: 0
            },
            pageRight:{
                pagesize: 15,
                currentPage: 1,
                total: 0
            },
            moduleData: [],
            moduleNameSa: '',
            compNameSa: '',
            deptNameSa: '',
            evalNameSa: ''
        }
    },
    created() {
        this.statusData = [
            {
                name: '已完成',
                id: '1'
            },
            {
                name: '待审核',
                id: '0'
            },
            {
                name: '未开始',
                id: '-1'
            }
        ]
    },
    methods: {
        init(row) {
            this.dialogVisible = true
            this.activeName = 'first'
            this.receiptMsg = {
                code: row.organizationEvaluationCode,
                des: row.des,
                stage: row.stage,
                createName: row.createName,
                createDate: row.createTime,
                type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
                year: row.year,
                recStage: '有效'
            }
            this.getDetails(row.id, '是')
            this.getModelData()
            this.getOrgRule(row)
            this.getindList()
            this.rowMsg = row
        },
        // 获取业务属性
        getModelData() {
            let that = this
            apiGetbinsectionList().then(datas =>{
                if (datas && datas.data) {
                    that.moduleData = datas.data
                }
            })
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        handleCurrentChangeLeft(val) {
            this.pageLeft.currentPage = val
        },
        handleCurrentChangeRight(val) {
            this.pageRight.currentPage = val
        },
        //获取详情
        getDetails(id, isevl) {
            let that = this
            let params = {
                organizationEvaluationId: id,
                isQuantified: isevl,
                binSection: that.moduleNameSa,
                organizationShortName: that.compNameSa,
                dept: that.deptNameSa,
                indicatorName: that.evalNameSa
            }
            apiGetOrgEvalInfoList(params).then(datas =>{
                if (datas && datas.data) {
                    if (isevl === '是') {
                        that.quantifiedList = datas.data
                        that.pageLeft.total = datas.data.length
                    } else {
                        that.nonQuantifiedList = datas.data
                        that.pageRight.total = datas.data.length
                    }
                }
            })
        },
        seachDeptAEval() {
            if (this.activeName = 'first') {
                this.pageLeft = {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                }
                this.getDetails(this.rowMsg.id, '是')
            } else {
                this.pageRight = {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                }
                this.getDetails(this.rowMsg.id, '否')
            }
        },
        clearDeptAEval() {
            this.moduleNameSa = ''
            this.compNameSa = ''
            this.deptNameSa = ''
            this.evalNameSa = ''
            this.seachDeptAEval()
        },
        handleClick(val) {
            this.changeDateSelect = []
            this.compNameSa = ''
            this.deptNameSa = ''
            this.evalNameSa = ''
            this.moduleNameSa = ''
            if (val.props.name === 'first') {
                this.quantifiedList = []
                this.pageLeft = {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                }
                this.getDetails(this.rowMsg.id, '是')
            } else {
                this.nonQuantifiedList = []
                this.pageRight = {
                    pagesize: 15,
                    currentPage: 1,
                    total: 0
                }
                this.getDetails(this.rowMsg.id, '否')
            }
        },
        // 考评评价指标内容
        getOrgRule(row) {
            let that = this
            let params = {
                id: row.id,
                type: 'kp'
            }
            apiGetOrganizationRule(params).then(datas =>{
                if (datas && datas.data) {
                    that.orgruleData = datas.data
                }
            })
        },
        getindList() {
            let that = this
            let params = {
                type: 2
            }
            apiGetbinstageList(params).then(datas =>{
                if (datas && datas.data) {
                    that.stageData = datas.data
                }
            })
            apiGetIndicatorTypeList(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicatorTypeData = datas.data
                }
            })
        },
        getIndListAll(row) {
            let that = this
            let params = {
                binSection: row.sectionName,
                binStage: row.stageName
            }
            apiGetindicatorListAll(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicItemoptions = datas.data
                }
            })
        },
        changeIndic(val, row) {
            if (row.stageName !== '' && row.sectionName !== '') {
                row.childName = ''
                this.getIndListAll(row)
            }
        },
        changeOrgZa(val) {
            this.sectionNameArr = []
            this.orgruleData.forEach(item =>{
                if (item.id === val) {
                    let obj = {
                        id: item.binSection,
                        secName: item.binSectionName
                    }
                    this.sectionNameArr.push(obj)
                }
            })
        },
        changeDept(val) {
            this.deptNameArr = []
            this.indicItemoptions.forEach(item =>{
                if (item.id === val) {
                    let obj = {
                        id: item.dept,
                        deptName: item.deptName
                    }
                    this.deptNameArr.push(obj)
                }
            })
        },
        addTableDetail() {
            let obj = {
                showInput: true,
                stageName: '',
                sectionName: '',
                organizationName: '',
                deptName: '',
                typeName: '',
                optionName: '',
                nonQuantifiedValue: ''
            }
            this.nonQuantifiedList.unshift(obj)
        },
        saveDetail() {
            let that = this
            let params = []
            if (that.activeName === 'first') {
                that.quantifiedList.forEach(item =>{
                    let obj = {
                        id: item.id,
                        isQuantified: '是',
                        quantifiedValue: item.quantifiedValue,
                        state: item.state
                    }
                    params.push(obj)
                })
            } else {
                that.nonQuantifiedList.forEach(item =>{
                    let obj = {
                        isQuantified: '否',
                        quantifiedValue: 0.0,
                        optionCode: 'ZRMB', // 指标项
                        nonQuantifiedValue: item.nonQuantifiedValue,
                        state: item.state,                        
                        organizationEvaluationId: that.rowMsg.id
                    }
                    if (item.showInput) {
                        obj.organizationEvaluationRuleId = item.organizationName //单位id
                        obj.indicatorId = item.childName //指标id
                        
                    } else {
                        obj.id = item.id
                        obj.organizationEvaluationRuleId = item.organizationEvaluationRuleId
                        obj.indicatorId = item.indicatorId
                    }
                    params.push(obj)
                })
            }
            apiGetOrgEvaInfoBatchDto(params).then(datas =>{
                if (datas) {
                    if (datas.success) {
                        that.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        that.getDetails(that.rowMsg.id)
                    } else {
                        that.$message({
                            message: datas.data,
                            type: 'error'
                        })
                    }
                }
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "单位信息导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = '/organization-evaluation-info/import'
        },
        successImport(val) {
            this.getDetails(this.rowMsg.id)
        },
        handleExport() {
            let data = []  //接口返回数据
            const workbook = new ExcelJS.Workbook()
            const worksheet = workbook.addWorksheet('Sheet1')
            //根据数据自己调整
            let colums = []
            colums = [
                { header: 'ID', key: 'id', width: 26 },
                { header: '单位名称', key: 'organizationShortName', width: 26 },
                { header: '指标分类', key: 'typeName', width: 18 },
                { header: '业务阶段', key: 'stageName', width: 18 },
                { header: '业务属性', key: 'sectionName', width: 18 },
                { header: '指标名称', key: 'childName', width: 18 },
                { header: '填报部门', key: 'deptName', width: 26 },
                { header: '指标项', key: 'optionName', width: 26 },
            ]
            if (this.activeName === 'first') {
                colums.push(
                    { header: '目标值', key: 'quantifiedValue', width: 18 },
                    { header: '单位', key: 'unit', width: 18 },
                    { header: '审核状态', key: 'state', width: 18 }
                )
                this.quantifiedList.forEach(item =>{
                    if (item.updateMark) {
                        data.push(item)
                    }
                })
            } else {
                colums.push(
                    { header: '值', key: 'nonQuantifiedValue', width: 18 },
                    { header: '审核状态', key: 'state', width: 18 }
                )
                this.nonQuantifiedList.forEach(item =>{
                    if (item.updateMark) {
                        data.push(item)
                    }
                })
            }
            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">
.startFrom{
    .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%;
                    }
                    .btnASeach{
                        display: flex;
                        z-index: 11111;
                        justify-content: end;
                        position: relative;
                        top: 32px;
                        left: 50vw;
                        width: 50%;
                        .seachFor{
                            display: flex;
                            .el-input, .el-select{
                                margin-right: 5px;
                            }
                            .el-icon{
                                margin: 5px 10px 0 10px;
                                cursor: pointer;
                            }
                        }
                        .dateTableBtns{
                            display: flex;
                            width: 360px;
                            margin-top: 5px;
                            .tableBtn {
                                display: flex;
                                height: 20px;
                                margin: 0 10px;
                                img{
                                    margin-right: 5px;
                                    margin-top: 1px;
                                }
                                span{
                                    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: 50vh;
                            }
                            .el-table__row{
                                .cell{
                                    .el-input{
                                        height: 24px;
                                        .el-input__inner{
                                            height: 24px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
    
}
</style>