lsappBms/lss_frontend/src/views/assets/assetRecord.vue

<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="24">
        <el-button type="primary" @click="backToDetail">返回</el-button>
        <span style="margin: 0 20px 0 50px">搜索</span>
        <el-input
          placeholder="输入资产编号搜索"
          v-model="keyword"
          clearable
          @keyup.enter.native="changeKeyword"
          style="width:200px"
        ></el-input>
        <!-- @blur="changeKeyword" -->
        <el-button style="float:right" @click="exportRecord">导出</el-button>
      </el-col>
    </el-row>

    <!-- 标签页 -->
    <el-tabs v-model="tabsName">
      <el-tab-pane label="处置记录" name="0">
        <!-- 处置记录列表 -->
        <el-table :data="operationData" v-loading="loading" width="100%">
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column prop="modelNo" label="资产编号" width="160"></el-table-column>
          <el-table-column prop="userName" label="处置人" width="80"></el-table-column>
          <el-table-column prop="indate" label="处置时间" width="100"></el-table-column>
          <el-table-column prop="content" label="处置详情"></el-table-column>
        </el-table>
        <!-- 页码区域 -->
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="pageIndex1"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
          background
          style="float:right"
        ></el-pagination>
      </el-tab-pane>

      <!-- 维护记录 -->
      <el-tab-pane label="维护记录" name="1">
        <!-- 维护记录列表 -->
        <el-table :data="maintainData" v-loading="loading" width="100%">
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column prop="modelNo" label="资产编号"></el-table-column>
          <el-table-column prop="operator" label="维护人" width="80"></el-table-column>
          <el-table-column prop="operator" label="维护人联系方式" width="120"></el-table-column>
          <el-table-column prop="operator" label="维护厂家" width="100"></el-table-column>
          <el-table-column prop="operator" label="维护厂家联系方式" width="140"></el-table-column>
          <el-table-column prop="indate" label="处置时间" width="100"></el-table-column>
        </el-table>
        <!-- 页码区域 -->
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="pageIndex2"
          :page-sizes="[20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
          background
          style="float:right"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      assetId: this.$route.params.id,
      maintainData: [],
      operationData: [],
      keyword: "",
      loading: false,
      tabsName: 0,
      //分页相关
      pageIndex1: 1,
      pageSize1: 20,
      total1: 0,
      pageIndex2: 1,
      pageSize2: 20,
      total2: 0
    };
  },
  methods: {
    //获取处置记录
    getManagementRecord() {
      this.loading = true;
      request({
        url: "/maintain-record/getOperationRecordByPage",
        method: "post",
        params: {
          id: this.assetId,
          pageIndex: this.pageIndex1,
          pageSize: this.pageSize1,
          keyword: this.keyword
        }
      })
        .then(response => {
          this.operationData = response.data.records;
          this.total1 = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //获取维修记录
    getMaintainRecord() {
      this.loading = true;
      request({
        url: "/maintain-record/getMaintainRecordByPage",
        method: "post",
        params: {
          id: this.assetId,
          pageIndex: this.pageIndex2,
          pageSize: this.pageSize2,
          keyword: this.keyword
        }
      })
        .then(response => {
          this.maintainData = response.data.records;
          this.total2 = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    //导出记录
    exportRecord() {
      this.loading = true;
      request({
        url: "/maintain-record/exportExcel",
        method: "post",
        params: {
          id: this.assetId,
          type: this.tabsName
        }
      })
        .then(response => {
          location.href = "http://localhost:9102/img" + response.data;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },

    downloadFile() {},

    //改变关键字
    changeKeyword() {
      this.getManagementRecord();
      this.getMaintainRecord();
    },

    //页码规格变更1
    handleSizeChange1(val) {
      this.pageSize1 = val;
      this.getManagementRecord();
    },

    //页码页数变更1
    handleCurrentChange1(val) {
      this.pageIndex1 = val;
      this.getManagementRecord();
    },

    //页码规格变更2
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.getMaintainRecord();
    },

    //页码页数变更2
    handleCurrentChange2(val) {
      this.pageIndex2 = val;
      this.getMaintainRecord();
    },

    //回到前一个页面
    backToDetail() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.getManagementRecord();
    this.getMaintainRecord();
  }
};
</script>

<style scoped>
</style>