bonus-ui/src/views/equipmentRepair/repairApply/repairView.vue

<template>
  <div class="app-container">
    <!-- 列表 -->
    <el-card>
      <el-row class="mb8" :gutter="10" justify="end">
        <el-col :span="4">
          <span style="font-size: 20px; font-weight: 800">申请列表</span>
        </el-col>
      </el-row>

      <el-table
        v-loading="isLoading"
        :data="tableList"
        highlight-current-row
        border
        stripe
        :max-height="650"
        style="width: 100%"
      >
        <!-- 序号列 -->
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
        />

        <!-- 动态列 -->
        <el-table-column
          v-for="(column, index) in tableColumns"
          :key="index"
          :label="column.label"
          :prop="column.prop"
          :width="column.width"
          :min-width="column.minWidth"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="!column.render">{{ scope.row[column.prop] }}</span>
            <component
              v-else
              :is="{ render: (h) => column.render(h, { row: scope.row }) }"
            />
          </template>
        </el-table-column>

        <!-- 附件列 -->
        <el-table-column label="附件" align="center" width="90">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="picturePreview(scope.row)"
              v-if="scope.row.url"
            >
              查看
            </el-button>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="90">
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '通过' ? 'success' : scope.row.status === '驳回' ? 'danger' : 'warning'"
              size="small"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <!-- 图片查看弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
      <img width="100%" height="500px" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script>
import { getRepairDetailsList } from "@/api/equipmentRepair";

export default {
  name: 'ViewRepairListNoPagination',
  data() {
    return {
      routerParams: {},
      isLoading: false,
      queryParams: {
        parentTypeName: null,
        typeName: null,
        manageType: null,
        applyId: null,
        id: null
      },
      dialogImageUrl: '',
      dialogVisible: false,
      tableList: [],
      tableColumns: [
        { label: '分类', prop: 'type', width: 75 },
        { label: '类目', prop: 'groupName' },
        { label: '名称', prop: 'typeName' },
        { label: '规格型号', prop: 'typeModelName' },
        {
          label: '管理模式',
          prop: 'manageType',
          width: '80',
          render: (h, { row }) => h('span', {}, row.manageType === '0' ? '数量管理' : '编码管理')
        },
        { label: '设备编码', prop: 'code' },
        { label: '维修数量', prop: 'repairNum', width: 80 },
        {
          label: '维修是否合格',
          prop: 'isScrap',
          width: '120',
          render: (h, { row }) => h('span', {}, row.isScrap === '0' ? '是' : '否')
        },
        {
          label: '维修日期',
          prop: 'repairTime',
          width: '150',
          render: (h, { row }) => h('span', {}, row.repairTime || '-')
        },
        {
          label: '退役原因',
          prop: 'reasonVal',
          width: '120',
          render: (h, { row }) => h('span', {}, row.reasonVal || '-')
        },
      ]
    }
  },
  created() {
    this.routerParams = this.$route.query
    const title = this.routerParams.isView ? '维修查看' : '列表查看'
    this.queryParams.id = this.routerParams.applyId || ''
    this.$tab.updatePage(Object.assign({}, this.$route, { title }))
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      try {
        const res = await getRepairDetailsList({ ...this.queryParams })
        this.tableList = res.data || []
      } finally {
        this.isLoading = false
      }
    },
    // 图片预览
    picturePreview(row) {
      if (row.url) {
        this.dialogImageUrl = row.url.replaceAll('#', '%23')
        // 从URL中提取文件名
        const urlParts = row.url.split('/');
        const fileNameWithParams = urlParts[urlParts.length - 1];

        // 去除URL参数，获取纯文件名
        const fileName = fileNameWithParams.split('?')[0];
        const parts = fileName.split('.')
        const extension = parts.pop().toLowerCase()
        if (['doc', 'docx', 'pdf'].includes(extension)) {
          window.open(row.url, fileName)
        } else {
          this.dialogVisible = true
        }
      } else {
        this.$message.warning('该行没有附件')
      }
    },
  }
}
</script>