bonus-ui/src/views/EquipmentEntryApply/EquipmentDetailList.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      inline
      label-width="auto"
      size="small"
    >
      <!-- 表单搜索 -->
      <el-row>
        <el-form-item prop="createUser" label="申请人：">
          <el-input
            clearable
            style="width: 200px"
            placeholder="请输入内容"
            v-model.trim="queryParams.createUser"
          />
        </el-form-item>
        <el-form-item label="申请时间：" prop="createTime">
          <el-date-picker
            type="date"
            style="width: 200px"
            value-format="YYYY-MM-DD"
            placeholder="请选择申请时间"
            v-model="queryParams.createTime"
          />
        </el-form-item>

        <el-form-item label="审批状态" prop="entryStatus">
          <el-select
            clearable
            style="width: 200px"
            placeholder="请选择审批状态"
            v-model="queryParams.entryStatus"
          >
            <el-option label="待审批" value="0"/>
            <el-option label="已通过" value="1"/>
            <el-option label="已驳回" value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item prop="name" label="装备名称：">
          <el-input
            clearable
            style="width: 200px"
            placeholder="请输入内容"
            v-model.trim="queryParams.name"
          />
        </el-form-item>

        <el-form-item prop="specificationModel" label="规格型号：">
          <el-input
            clearable
            style="width: 200px"
            placeholder="请输入内容"
            v-model.trim="queryParams.specificationModel"
          />
        </el-form-item>

        <el-form-item prop="originalCode" label="装备原始编码：">
          <el-input
            clearable
            style="width: 200px"
            placeholder="请输入内容"
            v-model.trim="queryParams.originalCode"
          />
        </el-form-item>

        <el-form-item prop="manufacturer" label="生产厂家：">
          <el-input
            clearable
            style="width: 200px"
            placeholder="请输入内容"
            v-model.trim="queryParams.manufacturer"
          />
        </el-form-item>

        <el-form-item prop="productionDate" label="出厂日期：">
          <el-date-picker
            type="date"
            style="width: 200px"
            value-format="YYYY-MM-DD"
            placeholder="请选择出厂日期"
            v-model="queryParams.productionDate"
          />
        </el-form-item>

        <!--        <el-form-item prop="keyword" label="采购日期：">
                  <el-date-picker
                    type="date"
                    style="width: 240px"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择采购日期"
                    v-model="queryParams.applyTime"
                  />
                </el-form-item>-->

        <el-form-item prop="minBuyPrice" label="资产原值：">
          <el-input
            clearable
            style="width: 90px"
            placeholder="请输入"
            v-model.trim="queryParams.minBuyPrice"
          />

        </el-form-item>
        <el-form-item prop="maxBuyPrice" label="-" style="margin-left: -6%;">
          <el-input
            clearable
            style="width: 90px"
            placeholder="请输入"
            v-model.trim="queryParams.maxBuyPrice"
          />
        </el-form-item>


        <el-form-item>
          <el-button class="primary-lease" type="primary" @click="getEquipmentApplyList">
            查询
          </el-button>
          <el-button class="primary-lease" type="primary" @click="resetForm">
            重置
          </el-button>
          <el-button
            class="primary-lease"
            type="primary"
            @click="showEquipmentInput()"
          >
            装备录入
          </el-button>

          <el-button
            class="primary-lease"
            type="primary"
            @click="showDetails('0')"
          >
            展开明细
          </el-button>

        </el-form-item>

      </el-row>

      <!-- 表格 -->
      <el-table :data="tableData" :span-method="handleSpanMethod">
        <!--      <el-table :data="tableData"  >-->
        <el-table-column label="序号" align="center" width="55" type="index" fixed/>
        <el-table-column prop="orderNumber" label="录入单号" align="center" show-overflow-tooltip
                         column-key="orderNumber" fixed min-width="200"
        />
        <el-table-column prop="major" label="专业" align="center" show-overflow-tooltip min-width="100"/>
        <el-table-column prop="orderNumber" label="工序" align="center" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            {{ scope.row.mainProcess }}{{ scope.row.subProcess ? '>' + scope.row.subProcess : '' }}
          </template>
        </el-table-column>

        <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.mainCategory ? scope.row.mainCategory + '>' : '' }}
            {{ scope.row.branch ? scope.row.subCategory + '>' : scope.row.subCategory }}{{ scope.row.branch }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="装备名称" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="specificationModel" label="规格型号" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="originalCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="unit" label="计量单位" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="manufacturer" label="生产厂家" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="productionDate" label="出厂日期" show-overflow-tooltip align="center" min-width="100"/>
        <!--        <el-table-column prop="orderNumber" label="采购日期" align="center"/>-->
        <el-table-column prop="originalValue" label="资产原值（元）" show-overflow-tooltip align="center" min-width="100"/>
        <!--        <el-table-column prop="orderNumber" label="最大使用年限（年）" align="center"/>-->
        <!--        <el-table-column prop="orderNumber" label="下次维保日期" align="center"/>-->
        <el-table-column prop="province" label="所属省份" show-overflow-tooltip align="center" min-width="100"/>
        <el-table-column prop="appearanceImages" label="装备外观" show-overflow-tooltip align="center" min-width="100">
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 1)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="certificates" label="合格证" show-overflow-tooltip align="center" min-width="100">
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 2)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionReports" label="定期检验报告" show-overflow-tooltip align="center" min-width="100">
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 3)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseInvoices" label="采购发票" show-overflow-tooltip align="center" min-width="100">
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleView(row, 4)">查看</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          v-if="item.visible"
          :key="index"
          align="center"
          show-overflow-tooltip
          :label="item.label"
          :prop="item.prop"
        >
          <template v-slot="{ row }" v-if="/^feature(Item|Value)\d+$/.test(item.prop)">
            <span>
              {{ getFeatureValue(row, item.prop) }}
            </span>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="devCount" label="特征项1" align="center"/>-->
        <!--        <el-table-column prop="devCount" label="特征值1" align="center"/>-->
        <el-table-column prop="createUser" label="申请人" show-overflow-tooltip align="center" fixed="right"
                         min-width="100"
        />
        <el-table-column prop="createTime" label="申请时间" show-overflow-tooltip align="center" fixed="right"
                         min-width="100"
        />
        <el-table-column prop="entryStatus" align="center" show-overflow-tooltip label="审批状态" fixed="right"
                         min-width="100"
        >
          <template slot-scope="{ row }">
            <el-tag v-if="row.entryStatus == 0" size="small" type="warning">待审批</el-tag>
            <el-tag v-if="row.entryStatus == 1" size="small" type="success">已通过</el-tag>
            <el-tag v-if="row.entryStatus == 2" size="small" type="success">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="300" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" @click="showEquipmentInput(row.id, true)">
              <i class="el-icon-view"></i> 查看
            </el-button>
            <el-button
              type="text"
              @click="showEquipmentInput(row.id, false)"
              v-if="row.status === '3'"
            >
              <i class="el-icon-edit"></i> 编辑
            </el-button>
            <el-button
              type="text"
              @click="deleteItem(row)"
              v-if="row.status === '3'"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        :total="total"
        @pagination="handlePageChange"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
    </el-form>

    <!-- 弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
      <el-table :data="dialogList" fit highlight-current-row style="width: 100%" :max-height="500">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column label="附件名称" prop="fileName" align="center">
          <!-- 插槽 -->
          <template v-slot="{ row }">
            <span style="color: #00a288; cursor: pointer" @click="handleFile(row)">{{ row.fileName }}</span>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceListApi, equipmentDelApiNew } from '@/api/EquipmentEntryApply/index'

export default {
  name: 'EquipmentDetailList',
  data() {
    return {
      total: 0,
      orderId: '',
      isVisible: false,
      isAddVisible: false,
      queryParams: {
        createUser: '',
        createTime: '',
        entryStatus: '',
        name: '',
        specificationModel: '',
        originalCode: '',
        manufacturer: '',
        productionDate: '',
        minBuyPrice: '',
        maxBuyPrice: '',

        pageNum: 1,
        pageSize: 10
      },
      columns: [
        { key: 26, label: `特征项1`, prop: 'featureItem1', visible: true },
        { key: 27, label: `特征值1`, prop: 'featureValue1', visible: true },
        { key: 28, label: `特征项2`, prop: 'featureItem2', visible: true },
        { key: 29, label: `特征值2`, prop: 'featureValue2', visible: true },
        { key: 30, label: `特征项3`, prop: 'featureItem3', visible: true },
        { key: 31, label: `特征值3`, prop: 'featureValue3', visible: true },
        { key: 32, label: `特征项4`, prop: 'featureItem4', visible: true },
        { key: 33, label: `特征值4`, prop: 'featureValue4', visible: true },
        { key: 34, label: `特征项5`, prop: 'featureItem5', visible: true },
        { key: 35, label: `特征值5`, prop: 'featureValue5', visible: true },
        { key: 36, label: `特征项6`, prop: 'featureItem6', visible: true },
        { key: 37, label: `特征值6`, prop: 'featureValue6', visible: true },
        { key: 38, label: `特征项7`, prop: 'featureItem7', visible: true },
        { key: 39, label: `特征值7`, prop: 'featureValue7', visible: true },
        { key: 40, label: `特征项8`, prop: 'featureItem8', visible: true },
        { key: 41, label: `特征值8`, prop: 'featureValue8', visible: true },
        { key: 42, label: `特征项9`, prop: 'featureItem9', visible: true },
        { key: 43, label: `特征值9`, prop: 'featureValue9', visible: true },
      ],
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      dialogList: [],
    }
  },
  mounted() {
    this.getEquipmentApplyList()
  },
  methods: {
    /**
     * 获取装备申请列表
     */
    getEquipmentApplyList() {
      getDeviceListApi(this.queryParams)
        .then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total

          // 按 orderNumber 排序，确保相同订单连续
          this.tableData.sort((a, b) => a.orderNumber.localeCompare(b.orderNumber))
        })
        .catch(error => {
          console.error('获取装备申请列表失败:', error)
        })
    },

    /**
     * 分页变化处理
     */
    handlePageChange() {
      this.getEquipmentApplyList()
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.queryFormRef.resetFields()
      this.queryParams.pageNum = 1
      this.getEquipmentApplyList()
    },

    // 点击事件处理函数 - 实现页面跳转
    showEquipmentInput(orderId, isAddVisible) {
      this.$router.push({
        name: 'equipmentInput',  // 完整路径
        params: {  // 因为使用path，所以用query传递参数
          orderId: orderId,
          isAddVisible: isAddVisible,
          isApprovalVisible: false
        }
      })
    },

    /**
     * 删除项目
     */
    deleteItem(row) {
      this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => equipmentDelApiNew({ id: row.id }))
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getEquipmentApplyList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(error => {
          if (error !== 'cancel') { // 排除取消操作的错误
            console.error('删除失败:', error)
            this.$message.error('删除失败，请重试')
          }
        })
    },

    //展示明细
    showDetails(num) {
      this.$emit('switch-view', num)
    },

    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 如果不是“录入单号”列，则不处理
      if (columnIndex !== 1) { // 假设“录入单号”是第1列（index=1）
        return {
          rowspan: 1,
          colspan: 1
        }
      }

      const orderNumber = row.orderNumber
      let count = 1

      // 计算从当前行开始，连续有多少个相同的 orderNumber
      for (let i = rowIndex + 1; i < this.tableData.length; i++) {
        if (this.tableData[i].orderNumber === orderNumber) {
          count++
        } else {
          break
        }
      }

      // 判断当前行是否是该 orderNumber 的第一条记录
      const isFirst = !this.tableData.some((item, idx) => idx < rowIndex && item.orderNumber === orderNumber)

      if (isFirst) {
        // 第一次出现，合并 count 行
        return {
          rowspan: count,
          colspan: 1
        }
      } else {
        // 不是第一次，隐藏该单元格
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    getFeatureValue(row, prop) {
      const match = prop.match(/feature(Item|Value)(\d+)/)
      if (!match) return '-'

      const type = match[1] // 'Item' or 'Value'
      const index = Number(match[2]) - 1
      const list = row.propertyVoList || []

      if (!list[index]) return '-'

      return type === 'Item' ? list[index].propertyName : list[index].propertyValue
    },
    handleFile(row) {
      // 打开文件预览
      window.open(row.fileUrl, '_blank')
    },
    // 查看
    handleView(row, type) {
      if (type == 1) {
        this.dialogTitle = '装备外观'
        this.dialogList = row.appearanceImages || []
      } else if (type == 2) {
        this.dialogTitle = '合格证'
        this.dialogList = row.certificates || []
      } else if (type == 3) {
        this.dialogTitle = '定期检验报告'
        this.dialogList = row.inspectionReports || []
      } else if (type == 4) {
        this.dialogTitle = '采购发票'
        this.dialogList = row.purchaseInvoices || []
      }
      this.dialogVisible = true
    },

  }
}
</script>

<style scoped lang="scss">
.view-btn {
  color: #409eff;
  font-size: 14px;
  font-weight: bold;
}

.edit-btn {
  color: #67c23a;
  font-size: 12px;
  font-weight: bold;
}

.delete-btn {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.app-container {
  padding: 20px;
}

::v-deep .el-pagination {
  margin-top: 15px;
  text-align: right;
}

::v-deep .el-button {
  margin-right: 8px;
}
</style>