Merge branch 'master' of http://git.echepei.com/zhujiawei/Warehouse_management_ui

src/api/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询客户详情列表
+export function listCorps(query) {
+  return request({
+    url: 'system/notice/list?pageNum=1&pageSize=10&status=0',
+    method: 'get'
+  })
+}

src/views/index.vue

@@ -1,264 +1,335 @@
 <template>
   <div class="app-container home">
+    <ul class="block">
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>入库</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>出库</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>新增用户</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>新增商品</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>调拨</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>收款</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>付款</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>对账</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>货转</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <i class="el-icon-success" style="font-size: 50px;text-align: center"></i>
+          <p>协议</p>
+        </div>
+      </li>
+    </ul>
+    <div style="width: 30%;float: right">
+      <div style="display: flex;">
+        <div id="box" style="width:100%;height:350px;"></div>
+      </div>
+    </div>
     <div style="width: 100%;margin-bottom: 50px">
-      <el-table :data="tableData" style="width: 50%;float: left">
-        <el-table-column prop="name" label="待办列表" width="250"></el-table-column>
-        <el-table-column prop="date" label="时间" width="250"></el-table-column>
+      <el-table :data="tableData" style="width: 65%;float: left;">
+        <el-table-column prop="name" label="待办事宜" width="360"></el-table-column>
+        <el-table-column prop="date" label="时间" width="300"></el-table-column>
         <el-table-column prop="address" label="操作"></el-table-column>
       </el-table>
-      <el-table :data="tableData" style="width: 25%;float: left;margin-left: 20px;margin-right: 20px">
-        <el-table-column prop="name" label="提醒列表" width="220" />
-        <el-table-column prop="address" label="操作" />
-      </el-table>
-      <el-table :data="tableData" style="width: 15%;">
-        <el-table-column prop="name" label="新闻公告" />
+      <el-table :data="tableData" style="width: 30%;float: left;margin-left: 20px;margin-right: 20px;">
+        <el-table-column prop="name" label="消息中心" width="220"/>
+        <el-table-column prop="address" label="操作"/>
       </el-table>
     </div>
-    <div style="display: flex;margin-top: -30px">
-      <div id="box" style="width:30%;height:350px;"></div>
-      <div id="bug" style="width:35%;height:350px;"></div>
-      <div id="temp" style="width:30%;height:350px;"></div>
-    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "index",
-    data() {
-      return {
-        // 版本号
-        version: "3.2.1",
-        tableData: [{
-          date: '2020-11-20 12:00',
-          name: '某客户出库单审核',
-          address: '查看详情'
-        }, {
-          date: '2020-11-20 12:00',
-          name: '某客户账单审核',
-          address: '查看详情'
-        }, {
-          date: '2020-11-20 12:00',
-          name: '仓储费审核结算审核',
-          address: '查看详情'
-        }, {
-          date: '2020-11-20 12:00',
-          name: '某客户出库单审核',
-          address: '查看详情'
-        }, {
-          date: '2020-11-20 12:00',
-          name: '仓储费审核结算审核',
-          address: '查看详情'
-        }, {
-          date: '2020-11-20 12:00',
-          name: '仓储费审核结算审核',
-          address: '查看详情'
-        }]
-      };
+import { listCorps } from "../../src/api/index";
+export default {
+  name: "index",
+  data() {
+    return {
+      // 版本号
+      version: "3.2.1",
+      tableData: [{
+        date: '2020-11-20 12:00',
+        name: '某客户出库单审核',
+        address: '查看详情'
+      }, {
+        date: '2020-11-20 12:00',
+        name: '某客户账单审核',
+        address: '查看详情'
+      }, {
+        date: '2020-11-20 12:00',
+        name: '仓储费审核结算审核',
+        address: '查看详情'
+      }, {
+        date: '2020-11-20 12:00',
+        name: '某客户出库单审核',
+        address: '查看详情'
+      }, {
+        date: '2020-11-20 12:00',
+        name: '仓储费审核结算审核',
+        address: '查看详情'
+      }, {
+        date: '2020-11-20 12:00',
+        name: '仓储费审核结算审核',
+        address: '查看详情'
+      }]
+    };
+  },
+  mounted() {
+    this.drawLine();
+  },
+  created(){
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      listCorps(this.queryParams).then(response => {
+        console.log(response);
+      });
     },
-    mounted() {
-      this.drawLine();
-      this.bug_ss();
-      this.temp();
+    goTarget(href) {
+      window.open(href, "_blank");
     },
-    methods: {
-      goTarget(href) {
-        window.open(href, "_blank");
-      },
-      drawLine() {
-        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
-        let myChart = this.$echarts.init(document.getElementById('box'))
-        // 绘制图表
-        myChart.setOption({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { // 坐标轴指示器，坐标轴触发有效
-              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-            }
-          },
-          radar: {
-            float:'left',
-            radius: '66%',
-            center: ['50%', '42%'],
-            splitNumber: 8,
-            splitArea: {
-              areaStyle: {
-                color: 'rgba(127,95,132,.3)',
-                opacity: 1,
-                shadowBlur: 45,
-                shadowColor: 'rgba(0,0,0,.5)',
-                shadowOffsetX: 0,
-                shadowOffsetY: 15
-              }
-            },
-            indicator: [
-              { name: '对比', max: 10000 },
-              { name: '对比', max: 20000 },
-              { name: '对比', max: 20000 },
-              { name: '对比', max: 20000 },
-              { name: '对比', max: 20000 },
-              { name: '对比', max: 20000 }
-            ]
-          },
-          legend: {
-            left: 'center',
-            bottom: '10',
-            data: ['某商品1', '某商品2', '某商品3']
-          },
-          series: [{
-            type: 'radar',
-            symbolSize: 0,
-            areaStyle: {
-              normal: {
-                shadowBlur: 13,
-                shadowColor: 'rgba(0,0,0,.2)',
-                shadowOffsetX: 0,
-                shadowOffsetY: 10,
-                opacity: 1
-              }
-            },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
+      let myChart = this.$echarts.init(document.getElementById('box'))
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: '某某库存统计',
+          subtext: '虚构数据',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          // orient: 'vertical',
+          // top: 'middle',
+          bottom: 10,
+          left: 'center',
+          data: ['西凉', '益州', '兖州', '荆州']
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: '65%',
+            center: ['50%', '50%'],
+            selectedMode: 'single',
             data: [
               {
-                value: [5000, 7000, 12000, 11000, 15000, 14000],
-                name: '某商品1'
-              },
-              {
-                value: [4000, 9000, 15000, 15000, 13000, 11000],
-                name: '某商品2'
+                label: {
+                  backgroundColor: '#eee',
+                  borderColor: '#777',
+                  borderWidth: 1,
+                  borderRadius: 4,
+                  rich: {
+                    title: {
+                      color: '#eee',
+                      align: 'center'
+                    },
+                    abg: {
+                      backgroundColor: '#333',
+                      width: '100%',
+                      align: 'right',
+                      height: 25,
+                      borderRadius: [4, 4, 0, 0]
+                    },
+                    Sunny: {
+                      height: 30,
+                      align: 'left'
+                    },
+                    Cloudy: {
+                      height: 30,
+                      align: 'left'
+                    },
+                    Showers: {
+                      height: 30,
+                      align: 'left'
+                    },
+                    weatherHead: {
+                      color: '#333',
+                      height: 24,
+                      align: 'left'
+                    },
+                    hr: {
+                      borderColor: '#777',
+                      width: '100%',
+                      borderWidth: 0.5,
+                      height: 0
+                    },
+                    value: {
+                      width: 20,
+                      padding: [0, 20, 0, 30],
+                      align: 'left'
+                    },
+                    valueHead: {
+                      color: '#333',
+                      width: 20,
+                      padding: [0, 20, 0, 30],
+                      align: 'center'
+                    },
+                    rate: {
+                      width: 40,
+                      align: 'right',
+                      padding: [0, 10, 0, 0]
+                    },
+                    rateHead: {
+                      color: '#333',
+                      width: 40,
+                      align: 'center',
+                      padding: [0, 10, 0, 0]
+                    }
+                  }
+                }
               },
-              {
-                value: [5500, 11000, 12000, 15000, 12000, 12000],
-                name: '某商品3'
+              {value: 535, name: '荆州'},
+              {value: 510, name: '兖州'},
+              {value: 634, name: '益州'},
+              {value: 735, name: '西凉'}
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
-            ]
-          }]
-        });
-      },
-      bug_ss() {
-        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
-        let myChart_s = this.$echarts.init(document.getElementById('bug'));
-
-        // 指定图表的配置项和数据
-        myChart_s.setOption({
-          tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-          },
-          legend: {
-            left: 'center',
-            bottom: '10',
-            data: ['库存1', '库存2', '库存3', '库存4', '库存5']
-          },
-          series: [
-            {
-              name: 'WEEKLY WRITE ARTICLES',
-              type: 'pie',
-              roseType: 'radius',
-              radius: [15, 95],
-              center: ['50%', '38%'],
-              data: [
-                { value: 320, name: '库存1' },
-                { value: 240, name: '库存2' },
-                { value: 149, name: '库存3' },
-                { value: 100, name: '库存4' },
-                { value: 59, name: '库存5' }
-              ],
-              animationEasing: 'cubicInOut',
-              animationDuration: 2600
             }
-          ]
-        })
-      },
-      temp() {
-        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
-        let myChart_s = this.$echarts.init(document.getElementById('temp'));
-
-        // 指定图表的配置项和数据
-        myChart_s.setOption({
-          xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          },
-          yAxis: {
-            type: 'value'
-          },
-          series: [{
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'bar',
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
-            }
-          }]
-        })
-      }
-    },
-  };
+          }
+        ]
+      });
+    }
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .home {
-    blockquote {
-      padding: 10px 20px;
-      margin: 0 0 20px;
-      font-size: 17.5px;
-      border-left: 5px solid #eee;
+.block{
+  width: 70%;
+  float: left;
+  display: flex;
+  flex-wrap: wrap;
+  height: 350px;
+  li{
+    width: 18%;
+    height: 150px;
+    background-color: #1c84c6;
+    margin-left: 10px;
+    text-align: center;
+    color: #FFFFFF;
+    div{
+      margin-top: 40px;
+      p{
+        font-size: 20px;
+      }
     }
+  }
+}
+.home {
+  blockquote {
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: 5px solid #eee;
+  }
 
-    hr {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      border: 0;
-      border-top: 1px solid #eee;
-    }
+  hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #eee;
+  }
 
-    .col-item {
-      margin-bottom: 20px;
-    }
+  .col-item {
+    margin-bottom: 20px;
+  }
 
-    ul {
-      padding: 0;
-      margin: 0;
-    }
+  ul {
+    padding: 0;
+    margin: 0;
+  }
 
-    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    color: #676a6c;
-    overflow-x: hidden;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: #676a6c;
+  overflow-x: hidden;
 
-    ul {
-      list-style-type: none;
-    }
+  ul {
+    list-style-type: none;
+  }
 
-    h4 {
-      margin-top: 0px;
-    }
+  h4 {
+    margin-top: 0px;
+  }
 
-    h2 {
-      margin-top: 10px;
-      font-size: 26px;
-      font-weight: 100;
-    }
+  h2 {
+    margin-top: 10px;
+    font-size: 26px;
+    font-weight: 100;
+  }
 
-    p {
-      margin-top: 10px;
+  p {
+    margin-top: 10px;
 
-      b {
-        font-weight: 700;
-      }
+    b {
+      font-weight: 700;
     }
+  }
 
-    .update-log {
-      ol {
-        display: block;
-        list-style-type: decimal;
-        margin-block-start: 1em;
-        margin-block-end: 1em;
-        margin-inline-start: 0;
-        margin-inline-end: 0;
-        padding-inline-start: 40px;
-      }
+  .update-log {
+    ol {
+      display: block;
+      list-style-type: decimal;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      padding-inline-start: 40px;
     }
   }
+}
 </style>
 

src/views/login.vue

@@ -18,20 +18,20 @@
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-<!--      <el-form-item prop="code">-->
-<!--        <el-input-->
-<!--          v-model="loginForm.code"-->
-<!--          auto-complete="off"-->
-<!--          placeholder="验证码"-->
-<!--          style="width: 63%"-->
-<!--          @keyup.enter.native="handleLogin"-->
-<!--        >-->
-<!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
-<!--        </el-input>-->
-<!--        <div class="login-code">-->
-<!--          <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
-<!--        </div>-->
-<!--      </el-form-item>-->
+      <el-form-item prop="code">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
@@ -68,7 +68,7 @@ export default {
         username: "admin",
         password: "admin123",
         rememberMe: false,
-        code: "111111111",
+        code: "",
         uuid: ""
       },
       loginRules: {
@@ -77,9 +77,8 @@ export default {
         ],
         password: [
           { required: true, trigger: "blur", message: "密码不能为空" }
-        ]
-        /* ,
-        code: [{ required: true, trigger: "change", message: "验证码不能为空" }] */
+        ],
+        code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
       },
       loading: false,
       redirect: undefined

vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.137.230:9010`,
+        target: `http://192.168.137.73:9010`,
         // target: `http://engineering.echepei.com:9010/`,
         changeOrigin: true,
         pathRewrite: {