add del dialog

src/components/point/dynamicdata/delRelationDialog.vue

@@ -7,45 +7,35 @@
     id="delRelation"
   >
     <span>确定要清除对应关系？</span>
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="人工填写过表号功能号" name="first"></el-tab-pane>
-      <el-tab-pane label="多个标识对应同一个信息点" name="second"></el-tab-pane>
-    </el-tabs>
-    <el-table :data="tableData" style="width: 100%;max-height:400px;" height="calc(100% - 160px)">
-      <el-table-column type="expand" class-name="bgf5">
-        <template slot-scope="props">
-          <el-row>
-            <el-col :span="8">
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-            </el-col>
-            <el-col :span="8">
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-            </el-col>
-            <el-col :span="8">
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-              <p>{{props.row.desc}}</p>
-            </el-col>
-          </el-row>
-        </template>
-      </el-table-column>
-      <el-table-column label="设备实例本地名（本地编码）" prop="name" class-name="bgf5" align="center"></el-table-column>
-      <el-table-column label="信息点" prop="name" align="center"></el-table-column>
-      <el-table-column label="原值" prop="desc" align="center">
-        <template slot-scope="scope">
-          <el-radio v-model="scope.row.checked" label="old">备选项</el-radio>
-        </template>
-      </el-table-column>
-      <el-table-column label="新值" prop="desc" align="center">
-        <template slot-scope="scope">
-          <el-radio v-model="scope.row.checked" label="new">备选项</el-radio>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div v-loading="loading">
+      <el-row>
+        <el-col :span="18">
+          <el-table
+            :data="tableData"
+            style="width: 100%;max-height:400px;"
+            height="calc(100% - 160px)"
+          >
+            <el-table-column label="设备标识" align="right">
+              <el-table-column label="数据源" prop="name" class-name="bgf5" align="right"></el-table-column>
+              <el-table-column label="位置标签" prop="name" align="right"></el-table-column>
+              <el-table-column label="设备标识" prop="name" align="right"></el-table-column>
+              <el-table-column type="selection"></el-table-column>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="6">
+          <el-table
+            :data="tableData"
+            style="width: 100%;max-height:400px;"
+            height="calc(100% - 160px)"
+          >
+            <el-table-column label="设备实例">
+              <el-table-column label="设备实例" prop="name" class-name="bgf5"></el-table-column>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
     <span slot="footer" class="dialog-footer">
       <el-button size="small">取消</el-button>
       <el-button size="small" type="primary">使用选择的表号功能号</el-button>
@@ -122,12 +112,13 @@ export default {
           shopId: "10333"
         }
       ],
-      activeName: "first" //当前所在tab页
+      activeName: "first", //当前所在tab页
+      loading: false
     };
   },
   methods: {
     showDialog() {
-    //   this.tableData = data;
+      //   this.tableData = data;
       this.dialogVisible = true;
     },
     handleClick() {},

src/views/point/dynamicdata/addRelation/index.vue

@@ -67,7 +67,7 @@
         </div>
         <!-- 左侧列表 -->
         <div class="table-box">
-          <div class="l-custom-table custom-table">
+          <div class="l-custom-table custom-table" v-loading="lTableLoading">
             <div>
               <table>
                 <thead>
@@ -81,7 +81,7 @@
               </table>
             </div>
             <div ref="lTableBody" class="custom-table-body">
-              <table class="t-body">
+              <table>
                 <tbody is="transition-group" name="el-zoom-in-top">
                   <tr v-for="t in LtableData" :key="t.id">
                     <td style="width:20%;">
@@ -150,7 +150,7 @@
         </div>
         <!-- 右侧列表 -->
         <div class="table-box">
-          <div class="r-custom-table custom-table">
+          <div class="r-custom-table custom-table" v-loading="rTableLoading">
             <div>
               <table>
                 <thead>
@@ -419,7 +419,9 @@ export default {
       showPlus: false, //+1记录动画
       num: 0, //记录条数
       timer: null, //函数节流 延时器
-      historyList: [] //操作历史
+      historyList: [], //操作历史
+      lTableLoading: false,
+      rTableLoading: false
     };
   },
   created() {},
@@ -432,13 +434,17 @@ export default {
       let offsetHeight = lTableBody.offsetHeight;
       if (scrollTop + offsetHeight >= scrollHeight) {
         console.log("request");
-        this.LtableData.push({
-          date: "2016-05-02",
-          name: "王小虎",
-          id: new Date().getTime(),
-          checked: false,
-          address: "上海市普陀区金沙江路 1518 弄"
-        });
+        this.lTableLoading = true;
+        setTimeout(() => {
+          this.lTableLoading = false;
+          this.LtableData.push({
+            date: "2016-05-02",
+            name: "王小虎",
+            id: new Date().getTime(),
+            checked: false,
+            address: "上海市普陀区金沙江路 1518 弄"
+          });
+        }, 1000);
       }
     });
     let rTableBody = this.$refs.rTableBody;
@@ -448,13 +454,17 @@ export default {
       let offsetHeight = rTableBody.offsetHeight;
       if (scrollTop + offsetHeight >= scrollHeight) {
         console.log("request");
-        this.RtableData.push({
-          date: "2016-05-02",
-          name: "王小虎",
-          id: new Date().getTime(),
-          checked: false,
-          address: "上海市普陀区金沙江路 1518 弄"
-        });
+        this.rTableLoading = true;
+        setTimeout(() => {
+          this.rTableLoading = false;
+          this.RtableData.push({
+            date: "2016-05-02",
+            name: "王小虎",
+            id: new Date().getTime(),
+            checked: false,
+            address: "上海市普陀区金沙江路 1518 弄"
+          });
+        }, 1000);
       }
     });
   },