123

jsconfig.json

@@ -1,4 +1,5 @@
 {
+    // https://juejin.im/post/5a9fae575188255574593aeb
     "compilerOptions": {
         "baseUrl": "./",
         "paths": {

public/index.html

@@ -17,12 +17,7 @@
   <div id="app"></div>
   <!-- ali iconfont  -->
   <!-- <script src="/static/iconfont/iconfont.js"></script> -->
-  <!-- <script src="//at.alicdn.com/t/font_1118495_6ibsffxed7y.js"></script> -->
+  <script src="//at.alicdn.com/t/font_1118495_58987hxbrdb.js"></script>
-  <script src="//at.alicdn.com/t/font_1118495_x0l7sgouyg9.js"></script>
-  <script src="//at.alicdn.com/t/font_1118495_l9d2ctejxr.js"></script>
-  <script src="//at.alicdn.com/t/font_1118495_8gx7uj5mos9.js"></script>
-  <script src="//at.alicdn.com/t/font_1118495_qy9m22tik77.js"></script>
-  <script src="//at.alicdn.com/t/font_1118495_gv94woly42.js"></script>
   <!-- lodash -->
   <script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.min.js"></script>
   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

src/App.vue

@@ -9,3 +9,7 @@ export default {
   name: 'App'
 }
 </script>
+<style>
+
+</style>
+

src/api/common.js

@@ -78,3 +78,13 @@ export function GET_LOCALTION_TYPE(params) {
         params
     }).then(res => res.data.data)
 }
+
+
+
+export function GET_clientsSel(params) {
+    return request({
+        url: "/api/admin/clients/select",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+}

src/api/devices.js

@@ -50,6 +50,8 @@ export function GET_DEVICE_DETAIL(params) {
     }).then(res => res.data.data)
 }
 
+
+
 export function UPDATE_DEVICE(params) {
     return request({
         url: `/api/admin/devices/update?id=${params.id}`,

src/api/devicesStatus.js

@@ -8,6 +8,8 @@ export function get_shelfs_device_lists(params) {
     }).then(res => res.data.data)
 }
 
+
+
 export function get_shelfs_device_summary(params) {
     return request({
         url: "/api/admin/shelfs/devices/summary",
@@ -24,6 +26,14 @@ export function get_shelfs_device_detail(id) {
         params: { id }
     }).then(res => res.data.data)
 }
+
+export function get_shelfs_device_detail_vm(id) {
+    return request({
+        url: "/api/admin/shelfs/devices/vmDetail",
+        method: 'get',
+        params: { id }
+    }).then(res => res.data.data)
+}
 export function put_shelfs_device_detail(params) {
     return request({
         url: `/api/admin/shelfs/devices?deviceId=${params.deviceId}`,
@@ -31,3 +41,29 @@ export function put_shelfs_device_detail(params) {
         data: params
     }).then(res => res.data.data)
 }
+export function put_shelfs_device_detail_vm(params) {
+    return request({
+        url: `/api/admin/shelfs/devices/vm?deviceId=${params.deviceId}`,
+        method: 'post',
+        data: params
+    }).then(res => res.data.data)
+}
+
+
+
+// api/admin/shelfs/devices/vmDetail
+export function shelfs_devices_vmDetail(id) {
+    return request({
+        url: `/api/admin/shelfs/devices/vmDetail?id=${id}`,
+        method: 'get',
+        data: { id }
+    }).then(res => res.data.data.rows)
+}
+//修改 大售货机状态/
+export function post_shelfs_devices_vmDetail(params) {
+    return request({
+        url: `/api/admin/shelfs/devices/vm?deviceId=${params.deviceId}`,
+        method: 'post',
+        data: params
+    }).then(res => res.data.data)
+}

src/api/orgManage.js

@@ -15,6 +15,9 @@ export function GET_clients(params) {
     }).then(res => res.data.data)
 }
 
+
+
+
 /**
  * 组织管理 --  新建组织
  * @param params
@@ -30,14 +33,14 @@ export function POST_clients(params) {
 }
 
 /**
- * 组织管理 --  新建组织
+ * 组织管理 --  更新组织
  * @param params
  * @returns {Q.Promise<any>}
  * @constructor
  */
 export function PUT_clients(params) {
     return request({
-        url: "/api/admin/clients",
+        url: "/api/admin/clients?id=" + params.id,
         method: 'put',
         data: params
     }).then(res => res.data.data)

src/api/privilegeManagement.js

@@ -120,7 +120,7 @@ export function PASSWORD_ACCOUNT_LIST(params) {
  */
 export function COUNT_ACCOUNT_LIST(params) {
     return request({
-        url: "/api/admin/accounts/count",
+        url: "/api/admin/accounts/count?clientId=" + params,
         method: 'get',
         data: params
     }).then(res => res.data.data)

src/api/replenishment.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+/**
+ *  货道补货 -- 酒店售货机 and  自助售货机 详情
+ * @param params
+ * @returns {Promise<T | never>}
+ * @constructor
+ */
+export function GET_DEVICEINFO(params) {
+    return request({
+        url: "/api/admin/restocks/deviceInfo?deviceId=" + params,
+        method: 'get',
+    }).then(res => res.data.data)
+}
+
+
+/**
+ *  货道补货 -- 酒店售货机 and 自助售货机 开门补货
+ * @param params
+ * @returns {Promise<T | never>}
+ * @constructor
+ */
+export function POST_RESTOCKS(params) {
+    return request({
+        url: "/api/admin/restocks?deviceId=" + params.deviceId,
+        method: 'post',
+        data:params
+    }).then(res => res.data.data)
+}
+
+
+/**
+ *  货道补货 --   一键开门
+ * @param params
+ * @returns {Promise<T | never>}
+ * @constructor
+ */
+export function POST_OPENDOOR(params) {
+    return request({
+        url: "/api/admin/quxia/remote/openDoors?deviceId=" + params.deviceId,
+        method: 'post',
+        data:params
+    }).then(res => res.data.data)
+}
+
+
+
+/**
+ *  货道补货 --   酒店售货机 确认补货
+ * @param params
+ * @returns {Promise<T | never>}
+ * @constructor
+ */
+export function POST_RESTOCKS_UPDATE(params) {
+    return request({
+        url: "/api/admin/restocks/update?deviceId=" + params.deviceId,
+        method: 'post',
+        data:params
+    }).then(res => res.data.data)
+}
+
+
+
+
+
+
+
+
+
+

src/api/shelfs.js

@@ -30,6 +30,13 @@ export function postShelf(params) {
         data: params
     }).then(res => res.data.data)
 }
+export function postShelfvm(params) {
+    return request({
+        url: '/api/admin/shelfs/vm',
+        method: 'post',
+        data: params
+    }).then(res => res.data.data)
+}
 export function deleteShelf(id) {
     return request({
         url: '/api/admin/shelfs',
@@ -45,6 +52,13 @@ export function putShelf(params) {
         data: params
     }).then(res => res.data.data)
 }
+export function putShelfvm(params) {
+    return request({
+        url: `/api/admin/shelfs/vm?id=${params.id}`,
+        method: 'put',
+        data: params
+    }).then(res => res.data.data)
+}
 
 export function getShelfCount(params) {
     return request({

src/api/valueAddedManagement.js

@@ -0,0 +1,84 @@
+import request from '@/utils/request'
+
+const url = '/api/admin';
+
+/**
+ * 增值功能-数据统计 / 数据汇总
+ * @param params
+ * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}
+ * @constructor
+ */
+export function GET_SUMMARY(params) {
+    return request({
+        url: url + "/channels/analytics/summary",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+
+}
+
+
+/**
+ * 增值功能-数据统计 / 增值渠道订单列表
+ * @param params
+ * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}
+ * @constructor
+ */
+export function GET_LIST_ORDERS(params) {
+    return request({
+        url: url + "/channels/orders",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+}
+
+
+/**
+ *  增值功能-数据统计 / 增值渠道列表
+ * @param params
+ * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}
+ * @constructor
+ */
+export function GET_SELECT(params) {
+    return request({
+        url: url + "/channels/select",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+
+}
+
+
+
+
+/**
+ *  增值功能-数据统计 / 增值订单详情
+ * @param params
+ * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}
+ * @constructor
+ */
+export function GET_LIST_ORDERS_DETAIL(params) {
+    return request({
+        url: url + "/channels/orders/detail",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+
+}
+
+
+/**
+ *  增值功能-数据统计 / 增值渠道订单总数
+ * @param params
+ * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}
+ * @constructor
+ */
+export function GET_ORDERS_COUNT(params) {
+    return request({
+        url: url + "/channels/orders/count",
+        method: 'get',
+        params
+    }).then(res => res.data.data)
+
+}
+

src/config.js

@@ -1,8 +1,13 @@
-// export const BASE_API = "https://rapapi.renqilai.com/app/mock/39";
 
+export const DEVICE_TYPE_SMALL = "quxia"
+export const DEVICE_TYPE_BIG = "quxia-vm"
 export const client_id = 'test'
 export const client_secret = "test"
-export const BASE_API = "http://192.168.0.222:8080"
+export const BASE_API = "http://192.168.0.222:8080";
+// export const BASE_API = "http://192.168.0.252:9090"
 // export const BASE_API = "https://quxiaapi.renqilai.com"
-
+// export const BASE_API = "https://rapapi.renqilai.com/app/mock/39";
 export const pageSize = 20
+
+export const SHELF_MAX_ROW=7
+export const SHELF_MAX_COLOUM=12

src/router/modules/shelfs.js

@@ -10,14 +10,34 @@ const route = {
             component: () => import('@/views/shelfs/list'),
             name: "shelfs_list",
             meta: {
-                title: '货道列表', noCache: false, affix: false
+                title: '货道模板', noCache: false, affix: false
             },
         },
         {
             path: '/shelfs/status',
             component: () => import('@/views/shelfs/status'),
             name: "shelfs_status",
-            meta: { title: '货道状态', noCache: false, affix: false },
+            meta: { title: '设备货道', noCache: false, affix: false },
+        },
+        {
+            path: '/shelfs/replenishment',
+            component: () => import('@/views/shelfs/replenishment'),
+            name: "shelfs_replenishment",
+            meta: { title: '货道补货', noCache: false, affix: false },
+        },
+        {
+            path: '/shelfs/replenishment/quxia',
+            hidden: true,
+            component: () => import('@/views/shelfs/replenishment/quxia'),
+            name: "shelfs_quxia",
+            meta: { title: '货道补货-酒店售货机', noCache: false, affix: false },
+        },
+        {
+            path: '/shelfs/replenishment/quxia-vm',
+            hidden: true,
+            component: () => import('@/views/shelfs/replenishment/quxia-vm'),
+            name: "shelfs_quxia-vm",
+            meta: { title: '货道补货-自助售货机', noCache: false, affix: false },
         },
         {
             path: '/shelfs/detail',

src/router/modules/valueAddedManagement.js

@@ -0,0 +1,40 @@
+import Layout from '@/views/layout/Layout'
+
+const valueAddedManagement = {
+    path: '/valueAddedManagement',
+    component: Layout,
+    meta: {title: '增值管理', icon: 'guanggaoguanli', noCache: true, affix: false},
+    children: [
+        {
+            path: '/valueAddedAtatistics/index',
+            component: () => import('@/views/valueAddedManagement/valueAddedAtatistics/index'),
+            name: '增值统计',
+            meta: {title: '增值统计', noCache: false, affix: false}
+        },
+        {
+            path: '/valueAddedAtatistics/channelDetails',
+            component: () => import('@/views/valueAddedManagement/valueAddedAtatistics/channelDetails'),
+            hidden:true,
+            name: '渠道详情',
+            meta: {title: '渠道详情', noCache: false, affix: false},
+
+        },
+        {
+            path: '/advertisingManagement/orderDetails',
+            component: () => import('@/views/valueAddedManagement/valueAddedAtatistics/orderDetails'),
+            hidden:true,
+            name: '订单详情',
+            meta: {title: '订单详情', noCache: false, affix: false},
+
+        },
+        {
+            path: '/distributionSettings/index',
+            component: () => import('@/views/valueAddedManagement/distributionSettings/index'),
+            name: '分润设置',
+            meta: {title: '分润设置', noCache: false, affix: false},
+
+        },
+    ]
+};
+
+export default valueAddedManagement

src/store/modules/tagsView.js

@@ -62,6 +62,8 @@ const tagsView = {
       state.cachedViews = []
     },
 
+
+
     UPDATE_VISITED_VIEW: (state, view) => {
       for (let v of state.visitedViews) {
         if (v.path === view.path) {

src/styles/list.scss

@@ -0,0 +1,17 @@
+.list {
+    display: flex;
+
+    .label {
+        text-align        : right;
+        float             : left;
+        font-size         : 14px;
+        color             : #606266;
+        line-height       : 40px;
+        padding           : 0 12px 0 0;
+        font-weight       : 600;
+        -webkit-box-sizing: border-box;
+        box-sizing        : border-box;
+    }
+
+    .value {}
+}

src/utils/date.js

@@ -27,7 +27,8 @@ export function getToday() {
         start: a,
         end: a,
         laststart: b,
-        lastend: b
+        lastend: b,
+        siez:10
     }
 }
 export function getLastWeek() {
@@ -36,6 +37,7 @@ export function getLastWeek() {
         end: moment().endOf('isoWeek').format('YYYY-MM-DD'),
         laststart: moment().add(-1, 'weeks').startOf('isoWeek').format('YYYY-MM-DD'),
         lastend: moment().add(-1, 'weeks').startOf('isoWeek').format('YYYY-MM-DD'),
+        siez:10
     }
 }
 
@@ -45,5 +47,6 @@ export function getLastMonth() {
         end: moment().endOf('months').format('YYYY-MM-DD'),
         laststart: moment().add(-1, 'months').startOf('isoWeek').format('YYYY-MM-DD'),
         lastend: moment().add(-1, 'months').startOf('isoWeek').format('YYYY-MM-DD'),
+        siez:10
     }
 }

src/views/commodityManagement/commodityClassification/classification.vue

@@ -104,7 +104,7 @@
         ORDERS_CATEGORIES
     } from '@/api/commodityManagement'
 
-    import {dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "classification",
@@ -283,7 +283,7 @@
         },
         filters: {
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/dashboard/dateHeader.vue

@@ -34,7 +34,8 @@ export default {
         this.type = "";
         this.$emit("sure", {
           start: dateFormate(value[0]),
-          end: dateFormate(value[1])
+          end: dateFormate(value[1]),
+          siez:10
         });
       } else {
         this.selectTime("today");

src/views/layout/components/rightMenu/rightMenu.vue

@@ -33,6 +33,7 @@
 <script>
     import logoSrc from '@/assets/quxia.png'
     import { getCookie } from "../../../../utils/cookie";
+    import { mapState, mapActions } from "vuex";
     export default {
         data(){
           return{
@@ -45,6 +46,9 @@
             this.user = JSON.parse(LoginByUsername).username
         },
         methods: {
+            ...mapActions([
+                "delAllVisitedViews"
+            ]),
             getCookie(name) {
                 let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                 if (arr = document.cookie.match(reg)){
@@ -61,6 +65,7 @@
                 if (Cookie != null) {
                     document.cookie = 'access_token' + "=" + Cookie + ";expires=" + exp.toGMTString();
                 }
+                this.delAllVisitedViews();
                 setTimeout(() => {
                     this.$router.push('/login')
                 }, 100)

src/views/login/index.vue

@@ -18,7 +18,7 @@
         </span>
         <el-input
           v-model="loginForm.username"
-          :placeholder="'username'"
+          :placeholder="'请输入用户名'"
           name="username"
           type="text"
           auto-complete="on"
@@ -32,7 +32,7 @@
         <el-input
           v-model="loginForm.password"
           :type="passwordType"
-          :placeholder="'password'"
+          :placeholder="'请输入密码'"
           name="password"
           auto-complete="on"
           @keyup.enter.native="handleLogin"

src/views/marketingCenter/couponManagement/index.vue

@@ -174,7 +174,7 @@
 
     import Alert from "@/utils/alert";
     import {pageSize} from '../../../config';
-    import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index";
+    import {FormateYYMMDD, dateTimeFormate} from "@/filters/index";
 
     const FormContainer = () => import('./form.vue');
     const CouponDetails = () => import('./couponDetails.vue');
@@ -459,7 +459,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/marketingCenter/luckyDraw/index.vue

@@ -99,7 +99,7 @@
 
     const FormContainer = () => import('./form.vue');
 
-    import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "index",
@@ -138,7 +138,7 @@
                             item.date = '永久有效';
                         } else {
 
-                            item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate);
+                            item.date = dateTimeFormate(item.startDate) + ' 至 ' + dateTimeFormate(item.endDate);
                         }
                         return item
                     });
@@ -249,7 +249,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/marketingCenter/luckyFree/index.vue

@@ -99,7 +99,7 @@
 
     const FormContainer = () => import('./form.vue');
 
-    import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "index",
@@ -138,7 +138,7 @@
                             item.date = '永久有效';
                         } else {
 
-                            item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate);
+                            item.date = dateTimeFormate(item.startDate) + ' 至 ' + dateTimeFormate(item.endDate);
                         }
                         return item
                     });
@@ -249,7 +249,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/marketingCenter/noviceCourtesy/index.vue

@@ -112,7 +112,7 @@
 
     const FormContainer = () => import('./form.vue');
 
-    import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index";
+    import {FormateYYMMDD,dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "index",
@@ -151,7 +151,7 @@
                             item.date = '永久有效';
                         } else {
 
-                            item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate);
+                            item.date = dateTimeFormate(item.startDate) + ' 至 ' + dateTimeFormate(item.endDate);
                         }
                         return item
                     });
@@ -312,7 +312,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/marketingCenter/paymentOfCourtesy/index.vue

@@ -98,7 +98,7 @@
 
     const FormContainer = () => import('./form.vue');
 
-    import {FormateYYMMDD ,dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "index",
@@ -137,7 +137,7 @@
                             item.date = '永久有效';
                         } else {
 
-                            item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate);
+                            item.date = dateTimeFormate(item.startDate) + ' 至 ' + dateTimeFormate(item.endDate);
                         }
                         return item
                     });
@@ -248,7 +248,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/marketingCenter/salesPromotion/index.vue

@@ -108,7 +108,7 @@
 
     const FormContainer = () => import('./form.vue');
 
-    import {FormateYYMMDD, dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
 
     export default {
         name: "index",
@@ -147,7 +147,7 @@
                             item.date = '永久有效';
                         } else {
 
-                            item.date = dateTimeFormateHHmm(item.startDate) + ' 至 ' + dateTimeFormateHHmm(item.endDate);
+                            item.date = dateTimeFormate(item.startDate) + ' 至 ' + dateTimeFormate(item.endDate);
                         }
                         return item
                     });
@@ -308,7 +308,7 @@
                 }
             },
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     }

src/views/order/salesOrder/index.vue

@@ -177,7 +177,7 @@
                     return 'N/A';
                 }
                 let date = new Date(time);
-                return moment(date).format('YYYY-MM-DD hh:mm:ss');
+                return moment(date).format('YYYY-MM-DD HH:mm:ss');
             }
         }
     }

src/views/orgManage/orgManage/index.vue

@@ -94,6 +94,9 @@
                             <el-table-column
                                     prop="createdDate"
                                     label="创建时间">
+                                <template slot-scope="lists">
+                                    <span>{{lists.row.createdDate |filterCreatedDate}}</span>
+                                </template>
                             </el-table-column>
                         </el-table>
                     </div>
@@ -102,7 +105,7 @@
                                 background
                                 :page-size="listParams.size"
                                 layout="prev, pager, next"
-                                :total="50"
+                                :total="count"
                                 @current-change="currentChange1"
                         >
                         </el-pagination>
@@ -114,6 +117,9 @@
 
         <el-dialog
                 title="新增组织"
+                :show-close="false"
+                :close-on-press-escape="false"
+                :close-on-click-modal="false"
                 :visible.sync="orgOpi"
                 width="400px">
             <el-form ref="ruleForm" :model="form" label-width="100px">
@@ -139,23 +145,28 @@
                 </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
-                <el-button @click="orgOpi = false">取 消</el-button>
+                <el-button @click="orgOptCancel">取 消</el-button>
                 <el-button type="primary" @click="orgOptConfirm" :loading="isLoading">确 定</el-button>
           </span>
         </el-dialog>
 
 
-
-
     </div>
 </template>
 
 <script>
     import {GET_clients, POST_clients, PUT_clients, DETAIL_clients} from '@/api/orgManage'
     import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement'
-    import {dateTimeFormateHHmm} from "@/filters/index";
+    import {dateTimeFormate} from "@/filters/index";
     import {pageSize} from "../../../config";
 
+
+    import {
+        COUNT_ACCOUNT_LIST
+    } from '@/api/privilegeManagement'
+
+    import Alert from "@/utils/alert";
+
     export default {
         data() {
             return {
@@ -163,6 +174,7 @@
                 isLoading: false,
                 orgOpiEdit: false,
                 currTreeId: '',
+                count:0,
                 listParams: {
                     size: pageSize,
                     from: 0,
@@ -194,6 +206,7 @@
             currTreeId() {
                 this.DETAIL_clients();
                 this.GET_ACCOUNT_LIST();
+                this.COUNT_ACCOUNT_LIST();
             }
         },
         methods: {
@@ -236,12 +249,18 @@
                 })
             },
 
+            COUNT_ACCOUNT_LIST(){
+                COUNT_ACCOUNT_LIST(this.currTreeId).then(res=>{
+                    this.count = res;
+                })
+            },
+
             /**
              * 成员管理
              */
 
             memberManagement(data) {
-                this.$router.push('/privilegeManagement/account')
+                this.$router.push('/privilegeManagement/account?clientId='+ this.currTreeId)
             },
 
             /**
@@ -268,7 +287,15 @@
                 this.form = this.orgInfo
             },
 
+            /**
+             *
+             * 取消
+             */
 
+            orgOptCancel() {
+                this.orgOpi = false;
+                this.DETAIL_clients()
+            },
 
             /**
              * 确定 新增/编辑 组织
@@ -289,15 +316,22 @@
                             PUT_clients({...obj}).then(res => {
                                 this.orgOpi = false;
                                 this.isLoading = false;
+                                this.GET_clients();
+                                this.DETAIL_clients()
                             }).catch(err => {
                                 this.isLoading = false;
                             })
                         } else {
                             this.form.parentId = this.currTreeId;
                             POST_clients({...this.form}).then(res => {
+
                                 this.orgOpi = false;
                                 this.isLoading = false;
+                                this.GET_clients();
+                                this.DETAIL_clients()
                             }).catch(err => {
+                                Alert.fail('管理员账号不能重复');
+                                console.log(err);
                                 this.isLoading = false;
                             })
 
@@ -310,7 +344,7 @@
         },
         filters: {
             filterCreatedDate(val) {
-                return dateTimeFormateHHmm(val)
+                return dateTimeFormate(val)
             }
         }
     };

src/views/privilegeManagement/account/form.vue

@@ -5,7 +5,12 @@
                 <el-input v-model="formInline.name" placeholder="名称搜索"></el-input>
             </el-form-item>
             <el-form-item label="组织搜索">
-                <el-input v-model="formInline.name" placeholder="组织搜索"></el-input>
+                <el-cascader
+                        :options="options"
+                        v-model="selectOptionValue"
+                        change-on-select
+                        clearable
+                ></el-cascader>
             </el-form-item>
             <el-form-item style="padding-left:30px">
                 <el-button type="default" @click="resetForm1('formInline')">重置</el-button>
@@ -16,16 +21,45 @@
 </template>
 
 <script>
+
+    import {GET_clientsSel} from '@/api/common'
+
     export default {
         name: 'form-container',
-        props:['label'],
+        props: ['label'],
         data() {
             return {
                 formInline: {
-                    name: ''
+                    name: '',
+                    clientId: ''
+                },
+                selectOptionValue: [],
+                options: []
+            }
+        },
+        mounted() {
+            let that = this;
+            GET_clientsSel().then(res => {
+                this.options = JSON.parse(JSON.stringify(res).replace(/id/g, 'value').replace(/name/g, 'label').replace(/subs/g, 'children'));
+
+
+                setTimeout(() => {
+                    let ids = [];
+
+                    for (var i = 0; i < this.options.length; i++) {
+                        that.findNodePath(ids, this.options[i], parseInt(this.$route.query.clientId));
                     }
+                    this.selectOptionValue = ids;
+                }, 100)
+            })
+        },
+        watch: {
+            selectOptionValue: function (newValue) {
+                this.formInline.clientId = newValue[newValue.length - 1];
             }
         },
+
+
         methods: {
             onSubmit() {
                 this.$emit('submit', this.formInline)
@@ -34,8 +68,28 @@
                 this.formInline = {
                     name: ''
                 };
+                this.selectOptionValue = []
                 this.$emit('resetForm');
 
+            },
+            findNodePath(parentIds, node, targetId) {
+                if (node.value === targetId) {
+                    parentIds.push(targetId);
+                    return parentIds;
+                }
+                if (node.children && node.children.length > 0) {
+
+                    parentIds.push(node.value);
+
+                    for (let i = 0; i < node.children.length; i++) {
+                        let sub = node.children[i];
+                        let result = this.findNodePath(parentIds, sub, targetId);
+                        if (result) {
+                            return parentIds;
+                        }
+                    }
+                    parentIds.splice(parentIds.length - 1, 1);
+                }
             }
         }
     }

src/views/privilegeManagement/account/index.vue

@@ -37,6 +37,10 @@
                         prop="state"
                         label="账号状态">
                 </el-table-column>
+                <el-table-column
+                        prop="createdDate"
+                        label="创建时间">
+                </el-table-column>
                 <el-table-column
                         fixed="right"
                         label="操作"
@@ -115,8 +119,11 @@
         DISABLE_ACCOUNT_LIST
     } from '@/api/privilegeManagement'
 
+    import {GET_clientsSel} from '@/api/common'
+
     import Alert from "@/utils/alert";
     import {pageSize} from '../../../config';
+    import {dateTimeFormate} from "@/filters/index";
 
     const FormContainer = () => import('./form.vue');
 
@@ -142,6 +149,10 @@
             }
         },
         mounted() {
+            this.params={
+                ...this.params,
+                clientId:this.$route.query.clientId
+            };
             this.getList();
             this.getCount();
         },
@@ -157,6 +168,7 @@
                 GET_ACCOUNT_LIST(this.params).then(res => {
                     res.map((item) => {
                         item.state = item.enabled == true ? '启用' : '禁用';
+                        item.createdDate = dateTimeFormate(item.createdDate);
                         return item
                     });
                     this.lists = res
@@ -168,7 +180,7 @@
              * 获取总数
              */
             getCount() {
-                COUNT_ACCOUNT_LIST().then(res => {
+                COUNT_ACCOUNT_LIST(this.$route.query.clientId).then(res => {
                     this.count = res
                 });
             },
@@ -177,9 +189,11 @@
              * 查询
              */
             submitForm(res) {
+                console.log(res);
                 this.params = {
                     ...this.params,
-                    query: res.name
+                    query: res.name,
+                    clientId: res.clientId
                 };
                 this.getList()
             },
@@ -191,7 +205,8 @@
                 this.params = {
                     from: 0,
                     size: pageSize,
-                    query: ''
+                    query: '',
+                    clientId: ''
                 };
                 this.getList()
             },

src/views/shelfs/add/index.vue

@@ -1,57 +1,202 @@
 <template>
-  <div class="page" v-loading="loading">
+  <div
-    <header>
+    class="page"
-      <h3>新增方案</h3>
+    v-loading="loading"
-      <div style="display:flex">
+  >
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <header class="fixed-header">
+      <h3 style="margin-bottom:30px;">新增方案</h3>
+      <div
+        class="row1"
+        style="display:flex"
+      >
+        <!-- 设备类型 row -->
+        <div class="select-row list">
+          <div class="label">设备类型</div>
+          <div class="value value-1">
+            <el-select
+              v-model="deviceTypeId"
+              :clearable="true"
+              placeholder="设备类型"
+              :disabled="isSelectStatus"
+            >
+              <el-option
+                v-for="item in deviceTypes"
+                :label="item.name"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-button
+              type="primary"
+              class="btn"
+              @click="sure2type"
+              v-if="!isSelectStatus"
+            >确定类型</el-button>
+          </div>
+          <!-- form  -->
+          <div
+            style="display:flex;margin-left:10px"
+            v-if="isSelectStatus"
+          >
+            <el-form
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+            >
               <el-form-item label="名称">
-            <el-input v-model="formInline.name" placeholder="方案名称"></el-input>
+                <el-input
-          </el-form-item>
+                  v-model="formInline.name"
-          <el-form-item label="货道数目">
+                  placeholder="方案名称"
-            <el-input-number
+                ></el-input>
-              v-model="formInline.shelfCount"
-              @change="handleChange"
-              :min="0"
-              :max="40"
-              :controls="true"
-              label="货道"
-            ></el-input-number>
               </el-form-item>
               <el-form-item style="padding-left:30px">
-            <el-button type="primary" @click="onSubmit">提交</el-button>
+                <el-button
+                  type="primary"
+                  @click="onSubmit"
+                >提交</el-button>
               </el-form-item>
             </el-form>
-        <div class="rightbtns">
+          </div>
+        </div>
+      </div>
+      <!-- 修改的btns -->
+      <div
+        class="btns"
+        v-if="isSelectStatus"
+      >
+        <el-checkbox
+          @change="check_all"
+          label="全选"
+          border
+          class="check-btn"
+        ></el-checkbox>
         <el-button @click="pilian">批量编辑</el-button>
+
+        <!-- 小 -->
+        <div
+          class="list"
+          v-if="isSmallType"
+          style="position:relative;top:7px;left:10px;"
+        >
+          <div class="label">货道数目</div>
+          <div class="value">
+            <el-input-number
+              size="small"
+              @change="change_huodao"
+              :min="0"
+              :value="$data.detail.shelfs.length"
+            ></el-input-number>
+          </div>
+        </div>
+        <!-- 大-->
+        <div
+          class="list"
+          v-if="!isSmallType"
+        >
+          <div class="value">
+            <el-input-number
+              size="small"
+              style="margin-left:10px"
+              @change="change_cheng"
+              :min="0"
+              :max="SHELF_MAX_ROW"
+              :value="$data.detail.shelfs.length"
+            ></el-input-number>
+            <small style="position:relative;top:8px;left:10px;">层</small>
+          </div>
         </div>
       </div>
     </header>
 
-    <div class="row" v-if="detail.shelfs.length>0">
+    <!-- 小售货机 -->
+    <div
+      class="row-container small"
+      v-if="detail.shelfs.length>0&&isSelectStatus&&isSmallType"
+    >
       <ListItem
         class="item"
+        @deleteItem="deleteItem"
         v-for="item in detail.shelfs"
         :key="item.id"
         :visible.sync="editModalState"
+        :isSmallType="isSmallType"
         :item="item"
-        @selectItem="selectItem"
+        @selectItem="selectItems"
         :editItem.sync="editItem"
+      />
+    </div>
+
+    <!-- 大售货机 -->
+    <div
+      class="row-container big"
+      v-if="detail.shelfs.length!=0&&isSelectStatus&&!isSmallType"
+    >
+      <div
+        class="row"
+        v-for="(row,index) in  $data.detail.shelfs"
+        :key="index"
+      >
+        <header class="header1">
+          <h3>第{{index+1}}层</h3>
+          <el-input-number
+            style="margin:0 10px"
+            v-if="row.items"
+            :min="0"
+              :max="SHELF_MAX_COLOUM"
+            @change="changeCengNumber($event,index)"
+            size="small"
+            :value="row.items.length"
+          ></el-input-number>
+          <small>格</small>
+        </header>
+        <div
+          class="row-content-container"
+          v-if="row.items"
+        >
+          <ListItem
             @deleteItem="deleteItem"
+            :isSmallType="isSmallType"
+            :editItem="editItem"
+            v-for="(item) in  row.items"
+            :key="item.number"
+            :item="item"
+            @goEdit="go2updateSelectItems"
+            @selectItem="selectItems"
           />
         </div>
-    <div class="row" v-if="detail.shelfs.length==0" style="padding:20px;">请开始添加编辑</div>
+      </div>
+    </div>
+
+    <!-- null row -->
+    <div
+      class="row"
+      v-if="detail.shelfs.length==0&&isSelectStatus"
+      style="padding:20px;"
+    >目前没有货道信息</div>
 
-    <ItemEditModal @finish="finishEdit" :visible.sync="editModalState" :editItem.sync="editItem"></ItemEditModal>
+    <ItemEditModal
+      @finish="finishUpadteEditItems"
+      :visible.sync="editModalState"
+      v-if="editModalState"
+      :editItem="editItem"
+    ></ItemEditModal>
   </div>
 </template>
 <script>
-import ListItem from "./listItem";
+import ListItem from "../list/rightShowItem";
-import ItemEditModal from "./itemFormModal";
+import ItemEditModal from "../list/itemFormModal";
 import { mergeArray } from "../../../utils/lodash";
 import myalert from "../../../utils/alert";
-import { postShelfApply, postShelf } from "../../../api/shelfs";
+import { postShelfApply, postShelf, postShelfvm } from "../../../api/shelfs";
 import { setTimeout } from "timers";
-import { mapActions } from "vuex";
+import { mapActions, mapState } from "vuex";
+import {
+    DEVICE_TYPE_SMALL,
+    DEVICE_TYPE_BIG,
+    SHELF_MAX_ROW,
+    SHELF_MAX_COLOUM
+} from '../../../config';
+import t from "vue-video-player";
 export default {
   components: {
     ListItem,
@@ -61,21 +206,186 @@ export default {
     return {
       loading: false,
       editItem: [],
+      deviceTypeId: "",
       formInline: { name: "", shelfCount: "" },
       editModalState: false,
       detail: {
         shelfs: []
-      }
+      },
+      isSelectStatus: false,
+      SHELF_MAX_ROW,
+      SHELF_MAX_COLOUM
     };
   },
+  computed: {
+    ...mapState({
+      deviceTypes: state => state.common.deviceTypes
+    }),
+    isSmallType() {
+      return this.deviceTypeId == "quxia";
+    }
+  },
+  mounted() {
+    this.getDeviceTypes();
+  },
   methods: {
-    ...mapActions(["delVisitedView"]),
+    ...mapActions(["delVisitedView", "getDeviceTypes"]),
+    //删除 货道
     deleteItem(item) {
-      var _index = this.detail.shelfs.findIndex(_item => item.id == _item.id);
+      this.editItem = this.editItem.filter(
+        item1 => item.number != item1.number
+      );
+      if (this.isSmallType) {
+        var _index = this.detail.shelfs.findIndex(__item => __item.number == item.number)
         this.detail.shelfs.splice(_index, 1);
+      } else {
+        this.detail.shelfs[item.uuid.split(":")[0]].items.splice(
+          item.uuid.split(":")[1],
+          1
+        );
+        //如果这个 东西没了 delete this row
+        if (this.detail.shelfs[item.uuid.split(":")[0]].items.length == 0) {
+          this.detail.shelfs.splice(item.uuid.split(":")[0], 1);
+        }
+        this.sortFornumber();
+      }
     },
-    selectItem(item) {
+    check_all(checked) {
-      this.editItem = mergeArray(this.editItem, [item]);
+      //1.目前在编辑的
+      var editItem = [];
+      if (this.isSmallType) {
+        this.$data.detail.shelfs.map(item => {
+          item.isEdit = checked;
+          if (checked) {
+            editItem.push(item);
+          }
+        });
+      } else {
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.isEdit = checked;
+            if (checked) {
+              editItem.push(item);
+            }
+            return item;
+          });
+        });
+      }
+
+      this.editItem = editItem;
+    },
+    // 选择 货道
+    selectItems(items) {
+      this.editItem = items;
+    },
+    //开始修改选择的货道
+    go2updateSelectItems(item) {
+      //如果存在 item  对象 修改edititem
+      if (item.uuid) {
+        this.editItem[0] = item;
+      }
+      //判断 items是不是array
+      this.editModalState = true;
+    },
+    //给item 排序
+    sortFornumber() {
+      // 大售货机
+      if (!this.isSmallType) {
+        var number = 1;
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.number = number;
+            item.id = number;
+            item.uuid = `${x}:${y}`;
+            number++;
+            return item;
+          });
+        });
+      } else {
+        // 小售货机
+        this.$data.detail.shelfs = this.$data.detail.shelfs.sort((a, b) => {
+          return a.number - b.number;
+        });
+      }
+    },
+    //修改层的 货道数量
+    changeCengNumber(value, cengnumber) {
+      //reset  this.editItem = [];
+      this.editItem = [];
+      // 如果是多
+      var nowArraylength = this.$data.detail.shelfs[cengnumber].items.length;
+
+      if (value > nowArraylength) {
+        let diff = value - nowArraylength;
+        var newArray = [...Array(diff)].map((item, _index) => {
+          item = {
+            number: nowArraylength + _index + 1, //unid
+            id: nowArraylength + _index + 1, //unid
+            uuid: `${cengnumber}:${nowArraylength + _index + 1}`
+          };
+          return item;
+        });
+        this.$data.detail.shelfs[cengnumber].items = [
+          ...this.$data.detail.shelfs[cengnumber].items,
+          ...newArray
+        ];
+        //如果这个层的货道的 最后一个number 大于 下一层的第一个货道的number
+        this.sortFornumber();
+      } else {
+        //如果是少
+        this.$data.detail.shelfs[cengnumber].items = this.$data.detail.shelfs[
+          cengnumber
+        ].items.splice(0, value);
+        this.sortFornumber();
+      }
+    },
+    //change_huodao 小售货机的 修改货道数量
+    change_huodao(number) {
+      //add
+      if (number > this.detail.shelfs.length) {
+        var newArray = [...Array(number - this.detail.shelfs.length)].map(
+          (item, _index) => {
+            return {
+              id: this.detail.shelfs.length + _index + 1,
+              number: this.detail.shelfs.length + _index + 1
+            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        this.detail.shelfs = this.detail.shelfs.splice(0, number);
+      }
+    },
+    //修改层
+    change_cheng(ceng) {
+      //add
+      if (ceng > this.detail.shelfs.length) {
+        var newArray = [...Array(ceng - this.detail.shelfs.length)].map(
+          item => {
+            return {              items: [{
+                id: this.detail.shelfs.length + 1,
+                number: this.detail.shelfs.length + 1,
+                uuid: `${ceng}:${this.detail.shelfs.length + 1}`
+              }]            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        //delete
+        this.detail.shelfs = this.detail.shelfs.splice(0, ceng);
+      }
+    },
+    sure2type() {
+      var self = this;
+      if (!this.deviceTypeId) {
+        myalert.fail("请选择 类型");
+        return false;
+      }
+      myalert.confirm("选择类型之后就无法修改，确定吗?").then(res => {
+        self.isSelectStatus = true;
+      });
     },
     pilian() {
       if (this.$data.editItem.length <= 0) {
@@ -103,30 +413,13 @@ export default {
         this.detail.shelfs = this.detail.shelfs.slice(0, value);
       }
     },
-    onSubmit() {
+    submit_small() {
-      //能不能 提交
       var self = this;
-      if (!this.formInline.name.trim()) {
-        myalert.fail("名字不能空");
-        return false;
-      }
-      if (!this.formInline.shelfCount > 0) {
-        myalert.fail("货道号不能小于0");
-        return false;
-      }
-      var isPost = true;
-      this.detail.shelfs.map(item => {
-        if (!item.productId) {
-          isPost = false;
-        }
-      });
-      if (!isPost) {
-        myalert.fail("有货道信息不全");
-        return false;
-      }
       self.loading = true;
       postShelf({
         ...this.formInline,
+        deviceTypeId: this.isSmallType ? DEVICE_TYPE_SMALL : DEVICE_TYPE_BIG,
+        shelfCount: this.detail.shelfs.length,
         shelfs: this.detail.shelfs
       })
         .then(res => {
@@ -144,49 +437,216 @@ export default {
           console.error(e);
         });
     },
-    finishEdit(formData) {
+    submit_big() {
+      var self = this;
+      self.loading = true;
+      postShelfvm({
+        ...this.formInline,
+        deviceTypeId: this.isSmallType ? DEVICE_TYPE_SMALL : DEVICE_TYPE_BIG,
+        shelfCount: this.detail.shelfs.length,
+        rows: this.detail.shelfs
+      })
+        .then(res => {
+          self.loading = false;
+          myalert.success("提交成功");
+          //关闭当前界面
+          setTimeout(() => {
+            self.delVisitedView(self.$route).then(res => {
+              self.$router.go(-1);
+            });
+          }, 500);
+        })
+        .catch(e => {
+          self.loading = false;
+          console.error(e);
+        });
+    },
+    onSubmit() {
+      //能不能 提交
       var self = this;
-      var shelfs = this.$data.detail.shelfs;
+      if (!this.formInline.name.trim()) {
-      shelfs.map((item, index) => {
+        myalert.fail("名字不能空");
-        self.$data.editItem.map((item2, index2) => {
+        return false;
-          if (item2.number == item.number) {
+      }
-            if (self.$data.editItem.length <= 1) {
+      if (!this.detail.shelfs.length > 0) {
-              item.number = formData.number;
+        myalert.fail("货道号不能小于0");
+        return false;
+      }
+      var isPost = true;
+      if (this.isSmallType) {
+        this.detail.shelfs.map(item => {
+          if (!item.productId) {
+            isPost = false;
           }
-            item.price = formData.price;
+        });
-            item.productId = formData.productId;
+      } else {
-            item.image = formData.image;
+        this.detail.shelfs.map(row => {
-            item.safeStock = formData.safeStock;
+          row.items.map(item => {
-            item.maxStock = formData.maxStock;
+            if (!item.productId) {
+              isPost = false;
             }
           });
         });
-      //取消选择
+      }
+
+      if (!isPost) {
+        myalert.fail("有货道信息不全");
+        return false;
+      }
+
+      // 区分提交
+      this.isSmallType ? this.submit_small() : this.submit_big();
+    },
+
+    //修改选择的货道
+    finishUpadteEditItems(upodateitem) {
+      // update it
+      var self = this;
+      //small/big type update different
+      if (this.isSmallType) {
+        // 判断如果 number 以及没占用 return false
+        if (this.editItem.length == 1 && upodateitem.number != this.editItem[0].number) {
+          var index = self.detail.shelfs.findIndex(item => item.number == upodateitem.number)
+          if (index >= 0) {
+            myalert.fail('货道号以及被占用')
+            return false
+          }
+        }
+        //只有一个数据 //多个数据 需要修改 不懂 number
+        this.editItem.map(item => {
+          var _index = self.detail.shelfs.findIndex(__item => __item.number == item.number)
+          if (_index >= 0) {
+            if (this.editItem.length == 1) {
+              self.detail.shelfs[_index] = {
+                ...upodateitem
+              };
+            } else {
+              self.detail.shelfs[_index] = {
+                ...upodateitem,
+                number: self.detail.shelfs[_index].number
+              };
+            }
+
+          }
+        });
+        //排序
+        this.sortFornumber()
+      } else {
+        this.editItem.map(item => {
+          var x = item.uuid.split(":")[0];
+          var y = item.uuid.split(":")[1];
+          self.detail.shelfs[x].items[y] = {
+            ...upodateitem,
+            uuid: self.detail.shelfs[x].items[y].uuid,
+            id: self.detail.shelfs[x].items[y].id,
+            number: self.detail.shelfs[x].items[y].number
+          };
+        });
+      }
+
+      //修改完成之后 取消 选择
+      if (!this.isSmallType) {
+        this.editItem.map(item => {
+          self.detail.shelfs[item.uuid.split(":")[0]].items[
+            item.uuid.split(":")[1]
+          ].isEdit = false;
+        });
         this.editItem = [];
+      } else {
+        this.editItem.map(item => {
+          if (self.detail.shelfs[item.number - 1]) {
+            self.detail.shelfs[item.number - 1].isEdit = false;
+          }
+        });
+        this.editItem = [];
+      }
+
+      this.editModalState = false
     }
   }
 };
 </script>
 <style lang="scss" scoped>
+@import "@/styles/list.scss";
+
 header {
-  padding: 20px;
+  padding: 10px 20px;
   background: #fff;
   h3 {
-    padding-bottom: 20px;
   }
   .demo-form-inline {
     flex: 1;
   }
 }
-.row {
+// .row {
+//   background: #fff;
+//   margin-top: 20px;
+//   padding: 20px;
+//   display: flex;
+//   flex-wrap: wrap;
+//   .item {
+//     margin-right: 20px;
+//   }
+// }
+
+.list {
+  .value-1 {
+    .btn {
+      margin-left: 10px;
+    }
+  }
+}
+// 选择 类别行
+.select-row {
+  margin-bottom: 10px;
+}
+// 修改的btns
+.btns {
+  display: flex;
+  align-items: flex-end;
+  .check-btn {
+    margin-right: 10px;
+  }
+}
+
+.row-container.big {
+  .header1 {
+    display: flex;
+    align-items: flex-end;
+  }
+  .row {
+    width: 100%;
+    .row-content-container {
+      width: 100%;
+      display: flex;
       background: #fff;
-  margin-top: 20px;
+      flex-wrap: wrap;
-  padding: 20px;
+      padding: 0 20px;
+      .listItem {
+        width: calc(33.33%-20px);
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+.row-container.small {
+  width: 100%;
   display: flex;
+  background: #fff;
   flex-wrap: wrap;
-  .item {
+  padding: 0 20px;
+  .listItem {
+    width: calc(33.33%-20px);
     margin-right: 20px;
   }
 }
+
+.fixed-header {
+  // position: fixed;
+  // top: 0px;
+  // width: 100%;
+  // left:60px;
+}
 </style>
 

src/views/shelfs/list/itemFormModal.vue

@@ -1,6 +1,11 @@
 
 <template>
-  <el-dialog width="300px" :visible="visible" @open="open" :show-close="false">
+  <el-dialog
+    width="300px"
+    :visible="visible"
+    @open="open"
+    :show-close="false"
+  >
     <div style="padding-top:20px;">
       <el-form
         :inline="false"
@@ -13,24 +18,62 @@
           v-if="editItem.length<=1"
           label="货道号"
           prop="number"
+        >
+          <!--
           :rules="[
         {required: true, message: '不能为空'},{
           validator, trigger: 'blur'
-        }]"
+          }]"-->
-        >
+          <el-input
-          <el-input v-model="formInline.number" type="number" min="1" placeholder="货道号"></el-input>
+            v-model="formInline.number"
+            type="number"
+            min="1"
+            :disabled="deviceTypeId!='quxia'"
+            placeholder="货道号"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="价格" prop="price" :rules="[{required: true, message: '不能为空'}]">
+        <el-form-item
-          <el-input v-model="formInline.price" type="number" min=".1" placeholder="价格"></el-input>
+          label="价格"
+          prop="price"
+          :rules="[{required: true, message: '不能为空'}]"
+        >
+          <el-input
+            v-model="formInline.price"
+            type="number"
+            min=".1"
+            placeholder="价格"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="安全库存" prop="safeStock" :rules="[{required: true, message: '不能为空'}]">
+        <el-form-item
-          <el-input v-model="formInline.safeStock" type="number" min="1" placeholder="安全库存"></el-input>
+          label="安全库存"
+          prop="safeStock"
+          :rules="[{required: true, message: '不能为空'}]"
+        >
+          <el-input
+            v-model="formInline.safeStock"
+            type="number"
+            min="1"
+            placeholder="安全库存"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="容量" prop="maxStock" :rules="[{required: true, message: '不能为空'}]">
+        <el-form-item
-          <el-input v-model="formInline.maxStock" type="number" min="1" placeholder="容量"></el-input>
+          label="容量"
+          prop="maxStock"
+          :rules="[{required: true, message: '不能为空'}]"
+        >
+          <el-input
+            v-model="formInline.maxStock"
+            type="number"
+            min="1"
+            placeholder="容量"
+          ></el-input>
         </el-form-item>
 
-        <el-form-item label="商品" prop="productId" :rules="[{required: true, message: '不能为空'}]">
+        <el-form-item
+          label="商品"
+          prop="productId"
+          :rules="[{required: true, message: '不能为空'}]"
+        >
           <!-- :clearable="true" -->
           <el-select
             v-model="formInline.productId"
@@ -47,7 +90,10 @@
               :value="item1.id"
             >
               <div style="display:flex;align-items:center;">
-                <img :src="item1.image" style="width:30px;height:30px;">
+                <img
+                  :src="item1.image"
+                  style="width:30px;height:30px;"
+                >
                 <span style=" color: #8492a6; font-size: 13px;padding-left:10px;">￥{{ item1.price }}</span>
                 <span style="color: #8492a6; font-size: 13px;padding-left:10px;">{{ item1.name }}</span>
               </div>
@@ -57,9 +103,15 @@
       </el-form>
     </div>
 
-    <div slot="footer" class="dialog-footer">
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
       <el-button @click="$emit('update:visible',false)">取消</el-button>
-      <el-button type="primary" @click="sure">确定</el-button>
+      <el-button
+        type="primary"
+        @click="sure"
+      >确定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -67,6 +119,8 @@
 import { GET_LIST } from "../../../api/commodityManagement";
 import { mergeArray } from "../../../utils/lodash";
 import { clone } from "@/filters";
+import myalert from "../../../utils/alert";
+import { DEVICE_TYPE_SMALL } from '../../../config';
 export default {
   props: ["visible", "editItem"],
   data() {
@@ -85,9 +139,13 @@ export default {
         query: "",
         from: "",
         size: 10
-      }
+      },
+      deviceTypeId: DEVICE_TYPE_SMALL
     };
   },
+  mounted() {
+    this.init()
+  },
   methods: {
     //验证 number
     validator(rule, value, callback) {
@@ -104,19 +162,40 @@ export default {
         callback();
       }
     },
-    open() {
+    init() {
+      this.deviceTypeId = this.$parent.deviceTypeId
       if (this.$data.products.length <= 0) {
         this.remoteMethod();
       }
-      if (this.editItem.length >= 0) {
+      if (this.editItem.length > 1) {
+        //如果是多选 进来选择都为空
+        this.$data.cacheItemCopy = clone({});
+        this.$data.formInline = clone({});
+      } else {
         this.$data.cacheItemCopy = clone(this.editItem[0]);
         this.$data.formInline = clone(this.editItem[0]);
       }
+    },
+    open() {
+
     },
     finish() {
-      this.$emit("update:visible", false);
       this.$emit("finish", this.$data.formInline);
     },
+    isExitNumberInArray() {
+      var array = this.$parent.$data.detail.shelfs;
+      var exit = false;
+      var self = this;
+      for (var item of array) {
+        for (var item1 of item.items) {
+          if (item1.number == self.formInline.number) {
+            exit = true;
+            break;
+          }
+        }
+      }
+      return exit;
+    },
     sure() {
       var self = this;
       this.$refs["form"].validate(valid => {
@@ -165,7 +244,7 @@ export default {
     }
   },
 
-  mounted() {}
+
 };
 </script>
 

src/views/shelfs/list/putawayShelf/lefttable.vue

@@ -9,6 +9,7 @@
           style="width: 100%"
           @row-click="(row)=>{$emit('selectRow',row)}"
           ref="table"
+          :row-class-name="tableRowClassName"
         >
           <!-- @selection-change="(rows)=>{$emit('selectRow',rows)}" -->
           <el-table-column width="55">
@@ -18,14 +19,24 @@
                   :value="scope.row.checked&&!scope.row.disabled"
                   :checked="scope.row.checked&&!scope.row.disabled"
                   :disabled="scope.row.disabled"
+                  @change="checked_checkbox($event,scope.row,scope.$index)"
                 />
               </div>
             </template>
           </el-table-column>
-          <!-- <el-table-column prop="id" label="编号"></el-table-column> -->
+          <el-table-column
-          <el-table-column prop="name" label="设备"></el-table-column>
+            prop="id"
+            label="编号"
+          ></el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备"
+          ></el-table-column>
           <!-- <el-table-column prop="typeName" label="设备类型"></el-table-column> -->
-          <el-table-column prop="typeName" label="场地地址">
+          <el-table-column
+            prop="typeName"
+            label="场地地址"
+          >
             <template slot-scope="scope">
               <div>{{scope.row.locationName}}</div>
               <div>
@@ -36,13 +47,23 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="groupName" label="分组名称"></el-table-column>
+          <el-table-column
-          <el-table-column prop="typeName" label="设备类型"></el-table-column>
+            prop="groupName"
+            label="分组名称"
+          ></el-table-column>
+          <el-table-column
+            prop="typeName"
+            label="设备类型"
+          ></el-table-column>
           <!-- <el-table-column prop="typeName" label="门状态"></el-table-column> -->
           <!-- <el-table-column prop="createdDate" label="创建时间">
             <template slot-scope="scope">{{scope.row.createdDate|parseTime}}</template>
           </el-table-column>-->
-          <el-table-column prop="active" label="设备状态" width="50">
+          <el-table-column
+            prop="active"
+            label="设备状态"
+            width="50"
+          >
             <template slot-scope="scope">
               <span v-if="!scope.row.active">离线</span>
               <span v-if="scope.row.active">在线</span>
@@ -83,17 +104,28 @@ export default {
     };
   },
   computed: {
-    devices: function() {
+    devices: function () {
       return this.storex.devices;
     },
-    page: function() {
+    page: function () {
       return (
         parseInt(this.storex.formdata.from / this.storex.formdata.size) + 1
       );
     }
   },
-  mounted() {},
+  mounted() { },
-  methods: {}
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (row.checked) {
+        return 'selected-row';
+      }
+      return 'no-hover';
+    },
+    checked_checkbox(checked, row, index) {
+      // this.$parent.$data.leftTableList[index].checked = !checked;
+      this.$emit('selectRow', row)
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/views/shelfs/list/putawayShelf/righttable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="right" style="flex:1">
+  <div
+    class="right"
+    style="flex:1"
+  >
     <header>
       <div class="item">
         <div class="small">已选设备</div>
@@ -15,13 +18,26 @@
       <!-- @selection-change="(rows)=>{$emit('selectRow',rows)}" -->
       <el-table-column width="55">
         <template slot-scope="scope">
-          <el-checkbox :value="scope.row.checked" :checked="scope.row.checked"></el-checkbox>
+          <el-checkbox
+            :value="scope.row.checked"
+            :checked="scope.row.checked"
+            @change="checked_checkbox($event,scope.row,scope.$index)"
+          ></el-checkbox>
         </template>
       </el-table-column>
-      <!-- <el-table-column prop="id" label="编号"></el-table-column> -->
+      <el-table-column
-      <el-table-column prop="name" label="设备"></el-table-column>
+        prop="id"
+        label="编号"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备"
+      ></el-table-column>
       <!-- <el-table-column prop="typeName" label="设备类型"></el-table-column> -->
-      <el-table-column prop="typeName" label="场地地址">
+      <el-table-column
+        prop="typeName"
+        label="场地地址"
+      >
         <template slot-scope="scope">
           <div>{{scope.row.locationName}}</div>
           <div>
@@ -33,12 +49,19 @@
         </template>
       </el-table-column>
       <!-- <el-table-column prop="groupName" label="分组名称"></el-table-column> -->
-      <el-table-column prop="typeName" label="设备类型"></el-table-column>
+      <el-table-column
+        prop="typeName"
+        label="设备类型"
+      ></el-table-column>
       <!-- <el-table-column prop="typeName" label="门状态"></el-table-column> -->
       <!-- <el-table-column prop="createdDate" label="创建时间">
             <template slot-scope="scope">{{scope.row.createdDate|parseTime}}</template>
       </el-table-column>-->
-      <el-table-column prop="active" label="设备状态" width="50">
+      <el-table-column
+        prop="active"
+        label="设备状态"
+        width="50"
+      >
         <template slot-scope="scope">
           <span v-if="!scope.row.active">离线</span>
           <span v-if="scope.row.active">在线</span>
@@ -64,7 +87,12 @@ export default {
       return this.storex.selectData;
     }
   },
-  methods: {}
+  methods: {
+    checked_checkbox(checked, row, index) {
+      // this.$parent.$data.leftTableList[index].checked = !checked;
+      this.$emit('selectRow', row)
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

src/views/shelfs/list/rightEdit.vue

@@ -1,29 +1,123 @@
 
 <template>
-  <div class="pageContainer" v-loading="loading">
+  <div class="pageContainer">
-    <header>
+    <!--我是设备名称-->
-      <h3>货道详情</h3>
+    <header class="header1 header-big">
-      <div class="btns">
+      <div
-        <el-input-number v-model="detail.shelfCount" @change="changeShelfCount" :min="0" :max="50"></el-input-number>
+        class="content-wrapper"
-        <el-button @click="pilian1" style="margin-left:10px;">批量编辑</el-button>
+        style="flex:2;"
-        <el-button @click="submit1" type="primary" :loading="loading">提交</el-button>
+      >
+        <!-- <h2>{{deviceTypeName}}</h2> -->
+        <h2 style="padding-left:5px;">{{cacheRow.name}}</h2>
+        <el-input-number
+          v-if="isSmallType"
+          size="small"
+          @change="change_huodao"
+          :min="0"
+          :value="$data.detail.shelfs.length"
+        ></el-input-number>
+
+        <el-input-number
+          v-if="!isSmallType"
+          size="small"
+          @change="change_cheng"
+          :min="0"
+          :max="SHELF_MAX_ROW"
+          :value="$data.detail.shelfs.length"
+        ></el-input-number>
+        <small v-if="!isSmallType">层</small>
+      </div>
+      <div
+        class="right-btns"
+        style="flex:1;display:flex;align-items:center"
+      >
+        <el-checkbox
+          @change="check_all"
+          label="全选"
+          border
+          class="check-btn"
+        ></el-checkbox>
+        <el-button
+          type="default"
+          @click="go2updateSelectItems"
+          style="margin-left:10px;"
+        >批量修改</el-button>
+        <el-button
+          type="primary"
+          @click="submit1"
+          style="margin-left:10px;"
+        >提交</el-button>
       </div>
     </header>
-    <div class="rightContainer">
+
-      <div class="list">
+    <!-- big 和samll 不一样 -->
+    <!-- 层级container -->
+    <!-- 层级 row -->
+    <div
+      class="row-container"
+      v-if="!isSmallType&&$data.detail"
+      v-loading="loading"
+    >
+      <div
+        class="row"
+        v-for="(row,index) in  $data.detail.shelfs"
+        :key="index"
+      >
+        <header class="header1">
+          <h3>第{{index+1}}层</h3>
+          <el-input-number
+            v-if="row.items"
+            :min="0"
+            :max="SHELF_MAX_COLOUM"
+            @change="changeCengNumber($event,index)"
+            size="small"
+            :value="row.items.length"
+          ></el-input-number>
+          <small>格</small>
+        </header>
+        <div
+          class="row-content-container"
+          v-if="row.items"
+        >
           <ListItem
-          v-for="item in detail.shelfs"
+            :isSmallType="isSmallType"
+            :editItem="editItem"
+            v-for="(item) in  row.items"
             :key="item.number"
-          :visible.sync="editModalState"
-          :visiblerpoduct.sync="visiblerpoduct"
             :item="item"
-          @selectItem="selectItem"
+            @goEdit="go2updateSelectItems"
+            @selectItem="selectItems"
             @deleteItem="deleteItem"
-          :editItem.sync="editItem"
           />
         </div>
       </div>
-    <ItemEditModal @finish="finishEdit" :visible.sync="editModalState" :editItem.sync="editItem"></ItemEditModal>
+    </div>
+
+    <!-- small -->
+    <div
+      class="row-container small"
+      v-loading="loading"
+      v-if="isSmallType&&detail.shelfs"
+    >
+      <ListItem
+        :isSmallType="isSmallType"
+        :editItem="editItem"
+        v-for="(item) in  detail.shelfs"
+        :key="item.number"
+        :item="item"
+        @goEdit="go2updateSelectItems"
+        @selectItem="selectItems"
+        @deleteItem="deleteItem"
+      />
+    </div>
+
+    <!--修改 selectItems  modal -->
+    <ItemEditModal
+      @finish="finishUpadteEditItems"
+      :visible.sync="ItemEditProductModalStatus"
+      v-if="ItemEditProductModalStatus"
+      :editItem="editItem"
+    />
   </div>
 </template>
 <script>
@@ -31,18 +125,34 @@ import * as apishelfs from "@/api/shelfs";
 import map from "lodash.map";
 import ItemEditModal from "./itemFormModal";
 import ListItem from "./rightShowItem";
-import { postShelf, putShelf } from "../../../api/shelfs";
+import {
+  postShelf,
+  putShelf,
+  getShelfs,
+  getShelfDetail,
+  putShelfvm
+} from "../../../api/shelfs";
 import myalert from "../../../utils/alert";
 import ItemEditProductModal from "./ItemEditProductModal";
+import {
+  shelfs_devices_vmDetail,
+  post_shelfs_devices_vmDetail
+} from "../../../api/devicesStatus";
+import { DEVICE_TYPE_SMALL, DEVICE_TYPE_BIG, SHELF_MAX_COLOUM, SHELF_MAX_ROW } from '../../../config';
 export default {
   props: ["cacheRow", "isEdit"],
   data() {
     return {
       loading: false,
-      detail: {},
+      detail: {
+        shelfs: []
+      },
       editItem: [],
       editModalState: false,
-      visiblerpoduct: false
+      visiblerpoduct: false,
+      ItemEditProductModalStatus: false,
+      SHELF_MAX_ROW,
+      SHELF_MAX_COLOUM,
     };
   },
   components: {
@@ -53,12 +163,261 @@ export default {
   mounted() {
     this.init();
   },
+  computed: {
+    deviceTypeId() {
+      return this.cacheRow.deviceTypeId;
+    },
+    isSmallType() {
+      return this.cacheRow.deviceTypeId == DEVICE_TYPE_SMALL;
+    },
+    deviceTypeName() {
+      return this.cacheRow.deviceTypeId == DEVICE_TYPE_SMALL
+        ? "酒店售货机"
+        : "自助售货机";
+    }
+  },
   watch: {
     ["cacheRow.id"]() {
       this.init();
     }
   },
   methods: {
+    //change_huodao 小售货机的 修改货道数量
+    change_huodao(number) {
+      //add
+      if (number > this.detail.shelfs.length) {
+        var newArray = [...Array(number - this.detail.shelfs.length)].map(
+          (item, _index) => {
+            //得到最后一个 shelf
+            var listItem = this.detail.shelfs[this.detail.shelfs.length - 1]
+            return {
+              id: parseInt(listItem.number) + _index + 1,
+              number: parseInt(listItem.number) + _index + 1,
+              productId: "",
+              safeStock: "",
+              price: "",
+              maxStock: "",
+            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        this.detail.shelfs = this.detail.shelfs.splice(0, number);
+      }
+    },
+    //删除 货道
+    deleteItem(item) {
+      this.editItem = this.editItem.filter(
+        item1 => item.number != item1.number
+      );
+      if (this.isSmallType) {
+        var _index = this.detail.shelfs.findIndex(__item => __item.number == item.number)
+        this.detail.shelfs.splice(_index, 1);
+      } else {
+        this.detail.shelfs[item.uuid.split(":")[0]].items.splice(
+          item.uuid.split(":")[1],
+          1
+        );
+        //如果这个 东西没了 delete this row
+        if (this.detail.shelfs[item.uuid.split(":")[0]].items.length == 0) {
+          this.detail.shelfs.splice(item.uuid.split(":")[0], 1);
+        }
+      }
+      this.sortFornumber();
+    },
+    // 选择所有
+    check_all(checked) {
+      //1.目前在编辑的
+      var editItem = [];
+      if (this.isSmallType) {
+        this.$data.detail.shelfs.map(item => {
+          item.isEdit = checked;
+          if (checked) {
+            editItem.push(item);
+          }
+        });
+      } else {
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.isEdit = checked;
+            if (checked) {
+              editItem.push(item);
+            }
+            return item;
+          });
+        });
+      }
+
+      this.editItem = editItem;
+    },
+    // 修改货道 多少层
+    change_cheng(ceng) {
+      if (ceng > SHELF_MAX_ROW) {
+        return false
+      }
+      //add
+      if (ceng > this.detail.shelfs.length) {
+        var newArray = [...Array(ceng - this.detail.shelfs.length)].map(
+          item => {
+            return {              items: [
+                {
+                  id: this.detail.shelfs.length + 1,
+                  number: this.detail.shelfs.length + 1,
+                  uuid: `${ceng}:${this.detail.shelfs.length + 1}`,
+                  productId: "",
+                  safeStock: "",
+                  price: "",
+                  maxStock: "",
+                }
+              ]            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        //delete
+        this.detail.shelfs = this.detail.shelfs.splice(0, ceng);
+      }
+    },
+    //修改选择的货道
+    finishUpadteEditItems(upodateitem) {
+      // update it
+      var self = this;
+      //small/big type update different
+      if (this.isSmallType) {
+        // 判断如果 number 以及没占用 return false
+        if (this.editItem.length == 1 && upodateitem.number != this.editItem[0].number) {
+          var index = self.detail.shelfs.findIndex(item => item.number == upodateitem.number)
+          if (index >= 0) {
+            myalert.fail('货道号已被占用')
+            return false
+          }
+        }
+        //只有一个数据 //多个数据 需要修改 不懂 number
+        this.editItem.map(item => {
+          var _index = self.detail.shelfs.findIndex(__item => __item.number == item.number)
+          if (_index >= 0) {
+            if (this.editItem.length == 1) {
+              self.detail.shelfs[_index] = {
+                ...upodateitem
+              };
+            } else {
+              self.detail.shelfs[_index] = {
+                ...upodateitem,
+                number: self.detail.shelfs[_index].number
+              };
+            }
+
+          }
+        });
+        //排序
+        this.sortFornumber()
+      } else {
+        this.editItem.map(item => {
+          var x = item.uuid.split(":")[0];
+          var y = item.uuid.split(":")[1];
+          self.detail.shelfs[x].items[y] = {
+            ...upodateitem,
+            uuid: self.detail.shelfs[x].items[y].uuid,
+            id: self.detail.shelfs[x].items[y].id,
+            number: self.detail.shelfs[x].items[y].number
+          };
+        });
+      }
+      //修改完成之后 取消 选择
+      if (!this.isSmallType) {
+        this.editItem.map(item => {
+          self.detail.shelfs[item.uuid.split(":")[0]].items[
+            item.uuid.split(":")[1]
+          ].isEdit = false;
+        });
+        this.editItem = [];
+      } else {
+        this.editItem.map(item => {
+          if (self.detail.shelfs[item.number - 1]) {
+            self.detail.shelfs[item.number - 1].isEdit = false;
+          }
+        });
+        this.editItem = [];
+      }
+
+
+      this.ItemEditProductModalStatus = false
+    },
+    //开始修改选择的货道
+    go2updateSelectItems(item) {
+      //如果存在 item  对象 修改edititem
+      if (item.uuid) {
+        this.editItem[0] = item;
+      }
+      //判断 items是不是array
+      this.ItemEditProductModalStatus = true;
+    },
+    selectItems(items) {
+      this.editItem = items;
+    },
+    //给每个array的货道后排序
+    sortFornumber() {
+      // 大售货机
+      if (!this.isSmallType) {
+        var number = 1;
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.number = number;
+            item.id = number;
+            item.uuid = `${x}:${y}`;
+            number++;
+            return item;
+          });
+        });
+      } else {
+        // 小售货机
+        this.$data.detail.shelfs = this.$data.detail.shelfs.sort((a, b) => {
+          return a.number - b.number;
+        });
+      }
+    },
+    //修改 层 里面的 货道 数目的时候
+    changeCengNumber(value, cengnumber) {
+      if (value > SHELF_MAX_COLOUM) {
+        return false
+      }
+      //reset  this.editItem = [];
+      this.editItem = [];
+      // 如果是多
+      var nowArraylength = this.$data.detail.shelfs[cengnumber].items.length;
+
+      if (value > nowArraylength) {
+        let diff = value - nowArraylength;
+        var newArray = [...Array(diff)].map((item, _index) => {
+          item = {
+            number: nowArraylength + _index + 1, //unid
+            id: nowArraylength + _index + 1, //unid
+            uuid: `${cengnumber}:${nowArraylength + _index + 1}`
+          };
+          return item;
+        });
+        this.$data.detail.shelfs[cengnumber].items = [
+          ...this.$data.detail.shelfs[cengnumber].items,
+          ...newArray
+        ];
+        //如果这个层的货道的 最后一个number 大于 下一层的第一个货道的number
+        this.sortFornumber();
+      } else {
+        //如果是少
+        this.$data.detail.shelfs[cengnumber].items = this.$data.detail.shelfs[
+          cengnumber
+        ].items.splice(0, value);
+        this.sortFornumber();
+      }
+
+      // 把这一row delete掉
+      if (value == 0) {
+        this.$data.detail.shelfs.splice(cengnumber, 1);
+        this.sortFornumber();
+      }
+    },
     changeShelfCount(num) {
       if (this.detail.shelfs.length < num) {
         for (let i = 0; i < num - this.detail.shelfs.length; i++) {
@@ -83,17 +442,16 @@ export default {
     selectItem(item) {
       this.$data.editItem = [item];
     },
-    deleteItem(item) {
+    //submit 小收获机
-      var _index = this.detail.shelfs.findIndex(_item => item.id == _item.id);
+    submit_small() {
-      this.detail.shelfs.splice(_index, 1);
-      this.detail.shelfCount = this.detail.shelfs.length;
-    },
-    submit1() {
       var self = this;
+      var shelfs = [];
+      shelfs = this.detail.shelfs;
       var data = {
-        ...this.$data.detail,
+        ...this.cacheRow,
+        id: this.cacheRow.id, //编辑的id
         shelfCount: this.detail.shelfs.length,
-        shelfs: this.detail.shelfs
+        shelfs
       };
       var isOkPost = true;
       data.shelfs.map(item => {
@@ -120,6 +478,49 @@ export default {
           self.$data.loading = false;
         });
     },
+    submit_big() {
+      var self = this;
+      var data = {
+        ...this.cacheRow,
+        id: this.cacheRow.id, //编辑的id
+        rows: this.detail.shelfs
+      };
+      delete data.shelfs;
+      var isOkPost = true;
+      data.rows.map(row => {
+        row.items.map(item => {
+          if (!item.productId) {
+            isOkPost = false;
+          }
+        });
+      });
+      if (!isOkPost) {
+        myalert.fail("检查到有货道没有产品");
+        return false;
+      }
+      self.$data.loading = true;
+      putShelfvm(data)
+        .then(res => {
+          setTimeout(() => {
+            self.init().then(res => {
+              myalert.success("保存成功");
+              self.$data.loading = false;
+            });
+          }, 1000);
+        })
+        .catch(e => {
+          console.error(e);
+          self.$data.loading = false;
+        });
+    },
+    //submit 大收获机
+    submit1() {
+      if (this.cacheRow.deviceTypeId == DEVICE_TYPE_SMALL) {
+        this.submit_small();
+      } else {
+        this.submit_big();
+      }
+    },
     finishEdit(formData) {
       var self = this;
       var shelfs = this.$data.detail.shelfs;
@@ -144,14 +545,30 @@ export default {
     async init() {
       var id = this.cacheRow.id; //编辑的id
       this.$data.loading = true;
-      var detail = await apishelfs.getShelfDetail(id).then(res => {
+      var shelfs = [];
-        res.shelfs = map(res.shelfs, item => {
+      // small
-          return { ...item, isEdit: false };
+      if (this.cacheRow.deviceTypeId == DEVICE_TYPE_SMALL) {
+        var result = await getShelfDetail(this.cacheRow.id);
+        shelfs = result.shelfs;
+      }
+      //  big
+      else {
+        shelfs = await getShelfDetail(id).then(result => {
+          if (!result.rows) { return [] }
+          return result.rows.map((row, x) => {
+            row.items &&
+              row.items.map((item, y) => {
+                item.uuid = `${x}:${y}`;
+                item.isEdit = false;
+                return item;
+              });
+            return row;
           });
-        return res;
         });
+      }
+
       this.editItem = [];
-      this.$data.detail = detail;
+      this.$data.detail.shelfs = shelfs;
       this.$data.loading = false;
     },
     addItem() {
@@ -185,52 +602,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.pageContainer {
+@import "./styles/rightEdit.scss";
-}
-header {
-  width: 100%;
-  align-items: center;
-  display: flex;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-  h3 {
-    flex: 1;
-  }
-}
-
-.list {
-  padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  .listItem {
-    box-sizing: border-box;
-    display: inline-block;
-    width: calc(50%-20px);
-    border: 1px solid #ddd;
-    display: flex;
-    padding: 10px;
-    margin-bottom: 20px;
-    position: relative;
-    &:nth-child(2n + 1) {
-      margin-right: 20px;
-    }
-    &.add {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-.listItem.add {
-  margin-left: 20px;
-  margin-right: 20px;
-  width: calc(100%-60px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border: 1px solid #ddd;
-  margin-top: 10px;
-}
 </style>
 

src/views/shelfs/list/rightEdit。1.vue

@@ -0,0 +1,236 @@
+
+<template>
+  <div class="pageContainer" v-loading="loading">
+    <header>
+      <h3>货道详情</h3>
+      <div class="btns">
+        <el-input-number v-model="detail.shelfCount" @change="changeShelfCount" :min="0" :max="50"></el-input-number>
+        <el-button @click="pilian1" style="margin-left:10px;">批量编辑</el-button>
+        <el-button @click="submit1" type="primary" :loading="loading">提交</el-button>
+      </div>
+    </header>
+    <div class="rightContainer">
+      <div class="list">
+        <ListItem
+          v-for="item in detail.shelfs"
+          :key="item.number"
+          :visible.sync="editModalState"
+          :visiblerpoduct.sync="visiblerpoduct"
+          :item="item"
+          @selectItem="selectItem"
+          @deleteItem="deleteItem"
+          :editItem.sync="editItem"
+        />
+      </div>
+    </div>
+    <ItemEditModal @finish="finishEdit" :visible.sync="editModalState" :editItem.sync="editItem"></ItemEditModal>
+  </div>
+</template>
+<script>
+import * as apishelfs from "@/api/shelfs";
+import map from "lodash.map";
+import ItemEditModal from "./itemFormModal";
+import ListItem from "./rightShowItem";
+import { postShelf, putShelf } from "../../../api/shelfs";
+import myalert from "../../../utils/alert";
+import ItemEditProductModal from "./ItemEditProductModal";
+export default {
+  props: ["cacheRow", "isEdit"],
+  data() {
+    return {
+      loading: false,
+      detail: {},
+      editItem: [],
+      editModalState: false,
+      visiblerpoduct: false
+    };
+  },
+  components: {
+    ItemEditModal,
+    ListItem,
+    ItemEditProductModal
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    ["cacheRow.id"]() {
+      this.init();
+    }
+  },
+  methods: {
+    changeShelfCount(num) {
+      if (this.detail.shelfs.length < num) {
+        for (let i = 0; i < num - this.detail.shelfs.length; i++) {
+          this.detail.shelfs.push({
+            number: this.detail.shelfs.length + 1,
+            isEdit: false,
+            image: "",
+            productId: "",
+            safeStock: 1,
+            price: "",
+            maxStock: 1,
+            name: ""
+          });
+        }
+      }
+      if (this.detail.shelfs.length > num) {
+        for (let i = 0; i < this.detail.shelfs.length - num; i++) {
+          this.detail.shelfs.splice(this.detail.shelfs.length - 1, 1);
+        }
+      }
+    },
+    selectItem(item) {
+      this.$data.editItem = [item];
+    },
+    deleteItem(item) {
+      var _index = this.detail.shelfs.findIndex(_item => item.id == _item.id);
+      this.detail.shelfs.splice(_index, 1);
+      this.detail.shelfCount = this.detail.shelfs.length;
+    },
+    submit1() {
+      var self = this;
+      var data = {
+        ...this.$data.detail,
+        shelfCount: this.detail.shelfs.length,
+        shelfs: this.detail.shelfs
+      };
+      var isOkPost = true;
+      data.shelfs.map(item => {
+        if (!item.productId) {
+          isOkPost = false;
+        }
+      });
+      if (!isOkPost) {
+        myalert.fail("检查到有货道没有产品");
+        return false;
+      }
+      self.$data.loading = true;
+      putShelf(data)
+        .then(res => {
+          setTimeout(() => {
+            self.init().then(res => {
+              myalert.success("保存成功");
+              self.$data.loading = false;
+            });
+          }, 1000);
+        })
+        .catch(e => {
+          console.error(e);
+          self.$data.loading = false;
+        });
+    },
+    finishEdit(formData) {
+      var self = this;
+      var shelfs = this.$data.detail.shelfs;
+      shelfs.map((item, index) => {
+        self.$data.editItem.map((item2, index2) => {
+          if (item2.number == item.number) {
+            if (self.$data.editItem.length <= 1) {
+              item.number = formData.number;
+            }
+            item.price = formData.price;
+            item.image = formData.image;
+            item.productId = formData.productId;
+            item.safeStock = formData.safeStock;
+            item.maxStock = formData.maxStock;
+            item.name = formData.name;
+          }
+        });
+      });
+      //取消选择
+      self.$data.editItem = [];
+    },
+    async init() {
+      var id = this.cacheRow.id; //编辑的id
+      this.$data.loading = true;
+      var detail = await apishelfs.getShelfDetail(id).then(res => {
+        res.shelfs = map(res.shelfs, item => {
+          return { ...item, isEdit: false };
+        });
+        return res;
+      });
+      this.editItem = [];
+      this.$data.detail = detail;
+      this.$data.loading = false;
+    },
+    addItem() {
+      var self = this;
+      var shelfs = this.$data.detail.shelfs;
+      var newItem = {
+        number: this.$data.detail.shelfs.length + 1,
+        price: "",
+        productId: "",
+        safeStock: 1,
+        maxStock: 1,
+        isEdit: false
+      };
+      shelfs.push(newItem);
+    },
+    pilian1() {
+      if (this.$data.editItem.length <= 0) {
+        myalert.fail("请选择先");
+        return false;
+      }
+      this.$data.editModalState = true;
+    },
+    pilian2() {
+      if (this.$data.editItem.length <= 0) {
+        myalert.fail("请选择先");
+        return false;
+      }
+      this.$data.visiblerpoduct = true;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.pageContainer {
+}
+header {
+  width: 100%;
+  align-items: center;
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  h3 {
+    flex: 1;
+  }
+}
+
+.list {
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  .listItem {
+    box-sizing: border-box;
+    display: inline-block;
+    width: calc(50%-20px);
+    border: 1px solid #ddd;
+    display: flex;
+    padding: 10px;
+    margin-bottom: 20px;
+    position: relative;
+    &:nth-child(2n + 1) {
+      margin-right: 20px;
+    }
+    &.add {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+.listItem.add {
+  margin-left: 20px;
+  margin-right: 20px;
+  width: calc(100%-60px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: 1px solid #ddd;
+  margin-top: 10px;
+}
+</style>
+

src/views/shelfs/list/rightShowItem.vue

@@ -1,14 +1,20 @@
 
 <template>
+  <!-- @mouseleave="mouseleave(item)"
+  @mouseover="mouseover(item)"-->
   <div
     class="listItem"
     :key="item.id"
-    @mouseleave="mouseleave(item)"
-    @mouseover="mouseover(item)"
     @click="selectItems(item)"
   >
-    <div class="editBtns" v-if="item.isEdit||isSelect">
+    <div
-      <div class="center" v-if="editItem.length<=1">
+      class="editBtns"
+      v-if="item.isEdit||isSelect"
+    >
+      <div
+        class="center"
+        v-if="editItem.length<=1"
+      >
         <el-button @click="go2edit(item,$event)">编辑</el-button>
       </div>
       <svg-icon
@@ -18,8 +24,13 @@
         v-if="editItem.length<=1"
       ></svg-icon>
     </div>
+    <!-- 图片显示 -->
     <div>
-      <img class="left img" :src="item.image" alt>
+      <img
+        class="left img"
+        :src="item.image"
+        alt
+      >
     </div>
 
     <div class="right">
@@ -34,7 +45,10 @@
           <div class="item2">￥{{item.price}}</div>
         </div>
       </div>
-      <div style="padding-top:10px;" class="rows">
+      <div
+        style="padding-top:10px;"
+        class="rows"
+      >
         <div class="rowItem">
           <div class="item1">容量:</div>
           <div class="item2">{{item.maxStock}}</div>
@@ -50,7 +64,7 @@
 <script>
 import myalert from "../../../utils/alert";
 export default {
-  props: ["visible", "item", "visiblerpoduct", "editItem"],
+  props: ["visible", "item", "visiblerpoduct", "editItem", "isSmallType"],
   computed: {
     isSelect() {
       return this.editItem.filter(item1 => item1.number == this.item.number)
@@ -59,11 +73,11 @@ export default {
   },
   methods: {
     deleteShelf1(item, e) {
+      e.stopPropagation();
       var self = this;
       myalert.confirm("确定要删除吗？").then(res => {
         self.$emit("deleteItem", item);
       });
-      e.stopPropagation();
     },
     mouseover(item) {
       item.isEdit = true;
@@ -73,8 +87,8 @@ export default {
     },
     go2edit(item, e) {
       item.isEdit = false;
-      this.$emit("selectItem", item);
       this.$emit("update:visible", true);
+      this.$emit("goEdit", item);
       e.stopPropagation();
     },
     selectItems(item) {
@@ -84,12 +98,22 @@ export default {
         item1 => item1.number == item.number
       );
       if (_index >= 0) {
+        //修改 shelfs item的方法不一样
+        if (this.isSmallType) {
+          if (this.$parent.detail.shelfs[item.number - 1]) {
+            this.$parent.detail.shelfs[item.number - 1].isEdit = false;
+          }
+        } else {
+          this.$parent.detail.shelfs[item.uuid.split(":")[0]].items[
+            item.uuid.split(":")[1]
+          ].isEdit = false;
+        }
+
         this.editItem.splice(_index, 1);
       } else {
         this.editItem.push(item);
       }
-
+      this.$emit("selectItem", this.editItem);
-      this.$emit("update:editItem", this.editItem);
     }
   }
 };
@@ -157,6 +181,21 @@ export default {
     }
   }
 }
+
+// header1
+.header1 {
+  display: flex;
+  align-items: flex-end;
+  padding: 10px;
+
+  h2 {
+  }
+
+  .el-input-number {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+}
 </style>
 
 

src/views/shelfs/list/styles/rightEdit.scss

@@ -0,0 +1,62 @@
+.header1 {
+    display    : flex;
+    align-items: flex-end;
+    padding    : 10px;
+
+    h2 {}
+
+    .el-input-number {
+        margin-right: 10px;
+        margin-left : 10px;
+    }
+}
+
+.header1.header-big {
+    border-bottom: 1px solid #ddd;
+}
+
+.row-content-container {
+    display  : flex;
+    flex-wrap: wrap;
+    padding  : 0 10px;
+
+    .listItem {
+        width       : calc(33.33%-20px);
+        margin-right: 20px;
+    }
+}
+
+
+
+.header-big {
+    align-items: center;
+
+    .content-wrapper {
+        display      : flex;
+        align-items  : flex-end;
+        padding-right: 10px;
+
+        h2 {}
+
+        .el-input-number {
+            margin-right: 10px;
+            margin-left : 10px;
+        }
+
+        .right-btns {
+            .check-btn {}
+        }
+    }
+}
+
+// 小售货机
+.row-container.small {
+    display  : flex;
+    flex-wrap: wrap;
+    padding  : 10px;
+
+    .listItem {
+        width       : calc(33.33%-20px);
+        margin-right: 20px;
+    }
+}

src/views/shelfs/list/table.vue

@@ -18,8 +18,14 @@
           >{{scope.row.name}}</div>
         </template>
       </el-table-column>
-      <el-table-column label="货道数" prop="shelfCount"></el-table-column>
+      <el-table-column label="货道数" width="80" prop="shelfCount"></el-table-column>
-      <el-table-column label="设备数" prop="devices"></el-table-column>
+      <el-table-column label="设备数" width="80"  prop="devices"></el-table-column>
+      <el-table-column label="类型"  width="100" prop="typeId">
+        <template slot-scope="scope">
+          <div v-if="scope.row.deviceTypeId=='quxia'">酒店售货机</div>
+          <div v-else="!scope.row.deviceTypeId=='quxia-vm'">自助售货机</div>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="120">
         <template slot-scope="scope">
           <el-button

src/views/shelfs/replenishment/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="replenishment">
+        <div style="background: #fff;padding: 30px;">
+            <MyForm @search="search" :cargo="true"></MyForm>
+        </div>
+
+        <div style="    margin-top: 20px;  padding: 30px;   background: #fff;">
+            <MyTable :storex="{...$data}" @changePagination="changePaginationleft" @replenishment="changeReplenishment"></MyTable>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MyForm from "../status/form";
+    import MyTable from "./table";
+    import initStore from "./mixins/initStore.js";
+    import tablemix from "./mixins/table.js";
+
+    export default {
+        name: "index",
+        mixins: [initStore, tablemix],
+        components: {
+            MyForm,
+            MyTable
+        },
+        methods: {}
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>

src/views/shelfs/replenishment/mixins/initStore.js

@@ -0,0 +1,20 @@
+import { pageSize } from "@/config";
+
+export default {
+    data() {
+        return {
+            dataForm: {
+                query: "", active: "", deviceTypeId: "",
+                size: pageSize, from: 0
+            },
+            isEdit: false,
+            isPostSelf: false,
+            cacheRow: {},
+            loading: false,
+            leftTableData: [],
+            devices: 0,
+            outOfStockDevices: 0,
+            leftSelectRow: {},
+        }
+    }
+}

src/views/shelfs/replenishment/mixins/props.js

@@ -0,0 +1,36 @@
+import initStore from "./initStore";
+export default {
+    props: {
+        storex: {
+            type: Object,
+            default: () => initStore
+        }
+    },
+
+    computed: {
+        leftSelectRow() {
+            return this.storex.leftSelectRow
+        },
+        dataForm() {
+            return this.storex.dataForm
+        },
+        isEdit() {
+            return this.storex.isEdit
+        },
+        isPostSelf() {
+            return this.storex.isPostSelf
+        },
+        loading() {
+            return this.storex.loading
+        },
+        leftTableData() {
+            return this.storex.leftTableData
+        },
+        outOfStockDevices() {
+            return this.storex.outOfStockDevices
+        },
+        devices() {
+            return this.storex.outOfStockDevices
+        },
+    }
+}

src/views/shelfs/replenishment/mixins/table.js

@@ -0,0 +1,43 @@
+import {get_shelfs_device_summary, get_shelfs_device_lists} from '../../../../api/devicesStatus';
+
+export default {
+    methods: {
+        search(formdata) {
+            this.dataForm = {...this.dataForm, ...formdata}
+            this.getLeftData()
+        },
+        async getLeftData() {
+            this.loading = true;
+            var params = {...this.dataForm};
+            var {devices, outOfStockDevices} = await get_shelfs_device_summary(
+                params
+            );
+            var tableData = await get_shelfs_device_lists(params);
+            this.leftTableData = tableData;
+            this.devices = devices;
+            this.outOfStockDevices = outOfStockDevices;
+            this.loading = false;
+        },
+        clickrowleft(row) {
+            this.isEdit = false
+            this.leftSelectRow = row
+            this.$nextTick(() => {
+                this.isEdit = true
+            })
+        },
+        changePaginationleft(page) {
+            this.dataForm.from = (page - 1) * this.dataForm.size;
+            this.getLeftData()
+        },
+        changeReplenishment(row, stock) {
+            if (row.typeId == 'quxia') {
+                this.$router.push('/shelfs/replenishment/quxia?id=' + row.id + '&stock=' + stock)
+            } else {
+                this.$router.push('/shelfs/replenishment/quxia-vm?id=' + row.id)
+            }
+        }
+    },
+    mounted() {
+        this.getLeftData()
+    }
+}

src/views/shelfs/replenishment/quxia-vm.vue

@@ -0,0 +1,373 @@
+<template>
+    <div class="quxia-vm">
+        <div class="infoDetail">
+            <div class="infoDetailTit"><span>编号:</span><span>{{$route.query.id}}</span></div>
+            <div class="infoDetailTit" v-if="detailData.deviceName"><span>设备名称:</span><span
+            >{{detailData.deviceName}}</span></div>
+            <div class="infoDetailTit" v-if="detailData.province"><span>地址:</span><span>{{detailData.province + detailData.city + detailData.district +detailData.street +detailData.locationName}}</span>
+            </div>
+            <div class="infoDetailTit">
+                <span>状态:</span>
+                <span v-if="detailData.active">在线</span>
+                <span v-if="!detailData.active">离线</span>
+            </div>
+        </div>
+        <div class="content">
+            <div>
+                <!--<el-select style="margin-right: 30px;" @change="toggleShelfs" v-model="value" placeholder="请选择">-->
+                <!--<el-option label="全部" value="all">全部</el-option>-->
+                <!--<el-option label="缺货" value="shortage"></el-option>-->
+                <!--</el-select>-->
+
+                <el-button type="primary" @click="onFillReplenishNum">一键补满</el-button>
+                <el-button type="info" @click="onResetReplenishNum">重置</el-button>
+                <el-button type="success" @click="confrim">确定补货</el-button>
+            </div>
+
+            <div v-if="!shelfs.length" style="text-align: center;">暂无数据,请配置货道</div>
+            <div v-for="(item,index)  in shelfs" :key="index">
+                <div class="row">
+                    <h2>第{{index +1}}层</h2>
+                    <div class="row-content-container">
+                        <template v-for="(items,idx) in item.items">
+
+                            <div class="listItem" v-if="items.isShow">
+                                <div v-if="items.isEdit" class="editBtns"></div>
+                                <div class="row-container-item">
+                                    <img :src="items.image"
+                                         class="left img" alt="">
+                                    <div>
+                                        <h5>{{items.name}}</h5>
+                                        <p><span>货道号: {{index +1}}{{idx}}</span><span> 零售价: ￥{{items.price}}</span></p>
+                                        <p><span>容量: {{items.stock}}</span><span> 最大容量: {{items.maxStock}}</span>
+                                        </p>
+                                    </div>
+                                    <span class="shortage" v-if="items.state=='OUT_OF_STOCK'">缺货</span>
+                                </div>
+                                <div style="text-align: center;">
+                                    <el-input-number size="medium" style="margin-top: 5px;" :min="0"
+                                                     :max="items.maxStock"
+                                                     v-model="items.replenishNum"
+                                                     @change="handleChange($event,items.curr)"></el-input-number>
+                                    <span v-show="items.isEdit" style="margin-left: 10px;">{{ items.replenishNum - items.stock}} 件</span>
+                                </div>
+
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import {GET_DEVICEINFO, POST_RESTOCKS} from '@/api/replenishment';
+    import Alert from "@/utils/alert";
+
+    export default {
+        name: "quxia-vm",
+        data() {
+            return {
+                num1: 10,
+                value: 'all',
+                loading: false,
+                detailData: {
+                    deviceName: '',
+                    province: '',
+                    city: '',
+                    district: '',
+                    street: '',
+                    locationName: '',
+                },
+                isFillUp: false,
+                shelfs: [],
+                selSheLfs: []
+            }
+        },
+        computed: {
+            stock() {
+                return this.$route.query.stock
+            }
+        },
+        mounted() {
+            this.getDetail(this.$route.query.id);
+        },
+        methods: {
+            getDetail(id) {
+                GET_DEVICEINFO(id).then(res => {
+                    let shelfs = res.rows.map((item, index) => {
+                        item.items.map((items, idx) => {
+                            items.curr = `${index}:${idx}`;
+                            items.replenishNum = items.stock;
+                            items.isShow = true;
+                            items.isEdit = false;
+                            return items;
+                        });
+                        return item
+                    });
+                    this.detailData = res;
+                    this.shelfs = shelfs
+                })
+            },
+
+            handleChange(e, curr) {
+
+                let x = curr.slice(':')[0];
+                let y = curr.slice(':')[2];
+                if (this.shelfs[x].items[y].replenishNum == this.shelfs[x].items[y].stock) {
+                    this.shelfs[x].items[y].isEdit = false
+                } else {
+                    this.shelfs[x].items[y].isEdit = true
+                }
+
+
+            },
+
+            /**
+             *确定补货
+             */
+            confrim() {
+                let newShelfs = [];
+                let shelfs = this.shelfs.map(item => {
+                    item.items.map(items => {
+                        newShelfs.push(items)
+                    });
+                    return item;
+                });
+
+                newShelfs = newShelfs.filter(item => {
+                    return item.replenishNum != item.stock
+                });
+
+                newShelfs = newShelfs.map(item => {
+                    return {
+                        number: item.number,
+                        amount: item.replenishNum - item.stock
+                    }
+                });
+
+                if (!newShelfs.length) {
+                    Alert.fail('请请选择需要补货的货道');
+                    return false;
+                }
+
+                let obj = {
+                    deviceId: this.$route.query.id,
+                    shelfs: newShelfs
+                };
+
+                POST_RESTOCKS({...obj}).then(res => {
+                    Alert.success('确定补货成功');
+                    setTimeout(() => {
+                        this.getDetail(this.$route.query.id);
+                    }, 500)
+                })
+            },
+
+            /**
+             * 重置
+             */
+            onResetReplenishNum() {
+                let shelfs = this.shelfs;
+                shelfs.forEach(item => {
+                    item.items.forEach(items => {
+                        items.replenishNum = items.stock;
+                        items.isEdit = false;
+                    })
+                });
+
+                this.shelfs = shelfs;
+                this.isFillUp = false;
+
+            },
+
+            /**
+             * 一键补满
+             */
+            onFillReplenishNum() {
+
+                let shelfs = this.shelfs,
+                    isCanNext, len = shelfs.length,
+                    isFillUp = this.isFillUp;
+
+
+                for (let i = 0; i < len; i++) {
+                    const res1 = shelfs[i].items;
+                    for (let j = 0; j < res1.length; j++) {
+                        const res2 = res1[j];
+
+
+                        if (res2.replenishNum == res2.maxStock) {
+                            res2.isEdit = false;
+                        } else {
+                            res2.isEdit = true;
+                        }
+
+
+                        if (res2.replenishNum == res2.maxStock) {
+                            isCanNext = true;
+                        } else {
+                            isCanNext = false;
+                        }
+
+
+                    }
+                }
+
+
+                if (isFillUp) {
+                    if (isCanNext) {
+                        Alert.fail('货物已经补满，无需补货');
+                        return;
+                    }
+                }
+
+
+                this.isFillUp = true;
+
+
+                shelfs = shelfs.map(item => {
+                    item.items.map(items => {
+                        items.replenishNum = items.maxStock;
+                        return items
+                    });
+                    return item;
+                });
+
+
+            },
+
+
+            // 全部 and  确实 切换
+            toggleShelfs(val) {
+                let isFilterOutOfStock = val == 'all' ? false : true;
+
+                let shelfs = this.shelfs;
+
+                for (let i = 0; i < shelfs.length; i++) {
+                    let res1 = shelfs[i].items;
+                    for (let j = 0; j < res1.length; j++) {
+                        const res2 = res1[j];
+                        if (isFilterOutOfStock) {
+                            if (res2.state == "OUT_OF_STOCK") {
+                                res1[j].isShow = true
+                            } else {
+                                res1[j].isShow = false
+                            }
+                        } else {
+                            res1[j].isShow = true
+                        }
+                    }
+                }
+
+                this.shelfs = shelfs
+
+            }
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .infoDetail {
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #d3dce6;
+        background: #fff;
+
+        .infoDetailTit {
+            display: inline-block;
+            width: 33%;
+            margin: 10px 0;
+
+            span:nth-child(1) {
+                padding-right: 10px;
+                color: #8492a6;
+            }
+
+            span:nth-child(2) {
+                color: #324057;
+            }
+        }
+    }
+
+    .content {
+        padding: 20px;
+        background: #fff;
+
+        .row {
+            margin: 20px 0;
+
+            h2 {
+                margin: 10px 0;
+            }
+
+            .row-content-container {
+                display: flex;
+                flex-wrap: wrap;
+
+                .listItem {
+                    width: calc(20% - 20px);
+                    margin-right: 20px;
+                    box-sizing: border-box;
+                    border: 1px solid #ddd;
+                    padding: 10px;
+                    margin-bottom: 20px;
+                    position: relative;
+
+                    .editBtns {
+                        position: absolute;
+                        top: 0px;
+                        left: 0px;
+                        width: 100%;
+                        height: 100%;
+                        background: #bdeca27d;
+                    }
+
+                    .row-container-item {
+                        display: flex;
+                        position: relative;
+
+                        .left.img {
+                            width: 60px;
+                            height: 60px;
+                            margin-right: 5px;
+                        }
+
+                        h5, p {
+                            margin: 0;
+                            padding: 0;
+                        }
+
+                        p {
+                            line-height: 20px;
+                        }
+
+                        span {
+                            font-size: 14px;
+                        }
+
+                        .shortage {
+                            display: inline-block;
+                            border-radius: 10px;
+                            background: #f56c6c;
+                            line-height: 20px;
+                            text-align: center;
+                            color: #fff;
+                            width: 40px;
+                            height: 20px;
+                            position: absolute;
+                            top: 20px;
+                            right: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+
+    }
+</style>

src/views/shelfs/replenishment/quxia.vue

@@ -0,0 +1,261 @@
+<template>
+    <div class="quxia">
+        <div class="infoDetail">
+            <div class="infoDetailTit"><span>编号:</span><span>{{$route.query.id}}</span></div>
+            <div class="infoDetailTit" v-if="detailData.deviceName"><span>设备名称:</span><span
+            >{{detailData.deviceName}}</span></div>
+            <div class="infoDetailTit" v-if="detailData.province"><span>地址:</span><span>{{detailData.province + detailData.city + detailData.district +detailData.street +detailData.locationName}}</span>
+            </div>
+            <div class="infoDetailTit">
+                <span>状态:</span>
+                <span v-if="detailData.active">在线</span>
+                <span v-if="!detailData.active">离线</span>
+            </div>
+        </div>
+        <div class="table">
+            <div class="opi">
+                <el-button v-show="stock=='true'" type="success" @click="openDoor">一键开门</el-button>
+                <el-button v-show="stock=='true'" type="primary" @click="confrim">确定补货</el-button>
+                <el-button v-show="stock=='false'" type="primary" @click="onRestocks">开门补货</el-button>
+            </div>
+            <el-table
+                    :data="detailData.shelfs"
+                    ref="multipleTable"
+            >
+
+                <el-table-column
+                        type="index">
+                </el-table-column>
+                <el-table-column label="图片" prop="image">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.image" alt="" width="70" height="70">
+                    </template>
+                </el-table-column>
+                <el-table-column label="名字" prop="name">
+                    <template slot-scope="scope">
+                        <div>{{scope.row.name}}</div>
+                    </template>
+                </el-table-column>
+
+                <el-table-column label="货道状态" prop="active">
+                    <template slot-scope="scope">
+                        <!--<div v-if="scope.row.state=='OUT_OF_STOCK'">-->
+                            <!--<span class="state stateQ">缺货</span>-->
+                        <!--</div>-->
+                        <!--<div v-else>-->
+                            <!--<span class="state stateZ">正常</span>-->
+                        <!--</div>-->
+                        <el-tooltip class="item" effect="dark" :content="content" placement="top">
+                            <el-switch
+                                    v-model="scope.row.checked"
+                                    active-color="#409eff"
+                                    inactive-color="#dcdfe6">
+                            </el-switch>
+                        </el-tooltip>
+                        <span style="margin-left: 10px;" v-if="scope.row.state=='NORMAL'">正常</span>
+                        <span style="margin-left: 10px;" v-else-if="scope.row.state=='ALERT'">缺货</span>
+                        <span style="margin-left: 10px;" v-else="scope.row.state=='OUT_OF_STOCK'">售罄</span>
+                    </template>
+                </el-table-column>
+
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import {GET_DEVICEINFO, POST_RESTOCKS, POST_OPENDOOR, POST_RESTOCKS_UPDATE} from '@/api/replenishment';
+    import Alert from "@/utils/alert";
+
+    export default {
+        name: "quxia",
+        content:'',
+        data() {
+            return {
+                loading: false,
+                detailData: {
+                    deviceName: '',
+                    province: '',
+                    city: '',
+                    district: '',
+                    street: '',
+                    locationName: '',
+                },
+                selSheLfs: []
+            }
+        },
+        computed: {
+            stock() {
+                return this.$route.query.stock
+            }
+        },
+        mounted() {
+            this.getDetail(this.$route.query.id);
+            if (this.stock=='true'){
+                this.content='点击确定补货才能真实修改'
+            } else {
+                this.content = '点击开门补货才能真实修改'
+            }
+        },
+        methods: {
+            getDetail(id) {
+                GET_DEVICEINFO(id).then(res => {
+                    res.shelfs.map((item, index) => {
+                        if (item.state == 'NORMAL') {
+                            item.checked = true;
+                            item.isSel = true;
+                        } else {
+                            item.checked = false;
+                            item.isSel = false;
+                        }
+                        item.index = index;
+                        return item;
+                    });
+                    this.detailData = res;
+                })
+            },
+
+            /**
+             *
+             * 选择的行
+             */
+            selChange(val) {
+                console.log(val);
+                this.detailData.shelfs.map((item, idx) => {
+                    if (val == idx) {
+
+                    }
+                    return item;
+                })
+                // let restocks = [];
+                // val.forEach(item => {
+                //     restocks.push({
+                //         number: item.number,
+                //         amount: 1
+                //     })
+                // });
+                // this.selSheLfs = restocks
+            },
+            /**
+             *开门补货
+             */
+            onRestocks() {
+
+                let restocks = [];
+                this.detailData.shelfs.map((item, idx) => {
+                    if (item.checked   && item.isSel == false) {
+                        restocks.push({
+                            number: item.number,
+                            amount: 1
+                        })
+                    }
+                });
+
+
+                if (!restocks.length) {
+                    Alert.fail('请选择补货商品');
+                    return
+                }
+
+                Alert.confirm("确定开门补货吗？").then(res => {
+                    let obj = {
+                        deviceId: this.$route.query.id,
+                        shelfs: restocks
+                    };
+                    POST_RESTOCKS({...obj}).then(res => {
+                        Alert.success('补货成功');
+                        setTimeout(() => {
+                            this.getDetail(this.$route.query.id);
+                        }, 1000)
+                    })
+                });
+
+            },
+            /**
+             *确定补货
+             */
+            confrim() {
+                let restocks = [];
+                this.detailData.shelfs.forEach(item => {
+                    if (item.checked) {
+                        restocks.push({number: item.number, amount: 1})
+                    } else {
+                        restocks.push({number: item.number, amount: 0})
+                    }
+                });
+
+                let obj = {
+                    deviceId: this.$route.query.id,
+                    shelfs: restocks
+                };
+
+                POST_RESTOCKS_UPDATE({...obj}).then(res => {
+                    Alert.success('确定补货成功');
+                    setTimeout(() => {
+                        this.getDetail(this.$route.query.id);
+                    }, 1000)
+                })
+            },
+            /**
+             * 一键开门
+             */
+            openDoor() {
+
+                Alert.confirm("确定一键开门吗？").then(res => {
+                    let doors = this.detailData.shelfs.map(item => {
+                        return item.number
+                    });
+                    let obj = {
+                        deviceId: this.$route.query.id,
+                        doors
+                    };
+                    POST_OPENDOOR({...obj}).then(res => {
+                        Alert.success('一键开门成功');
+                    })
+                })
+            }
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .infoDetail {
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #d3dce6;
+        background: #fff;
+
+        .infoDetailTit {
+            display: inline-block;
+            width: 33%;
+            margin: 10px 0;
+
+            span:nth-child(1) {
+                padding-right: 10px;
+                color: #8492a6;
+            }
+
+            span:nth-child(2) {
+                color: #324057;
+            }
+        }
+    }
+
+    .table {
+        padding: 20px;
+        background: #fff;
+
+        .state {
+            display: inline-block;
+            padding: 5px 10px;
+            background: #f56c6c;
+            border-radius: 10px;
+            color: #fff;
+        }
+
+        .stateZ {
+            background: #67c23a;
+        }
+    }
+</style>

src/views/shelfs/replenishment/table.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="tableContainer">
+        <el-table
+                :data="leftTableData"
+                v-loading="loading"
+                :row-class-name="tableRowClassName"
+                @row-click="(row)=>{$emit('clickrow',row)}"
+        >
+            <el-table-column label="编号" prop="id"></el-table-column>
+            <el-table-column label="名字" prop="name">
+                <template slot-scope="scope">
+                    <div>{{scope.row.name}}</div>
+                </template>
+            </el-table-column>
+            <el-table-column label="地址" prop="locationName"></el-table-column>
+            <el-table-column label="类型" prop="typeId">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.typeId=='quxia'">酒店售货机</div>
+                    <div v-else="!scope.row.typeId=='quxia-vm'">自助售货机</div>
+                </template>
+            </el-table-column>
+            <el-table-column label="状态" prop="active">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.active">在线</div>
+                    <div v-if="!scope.row.active">离线</div>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="库存状态" prop="stockState">
+                <template slot-scope="scope">
+                    <div>{{scope.row.stockState| filterStockState(scope.row)}}</div>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="操作" prop="active">
+                <template slot-scope="scope">
+                    <span style="color: rgb(64, 158, 255);cursor: pointer;" @click="replenishment(scope.row)">补货</span>
+                    <span v-if="scope.row.typeId=='quxia'"
+                          style="color: rgb(64, 158, 255);cursor: pointer;margin: 0 20px"
+                          @click="replenishment(scope.row,'stock')">调整库存</span>
+                </template>
+            </el-table-column>
+
+        </el-table>
+
+        <div class="paginationContainer" style="padding-top:20px">
+            <el-pagination
+                    background
+                    :page-size="dataForm.size"
+                    layout="prev, pager, next"
+                    :total="devices"
+                    @current-change="(page)=>$emit('changePagination',page)"
+            ></el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+    import {
+        getShelfs,
+        getShelfDetail,
+        postShelfApply,
+        postShelf,
+        deleteShelf,
+        putShelf,
+        getShelfCount
+    } from "@/api/shelfs";
+    import {mapState, mapActions} from "vuex";
+    import myalert from "../../../utils/alert";
+    import {
+        get_shelfs_device_lists,
+        get_shelfs_device_summary
+    } from "../../../api/devicesStatus";
+    import props1 from "./mixins/props";
+
+    export default {
+        mixins: [props1],
+        data() {
+            return {};
+        },
+        mounted() {
+        },
+        methods: {
+            ...mapActions(["getDeviceTypes"]),
+            tableRowClassName({row, rowIndex}) {
+                if (row.id === this.leftSelectRow.id) {
+                    return "success-row";
+                }
+                return "";
+            },
+            postShelfApply1(item) {
+                this.$router.push(`/shelfs/putaway?id=${item.id}&name=${item.name}`);
+            },
+            go2add() {
+                this.$router.push(`/shelfs/add`);
+            },
+            deleteShelf1(row) {
+                var self = this;
+                myalert.confirm("确定要删除吗？").then(res => {
+                    self.$data.tableLoading = true;
+                    deleteShelf(row.id).then(res => {
+                        self.$data.tableLoading = false;
+                        myalert.success("删除成功");
+                        self.getTableData();
+                    });
+                });
+            },
+            replenishment(row, stock) {
+                if (stock) {
+                    stock = true
+                } else {
+                    stock = false
+                }
+                this.$emit('replenishment', row, stock)
+            }
+        },
+        filters: {
+            filterStockState(val, row) {
+                switch (val) {
+                    case 'NORMAL':
+                        return '正常';
+                        break;
+                    case 'OUT_OF_STOCK':
+                        return '全部售罄';
+                        break;
+                    case 'ALERT':
+                        return row.alertCount + '个缺货,' + row.soldoutCount + '个售罄';
+                        break;
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .tableContainer {
+        background: #fff;
+
+        .btns {
+            margin-bottom: 10px;
+        }
+    }
+
+    header {
+        width: 100%;
+        align-items: center;
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid #ddd;
+
+        .smnallbtns {
+            padding-left: 20px;
+            flex: 1;
+            display: flex;
+
+            .item {
+                padding-right: 20px;
+                display: flex;
+            }
+        }
+    }
+</style>
+

src/views/shelfs/status/form.vue

@@ -26,11 +26,19 @@
                         <el-option label="离线" :value="false"></el-option>
                     </el-select>
                 </el-form-item>
+
+                <el-form-item label="货道状态" v-if="cargo">
+                    <el-select :clearable="true" v-model="dataFormInner.stockState" placeholder="类型">
+                        <el-option label="正常" value="NORMAL"></el-option>
+                        <el-option label="缺货" value="OUT_OF_STOCK"></el-option>
+                    </el-select>
+                </el-form-item>
             </div>
             <div>
                 <el-form-item label="场地">
                     <el-select v-model="dataFormInner.locationId" placeholder="场地" :clearable="true">
-            <el-option :key="item.id" v-for="item in locations" :label="item.name" :value="item.id"></el-option>
+                        <el-option :key="item.id" v-for="item in locations" :label="item.name"
+                                   :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="分组">
@@ -54,6 +62,9 @@
                         ></el-option>
                     </el-select>
                 </el-form-item>
+
+
+
                 <el-form-item style="padding-left:30px">
                     <!-- <el-button type="default" @click="resetForm1('ruleForm')">重置</el-button> -->
                     <el-button type="primary" @click="$emit('search',dataFormInner)">查询</el-button>
@@ -63,9 +74,10 @@
     </div>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
+    import {mapState, mapActions} from "vuex";
-import props1 from "./mixins/props.js";
+    import props1 from "./mixins/props.js";
-export default {
+
+    export default {
         mixins: [props1],
         data() {
             return {
@@ -87,6 +99,6 @@ export default {
         methods: {
             ...mapActions(["getDeviceTypes", "getLocations", "getDeviceGroups"])
         }
-};
+    };
 </script>
 

src/views/shelfs/status/index.vue

@@ -57,6 +57,13 @@ export default {
     postShelfApply1(item) {
       this.$router.push(`/shelfs/putaway?id=${item.id}&name=${item.name}`);
     },
+    clickrowleft(row) {
+      this.isEdit = false;
+      this.$nextTick(() => {
+        this.isEdit = true;
+        this.cacheRow = row;
+      });
+    },
     go2add() {
       this.$router.push(`/shelfs/add`);
     },

src/views/shelfs/status/mixins/props.js

@@ -1,9 +1,14 @@
 import initStore from "./initStore";
+
 export default {
     props: {
         storex: {
             type: Object,
             default: () => initStore
+        },
+        cargo: {
+            type: Boolean,
+            default: false
         }
     },
 

src/views/shelfs/status/rightEdit.vue

@@ -1,56 +1,583 @@
 
 <template>
-  <div class="pageContainer" v-loading="right_loading">
+  <div class="pageContainer">
-    <Profile :storex="{...$data}" @pilian1="pilian1" @tijiao="tijiao" @change="shelfCountChange"/>
+    <!--我是设备名称-->
-    <div class="rightContainer">
+    <header class="header1 header-big">
-      <div class="list">
+      <div
+        class="content-wrapper"
+        style="flex:2;"
+      >
+        <!-- <h2>{{deviceTypeName}}</h2> -->
+        <h2 style="padding-left:5px;">{{cacheRow.name}}</h2>
+        <el-input-number
+          v-if="isSmallType"
+          size="small"
+          @change="change_huodao"
+          :min="0"
+          :value="$data.detail.shelfs.length"
+        ></el-input-number>
+
+        <el-input-number
+          v-if="!isSmallType"
+          size="small"
+          @change="change_cheng"
+          :min="0"
+          :max="SHELF_MAX_ROW"
+          :value="$data.detail.shelfs.length"
+        ></el-input-number>
+        <small v-if="!isSmallType">层</small>
+      </div>
+      <div
+        class="right-btns"
+        style="flex:1;display:flex;align-items:center"
+      >
+        <el-checkbox
+          @change="check_all"
+          label="全选"
+          border
+          class="check-btn"
+        ></el-checkbox>
+        <el-button
+          type="default"
+          @click="go2updateSelectItems"
+          style="margin-left:10px;"
+        >批量修改</el-button>
+        <el-button
+          type="primary"
+          @click="submit1"
+          style="margin-left:10px;"
+        >提交</el-button>
+      </div>
+    </header>
+
+    <!-- big 和samll 不一样 -->
+    <!-- 层级container -->
+    <!-- 层级 row -->
+    <div
+      class="row-container"
+      v-if="!isSmallType&&$data.detail"
+      v-loading="loading"
+    >
+      <div
+        class="row"
+        v-for="(row,index) in  $data.detail.shelfs"
+        :key="index"
+      >
+        <header class="header1">
+          <h3>第{{index+1}}层</h3>
+          <el-input-number
+            v-if="row.items"
+            :min="0"
+             :max="SHELF_MAX_COLOUM"
+            @change="changeCengNumber($event,index)"
+            size="small"
+            :value="row.items.length"
+          ></el-input-number>
+          <small>格</small>
+        </header>
+        <div
+          class="row-content-container"
+          v-if="row.items"
+        >
           <ListItem
-          v-for="item in right_detail.shelfs"
+            :isSmallType="isSmallType"
+            :editItem="editItem"
+            v-for="(item) in  row.items"
             :key="item.number"
-          :visible.sync="right_editModalState"
             :item="item"
-          @selectItem="selectItem"
+            @goEdit="go2updateSelectItems"
+            @selectItem="selectItems"
             @deleteItem="deleteItem"
-          :editItem.sync="right_editItem"
           />
         </div>
       </div>
+    </div>
 
+    <!-- small -->
+    <div
+      class="row-container small"
+      v-loading="loading"
+      v-if="isSmallType&&detail.shelfs"
+    >
+      <ListItem
+        :isSmallType="isSmallType"
+        :editItem="editItem"
+        v-for="(item) in  detail.shelfs"
+        :key="item.number"
+        :item="item"
+        @goEdit="go2updateSelectItems"
+        @selectItem="selectItems"
+        @deleteItem="deleteItem"
+      />
+    </div>
+
+    <!--修改 selectItems  modal -->
     <ItemEditModal
-      @finish="finishEdit"
+      @finish="finishUpadteEditItems"
-      :visible.sync="right_editModalState"
+      :visible.sync="ItemEditProductModalStatus"
-      :editItem.sync="right_editItem"
+      v-if="ItemEditProductModalStatus"
-    ></ItemEditModal>
+      :editItem="editItem"
+    />
   </div>
 </template>
 <script>
 import * as apishelfs from "@/api/shelfs";
 import map from "lodash.map";
-import ItemEditModal from "./itemFormModal";
+import ItemEditModal from "../list/itemFormModal";
-import ListItem from "./rightShowItem";
+import ListItem from "../list/rightShowItem";
-import { postShelf } from "../../../api/shelfs";
+import { GET_DEVICE_DETAIL_VM, GET_DEVICE_DETAIL } from "../../../api/devices";
+import {
+  postShelf,
+  putShelf,
+  getShelfs,
+  getShelfDetail,
+  putShelfvm
+} from "../../../api/shelfs";
 import myalert from "../../../utils/alert";
-import { get_shelfs_device_detail } from "../../../api/devicesStatus";
+import ItemEditProductModal from "../list/ItemEditProductModal";
-import props1 from "./mixins/props.js";
+import {
-import initStore from "./rightMixins/initStore.js";
+  shelfs_devices_vmDetail,
-import methods from "./rightMixins/methods.js";
+  post_shelfs_devices_vmDetail,
-import Profile from "./views/right/profile";
+  get_shelfs_device_lists,
+  get_shelfs_device_detail_vm,
+  get_shelfs_device_detail,
+  put_shelfs_device_detail_vm,
+  put_shelfs_device_detail
+} from '../../../api/devicesStatus';
+import {
+  DEVICE_TYPE_SMALL,
+  DEVICE_TYPE_BIG,
+  SHELF_MAX_ROW,
+  SHELF_MAX_COLOUM
+} from '../../../config';
 export default {
-  mixins: [props1, initStore, methods],
+  props: ["cacheRow", "isEdit"],
+  data() {
+    return {
+      loading: false,
+      detail: {
+        shelfs: []
+      },
+      editItem: [],
+      editModalState: false,
+      visiblerpoduct: false,
+      ItemEditProductModalStatus: false,
+      SHELF_MAX_ROW,
+      SHELF_MAX_COLOUM,
+    };
+  },
   components: {
     ItemEditModal,
     ListItem,
-    Profile
+    ItemEditProductModal
   },
   mounted() {
+    // asd
     this.init();
   },
+  computed: {
+    deviceTypeId() {
+      return this.cacheRow.typeId;
+    },
+    isSmallType() {
+      return this.cacheRow.typeId == DEVICE_TYPE_SMALL;
+    },
+    deviceTypeName() {
+      return this.cacheRow.typeId == DEVICE_TYPE_SMALL
+        ? "酒店售货机"
+        : "自助售货机";
+    }
+  },
   watch: {
-    "leftSelectRow.id": () => {
+    ["cacheRow.id"]() {
       this.init();
     }
   },
   methods: {
+    //change_huodao 小售货机的 修改货道数量
+    change_huodao(number) {
+      //add
+      if (number > this.detail.shelfs.length) {
+        var newArray = [...Array(number - this.detail.shelfs.length)].map(
+          (item, _index) => {
+            //得到最后一个 shelf
+            var listItem = this.detail.shelfs[this.detail.shelfs.length - 1]
+            return {
+              id: parseInt(listItem.number) + _index + 1,
+              number: parseInt(listItem.number) + _index + 1,
+              productId: "",
+              safeStock: "",
+              price: "",
+              maxStock: "",
+            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        this.detail.shelfs = this.detail.shelfs.splice(0, number);
+      }
+    },
+    //删除 货道
+    deleteItem(item) {
+      this.editItem = this.editItem.filter(
+        item1 => item.number != item1.number
+      );
+      if (this.isSmallType) {
+        var _index = this.detail.shelfs.findIndex(__item => __item.number == item.number)
+        this.detail.shelfs.splice(_index, 1);
+      } else {
+        this.detail.shelfs[item.uuid.split(":")[0]].items.splice(
+          item.uuid.split(":")[1],
+          1
+        );
+        //如果这个 东西没了 delete this row
+        if (this.detail.shelfs[item.uuid.split(":")[0]].items.length == 0) {
+          this.detail.shelfs.splice(item.uuid.split(":")[0], 1);
+        }
+      }
+      this.sortFornumber();
+    },
+    // 选择所有
+    check_all(checked) {
+      //1.目前在编辑的
+      var editItem = [];
+      if (this.isSmallType) {
+        this.$data.detail.shelfs.map(item => {
+          item.isEdit = checked;
+          if (checked) {
+            editItem.push(item);
+          }
+        });
+      } else {
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.isEdit = checked;
+            if (checked) {
+              editItem.push(item);
+            }
+            return item;
+          });
+        });
+      }
+
+      this.editItem = editItem;
+    },
+    // 修改货道 多少层
+    change_cheng(ceng) {
+      //add
+      if (ceng > this.detail.shelfs.length) {
+        var newArray = [...Array(ceng - this.detail.shelfs.length)].map(
+          item => {
+            return {              items: [{
+                id: this.detail.shelfs.length + 1,
+                number: this.detail.shelfs.length + 1,
+                uuid: `${ceng}:${this.detail.shelfs.length + 1}`
+              }]            };
+          }
+        );
+        this.detail.shelfs = [...this.detail.shelfs, ...newArray];
+        this.sortFornumber();
+      } else {
+        //delete
+        this.detail.shelfs = this.detail.shelfs.splice(0, ceng);
+      }
+    },
+    //修改选择的货道
+    finishUpadteEditItems(upodateitem) {
+      // update it
+      var self = this;
+      //small/big type update different
+      if (this.isSmallType) {
+        // 判断如果 number 以及没占用 return false
+        if (this.editItem.length == 1 && upodateitem.number != this.editItem[0].number) {
+          var index = self.detail.shelfs.findIndex(item => item.number == upodateitem.number)
+          if (index >= 0) {
+            myalert.fail('货道号以及被占用')
+            return false
+          }
+        }
+        //只有一个数据 //多个数据 需要修改 不懂 number
+        this.editItem.map(item => {
+          var _index = self.detail.shelfs.findIndex(__item => __item.number == item.number)
+          if (_index >= 0) {
+            if (this.editItem.length == 1) {
+              self.detail.shelfs[_index] = {
+                ...upodateitem
+              };
+            } else {
+              self.detail.shelfs[_index] = {
+                ...upodateitem,
+                number: self.detail.shelfs[_index].number
+              };
+            }
+
+          }
+        });
+        //排序
+        this.sortFornumber()
+      } else {
+        this.editItem.map(item => {
+          var x = item.uuid.split(":")[0];
+          var y = item.uuid.split(":")[1];
+          self.detail.shelfs[x].items[y] = {
+            ...upodateitem,
+            uuid: self.detail.shelfs[x].items[y].uuid,
+            id: self.detail.shelfs[x].items[y].id,
+            number: self.detail.shelfs[x].items[y].number
+          };
+        });
+      }
+
+      //修改完成之后 取消 选择
+      if (!this.isSmallType) {
+        this.editItem.map(item => {
+          self.detail.shelfs[item.uuid.split(":")[0]].items[
+            item.uuid.split(":")[1]
+          ].isEdit = false;
+        });
+        this.editItem = [];
+      } else {
+        this.editItem.map(item => {
+          if (self.detail.shelfs[item.number - 1]) {
+            self.detail.shelfs[item.number - 1].isEdit = false;
+          }
+
+        });
+        this.editItem = [];
+      }
+
+      this.ItemEditProductModalStatus = false
+    },
+    //开始修改选择的货道
+    go2updateSelectItems(item) {
+      if (this.editItem.length <= 0) {
+        myalert.fail("请选择先")
+        return false
+      }
+      //如果存在 item  对象 修改edititem
+      if (item.uuid) {
+        this.editItem[0] = item;
+      }
+      //判断 items是不是array
+      this.ItemEditProductModalStatus = true;
+    },
+    selectItems(items) {
+      this.editItem = items;
+    },
+    //给每个array的货道后排序
+    sortFornumber() {
+      // 大售货机
+      if (!this.isSmallType) {
+        var number = 1;
+        this.$data.detail.shelfs.map((row, x) => {
+          row.items.map((item, y) => {
+            item.number = number;
+            item.id = number;
+            item.uuid = `${x}:${y}`;
+            number++;
+            return item;
+          });
+        });
+      } else {
+        // 小售货机
+        this.$data.detail.shelfs = this.$data.detail.shelfs.sort((a, b) => {
+          return a.number - b.number;
+        });
+      }
+    },
+    //修改 层 里面的 货道 数目的时候
+    changeCengNumber(value, cengnumber) {
+      //reset  this.editItem = [];
+      this.editItem = [];
+      // 如果是多
+      var nowArraylength = this.$data.detail.shelfs[cengnumber].items.length;
+
+      if (value > nowArraylength) {
+        let diff = value - nowArraylength;
+        var newArray = [...Array(diff)].map((item, _index) => {
+          item = {
+            number: nowArraylength + _index + 1, //unid
+            id: nowArraylength + _index + 1, //unid
+            uuid: `${cengnumber}:${nowArraylength + _index + 1}`
+          };
+          return item;
+        });
+        this.$data.detail.shelfs[cengnumber].items = [
+          ...this.$data.detail.shelfs[cengnumber].items,
+          ...newArray
+        ];
+        //如果这个层的货道的 最后一个number 大于 下一层的第一个货道的number
+        this.sortFornumber();
+      } else {
+        //如果是少
+        this.$data.detail.shelfs[cengnumber].items = this.$data.detail.shelfs[
+          cengnumber
+        ].items.splice(0, value);
+        this.sortFornumber();
+      }
+      // 把这一row delete掉
+      if (value == 0) {
+        this.$data.detail.shelfs.splice(cengnumber, 1);
+        this.sortFornumber();
+      }
+    },
+    changeShelfCount(num) {
+      if (this.detail.shelfs.length < num) {
+        for (let i = 0; i < num - this.detail.shelfs.length; i++) {
+          this.detail.shelfs.push({
+            number: this.detail.shelfs.length + 1,
+            isEdit: false,
+            image: "",
+            productId: "",
+            safeStock: 1,
+            price: "",
+            maxStock: 1,
+            name: ""
+          });
+        }
+      }
+      if (this.detail.shelfs.length > num) {
+        for (let i = 0; i < this.detail.shelfs.length - num; i++) {
+          this.detail.shelfs.splice(this.detail.shelfs.length - 1, 1);
+        }
+      }
+    },
+    selectItem(item) {
+      this.$data.editItem = [item];
+    },
+    //submit 小收获机
+    submit_small() {
+      var self = this;
+      var shelfs = [];
+      shelfs = this.detail.shelfs;
+      var data = {
+        ...this.cacheRow,
+        deviceId: this.cacheRow.id, //编辑的id
+        shelfCount: this.detail.shelfs.length,
+        shelfs
+      };
+      var isOkPost = true;
+      data.shelfs.map(item => {
+        if (!item.productId) {
+          isOkPost = false;
+        }
+      });
+      if (!isOkPost) {
+        myalert.fail("检查到有货道没有产品");
+        return false;
+      }
+      self.$data.loading = true;
+      put_shelfs_device_detail(data)
+        .then(res => {
+          setTimeout(() => {
+            self.init().then(res => {
+              myalert.success("保存成功");
+              self.$data.loading = false;
+            });
+          }, 1000);
+        })
+        .catch(e => {
+          console.error(e);
+          self.$data.loading = false;
+        });
+    },
+    submit_big() {
+      var self = this;
+      var data = {
+        ...this.cacheRow,
+        deviceId: this.cacheRow.id, //编辑的id
+        rows: this.detail.shelfs
+      };
+      delete data.shelfs;
+      var isOkPost = true;
+      data.rows.map(row => {
+        row.items.map(item => {
+          if (!item.productId) {
+            isOkPost = false;
+          }
+        });
+      });
+      if (!isOkPost) {
+        myalert.fail("检查到有货道没有产品");
+        return false;
+      }
+      self.$data.loading = true;
+      put_shelfs_device_detail_vm(data)
+        .then(res => {
+          setTimeout(() => {
+            self.init().then(res => {
+              myalert.success("保存成功");
+              self.$data.loading = false;
+            });
+          }, 1000);
+        })
+        .catch(e => {
+          console.error(e);
+          self.$data.loading = false;
+        });
+    },
+    //submit 大收获机
+    submit1() {
+      if (this.isSmallType) {
+        this.submit_small();
+      } else {
+        this.submit_big();
+      }
+    },
+    finishEdit(formData) {
+      var self = this;
+      var shelfs = this.$data.detail.shelfs;
+      shelfs.map((item, index) => {
+        self.$data.editItem.map((item2, index2) => {
+          if (item2.number == item.number) {
+            if (self.$data.editItem.length <= 1) {
+              item.number = formData.number;
+            }
+            item.price = formData.price;
+            item.image = formData.image;
+            item.productId = formData.productId;
+            item.safeStock = formData.safeStock;
+            item.maxStock = formData.maxStock;
+            item.name = formData.name;
+          }
+        });
+      });
+      //取消选择
+      self.$data.editItem = [];
+    },
+    async init() {
+      var id = this.cacheRow.id; //编辑的id
+      this.$data.loading = true;
+      var shelfs = [];
+      // small
+      if (this.cacheRow.typeId == DEVICE_TYPE_SMALL) {
+        var result = await get_shelfs_device_detail(this.cacheRow.id);
+        shelfs = result.shelfs;
+      }
+      //  big
+      else {
+        shelfs = await get_shelfs_device_detail_vm(id).then(result => {
+          if (result.rows) {
+            return result.rows.map((row, x) => {
+              row.items &&
+                row.items.map((item, y) => {
+                  item.uuid = `${x}:${y}`;
+                  item.isEdit = false;
+                  return item;
+                });
+              return row;
+            });
+          } else {
+            return [];
+          }
+        });
+      }
+
+      this.editItem = [];
+      this.$data.detail.shelfs = shelfs;
+      this.$data.loading = false;
+    },
     addItem() {
       var self = this;
       var shelfs = this.$data.detail.shelfs;
@@ -64,60 +591,25 @@ export default {
       };
       shelfs.push(newItem);
     },
+    pilian1() {
+      if (this.$data.editItem.length <= 0) {
+        myalert.fail("请选择先");
+        return false;
+        // asd
+      }
+      this.$data.editModalState = true;
+    },
     pilian2() {
       if (this.$data.editItem.length <= 0) {
         myalert.fail("请选择先");
         return false;
       }
+      this.$data.visiblerpoduct = true;
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-.pageContainer {
+@import "../list/styles/rightEdit.scss";
-}
-header {
-  width: 100%;
-  align-items: center;
-  display: flex;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-  h3 {
-    flex: 1;
-  }
-  .smnallbtns {
-    padding-left: 20px;
-    flex: 1;
-    display: flex;
-    .item {
-      padding-right: 20px;
-      display: flex;
-    }
-  }
-}
-
-.list {
-  padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  .listItem {
-    box-sizing: border-box;
-    display: inline-block;
-    width: calc(50%-20px);
-    border: 1px solid #ddd;
-    display: flex;
-    padding: 10px;
-    margin-bottom: 20px;
-    position: relative;
-    &:nth-child(2n + 1) {
-      margin-right: 20px;
-    }
-    &.add {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
 </style>
 

src/views/shelfs/status/table.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="tableContainer">
-    <header class="btns" style="padding-top:18px;padding-bottom: 18px;">
+    <header
+      class="btns"
+      style="padding-top:18px;padding-bottom: 18px;"
+    >
       <h3>设备列表</h3>
       <div class="smnallbtns">
         <div class="item">
@@ -19,8 +22,14 @@
       :row-class-name="tableRowClassName"
       @row-click="(row)=>{$emit('clickrow',row)}"
     >
-      <el-table-column label="编号" prop="id"></el-table-column>
+      <el-table-column
-      <el-table-column label="名字" prop="name">
+        label="编号"
+        prop="id"
+      ></el-table-column>
+      <el-table-column
+        label="名字"
+        prop="name"
+      >
         <template slot-scope="scope">
           <div
             :to="'/shelfs/detail?id='+scope.row.id"
@@ -28,8 +37,23 @@
           >{{scope.row.name}}</div>
         </template>
       </el-table-column>
-      <el-table-column label="地址" prop="locationName"></el-table-column>
+      <el-table-column
-      <el-table-column label="状态" prop="active">
+        label="地址"
+        prop="locationName"
+      ></el-table-column>
+      <el-table-column
+        label="类型"
+        prop="locationName"
+      >
+        <template slot-scope="scope">
+          <div v-if="scope.row.typeId=='quxia'">酒店售货机</div>
+          <div v-else="!scope.row.typeId=='quxia-vm'">自助售货机</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="状态"
+        prop="active"
+      >
         <template slot-scope="scope">
           <div v-if="scope.row.active">在线</div>
           <div v-if="!scope.row.active">离线</div>
@@ -38,7 +62,10 @@
       <!-- <el-table-column label="设备数" prop="devices"></el-table-column> -->
     </el-table>
 
-    <div class="paginationContainer" style="padding-top:20px">
+    <div
+      class="paginationContainer"
+      style="padding-top:20px"
+    >
       <el-pagination
         background
         :page-size="dataForm.size"
@@ -71,7 +98,7 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
+  mounted() { },
   methods: {
     ...mapActions(["getDeviceTypes"]),
     tableRowClassName({ row, rowIndex }) {

src/views/valueAddedManagement/distributionSettings/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        分润设置
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "index"
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/views/valueAddedManagement/valueAddedAtatistics/channelDetails.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        渠道详情
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "channelDetails"
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/views/valueAddedManagement/valueAddedAtatistics/index.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="valueAddedAtatistics">
+        <div class="row">
+            <span>增值渠道：</span>
+            <el-select v-model="params.channelId" @change="selChange" clearable placeholder="请选择">
+                <el-option label="全部" value=""></el-option>
+                <el-option v-for="item in channel" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+
+            <div class="item1">
+                <div :class="`item ${type=='today'?'active':'none'}`" @click="selectTime('today')">今日</div>
+                <div :class="`item ${type=='week'?'active':'none'}`" @click="selectTime('week')">本周</div>
+                <div :class="`item ${type=='mouth'?'active':'none'}`" @click="selectTime('mouth')">本月</div>
+                <div :class="`item ${type=='cumulative'?'active':'none'}`" @click="selectTime('cumulative')">累计</div>
+            </div>
+            <div class="item2">
+                <el-date-picker
+                        style="width:250px;"
+                        v-model="dates"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始"
+                        end-placeholder="结束"
+                        @change="dateChange"
+                ></el-date-picker>
+            </div>
+        </div>
+
+        <div class="profile">
+            <div class="item">
+                <div class="strong">{{summary.income==null?'0':summary.income}} 元</div>
+                <div class="small">收入</div>
+            </div>
+            <div class="item">
+                <div class="strong">{{summary.sales==null?'0':summary.sales}} 元</div>
+                <div class="small">销售额</div>
+            </div>
+            <div class="item">
+                <div class="strong">{{summary.orders==null?'0':summary.orders}} 单</div>
+                <div class="small">订单数</div>
+            </div>
+        </div>
+
+
+        <div class="table">
+            <el-table
+                    :data="listData"
+                    style="width: 100%">
+                <el-table-column
+                        prop="date"
+                        label="增值渠道"
+                        width="180">
+                    <template slot-scope="scope">
+                        <span>{{scope.row.type |filterType}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="deviceId"
+                        label="设备ID"
+                        width="180">
+                </el-table-column>
+
+                <el-table-column
+                        prop="totalQuantity"
+                        label="商品数"
+                        width="180">
+                </el-table-column>
+                <el-table-column
+                        prop="orderTotal"
+                        label="金额"
+                        width="180">
+                </el-table-column>
+                <el-table-column
+                        prop="locationName"
+                        label="场地名称"
+                        width="180">
+                </el-table-column>
+                <el-table-column
+                        label="场地地址">
+                    <template slot-scope="scope">
+                        {{scope.row.province + scope.row.city + scope.row.district + scope.row.street}}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="createdDate"
+                        label="下单时间">
+                </el-table-column>
+                <el-table-column
+                        label="操作">
+                    <template slot-scope="scope">
+                        <span @click="itemDetail(scope.row.id)" style="color: #409EFF; cursor: pointer;">详情</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <div class="pagination">
+            <el-pagination
+                    background
+                    :page-size="params.size"
+                    layout="prev, pager, next"
+                    :total="count"
+                    @current-change="currentChange"
+            >
+            </el-pagination>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {getToday, getLastWeek, getLastMonth, dateFormate} from "@/utils/date";
+    import {GET_SUMMARY, GET_LIST_ORDERS, GET_SELECT,GET_ORDERS_COUNT} from '@/api/valueAddedManagement';
+    import moment from 'moment';
+    import {pageSize} from '../../../config';
+
+
+
+    export default {
+        name: "index",
+        data() {
+            return {
+                type: "cumulative",
+                value4: '',
+                channel: [],
+                params: {
+                    channelId: '',
+                    start: '',
+                    end: '',
+                    form: 0,
+                    size:pageSize
+                },
+                dates: [],
+                listData: [],
+                summary:{},
+                count:0
+            }
+        },
+        mounted() {
+            GET_SELECT().then(res => {
+                this.channel = res;
+            });
+            this.get_list();
+        },
+        methods: {
+
+            get_list() {
+                GET_LIST_ORDERS({...this.params}).then(res => {
+                    res.map(item => {
+                        item.createdDate = moment(item.createdDate).format('YYYY-MM-DD HH:mm:ss')
+                    });
+                    this.listData = res;
+                });
+
+                GET_SUMMARY({...this.params}).then(res=>{
+                    this.summary = res;
+                });
+
+
+                GET_ORDERS_COUNT({...this.params}).then(res=>{
+                    this.count =res;
+                })
+            },
+            selChange(val) {
+                this.params = {
+                    ...this.params,
+                    channelId: val
+                };
+                this.get_list();
+            },
+            selectTime(val) {
+                this.type = val;
+                let start, end;
+                this.dates = [];
+                if (this.type == "today") {
+                    start = getToday().start;
+                    end = getToday().end;
+                }
+                if (this.type == "week") {
+                    start = getLastWeek().start;
+                    end = getLastWeek().end;
+                }
+                if (this.type == "mouth") {
+                    start = getLastMonth().start;
+                    end = getLastMonth().end;
+                }
+
+                if (this.type == 'cumulative') {
+                    start = '';
+                    end = '';
+                }
+
+                this.params = {
+                    ...this.params,
+                    start,
+                    end,
+                };
+                this.get_list();
+            },
+            dateChange(value) {
+                if (value) {
+                    this.params = {
+                        ...this.params,
+                        start:dateFormate(value[0]),
+                        end:dateFormate(value[1])
+                    };
+                    this.get_list();
+                } else {
+                    this.selectTime("today");
+                }
+
+            },
+
+            /**
+             * 翻页
+             */
+            currentChange(res) {
+                this.params = {
+                    ...this.params,
+                    from: parseInt(res - 1) * this.params.size,
+                    size: pageSize,
+                };
+                this.get_list()
+            },
+
+            itemDetail(id){
+                this.$router.push('/advertisingManagement/orderDetails?id='+id);
+            }
+        },
+        filters: {
+            filterType(val) {
+                switch (val) {
+                    case "QINGQU":
+                        return '情趣用品';
+                        break;
+                    case "TOURISM":
+                        return '旅游商品';
+                        break;
+                    case "PINTUAN":
+                        return '拼团商城';
+                        break;
+                    case "TECHAN":
+                        return '平价特产';
+                        break;
+                    case '':
+                        return '';
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .valueAddedAtatistics {
+        padding: 20px;
+        background: #fff;
+
+        .row {
+            display: flex;
+            align-items: center;
+        }
+
+        .item1 {
+            width: 220px;
+
+            display: inline-block;
+            margin-left: 50px;
+
+            .item {
+                display: inline-block;
+                text-align: center;
+                margin-top: 10px;
+                margin-left: 5px;
+                margin-right: 15px;
+                padding-bottom: 5px;
+                cursor: pointer;
+            }
+
+            .active {
+                border-bottom: 2px solid #409EFF;
+            }
+        }
+
+        .profile {
+            display: flex;
+            justify-content: space-around;
+            margin: 50px 0;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 20px;
+
+            .item {
+                width: 100%;
+                text-align: center;
+                border-right: 1px solid #ddd;
+
+                &:last-child {
+                    border-right: none;
+                }
+
+                .strong {
+                    margin-bottom: 10px;
+                    font-size: 20px;
+                    font-weight: bolder;
+                }
+            }
+        }
+    }
+</style>

src/views/valueAddedManagement/valueAddedAtatistics/orderDetails.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="table">
+
+        <h4>渠道详情</h4>
+        <div class="table-layout">
+
+            <el-row>
+                <el-col :span="5" class="table-cell-title">增值渠道</el-col>
+                <el-col :span="5" class="table-cell-title">设备编号</el-col>
+                <el-col :span="4" class="table-cell-title">设备类型</el-col>
+                <el-col :span="4" class="table-cell-title">使用场地</el-col>
+                <el-col :span="6" class="table-cell-title">使用地址</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="5" class="table-cell">{{details.type|filterType}}</el-col>
+                <el-col :span="5" class="table-cell">{{details.deviceId}}</el-col>
+                <el-col :span="4" class="table-cell">{{details.deviceTypeName}}</el-col>
+                <el-col :span="4" class="table-cell">{{details.locationName}}</el-col>
+                <el-col :span="6" class="table-cell">{{details.province + details.city + details.district + details.street}}</el-col>
+            </el-row>
+        </div>
+
+
+        <h4>费用明细</h4>
+        <div class="table-layout">
+
+            <el-row>
+                <el-col :span="6" class="table-cell-title">商品数量</el-col>
+                <el-col :span="6" class="table-cell-title">支付方式</el-col>
+                <el-col :span="6" class="table-cell-title">订单总价</el-col>
+                <el-col :span="6" class="table-cell-title">支付时间</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell">{{details.totalQuantity}}</el-col>
+                <el-col :span="6" class="table-cell">{{details.paymentGateway}}</el-col>
+                <el-col :span="6" class="table-cell">{{details.orderTotal}}</el-col>
+                <el-col :span="6" class="table-cell">{{details.createdDate}}</el-col>
+            </el-row>
+        </div>
+
+        <h4>商品数据</h4>
+        <div>
+            <el-table
+                    border
+                    :data="details.items"
+                    style="width: 100%">
+                <el-table-column
+                        label="图片"
+                        width="180">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.productImage" width="100" height="100" alt="">
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="productName"
+                        label="商品名称">
+                </el-table-column>
+                <el-table-column
+                        prop="price"
+                        label="单价">
+                </el-table-column>
+
+                <el-table-column
+                        prop="quantity"
+                        label="数量">
+                </el-table-column>
+                <el-table-column
+                        prop="total"
+                        label="总价">
+                </el-table-column>
+            </el-table>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {GET_LIST_ORDERS_DETAIL} from '@/api/valueAddedManagement';
+    import moment from 'moment';
+
+    export default {
+        name: "orderDetails",
+        data(){
+            return{
+                details:{}
+            }
+        },
+        mounted() {
+            GET_LIST_ORDERS_DETAIL({id:this.$route.query.id}).then(res=>{
+                res.createdDate = moment(res.createdDate).format('YYYY-MM-DD HH:mm:ss');
+                if (res.paymentGateway.toLowerCase() == 'wx') {
+                    res.paymentGateway = '微信'
+                } else {
+                    res.paymentGateway = '其他'
+                }
+                this.details =res
+            })
+        },
+        filters: {
+            filterType(val) {
+                switch (val) {
+                    case "QINGQU":
+                        return '情趣用品';
+                        break;
+                    case "TOURISM":
+                        return '旅游商品';
+                        break;
+                    case "PINTUAN":
+                        return '拼团商城';
+                        break;
+                    case "TECHAN":
+                        return '平价特产';
+                        break;
+                    case '':
+                        return '';
+                        break;
+                }
+            }
+        }
+    }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .table{
+        padding: 20px;
+        background: #fff;
+    }
+    .table-layout {
+        margin-top: 20px;
+        border-left: 1px solid #DCDFE6;
+        border-top: 1px solid #DCDFE6;
+    }
+
+    .table-cell {
+        height: 60px;
+        line-height: 40px;
+        border-right: 1px solid #DCDFE6;
+        border-bottom: 1px solid #DCDFE6;
+        padding: 10px;
+        font-size: 14px;
+        color: #606266;
+        text-align: center;
+        overflow: hidden;
+    }
+
+    .table-cell-title {
+        border-right: 1px solid #DCDFE6;
+        border-bottom: 1px solid #DCDFE6;
+        padding: 10px;
+        background: #F2F6FC;
+        text-align: center;
+        font-size: 14px;
+        color: #303133;
+    }
+</style>