BusinessBenchmark/src/components/taskCenter/taskEvaluationStart.vue

<template>
    <div class="evaluationStartNFrom">
        <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">
                                <div class="headerRight">
                                    <div class="seachFor">
                                        <el-input v-model="compNameSa" placeholder="请输入单位名称"
                                            @keyup.enter="getTableData(addstageId)"></el-input>
                                        <!-- <el-icon :size="20" color="#3B7AD1" @click="getTableData(isClickTagId)"><Search /></el-icon> -->
                                    </div>
                                    <!-- <div class="tableBtn add" @click="addTableDetail"
                                     v-if="activeName === 'ZDZX' || activeName === 'GLSX'">
                                        <img :src="addIcon" alt="">
                                        <span>新增</span>
                                    </div>
                                    <div class="tableBtn save" @click="saveAddDetail"
                                    v-if="activeName === 'ZDZX' || activeName === 'GLSX'">
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div> -->
                                    <div class="tableBtn save" @click="saveDetail" v-if="tabName === 'first'">
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div>
                                    <div class="tableBtn import" @click="handleImport" v-if="tabName === 'first'">
                                        <img :src="importIcon" alt="">
                                        <span>导入</span>
                                    </div>
                                    <div class="tableBtn export" @click="handleExport" v-if="tabName === 'first'">
                                        <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="核准(备案)目标容量" align="center" width="180">
                                            <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="合计" align="center" width="180">
                                                <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="已核准(备案)" align="center" width="180">
                                                <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="已获取" align="center" width="180">
                                                    <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="待获取" align="center" width="180">
                                                    <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="核准(备案)目标容量" align="center" width="180">
                                            <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="已核准(备案)" align="center" width="180">
                                                <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="待核准(备案)" align="center" width="180">
                                                <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="火电水电项目阶段性工作目标" align="center" width="220">
                                            <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="战略新兴产业发展" align="center" width="220">
                                        <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="基建投资" align="center" width="220">
                                            <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="非基建投资" align="center" width="220">
                                            <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">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                </span>
            </template> -->
            <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 {
        apiGetgetResponsibilityInfoList,
        apiGetbinsectionList,
        apiGetbinstageList,
        apiGetExportMsg,
        apiPostIsdoAction,
        apiPostupdateResponsibilityInfo,
        apiGetHeaderDeptResponsibility
    } 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,
                activeName: '',
                monthQuarterYearData: [],
                monthQuarterYearHeader: [],
                isClickTagId: '',
                compNameSa: '',
                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: {},
                tastbizKey: '',
                taskDefKey: '',
                descMsg: '',
                tabName: ''
            }
        },
        created() {
            this.statusData = [{
                    name: '已确认',
                    id: '1'
                },
                {
                    name: '待确认',
                    id: '0'
                },
                {
                    name: '不合格',
                    id: '-1'
                }
            ]
        },
        methods: {
            init(row, allData, tabVal) {
                this.dialogVisible = true
                this.instanceChild = allData
                this.tastbizKey = allData.bizKey
                this.taskDefKey = allData.defKey
                this.getevalHeaderDetails(this.tastbizKey, this.taskDefKey)
                this.getModelData(this.taskDefKey)
                this.rowMsg = row
                this.tabName = tabVal
            },
            sortMethods(a, b, it) {
                if (a[it] < b[it]) {
                    return -1
                }
            },
            //获取头部详情
            getevalHeaderDetails(id) {
                let that = this
                let params = {
                    id: id
                }
                apiGetHeaderDeptResponsibility(params).then(datas => {
                    that.getDataMsg(datas)
                })
            },
            getDataMsg(datas) {
                if (datas && datas.data) {
                    let item = datas.data
                    this.receiptMsg = {
                        code: item.responsibilityCode,
                        des: item.des,
                        stage: item.stage,
                        createName: item.createName,
                        createDate: item.createTime,
                        type: item.checkCycle === 'YDKP' ? '月度考评' : item.checkCycle === 'JDKP' ? '季度考评' : '年度考评',
                        year: item.year,
                        recStage: '有效'
                    }
                }
            },
            // 获取业务属性
            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) {
                this.titleMsgArr.forEach(it =>{
                    it.showClick = false
                    if (val.props.name === 'QQXM') {
                        if (it.isNameEn === 'QQ') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    } else if (val.props.name === 'JJXM') {
                        if (it.isNameEn === 'JJ') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    } else if (val.props.name === 'GLSX') {
                        if (it.isNameEn === 'GLSX') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    } else if (val.props.name === 'ZDZX') {
                        if (it.isNameEn === 'ZDZX') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    } else if (val.props.name === 'KJCX') {
                        if (it.isNameEn === 'KJCX') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    } else {
                        if (it.isNameEn === 'HD') {
                            it.showClick = true
                            this.binSectionStr = it.id
                        }
                    }
                })
                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 = {
                    responsibilityId: that.tastbizKey,
                    binSection: that.binSectionStr,
                    binStage: id,
                    organizationShortName: that.compNameSa
                }
                apiGetgetResponsibilityInfoList(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)
            },
            saveDetail() {
                let that = this
                apiPostupdateResponsibilityInfo(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 = '/responsibility-indicator-info/import-excel'
            },
            successImport(val) {
                that.getTableData(that.addstageId)
            },
            handleExport() {
                let that = this
                let url = 'responsibility-indicator-info/download-excel'
                let params = {
                    responsibilityId: that.tastbizKey,
                    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">
    .evaluationStartNFrom {
        .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: 5%;
                                            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: 35vh !important;

                                        .el-scrollbar {
                                            .is-horizontal {
                                                .el-scrollbar__thumb {
                                                    // width: 100% !important;
                                                }
                                            }

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

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

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

    }
</style>