From b387f71a88ba507e207f0a42c69b62975888e980 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 19 十月 2023 18:15:21 +0800
Subject: [PATCH] 编码规则-最大流水联调

---
 Source/UBCS-WEB/src/views/wel/Statistic.vue |  265 ++++++++++++++++++++++++++++++++--------------------
 1 files changed, 163 insertions(+), 102 deletions(-)

diff --git a/Source/UBCS-WEB/src/views/wel/Statistic.vue b/Source/UBCS-WEB/src/views/wel/Statistic.vue
index dbac618..741d0bd 100644
--- a/Source/UBCS-WEB/src/views/wel/Statistic.vue
+++ b/Source/UBCS-WEB/src/views/wel/Statistic.vue
@@ -1,121 +1,166 @@
 <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 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 :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-crud ref="crud"
-                 v-model="Crud.form"
-                 :data="Crud.data"
-                 @selection-change="selectionChange"
-                 :option="Crud.option">
-      </avue-crud>
+    <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  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: [],
+      },
+      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绉掓煡鎵緄nfo鍏冪礌
+        });
+      });
     },
-    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=[];
+          //娓呴櫎宸叉湁鏁扮粍涓璸ush鏁版嵁
+          this.newData = [];
+          this.option.data = []
           this.MasterGetList()
-          this.dialogTableVisible=false;
+          this.dialogTableVisible = false;
+          //瀛椾綋鍜岃竟妗嗛噸鏂板姞杞�
+          this.loading = true;
+          this.FontInfo()
         }
       })
     },
-    MoreHandler(){
-      this.dialogTableVisible=true
+    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() {
@@ -128,35 +173,51 @@
     },
     MasterGetList() {
       this.userId = localStorage.getItem('userId');
-      getList({ userId: this.userId }).then(res => {
-        res.data.data.filter(item => {
+      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) {
-            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 });
+                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: 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>

--
Gitblit v1.9.3