BusinessBenchmark/src/components/assessment/evaluationStartFrom.vue

<template>
    <div class="startFrom">
        <el-dialog title="考评启动详情" v-model="dialogVisible" width="80vw" :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.creator}}</span>
                        </div>
                        <div class="danjuMsg_data">
                            <span class="data_tit">单据状态:</span>
                            <span>{{receiptMsg.recStage}}</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="detaTableBtns">
                    <!-- <div class="tableBtn add">
                        <img :src="addIcon" alt="">
                        <span>新增</span>
                    </div> -->
                    <div class="tableBtn save" @click="saveDetail" v-if="$utils.havePurview('evalStart: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>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="考评指标项内容" name="first">
                        <el-table :data="quantifiedList" 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="organizationName" width="300" />
                            <el-table-column label="填报部门"  prop="deptName" width="260" />
                            <el-table-column label="指标分类" prop="typeName" />
                            <!-- <el-table-column label="指标项" prop="optionName" /> -->
                            <el-table-column label="计划值">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.quantifiedValue" :precision="2" :step="0.1" :min="1" />
                                </template>
                            </el-table-column>
                            <el-table-column label="单位" prop="unit" />
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="考评评测性指标内容" name="second">
                        <el-table :data="nonQuantifiedList" style="width: 100%">
                            <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="organizationName" width="300" />
                            <el-table-column label="填报部门" prop="deptName" width="260" />                                
                            <el-table-column label="指标分类" prop="typeName" />
                            <!-- <el-table-column label="指标项" prop="optionName" /> -->
                            <el-table-column label="计划值">
                                <template #default="scope">
                                    <el-input v-model="scope.row.nonQuantifiedValue" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </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>
    </div>
</template>

<script>
import {apiGetdeptresponDetail,apiGetindicatorsaveBatchDto} from '../../api/api'
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'
export default {
    data() {
        return {
            dialogVisible: false,
            activeName: 'first',
            quantifiedList: [],
            nonQuantifiedList: [],
            changeDateSelect: [],
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                creator: '',
                createDate: '',
                type: '',
                year: '',
                recStage: ''
            },
            addIcon: addIcon,
            saveIcon: saveIcon,
            editIcon: editIcon,
            deleteIcon: deleteIcon,
            rowMsg: {}
        }
    },
    created() {
    },
    methods: {
        init(row) {
            this.dialogVisible = true
            this.activeName = 'first'
            this.receiptMsg = {
                code: row.responsibilityCode,
                des: row.des,
                stage: row.stage,
                creator: row.createBy,
                createDate: row.createTime,
                type: row.checkCycle === 'YDKP'?'月度考评':row.checkCycle === 'JDKP'?'季度考评':'年度考评',
                year: row.year,
                recStage: '有效'
            }
            this.getDetails(row.id)
            this.rowMsg = row
        },
        handleClick() {
            this.changeDateSelect = []
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        //获取详情
        getDetails(id) {
            let that = this
            let params = {
                deptResponsibilityIds: id
            }
            apiGetdeptresponDetail(params).then(datas =>{
                if (datas && datas.data) {
                    that.quantifiedList = datas.data.quantifiedList
                    that.nonQuantifiedList = datas.data.nonQuantifiedList
                }
            })
        },
        saveDetail() {
            let that = this
            let params = []
            if (that.activeName === 'first') {
                that.quantifiedList.forEach(item =>{
                    let obj = {
                        id: item.id,
                        isQuantified: '是',
                        quantifiedValue: item.quantifiedValue
                    }
                    params.push(obj)
                })
            } else {
                that.nonQuantifiedList.forEach(item =>{
                    let obj = {
                        id: item.id,
                        isQuantified: '否',
                        nonQuantifiedValue: item.nonQuantifiedValue
                    }
                    params.push(obj)
                })
            }
            apiGetindicatorsaveBatchDto(params).then(datas =>{
                if (datas && datas.success) {
                    that.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    that.getDetails(that.rowMsg.id)
                }
            })
        }
    }
}
</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%;
                    }
                    .detaTableBtns{
                        display: flex;
                        width: 500px;
                        position: relative;
                        top: 32px;
                        left: 90vw;
                        z-index: 11111;
                        .tableBtn {
                            display: flex;
                            margin-right: 30px;
                            img{
                                margin-right: 5px;
                                margin-top: 1px;
                            }
                            span{
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                            }
                        }
                        .add{
                            cursor: no-drop;
                            span{
                                color: #3B7AD1;
                            }
                        }
                        .save{
                            cursor: pointer;
                            span{
                                color: #50C14E;
                            }
                        }
                        .edit{
                            span{
                                color: #F5A623;
                            }
                        }
                        .delete{
                            cursor: no-drop;
                            span{
                                color: #F65177;
                            }
                        }
                    }
                    .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{
                            .el-table__body-wrapper{
                                height: 55vh;
                            }
                            .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>