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

@@ -1,153 +1,222 @@
<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="4" v-for="item in listMyTask">
        <div class="box" :style="item.style">
          {{item.name}}
          <div><avue-count-up class="value" :end="item.count"></avue-count-up></div>
        </div>
      </el-col>
    </el-row>
  <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 {validatenull} from "@/util/validate";
import {getList} from "@/api/system/statistic";
import {getList, save} from "@/api/system/statistic";

export default {
name: "Statistic",
  data(){
  return {
    countByServer:true,
    listMyTask:[]
  }
  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.getList();
    this.MasterGetList();
  },
  computed(){
  mounted() {
    this.FontInfo()
  },
  computed() {

  },
  methods: {
    getList() {
      let data = [{
        "backgroundColor": "#FF5722",
        "btmname": "hometask",
        "countUrl": "priceIndexController/countNeedConfirmPlan",
        "name": "待确认计划",
        "nameOid": "",
        "oid": "34aebfde-eb11-4555-87eb-0a779be9aad0",
        "uiUrl": "USEJS:rpm/wrj/ProductPricePlan",
      }, {
        "backgroundColor": "#5FB878",
        "btmname": "hometask",
        "countUrl": "priceIndexController/countPricingPlan",
        "name": "今日已确认计划",
        "nameOid": "2C72EA23-8AA5-E5FC-9BC1-DE4AD182EF7B",
        "oid": "6256ae79-7765-4c66-afc7-f12fad350065",
        "uiUrl": "USEJS:rpm/wrj/ProductPricePlan",
      },
        {
          "backgroundColor": "#1E9FFF",
          "btmname": "hometask",
          "countUrl": "priceIndexController/countNeedFeedbackPlan",
          "name": "已谈、待反馈",
          "nameOid": "2536978C-CD1B-5B56-6529-A8C3456B5260",
          "oid": "3043cdf1-8479-4c2a-9eab-fc35e9f9d5a7",
          "uiUrl": "USEJS:rpm/wrj/ProductPricePlan",
        },
        {
          "backgroundColor": "#FF5722",
          "btmname": "hometask",
          "countUrl": "priceIndexController/countMyUnCreatePricePlan",
          "name": "采购谈价-经办",
          "nameOid": "",
          "oid": "529634e7-1854-4f61-b911-a91e3c406757",
          "uiUrl": "USEJS:rpm/wrj/PurchaseRequstUndo",
        },
        {
          "backgroundColor": "#5FB878",
          "btmname": "hometask",
          "countUrl": "priceIndexController/countPricingPlan",
          "name": "今日已确认计划--经办人",
          "nameOid": "",
          "oid": "a03a6ab2-f87d-4e45-94cb-9ef4d66fbba2",
          "uiUrl": "USEJS:rpm/wrj/PurchaseRequstUndo?showPlan=true",
        },
        {
          "backgroundColor": "#1E9FFF",
          "btmname": "hometask",
          "countUrl": "priceIndexController/countNeedFeedbackPlan",
          "name": "已谈、待反馈--经办人",
          "nameOid": "",
          "oid": "8e56cce6-c955-4624-99d5-6c5b870a8c09",
          "uiUrl": "USEJS:rpm/wrj/PurchaseRequstUndo?showPlan=true",
        },
        {
          "backgroundColor": "",
          "btmname": "",
          "countUrl": "priceIndexController/countMyWillAuditPlan",
          "name": "采购谈价-经办",
          "nameOid": "",
          "oid": "f7d5c541-3a3a-4f24-bf76-b1538abb7abd",
          "uiUrl": "USEJS:rpm/wrj/PurchaseRequstUndo?showPlan=true",
        },
        {
          "backgroundColor": "",
          "btmname": "hometask",
          "countUrl": "priceIndexController/countNeedDispatch",
          "name": "采购谈价-分派",
          "nameOid": "BAD3108F-6F6B-F287-705C-82D69A5E030A",
          "oid": "6093b1cb-bd7b-438b-8a76-05ab486ccf63",
          "uiUrl": "USEJS:rpm/wrj/PurchaseRequstUndo?showPlan=true"
    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();
        }
      ]
      this.listMyTask = data.map(record => {
        record.style=record.style || ''
        if(record.backgroundColor!=''){
          record.style = 'background-color:'+record.backgroundColor;
        }
        record.count=record.count || 0;
        if(!this.countByServer){
          //是前端查询
          getList(record.countUrl,{}).then(res=>{
            if(res.data.data.success){
              record.count=res.data.data.obj;
            }else{
              record.count=0
            }
          })

        }
        return {
          ...record
        }
      } 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>
.el-col{margin-bottom: 0}
.box{
  text-align: center;
  background: rgb(235, 238, 245);
  color: #303133;
  height: 70px;
  margin: 10px 0!important;
  padding: 15px 10px;
  position: relative;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
* {
  list-style: none;
}
.value{
  font-size: 12px;
  opacity: .69;
  line-height: 20px;
  margin-top: 5px;
  display: block;

.MasterBox {
  display: flex;
  width: 100%;
  padding: 0;
}

div {
  margin: 0;
  padding: 0;
}
</style>