<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>