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

@@ -1,121 +1,149 @@
<template>
  <div>
      <div style="display: flex; justify-content: flex-end;margin-bottom: 10px">
        <el-button icon="el-icon-more" type="primary" plain size="small" @click="MoreHandler">更多</el-button>
  <div class="App" v-loading="this.loading">
    <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>
    </div>
    <avue-data-box :option="option" :animation="true">
      <template>
        <el-switch></el-switch>
      </template>
    </avue-data-box>
    <el-dialog title="主数据配置" :visible.sync="dialogTableVisible" append-to-body class="avue-dialog avue-dialog--top" top="0">
    <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"
                 @selection-change="selectionChange"
                 :option="Crud.option">
                 :option="Crud.option"
                 @selection-change="selectionChange">
      </avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" plain @click="SaveHandler">保存</el-button>
        <el-button plain type="primary" @click="SaveHandler">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {validatenull} from "@/util/validate";
import {getList,save} from "@/api/system/statistic";
import {flowRoute} from "@/util/flow";

import {getList, save} from "@/api/system/statistic";
export default {
name: "Statistic",
  data(){
  return {
    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:'',
    newData:[],
    SelectRow:[],
    countByServer:true,
    dialogTableVisible:false,
    // listMyTask:[]
    option: {
      span:6,
      data: []
    },
  }
  name: "Statistic",
  data() {
    return {
      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: '',
      newData: [],
      SelectRow: [],
      countByServer: true,
      dialogTableVisible: false,
      // listMyTask:[]
      option: {
        span: 6,
        data: []
      },
    }
  },
  created() {
    this.MasterGetList()
    this.MasterGetList();
  },
  computed(){
  mounted() {
   this.FontInfo()
  },
  computed() {

  },
  methods: {
    selectionChange(row){
      // console.log(row)
      this.SelectRow=row;
    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  rgb(200, 200, 200, 1)';
            });
            this.loading=false;
          }, 1000); // 延迟1秒查找info元素
        });
      });
    },
    SaveHandler(){
      if(this.SelectRow.length <= 0){
    selectionChange(row) {
      // console.log(row)
      this.SelectRow = row;
    },
    SaveHandler() {
      if (this.SelectRow.length <= 0) {
        this.$message.warning('请选择一条数据！')
        return
      }
      let mdmNameList=[];
      mdmNameList=this.SelectRow.map(item=>{return item.code})
        console.log(mdmNameList)
      save(this.userId,mdmNameList).then(res=>{
      let mdmNameList = [];
      mdmNameList = this.SelectRow.map(item => {
        return item.code
      })
      console.log(mdmNameList)
      save(this.userId, mdmNameList).then(res => {
        console.log(res)
        if(res.data.code === 200){
        if (res.data.code === 200) {
          this.$message.success('保存成功！')
          this.option.data=[];
          //清除已有数组中push数据
          this.option.data = [];
          this.newData=[];

          this.MasterGetList()
          this.dialogTableVisible=false;
          this.dialogTableVisible = false;
          //字体和边框重新加载
          this.loading=true;
          this.FontInfo()
        }
      })
    },
    MoreHandler(){
      this.dialogTableVisible=true
    MoreHandler() {
      this.dialogTableVisible = true;
    },
    // 随机色
    randomColor() {
@@ -128,25 +156,27 @@
    },
    MasterGetList() {
      this.userId = localStorage.getItem('userId');
      getList({ userId: this.userId }).then(res => {
      getList({userId: this.userId}).then(res => {
        res.data.data.filter(item => {
          // console.log(item.icon)
          if (item.isDefault === 1) {
            this.hexColor = this.randomColor();
            this.option.data.push({
              click: (item) => {
                this.$router.push({ path: item.uiUrl });
                this.$router.push({path: item.uiUrl});
              },
              title: item.menuName,
              count: parseInt(item.mdmCount),
              icon: item.icon,
              code: item.code,
              isDefault: item.isDefault,
              color:this.hexColor,
              color: this.hexColor,
              uiUrl: item.menuRoute,
              id: 'custom-title'
            });
          } else if (item.isDefault === 0) {
            this.newData.push(item);
            this.Crud.data=this.newData;
            this.Crud.data = this.newData;
          }
        });
        // console.log(this.option.data);