11

src/views/order/goods.vue

@@ -13,7 +13,10 @@
           </el-row>
         </el-col>
         <el-col :span="24" class="info">
-          <el-row :gutter="20">
+          <el-row :gutter="20" v-if="list.length === 0">
+            <el-col :span="12" :offset="6"><div class="empty">暂无数据，请先填写订单</div></el-col>
+          </el-row>
+          <el-row :gutter="20" v-else>
             <el-col :span="12" class="card" v-for="(item, index) in list" :key="index">
               <el-card class="box-card">
                 <div slot="header" class="clearfix">
@@ -404,6 +407,17 @@ export default {
       const res = this.routeList.find(i => i.id === value);
       if (res) return res.name;
     },
+    // open() {
+    //   this.$alert('这是一段内容', '标题名称', {
+    //     confirmButtonText: '确定',
+    //     callback: action => {
+    //       this.$message({
+    //         type: 'info',
+    //         message: '111',
+    //       });
+    //     },
+    //   });
+    // },
   },
   computed: {
     ...mapState(['user']),
@@ -420,6 +434,16 @@ export default {
     background: #f5f7fa;
   }
 }
+.empty {
+  margin: 20px 0px;
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  font-size: 30px;
+  font-weight: bold;
+  border: 5px solid #fff;
+  box-shadow: 1px 1px 3px 4px #ccc;
+}
 /deep/.card {
   margin-bottom: 10px;
 }

src/views/order/transport/index.vue

@@ -16,50 +16,44 @@
                 <el-button v-if="selected.length <= 0" type="primary" :disabled="true">未选择</el-button>
                 <el-button v-else type="primary" @click="toExport">发车</el-button>
               </el-col>
-              <el-col :span="12" class="card" v-for="(item, index) in list" :key="index">
-                <el-card class="box-card">
-                  <div slot="header" class="clearfix">
-                    <el-row :gutter="10">
-                      <el-col class="card-header1" :span="24">订单号：{{ item.order_no }}</el-col>
-                      <el-col class="card-header1" :span="24">客户：{{ getclient(item.client) }}</el-col>
-                      <el-col class="card-header1" :span="24">线路：{{ getroute(item.route) }}</el-col>
+              <el-row :gutter="20" v-if="list.length === 0">
+                <el-col :span="12" :offset="6"><div class="empty">暂无数据，请先填写订单</div></el-col>
+              </el-row>
+              <el-row v-else>
+                <el-col :span="12" class="card" v-for="(item, index) in list" :key="index">
+                  <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                      <el-row :gutter="10">
+                        <el-col class="card-header1" :span="24">订单号：{{ item.order_no }}</el-col>
+                        <el-col class="card-header1" :span="24">客户：{{ getclient(item.client) }}</el-col>
+                        <el-col class="card-header1" :span="24">线路：{{ getroute(item.route) }}</el-col>
+                      </el-row>
+                    </div>
+                    <el-row>
+                      <el-col :span="24">
+                        <el-table
+                          :data="item.split"
+                          border
+                          height="200px"
+                          @selection-change="
+                            val => {
+                              handleSelectionChange(val, index);
+                            }
+                          "
+                          @select="onTableSelect"
+                        >
+                          <el-table-column type="selection" width="55"> </el-table-column>
+                          <el-table-column prop="name" label="货物" sortable></el-table-column>
+                          <el-table-column prop="number" label="数量" sortable></el-table-column>
+                          <el-table-column prop="weight" label="重量" sortable></el-table-column>
+                          <el-table-column prop="volume" label="体积" sortable></el-table-column>
+                          <el-table-column prop="remark" label="备注" sortable></el-table-column>
+                        </el-table>
+                      </el-col>
                     </el-row>
-                  </div>
-                  <!-- <data-table
-                    height="200px"
-                    :fields="fields"
-                    :data="item.split"
-                    :usePage="false"
-                    :opera="opera"
-                    @handleSelect="toSelect"
-                    :select="true"
-                    rowkey="_id"
-                  >
-                  </data-table> -->
-                  <el-row>
-                    <el-col :span="24">
-                      <el-table
-                        :data="item.split"
-                        border
-                        height="200px"
-                        @selection-change="
-                          val => {
-                            handleSelectionChange(val, index);
-                          }
-                        "
-                        @select="onTableSelect"
-                      >
-                        <el-table-column type="selection" width="55"> </el-table-column>
-                        <el-table-column prop="name" label="货物" sortable></el-table-column>
-                        <el-table-column prop="number" label="数量" sortable></el-table-column>
-                        <el-table-column prop="weight" label="重量" sortable></el-table-column>
-                        <el-table-column prop="volume" label="体积" sortable></el-table-column>
-                        <el-table-column prop="remark" label="备注" sortable></el-table-column>
-                      </el-table>
-                    </el-col>
-                  </el-row>
-                </el-card>
-              </el-col>
+                  </el-card>
+                </el-col>
+              </el-row>
               <el-col :span="24" class="page">
                 <page @query="search" :limit="limit" :total="total"></page>
               </el-col>
@@ -634,6 +628,16 @@ export default {
     }
   }
 }
+.empty {
+  margin: 20px 0px;
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  font-size: 30px;
+  font-weight: bold;
+  border: 5px solid #fff;
+  box-shadow: 1px 1px 3px 4px #ccc;
+}
 /deep/.rateMoney {
   border: 1px solid #ebeef5;
   padding: 6px 0px;