首页主数据统计

 Source/UBCS-WEB/src/views/wel/Statistic.vue

@@ -1,17 +1,57 @@
<template>
  <div class="App" v-loading="this.loading">
  <div v-loading="this.loading" class="App">
    <div style="display: flex; justify-content: flex-end;margin-bottom: 10px">
      <el-button icon="el-icon-more" plain size="small" type="primary" @click="MoreHandler">更多</el-button>
      <el-button plain size="small" type="primary" @click="MoreHandler">自定义</el-button>
    </div>
    <avue-data-box ref="dataBox" :animation="true" :option="option"  ></avue-data-box>
    <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="0">
      <avue-crud ref="crud"
                 v-model="Crud.form"
                 :data="Crud.data"
                 :option="Crud.option"
                 @selection-change="selectionChange">
      </avue-crud>
               top='-40px'>
      <el-table
        :data="Crud.data"
        border
        style="width: 100%"
        ref="TableBox"
        @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">保存</el-button>
      </div>
@@ -21,51 +61,15 @@

<script>
import {getList, save} from "@/api/system/statistic";

export default {
  name: "Statistic",
  data() {
    return {
      loading:true,
      loading: true,
      Crud: {
        form: '',
        data: [],
        option: {
          calcHeight: 80,
          tip: false,
          searchShow: false,
          addBtn: false,
          columnBtn: false,
          header: false,
          menu: false,
          border: true,
          index: true,
          selection: true,
          column: [
            {
              label: "主数据名称",
              prop: "menuName",
            },
            {
              label: "待办数据",
              prop: "mdmCount",
            },
            {
              label: "icon图标",
              prop: "icon",
              overHidden: true,
            },
            {
              label: "路由地址",
              prop: "menuRoute",
              overHidden: true,
            },
            {
              label: "code",
              prop: "code",
              overHidden: true,
            },
          ]
        }
      },
      userId: '',
      hexColor: '',
@@ -84,13 +88,13 @@
    this.MasterGetList();
  },
  mounted() {
   this.FontInfo()
    this.FontInfo()
  },
  computed() {

  },
  methods: {
    FontInfo(){
    FontInfo() {
      this.$nextTick(() => {
        const dataFatherBox = this.$refs.dataBox.$el;
        console.log(dataFatherBox);
@@ -107,7 +111,7 @@
            items.forEach((item) => {
              item.style.border = '1px solid  rgb(200, 200, 200, 1)';
            });
            this.loading=false;
            this.loading = false;
          }, 1000); // 延迟1秒查找info元素
        });
      });
@@ -131,19 +135,32 @@
        if (res.data.code === 200) {
          this.$message.success('保存成功！')
          //清除已有数组中push数据
          this.option.data = [];
          this.newData=[];

          this.newData = [];
          this.option.data=[]
          this.MasterGetList()
          this.dialogTableVisible = false;
          //字体和边框重新加载
          this.loading=true;
          this.loading = true;
          this.FontInfo()
        }
      })
    },
    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() {
@@ -157,10 +174,13 @@
    MasterGetList() {
      this.userId = localStorage.getItem('userId');
      getList({userId: this.userId}).then(res => {
        res.data.data.filter(item => {
          // console.log(item.icon)
        res.data.data.filter((item, index) => {
          this.newData.push(item);
          this.Crud.data = this.newData;
          if (item.isDefault === 1) {
            this.hexColor = this.randomColor();
            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});
@@ -170,23 +190,34 @@
              icon: item.icon,
              code: item.code,
              isDefault: item.isDefault,
              color: this.hexColor,
              color: color,
              uiUrl: item.menuRoute,
              id: 'custom-title'
            });
          } else if (item.isDefault === 0) {
            this.newData.push(item);
            this.Crud.data = this.newData;
          }
        });
        // console.log(this.option.data);
        // console.log(this.newData);
      });
    }
    },
    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>