Quellcode durchsuchen

控制关系 table 高度

YaolongHan vor 4 Jahren
Ursprung
Commit
b10c8fcced

+ 54 - 39
src/views/maintain/relationship/relation/components/table.vue

@@ -1,53 +1,68 @@
 <template>
-    <el-table
-        :data="tableData"
-        :span-method="objectSpanMethod"
-        :header-cell-style="{ background: '#e1e4e5',color: '#2b2b2b', lineHeight: '30px' }"
-        class="table"
-        style="width: 100%;"
-        height="60%"
+  <el-table
+    :data="tableData"
+    :span-method="objectSpanMethod"
+    :header-cell-style="{
+      background: '#e1e4e5',
+      color: '#2b2b2b',
+      lineHeight: '30px',
+    }"
+    class="table"
+    style="width: 100%"
+    :height="height ? height : '100%'"
+  >
+    <el-table-column
+      v-for="(item, index) in tableHeader"
+      :key="index"
+      :prop="item[1]"
+      :label="item[0]"
+      align="left"
     >
-        <el-table-column
-            v-for="(item,index) in tableHeader"
-            :key="index"
-            :prop="item[1]"
-            :label="item[0]"
-            align="left"
-        >
-        </el-table-column>
-        <el-table-column
-            label="操作"
-            align="left"
-        >
-            <template slot-scope="scope">
-                <el-button slot="reference" size="mini" icon="el-icon-delete"
-                           @click="deleteObject(scope.$index, scope.row)"/>
-            </template>
-        </el-table-column>
-    </el-table>
+    </el-table-column>
+    <el-table-column label="操作" align="left">
+      <template slot-scope="scope">
+        <el-button
+          slot="reference"
+          size="mini"
+          icon="el-icon-delete"
+          @click="deleteObject(scope.$index, scope.row)"
+        />
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 
 <script lang="ts">
+import { relDel } from "@/api/datacenter";
 import { Component, Prop, Vue } from "vue-property-decorator";
-
 @Component({
-    name: 'relation-table'
+  name: "relation-table",
 })
 export default class extends Vue {
+  @Prop({ default: Array }) tableHeader?: [];
+  @Prop({ default: Array }) tableData?: [];
+  @Prop({ default: String || Number }) height?: "";
 
-    @Prop({default:Array}) tableHeader?:[]
-    @Prop({default:Array}) tableData?:[]
-
-    objectSpanMethod() {
-
-    }
-
-    deleteObject() {
-
-    }
+  objectSpanMethod() {}
+  //  删除
+  deleteObject(index: number, val: any) {
+    const data = {
+      relType: this.$route.query.relationType,
+      graphicType: this.$route.query.graphicType,
+      fromId: val.id, //主对象id
+      toId: val.objectInfo.id, //主对象id
+    };
+    relDel(data).then((res) => {
+      if (res.result == "success") {
+        this.$message.success("删除成功!");
+        this.$emit("updata");
+      } else {
+        this.$message.error("删除失败!");
+      }
+    });
+  }
 }
 </script>
 
-<style scoped>
-
+<style  scoped>
 </style>

+ 17 - 2
src/views/maintain/relationship/relation/index.vue

@@ -48,7 +48,13 @@
         <AdmSearch @SearchValue="minorSearch" />
       </el-col>
     </el-row>
-    <relationTable :tableHeader="tableHeader" :tableData="tableData" />
+    <relationTable
+      v-if="tableHeight"
+      @updata="relManualQuery"
+      :tableHeader="tableHeader"
+      :tableData="tableData"
+      :height="tableHeight"
+    />
     <!-- 分页 -->
     <div class="pagination">
       <el-pagination
@@ -64,6 +70,7 @@
     </div>
     <addRelationDialog
       @closeAddRelation="addRelationValue = false"
+      @update="relManualQuery"
       :addRelationValue="addRelationValue"
       :values="values"
     />
@@ -80,7 +87,7 @@ import tableHeader from "@/views/maintain/relationship/components/tableHeader";
 import addRelationDialog from "./components/addRelationDialog.vue";
 import editRelationDialog from "./components/editRelationDialog.vue";
 import excelDialog from "./components/excelDialog.vue";
-import { relToType, relManualQuery } from "@/api/datacenter";
+import { relToType, relManualQuery, relDel } from "@/api/datacenter";
 
 @Component({
   name: "relation",
@@ -137,6 +144,7 @@ export default class extends Vue {
     currentPage: 1, //当前页
     pageSize: 15, //当前页数量
   };
+  tableHeight: number = 0; //table高
   /////////////////////////////////////////
   // 方法
 
@@ -281,6 +289,13 @@ export default class extends Vue {
     // 获取table列表
     this.relManualQuery();
   }
+  mounted() {
+    let allHeight =
+      document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
+    let contentHeight = document.getElementsByClassName("content")[0]
+      .offsetHeight;
+    this.tableHeight = allHeight - contentHeight - 47;
+  }
 }
 </script>