BusinessBenchmark/src/components/assessment/monthQuarterYearFrom.vue

<template>
    <div class="monthQuarterYearFrom">
        <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="headerLeft">
                                    <el-tag v-for="tag in indicatorList" :key="tag.id" size="large" class="tagArr"
                                        effect="dark" :type="tag.id === isClickTagId ? '' : 'info'"
                                        @click="handleShowPage(tag)">
                                        <span>{{ tag.indicator_name }}</span>
                                    </el-tag>
                                </div>
                                <div class="headerRight">
                                    <div class="seachFor">
                                        <el-input v-model="compNameSa" placeholder="请输入单位名称"
                                            @keyup.enter="getTableData(isClickTagId)"></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') && indicatorList.length > 0 && receiptMsg.stage === '流程未启动'">
                                        <img :src="addIcon" alt="">
                                        <span>新增</span>
                                    </div>
                                    <div class="tableBtn save" @click="saveAddDetail"
                                    v-if="(activeName === 'ZDZX' || activeName === 'GLSX') && indicatorList.length > 0 && receiptMsg.stage === '流程未启动'">
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div> -->
                                    <!-- activeName !== 'ZDZX' && activeName !== 'GLSX' &&  -->
                                    <div class="tableBtn save" @click="saveDetail" v-if="receiptMsg.stage !== '流程已结束'">
                                        <img :src="saveIcon" alt="">
                                        <span>保存</span>
                                    </div>
                                    <div class="tableBtn import" @click="handleImport" v-if="receiptMsg.stage !== '流程已结束'">
                                        <img :src="importIcon" alt="">
                                        <span>导入</span>
                                    </div>
                                    <div class="tableBtn export" @click="handleExport">
                                        <img :src="exportIcon" alt="">
                                        <span>导出</span>
                                    </div>
                                    <div class="tableBtn calc" @click="calcScore" v-if="showCalcBtn">
                                        <img :src="calcIcon" alt="">
                                        <span>计算得分</span>
                                    </div>
                                </div>
                            </div>
                            <el-table :data="monthQuarterYearData" style="width: 100%" ref="monthQuarterYearTT"
                                :row-class-name="tableRowClassName" :border="true">
                                <el-table-column type="index" label="排名" align="center"></el-table-column>
                                <el-table-column label="考评单位" prop="organizationShortName" width="300">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.organizationShortName" placeholder="请选择考评单位">
                                            <el-option v-for="item in organizationData" :key="item.organizationId"
                                                :label="item.organizationShortName" :value="item.organizationId">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <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">
                                            <template v-if="!scope.row['operation']">
                                                <el-select v-model="scope.row[iv.code]" class="selectSty"
                                                    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]" class="inputSty"
                                                    v-else-if="scope.row['IS_LH_' + iv.code] === '2'"></el-input>
                                                <el-input-number v-model="scope.row[iv.code]" class="numberSty"
                                                    :precision="2" :step="0.1" v-else />
                                            </template>
                                            <template v-else>
                                                <el-select v-model="scope.row[iv.code]" class="selectSty"
                                                    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>
                                                <span class="indicitem" v-if="iv.code === 'operation'"
                                                    @click="changeDetail(scope.row)">详情</span>
                                                <span class="inputSty"
                                                    v-else-if="iv.code !== 'operation' && scope.row['IS_LH_' + iv.code] !== '3'">{{
                                                        scope.row[iv.code] }}</span>
                                            </template>
                                        </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>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog title="详情填报" v-model="detailVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="detailSeach">
                <div class="tableBtn add" @click="addTableDetailInfo">
                    <img :src="addIcon" alt="">
                    <span>新增</span>
                </div>
                <div class="tableBtn save" @click="saveAddDetailInfo">
                    <img :src="saveIcon" alt="">
                    <span>保存</span>
                </div>
            </div>
            <el-table :data="monthQuarterYearDetailData" style="width: 100%" ref="monthQuarterYearTT"
                :row-class-name="tableRowClassName" :border="true">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column label="部门名称" prop="deptName" align="center" width="200"></el-table-column>
                <el-table-column v-for="(it, index) in monthQuarterYearDetailHeader" :key="index" :label="it.name"
                    align="center">
                    <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.key" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row[iv.code]" class="inputSty"
                                v-if="scope.row['IS_LH_' + iv.code] === '2'"></el-input>
                            <el-input-number v-model="scope.row[iv.code]" class="numberSty" :precision="2" :step="0.1"
                                v-else-if="scope.row['IS_LH_' + iv.code] === '1'" />
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <span class="indicitem" @click="removeDetailData(scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import {
    apiGetEvaluationIndicatorList, apiGetgetEvaluationInfoDataList, apiGetbinsectionList, apiGetbinstageList, apiGetExportMsg,
    apiPostorganizationUpdateEvaluationInfo, apiPostorganizationUpdateAddEvaluationInfo, apiGetOrganizationListAll,
    apiGetorganizationevaluationcommoninfo, apiPostsaveEvaluationCommonInfo, apiPostremoveEvaluationCommonInfo, apiDialogCalcScore
} 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'
import calcIcon from '../../assets/btnIcon/edit.png'

export default {
    components: {
        importDailog
    },
    data() {
        return {
            dialogVisible: false,
            detailVisible: false,
            activeName: '',
            monthQuarterYearHeader: [],
            monthQuarterYearData: [],
            monthQuarterYearDetailData: [],
            monthQuarterYearDetailHeader: [],
            indicatorList: [],
            isClickTagId: '',
            compNameSa: '',
            receiptMsg: {
                code: '',
                des: '',
                stage: '',
                createName: '',
                createDate: '',
                type: '',
                year: '',
                recStage: ''
            },
            rowMsg: {},
            moduleData: [],
            stageData: [],
            titleMsgArr: [],
            organizationData: [],
            statusData: [],
            binSectionStr: '',
            addIcon: addIcon,
            saveIcon: saveIcon,
            exportIcon: exportIcon,
            importIcon: importIcon,
            calcIcon,
            addstageId: '',
            cycleType: '',
            userMes: {},
            detailMsg: {},
            showCalcBtn: false,
            showCalcBtnTabs: ["SCJY", "QQXM", "JJXM"],
            calcParms: {
                binStage: ""
            }
        }
    },
    created() {
        this.statusData = [
            {
                name: '已确认',
                id: '1'
            },
            {
                name: '待确认',
                id: '0'
            },
            {
                name: '不合格',
                id: '-1'
            }
        ]
    },
    methods: {
        init(row, type) {
            this.dialogVisible = true
            this.receiptMsg = {
                code: row.organizationEvaluationCode,
                des: row.des,
                stage: row.stage,
                createName: row.createName,
                createDate: row.createTime,
                type: row.checkCycle === 'YDKP' ? '月度考评' : row.checkCycle === 'JDKP' ? '季度考评' : '年度考评',
                year: row.year,
                recStage: '有效'
            }
            this.userMes = JSON.parse(window.sessionStorage.getItem('user'))
            this.cycleType = type
            this.getModelData(type)
            this.rowMsg = row
        },
        tableRowClassName(row, rowIndex) {
            if (!row.row.valueFlag) {
                return 'error-row'
            }
        },
        sortMethods(a, b, it) {
            if (a[it] < b[it]) {
                return -1
            }
        },
        //获取单位数据
        getorganizationData(type) {
            let that = this
            let params = {
                evaluationCycle: type === '年度' ? 'NDKP' : type === '季度' ? 'JDKP' : 'YDKP',
                organizationType: 'DWKP',
                binSection: that.binSectionStr
            }
            apiGetOrganizationListAll(params).then(datas => {
                if (datas && datas.data) {
                    that.organizationData = datas.data
                }
            })
        },
        // 获取业务属性
        getModelData(type) {
            let that = this
            that.titleMsgArr = []
            let params = {
                type: type === '年度' ? '3' : '2'
            }
            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.getStageData(type)
                    that.getorganizationData(type)
                }
            })
        },
        //根据业务属性获取业务阶段
        getStageData(type) {
            let that = this
            let params = {
                type: '3'
            }
            apiGetbinstageList(params).then(datas => {
                if (datas && datas.data) {
                    that.stageData = datas.data
                    that.activeName = datas.data[0].stageCode
                    this.setShowCalcBtn(datas.data[0].stageCode)
                    that.getTableHeaderData(datas.data[0].id)
                }
            })
        },
        //获取指标数据
        getTableHeaderData(id) {
            let that = this
            that.monthQuarterYearHeader = []
            that.monthQuarterYearData = []
            that.isClickTagId = ''
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                binSection: that.binSectionStr,
                binStage: id
            }
            apiGetEvaluationIndicatorList(params).then(datas => {
                if (datas && datas.data) {
                    that.indicatorList = datas.data
                    if (datas.data.length > 0) {
                        that.isClickTagId = datas.data[0].id
                        that.getTableData(that.isClickTagId)
                    }
                }
            })
        },
        handleClick(val) {
            this.setShowCalcBtn(val.props.name)
            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 (it.isNameEn === 'HD') {
                        it.showClick = true
                        this.binSectionStr = it.id
                    }
                }
            })
            console.log('val.props.name', val.props.name)
            let stageId = ''
            this.stageData.forEach(it => {
                if (it.stageCode === val.props.name) {
                    stageId = it.id
                }
            })
            this.getTableHeaderData(stageId)
        },

        setShowCalcBtn(code) {
            this.showCalcBtn = this.showCalcBtnTabs.some(ele => {
                return ele === code
            });
            if (this.showCalcBtn) {
                this.calcParms.binStage = this.stageData.find(ele => {
                    return ele.stageCode === code;
                })?.id || "";
            } else {
                this.calcParms.binStage = ""
            }
        },

        //获取表格数据
        getTableData(id) {
            let that = this
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: id,
                organizationShortName: that.compNameSa
            }
            apiGetgetEvaluationInfoDataList(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
                }
            })
        },
        handleShowPage(tag) {
            this.isClickTagId = tag.id
            this.monthQuarterYearHeader = []
            this.monthQuarterYearData = []
            this.getTableData(tag.id)
        },
        changType(data) {
            if (data.isNameEn === 'QQ') {
                this.activeName = 'QQXM'
            } else if (data.isNameEn === 'JJ') {
                this.activeName = 'JJXM'
            } else if (data.isNameEn === 'GLSX') {
                this.activeName = 'GLSX'
            } else if (data.isNameEn === 'ZDZX') {
                this.activeName = 'ZDZX'
            } else {
                this.activeName = 'SCJY'
            }
            console.log('sectionA==>', data)
            this.titleMsgArr.forEach(it => {
                it.showClick = false
                if (it.isName === data.isName) {
                    it.showClick = true
                    this.binSectionStr = it.id
                }
            })
            let stageId = ''
            this.stageData.forEach(it => {
                if (it.stageCode === this.activeName) {
                    stageId = it.id
                }
            })
            this.getTableHeaderData(stageId)
            this.getorganizationData(this.cycleType)
        },
        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.rowMsg.id,
                indicatorId: that.isClickTagId,
                binSection: that.binSectionStr,
                binStage: that.addstageId,
                optionMap: {}
            }
            that.monthQuarterYearData.forEach(it => {
                if (it.isAdd) {
                    addObj.organizationId = it.organizationShortName
                    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) {
                apiPostorganizationUpdateEvaluationInfo(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.isClickTagId)
        },
        saveDetail() {
            let that = this
            apiPostorganizationUpdateEvaluationInfo(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.isClickTagId)
                }
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "考评详情信息导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = '/organization-evaluation-info/import-excel'
        },
        successImport(val) {
            that.getTableData(that.isClickTagId)
        },
        handleExport() {
            let that = this
            let url = 'organization-evaluation-info/download-excel'
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: that.isClickTagId
            }
            apiGetExportMsg(url, params).then(datas => {
                let blob = new Blob([datas])
                saveAs(blob, '考评详情数据导出.xlsx')
            }).catch((r) => {
                console.error(r)
            })
        },
        calcScore() {
            this.calcParms.indicatorId = this.isClickTagId;
            this.calcParms.binSection = this.binSectionStr;
            const loading = this.$loading({
                background: "rgba(0,0,0,0.7)",
                text: "得分计算中...请稍候..."
            });
            apiDialogCalcScore(this.calcParms).then(res => {
                if (res.success) {
                    this.$message({
                        message: '得分计算成功',
                        type: 'success'
                    });
                }
                this.getTableData(this.isClickTagId)
            }).finally(() => {
                loading.close();
            });
        },
        changeDetail(row) {
            this.detailVisible = true
            this.detailMsg = row
            this.changeDetailList(row)
        },
        changeDetailList(row) {
            let that = this
            let params = {
                organizationEvaluationId: that.rowMsg.id,
                indicatorId: that.isClickTagId,
                organizationId: row.organizationId
            }
            apiGetorganizationevaluationcommoninfo(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.monthQuarterYearDetailHeader = header
                    }
                    that.monthQuarterYearDetailData = datas.data.value
                }
            })
        },
        addTableDetailInfo() {
            if (this.monthQuarterYearDetailHeader.length > 0) {
                let headerArr = []
                this.monthQuarterYearDetailHeader.forEach(item => {
                    headerArr = headerArr.concat(item.children)
                })

                let obj = {
                    isAdd: true,
                    deptName: this.userMes.deptName
                }
                headerArr.forEach(it => {
                    if (it.flag === '1') {
                        obj[it.code] = 0
                    } else {
                        obj[it.code] = ''
                    }
                    obj['IS_LH_' + it.code] = it.flag
                })
                this.monthQuarterYearDetailData.unshift(obj)
            }
        },
        saveAddDetailInfo() {
            let that = this
            let addParams = []
            that.monthQuarterYearDetailData.forEach(it => {
                let addObj = {
                    organizationEvaluationId: that.rowMsg.id,
                    indicatorId: that.isClickTagId,
                    organizationId: that.detailMsg.organizationId,
                    optionMap: it
                }
                addParams.push(addObj)
            })
            apiPostsaveEvaluationCommonInfo(addParams).then(datas => {
                if (datas) {
                    that.detailVisible = false
                    that.responseData(datas)
                }
            })
        },
        removeDetailData(row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                let parArr = []
                for (let i in row) {
                    if (i.indexOf('ID_') !== -1) {
                        parArr.push(row[i])
                    }
                }
                apiPostremoveEvaluationCommonInfo(parArr.join(',')).then(datas => {
                    if (datas) {
                        that.changeDetailList(that.detailMsg)
                    }
                })
            })
        }
    }
}
</script>

<style lang="less">
.monthQuarterYearFrom {
    .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;
                                justify-content: space-between;

                                .headerLeft {
                                    display: flex;
                                    width: 60%;
                                    overflow-x: auto;

                                    .tagArr {
                                        height: 33px;
                                        margin-right: 10px;
                                        cursor: pointer;
                                        margin-bottom: 10px;
                                    }

                                    .el-tag--dark {
                                        background-color: #184FB4;
                                        border: 1px solid #184FB4;
                                    }

                                    .el-tag--info {
                                        background-color: #E6EBF5;
                                        border: 1px solid #E6EBF5;
                                        color: #9DA5BE;

                                        .el-tag__close {
                                            color: #9DA5BE;
                                        }
                                    }
                                }

                                .headerRight {
                                    display: flex;
                                    justify-content: end;
                                    align-items: center;
                                    flex-wrap: nowrap;
                                    width: 40%;
                                    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;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: nowrap;
                                        height: 20px;
                                        margin: 5px 8px 0 8px;
                                        // width: 20%;
                                        width: fit-content;

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

                                        span {
                                            display: inline-block;
                                            font-size: 14px;
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                            white-space: nowrap;
                                        }
                                    }

                                    .add {
                                        cursor: pointer;

                                        span {
                                            color: #3B7AD1;
                                        }
                                    }

                                    .save {
                                        cursor: pointer;

                                        span {
                                            color: #50C14E;
                                        }
                                    }

                                    .import {
                                        cursor: pointer;

                                        span {
                                            color: #ce1e78;
                                        }
                                    }

                                    .export {
                                        cursor: pointer;

                                        span {
                                            color: #2baa8a;
                                        }
                                    }


                                    .calc {
                                        cursor: pointer;

                                        span {
                                            color: rgb(244, 165, 36);
                                        }
                                    }
                                }
                            }

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

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

                                .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 {
                                            .error-row {
                                                --el-table-tr-bg-color: #fdecec;

                                                &:hover>td {
                                                    background: #fdecec !important;
                                                }
                                            }

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

                .detailSeach {
                    display: flex;
                    justify-content: flex-end;
                    margin: 15px 0;

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

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

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

                    .add {
                        cursor: pointer;

                        span {
                            color: #3B7AD1;
                        }
                    }

                    .save {
                        cursor: pointer;

                        span {
                            color: #50C14E;
                        }
                    }
                }

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

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

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

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

}
</style>