Переглянути джерело

网点 - 绑定箱体设备 - 获取数据加了 加载中状态

chenrui 4 роки тому
батько
коміт
cbf00e00d6
1 змінених файлів з 67 додано та 57 видалено
  1. 67 57
      src/views/equipmentManage/network/equipmentModal.vue

+ 67 - 57
src/views/equipmentManage/network/equipmentModal.vue

@@ -39,61 +39,63 @@
     </div>
     <!-- 已绑设备 -->
     <div class="eq-tit">已绑设备:</div>
-    <a-table
-      class="table"
-      ref="table"
-      bordered
-      size="small"
-      :rowKey="(record) => record.id"
-      :columns="columns"
-      :data-source="equipmentData"
-      :pagination="false">
-      <!-- 设备状态 -->
-      <template slot="onlineFlag" slot-scope="text, record">
-        <span :class="record.onlineFlag==0 ? 'red' : record.onlineFlag==1 ? 'green' : ''">{{ record.onlineFlag == 0 ? '离线' : record.onlineFlag == 1 ? '在线' : '--' }}</span>
-      </template>
-      <!-- 投放情况 -->
-      <template slot="situation" slot-scope="text, record">
-        [{{ record.boxOnePercent ? record.boxOnePercent + '%' : '--' }}] --
-        [{{ record.boxTwoPercent ? record.boxTwoPercent + '%' : '--' }}] -
-        [{{ record.boxThreePercent ? record.boxThreePercent + '%' : '--' }}] -
-        [{{ record.boxFourPercent ? record.boxFourPercent + '%' : '--' }}] -
-        [{{ record.boxFivePercent ? record.boxFivePercent + '%' : '--' }}]
-      </template>
-      <!-- 箱体类型 -->
-      <template slot="type" slot-scope="record">
-        <a-select
-          id="equipment-type"
-          placeholder="请选择箱体类型"
-          style="width: 100%;"
-          v-model="record.deviceTypeNo"
-          :disabled="record.state == 1"
-          @change="typeChange($event, record)">
-          <a-select-option v-for="(item,index) in record.deviceTypeList" :key="index" :value="item.deviceTypeNo">
-            {{ item.name }}
-          </a-select-option>
-        </a-select>
-      </template>
-      <!-- 工作状态 -->
-      <template slot="workStatus" slot-scope="record">
-        <a-switch
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          id="equipment-changeFlagHandle"
-          v-model="record.state == 1 ? true : false"
-          @change="changeFlagHandle(record)"
-        />
-      </template>
-      <!-- 操作 -->
-      <template slot="action" slot-scope="record">
-        <a-button
-          type="primary"
-          ghost
-          size="small"
-          id="equipment-unBind"
-          @click="onUnbundling(record)">解绑</a-button>
-      </template>
-    </a-table>
+    <a-spin tip="Loading..." :spinning="isLoading">
+      <a-table
+        class="table"
+        ref="table"
+        bordered
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :data-source="equipmentData"
+        :pagination="false">
+        <!-- 设备状态 -->
+        <template slot="onlineFlag" slot-scope="text, record">
+          <span :class="record.onlineFlag==0 ? 'red' : record.onlineFlag==1 ? 'green' : ''">{{ record.onlineFlag == 0 ? '离线' : record.onlineFlag == 1 ? '在线' : '--' }}</span>
+        </template>
+        <!-- 投放情况 -->
+        <template slot="situation" slot-scope="text, record">
+          [{{ record.boxOnePercent ? record.boxOnePercent + '%' : '--' }}] --
+          [{{ record.boxTwoPercent ? record.boxTwoPercent + '%' : '--' }}] -
+          [{{ record.boxThreePercent ? record.boxThreePercent + '%' : '--' }}] -
+          [{{ record.boxFourPercent ? record.boxFourPercent + '%' : '--' }}] -
+          [{{ record.boxFivePercent ? record.boxFivePercent + '%' : '--' }}]
+        </template>
+        <!-- 箱体类型 -->
+        <template slot="type" slot-scope="record">
+          <a-select
+            id="equipment-type"
+            placeholder="请选择箱体类型"
+            style="width: 100%;"
+            v-model="record.deviceTypeNo"
+            :disabled="record.state == 1"
+            @change="typeChange($event, record)">
+            <a-select-option v-for="(item,index) in record.deviceTypeList" :key="index" :value="item.deviceTypeNo">
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </template>
+        <!-- 工作状态 -->
+        <template slot="workStatus" slot-scope="record">
+          <a-switch
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            id="equipment-changeFlagHandle"
+            v-model="record.state == 1 ? true : false"
+            @change="changeFlagHandle(record)"
+          />
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="record">
+          <a-button
+            type="primary"
+            ghost
+            size="small"
+            id="equipment-unBind"
+            @click="onUnbundling(record)">解绑</a-button>
+        </template>
+      </a-table>
+    </a-spin>
   </a-modal>
 </template>
 
@@ -135,7 +137,8 @@ export default {
         { title: '操作', scopedSlots: { customRender: 'action' }, width: 80, align: 'center' }
       ],
       equipmentData: [],
-      typeList: [] //  箱体类型
+      typeList: [], //  箱体类型
+      isLoading: true  //  加载状态
     }
   },
   methods: {
@@ -153,6 +156,7 @@ export default {
         } else {
           this.equipmentData = []
         }
+        this.isLoading = false
       })
     },
     //  箱体类型下拉数据
@@ -279,7 +283,13 @@ export default {
   }
 }
 </script>
-
+<style scoped>
+.spin-content {
+  border: 1px solid #91d5ff;
+  background-color: #e6f7ff;
+  padding: 30px;
+}
+</style>
 <style lang="less">
   .edit-network-modal{
     .search-con{