feat 绑定打印机

src/api/shop.js

@@ -118,11 +118,11 @@ export const deviceList = (params) => {
 }
 // 设备新增、编辑
 export const deviceAdd = (params) => {
-  return get('app/shop/device/add', params)
+  return post('app/shop/device/add', params)
 }
 // 设备删除
 export const deviceDelete = (params) => {
-  return get('app/shop/device/delete', params)
+  return post('app/shop/device/delete', params)
 }
 // 设备状态
 export const deviceStatus = (params) => {

src/components/shopCompoents/bindPrinter.vue

@@ -1,95 +1,182 @@
 <template>
-  <div>
+  <div class="bind-printer" v-loading="loading" element-loading-text="数据加载中">
     <div class="store-list">
-      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
     </div>
-     <div class="take-out-list">
-      <div class="item">
-        <div class="item-top">
-          <div class="name">美团外卖</div>
-          <div class="top-right">
-            <span>开启后自动接单</span>
-            <el-switch />
-          </div>
-        </div>
-        <div class="item-bottom">
-          <div class="left">
-            <div class="l-l">
-              <img src="../../../static/image/alipay.png" class="l-l-img" />
-            </div>
-            <div class="take-out-name">
-              <div class="take-out-name-bot">
-                <span class="status1">· 打印机离线</span>
-                <span class="status2">· 打印机离线</span>
-                <span class="status3">· 打印机离线</span>
-              </div>
-              <div>打印机名称：飞鹅打印机</div>
-              <div>打印机编号：VXN2020080765184</div>
-              <div class="take-out-name-bot">打印机KEY：1234</div>
-              <div>客户联：X1</div>
-              <div>商家联：X1</div>
-              <div>厨房联：X1</div>
-            </div>
-          </div>
-          <div class="right">
-            <el-button size="small">编&nbsp;辑</el-button>
-          </div>
+    <div class="header">
+      <div class="left">
+        <div class="line">
+          <div class="b_line"></div>
+          <div class="triangle"></div>
         </div>
+        <div class="label">打印机管理</div>
+      </div>
+      <div class="right">
+        <el-button class="btn" @click.stop="addPrinter(1)">添加打印机</el-button>
       </div>
     </div>
-
-    <div class="take-out-list">
+    <div class="take-out-list" v-for="(v,i) in printerList" :key="i">
       <div class="item">
         <div class="item-top">
-          <div class="name">添加打印机</div>
+          <div class="name">{{v.name}}</div>
         </div>
         <div class="item-bottom">
           <div class="left">
             <div class="l-l">
-              <img src="../../../static/image/printer.png" class="l-l-img" />
+              <img src="../../../static/image/alipay.png" class="l-l-img" />
             </div>
             <div class="take-out-name">
               <div class="take-out-name-bot">
-                <span class="status1">请添加打印机</span>
+                <span :class="['status'+v.onlineStatus,'status']"> 打印机{{v.onlineStatus === 1 ? '在线' : v.onlineStatus === 2 ? '异常' : '离线'}}</span>
               </div>
-              <div>打印机名称：-</div>
-              <div>打印机编号：-</div>
-              <div class="take-out-name-bot">打印机KEY：-</div>
-              <div>客户联：-</div>
-              <div>商家联：-</div>
-              <div>厨房联：-</div>
+              <div>打印机名称：{{v.deviceName}}</div>
+              <div>打印机编号：{{v.deviceSn}}</div>
+              <div class="take-out-name-bot">打印机KEY：{{v.deviceSecret}}</div>
+              <div>客户联：X{{v.printCustomerCount}}</div>
+              <div>商家联：X{{v.printMerchantCount}}</div>
+              <div>厨房联：X{{v.printKitchenCount}}</div>
             </div>
           </div>
           <div class="right">
-            <el-button type="primary" size="small" class="right-btn">添加打印机</el-button>
+            <el-button @click="addPrinter(2,v)" size="small">编&nbsp;辑</el-button>
+            <el-button type="danger" @click="deletePrinter(v)" size="small">删&nbsp;除</el-button>
           </div>
         </div>
       </div>
     </div>
-
-
+    <printer-add @shopDeviceList="shopDeviceList(curIdx)" ref="printerAdd" :devices="deviceList"></printer-add>
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        storeList: [
-          { id: 1, name: '门店名称-1' },
-          { id: 2, name: '门店名称-2' },
-          { id: 3, name: '门店名称-3' },
-          { id: 4, name: '门店名称-4' },
-          { id: 5, name: '门店名称-5' },
-          { id: 6, name: '门店名称-6' },
-          { id: 7, name: '门店名称-7' }
-        ]
+import printerAdd from "./printerAdd";
+import {
+  getShopList,
+  shopDeviceList,
+  deviceDetail,
+  deviceList,
+  deviceAdd,
+  deviceDelete,
+  deviceStatus,
+} from "../../api/shop";
+export default {
+  components: {
+    printerAdd,
+  },
+  data() {
+    return {
+      shopList: [
+        { id: 1, name: "门店名称-1" },
+        { id: 2, name: "门店名称-2" },
+        { id: 3, name: "门店名称-3" },
+        { id: 4, name: "门店名称-4" },
+        { id: 5, name: "门店名称-5" },
+        { id: 6, name: "门店名称-6" },
+        { id: 7, name: "门店名称-7" },
+      ],
+      curIdx: -1,
+      loading: true,
+      printerList: [],
+      showVisible: false,
+      title: "添加打印机",
+      deviceList: [],
+    };
+  },
+  watch: {
+    curIdx(newVal, oldVal) {
+      this.shopDeviceList(newVal);
+    },
+  },
+  created() {
+    this.getShopList();
+    this.getDeviceList();
+  },
+  methods: {
+    deletePrinter(v) {
+      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deviceDelete({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                type: "error",
+                message: "删除成功！",
+              });
+              this.shopDeviceList(this.curIdx);
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    getDeviceList() {
+      deviceList({ type: 2 }).then((res) => {
+        if (res.code === 200) {
+          this.deviceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getShopList() {
+      getShopList().then((res) => {
+        this.loading = true;
+        if (res.code === 200) {
+          this.shopList = res.data;
+          this.curIdx = 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.loading = false;
+      });
+    },
+    addPrinter(val, e) {
+      if (val === 1) {
+        let shopId = this.shopList[this.curIdx].id;
+        this.$refs.printerAdd.init("", shopId);
+      } else {
+        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
       }
-    }
-  }
+    },
+    shopDeviceList(index) {
+      shopDeviceList({ deviceType: 2, shopId: this.shopList[index].id }).then(
+        (res) => {
+          if (res.code === 200) {
+            this.printerList = res.data;
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        }
+      );
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.bind-printer {
+  min-height: 200px;
   .store-list {
     display: flex;
     flex-wrap: nowrap;
@@ -103,14 +190,14 @@
       font-size: 14px;
       font-family: PingFang SC;
       font-weight: 400;
-      color: #B1B1B1;
+      color: #b1b1b1;
       box-sizing: border-box;
       border: 1px solid #eee;
       border-radius: 17px;
       cursor: pointer;
       margin-right: 10px;
       &.active {
-        color: #017E61;
+        color: #fc7200;
       }
     }
   }
@@ -153,7 +240,7 @@
             font-size: 14px;
             font-family: PingFang SC;
             font-weight: 400;
-            color: #B1B1B1;
+            color: #b1b1b1;
             margin-right: 12px;
           }
         }
@@ -183,27 +270,120 @@
             color: #333333;
             line-height: 26px;
             margin-left: 30px;
-            .take-out-name-bot{
+            .take-out-name-bot {
               margin-bottom: 10px;
-              .status1{
-                color: #B1B1B1;
+              .status {
+                display: flex;
+                align-items: center;
+                &:before {
+                  content: "";
+                  display: block;
+                  width: 8px;
+                  height: 8px;
+                  border-radius: 50%;
+                  margin-right: 5px;
+                }
               }
-              .status2{
-                color: #F74141;
+              .status0 {
+                color: #b1b1b1;
+                &:before {
+                  background: #b1b1b1;
+                }
               }
-              .status3{
-                color: #18B71C;
+              .status2 {
+                color: #f74141;
+                &:before {
+                  background: #f74141;
+                }
+              }
+              .status1 {
+                color: #18b71c;
+                &:before {
+                  background: #18b71c;
+                }
               }
             }
           }
         }
         .right {
           .right-btn {
-            background-color: #FC7200;
+            background-color: #fc7200;
             border: none;
           }
         }
       }
     }
   }
+  .category_box {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: -10px;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 92px;
+      height: 38px;
+      margin: 10px 10px 0 0;
+      background: #f4f4f4;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.active {
+        color: #ffffff;
+        background: #fc7200;
+      }
+    }
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px;
+    .left {
+      display: flex;
+      align-items: center;
+
+      .line {
+        position: relative;
+        width: 4px;
+        height: 15px;
+        background: #fc7200;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-right: 10px;
+
+        .b_line {
+          width: 100px;
+          height: 6px;
+          background: #462bf7;
+        }
+
+        .triangle {
+          width: 0;
+          height: 0;
+          border-top: 100px solid #462bf7;
+          border-left: 100px solid transparent;
+        }
+      }
+
+      .label {
+        font-size: 16px;
+        font-weight: 500;
+        color: #0d1e40;
+      }
+    }
+  }
+  .btn {
+    background: #fc7200;
+    border-color: #fc7200;
+    color: #fff;
+    &.black {
+      background: #0d1e40;
+      border-color: #0d1e40;
+    }
+  }
+}
 </style>

src/components/shopCompoents/bindTakeOut.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="take-out" v-loading="loading" element-loading-text="数据加载中">
     <div class="store-list">
-      <div class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+      <div class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
     </div>
     <div class="take-out-list">
       <div class="item" v-for="(v,index) in takeOutList" :key="index">
@@ -49,11 +49,12 @@ import {
 export default {
   data() {
     return {
-      storeList: [],
+      shopList: [],
       takeOutList: [],
       curIdx: -1,
-      jumpUrl: '',
+      jumpUrl: "",
       fullscreenLoading: false,
+      loading: true,
     };
   },
   watch: {
@@ -83,24 +84,49 @@ export default {
   },
   created() {
     getShopList().then((res) => {
-      this.storeList = res.data;
-      this.curIdx = 0;
+      this.loading = true;
+      getShopList().then((res) => {
+        if (res.code === 200) {
+          this.shopList = res.data;
+          this.curIdx = 0;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.loading = false;
+      });
     });
   },
   methods: {
     getBindTakeOutList(index) {
-      getBindTakeOutList({ shopId: this.storeList[index].id }).then((res) => {
-        this.takeOutList = res.data;
+      getBindTakeOutList({ shopId: this.shopList[index].id }).then((res) => {
+        if (res.code === 200) {
+          this.takeOutList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
       });
     },
     goBind(v) {
       let params = {
-        shopId: this.storeList[this.curIdx].id,
+        shopId: this.shopList[this.curIdx].id,
         waimaiId: v.waimaiId,
         isNew: 1,
       };
       bindTakeOut(params).then((res) => {
-        this.jumpUrl = res.data;
+        if (res.code === 200) {
+          this.jumpUrl = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
       });
     },
     release(v) {
@@ -141,114 +167,117 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.store-list {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-  white-space: nowrap;
-  overflow-x: auto;
-  padding-bottom: 10px;
-  &-item {
-    padding: 8px 27px;
-    background-color: #fff;
-    font-size: 14px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #b1b1b1;
-    box-sizing: border-box;
-    border: 1px solid #eee;
-    border-radius: 17px;
-    cursor: pointer;
-    margin-right: 10px;
-    &.active {
-      color: #017e61;
+.take-out {
+  min-height: 200px;
+  .store-list {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 10px;
+    &-item {
+      padding: 8px 27px;
+      background-color: #fff;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #b1b1b1;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      border-radius: 17px;
+      cursor: pointer;
+      margin-right: 10px;
+      &.active {
+        color: #fc7200;
+      }
     }
   }
-}
-.store-list::-webkit-scrollbar {
-  height: 6px;
-}
-.store-list::-webkit-scrollbar-track {
-  background-color: #eee;
-  /*border-radius: 5px;
+  .store-list::-webkit-scrollbar {
+    height: 6px;
+  }
+  .store-list::-webkit-scrollbar-track {
+    background-color: #eee;
+    /*border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;*/
-}
-.store-list::-webkit-scrollbar-thumb {
-  background-color: #999;
-  border-radius: 6px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-}
+  }
+  .store-list::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+  }
 
-.take-out-list {
-  .item {
-    background-color: #fff;
-    .item-top {
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 20px 18px;
-      align-items: center;
-      border-bottom: 1px solid #eee;
-      .top-left {
+  .take-out-list {
+    .item {
+      background-color: #fff;
+      .item-top {
         display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 20px 18px;
         align-items: center;
-        .top-left-img {
-          width: 30px;
-          height: 30px;
-          margin-right: 10px;
-        }
-        .name {
-          font-size: 16px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #ffa608;
+        border-bottom: 1px solid #eee;
+        .top-left {
+          display: flex;
+          align-items: center;
+          .top-left-img {
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+          }
+          .name {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ffa608;
+          }
         }
-      }
-      .top-right {
-        display: flex;
-        align-items: center;
-        span {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #b1b1b1;
-          margin-right: 12px;
+        .top-right {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #b1b1b1;
+            margin-right: 12px;
+          }
         }
       }
-    }
-    .item-bottom {
-      display: flex;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 25px 18px;
-      align-items: center;
-      .left {
+      .item-bottom {
         display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25px 18px;
         align-items: center;
-        .l-l {
-          width: 160px;
-          height: 50px;
-          font-size: 0;
-          .l-l-img {
-            width: 100%;
-            height: 100%;
+        .left {
+          display: flex;
+          align-items: center;
+          .l-l {
+            width: 160px;
+            height: 50px;
+            font-size: 0;
+            .l-l-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .take-out-name {
+            font-size: 13px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+            margin-left: 30px;
           }
         }
-        .take-out-name {
-          font-size: 13px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #333333;
-          line-height: 20px;
-          margin-left: 30px;
-        }
-      }
-      .right {
-        .right-btn {
-          background-color: #fc7200;
-          border: #fc7200;
+        .right {
+          .right-btn {
+            background-color: #fc7200;
+            border: #fc7200;
+          }
         }
       }
     }

src/components/shopCompoents/printerAdd.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="shopAdd">
+    <!-- 打印机新增、编辑 -->
+    <el-dialog width="40%" :title="title" destroy-on-close center :visible.sync="showVisible">
+      <el-form :model="form" ref="form" label-width="120px">
+        <el-form-item label="选择打印机"  prop="deviceType">
+          <div class="category_box">
+            <div class="item" :class="form.deviceType == item.type ? 'active':''" v-for="(item,i) in devices" :key="i" @click="changeType(item)">
+              {{item.name}}
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="打印机名称"  prop="name">
+          <el-input v-model="form.name" placeholder="给这台打印机取个名字吧" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="打印机编号"  prop="deviceSn">
+          <el-input v-model="form.deviceSn" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="打印机KEY"  prop="deviceSecret">
+          <el-input v-model="form.deviceSecret" placeholder="查看打印机底部标签" autocomplete="off" style="width: 100%">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="自动打印接单"  prop="deviceSecret">
+          <el-switch v-model="form.openOrderPrint" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="自动打印取消单"  prop="deviceSecret">
+          <el-switch v-model="form.openOrderCancelPrint" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="打印份数" >
+          <div class="printer-num">
+            <img @click="reduce(1)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printCustomerCount}} 份</div>
+            <img @click="add(1)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">客户联</div>
+          </div>
+          <div class="printer-num">
+            <img @click="reduce(2)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printMerchantCount}} 份</div>
+            <img @click="add(2)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">商家联</div>
+          </div>
+          <div class="printer-num">
+            <img @click="reduce(3)" src="../../../static/image/icon_reduce.png" class="reduce" alt="" srcset="">
+            <div class="num">{{form.printKitchenCount}} 份</div>
+            <img @click="add(3)" src="../../../static/image/icon_add.png" class="add" alt="" srcset="">
+            <div class="name">厨房联</div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" class="btn" @click="save">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { deviceAdd } from "../../api/shop.js";
+export default {
+  props: {
+    devices: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      title: "添加打印机",
+      showVisible: false,
+      form: {},
+      revieweds: [],
+    };
+  },
+  methods: {
+    changeType(v){
+      this.$set(this.form,'deviceType',v.type)
+      this.form.deviceId = v.id
+    },
+    init(e,shopId) {
+      if (e) {
+        console.log(e);
+        this.title = "编辑打印机";
+        this.form = e;
+      } else {
+        this.title = "添加打印机";
+        this.form = {
+          printCustomerCount: 0,
+          printMerchantCount: 0,
+          printKitchenCount: 0,
+          shopId
+        };
+      }
+      this.showVisible = true;
+    },
+    save() {
+      deviceAdd(this.form).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: `${this.form.id ? "保存" : "新增"}成功！`,
+          });
+          this.$emit("shopDeviceList");
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    add(type) {
+      switch (type) {
+        case 1:
+          this.form.printCustomerCount = ++this.form.printCustomerCount;
+          break;
+        case 2:
+          this.form.printMerchantCount = ++this.form.printMerchantCount;
+          break;
+        case 3:
+          this.form.printKitchenCount = ++this.form.printKitchenCount;
+          break;
+
+        default:
+          break;
+      }
+    },
+    reduce(type) {
+      switch (type) {
+        case 1:
+          this.form.printCustomerCount = this.form.printCustomerCount
+            ? --this.form.printCustomerCount
+            : this.form.printCustomerCount;
+          break;
+        case 2:
+          this.form.printMerchantCount = this.form.printMerchantCount
+            ? --this.form.printMerchantCount
+            : this.form.printMerchantCount;
+          break;
+        case 3:
+          this.form.printKitchenCount = this.form.printKitchenCount
+            ? --this.form.printKitchenCount
+            : this.form.printKitchenCount;
+          break;
+
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.shopAdd {
+  .printer-num {
+    display: flex;
+    align-items: center;
+    .reduce {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+    .num {
+      margin: 0 10px;
+    }
+    .add {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+    .name {
+      margin-left: 20px;
+    }
+  }
+  .el-dialog {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close:hover {
+    color: #909399;
+  }
+
+  .el-dialog__header {
+    /*height: 48px;*/
+    background: #f7f7f7;
+    padding: 16px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  .el-form-item__label {
+    text-align: left;
+    color: #000000;
+  }
+
+  .el-input__inner:focus {
+    border-color: #fc7b0f;
+  }
+
+  .el-input__inner {
+    color: #222222;
+  }
+
+  .category_box {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: -10px;
+
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 92px;
+      height: 38px;
+      margin: 10px 10px 0 0;
+      background: #f4f4f4;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.active {
+        color: #ffffff;
+        background: #fc7200;
+      }
+    }
+  }
+
+  .line {
+    position: absolute;
+    left: -103px;
+    right: 0;
+    bottom: -12px;
+    border: 0.5px dashed #e0e0e0;
+  }
+
+  .logo_box {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    line-height: 0;
+
+    img {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+  }
+
+  .reviewed {
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+
+      .left {
+        display: flex;
+        align-items: center;
+        line-height: 0;
+
+        .logo {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+
+        .label {
+          font-size: 14px;
+          color: #000000;
+        }
+      }
+
+      .tip {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 22px;
+        border-radius: 22px;
+        background: #f74141;
+        font-size: 12px;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .btn {
+    background: #fc7200;
+    color: #ffffff;
+    width: 220px;
+  }
+}
+</style>

src/components/shopCompoents/shopAdd.vue

@@ -7,7 +7,7 @@
         </el-form-item>
         <el-form-item label="主营类别" label-width="103px">
           <div class="category_box">
-            <div class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i" @click="form.categoryId = item.id">
+            <div class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i" @click="$set(form,'categoryId',item.id)">
               {{item.name}}
             </div>
           </div>
@@ -106,6 +106,7 @@ export default {
             type: "success",
             message: `${this.form.id ? "保存" : "新增"}成功！`,
           });
+          this.$emit('getData')
         } else {
           this.$message({
             type: "error",

src/components/shopCompoents/shopList.vue

@@ -12,7 +12,7 @@
         <el-button class="btn" @click.stop="addShop(1)">新增门店</el-button>
       </div>
     </div>
-    <el-table v-loading="loading" element-loading-text="数据加载中" :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
+    <el-table v-loading="loading" element-loading-text="数据加载中" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
       <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
       <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
       <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
@@ -32,7 +32,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <shop-add ref="shopAdd" :products="productList"></shop-add>
+    <shop-add @getData="getData" ref="shopAdd" :products="productList"></shop-add>
   </div>
 </template>
 
@@ -47,7 +47,7 @@ export default {
   data() {
     return {
       loading: false,
-      data: [],
+      shopList: [],
       productList: [],
     };
   },
@@ -62,7 +62,7 @@ export default {
       if (val == 1) {
         this.$refs.shopAdd.init();
       } else {
-        this.$refs.shopAdd.init(e);
+        this.$refs.shopAdd.init(JSON.parse(JSON.stringify(e)));
       }
     },
 
@@ -70,7 +70,7 @@ export default {
       this.loading = true;
       getShopList().then((res) => {
         if (res.code === 200) {
-          this.data = res.data;
+          this.shopList = res.data;
         } else {
           this.$message({
             type: "error",