发货确认

src/views/dashboard/index.vue

@@ -1,23 +1,126 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">name:{{ name }}</div>
-  </div>
+  <el-card>
+    <div class="dashboard-container">
+      <div class="sudoku_row" >
+        <div class="dashboard-text">name:{{ name }}</div>
+        <el-divider content-position="right">消息通知</el-divider>
+        <el-card v-for="(sudoku,index) in sudokus" :class="curSelect==sudoku.id?'opacity':''" :key="index" shadow="hover" class="sudoku_item ">
+          <div>
+            <el-badge :value="sudoku.value">
+              <svg-icon :icon-class="sudoku.icon" style="border: 1px solid black;background-color: #555c66" />
+              <router-link :to="sudoku.router">{{ sudoku.name }}</router-link>
+              <!--<a size="small" type="text" href="/Assembly/DeliveryConfirmation">{{sudoku.name}}</a>-->
+            </el-badge>
+          </div>
+          <div/>
+        </el-card>
+        <el-divider content-position="right"></el-divider>
+        <!--<div class="sudoku_item " :class="curSelect==sudoku.id?'opacity':''" v-for="(sudoku,index) in sudokus" :key="index" @touchstart="touchstart(index)" @touchend="touchend">-->
+        <!--&lt;!&ndash;<img :src="sudoku.img_src" width="40" height="40" >&ndash;&gt;-->
+        <!---->
+        <!--</div>-->
+      </div>
+    </div>
+  </el-card>
+
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-
+import request from '@/utils/request'
 export default {
   name: 'Dashboard',
+  data() {
+    return {
+      sudokus: [],
+      curSelect: null,
+      number: '',
+      timer: ''
+    }
+  },
   computed: {
     ...mapGetters([
-      'name'
+      'name',
+      'token'
     ])
+  },
+  mounted() {
+    this.getFileList()
+    // this.timer = setInterval(this.getFileList(), 2 * 1000) // ANDON看板 5 分钟一刷新
+  },
+  methods: {
+    async getFileList() {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '1',
+          name: '菜单系统模块_项目角色模块列表_消息通知',
+          param: '角色编号=' + this.token
+        }
+      }).then(data => {
+        console.log(data, 1)
+        for (let i = 0; i < data.data.length; i++) {
+          console.log(i, 99999)
+          this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
+        }
+        console.log(this.sudokus, 998)
+      })
+    },
+    async getMessageNum(tableName, condition, rawData, i) {
+      await request({
+        url: '',
+        method: 'post',
+        data: {
+          type: '3',
+          name: `select count(*) from ${tableName} where ${condition}`
+        }
+      }).then(res => {
+        this.sudokus.push({
+          id: rawData.data[i].主模块编号,
+          name: rawData.data[i].标题,
+          icon: rawData.data[i].图标,
+          router: `${rawData.data[i].父路径}/${rawData.data[i].子路径}`,
+          value: res.data[0].Column1
+        })
+      })
+    }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .item {
+    margin-top: 10px;
+    margin-right: 40px;
+  }
+  .sudoku_row{
+    display: flex;
+    align-items: center;
+    width:100%;
+    flex-wrap: wrap;
+  }
+  .sudoku_item{
+    margin-bottom: 20px;
+    margin-left: 20px;
+    /*border: 1px solid red;*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width:15%;
+    height: 200px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .opacity{
+    opacity: 0.4;
+    background: #e5e5e5;
+  }
+  .sudoku_item img{
+    margin-bottom: 3px;
+    display: block;
+  }
 .dashboard {
   &-container {
     margin: 30px;