表格样式调整

src/views/Admin/inventory.vue

@@ -26,7 +26,9 @@
       </van-grid>
       <!--      筛选/-->
       <van-row type="flex" align="center" class="menu">
-        <van-col span="8" :class="(!params.goodsCategoryId) && (!params.stockWarning)?'checked': ''" @click="queryAll">全部库存</van-col>
+        <van-col span="8" :class="(!params.goodsCategoryId) && (!params.stockWarning)?'checked': ''" @click="queryAll">
+          全部库存
+        </van-col>
         <van-col span="8" class="menu-dropdown">
           <van-dropdown-menu>
             <van-dropdown-item :title="categoryTitle" v-model="params.goodsCategoryId" :options="categoryOptions"
@@ -35,7 +37,7 @@
         </van-col>
         <van-col span="8" :class="params.stockWarning?'checked': ''" @click="changeStock">库存预警</van-col>
       </van-row>
-<!--      表头-->
+      <!--      表头-->
       <div class="title">
         <div>物品名称</div>
         <div>型号</div>
@@ -240,6 +242,9 @@ export default {
   .tr div, .title div {
     width: 25%;
     text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
 </style>

src/views/Admin/receiveDetail.vue

 <template>
   <div class="page">
-    <navbar title="详情" ></navbar>
+    <navbar title="详情"></navbar>
     <div class="container">
       <div class="info">
         <p>申领人： <span>{{detail.memberName}}</span></p>
         <p>所属部门：<span>{{detail.departmentName}}</span></p>
         <p>员工编号：<span>{{detail.jobNo || '--'}}</span></p>
       </div>
-      <table>
-        <tr>
-          <th>物品名称</th>
-          <th>型号</th>
-          <th>物品类别</th>
-          <th>数量</th>
-        </tr>
-        <tr v-for="(vor,v_index) in detail.vorList" :key="v_index">
-          <td>{{vor.goodsName}}</td>
-          <td>{{vor.goodsNo}}</td>
-          <td>{{vor.categoryName}}</td>
-          <td>
+      <div style="width: 100%;">
+        <div class="title">
+          <div>物品名称</div>
+          <div>型号</div>
+          <div>物品类别</div>
+          <div>数量</div>
+        </div>
+        <div v-for="(vor,v_index) in detail.vorList" :key="v_index" class="tr">
+          <div>{{vor.goodsName}}</div>
+          <div>{{vor.goodsNo}}</div>
+          <div>{{vor.categoryName}}</div>
+          <div>
             {{vor.outboundNum}}
-          </td>
-        </tr>
-      </table>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { getOutBountDetail } from '@/api/code'
+
 export default {
   name: 'receiveDetail',
-  components: {
-  },
+  components: {},
   data () {
     return {
       detail: {}
@@ -71,30 +71,37 @@ export default {
   .info span {
     color: #020202;
   }
-
-  table {
+  .title {
     width: 100%;
-    background: #ffffff;
-    margin-top: 10px;
-    border-collapse: collapse;
-  }
-
-  table tr:first-child {
     background: #f6f7f9;
     height: 34px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    font-size: 13px;
+    color: #666666;
   }
 
-  table tr {
+  .tr {
+    width: 100%;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     height: 42px;
+    background: #ffffff;
   }
 
-  table th {
-    color: #666666;
-    font-size: 14px;
+  .tr + .tr {
+    border-top: 1px solid #E8E8E8;
   }
 
-  table td {
-    font-size: 14px;
+  .tr div, .title div {
+    width: 25%;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-
 </style>

src/views/Admin/scan.vue

@@ -7,27 +7,27 @@
         <p>所属部门：<span>{{userInfo.departName}}</span></p>
         <p>员工编号：<span>{{userInfo.jobNo}}</span></p>
       </div>
-      <table v-if="list && list.length">
-        <tr>
-          <th>物品名称</th>
-          <th>型号</th>
-          <th>物品类别</th>
-          <th>数量</th>
-        </tr>
-        <tr v-for="(item, index) in list" :key="index">
-          <td>{{item.name}}</td>
-          <td>{{item.goodsNo}}</td>
-          <td>{{item.goodsCategoryName}}</td>
-          <td style="width: 30%;">
-            <stepper
+      <div v-if="list && list.length" style="width: 100%;">
+        <div class="title">
+          <div>物品名称</div>
+          <div>型号</div>
+          <div>物品类别</div>
+          <div>数量</div>
+        </div>
+        <div v-for="(item, index) in list" :key="index" class="tr">
+          <div >{{item.name}}</div>
+          <div>{{item.goodsNo}}</div>
+          <div>{{item.goodsCategoryName}}</div>
+          <div>
+            <stepper style="width: 100%;"
               :id=item.id
               :maxNum="item.maxNum"
               :inputNum="item.goodsNum"
               @changeNum="changeNum"
             ></stepper>
-          </td>
-        </tr>
-      </table>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="bottom-fixed">
       <van-button type="primary" @click="scanQrCode">扫描员工二维码</van-button>
@@ -123,12 +123,12 @@ export default {
 
         }
       })
-      // getGoodsInfo({ barCode: '11111111111111111111' }).then(res => {
-      //   if(!res.data){
+      // getGoodsInfo({ barCode: 'WMYfwBwH_5ouDO' }).then(res => {
+      //   if (!res.data) {
       //     this.$toast('该物品暂未入库')
       //     return
       //   }
-      //   console.log('data',res)
+      //   console.log('data', res)
       //   let data = res.data
       //   let params = {
       //     id: data.id,
@@ -205,29 +205,38 @@ export default {
     color: #020202;
   }
 
-  table {
+  .title {
     width: 100%;
-    background: #ffffff;
-    margin-top: 10px;
-    border-collapse: collapse;
-  }
-
-  table tr:first-child {
     background: #f6f7f9;
     height: 34px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    font-size: 13px;
+    color: #666666;
   }
 
-  table tr {
+  .tr {
+    width: 100%;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     height: 42px;
+    background: #ffffff;
   }
 
-  table th {
-    color: #666666;
-    font-size: 14px;
+  .tr + .tr {
+    border-top: 1px solid #E8E8E8;
   }
 
-  table td {
-    font-size: 14px;
+  .tr div, .title div {
+    width: 25%;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   .bottom-fixed {

src/views/Employee/receiveRecords.vue

@@ -15,7 +15,7 @@
               <span>{{item.createtime | formatTime}}</span>
             </p>
             <div class="info" v-for="(vor,v_index) in item.vorList" :key="v_index">
-              <p>{{vor.goodsName}}</p>
+              <p  style="text-align:left;width: 240px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{vor.goodsName}}</p>
               <p>
                 <span class="num">数量：</span>
                 <span>{{vor.outboundNum}}</span>