BusinessBenchmark/src/components/taskCenter/taskEvaluationAmendmentFrom.vue

<template>
    <div class="evaluationAmendmentFrom">
        <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="monthQuarterYear">
                    <el-tabs v-model="activeName" class="tableMain" @tab-click="handleClick">
                        <el-tab-pane v-for="it in stageData" :key="it.id" :label="it.stageName" :name="it.stageCode">
                            <div class="detailsHeader" v-if="tabName === 'first'">
                                <div class="headerRight">
                                    <div class="seachFor">
                                        <el-input v-model="compNameSa" placeholder="请输入单位名称"
                                            @keyup.enter="getTableData(addstageId)"></el-input>
                                    </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-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT"
                                :border="true" v-if="binSectionCode === 'QQ' && activeName ==='QQXM'">
                                <el-table-column type="index" label="排名" align="center"></el-table-column>
                                <el-table-column label="考评单位" prop="organizationShortName" width="300" />
                                <el-table-column label="发展绩效" align="center">
                                    <el-table-column label="新能源发展" align="center">
                                        <el-table-column label="核准(备案)目标容量" prop="XNYFZ_HZ" align="center">
                                            <template #default="scope">
                                                <el-input-number v-model="scope.row[XNYFZ_HZ]" :precision="2"
                                                    :step="0.1" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="投资决策目标容量" align="center">
                                            <el-table-column label="合计" prop="XNYFZ_HJ" align="center">
                                                <template #default="scope">
                                                    <el-input-number v-model="scope.row[XNYFZ_HJ]" :precision="2"
                                                        :step="0.1" />
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="已核准(备案)" prop="XNYFZ_YHZ" align="center">
                                                <template #default="scope">
                                                    <el-input-number v-model="scope.row[XNYFZ_YHZ]" :precision="2"
                                                        :step="0.1" />
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="待核准(备案)" align="center">
                                                <el-table-column label="已获取" prop="XNYFZ_YHQ" align="center">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row[XNYFZ_YHQ]" :precision="2"
                                                            :step="0.1" />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="待获取" prop="XNYFZ_DHQ" align="center">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row[XNYFZ_DHQ]" :precision="2"
                                                            :step="0.1" />
                                                    </template>
                                                </el-table-column>
                                            </el-table-column>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column label="常规能源发展" align="center">
                                        <el-table-column label="核准(备案)目标容量" prop="CGNYFZ_HZ" align="center">
                                            <template #default="scope">
                                                <el-input-number v-model="scope.row[CGNYFZ_HZ]" :precision="2"
                                                    :step="0.1" />
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="投资决策目标容量" align="center">
                                            <el-table-column label="已核准(备案)" prop="CGNYFZ_YHZ" align="center">
                                                <template #default="scope">
                                                    <el-input-number v-model="scope.row[CGNYFZ_YHZ]" :precision="2"
                                                        :step="0.1" />
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="待核准(备案)" prop="CGNYFZ_DHZ" align="center">
                                                <template #default="scope">
                                                    <el-input-number v-model="scope.row[CGNYFZ_DHZ]" :precision="2"
                                                        :step="0.1" />
                                                </template>
                                            </el-table-column>
                                        </el-table-column>
                                        <el-table-column label="火电水电项目阶段性工作目标" prop="CGNYFZ_JDGZ" align="center">
                                            <template #default="scope">
                                                <el-input v-model="scope.row[CGNYFZ_JDGZ]" :rows="2" type="textarea">
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table-column>
                                    <el-table-column label="战略新兴产业发展" prop="ZLXXCY_FZ" align="center">
                                        <template #default="scope">
                                            <el-input v-model="scope.row[ZLXXCY_FZ]" :rows="2" type="textarea">
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="投资计划" align="center">
                                        <el-table-column label="基建投资" prop="TZJH_JJTZ" align="center">
                                            <template #default="scope">
                                                <el-input v-model="scope.row[TZJH_JJTZ]" :rows="2" type="textarea">
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="非基建投资" prop="TZJH_FJJTZ" align="center">
                                            <template #default="scope">
                                                <el-input v-model="scope.row[TZJH_FJJTZ]" :rows="2" type="textarea">
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                            <el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT"
                                :border="true" v-else>
                                <el-table-column type="index" label="排名" align="center"></el-table-column>
                                <el-table-column label="考评单位" prop="organizationShortName" width="300" />
                                <el-table-column v-for="(it, index) in monthQuarterYearHeader" :key="index"
                                    :label="it.name" align="center">
                                    <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.key"
                                        align="center" width="150" sortable
                                        :sort-method="(a,b)=>sortMethods(a,b,iv.code)">
                                        <template #default="scope">
                                            <el-select v-model="scope.row[iv.code]" placeholder="请选择审核状态"
                                                v-if="scope.row['IS_LH_'+iv.code] === '3'">
                                                <el-option v-for="item in statusData" :key="item.id" :label="item.name"
                                                    :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <el-input v-model="scope.row[iv.code]"
                                                v-else-if="scope.row['IS_LH_'+iv.code] === '2'"></el-input>
                                            <el-input-number v-model="scope.row[iv.code]" :precision="2" :step="0.1"
                                                v-else />
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="tableSeach">
                        <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
                            :class="item.showClick? 'seachTypeCha':''" @click="changType(item)">
                            <img :src="item.img" alt="" v-if="!item.showClick">
                            <img :src="item.clickImg" alt="" v-else>
                            <p :style="item.showClick? 'color: #3B7AD1' : ''">{{item.isName}}</p>
                        </div>
                    </div>
                </div>
                <div v-if="tabName === 'first'">
                    <p class="starttitleSty">审批意见：</p>
                    <el-input v-model="descMsg" :rows="3" type="textarea" placeholder="请输入审批意见"></el-input>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer" v-if="tabName === 'first'">
                    <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"></import-dailog>
    </div>
</template>

<script>
    import importDailog from '../importPage/importDailog.vue'
    import {
        apiGetgetevaluationrevisiondetails,
        apiGetbinsectionList,
        apiGetbinstageList,
        apiGetExportMsg,
        apiPostupdateevaluationrevisionInfo,
        apiPostorganizationUpdateAddEvaluationInfo,
        apiGetHeaderdetailsHead,
        apiPostIsdoAction
    } from '../../api/api'
    import * as XLSX from 'xlsx'
    import {
        saveAs
    } from 'file-saver'
    import * as XLSXD from 'xlsx-js-style'

    import sectionDef from '../../assets/benchmarkImg/sectionDef.png'

    import sectionCha from '../../assets/benchmarkImg/sectionCha.png'

    import addIcon from '../../assets/btnIcon/add.png'
    import saveIcon from '../../assets/btnIcon/save.png'
    import exportIcon from '../../assets/btnIcon/export.png'
    import importIcon from '../../assets/btnIcon/import.png'

    export default {
        components: {
            importDailog
        },
        data() {
            return {
                dialogVisible: false,
                revisionVisible: false,
                revisionData: [],
                activeName: '',
                monthQuarterYearData: [],
                monthQuarterYearHeader: [],
                isClickTagId: '',
                compNameSa: '',
                descMsg: '',
                receiptMsg: {
                    code: '',
                    des: '',
                    stage: '',
                    createName: '',
                    createDate: '',
                    type: '',
                    year: '',
                    recStage: ''
                },
                rowMsg: {},
                moduleData: [],
                stageData: [],
                titleMsgArr: [],
                statusData: [],
                binSectionStr: '',
                binSectionCode: '',
                addIcon: addIcon,
                saveIcon: saveIcon,
                exportIcon: exportIcon,
                importIcon: importIcon,
                addstageId: '',
                instanceChild: {},
                rowkeyId: '',
                userMes: {},
                tabName: ''
            }
        },
        created() {
            this.statusData = [{
                    name: '已确认',
                    id: '1'
                },
                {
                    name: '待确认',
                    id: '0'
                },
                {
                    name: '不合格',
                    id: '-1'
                }
            ]
        },
        methods: {
            init(row, keyId, allData, tabVal) {
                this.dialogVisible = true
                this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
                this.getevalHeaderDetails(keyId)
                this.getModelData()
                this.rowMsg = row
                this.rowkeyId = keyId
                this.instanceChild = allData
                this.tabName = tabVal
            },
            //获取头部详情
            getevalHeaderDetails(id) {
                let that = this
                let params = {
                    id: id
                }
                apiGetHeaderdetailsHead(params).then(datas => {
                    if (datas && datas.data) {
                        let item = datas.data
                        that.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.year,
                            recStage: '有效'
                        }
                    }
                })
            },
            sortMethods(a, b, it) {
                if (a[it] < b[it]) {
                    return -1
                }
            },
            // 获取业务属性
            getModelData() {
                let that = this
                that.titleMsgArr = []
                let params = {
                    type: '3'
                }
                apiGetbinsectionList(params).then(datas => {
                    if (datas && datas.data) {
                        that.moduleData = datas.data
                        that.moduleData.forEach(item => {
                            let obj = {
                                id: item.id,
                                isName: item.sectionName === '新能源(光电)' ? '新能源光电' : item
                                    .sectionName === '新能源(风电)' ? '新能源风电' : item.sectionName,
                                isNameEn: item.sectionCode,
                                showClick: false,
                                isClass: 'sectionDef',
                                img: sectionDef,
                                isClassC: 'sectionCha',
                                clickImg: sectionCha
                            }
                            that.titleMsgArr.push(obj)
                        })
                        that.titleMsgArr[0].showClick = true
                        that.binSectionStr = that.titleMsgArr[0].id
                        that.binSectionCode = that.titleMsgArr[0].isNameEn
                        that.getStageData()
                    }
                })
            },
            //根据业务属性获取业务阶段
            getStageData() {
                let that = this
                let params = {
                    type: '2'
                }
                apiGetbinstageList(params).then(datas => {
                    if (datas && datas.data) {
                        that.stageData = datas.data
                        that.activeName = datas.data[0].stageCode
                        that.addstageId = datas.data[0].id
                        that.getTableData(datas.data[0].id)
                    }
                })
            },
            handleClick(val) {
                let stageId = ''
                this.activeName = val.props.name
                console.log('activeName', this.activeName)
                this.stageData.forEach(it => {
                    if (it.stageCode === val.props.name) {
                        stageId = it.id
                        this.addstageId = it.id
                    }
                })
                this.getTableData(stageId)
            },
            //获取表格数据
            getTableData(id) {
                let that = this
                let params = {
                    reviseId: that.rowkeyId,
                    binSection: that.binSectionStr,
                    binStage: id,
                    organizationShortName: that.compNameSa
                }
                apiGetgetevaluationrevisiondetails(params).then(datas => {
                    if (datas && datas.data) {
                        if (datas.data.title) {
                            let header = []
                            for (let i in datas.data.title) {
                                let obj = {
                                    name: i,
                                    children: datas.data.title[i]
                                }
                                header.push(obj)
                            }
                            that.monthQuarterYearHeader = header
                        }
                        that.monthQuarterYearData = datas.data.value
                    }
                })
            },
            changType(data) {
                this.titleMsgArr.forEach(it => {
                    it.showClick = false
                    if (it.isName === data.isName) {
                        it.showClick = true
                        this.binSectionStr = it.id
                        this.binSectionCode = data.isNameEn
                    }
                })
                let stageId = ''
                this.stageData.forEach(it => {
                    if (it.stageCode === this.activeName) {
                        stageId = it.id
                    }
                })
                this.getTableData(stageId)
            },
            addTableDetail() {
                console.log('表头数据11====>>>>>>>', this.monthQuarterYearHeader)
                if (this.monthQuarterYearHeader.length > 0) {
                    let headerArr = []
                    this.monthQuarterYearHeader.forEach(item => {
                        headerArr = headerArr.concat(item.children)
                    })

                    console.log('表头数据22====>>>>>>>', headerArr)
                    this.addstageId = ''
                    this.stageData.forEach(it => {
                        if (it.stageCode === this.activeName) {
                            this.addstageId = it.id
                        }
                    })

                    let obj = {
                        isAdd: true,

                    }
                    headerArr.forEach(it => {
                        obj[it.code] = ''
                        obj['IS_LH_' + it.code] = it.flag
                    })
                    this.monthQuarterYearData.unshift(obj)
                }
                console.log('表格数据====>>>>>>>', this.monthQuarterYearData)
            },
            saveAddDetail() {
                let that = this
                let addParams = []
                let saveParams = []
                let addObj = {
                    organizationId: that.userMes.unitId,
                    // organizationId: "23079300",
                    organizationEvaluationId: that.rowkeyId,
                    indicatorId: that.isClickTagId,
                    binSection: that.binSectionStr,
                    binStage: that.addstageId,
                    optionMap: {}
                }
                that.monthQuarterYearData.forEach(it => {
                    if (it.isAdd) {
                        addObj.optionMap = it
                        addParams.push(addObj)
                    } else {
                        saveParams.push(it)
                    }
                })
                if (addParams.length > 0) {
                    apiPostorganizationUpdateAddEvaluationInfo(addParams).then(datas => {
                        if (datas) {
                            that.responseData(datas)
                        }
                    })
                }
                if (saveParams.length > 0) {
                    apiPostupdateevaluationrevisionInfo(saveParams).then(datas => {
                        if (datas) {
                            that.responseData(datas)
                        }
                    })
                }
            },
            // 返回数据
            responseData(datas) {
                if (datas.message === '成功') {
                    this.$message({
                        message: '考评目标详情信息保存成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: datas.message,
                        type: 'error'
                    });
                }
                this.getTableData(this.addstageId)
            },
            saveDetail() {
                let that = this
                apiPostupdateevaluationrevisionInfo(that.monthQuarterYearData).then(datas => {
                    if (datas) {
                        if (datas.message === '成功') {
                            that.$message({
                                message: '考评目标详情信息保存成功',
                                type: 'success'
                            });
                        } else {
                            that.$message({
                                message: datas.message,
                                type: 'error'
                            });
                        }
                        that.getTableData(that.addstageId)
                    }
                })
            },
            handleImport() {
                this.$refs.importPage.upload.title = "考评目标详情信息导入"
                this.$refs.importPage.upload.open = true
                this.$refs.importPage.upload.url = '/evaluation-revision/import-excel'
            },
            successImport(val) {
                this.getTableData(this.addstageId)
            },
            handleExport() {
                let that = this
                let url = 'evaluation-revision/download-excel'
                let params = {
                    reviseId: that.rowkeyId,
                    binSection: that.binSectionStr,
                    binStage: that.addstageId
                }
                apiGetExportMsg(url, params).then(datas => {
                    let blob = new Blob([datas])
                    saveAs(blob, '考评目标详情数据导出.xlsx')
                }).catch((r) => {
                    console.error(r)
                })
            },
            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
                }
                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'
                            })
                        }
                    }
                })
            },
        }
    }
</script>

<style lang="less">
    .evaluationAmendmentFrom {
        .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%;
                        }

                        .monthQuarterYear {
                            display: flex;
                            width: 100%;
                            margin-top: 20px;

                            .tableMain {
                                width: calc(100% - 100px);

                                .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;
                                        }
                                    }
                                }

                                .detailsHeader {
                                    width: 100%;
                                    display: flex;

                                    .headerRight {
                                        display: flex;
                                        justify-content: end;
                                        width: 100%;
                                        margin-bottom: 5px;

                                        .seachFor {
                                            display: flex;

                                            .el-input {
                                                height: 30px;

                                                .el-input__inner {
                                                    height: 30px;
                                                }

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

                                            .el-icon {
                                                margin: 5px 10px 0 10px;
                                                cursor: pointer;
                                            }
                                        }

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

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

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

                                        .add {
                                            cursor: pointer;

                                            span {
                                                color: #3B7AD1;
                                            }
                                        }

                                        .save {
                                            cursor: pointer;

                                            span {
                                                color: #50C14E;
                                            }
                                        }

                                        .import {
                                            cursor: pointer;

                                            span {
                                                color: #ce1e78;
                                            }
                                        }

                                        .export {
                                            cursor: pointer;

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

                                .el-table {
                                    .el-table__header-wrapper {
                                        .el-table__header {
                                            .el-table__cell {
                                                border-bottom: none !important;
                                            }

                                            thead {
                                                tr {
                                                    th {
                                                        .cell {
                                                            line-height: 16px;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    .el-table__body-wrapper {
                                        height: 47vh !important;

                                        .el-scrollbar {
                                            .el-table__body {
                                                tr {
                                                    td {
                                                        padding: 0;

                                                        .cell {
                                                            background: #F6F7FA;
                                                            line-height: 47px;
                                                            height: 47px;
                                                        }
                                                    }

                                                    td:hover {
                                                        line-height: 45px;
                                                        height: 45px;
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    .el-table--border .el-table__cell {
                                        border: none;
                                    }

                                    .el-table thead.is-group th.el-table__cell {
                                        background: transparent;
                                    }

                                    .tooltipCC {
                                        width: 180px;
                                        display: inline-block;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                }

                                .el-pagination {
                                    margin-top: 20px;
                                    text-align: end;
                                    position: relative;
                                }
                            }

                            .tableSeach {
                                width: 88px;
                                height: 63vh;
                                margin-left: 10px;
                                margin-top: 37px;
                                border: 1px solid #D6DBEA;
                                padding: 5px 0;
                                border-radius: 5px;
                                overflow-y: auto;

                                .seachType {
                                    width: 78px;
                                    height: 78px;
                                    cursor: pointer;
                                    border-left: 3px solid transparent;

                                    img {
                                        margin-top: 17px;
                                        margin-left: 27px;
                                    }

                                    p {
                                        text-align: center;
                                        font-size: 14px;
                                    }
                                }

                                .seachTypeCha {
                                    background: #E6EBF5;
                                    cursor: pointer;
                                    border-left: 3px solid #3B7AD1;
                                }
                            }
                        }
                    }

                    .periodFrom {
                        margin-top: 15px;

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

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

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

    }
</style>