bonus-ui/src/views/EquipmentEntryApply/equipmentInput/index.vue

<template>
  <!-- 修复标题模板字符串语法错误，规范属性顺序 -->
  <!-- 弹窗内容区域 -->
  <div class="app-container" style="height: calc(100vh - 84px);">
    <div class="page-header">
      <div>
        <i class="el-icon-arrow-left goBack-btn" @click="goBack"
           style="border-color: transparent;color: #00a288;background: transparent;padding-left: 0;padding-right: 0;"
        >返回</i>
        <span class="page-title">{{ pageTitle }}</span>
      </div>
      <div class="dialog-footer" style="float: right">
        <el-button size="small" type="primary" @click="handleSubmit" v-if="!isAddVisible"
                   :disabled="tableData.length===0"
        >{{ submitButtonText }}
        </el-button>
      </div>
    </div>
    <!-- 查询条件 -->
    <el-form
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      inline
      label-width="auto"
      size="small"
    >
      <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="status">
        <el-select
          clearable
          style="width: 200px"
          placeholder="请选择审批状态"
          v-model="queryParams.status"
        >
          <el-option label="待审批" value="0"/>
          <el-option label="已审批" value="1"/>
          <el-option label="草稿" value="3"/>
        </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 type="primary" @click="queryTableList">
          查询
        </el-button>
        <el-button
          type="primary"
          @click="resetTableList"
        >
          重置
        </el-button>
        <el-button
          type="primary"
          @click="equipmentDeployment"
          v-show="!isAddVisible"
        >
          新增装备
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: auto"
      show-overflow-tooltip
      :span-method="handleSpanMethod"
    >
      <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="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="status" align="center" show-overflow-tooltip label="审批状态" fixed="right"
                       min-width="100"
      >
        <template slot-scope="{ row }">
          <el-tag v-if="row.status == 0" size="small" type="warning">审批中</el-tag>
          <el-tag v-if="row.status == 1" size="small" type="success">已审批</el-tag>
          <el-tag v-if="row.status == 3" size="small" type="info">草稿</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="handleViewDetail(row)">
            <i class="el-icon-view"></i> 查看
          </el-button>
          <el-button
            type="text"
            @click="editRowInfo(row.maId)"
            v-if="row.status === '3' && !isAddVisible"
          >
            <i class="el-icon-edit"></i> 编辑
          </el-button>
          <el-button
            type="text"
            @click="deleteRowInfo(row)"
            v-if="row.status === '3' && !isAddVisible"
          >
            <i class="el-icon-delete"></i> 删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      @pagination="getList"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
    />
    <EquipmentEntryEditDialog
      :is-visible.sync="isEditVisible"
      :order-id="orderId"
      :is-view="isViewMode"
      @getOrderId="getOrderId"
    />
    <!-- 弹框 -->
    <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 EquipmentEntryEditDialog from '@/views/EquipmentEntryApply/equipmentInput/edit.vue'

// 使用defineComponent规范组件定义
import {
  getDeviceByOrderIdApi,
  equipmentPassAndRejectApiNew,
  equipmentSubmitApiNew,
  removeDeviceApi
} from '@/api/EquipmentEntryApply'

export default {
  name: 'EquipmentEntryDialog',
  components: { EquipmentEntryEditDialog },
  emits: ['update:isVisible', 'submit'], // 声明事件
  created() {
    console.log(this.$route)
    this.orderId = this.$route.params && this.$route.params.orderId
    this.isAddVisible = this.$route.params && this.$route.params.isAddVisible
    this.isApprovalVisible = this.$route.params && this.$route.params.isApprovalVisible
    if (!this.orderId) {
      this.pageTitle = '新增设备录入'
      this.submitButtonText = '提交申请'
    } else if (this.isAddVisible) {
      this.pageTitle = '查看装备'
      this.submitButtonText = ''
      this.getList()
    } else {
      this.pageTitle = '编辑装备'
      this.submitButtonText = '提交申请'
      this.getList()
    }
  },
  data() {
    return {
      isAddVisible: false,
      isApprovalVisible: false,
      isEditVisible: false,
      orderId: '',
      // 表格数据
      tableData: [],
      total: 0,
      queryParams: {
        createUser: '',
        createTime: '',
        status: '',
        name: '',
        specificationModel: '',
        originalCode: '',
        manufacturer: '',
        productionDate: '',
        minBuyPrice: '',
        maxBuyPrice: '',

        pageNum: 1,
        pageSize: 10
      },
      // 可添加表单数据
      formData: {
        // 示例字段，可根据实际需求修改
        equipmentName: '',
        model: '',
        quantity: 1
      },
      isViewMode: false, // 添加查看模式标识
      pageTitle:'',
      submitButtonText: '',
      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 },
      ],
      dialogVisible: false,
      dialogTitle: '',
      dialogList: [],
    }
  },
  watch: {
    isVisible(val) {
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    async approval(row, status) {
      equipmentPassAndRejectApiNew({ devIds: row.maId, status: status, id: this.orderId }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getList()
        }
      })
    },
    // 获取列表数据
    async getList() {
      try {
        this.queryParams.orderId = this.orderId
        const res = await getDeviceByOrderIdApi(this.queryParams)
        this.tableData = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.error('获取列表失败:', error)
      }
    },

    getOrderId(data) {
      this.orderId = data.orderId
      this.queryTableList()
    },

    // 查询表格数据
    queryTableList() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    equipmentDeployment() {
      this.$router.push({
        name: 'equipmentInputAdd',  // 完整路径
        params: {  // 因为使用path，所以用query传递参数
          orderId: this.orderId
        }
      })
    },

    // 删除按钮
    async deleteRowInfo(row) {
      this.$confirm('是否确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return removeDeviceApi([row.maId])
        })
        .then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList()
          }
        })
        .catch(() => {
        })
    },
    // 重置表格查询
    resetTableList() {
      this.$refs.queryFormRef.resetFields()
      this.queryParams.pageNum = 1
      this.getList()
    },

    /**
     * 处理表单提交
     */
    handleSubmit() {
      equipmentSubmitApiNew({ id: this.orderId, status: 0 }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.goBack()
        }
      })

    },

    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
        }
      }
    },

    //编辑
    editRowInfo(orderId) {
      this.orderId = orderId.toString()
      this.isViewMode = false // 编辑模式
      this.isEditVisible = true
    },

    // 修改查看方法
    showEquipmentInput(orderId, isView) {
      this.orderId = orderId.toString()
      this.isViewMode = isView || false // 设置查看模式
      this.isEditVisible = true
    },
    handleViewDetail(row) {
      this.$router.push({ path: '/equipment/details', query: { id: row.maId } })
    },
    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 lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid #e6e6e6;
  justify-content: space-between;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 15px;
    color: #303133;
  }
}

.dialog-content {
  padding: 10px 0;
  min-height: 200px; // 确保有足够高度
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px; // 按钮间距
}
</style>