BusinessBenchmark/src/components/evaluationSystem/evaluationIndexPage.vue

<template>
    <div class="evaluationIndex" v-loading="loadingImport">
        <div class="evaluationIndexBtn">
            <p class="titleSty">考评指标管理</p>
            <div class="collectSeach">
                <div class="exceed">
                    <span style="margin-top: 3px;">选项名称：</span>
                    <el-select v-model="indicatorIdS" placeholder="请选择指标名称">
                        <el-option
                        v-for="item in indicatoroptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <el-button type="primary" style="margin-left: 10px;" @click="getSeachData">搜索</el-button>
                <el-button style="margin-left: 10px;" @click="reset">重置</el-button>
            </div>
            <div style="display:flex;justify-content: space-between;padding: 10px;">
                <el-row :gutter="10" class="PeriodBtn">
                    
                        <!-- @click="handleAdd"
                        @click="handleUpdate" -->
                    <el-col :span="1.5">
                        <el-button
                        type="primary"
                        plain
                        icon="Plus"
                        size="mini"
                        @click="handleAdd"
                        >新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                        type="success"
                        plain
                        icon="Edit"
                        size="mini"
                        >修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                        type="danger"
                        plain
                        icon="Delete"
                        size="mini"
                        :disabled="deleteSelect.length === 0"
                        @click="handleDelete"
                        >批量删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                        type="info"
                        plain
                        icon="Upload"
                        size="mini"
                        @click="handleImport"
                        >导入</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="warning"
                            plain
                            icon="Download"
                            size="mini"
                            @click="handleExport"
                        >导出</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="evaluationIndexTableData">
                <el-table :data="evaluationIndexData" border style="width: 100%" @select="rowClick" @select-all="allSelect">
                    <el-table-column type="selection" label="操作" align="center"></el-table-column>
                    <el-table-column label="创建时间">
                        <template #default="scope">
                            <span>{{scope.row.create_time}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建者">
                        <template #default="scope">
                            <span>{{scope.row.create_by}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="指标ID">
                        <template #default="scope">
                            <span>{{scope.row.indicator_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述">
                        <template #default="scope">
                            <span>{{scope.row.desc}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间">
                        <template #default="scope">
                            <span>{{scope.row.update_time}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新者">
                        <template #default="scope">
                            <span>{{scope.row.update_by}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="选项名称">
                        <template #default="scope">
                            <span>{{scope.row.option_name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="选项编码">
                        <template #default="scope">
                            <span>{{scope.row.option_code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="选项顺序">
                        <template #default="scope">
                            <span>{{scope.row.option_order}}</span>
                        </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>
            <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false">
                <div class="periodFrom">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">
                        <el-form-item label="指标名称" prop="indicatorId">
                            <el-select v-model="ruleForm.indicatorId" placeholder="请选择指标名称">
                                <el-option
                                v-for="item in indicatoroptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选项名称" prop="optionName">
                            <el-select v-model="ruleForm.optionName" placeholder="请选择选项名称">
                                <el-option
                                v-for="item in optionNameoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选项顺序" prop="optionOrder">
                            <el-input v-model="ruleForm.optionOrder" placeholder="请输入选项顺序"></el-input>
                        </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>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import {apiGetgetStandardPointManagementList, apiGetdeleteStandardPointManagement} from '../../api/api'
export default {
  components: { importDailog },
    data() {
        return {
            dialogVisible: false,
            title: '',
            ruleForm: {
                indicatorId: '',
                optionName: '',
                optionOrder: '',
                desc: ''
            },
            rules: {
                indicatorId: [
                    { required: true, message: '请选择指标名称', trigger: 'blur' }
                ],
                optionName: [
                    { required: true, message: '请选择选项名称', trigger: 'change' }
                ],
                optionOrder: [
                    { required: true, message: '请输入选项顺序', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入描述', trigger: 'change' }
                ]
            },
            indicatoroptions: [],
            optionNameoptions:[],
            indicatorIdS: '',

            windframradio: {},
            deleteSelect: [],
            changeDateSelect: [],
            loadingImport: false,
            evaluationIndexData:[],
            single: false,
            regionaloptions:[],
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            }
        }
    },
    mounted() {
        // this.getCollectorwireprojectList()
    },
    methods:{
        getSeachData() {
            this.page.currentPage = 1
            this.getCollectorwireprojectList('seach')
        },
        successImport(val) {
            this.loadingImport = false
            this.getCollectorwireprojectList()
        },
        importLoading(val) {
            this.loadingImport = true
        },
        handleSizeChange(val){
            this.page.pagesize = val
        },
        handleCurrentChange(val){
            this.page.currentPage =val
        },
        rowClick(selection, row) {
            this.windframradio = {}
            this.deleteSelect = []
            this.changeDateSelect = []
            if (selection.length === 1) { 
                this.windframradio = selection[0]
            }
            if (selection.length > 0) {
                selection.forEach(item =>{
                    this.deleteSelect.push(item.itemNo)
                    this.changeDateSelect.push(item.itemNo)
                })
            }
        },
        allSelect(selection) {
            this.deleteSelect = []
            this.changeDateSelect = []
            if (selection.length > 0) {
                selection.forEach(item =>{
                    this.deleteSelect.push(item.itemNo)
                    this.changeDateSelect.push(item.itemNo)
                })
            }
        },
        // 新增区域信息
        handleAdd() {
            this.dialogVisible = true
            // this.single = false
            this.title = '新增考评管理'
            this.$nextTick(() =>{
                // this.resetForm()
                // this.$refs['ruleForm'].clearValidate()
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "考评指标管理信息导入"
            this.$refs.importPage.upload.open = true
        },
    }
}
</script>

<style lang="less">
.evaluationIndex{
  .evaluationIndexBtn{
      background: #fff;
      padding: 10px 20px 0 20px;
      .collectSeach{
          display: flex;
          margin: 20px 20px 10px;
            .exceed{
                display: flex;
                .el-input{
                    margin-right:10px;
                    .el-input__inner{
                        height:30px;
                    }
                    .el-input__suffix{
                        .el-select__caret{
                            line-height:30px;
                        }
                    }
                }
            }
            .el-select{
                margin-right:10px;
                .el-input__inner{
                    height:30px;
                }
                .el-input__suffix{
                    .el-select__caret{
                        line-height:30px;
                    }
                }
            }
      }
      .titleSty{
          border-left: 4px solid #007aab;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
          font-family: '微软雅黑';
          margin-left:20px;
      }
      span{
          font-size:14px;
      }
      .PeriodBtn{
          padding-left: 10px;
      }
      .el-button{
          height: 30px;
          // width:100px;
          padding: 0 30px ;
          // padding-top: 8px;
          span{
              margin:0;
          }
      }
  }
  .evaluationIndexTableData{
    padding: 10px 20px;
    .el-table{
        .el-table__body-wrapper{
            .el-table__empty-block{
            height: 65vh !important;
            }
        }
        .el-input__inner{
            height: 30px !important;
        }
        .el-radio__label{
            display: none;
        }
    }
    .el-pagination{
        margin-top: 20px;
        text-align: end;
        position: relative;
    }
    }
    .el-overlay{
        .el-dialog{
            .el-dialog__body{
                padding: 30px 60px 30px 20px !important;
                .periodFrom{
                    .el-select, .el-input{
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>