<template>
<div class="full-box">
<div class="" style="width: 100%;height:100%;" >
<div class="top-tip-box t-title">当前位置：指标管理</div>
<div class="table-info-box ">
<div class="table-search-box onerow">
<div class="search-info-box">
<div class="search-item">
<div class="search-item-label">指标名称</div>
<el-input v-model="zbName" placeholder="请输入内容"></el-input>
</div>
<el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
<el-button class="search-btn" type="primary" @click="reset">重置</el-button>
<el-button class="operate-btn" type="primary" @click="addData">新增指标</el-button>
</div>
<div class="search-border-box">
<div class="sbb-line"></div>
<div class="sbb-role"></div>
</div>
</div>
<div class="table-result-boxx">
<div class="table-container-style">
<el-table :data="tableData.list" height="200">
<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
<el-table-column prop="name" align="center" label="指标名称" ></el-table-column>
<el-table-column prop="period" align="center" label="周期"></el-table-column>
<el-table-column prop="cond" align="center" label="条件"> </el-table-column>
<el-table-column prop="threshold" align="center" label="阈值" ></el-table-column>
<el-table-column prop="updateTime" align="center" label="设置时间"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<div class="table-edit-btn" @click="editRowData(scope.row)">编辑</div>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
</div>
</div>
</div>
</div>
<el-dialog :title="popTitle" :visible.sync="dialogVisible" width="480px" :close-on-click-modal=false>
<el-form :model="popFilter" :rules="popRules" ref="updateForm" label-width="120px">
<el-form-item label="指标名称" prop="name" v-if="false">
<el-input v-model="popFilter.name" clearable auto-complete="off" ></el-input>
</el-form-item>
<el-form-item label="指标名称" prop="name">
<el-select v-model="popFilter.name" filterable clearable placeholder="请选择" >
<el-option v-for="(item,index) in editListData.zbList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="周期" prop="period">
<el-select v-model="popFilter.period" filterable clearable placeholder="请选择" >
<el-option v-for="(item,index) in editListData.period" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="条件" prop="cond">
<el-select v-model="popFilter.cond" filterable clearable placeholder="请选择" >
<el-option v-for="item in editListData.conditionType" :key="item" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="阈值" prop="threshold">
<el-input v-model="popFilter.threshold" clearable auto-complete="off" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateData">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
let month = new Date().getMonth()+1;
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'yjManage',
data () {
return {
dialogVisible:false,
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
zbName:'',
tableData:{
list: [],
pageNum: 1,
pageSize: 10,
pages: 1,
total: 1,
},
rowData:{},
popTitle:'',
addOrEdit:'add',
editListData:{
zbList:[],
period:['每周','每月','每季度','半年','全年'],
conditionType:['>','<','='],
},
popFilter:{
name:'',
cond: "",/*条件*/
period: "",/*周期*/
threshold:'',/*阈值*/
},
popRules:{
name:[{ required: true, message: '请选择指标名称', trigger: 'change'}],
cond:[{ required: true, message: '请选择条件', trigger: 'change'}],
period:[{ required: true, message: '请选择周期', trigger: 'change'}],
threshold:[{ required: true, message: '请填写指标阈值', trigger: 'blur'}],
},
}
},
mounted (){},
created(){
this.GLOBAL.app.getDictList(resp => {
this.editListData.zbList = resp["指标"];
})
this.getList();
},
watch:{},
methods:{
searchResult(){
this.getList();
},
reset(){
this.zbName=''
},
getList(pageNum){
let vm = this;
let pageNums = vm.$Util.isEmpty(pageNum) ? vm.tableData.pageNum : pageNum;
vm.$http.get('/dx-economy-api/target/page',{params:{name:vm.zbName,pageNum:pageNums,pageSize:vm.tableData.pageSize}}).then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
vm.tableData.list = _data.data.list;
vm.tableData.pageNum = resp.data.data.pageNum;
vm.tableData.total = resp.data.data.total;
}
})
},
resetForm(formName) {
var _this = this;
if(!_this.$Util.isEmpty(_this.$refs[formName])){
_this.$refs[formName].resetFields();
_this.popFilter = {name:'',cond: "",period: "",threshold:''};
}
},
addData() {
let vm = this;
vm.resetForm("updateForm");
vm.rowData={};
vm.addOrEdit='add';
vm.popTitle = '新增指标';
vm.dialogVisible = true;
},
editRowData(rowData){
let vm = this;
vm.resetForm("updateForm");
vm.addOrEdit='edit';
vm.dialogVisible = true;
vm.popTitle = '修改指标';
vm.rowData = rowData;
vm.popFilter.id = rowData.id;
vm.popFilter.name = rowData.name;
vm.popFilter.cond = rowData.cond;
vm.popFilter.period = rowData.period;
vm.popFilter.threshold = rowData.threshold;
},
updateData(){
let vm = this
vm.$refs.updateForm.validate((valid) => {
if (valid) {
var data = JSON.parse(JSON.stringify(vm.popFilter));
if (vm.addOrEdit == 'edit') {
vm.$http.put('/dx-economy-api/target/' + vm.rowData.id, data).then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
vm.rowData.period = vm.popFilter.period;
vm.rowData.threshold = vm.popFilter.threshold;
vm.rowData.cond = vm.popFilter.cond;
vm.rowData.name = vm.popFilter.name;
vm.dialogVisible = false;
vm.$message.success("修改成功！")
} else {
vm.$message.error(_data.message);
}
})
} else {
vm.$http.post('/dx-economy-api/target/', data).then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
vm.$message.success("新增成功！")
vm.getList();
vm.dialogVisible = false;
} else {
vm.$message.error(_data.message);
}
})
}
}
})
},
handlePageChange(currentPage){
this.getList(null,currentPage)
},
}
}
</script>
<style></style>
<style scoped>
.aaa{}
.aaa{}
.aaa{}
.aaa{}
.aaa{}
</style>
