空数据展示

 <template>
   <div style="margin: 40px" v-loading="loading">
-    <el-form
-      ref="form"
-      :model="form"
-      label-width="200px"
-      size="small"
-      :disabled="disable"
-      :rules="rules"
-    >
-      <el-form-item label="航班号" prop="purposeOfFlightNo">
-        <el-input
-          v-model.trim="form.purposeOfFlightNo"
-          style="width: 30%"
-          :disabled="nameDisabled"
-        ></el-input>
-      </el-form-item>
+    <el-empty description="找不到这条数据！" v-if="isEmpty"></el-empty>
+    <template v-else>
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="200px"
+        size="small"
+        :disabled="disable"
+        :rules="rules"
+      >
+        <el-form-item label="航班号" prop="purposeOfFlightNo">
+          <el-input
+            v-model.trim="form.purposeOfFlightNo"
+            style="width: 30%"
+            :disabled="nameDisabled"
+          ></el-input>
+        </el-form-item>
 
-      <el-form-item >
-        <el-alert
-          title="提示：站点之间用回车符分隔"
-          type="warning"
-          show-icon
-          size="small"
-          :closable="false"
-          style="height: 30px;width:fit-content"
-        >
-        </el-alert>
-      </el-form-item>
-      <el-row :gutter="20">
-        <el-col :span="10">
-          <el-form-item label="站点包含">
-            <!-- <el-alert title="提示：站点之间用回车符分隔" type="info" show-icon size="small" :closable="false" style="height:30px; margin-buttom"> </el-alert> -->
-            <el-input
-              type="textarea"
-              v-model="form.location"
-              :rows="6"
-              resize="none"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="站点不包含">
-            <el-input
-              type="textarea"
-              v-model="form.notLocation"
-              :rows="6"
-              resize="none"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
+        <el-form-item>
+          <el-alert
+            title="提示：站点之间用回车符分隔"
+            type="warning"
+            show-icon
+            size="small"
+            :closable="false"
+            style="height: 30px; width: fit-content"
+          >
+          </el-alert>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <el-form-item label="站点包含">
+              <!-- <el-alert title="提示：站点之间用回车符分隔" type="info" show-icon size="small" :closable="false" style="height:30px; margin-buttom"> </el-alert> -->
+              <el-input
+                type="textarea"
+                v-model="form.location"
+                :rows="6"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="站点不包含">
+              <el-input
+                type="textarea"
+                v-model="form.notLocation"
+                :rows="6"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-      <el-form-item >
-        <el-alert
-          title="提示：URSA之间用分号分隔，例：F2;F3;P_"
-          type="warning"
-          show-icon
-          size="small"
-          :closable="false"
-          style="height: 30px;width:fit-content"
-        >
-        </el-alert>
-      </el-form-item>
-      <el-row :gutter="20">
-        <el-col :span="10">
-          <el-form-item label="URSA包含">
-            <el-input
-              type="textarea"
-              v-model.trim="form.includeUrsa"
-              :rows="6"
-              resize="none"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="URSA不包含">
-            <el-input
-              type="textarea"
-              v-model.trim="form.notIncludeUrsa"
-              :rows="6"
-              resize="none"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
+        <el-form-item>
+          <el-alert
+            title="提示：URSA之间用分号分隔，例：F2;F3;P_"
+            type="warning"
+            show-icon
+            size="small"
+            :closable="false"
+            style="height: 30px; width: fit-content"
+          >
+          </el-alert>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <el-form-item label="URSA包含">
+              <el-input
+                type="textarea"
+                v-model.trim="form.includeUrsa"
+                :rows="6"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="URSA不包含">
+              <el-input
+                type="textarea"
+                v-model.trim="form.notIncludeUrsa"
+                :rows="6"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-      <el-form-item label="件数">
-        <el-col :span="3">
-          <!-- <el-input v-model="form.minNumOfPieces"></el-input> -->
-          <el-input-number
-            v-model="
-              form.minNumOfPieces == 0
-                ? (form.minNumOfPieces = undefined)
-                : form.minNumOfPieces
-            "
-            :precision="0"
-            :controls="false"
-            style="width: 100%"
-          ></el-input-number>
-        </el-col>
-        <el-col style="text-align: center" :span="1">-</el-col>
-        <el-col :span="3">
-          <!-- <el-input v-model="form.maxNumOfPieces"></el-input> -->
-          <el-input-number
-            v-model="
-              form.maxNumOfPieces == 0
-                ? (form.maxNumOfPieces = undefined)
-                : form.maxNumOfPieces
-            "
-            :precision="0"
-            :controls="false"
-            style="width: 100%"
-            :min="form.minNumOfPieces + 1"
-          ></el-input-number>
-        </el-col>
-      </el-form-item>
+        <el-form-item label="件数">
+          <el-col :span="3">
+            <!-- <el-input v-model="form.minNumOfPieces"></el-input> -->
+            <el-input-number
+              v-model="
+                form.minNumOfPieces == 0
+                  ? (form.minNumOfPieces = undefined)
+                  : form.minNumOfPieces
+              "
+              :precision="0"
+              :controls="false"
+              style="width: 100%"
+            ></el-input-number>
+          </el-col>
+          <el-col style="text-align: center" :span="1">-</el-col>
+          <el-col :span="3">
+            <!-- <el-input v-model="form.maxNumOfPieces"></el-input> -->
+            <el-input-number
+              v-model="
+                form.maxNumOfPieces == 0
+                  ? (form.maxNumOfPieces = undefined)
+                  : form.maxNumOfPieces
+              "
+              :precision="0"
+              :controls="false"
+              style="width: 100%"
+              :min="form.minNumOfPieces + 1"
+            ></el-input-number>
+          </el-col>
+        </el-form-item>
 
-      <el-form-item label="重量">
-        <el-col :span="3">
-          <!-- <el-input v-model="form.minWeight"></el-input> -->
-          <el-input-number
-            v-model="
-              form.minWeight == 0
-                ? (form.minWeight = undefined)
-                : form.minWeight
-            "
-            :precision="2"
-            :controls="false"
-            style="width: 100%"
-          ></el-input-number>
-        </el-col>
-        <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
-        <el-col style="text-align: center" :span="1">-</el-col>
-        <el-col :span="3">
-          <!-- <el-input v-model="form.maxWeight"></el-input> -->
-          <el-input-number
-            v-model="
-              form.maxWeight == 0
-                ? (form.maxWeight = undefined)
-                : form.maxWeight
-            "
-            :precision="2"
-            :controls="false"
-            style="width: 100%"
-            :min="form.minWeight + 0.01"
-          ></el-input-number>
-        </el-col>
-        <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
-      </el-form-item>
+        <el-form-item label="重量">
+          <el-col :span="3">
+            <!-- <el-input v-model="form.minWeight"></el-input> -->
+            <el-input-number
+              v-model="
+                form.minWeight == 0
+                  ? (form.minWeight = undefined)
+                  : form.minWeight
+              "
+              :precision="2"
+              :controls="false"
+              style="width: 100%"
+            ></el-input-number>
+          </el-col>
+          <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
+          <el-col style="text-align: center" :span="1">-</el-col>
+          <el-col :span="3">
+            <!-- <el-input v-model="form.maxWeight"></el-input> -->
+            <el-input-number
+              v-model="
+                form.maxWeight == 0
+                  ? (form.maxWeight = undefined)
+                  : form.maxWeight
+              "
+              :precision="2"
+              :controls="false"
+              style="width: 100%"
+              :min="form.minWeight + 0.01"
+            ></el-input-number>
+          </el-col>
+          <el-col :span="1" style="text-align: center"><span>Kg</span></el-col>
+        </el-form-item>
 
-      <el-form-item label="申报类别">
-        <el-card shadow="never" style="width: 70%">
-          <el-checkbox-group v-model="form.typeOfGoods">
-            <el-checkbox
-              v-for="item in cargoType"
-              :key="item.id"
-              :label="item.chineseName"
-              :name="item.chineseName"
-            ></el-checkbox>
-          </el-checkbox-group>
-        </el-card>
-      </el-form-item>
+        <el-form-item label="申报类别">
+          <el-card shadow="never" style="width: 70%">
+            <el-checkbox-group v-model="form.typeOfGoods">
+              <el-checkbox
+                v-for="item in cargoType"
+                :key="item.id"
+                :label="item.chineseName"
+                :name="item.chineseName"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-form-item>
 
-      <el-form-item label="货物类型">
-        <el-card shadow="never" style="width: 70%">
-          <el-checkbox-group v-model="form.declarationCategory">
-            <el-checkbox
-              v-for="item in cargoStatus"
-              :key="item.id"
-              :label="item.chineseName"
-              :name="item.chineseName"
-            ></el-checkbox>
-          </el-checkbox-group>
-        </el-card>
-      </el-form-item>
+        <el-form-item label="货物类型">
+          <el-card shadow="never" style="width: 70%">
+            <el-checkbox-group v-model="form.declarationCategory">
+              <el-checkbox
+                v-for="item in cargoStatus"
+                :key="item.id"
+                :label="item.chineseName"
+                :name="item.chineseName"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-form-item>
 
-      <el-form-item label="Service Code">
-        <el-card shadow="never" style="width: 70%">
-          <el-checkbox-group v-model="form.serviceCode">
-            <el-checkbox
-              v-for="item in serviceCode"
-              :key="item.id"
-              :label="item.englishName"
-              :name="item.englishName"
-            ></el-checkbox>
-          </el-checkbox-group>
-        </el-card>
-      </el-form-item>
+        <el-form-item label="Service Code">
+          <el-card shadow="never" style="width: 70%">
+            <el-checkbox-group v-model="form.serviceCode">
+              <el-checkbox
+                v-for="item in serviceCode"
+                :key="item.id"
+                :label="item.englishName"
+                :name="item.englishName"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-form-item>
 
-      <el-form-item label="Sub Category">
-        <el-card shadow="never" style="width: 70%">
-          <el-checkbox-group v-model="form.subCategory">
-            <el-checkbox
-              v-for="item in subCategory"
-              :key="item.id"
-              :label="item.englishName"
-              :name="item.englishName"
-            ></el-checkbox>
-          </el-checkbox-group>
-        </el-card>
-      </el-form-item>
-    </el-form>
-    <el-row style="margin-left: 200px">
-      <el-button
-        type="primary"
-        size="small"
-        v-if="$route.params.handle != 'detail'"
-        @click="submit('form')"
-        :loading="btnLoading"
-      >
-        <span v-if="$route.params.handle === 'add'">添加</span>
-        <span v-else>保存</span>
-      </el-button>
-      <el-button size="small" @click="close">取消</el-button>
-    </el-row>
+        <el-form-item label="Sub Category">
+          <el-card shadow="never" style="width: 70%">
+            <el-checkbox-group v-model="form.subCategory">
+              <el-checkbox
+                v-for="item in subCategory"
+                :key="item.id"
+                :label="item.englishName"
+                :name="item.englishName"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </el-card>
+        </el-form-item>
+      </el-form>
+      <el-row style="margin-left: 200px">
+        <el-button
+          type="primary"
+          size="small"
+          v-if="$route.params.handle != 'detail'"
+          @click="submit('form')"
+          :loading="btnLoading"
+        >
+          <span v-if="$route.params.handle === 'add'">添加</span>
+          <span v-else>保存</span>
+        </el-button>
+        <el-button size="small" @click="close">取消</el-button>
+      </el-row>
+    </template>
   </div>
 </template>
 
@@ -248,9 +251,10 @@ export default {
       serviceCode: [],
       subCategory: [],
       disable: false,
-      nameDisabled:false,
+      nameDisabled: false,
       btnLoading: false,
       loading: true,
+      isEmpty: false,
     };
   },
   methods: {
@@ -345,6 +349,9 @@ export default {
               message: response.msg,
               type: "error",
             });
+            this.isEmpty = true;
+          } else if (response.data == null) {
+            this.isEmpty = true;
           } else {
             let info = response.data;
             info.typeOfGoods = info.typeOfGoods
@@ -372,6 +379,7 @@ export default {
               message: response.msg,
               type: "error",
             });
+            this.isEmpty = true;
           } else {
             let info = response.data.list;
             info.typeOfGoods = info.typeOfGoods