<template>
|
<div v-loading="this.loading" class="App">
|
<div style="display: flex; justify-content: flex-end;margin-bottom: 10px">
|
<el-button plain size="small" type="primary" @click="MoreHandler">自定义</el-button>
|
</div>
|
<avue-data-box ref="dataBox" :animation="true" :option="option"></avue-data-box>
|
|
<el-dialog :visible.sync="dialogTableVisible" append-to-body class="avue-dialog avue-dialog--top" title="主数据配置"
|
top='-40px'>
|
<el-table
|
ref="TableBox"
|
:data="Crud.data"
|
border
|
style="width: 100%"
|
@selection-change="selectionChange"
|
@row-click="TableRoute">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="主数据名称"
|
prop="menuName"
|
>
|
<template slot-scope="scope">
|
<el-link type="primary" @click="TableRoute(scope.row)">{{ scope.row.menuName }}</el-link>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="待办数据"
|
prop="mdmCount"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="icon图标"
|
prop="icon">
|
<template slot-scope="scope">
|
<i :class="scope.row.icon" style="font-size: 20px"></i>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip='true'
|
label="路由地址"
|
prop="menuRoute">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="code"
|
prop="code">
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button plain type="primary" @click="SaveHandler" v-loading="BtnLoading">保存</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getList, save} from "@/api/system/statistic";
|
|
export default {
|
name: "Statistic",
|
data() {
|
return {
|
BtnLoading: false,
|
loading: true,
|
Crud: {
|
form: '',
|
data: [],
|
},
|
userId: '',
|
hexColor: '',
|
newData: [],
|
SelectRow: [],
|
countByServer: true,
|
dialogTableVisible: false,
|
// listMyTask:[]
|
option: {
|
span: 6,
|
data: []
|
},
|
}
|
},
|
created() {
|
this.MasterGetList();
|
},
|
mounted() {
|
this.FontInfo()
|
},
|
computed() {
|
|
},
|
methods: {
|
FontInfo() {
|
this.$nextTick(() => {
|
const dataFatherBox = this.$refs.dataBox.$el;
|
// console.log(dataFatherBox);
|
this.$nextTick(() => {
|
setTimeout(() => {
|
//字体
|
const info = dataFatherBox.querySelectorAll('.item-info .info');
|
//边框
|
const items = dataFatherBox.querySelectorAll('.item');
|
// console.log('info', info);
|
info.forEach((info) => {
|
info.style.fontSize = '16px';
|
});
|
items.forEach((item) => {
|
item.style.border = '1px solid #DCDFE6';
|
});
|
this.loading = false;
|
}, 1000); // 延迟1秒查找info元素
|
});
|
});
|
},
|
selectionChange(row) {
|
// console.log(row)
|
this.SelectRow = row;
|
},
|
async SaveHandler() {
|
if (this.SelectRow.length <= 0) {
|
this.$message.warning('请选择一条数据！');
|
return;
|
}
|
this.BtnLoading = true;
|
try {
|
const {data: {code}} = await save(this.userId, this.SelectRow.map(item => item.code));
|
if (code === 200) {
|
this.$message.success('保存成功！');
|
this.newData = [];
|
this.option.data = [];
|
this.MasterGetList();
|
this.dialogTableVisible = false;
|
this.BtnLoading = false;
|
this.loading = true;
|
this.FontInfo();
|
}
|
} catch {
|
this.BtnLoading = false;
|
}
|
},
|
MoreHandler() {
|
this.dialogTableVisible = true;
|
let checkedrow = []
|
this.newData.forEach(item => {
|
this.option.data.forEach(v => {
|
if (item.code === v.code) {
|
checkedrow.push(item)
|
}
|
})
|
})
|
|
// console.log(checkedrow)
|
this.$nextTick(() => {
|
checkedrow.forEach(row => {
|
this.$refs.TableBox.toggleRowSelection(row, true) // 回显
|
})
|
})
|
},
|
// 随机色
|
randomColor() {
|
const r = Math.floor(Math.random() * 256); // 生成 0 到 255 之间的随机数
|
const g = Math.floor(Math.random() * 256);
|
const b = Math.floor(Math.random() * 256);
|
// 将 RGB 值转换为十六进制表示形式
|
const hexColor = "#" + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
|
return hexColor;
|
},
|
MasterGetList() {
|
this.userId = localStorage.getItem('userId');
|
getList({userId: this.userId}).then(res => {
|
res.data.data.filter((item, index) => {
|
this.newData.push(item);
|
this.Crud.data = this.newData;
|
if (item.isDefault === 1) {
|
const colors = ['rgb(49, 180, 141)', 'rgb(56, 161, 242)', 'rgb(117, 56, 199)', 'rgb(242, 104, 31)',
|
'rgb(19, 150, 111)', 'rgb(26, 131, 212)', 'rgb(87, 26, 169)', 'rgb(212, 83, 1)'];
|
const color = colors[index % colors.length];
|
this.option.data.push({
|
click: (item) => {
|
this.$router.push({path: item.uiUrl});
|
},
|
title: item.menuName,
|
count: parseInt(item.mdmCount),
|
icon: item.icon,
|
code: item.code,
|
isDefault: item.isDefault,
|
color: color,
|
uiUrl: item.menuRoute,
|
id: 'custom-title'
|
});
|
}
|
});
|
});
|
},
|
TableRoute(row) {
|
this.$router.push({path: row.menuRoute});
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
* {
|
list-style: none;
|
}
|
|
.MasterBox {
|
display: flex;
|
width: 100%;
|
padding: 0;
|
}
|
|
div {
|
margin: 0;
|
padding: 0;
|
}
|
</style>
|
