bonus-ui/src/views/EquipmentRoamRecord/maintenanceRecord/index.vue

<template>
  <!-- 装备流转记录  -->
  <div class="app-container">
      <el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
        <el-card class="search-box">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="keyword">
          <el-input
            clearable
            style="width: 240px"
            placeholder="请输入关键字"
            v-model.trim="queryParams.keyWord"
          />
        </el-form-item>



        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
          />
        </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery"> 查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
            </el-col>
          </el-row>
        

        </el-card>
      </el-form>

      <el-card class="content-box">
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button icon="el-icon-download" size="mini" @click="onHandleExport">导出数据</el-button>
          </el-col>
        </el-row>
    <div class="table-container" style="flex: 1; overflow-y: auto;">
      <el-table :data="tableData" style="width: 100%" border stripe height="100%">
        <el-table-column align="center" show-overflow-tooltip type="index" label="序号" width="50"/>
        <el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人"/>
        <el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
          <template slot-scope="scope">
            <el-tag size="mini">
              {{ typeInfo[scope.row.type] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="createTime" label="操作时间"/>
<!--        <el-table-column align="center" show-overflow-tooltip prop="changeStatus" label="流转前状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.changeStatus == 1" size="mini">在库</el-tag>
            <el-tag v-if="scope.row.changeStatus == 2 || scope.row.changeStatus == 3" size="mini">
              在用
            </el-tag>
            <el-tag v-if="scope.row.changeStatus == 5" size="mini"> 维修</el-tag>
          </template>
        </el-table-column>-->
<!--        <el-table-column align="center" show-overflow-tooltip prop="changeStatus" label="流转后状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" size="mini">在库</el-tag>
            <el-tag v-if="scope.row.status == 2 || scope.row.status == 3" size="mini">
              在用
            </el-tag>
            <el-tag v-if="scope.row.status == 5" size="mini"> 维修</el-tag>
          </template>
        </el-table-column>-->
<!--        <el-table-column align="center" show-overflow-tooltip prop="useUint" label="使用单位"/>-->
<!--        <el-table-column align="center" show-overflow-tooltip prop="proName" label="使用项目"/>-->
<!--        <el-table-column align="center" show-overflow-tooltip prop="proLocation" label="地址"/>-->
        <el-table-column align="center" show-overflow-tooltip prop="devNum" label="装备数量"/>
        <el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="onHandleOutRecord(scope.row)">
              {{ typeInfo[scope.row.type] }}记录单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container-fage" style="flex-shrink: 0;">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getRoamRecordList"
      />
    </div>
    </el-card>
    <!-- 出库记录单 -->
    <el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
      <el-row>
        <el-button size="mini" type="primary" @click="onHandleDownload">下载</el-button>
        <el-button size="mini" type="primary" @click="onHandlePrint">打印</el-button>
        <el-button size="mini" type="primary" @click="onHandleClose">关闭</el-button>
      </el-row>
      <el-row class="record-row">
        <el-col :span="12">
          <div> 流转前使用单位：{{ outRecordParams.changeUnit }}</div>
        </el-col>
        <el-col :span="8">
          <div> 流转后使用单位：{{ outRecordParams.useUint }}</div>
        </el-col>
        <el-col :span="4">
          <div> 流转前使用工程：/</div>
        </el-col>
      </el-row>
      <el-row class="record-row">
        <el-col :span="12">
          <div> 流转后使用工程： {{ outRecordParams.proName }}</div>
        </el-col>
        <el-col :span="8">
          <div> 装备数量： {{ outRecordParams.devNum }}</div>
        </el-col>
      </el-row>

      <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
        <div class="dialog-table">
        <el-table :data="outRecordData" style="width: 100%" border stripe>
          <el-table-column align="center" show-overflow-tooltip type="index" width="100px"  label="序号"/>
          <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称"/>
          <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
          <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号"/>
          <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码"/>
        </el-table>
        </div>
      </vue-easy-print>

      <el-row class="record-row" style="margin-top: 10px">
        <el-col :span="24" style="text-align: right">
          <div>
            操作人：
            <span style="margin-right: 30px"> {{ outRecordParams.createUser }}</span>
            操作时间：
            {{ outRecordParams.createTime }}
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getRoamRecordListAPI, getOutRecordListAPI } from '@/api/EquipmentRoamRecord'
import vueEasyPrint from 'vue-easy-print'

export default {
  components: {
    vueEasyPrint
  },
  data() {
    return {
      total: 0,
      tableData: [],
      dateRange: [],
      typeInfo: {
        1: '退库',
        2: '出库',
        3: '退役',
        4: '维修'
      },
      queryParams: {
        keyWord: '', // 关键字
        type: '4', // 操作类型
        startTime: '', // 操作时间
        endTime: '', // 操作时间
        pageNum: 1,
        pageSize: 10
      },

      // 出库记录单
      outRecordVisible: false,
      outRecordParams: {
        changeUnit: '',
        useUint: '',
        proName: '',
        devNum: ''
      },
      outRecordData: [],
      recordId: ''
    }
  },
  created() {
    this.getRoamRecordList()
  },
  methods: {
    // 获取流转记录列表
    async getRoamRecordList() {
      if (this.dateRange.length > 0) {
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      }
      const res = await getRoamRecordListAPI(this.queryParams)
      this.tableData = res.rows
      this.total = res.total || 0
    },

    // 出库记录单
    async onHandleOutRecord(row) {
      const { changeUnit, useUint, proName, devNum, id, createUser, createTime } = row
      this.outRecordParams = { changeUnit, useUint, proName, devNum, createUser, createTime }
      this.recordId = id
      const res = await getOutRecordListAPI({ id })
      this.outRecordData = res.data
      this.outRecordVisible = true
    },

    // 查询
    onHandleQuery() {
      this.getRoamRecordList()
    },

    // 重置
    onHandleReset() {
      this.queryParams = { keyWord: '', type: '', startTime: '', endTime: '', pageNum: 1, pageSize: 10 }
      this.dateRange = []
      this.getRoamRecordList()
    },

    // 导出数据
    onHandleExport() {
      // this.downLo
      this.download(
        'material-mall/decChange/export',
        {
          ...this.queryParams
        },
        `装备流转记录.xlsx`
      )
    },

    // 下载
    onHandleDownload() {
      this.download('material-mall/decChange/exportDetails', { id: this.recordId }, `出库记录单.xlsx`)
    },

    // 打印
    onHandlePrint() {
      this.$refs.recordPrintRef.print()
    },

    // 关闭
    onHandleClose() {
      this.outRecordVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.record-row {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 40px;
}

.app-container {
  // background-color: #f5f5f5; /* 设置整体灰色背景 */
  display: flex;
  flex-direction: column;
}


.button-group {
  float: right;
  margin-left: 10px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}


.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;
  ::v-deep .el-card__body {
    padding: 20px !important;
}
}

.content-box {
  border-radius: 8px;
  height: calc(100vh - 210px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;

    ::v-deep  .pagination-container {
      padding: 0px 20px !important;
      margin-bottom: 30px;
    }
  }

  ::v-deep .el-table {
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important; // 浅紫色
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}
.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;
    
    // 启用斑马纹
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

    .el-table__body {
      tr {
        transition: all 0.2s ease;
        
        &:hover {
          background-color: #f8f9fa;
        }
        
        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
    
    // 表格边框优化
    &::before {
      display: none;
    }
    
    &::after {
      display: none;
    }
  }
}
</style>