|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<!-- <el-button
|
|
|
|
type="primary"
|
|
|
|
size="small"
|
|
|
|
plain
|
|
|
|
@click="handleAddClick"
|
|
|
|
>配置表头</el-button
|
|
|
|
>-->
|
|
|
|
<span>信息表头设置</span>
|
|
|
|
<el-table :data="formDataNew" style="width: 100%">
|
|
|
|
<el-table-column prop="name" label="名称" width="60" />
|
|
|
|
<el-table-column prop="key" label="key值" width="70" />
|
|
|
|
<el-table-column prop="width" label="宽度" width="50" />
|
|
|
|
<el-table-column label="操作" width="100">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<div class="button-group">
|
|
|
|
<el-button
|
|
|
|
@click="handleEditorClick(scope.$index, scope.row)"
|
|
|
|
type="text"
|
|
|
|
size="small"
|
|
|
|
>编辑</el-button
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
<el-dialog
|
|
|
|
title="编辑列"
|
|
|
|
:visible.sync="editDialogVisible"
|
|
|
|
width="30%"
|
|
|
|
:before-close="handleClose"
|
|
|
|
>
|
|
|
|
<el-form :model="rowFormData" label-width="70px">
|
|
|
|
<el-form-item label="名称:">
|
|
|
|
<el-input
|
|
|
|
v-model.trim="rowFormData['name']"
|
|
|
|
placeholder="请输入名称"
|
|
|
|
size="mini"
|
|
|
|
disabled
|
|
|
|
>
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="key值:">
|
|
|
|
<el-input
|
|
|
|
v-model.trim="rowFormData['key']"
|
|
|
|
placeholder="请输入key值"
|
|
|
|
size="mini"
|
|
|
|
disabled
|
|
|
|
>
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="宽度:">
|
|
|
|
<el-input
|
|
|
|
v-model.trim="rowFormData['width']"
|
|
|
|
placeholder="请输入宽度"
|
|
|
|
size="mini"
|
|
|
|
>
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序:">
|
|
|
|
<el-switch size="mini" v-model.trim="rowFormData['sort']" />
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="列排序:">
|
|
|
|
<el-input-number
|
|
|
|
v-model.trim="rowFormData['columnSort']"
|
|
|
|
:min="0"
|
|
|
|
:max="50"
|
|
|
|
size="small"
|
|
|
|
controls-position="right"
|
|
|
|
/>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="关联组件:">
|
|
|
|
<div class="flex-start">
|
|
|
|
<el-select v-model.trim="rowFormData['componentName']" size="small">
|
|
|
|
<el-option
|
|
|
|
v-for="item in componentNameData"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value"
|
|
|
|
>
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
<div class="alt-text">
|
|
|
|
<span v-if="rowFormData['componentName']=='1'">显示正常内容</span>
|
|
|
|
<span v-if="rowFormData['componentName']=='textToImage'">值为'message',显示为信息图标，值为'',显示微信图标</span>
|
|
|
|
<span v-if="rowFormData['componentName']=='textToBg'">值为'1',显示为一般，值为'2'，显示为重要，值为'3'，显示为严重</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
|
|
|
|
<el-button size="mini" type="primary" @click="handleSaveClick"
|
|
|
|
>确 定</el-button
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
|
|
title="表头数据"
|
|
|
|
:visible.sync="dialogVisible"
|
|
|
|
width="60%"
|
|
|
|
:before-close="handleClose"
|
|
|
|
>
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
|
|
|
|
|
|
|
|
<el-button size="mini" type="primary" @click="handleSaveClick"
|
|
|
|
>确 定</el-button
|
|
|
|
>
|
|
|
|
</span>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getKpiPage,getDetailTableData} from "@/api/platform";
|
|
|
|
import {formatDate} from "../../../../../filter";
|
|
|
|
import {mapGetters} from "vuex";
|
|
|
|
export default {
|
|
|
|
model: {
|
|
|
|
prop: "formData",
|
|
|
|
event: "input"
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
formData: Array
|
|
|
|
},
|
|
|
|
watch:{
|
|
|
|
tableHeads:{
|
|
|
|
handler(val){
|
|
|
|
this.setFormData();
|
|
|
|
},
|
|
|
|
deep:true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
primaryTypeFlg:false,//默认为追加
|
|
|
|
primaryType1:'default',
|
|
|
|
primaryType0:'primary',
|
|
|
|
keyword:'',
|
|
|
|
currentPage:1,
|
|
|
|
pageSize:10,
|
|
|
|
pageSizes:[10,50,100, 200, 300, 400],
|
|
|
|
total:0,
|
|
|
|
layout:false,
|
|
|
|
dialogVisible: false,
|
|
|
|
rowFormData: {
|
|
|
|
name: "",
|
|
|
|
key: "",
|
|
|
|
width: "",
|
|
|
|
sort:false,
|
|
|
|
columnSort:0,
|
|
|
|
componentName:1
|
|
|
|
},
|
|
|
|
flag: true, // true 新增， false 编辑
|
|
|
|
indexEditor: -1, // 编辑第几个数据
|
|
|
|
tableData: [],
|
|
|
|
multipleSelection:[],
|
|
|
|
editDialogVisible:false,//编辑列
|
|
|
|
componentNameData:[
|
|
|
|
{
|
|
|
|
label:'正常内容',
|
|
|
|
value:1
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label:'信息图标',
|
|
|
|
value:'textToImage'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '级别背景',
|
|
|
|
value:'textToBg'
|
|
|
|
}
|
|
|
|
],//关联组件
|
|
|
|
formDataNew:this.formData,//表头数据
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed:{
|
|
|
|
...mapGetters(['tableHeads']),
|
|
|
|
//获取url地址中的token
|
|
|
|
getUrlToken(){
|
|
|
|
let locationUrl=this.$route.query;
|
|
|
|
let resId=locationUrl.resId;
|
|
|
|
let token=locationUrl.access_token;
|
|
|
|
let urlObj={
|
|
|
|
resId:resId,
|
|
|
|
token:token
|
|
|
|
}
|
|
|
|
return urlObj;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.setFormData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setFormData(){
|
|
|
|
if(this.tableHeads){
|
|
|
|
this.formDataNew=this.tableHeads;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//搜索指标
|
|
|
|
searchKpi(){
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
//获取性能指标列表
|
|
|
|
async getKpi(){
|
|
|
|
let params={
|
|
|
|
page:this.currentPage,
|
|
|
|
limit:this.pageSize,
|
|
|
|
kpiName:this.keyword,
|
|
|
|
}
|
|
|
|
const { success,data,count } = await getKpiPage(params,this.getUrlToken);
|
|
|
|
this.total=count;
|
|
|
|
if(success){
|
|
|
|
this.tableData=data;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//多选操作
|
|
|
|
handleSelectionChange(val) {
|
|
|
|
this.multipleSelection = val
|
|
|
|
},
|
|
|
|
// 每页展示多少条
|
|
|
|
handleSizeChange(val){
|
|
|
|
// 切换页码重置初始页
|
|
|
|
this.currentPage = 1
|
|
|
|
// console.log(`每页 ${val} 条`)
|
|
|
|
//props.pageSize = val;
|
|
|
|
this.pageSize = val;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
handleCurrentChange(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
//props.currentPage = val;
|
|
|
|
this.currentPage = val;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
// 切换页码
|
|
|
|
prePage(val) {
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val - 1;
|
|
|
|
this.currentPage = val-1;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
nextPage(val){
|
|
|
|
// console.log(`当前页: ${val}`)
|
|
|
|
// props.currentPage = val + 1;
|
|
|
|
this.currentPage = val+1;
|
|
|
|
this.getKpi();
|
|
|
|
},
|
|
|
|
// 配置性能指标
|
|
|
|
handleAddClick() {
|
|
|
|
this.rowFormData = {};
|
|
|
|
this.flag = true;
|
|
|
|
this.dialogVisible = true;
|
|
|
|
this.getKpi();
|
|
|
|
|
|
|
|
},
|
|
|
|
// 编辑
|
|
|
|
handleEditorClick(index, row) {
|
|
|
|
this.flag = false;
|
|
|
|
this.rowFormData = this.deepClone(row);
|
|
|
|
this.indexEditor = index;
|
|
|
|
this.editDialogVisible = true;
|
|
|
|
},
|
|
|
|
// 关闭
|
|
|
|
handleClose() {
|
|
|
|
this.dialogVisible = false;
|
|
|
|
},
|
|
|
|
// 保存
|
|
|
|
handleSaveClick() {
|
|
|
|
if (this.flag) {
|
|
|
|
// 新增
|
|
|
|
let arr=[];
|
|
|
|
if(this.primaryTypeFlg){
|
|
|
|
//追加
|
|
|
|
let arr1=[];
|
|
|
|
this.multipleSelection.map((item,index)=>{
|
|
|
|
arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
|
|
|
|
})
|
|
|
|
arr=this.formDataNew.concat(arr1);
|
|
|
|
}else{
|
|
|
|
//重新选择
|
|
|
|
this.multipleSelection.map((item,index)=>{
|
|
|
|
arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
this.formDataNew=arr;
|
|
|
|
this.formDataNew.sort(this.compare('columnSort'));
|
|
|
|
this.dialogVisible = false;
|
|
|
|
} else {
|
|
|
|
// 编辑
|
|
|
|
this.formDataNew[this.indexEditor] = this.rowFormData;
|
|
|
|
this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
|
|
|
|
this.formDataNew.sort(this.compare('columnSort'));
|
|
|
|
this.editDialogVisible = false;
|
|
|
|
}
|
|
|
|
console.log("AVX", this.formDataNew)
|
|
|
|
this.$emit("input", this.formDataNew);
|
|
|
|
this.$emit("change", this.formDataNew);
|
|
|
|
},
|
|
|
|
//数组排序
|
|
|
|
compare(property){
|
|
|
|
return function(a,b){
|
|
|
|
let value1 = a[property];
|
|
|
|
let value2 = b[property];
|
|
|
|
return value1 - value2;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 删除
|
|
|
|
handleDeleteClick(index,row) {
|
|
|
|
this.formDataNew.splice(index, 1);
|
|
|
|
this.setTableChecked(row.key);
|
|
|
|
this.$emit("input", this.formDataNew);
|
|
|
|
this.$emit("change", this.formDataNew);
|
|
|
|
},
|
|
|
|
//设置表格选中状态
|
|
|
|
setTableChecked(kpiId){
|
|
|
|
let indexId='';
|
|
|
|
this.multipleSelection.map((item,index)=>{
|
|
|
|
if(kpiId==item.kpiId){
|
|
|
|
indexId=index;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
this.multipleSelection.splice(indexId, 1);
|
|
|
|
|
|
|
|
this.tableData.map(item=>{
|
|
|
|
if(item.kpiId==kpiId){
|
|
|
|
setTimeout(()=>{
|
|
|
|
this.$refs.multipleTableRef.toggleRowSelection(item)
|
|
|
|
},300)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//重新配置表头或者追加表头
|
|
|
|
selectKpi(flg){
|
|
|
|
this.primaryTypeFlg=flg;
|
|
|
|
if(flg){
|
|
|
|
//追加
|
|
|
|
this.primaryType1='primary';
|
|
|
|
this.primaryType0='default';
|
|
|
|
}else{
|
|
|
|
//重新选择
|
|
|
|
this.primaryType0='primary';
|
|
|
|
this.primaryType1='default';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
/deep/::-webkit-scrollbar-track-piece {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
|
width: 0; // 横向滚动条
|
|
|
|
height: 8px; // 纵向滚动条 必写
|
|
|
|
}
|
|
|
|
// 滚动条的滑块
|
|
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
|
border-radius: 5px;
|
|
|
|
background-color: rgba(144, 146, 152, 0.3);
|
|
|
|
}
|
|
|
|
/deep/.el-table,
|
|
|
|
/deep/.el-table__expanded-cell,
|
|
|
|
/deep/.el-table th,
|
|
|
|
/deep/.el-table tr {
|
|
|
|
background-color: transparent !important;
|
|
|
|
color: #859094 !important;
|
|
|
|
font-size: 12px !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table td,
|
|
|
|
/deep/.el-table th.is-leaf {
|
|
|
|
border-bottom: none;
|
|
|
|
line-height: 26px;
|
|
|
|
}
|
|
|
|
/deep/.el-table tbody tr:hover {
|
|
|
|
background-color: #263445 !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table tbody tr:hover > td {
|
|
|
|
background-color: #263445 !important;
|
|
|
|
}
|
|
|
|
/deep/.el-table::before {
|
|
|
|
height: 0;
|
|
|
|
}
|
|
|
|
.button-group .el-button {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.table-search{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
.search-btn{
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.flex-start{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: start;
|
|
|
|
}
|
|
|
|
.alt-text{
|
|
|
|
margin-left:5px;
|
|
|
|
font-size: 12px;
|
|
|
|
color:#D81E06;
|
|
|
|
line-height: 12px;
|
|
|
|
}
|
|
|
|
.table-btn{
|
|
|
|
margin-top:10px;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
