feature_20250722_门店建议订单

src/views/deviceOutside/productItem.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="bgcolor">
-    <div class="navBarTOP" >
-      <van-nav-bar class="navBar" title="产品列表"   left-arrow @click-left="onClickLeft">
-        <template #right>
-        </template>
+  <div class="bgcolor productItem">
+    <div class="navBarTOP">
+      <van-nav-bar class="navBar" title="产品列表" left-arrow @click-left="onClickLeft">
+        <template #right> </template>
       </van-nav-bar>
     </div>
     <div class="lineGrey"></div>
@@ -11,10 +10,14 @@
     <div class="lineGrey"></div>
     <div class="lineGrey"></div>
     <div class="lineGrey"></div>
-    <div class="container" style="width: 100%; margin: 0 auto;">
-      <div v-for="item  in  list">
-        <p style="font-weight: bold;font-size: 14px">&nbsp;&nbsp;&nbsp;{{item.m01Name}}</p>
-        <el-table :data="item.productDetailList" border  style="width: 100%"   >
+    <div class="container" style="width: 100%; margin: 0 auto">
+      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
+        <van-tab title="销售部" name="0"></van-tab>
+        <van-tab title="我的" name="1"></van-tab>
+      </van-tabs>
+      <div v-for="item in list">
+        <p style="font-weight: bold; font-size: 14px">&nbsp;&nbsp;&nbsp;{{ item.m01Name }}</p>
+        <el-table class="table-headermd" :data="item.productDetailList" border>
           <el-table-column label="物料名称" prop="productName" />
           <el-table-column label="规格" prop="productSku" />
         </el-table>
@@ -24,29 +27,29 @@
 </template>
 
 <script>
-import {getItemList} from "@/api";
+import { getItemList } from '@/api';
 export default {
   data() {
     return {
-      list: []
-    }
+      list: [],
+      tabVal: '0',
+    };
   },
-  created() {
-    this.getMyInventoryList()
-  },
-  watch: {
-    $route(to, from) {
-      if (to.path == "/pItem") {
-        this.getMyInventoryList()
-      }
-    }
+  activated() {
+    this.getMyInventoryList();
   },
   methods: {
+    tabChange(name) {
+      this.tabVal = name;
+      this.getMyInventoryList();
+    },
     onSelect(action) {
-      this.$router.push({path: "/material", query: {
-          tabVal:action
-        }
-      })
+      this.$router.push({
+        path: '/material',
+        query: {
+          tabVal: action,
+        },
+      });
     },
     getMyInventoryList() {
       let loading1 = this.$toast.loading({
@@ -54,19 +57,90 @@ export default {
         message: '加载中...',
         forbidClick: true,
       });
-      getItemList({storeCode:this.$route.query.id}).then(res => {
-        loading1.clear()
+      getItemList({ storeCode: this.$route.query.id }).then((res) => {
+        loading1.clear();
         if (res.code == 200) {
           this.loading = false;
-          this.list = res.data
+          this.list = res.data;
         } else {
-          this.$toast.fail(res.msg)
+          this.$toast.fail(res.msg);
         }
-      })
+      });
     },
+
     onClickLeft() {
-      this.$router.go(-1)
+      this.$router.go(-1);
     },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.productItem {
+  .myTab {
+    .van-tabs__nav--card {
+      margin: 0 !important;
+      border-left: 0;
+      border-right: 0;
+    }
+    .van-tabs__wrap,
+    .van-tabs__nav--card {
+      height: 39px;
+    }
+    .van-tab {
+      line-height: 40px;
+    }
+  }
+  .myList {
+    .van-cell {
+      padding: 0;
+      &:after {
+        border-bottom: none;
+      }
+    }
   }
 }
-</script>
+</style>
+<style lang="scss">
+.table-headermd {
+  font-size: 1.2rem;
+  text-align: center;
+  position: initial;
+  width: 94% !important;
+  margin: 0 auto;
+  border-right: 0;
+}
+
+.table-headermd .el-table__header,
+.table-headermd .el-table__body {
+  width: 100% !important;
+}
+
+.table-headermd col {
+  width: 5.8rem;
+}
+
+.table-headermd col:nth-child(2),
+.table-headermd col:nth-child(4),
+.table-headermd col:nth-child(3) {
+  width: 5rem;
+}
+
+.table-headermd .van-cell {
+  padding: 0 4px;
+  height: 100%;
+}
+
+.table-headermd th.el-table__cell > .cell {
+  padding: 0 4px;
+}
+
+.table-headermd th.el-table__cell {
+  background-color: #1989fa;
+  color: #fff;
+}
+
+.table-headermd .el-table__cell {
+  padding: 4px 0;
+}
+</style>