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="devName" label="装备名称：">
        <el-input
          clearable
          style="width: 200px"
          placeholder="请输入关键字"
          v-model.trim="queryParams.devName"
        />
      </el-form-item>

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

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

      <el-form-item prop="brand" label="生产厂家：">
        <el-input
          clearable
          style="width: 200px"
          placeholder="请输入关键字"
          v-model.trim="queryParams.brand"
        />
      </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="proType" 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.mainGx }} > {{ scope.row.childGx }}
        </template>
      </el-table-column>

      <el-table-column prop="orderNumber" label="装备类目" show-overflow-tooltip align="center" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.devCategory }} > {{ scope.row.devSubcategory }}
        </template>
      </el-table-column>

      <el-table-column prop="devName" label="装备名称" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="devModel" label="规格型号" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="identifyCode" label="装备原始编码" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="unitName" label="计量单位" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="brand" 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="buyPrice" 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="operateAddress" label="所属省份" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="orderNumber" label="装备外观" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="orderNumber" label="合格证" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="orderNumber" label="定期检验报告" show-overflow-tooltip align="center" min-width="100"/>
      <el-table-column prop="orderNumber" label="采购发票" show-overflow-tooltip align="center" min-width="100"/>
      <!--        <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="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="showEquipmentInput(row.maId, true)">
            <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"
    />
  </div>


</template>

<script>
import EquipmentEntryEditDialog from '@/views/EquipmentEntryApply/equipmentInput/edit.vue'

// 使用defineComponent规范组件定义
import {
  equipmentDraftListApiNew,
  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 = ''
    } else {
      this.pageTitle = '编辑装备'
      this.submitButtonText = '提交申请'
    }
    this.getList()
  },
  data() {
    return {
      isAddVisible: false,
      isApprovalVisible: false,
      isEditVisible: false,
      orderId: '',
      // 表格数据
      tableData: [],
      total: 0,
      queryParams: {
        createUser: '',
        createTime: '',
        status: '',
        devName: '',
        devModel: '',
        identifyCode: '',
        brand: '',
        productionDate: '',
        minBuyPrice: '',
        maxBuyPrice: '',

        pageNum: 1,
        pageSize: 10
      },
      // 可添加表单数据
      formData: {
        // 示例字段，可根据实际需求修改
        equipmentName: '',
        model: '',
        quantity: 1
      },
      isViewMode: false, // 添加查看模式标识
      pageTitle:'',
      submitButtonText: ''
    }
  },
  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 equipmentDraftListApiNew(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
    }
  }
}
</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>