update

admin/css/chunk-61532080.2ed9ca44.css

@@ -0,0 +1 @@
+.login_container[data-v-68175186]{width:90%}

admin/css/chunk-70c4bb0c.b39e3a99.css

@@ -0,0 +1 @@
+.box-card[data-v-52717155]{color:#fff;background:#6b6b6b;margin-top:10px}.el-dropdown-link[data-v-52717155]{cursor:pointer;color:#409eff}.el-icon-arrow-down[data-v-52717155]{font-size:12px}

admin/css/chunk-73b830fe.d0acd81d.css

@@ -0,0 +1 @@
+.el-menu[data-v-bea0a424]{height:calc(100vh - 62px)}.el-dropdown-link[data-v-bea0a424]{color:#409eff}

admin/css/index.66872d16.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}body,html{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif}#app,body,html{height:100%}

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.1",
+    "moment": "^2.27.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6"
   },

src/api/index.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import Vue from 'vue';
 import context from '../main';
+
 let loading;
 
 // axios.defaults.timeout = 3000000;
@@ -32,6 +33,10 @@ axios.interceptors.response.use(
         else {
             context.$alert(res.data.msg,'提示',{
                 confirmButtonText: '确定'
+            }).then(()=>{
+                if(res.data.code == '1005') {
+                    context.$router.replace({path:'/login'});
+                }
             });
         }
     },
@@ -75,13 +80,14 @@ let requestLoading = (url, method, params, showLoading = true) => {
             lock: true,
             text: '加载中...',
             spinner: 'el-icon-loading',
-            background: 'rgba(0, 0, 0, 0.7)'
+            background: 'rgba(0, 0, 0, 0.2)'
           });
     }
     return axios({
         method: method,
         url: url,
         withCredentials: true,
+        params,
         data: params,
         timeout: 120000
     })
@@ -89,7 +95,7 @@ let requestLoading = (url, method, params, showLoading = true) => {
 
 
 // const TestSrv = process.env.NODE_ENV == 'production' ? 'http://39.97.239.116:8080' : '/api';
-const StanleyLocal = process.env.NODE_ENV == 'production' ? 'http://192.168.1.200:8080' : '/api';
+const StanleyLocal = process.env.NODE_ENV == 'production' ? 'http://39.97.239.116:8080' : '/api';
 
 const Prefix = StanleyLocal;
 
@@ -98,6 +104,41 @@ export const testRequest = () => {
     return requestLoading(`${Prefix}/index.php?index/index/index`, 'get', {})
 }
 
-export const AddCabinet = (alias,url,count) => {
-    return requestLoading(`${Prefix}/index.php/api/AddCabinet?alias=${alias}&url=${url}&count=${count}`, 'get', {})
+//登录
+export const login = (params) => {
+    return requestLoading(`${Prefix}/login`, 'get', params)
+}
+
+//登出
+export const loginOut = () => {
+    return requestLoading(`${Prefix}/LoginOut`, 'get', {})
+}
+
+//订单列表
+export const orderList = (params) => {
+    return requestLoading(`${Prefix}/OrderList`, 'get', params)
+}
+
+//箱子操作记录列表
+export const boxActionList = (params) => {
+    return requestLoading(`${Prefix}/BoxActionList`, 'get', params)
 }
+
+//柜子列表
+export const cabinetList = (params) => {
+    return requestLoading(`${Prefix}/CabinetList`, 'get', params)
+}
+
+//箱子列表
+export const boxList = (params) => {
+    return requestLoading(`${Prefix}/BoxList`, 'post', params)
+}
+
+//新增柜子
+export const addCabinet = (params) => {
+    return requestLoading(`${Prefix}/AddCabinet`, 'post', params)
+}
+
+// export const AddCabinet = (alias,url,count) => {
+//     return requestLoading(`${Prefix}/index.php/api/AddCabinet?alias=${alias}&url=${url}&count=${count}`, 'get', {})
+// }

src/pages/index.vue

@@ -11,7 +11,7 @@
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="logout">退出登录</el-dropdown-item>
-              <el-dropdown-item>修改密码</el-dropdown-item>
+              <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -60,22 +60,40 @@
   </el-container>
 </template>
 <script>
+import { loginOut } from "@/api";
 export default {
   created() {
     this.curPath = this.$route.name;
   },
   data() {
     return {
-      curPath: ""
+      curPath: "",
     };
   },
   methods: {
     onUserEdit(command) {
       if (command == "logout") {
-        this.$router.replace({ path: "/login" });
+        this.$confirm("确认退出该账号?", "退出", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.onLoginOut();
+          })
+          .catch(() => {
+            return false;
+          });
       }
-    }
-  }
+    },
+    onLoginOut() {
+      loginOut().then((res) => {
+        if (res && res.msg == "ok") {
+          this.$router.replace({ path: "/login" });
+        }
+      });
+    },
+  },
 };
 </script>
 <style scoped>

src/pages/login.vue

@@ -7,9 +7,28 @@
         </div>
         <el-row type="flex" justify="center">
           <div class="login_container">
-            <el-input v-model="name" style="margin-bottom:20px;" placeholder="请输入用户名"></el-input>
-            <el-input v-model="pwd" style="margin-bottom:20px;" type="password" placeholder="请输入密码"></el-input>
-            <el-button type="primary" size="medium" style="width:100%;" @click="onLogin">登录</el-button>
+            <el-form
+              :model="ruleForm"
+              :rules="rules"
+              ref="ruleForm"
+              :label-position="labelPosition"
+              label-width="70px"
+            >
+              <el-form-item label="用户名" prop="name">
+                <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
+              </el-form-item>
+              <el-form-item label="密码" prop="pwd">
+                <el-input v-model="ruleForm.pwd" type="password" placeholder="请输入密码"></el-input>
+              </el-form-item>
+
+              <el-button
+                type="primary"
+                size="medium"
+                style="width:100%;"
+                @click="onLogin('ruleForm')"
+                @keydown.enter="onLogin('ruleForm')"
+              >登录</el-button>
+            </el-form>
           </div>
         </el-row>
       </el-card>
@@ -18,36 +37,49 @@
 </template>
 <script>
 import LoginBg from "@/assets/login.jpg";
-import {testRequest} from '@/api';
+import { login } from "@/api";
 export default {
   data() {
     return {
       LoginBg,
-      name: "",
-      pwd: ""
+      ruleForm: {
+        name: "",
+        pwd: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+      labelPosition: "right",
     };
   },
-  created(){
-    this.testRequest();
-  },
+  created() {},
   methods: {
-    testRequest(){
-      testRequest().then(res=>{
-        console.log(res);
-      })
-    },
-    onLogin() {
-      this.$message({
-        message: "登录成功",
-        type: "success",
-        center: true,
-        duration: 1000,
-        onClose: () => {
-          this.$router.replace({ path: "/" });
+    onLogin(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          login({
+            username: this.ruleForm.name,
+            password: this.ruleForm.pwd,
+          }).then((res) => {
+            if (res && res.msg == "ok") {
+              this.$message({
+                message: "登录成功",
+                type: "success",
+                center: true,
+                duration: 1000,
+                onClose: () => {
+                  this.$router.replace({ path: "/" });
+                },
+              });
+            }
+          });
+        } else {
+          return false;
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/pages/subPages/express.vue

@@ -9,8 +9,8 @@
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>开箱</el-dropdown-item>
-            <el-dropdown-item>停用</el-dropdown-item>
+            <el-dropdown-item>启用柜子</el-dropdown-item>
+            <el-dropdown-item>停用柜子</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -21,201 +21,68 @@
       v-model="tabActive"
       style="margin-top:10px;"
       :before-leave="onBeforeChangeTab"
+      @tab-click="onTabClick"
     >
-      <el-tab-pane label="1号柜" name="first">
-        <div>
-          <el-row justify="space-around" :gutter="10">
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>1号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <div style="height:72px;">
-                  <el-row type="flex" align="middle" style="height:100%;">
-                    <el-button>空闲</el-button>
-                  </el-row>
-                </div>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>2号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
-                  </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>3号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
-                  </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>4号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
-                  </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>5号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
-                  </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>6号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
+      <template v-for="(item,index) in cabinetList">
+        <el-tab-pane :label="item.alias" :key="index" :name="item.id">
+          <div>
+            <el-row justify="space-around" :gutter="10">
+              <template v-for="(v,k) in boxList[index]">
+                <el-col :span="6" :key="k">
+                  <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                      <span>{{v.box_number}}号柜</span>
+                      <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
+                    </div>
+                    <div style="height:72px;" v-if="v.box_status == 1">
+                      <el-row type="flex" align="middle" style="height:100%;">
+                        <el-button>{{v.status_text}}</el-button>
+                      </el-row>
+                    </div>
+
+                    <el-row type="flex" justify="space-between" v-if="v.box_status == 2">
+                      <el-row type="flex" align="middle">
+                        <el-button type="danger">{{v.status_text}}</el-button>
+                      </el-row>
+                      <div style="height:72px;">
+                        <h4>
+                          订单号：{{v.order_sn}}
+                          <!-- <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button> -->
+                        </h4>
+                        <h4>入柜日期：{{v.enter_time}}</h4>
+                        <h4>已使用：{{diffTime(v.enter_time)}}</h4>
+                      </div>
+                    </el-row>
+
+                    <div style="height:72px;" v-if="v.box_status == 3">
+                      <el-row type="flex" align="middle" style="height:100%;">
+                        <el-button type="info">{{v.status_text}}</el-button>
+                      </el-row>
+                    </div>
+                  </el-card>
+                </el-col>
+              </template>
+              <el-col :span="6">
+                <el-card class="box-card">
+                  <div slot="header" class="clearfix">
+                    <span>新增箱子</span>
                   </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>7号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text">开箱</el-button>
-                </div>
-                <el-row type="flex" justify="space-between">
-                  <el-row type="flex" align="middle">
-                    <el-button type="danger">使用中</el-button>
-                  </el-row>
-                  <div>
-                    <h4>
-                      黄先生
-                      <el-button style="margin-left:10px;" size="mini" type="primary">通知</el-button>
-                    </h4>
-                    <h4>130xxxxxxxx</h4>
-                    <h4>8小时</h4>
+                  <div style="height:72px;">
+                    <el-row type="flex" align="middle" style="height:100%;">
+                      <el-button type="primary">新增</el-button>
+                    </el-row>
                   </div>
-                </el-row>
-              </el-card>
-            </el-col>
-            <el-col :span="6">
-              <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                  <span>8号柜</span>
-                  <el-button style="float: right; padding: 3px 0" type="text" disabled>开箱</el-button>
-                </div>
-                <div style="height:72px;">
-                  <el-row type="flex" align="middle" style="height:100%;">
-                    <el-button type="info">故障</el-button>
-                  </el-row>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
+                </el-card>
+              </el-col>
+            </el-row>
 
-          <el-row style="margin-top:10px;" type="flex" justify="end">
-            <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
-          </el-row>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="2号柜" name="second">
-        <el-row>
-          <el-col :span="6">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>添加箱子</span>
-              </div>
-              <div style="height:72px;">
-                <el-row type="flex" align="middle" style="height:100%;">
-                  <el-button type="primary">添加</el-button>
-                </el-row>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-      <el-tab-pane label="3号柜" name="third">
-        <el-row>
-          <el-col :span="6">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>添加箱子</span>
-              </div>
-              <div style="height:72px;">
-                <el-row type="flex" align="middle" style="height:100%;">
-                  <el-button type="primary">添加</el-button>
-                </el-row>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
+            <!--  <el-row style="margin-top:10px;" type="flex" justify="end">
+              <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+            </el-row>
+            -->
+          </div>
+        </el-tab-pane>
+      </template>
       <el-tab-pane name="add">
         <span slot="label">
           <i class="el-icon-plus">新增</i>
@@ -223,22 +90,28 @@
       </el-tab-pane>
     </el-tabs>
 
-    <el-dialog title="新增" :visible.sync="addVisible" width="50%" @closed="onCloseAddDialog">
+    <el-dialog title="新增柜体" :visible.sync="addVisible" width="50%" @closed="onCloseAddDialog">
       <el-form
         :model="ruleForm"
         :rules="rules"
         ref="ruleForm"
-        label-width="100px"
+        label-width="120px"
         class="demo-ruleForm"
       >
-        <el-form-item label="柜子名称" prop="name">
-          <el-input v-model="ruleForm.name"></el-input>
-        </el-form-item>
         <el-form-item label="请求地址" prop="requrl">
           <el-input v-model="ruleForm.requrl"></el-input>
         </el-form-item>
-        <el-form-item label="箱子个数" prop="box">
-          <el-input v-model="ruleForm.boxcount"></el-input>
+        <el-form-item label="柜子名称" prop="alias">
+          <el-input v-model="ruleForm.alias"></el-input>
+        </el-form-item>
+        <el-form-item label="柜子编号" prop="number">
+          <el-input v-model="ruleForm.number"></el-input>
+        </el-form-item>
+        <el-form-item label="柜子登录key" prop="login_key">
+          <el-input v-model="ruleForm.login_key"></el-input>
+        </el-form-item>
+        <el-form-item label="箱子个数" prop="count">
+          <el-input v-model="ruleForm.count"></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -250,25 +123,82 @@
 </template>
 
 <script>
-import {AddCabinet} from '@/api';
+import { cabinetList, boxList, addCabinet } from "@/api";
+import moment from 'moment';
 export default {
   data() {
     return {
-      tabActive: "first",
+      tabActive: "",
       addVisible: false,
       ruleForm: {
-        name: "",
         requrl: "",
-        boxcount: "",
+        alias: "",
+        number: "",
+        login_key: "",
+        count: "",
       },
       rules: {
-        name: [{ required: true, message: "请输入柜子名称", trigger: "blur" }],
-        requrl: [{ required: true, message: "请输入请求地址", trigger: "blur" }],
-        boxcount: [{ required: true, message: "请输入箱子个数", trigger: "blur" }],
+        requrl: [
+          { required: true, message: "请输入请求地址", trigger: "blur" },
+        ],
+        alias: [{ required: true, message: "请输入柜子名称", trigger: "blur" }],
+        number: [
+          { required: true, message: "请输入柜子编号", trigger: "blur" },
+        ],
+        login_key: [
+          { required: true, message: "请输入柜子登录key", trigger: "blur" },
+        ],
+        count: [{ required: true, message: "请输入箱子个数", trigger: "blur" }],
       },
+      cabinetList: [],
+      boxList: [],
     };
   },
+  computed:{
+    diffTime(){
+      return date=>{
+        const currentTime = moment();
+        const startDate = moment(date);
+        const date3=currentTime.diff(startDate,'minute');//计算相差的分钟数
+        const h=Math.floor(date3/60);//相差的小时数
+        const mm=date3%60;//计算相差小时后余下的分钟数
+        return `${h}小时${mm}分钟`;
+        }
+    }
+  },
+  created() {
+    this.getCabinetList();
+  },
   methods: {
+    getCabinetList() {
+      cabinetList().then((res) => {
+        console.log(res);
+        if (res && res.msg == "ok") {
+          this.cabinetList = res.data.rows.map((item) => {
+            item.id = item.id + "";
+            return item;
+          });
+
+          this.boxList = res.data.rows.map(() => {
+            return [];
+          });
+          this.getBoxList(res.data.rows[0].id, 0);
+          this.tabActive = res.data.rows[0].id + "";
+          console.log(this.tabActive);
+        }
+      });
+    },
+    getBoxList(id, cabinetIndex) {
+      const _self = this;
+      boxList({ cabinet_number: id }).then((res) => {
+        console.log(res);
+        if (res && res.data.rows) {
+          let boxList = [..._self.boxList];
+          boxList[cabinetIndex] = res.data.rows;
+          _self.boxList = boxList;
+        }
+      });
+    },
     onCloseAddDialog() {
       this.ruleForm = {};
       this.addVisible = false;
@@ -283,22 +213,31 @@ export default {
     onAddSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-			this.addCabinet();
-		} else {
+          this.addCabinet();
+        } else {
           console.log("error submit!!");
           return false;
         }
       });
     },
-	addCabinet() {
-		let alias = this.ruleForm.name;
-		let url = this.ruleForm.requrl;
-		let count = this.ruleForm.boxcount;
-
-		AddCabinet(alias,url,count).then(res => {
-			console.log(res);
-		});
-	}
+    addCabinet() {
+      let requrl = "";
+      let alias = "";
+      let number = "";
+      let login_key = "";
+      let count = "";
+      addCabinet(requrl,alias,number,login_key,count).then((res) => {
+        console.log(res);
+        if(res && res.msg == 'ok') {
+          this.getCabinetList();
+        }
+      });
+    },
+    onTabClick(e) {
+      if (e.name != "add") {
+        this.getBoxList(e.name, e.index);
+      }
+    },
   },
 };
 </script>

src/pages/subPages/order.vue

@@ -1,95 +1,64 @@
 <template>
   <el-container direction="vertical">
     <el-header height="40px" style="border-bottom: 1px solid #eee">订单管理</el-header>
-    <div style="margin:10px 0;">
-      <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
+    <!-- <div style="margin:10px 0;">
+      <el-date-picker v-model="selectDate" type="date" placeholder="选择日期"></el-date-picker>
       <el-button style="margin-left:10px;" type="primary">查询</el-button>
     </div>
-    <el-table :data="tableData" height="100%" border style="width: 100%">
-      <el-table-column align="center" prop="orderId" label="订单编号"></el-table-column>
-      <el-table-column align="center" prop="salerId" label="销售商号"></el-table-column>
-      <el-table-column align="center" prop="account" label="下单帐号"></el-table-column>
-      <el-table-column align="center" prop="date" label="下单时间"></el-table-column>
-      <el-table-column align="center" prop="goodsName" label="商品名称"></el-table-column>
-      <el-table-column align="center" prop="orderUnit" label="订单单位"></el-table-column>
-      <el-table-column align="center" prop="orderNum" label="订购数量"></el-table-column>
-      <el-table-column align="center" prop="orderStatus" label="订单状态"></el-table-column>
-      <el-table-column align="center" prop="consignee" label="收货人"></el-table-column>
-      <el-table-column align="center" prop="address" label="收货地址"></el-table-column>
+    -->
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column align="center" prop="id" label="订单id"></el-table-column>
+      <el-table-column align="center" prop="order_sn" label="订单号码"></el-table-column>
+      <el-table-column align="center" prop="cabinet_number" label="柜子号码"></el-table-column>
+      <el-table-column align="center" prop="box_number" label="箱子号码"></el-table-column>
+      <el-table-column align="center" prop="code" label="取件码"></el-table-column>
+      <el-table-column align="center" prop="order_status" label="柜子状态"></el-table-column>
+      <el-table-column align="center" prop="enter_time" label="入柜日期"></el-table-column>
+      <el-table-column align="center" prop="out_time" label="离柜日期"></el-table-column>
     </el-table>
     <el-row style="margin-top:10px;" type="flex" justify="end">
-      <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNumber" @current-change="onPageChange"></el-pagination>
     </el-row>
   </el-container>
 </template>
 <script>
+import { orderList } from "@/api";
 export default {
   data() {
     return {
-      tableData: [
-        {
-          orderId: "1",
-          salerId: "12",
-          account: "xxxxxxxx",
-          date: "2016-05-03",
-          goodsName: "xxxxxx",
-          orderUnit: "件",
-          orderNum: "1",
-          orderStatus: "已取",
-          consignee: "王小虎",
-          address: "xxxx市xxx小区"
-        },
-        {
-          orderId: "2",
-          salerId: "13",
-          account: "xxxxxxxx",
-          date: "2016-05-03",
-          goodsName: "xxxxxx",
-          orderUnit: "件",
-          orderNum: "1",
-          orderStatus: "已取",
-          consignee: "王小虎",
-          address: "xxxx市xxx小区"
-        },
-        {
-          orderId: "3",
-          salerId: "14",
-          account: "xxxxxxxx",
-          date: "2016-05-03",
-          goodsName: "xxxxxx",
-          orderUnit: "件",
-          orderNum: "1",
-          orderStatus: "已取",
-          consignee: "王小虎",
-          address: "xxxx市xxx小区"
-        },
-        {
-          orderId: "4",
-          salerId: "15",
-          account: "xxxxxxxx",
-          date: "2016-05-03",
-          goodsName: "xxxxxx",
-          orderUnit: "件",
-          orderNum: "1",
-          orderStatus: "已取",
-          consignee: "王小虎",
-          address: "xxxx市xxx小区"
-        },
-        {
-          orderId: "5",
-          salerId: "16",
-          account: "xxxxxxxx",
-          date: "2016-05-03",
-          goodsName: "xxxxxx",
-          orderUnit: "件",
-          orderNum: "1",
-          orderStatus: "已取",
-          consignee: "王小虎",
-          address: "xxxx市xxx小区"
-        }
-      ]
+      tableData: [],
+      pageSize: 10,
+      pageNumber: 1,
+      total: 0,
     };
-  }
+  },
+  mounted() {
+    this.getOrderList();
+  },
+  methods: {
+    getOrderList() {
+      const _self = this;
+      orderList({ pageSize: _self.pageSize, pageNumber: _self.pageNumber }).then(
+        (res) => {
+          if (res && res.msg == "ok") {
+            _self.total = res.data.total;
+            _self.tableData = [...res.data.rows];
+          }
+        }
+      );
+    },
+    onPageChange(page){
+      if(page == this.pageNumber) {
+        return;
+      }
+      else {
+        this.pageNumber = page;
+        setTimeout(()=>{
+          this.getOrderList();
+        },0)
+      }
+    }
+  },
 };
 </script>
 <style scoped>

src/pages/subPages/view.vue

@@ -1,57 +1,136 @@
 <template>
   <el-container direction="vertical">
-    <el-header height="40px" style="border-bottom: 1px solid #eee">订单管理</el-header>
+    <el-header height="40px" style="border-bottom: 1px solid #eee">操作记录</el-header>
     <div style="margin:10px 0;">
-      <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
-      <el-button style="margin-left:10px;" type="primary">查询</el-button>
+      <el-form :inline="true">
+        <el-form-item label="选择柜子">
+          <el-select v-model="cabinetValue" placeholder="请选择" @change="onChangeCabinet">
+            <el-option
+              v-for="item in cabinetOptions"
+              :key="item.id"
+              :label="item.alias"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择箱子">
+          <el-select v-model="boxValue" placeholder="请选择">
+            <el-option
+              v-for="item in boxOptions"
+              :key="item.box_number"
+              :label="item.box_number"
+              :value="item.box_number"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            style="margin-left:10px;"
+            type="primary"
+            :disabled="disSearch"
+            @click="onSearch"
+          >查询</el-button>
+        </el-form-item>
+      </el-form>
     </div>
-    <el-table :data="tableData" height="100%" border style="width: 100%">
-      <el-table-column align="center" prop="boxId" label="箱号"></el-table-column>
-      <el-table-column align="center" prop="date" label="日期"></el-table-column>
-      <el-table-column align="center" prop="time" label="时间"></el-table-column>
-      <el-table-column align="center" prop="name" label="姓名"></el-table-column>
-      <el-table-column align="center" prop="openType" label="打开方式"></el-table-column>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column align="center" prop="id" label="ID"></el-table-column>
+      <el-table-column align="center" prop="cabinet_number" label="柜号"></el-table-column>
+      <el-table-column align="center" prop="box_number" label="箱号"></el-table-column>
+      <el-table-column align="center" prop="type" label="操作类型"></el-table-column>
+      <el-table-column align="center" prop="datetime" label="操作日期"></el-table-column>
       <el-table-column align="center" prop="pic" label="图片">
         <el-image style="width:100%;height:80px;"></el-image>
       </el-table-column>
     </el-table>
     <el-row style="margin-top:10px;" type="flex" justify="end">
-      <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+        @current-change="onPageChange"
+        :current-page="pageNumber"
+      ></el-pagination>
     </el-row>
   </el-container>
 </template>
 <script>
+import { boxActionList, cabinetList, boxList } from "@/api";
 export default {
   data() {
     return {
-      tableData: [
-        {
-          boxId: "1",
-          date: "2020-05-11",
-          time: "12:00",
-          name: "黄先生",
-          openType: "开箱",
-          pic: ""
-        },
-        {
-          boxId: "2",
-          date: "2020-05-11",
-          time: "12:00",
-          name: "黄先生",
-          openType: "开箱",
-          pic: ""
-        },
-        {
-          boxId: "3",
-          date: "2020-05-11",
-          time: "12:00",
-          name: "黄先生",
-          openType: "开箱",
-          pic: ""
-        }
-      ]
+      pageSize: 1,
+      pageNumber: 1,
+      cabinetValue: "",
+      cabinetOptions: [],
+      boxOptions: [],
+      boxValue: "",
+      tableData: [],
+      total: 0,
     };
-  }
+  },
+  created() {
+    this.getCabinetList();
+  },
+  computed: {
+    disSearch() {
+      return this.cabinetValue == "" || this.boxValue == "";
+    },
+  },
+  methods: {
+    onChangeCabinet(value) {
+      if (value) {
+        this.getBoxList();
+      }
+      console.log(value);
+    },
+    getCabinetList() {
+      cabinetList().then((res) => {
+        console.log(res);
+        if (res && res.msg == "ok") {
+          this.cabinetOptions = res.data.rows;
+        }
+      });
+    },
+    getBoxList() {
+      boxList({ cabinet_number: this.cabinetValue }).then((res) => {
+        if (res && res.msg == "ok") {
+          this.boxOptions = res.data.rows;
+        }
+      });
+    },
+    getBoxActionList() {
+      boxActionList({
+        cabinet_number: this.cabinetValue,
+        box_number: this.boxValue,
+        pageSize: this.pageSize,
+        pageNumber: this.pageNumber,
+      }).then((res) => {
+        console.log(res);
+        if (res && res.msg == "ok") {
+          this.total = res.data.total;
+          this.tableData = res.data.rows;
+        }
+      });
+    },
+    onPageChange(page) {
+      if (page == this.pageNumber) {
+        return;
+      } else {
+        this.pageNumber = page;
+        setTimeout(() => {
+          this.getBoxActionList();
+        }, 0);
+      }
+    },
+    onSearch() {
+      this.pageNumber = 1;
+      setTimeout(() => {
+        this.getBoxActionList();
+      }, 0);
+    },
+  },
 };
 </script>
 <style scoped>

vue.config.js

@@ -1,6 +1,6 @@
 
-//const targetUrl = 'http://39.97.239.116:8080';
-const targetUrl = 'http://192.168.1.200:8080';
+const targetUrl = 'http://39.97.239.116:8080';
+// const targetUrl = 'http://192.168.1.200:8080';
 
 module.exports = {
     publicPath:'./',