管道基础大数据平台系统开发-【前端】-新系統界面
王旭
2023-02-16 c40e3de17653a10a06ead765813783a5614a32ce
src/views/userManage/templateManage.vue
@@ -5,20 +5,24 @@
        `${$t('dataManage.templateManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="searchComp subpage_Div">
    <div class="searchComp subpage_Div"  ref="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :inline="true"
      >
        <el-form-item>
         <div class="flex_box">
          <div style="margin-right: auto">
 <el-form-item label="名称">
          <el-input
          style="width:200px"
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item style="float:right">
            </el-form-item>
          </div>
           <div>
               <el-form-item>
          <el-button
            icon="el-icon-refresh"
            @click="restRefreshTable"
@@ -26,7 +30,7 @@
            size="small"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            icon="el-icon-search"
            @click="setRefreshTable"
@@ -34,7 +38,7 @@
            size="small"
          >{{ $t('common.iquery') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            v-if="btnStatus.delete"
            icon="el-icon-delete"
@@ -43,7 +47,7 @@
            size="small"
          >{{ $t('common.delete') }}</el-button>
        </el-form-item>
        <el-form-item style="float:right">
        <el-form-item>
          <el-button
            v-if="btnStatus.insert"
            @click="setTableInsert"
@@ -52,13 +56,19 @@
            size="small"
          >{{ $t('common.append') }}</el-button>
        </el-form-item>
           </div>
         </div>
      </el-form>
    </div>
    <div>
    <div class="table_box" :style="styleVar">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="calc(100% - 57px)"
      >
        <el-table-column
          type="selection"
@@ -141,7 +151,7 @@
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px">
      <div style="margin-top:25px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -426,6 +436,11 @@
        insert: false,
        update: false,
      },
       tableHeight: 0,
      timer: 0,
      styleVar: {
        "height": "calc(100% - 109px)",
      },
    }
  },
  created() {
@@ -433,7 +448,28 @@
    this.showTableData();
  },
   beforeDestroy() {
    this.timer && clearTimeout(this.timer);
    window.removeEventListener("resize", this.onResize);
  },
    mounted() {
    window.addEventListener("resize", this.onResize);
    this.calHeight()
  },
  methods: {
     onResize() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.calHeight();
      }, 500);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
      });
    },
    //修改取消
    closeEditData() {
      this.closeInsertData();
@@ -726,10 +762,13 @@
  }
  .searchComp {
    margin: 10px auto;
     padding: 8px;
    margin-top: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }