fea(详细信息弹窗): 增加数据判空

src/views/Monitor/components/Tooltip.vue

 <template>
     <div
         class="tooltip"
-        ref="tooltip"
-    >
-        <p><span>销售订单号: </span><span>{{ query.saleOrderNo }}</span></p>
-        <p><span>主计划工单号: </span><span>{{ query.planOrderNo }}</span></p>
-        <p><span>车间计划工单号: </span><span>{{ query.code }}</span></p>
-        <p><span>车型: </span><span>{{ query.busType }}</span></p>
-        <p><span>订单数量: </span><span>{{ query.orderSize }}</span></p>
-        <p><span>单位: </span><span>{{ query.unit }}</span></p>
-        <p><span>车间: </span><span>{{ query.shop }}</span></p>
-        <p><span>产线: </span><span>{{ query.line }}</span></p>
+        ref="tooltip">
+        <p>
+            <span>销售订单号: </span>
+            <span>{{ carStationInfo.hasOwnProperty('saleOrderNo') && carStationInfo.saleOrderNo !== null ? carStationInfo.saleOrderNo : '暂无' }}</span>
+        </p>
+        <p>
+            <span>主计划工单号: </span>
+            <span>{{ carStationInfo.hasOwnProperty('planOrderNo') && carStationInfo.planOrderNo !== null ? carStationInfo.planOrderNo : '暂无' }}</span>
+        </p>
+        <p>
+            <span>车间计划工单号: </span>
+            <span>{{ carStationInfo.hasOwnProperty('code') && carStationInfo.code !== null ? carStationInfo.code : '暂无' }}</span>
+        </p>
+        <p>
+            <span>车型: </span>
+            <span>{{ carStationInfo.hasOwnProperty('busType') && carStationInfo.busType !== null ? carStationInfo.busType : '暂无' }}</span>
+        </p>
+        <p>
+            <span>订单数量: </span>
+            <span>{{ carStationInfo.hasOwnProperty('orderSize') && carStationInfo.orderSize !== null ? carStationInfo.orderSize : '暂无' }}</span>
+        </p>
+        <p>
+            <span>单位: </span>
+            <span>{{ carStationInfo.hasOwnProperty('unit') && carStationInfo.unit !== null ? carStationInfo.unit : '暂无' }}</span>
+        </p>
+        <p>
+            <span>车间: </span>
+            <span>{{ carStationInfo.hasOwnProperty('shop') && carStationInfo.shop !== null ? carStationInfo.shop : '暂无' }}</span>
+        </p>
+        <p>
+            <span>产线: </span>
+            <span>{{ carStationInfo.hasOwnProperty('line') &&  carStationInfo.line !== null ? arStationInfo.line : '暂无' }}</span>
+        </p>
         <!-- <p><span>计划完工时间: </span><span>{{ query.saleOrderNo }}</span></p> -->
         <div
             class="close-btn"
-            @click="closeTooltip"
-        >
+            @click="closeTooltip">
             <i class="el-icon-circle-close"></i>
         </div>
     </div>
@@ -34,16 +56,17 @@ export default {
     },
     data () {
         return {
-            data: {}
+            carStationInfo: {}
         }
     },
-
     watch: {
-        query (v) {
-            this.data = _.cloneDeep(v)
+        query: {
+            handler (newVal, oldVal) {
+                this.carStationInfo = _.cloneDeep(newVal)
+            },
+            deep: true
         }
     },
-
     methods: {
         closeTooltip () {
             this.$refs.tooltip.style.visibility = 'hidden'