BusinessBenchmark/src/components/evaluationSystem/evaluationIndexPage.vue

<template>
    <div class="evaluationIndex" v-loading="loadingImport">
        <div class="evaluationIndexBtn">
            <div class="collectSeach" :style="$utils.collectSeachSty()">
                <div class="exceed">
                    <span class="exceedSpan">指标名称：</span>
                    <el-input v-model="indicatorIdS" placeholder="请输入指标名称"></el-input>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="width: 80px">业务属性：</span>
                    <el-select v-model="binSectionIds" placeholder="请选择业务属性">
                        <el-option
                        v-for="item in moduleData"
                        :key="item.id"
                        :label="item.sectionName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="width: 80px;margin-left:10px">考评周期：</span>
                    <el-select v-model="evaluationCycleStr" placeholder="请选择考评周期">
                        <el-option
                        v-for="item in periodData"
                        :key="item.keyValue"
                        :label="item.keyName"
                        :value="item.keyValue"
                        :disabled="item.keyValue === 'YDKP'">
                        </el-option>
                    </el-select>
                </div>
                <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
            </div>
            <div class="PeriodBtn" :style="$utils.PeriodBtnSty()">
                <!-- $utils.havePurview('evalIndex:oneLevel:save') -->
                <btns
                :showImport="false"
                :showExport="false"
                :showAdd="$utils.havePurview('evalIndex:oneLevel:add')"
                :showSave="$utils.havePurview('evalIndex:oneLevel:save')"
                :showDelete="$utils.havePurview('evalIndex:oneLevel:delete')"
                :disSave="changeDateSelect.length === 0 || changeDateSelect.length>1"
                :disDelete="changeDateSelect.length === 0"
                :disImport="true"
                :disExport="true"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleImport="handleImport"
                @handleExport="handleExport"
                ></btns>
            </div>
            <div class="evaluationIndexTableData">
                <el-table :data="evaluationIndexData" style="width: 100%"  :class="evaluationIndexTableSty()"
                 @select="rowClick" @select-all="rowClick" @row-dblclick="editEvaluaIndex">
                    <el-table-column type="selection" label="操作" align="center"></el-table-column>
                    <el-table-column label="指标编码" prop="indicatorCode" width="200" />
                    <el-table-column label="业务属性" prop="binSectionName" />
                    <el-table-column label="业务阶段" prop="binStageName" />
                    <el-table-column label="指标类型" prop="indicatorTypeName" width="200" />
                    <el-table-column label="指标名称" prop="indicatorName" width="300" />
                    <el-table-column label="考评周期" prop="evaluationCycle" />
                    <el-table-column label="指标单位" prop="unit" />
                    <!-- <el-table-column label="公司" prop="company" /> -->
                    <!-- <el-table-column label="部门" prop="deptName" width="150" /> -->
                    <el-table-column label="是否专项" prop="isAdditional" />
                    <!-- <el-table-column label="是否量化" prop="isQuantified" /> -->
                    <!-- <el-table-column label="是否子指标">
                        <template #default="scope">
                            <span>{{scope.row.isChild === true?'是':'否'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="描述" width="250">
                        <template #default="scope">
                            <span>{{scope.row.des}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作">
                        <template #default="scope">
                            <p class="indicitem" @click="editEvaluaIndex(scope.row)">详情</p>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-size="page.pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
            </div>
            <div class="indexdialog">
                <el-dialog :title="title" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false">
                    <el-row class="periodFrom">
                        <el-col :span="7">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="DruleForm" :validate-on-rule-change="false">
                                <el-form-item label="指标名称" prop="indicatorName">
                                    <el-input v-model="ruleForm.indicatorName" placeholder="请输入指标名称" @blur="blurInput"></el-input>
                                </el-form-item>
                                <el-form-item label="指标编码" prop="indicatorCode">
                                    <el-input v-model="ruleForm.indicatorCode" placeholder="请输入指标编码" :disabled="isSave" @blur="blurInput"></el-input>
                                </el-form-item>
                                <el-form-item label="指标类别" prop="indicatorType">
                                    <el-select v-model="ruleForm.indicatorType" placeholder="请选择指标类别">
                                        <el-option
                                        v-for="item in indicatorTypeData"
                                        :key="item.id"
                                        :label="item.typeName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="指标单位" prop="indicatorUnit">
                                    <el-input v-model="ruleForm.indicatorUnit" placeholder="请输入指标单位"></el-input>
                                </el-form-item>
                                <el-form-item label="考评周期" prop="evaluationCycle">
                                    <el-select v-model="ruleForm.evaluationCycle" placeholder="请选择考评周期">
                                        <el-option
                                        v-for="item in periodData"
                                        :key="item.keyValue"
                                        :label="item.keyName"
                                        :value="item.keyValue"
                                        :disabled="item.keyValue === 'YDKP'">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="所属部门" prop="department">
                                    <el-select v-model="ruleForm.department" placeholder="请选择所属部门">
                                        <el-option
                                        v-for="item in departData"
                                        :key="item.dataKey"
                                        :label="item.keyName"
                                        :value="item.dataKey">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="业务阶段" prop="binStage">
                                    <el-select v-model="ruleForm.binStage" placeholder="请选择业务阶段">
                                        <el-option
                                        v-for="item in stageData"
                                        :key="item.id"
                                        :label="item.stageName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="业务属性" prop="binSection">
                                    <el-select v-model="ruleForm.binSection" placeholder="请选择业务属性">
                                        <el-option
                                        v-for="item in moduleData"
                                        :key="item.id"
                                        :label="item.sectionName"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="是否量化">
                                    <el-radio-group v-model="ruleForm.isQuantified">
                                        <el-radio border label="是" />
                                        <el-radio border label="否" />
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="是否专项">
                                    <el-radio-group v-model="ruleForm.isAdditional">
                                        <el-radio border label="是" />
                                        <el-radio border label="否" />
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="是否子指标">
                                    <el-radio-group v-model="ruleForm.isChild" @change="changeRadio" :disabled="isSave">
                                        <el-radio border label="是" />
                                        <el-radio border label="否" />
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="指标顺序" prop="orderNum">
                                    <el-input-number v-model="ruleForm.orderNum" :min="1" />
                                </el-form-item>
                                <el-form-item label="描述" prop="desc">
                                    <el-input v-model="ruleForm.desc" :rows="5" type="textarea" placeholder="请输入描述"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="17" class="indicatorItemBtn">
                            <div class="PeriodBtnDia">
                                <p class="indItemC">指标项配置管理</p>
                                <el-button
                                type="primary"
                                size="mini"
                                :disabled="ruleForm.isChild === '否'"
                                @click="handleAddChild"
                                >
                                <img :src="addW" style="margin-right: 10px">
                                <span>新增</span>
                                </el-button>
                            </div>
                            <div class="indicatorItemTableData">
                                <div class="datasMsg" v-if="indicatoroptions.length>0" >
                                    <el-collapse accordion>
                                        <el-collapse-item v-for="item in indicatoroptions" :key="item" :name="item.id">
                                            <template #title>
                                                <div style="display:flex;height:30px">
                                                    <div style="display:flex;height:30px">
                                                        <span class="nameTit">子指标名称：</span>
                                                        <el-input v-model="item.childName" placeholder="请输入子指标项名称"></el-input>
                                                    </div>
                                                    <div style="display:flex">
                                                        <span class="nameTit">子指标编码：</span>
                                                        <el-input v-model="item.childCode" placeholder="请输入子指标项编码"></el-input>
                                                    </div>
                                                </div>
                                            </template>
                                            <div style="padding:10px 20px;max-height: 50vh;overflow-y: auto;">
                                                <div class="tableBtn add" @click="handleAddTableChild(item)">
                                                    <img :src="addIcon" alt="">
                                                    <span>新增</span>
                                                </div>
                                                <el-table :data="item.list">
                                                    <el-table-column label="序号" type="index"  align="center" />
                                                    <el-table-column label="指标项名称" prop="optionName">
                                                        <template #default="scope">
                                                            <el-select v-model="scope.row.optionName" filterable placeholder="请选择指标项名称" @change="(val)=>changeOptionName(val,scope.row)">
                                                                <el-option
                                                                    v-for="item in indicItemoptions"
                                                                    :key="item.keyValue"
                                                                    :label="item.keyName"
                                                                    :value="item.keyName">
                                                                </el-option>
                                                            </el-select>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="指标项编码" prop="optionCode">
                                                        <template #default="scope">
                                                            <span>{{scope.row.optionCode}}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="计算公式">
                                                        <template #default="scope">
                                                            <el-input v-model="scope.row.formula" :rows="1" type="textarea" placeholder="请输入计算公式"></el-input>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="是否显示">
                                                        <template #default="scope">
                                                            <el-select v-model="scope.row.isShow" placeholder="请选择是否显示">
                                                                <el-option
                                                                    v-for="item in isShowEvaluation"
                                                                    :key="item.value"
                                                                    :label="item.label"
                                                                    :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="是否量化">
                                                        <template #default="scope">
                                                            <el-select v-model="scope.row.isQuantified" placeholder="请选择是否显示">
                                                                <el-option
                                                                    v-for="item in isShowEvaluation"
                                                                    :key="item.value"
                                                                    :label="item.label"
                                                                    :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </template>
                                                    </el-table-column>
                                                    <!-- <el-table-column label="描述">
                                                        <template #default="scope">
                                                            <el-input v-model="scope.row.des" :rows="1" type="textarea" placeholder="请输入描述"></el-input>
                                                        </template>
                                                    </el-table-column> -->
                                                    <el-table-column label="排序">
                                                        <template #default="scope">
                                                            <el-input-number v-model="scope.row.optionOrder" :min="1" />
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="操作" width="100">
                                                        <template #default="scope">
                                                            <p class="indicitem" @click="handleDeleteTableChild(item, scope.row)">删除</p>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </el-collapse-item>
                                    </el-collapse>
                                </div>
                                <div v-else>
                                    <span class="emptyData">暂无数据</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveEvaluationIndexMsg('ruleForm')">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <indicator-item ref="indicatorItem"></indicator-item>
        </div>
        <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import indicatorItem from './IndicatorItemPage.vue'
import btns from '../elbuttonS.vue'
import seachs from '../seachGroup.vue'
import addW from '../../assets/btnIcon/addW.png'
import saveW from '../../assets/btnIcon/saveW.png'
import addIcon from '../../assets/btnIcon/add.png'
import {apiGetIndicatorList, apiPostindicatorsaveGroup, apiGetIndicatorDelete,apiGetbinsectionList,apiGetIndicatordicdeleteList,
 apiGetIndicatorTypeList, apiGetdatadictionaryList, apiGetbinstageList, apiGetdataZBXList, apiGetIndidicselectById} from '../../api/api'
export default {
  components: { importDailog, indicatorItem, btns, seachs },
    data() {
        return {
            dialogVisible: false,
            title: '',
            isSave: false,
            changeDateSelect: [],
            indicatorIdS: '',
            binSectionIds: '',
            evaluationCycleStr: '',
            evaluationIndexData:[],
            moduleData: [],
            stageData: [],
            departData: [],
            indicatorTypeData: [],
            periodData: [],
            ruleForm: {
                indicatorName: '',
                indicatorCode: '',
                indicatorType: '',
                indicatorUnit: '',
                evaluationCycle: '',
                department: '',
                binSection: '',
                binStage: '',
                isQuantified: '是',
                isAdditional: '否',
                isChild: '否',
                orderNum: 1,
                desc: ''
            },
            rules: {
                indicatorName: [
                    { required: true, message: '请输入指标名称', trigger: 'blur' }
                ],
                indicatorCode: [
                    { required: true, message: '请输入指标编码', trigger: 'blur' }
                ],
                indicatorType: [
                    { required: true, message: '请选择指标类别', trigger: 'change' }
                ],
                indicatorUnit: [
                    { required: true, message: '请输入指标单位', trigger: 'blur' }
                ],
                evaluationCycle: [
                    { required: true, message: '请选择考评周期', trigger: 'change' }
                ],
                department: [
                    { required: true, message: '请选择所属部门', trigger: 'change' }
                ],
                binSection: [
                    { required: true, message: '请选择业务属性', trigger: 'change' }
                ],
                binStage: [
                    { required: true, message: '请输入业务阶段', trigger: 'change' }
                ],
                orderNum: [
                    { required: true, message: '请输入指标顺序', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ]
            },
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            evalradio: {},
            loadingImport: false,

            addW: addW,
            saveW: saveW,
            addIcon: addIcon,
            indicatoroptions: [],
            indicItemoptions: [],
            isShowEvaluation: [],
            winPix: window.devicePixelRatio,
        }
    },
    created() {
        this.isShowEvaluation = [
            {
                label: '是',
                value: true
            },
            {
                label: '否',
                value: false
            }
        ]
        this.getEvaluationData()
        this.getDataDictionary('BM0001') //部门//模块//阶段
        this.getindicatorTypeData()
        this.getindicItemData()
        this.getPeriodData()
    },
    methods:{
        // 查询指标数据
        getEvaluationData() {
            let that = this
            let params = {
                pageNum: that.page.currentPage,
                pageSize: that.page.pagesize,
                indicatorName: that.indicatorIdS,
                binSection: that.binSectionIds,
                evaluationCycle: that.evaluationCycleStr
            }
            // if (type) {
            //     params.indicatorName = that.indicatorIdS
            //     params.binSection = that.binSectionIds
            // }
            apiGetIndicatorList(params).then(datas =>{
                if (datas && datas.data) {
                    that.evaluationIndexData = datas.data.records
                    that.page.total = datas.data.total
                }
            })
        },
        // 查询指标类别
        getindicatorTypeData() {
            let that = this
            apiGetIndicatorTypeList().then(datas =>{
                if (datas && datas.data) {
                    that.indicatorTypeData = datas.data
                }
            })
        },
        changeOptionName(val, row) {
            this.indicItemoptions.forEach(item =>{
                if (item.keyName === val) {
                    row.optionCode = item.keyValue
                }
            })
        },
        // 查询指标项条目
        getindicItemData() {
            let that = this
            let params = {
                superKey: 'ZBX0001'
            }
            apiGetdataZBXList(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicItemoptions = datas.data
                }
            })
        },
        //考评周期
        getPeriodData() {
            let that = this
            let params = {
                superKey: 'KPZQ0001'
            }
            apiGetdatadictionaryList(params).then(datas =>{
                if (datas && datas.data) {
                    that.periodData = datas.data
                }
            })
        },
        // 查询部门
        // 查询规则模块和阶段数据
        getDataDictionary(val) {
            let that = this
            let params = {
                superKey: val
            }
            apiGetdatadictionaryList(params).then(datas =>{
                if (datas && datas.data) {
                    that.departData = datas.data
                }
            })
            apiGetbinsectionList().then(datas =>{
                if (datas && datas.data) {
                    that.moduleData = datas.data
                }
            })
            apiGetbinstageList().then(datas =>{
                if (datas && datas.data) {
                    that.stageData = datas.data
                }
            })
        },
        changeRadio(val) {
            if (val === '否') {
                if (this.indicatoroptions.length === 0) {
                    if (this.ruleForm.indicatorName !== '' && this.ruleForm.indicatorCode !== '') {
                        let childitemForm = {
                            childName: this.ruleForm.indicatorName,
                            childCode: this.ruleForm.indicatorCode,
                            list: []
                        }
                        this.indicatoroptions.push(childitemForm)
                    }
                }
            } else {
                this.indicatoroptions = []
            }
        },
        blurInput(val) {
            if (this.ruleForm.isChild === '否') {
                if (this.indicatoroptions.length === 0) {
                    if (this.ruleForm.indicatorName !== '' && this.ruleForm.indicatorCode !== '') {
                        let childitemForm = {
                            childName: this.ruleForm.indicatorName,
                            childCode: this.ruleForm.indicatorCode,
                            list: []
                        }
                        this.indicatoroptions.push(childitemForm)
                    }
                }
            }
        },
        //新增子指标
        handleAddTableChild(row) {
            let childitemForm = {
                optionName: '',
                optionCode: '',
                isShow: true,
                isQuantified: true
            }
            row.list.push(childitemForm)
        },
        handleAdd() {
            this.dialogVisible = true
            this.isSave = false
            this.title = '新增考评指标'
            this.$nextTick(() =>{
                this.$refs['ruleForm'].resetFields()
                this.ruleForm = {
                    indicatorName: '',
                    indicatorCode: '',
                    indicatorType: '',
                    indicatorUnit: '',
                    evaluationCycle: '',
                    department: '',
                    binSection: '',
                    binStage: '',
                    isQuantified: '是',
                    isAdditional: '否',
                    isChild: '否',
                    orderNum: 1,
                    desc: ''
                }
                this.indicatoroptions = []
            })
        },
        handleEdit() {
            this.dialogVisible = true
            this.isSave = true
            this.title = '修改考评指标'
            this.evalradio = this.changeDateSelect[0]
            this.ruleForm = {
                indicatorName: this.evalradio.indicatorName,
                indicatorCode: this.evalradio.indicatorCode,
                indicatorType: this.evalradio.indicatorTypeId,
                indicatorUnit: this.evalradio.unit,
                evaluationCycle: this.evalradio.evaluationCycle,
                department: this.evalradio.deptId,
                binSection: this.evalradio.binSection,
                binStage: this.evalradio.binStage,
                isQuantified: this.evalradio.isQuantified,
                isAdditional: this.evalradio.isAdditional,
                isChild: this.evalradio.isChild === true? '是': '否',
                orderNum: this.evalradio.orderNum,
                desc: this.evalradio.des
            }
            this.getIndidicselectById(this.evalradio.id)
        },
        // 根据指标id获取主子指标-list
        getIndidicselectById(id) {
            let that = this
            let params = {
                id: id
            }
            apiGetIndidicselectById(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicatoroptions = datas.data.dtoList
                }
            })
        },
        //新增子指标
        handleAddChild() {
            this.$nextTick(() =>{
                let itemForm = {
                    childName: '输入子指标名称',
                    childCode: '输入子指标编码',
                    list: [],
                }
                this.indicatoroptions.push(itemForm)
            })
        },
        saveEvaluationIndexMsg(formName) {
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.saveAndEditIndicatorData()
                }
            });
        },
        //新增/修改指标数据
        saveAndEditIndicatorData() {
            let that = this
            let deptName = ''
            that.departData.forEach(item =>{
                if (item.dataKey === that.ruleForm.department) {
                    deptName = item.keyName
                }
            })
            that.indicatoroptions.forEach(item =>{
                if (item.list.length>0) {
                    item.list.forEach(itv =>{
                        itv.formula = itv.formula ? encodeURI(itv.formula) : ''
                    })
                }
            })
            let params = {
                indicatorName: that.ruleForm.indicatorName,
                indicatorCode: that.ruleForm.indicatorCode,
                indicatorTypeId: that.ruleForm.indicatorType,
                unit: that.ruleForm.indicatorUnit,
                evaluationCycle: that.ruleForm.evaluationCycle,
                deptId: that.ruleForm.department,
                deptName: deptName,
                binSection: that.ruleForm.binSection,
                binStage: that.ruleForm.binStage,
                isQuantified: that.ruleForm.isQuantified,
                isAdditional: that.ruleForm.isAdditional,
                isChild: that.ruleForm.isChild === '是'?true:false,
                orderNum: that.ruleForm.orderNum,
                des: that.ruleForm.desc,
                dtoList: that.indicatoroptions
            }
            if (that.isSave) {
                params.id = that.evalradio.id
            }
            apiPostindicatorsaveGroup(params).then(datas =>{
                if (!datas.success) {
                    that.$message({
                        message: datas.message,
                        type: 'error'
                    });
                } else {
                    if (!that.isSave) {
                        that.$message({
                            message: '指标新增成功',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: '指标修改成功',
                            type: 'success'
                        });
                    }
                    that.dialogVisible = false
                    that.changeDateSelect = []
                    that.getEvaluationData()
                }
            })
        },
        //删除指标数据
        handleDelete() {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                let paramsArr = []
                that.changeDateSelect.forEach(it =>{
                    paramsArr.push(it.id)
                })
                apiGetIndicatorDelete(paramsArr.join(',')).then(datas =>{
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    that.getEvaluationData()
                    that.changeDateSelect = []
                })
            })
        },
        //删除指标数据
        handleDeleteTableChild(data, row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (row.id) {
                    let that = this
                    let paramsArr = [row.id]
                    apiGetIndicatordicdeleteList(paramsArr.join(',')).then(datas =>{
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.getIndidicselectById(this.evalradio.id)
                    })
                } else {
                    if (data.list && data.list.length>0) {
                        data.list.forEach((it,index) =>{
                            if (it.optionCode === row.optionCode) {
                                data.list.splice(index, 1)
                            }
                        })
                    }
                }
            })
        },    
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        getSeachData() {
            this.page.currentPage = 1
            this.getEvaluationData()
        },
        resetSeach() {
            this.page.currentPage = 1
            this.indicatorIdS = ''
            this.binSectionIds = ''
            this.evaluationCycleStr = ''
            this.getEvaluationData()
        },
        successImport(val) {
            this.loadingImport = false
            this.getEvaluationData()
        },
        importLoading(val) {
            this.loadingImport = true
        },
        handleSizeChange(val){
            this.page.pagesize = val
            this.getEvaluationData()
        },
        handleCurrentChange(val){
            this.page.currentPage =val
            this.getEvaluationData()
        },
        handleImport() {
            this.$refs.importPage.upload.title = "考评指标管理信息导入"
            this.$refs.importPage.upload.open = true
        },

        //指标项配置
        editEvaluaIndex(row) {
            this.dialogVisible = true
            this.title = '修改考评指标'
            this.isSave = true
            this.evalradio = row
            this.ruleForm = {
                indicatorName: row.indicatorName,
                indicatorCode: row.indicatorCode,
                indicatorType: row.indicatorTypeId,
                indicatorUnit: row.unit,
                evaluationCycle: row.evaluationCycle,
                department: row.deptId,
                binSection: row.binSection,
                binStage: row.binStage,
                isQuantified: row.isQuantified,
                isAdditional: row.isAdditional,
                isChild: row.isChild === true? '是': '否',
                orderNum: row.orderNum,
                desc: row.des
            }
            this.getIndidicselectById(row.id)
        },
        evaluationIndexTableSty() {
            if (this.winPix === 1.25) {
                return 'evalIndex125Table'
            } else {
                return 'evalIndex100Table'
            }
        }
    }
}
</script>

<style lang="less">
.evaluationIndex{
    .evaluationIndexBtn{
        .collectSeach{
            display: flex;
            padding: 24px 20px;
            border-bottom: 1px solid#D6DBEA;
                .exceed{
                    display: flex;
                    .exceedSpan{
                        width: 100px;
                        height: 12px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #8991B0;
                        line-height: 12px;
                        margin-top: 14px;
                    }
                    .el-input{
                        margin-right:10px;
                        .el-input__inner{
                            height:30px;
                        }
                        .el-input__suffix{
                            .el-select__caret{
                                line-height:30px;
                            }
                        }
                    }
                    .el-select{
                        line-height: 40px !important;
                        .el-input__inner, .is-disabled{
                            height:40px !important;
                        }
                        .el-input__suffix{
                            .el-select__caret{
                                line-height:40px;
                            }
                        }
                    }
                }
        }
        span{
            font-size:14px;
        }
        .PeriodBtn{
            display: flex;
            justify-content: end;
            padding: 20px 0;
        }
        .el-button{
            height: 30px;
            // width:100px;
            padding: 0 30px ;
            // padding-top: 8px;
            span{
                margin:0;
            }
        }
        .indexdialog{
            .el-overlay{
                .el-dialog{
                    .el-dialog__body{
                        padding: 0px 20px 0px 20px !important;
                        border-top: 1px solid #D6DBEA;
                        border-bottom: 1px solid #D6DBEA;
                        .periodFrom{
                            .el-select, .el-input{
                                width: 100%;
                            }
                            .el-select{
                                .el-input__inner, .is-disabled{
                                    height:30px !important;
                                }
                            }
                            .DruleForm{
                                padding: 20px 60px 20px 20px;
                            }
                            .indicatorItemBtn{
                                padding: 10px 20px 0 20px;
                                border-left: 1px solid #D6DBEA;
                                span{
                                    font-size:14px;
                                }
                                .PeriodBtnDia{
                                    display: flex;
                                    justify-content: space-between;
                                    padding: 20px 0;
                                    .indItemC{
                                        position: relative;
                                        // left: -600px;
                                        top: 15px;
                                        font-size: 16px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 600;
                                        color: #3B7AD1;
                                    }
                                    .el-button{
                                        height: 30px;
                                        padding: 0 30px ;
                                        span{
                                            margin:0;
                                        }
                                    }
                                    .is-disabled{
                                        opacity: 0.5;
                                    }
                                }
                                .indicatorItemTableData{
                                    // max-height: 75vh !important;
                                    height: 75vh !important;
                                    overflow-y: auto;
                                    .datasMsg{
                                        .tableBtn {
                                            display: flex;
                                            justify-content: end;
                                            margin-right: 30px;
                                            img{
                                                margin-right: 5px;
                                                margin-top: 1px;
                                                width: 18px;
                                                height: 18px;
                                            }
                                            span{
                                                position: relative;
                                                top: -2px;
                                                font-size: 14px;
                                                font-family: Microsoft YaHei;
                                                font-weight: 400;
                                            }
                                        }
                                        .add{
                                            cursor: pointer;
                                            span{
                                                color: #3B7AD1;
                                            }
                                        }
                                        .el-collapse{
                                            .el-collapse-item{
                                                .el-collapse-item__header{
                                                    .nameTit{
                                                        display: inline-block;
                                                        height: 20px;
                                                        font-size: 12px;
                                                        font-weight: bold;
                                                        position: relative;
                                                        top: -8px;
                                                    }
                                                    .el-input{
                                                        width: 150px;
                                                        margin-right: 10px;
                                                    }
                                                }
                                                .el-table{
                                                    .el-table__body-wrapper{
                                                    }
                                                    .el-input__inner{
                                                        height: 30px !important;
                                                    }
                                                    .el-radio__label{
                                                        display: none;
                                                    }
                                                }
                                                .indicitem{
                                                    color: #409EFF;
                                                    font-size: 12px;
                                                    margin-right: 20px;
                                                    cursor:pointer;
                                                    &:hover{
                                                        text-decoration: underline;
                                                    }
                                                }
                                                .el-pagination{
                                                    margin-top: 20px;
                                                    text-align: end;
                                                    position: relative;
                                                }
                                                .el-button{
                                                    height: 26px;
                                                    padding: 0 15px ;
                                                    span{
                                                        margin:0;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .emptyData{
                                        display: inline-block;
                                        width: 100%;
                                        // border: 1px solid #d9d9d9;
                                        text-align: center;
                                        margin-top: 50px;
                                    }
                                }
                            }
                        }
                    }
                    .el-dialog__footer{
                        .dialog-footer{
                            display: flex;
                            justify-content: center;
                            .el-button{
                                width: 180px !important;
                                height: 40px !important;
                            }
                        }
                    }
                }
            }
        }
    }
  .evaluationIndexTableData{
    .evalIndex125Table{
        .el-table__body-wrapper{
            height: 53vh !important;
        }
    }
    .evalIndex100Table{
        .el-table__body-wrapper{
            height: 60vh !important;
        }
    }
    .el-table{
        .el-input__inner{
            height: 30px !important;
        }
        .el-radio__label{
            display: none;
        }
        
        .indicitem{
            color: #409EFF;
            font-size: 12px;
            margin-right: 20px;
            cursor:pointer;
            &:hover{
                text-decoration: underline;
            }
        }
    }
    .el-pagination{
        margin-top: 20px;
        text-align: end;
        position: relative;
    }
    }
    
}
</style>