bonus-ui/src/views/EquipmentLedger/components/equ-store.vue

<template>
  <!-- 装备退库页面 -->
  <div class="app-container">
    <div class="card">
      <div class="page-header">
        <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        <span class="page-title">装备退库</span>
      </div>

      <el-form ref="outFormRef" :model="outForm" :rules="outFormRules" label-width="130px" inline size="small">
        <el-form-item label="需求单位" prop="propertyUnitId">
          <el-select
            v-model="outForm.propertyUnitId"
            placeholder="请选择需求单位"
            clearable
            filterable
            style="width: 240px"
          >
            <el-option v-for="item in propertyUnitList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="使用项目" prop="proCode">
          <el-select
            clearable
            style="width: 240px"
            placeholder="请选择使用项目"
            v-model="outForm.proCode"
            @change="onChangeProCode"
          >
            <el-option :key="item.proCode" :label="item.proName" :value="item.proCode" v-for="item in useProjectList"/>
          </el-select>
        </el-form-item>
        <el-form-item label="项目类型" prop="proType">
          <el-input style="width: 240px" disabled v-model="proTypeName"/>
        </el-form-item>
        <el-form-item label="电压等级" prop="voltageLevel">
          <el-input style="width: 240px" disabled v-model="voltageLevel"/>
        </el-form-item>
        <el-form-item label="项目所在省" prop="proProvince">
          <el-input style="width: 240px" disabled v-model="outForm.proProvince"/>
        </el-form-item>
        <el-form-item label="项目所在市" prop="proCity">
          <el-input style="width: 240px" disabled v-model="outForm.proCity"/>
        </el-form-item>
        <el-form-item label="项目所在区/县" prop="proCounty">
          <el-input style="width: 240px" disabled v-model="outForm.proCounty"/>
        </el-form-item>
        <el-form-item label="详细地址" prop="proLocation">
          <el-input v-model="outForm.proLocation" placeholder="请输入详细地址" clearable style="width: 240px"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="card" style="margin-top: 10px">
      <el-row :gutter="0">
        <el-col :span="12"><span style="font-weight: 800">装备退库列表</span></el-col>
        <el-col :span="12" style="text-align: end">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onHandleAddEquipment">新增装备退库</el-button>
          <el-button size="mini" type="primary" @click="onHandleSubmit"> 确定退库</el-button>
        </el-col>
      </el-row>
      <el-table :data="selectedEquipment" border stripe height="546">
        <el-table-column label="序号" type="index" align="center" width="55"/>
        <el-table-column prop="name" label="装备名称" align="center"/>
        <el-table-column prop="devCategory" label="装备类目" align="center">
          <template slot-scope="{ row }">
            <span>
              {{ row.mainCategory ? row.mainCategory + '>' : '' }}
              {{ row.branch ? row.subCategory + '>' : row.subCategory }}{{ row.branch }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="specificationModel" label="规格型号" align="center"/>
        <el-table-column prop="code" label="装备编码" align="center"/>
        <el-table-column label="入库数量" align="center">
          <template slot-scope="{ row }">
            <!-- <el-input-number
              clearable
              style="width: 240px"
              placeholder="请输入入库数量"
              v-model="row.inNum"
              :controls="false"
            /> -->
            <span>1</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="装备状态" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.status == 1" size="mini">在库</span>
            <span v-if="row.status == 2" size="mini">自用</span>
            <span v-if="row.status == 3" size="mini">共享</span>
            <span v-if="row.status == 5" size="mini">维修</span>
          </template>
        </el-table-column>
        <el-table-column label="使用到期日期" align="center" width="180">
          <template slot-scope="scope">
            <el-date-picker
              type="date"
              v-model="scope.row.useTime"
              placeholder="选择使用日期"
              value-format="yyyy-MM-dd"
              :class="{ 'error-border': scope.row.validationError && scope.row.validationError.useTime }"
              style="width: 150px"
            />
            <span class="error-text" v-if="scope.row.validationError && scope.row.validationError.useTime">
              使用到期日期不能为空
            </span>
          </template>
        </el-table-column>
        <!-- 是否维修 -->
        <el-table-column label="是否维修" align="center">
          <template slot-scope="{ row }">
            <el-select v-model="row.changeStatus" placeholder="请选择是否维修">
              <el-option label="否" value="1"/>
              <el-option label="是" value="5"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="onHandleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加装备" :visible.sync="addEquipmentVisible" width="90%" @close="handleDialogClose">
      <el-form :inline="true" label-width="auto">
        <el-row>
          <el-col :span="6">
            <el-form-item label="装备名称" prop="devName">
              <el-input
                clearable
                style="width: 100%"
                placeholder="请输入装备名称"
                v-model="addEquipmentQueryParams.devName"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button size="mini" type="primary" @click="onHandleAddEquipmentQuery">查询</el-button>
              <el-button size="mini" plain @click="onHandleAddEquipmentReset">重置</el-button>
              <el-button size="mini" type="primary" @click="onHandleAddEquipmentConfirm"> 确定添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="addEquipmentList"
        border
        @selection-change="handleSelectionAddEquipment"
        ref="equipmentTable"
        :row-key="(row) => row.devId"
        height="546"
      >
        <el-table-column label="序号" type="index" align="center" width="55"/>
        <el-table-column width="55" align="center" type="selection"/>
        <el-table-column width="160" show-overflow-tooltip prop="propertyUnit" label="公司名称" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="name" label="装备名称" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="specificationModel" label="装备型号" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="code" label="装备编号" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="unit" label="计数单位" align="center"/>
        <el-table-column align="center" show-overflow-tooltip prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 2" size="mini">自用</el-tag>
            <el-tag v-if="scope.row.status == 3" size="mini"> 共享</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="160" show-overflow-tooltip prop="propertyUnit" label="产权单位" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="originalValue" label="资产原值(万元)" align="center"/>
        <el-table-column width="160" show-overflow-tooltip prop="productDate" label="出厂日期" align="center"/>
        <el-table-column
          width="160"
          show-overflow-tooltip
          prop="maxServiceLifeYears"
          label="最大使用年限"
          align="center"
        />
        <el-table-column width="160" show-overflow-tooltip prop="usingProject" label="使用项目" align="center"/>
        <el-table-column
          width="160"
          show-overflow-tooltip
          prop="nextMaintenanceDate"
          label="下次检验日期"
          align="center"
        />
        <el-table-column width="160" show-overflow-tooltip prop="manufacturer" label="生产厂商" align="center"/>
        <template v-for="item in tableColumns">
          <!-- 特征项列 -->
          <el-table-column :key="`item-${item}`" align="center" show-overflow-tooltip :label="`特征项${item}`">
            <template slot-scope="{ row }">
              <span v-if="row.propertyVoList && row.propertyVoList.length > 0">
                <span v-if="item - 1 < row.propertyVoList.length">
                  {{ row.propertyVoList[item - 1].propertyName || '-' }}
                </span>
              </span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <!-- 特征值列 -->
          <el-table-column :key="`value-${item}`" align="center" show-overflow-tooltip :label="`特征值${item}`">
            <template slot-scope="{ row }">
              <span v-if="row.propertyVoList && row.propertyVoList.length > 0">
                <span v-if="item - 1 < row.propertyVoList.length">
                  {{ row.propertyVoList[item - 1].propertyValue || '-' }}
                </span>
              </span>
              <span v-else> - </span>
            </template>
          </el-table-column>
        </template>
      </el-table>

      <pagination
        :total="addEquipmentTotal"
        @pagination="handlePaginationChange"
        :page.sync="addEquipmentQueryParams.pageNum"
        :limit.sync="addEquipmentQueryParams.pageSize"
      />
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
import {
  getMaxFeatureAPI,
  getUseProjectListAPI,
  getVoltageListAPI,
  addProjectOutAPI
} from '@/api/EquipmentLedger/equ-out'
import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
import { deptTreeSelect } from '@/api/system/user'
import { addProjectStoreAPI } from '@/api/EquipmentLedger/equ-store.js'
import { getApprovalInstanceByBusiness } from '@/api/approval'

export default {
  data() {
    return {
      addEquipmentVisible: false,
      // 存储所有已选择的装备ID（用于跨页回显）
      selectedIds: new Set(),
      // 当前弹窗中选择的装备详情
      currentDialogSelected: [],

      // 入库表单
      outForm: {
        type: 1, // 入库
        status: '', // 变更状态
        proCode: '', // 使用项目id
        proName: '', // 使用项目名称
        proType: '', // 项目类型
        voltageLevel: '', // 电压等级
        proProvince: '', // 项目所在省
        proCity: '', // 项目所在市
        proCounty: '', // 项目所在区/县
        proLocation: '', // 详细地址
        propertyUnitId: '' // 属性单位ID
      },
      // 入库表单规则
      outFormRules: {
        propertyUnitId: [{ required: true, message: '请选择需求单位', trigger: 'change' }],
        status: [{ required: true, message: '请选择变更状态', trigger: 'change' }],
        proCode: [{ required: true, message: '请选择使用项目', trigger: 'change' }],
        proType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
        voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
        proProvince: [{ required: true, message: '请选择项目所在省', trigger: 'change' }],
        proCity: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
        proCounty: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
        proLocation: [{ required: true, message: '请选择详细地址', trigger: 'change' }]
      },
      equipmentList: [],
      propertyUnitList: [], // 产权单位

      provinceList: [],
      cityList: [],
      countyList: [],
      selectedEquipment: [],

      // 可选择的变更设备查询条件
      addEquipmentQueryParams: {
        pageNum: 1,
        pageSize: 10,
        devName: '',
        status: '2',
        companyId: '',
        proId: ''
      },
      // 可选择的变更设备列表
      addEquipmentList: [],
      tableColumns: 0,
      addEquipmentTotal: 0,
      useProjectList: [], // 使用项目下拉选
      voltageList: [], // 电压等级下拉选
      proTypeName: '', // 项目类型名称
      voltageLevel: ''
    }
  },
  created() {
    this.getUseProjectList()
    this.getDeptTreeSelect()
    this.provinceList = regionData
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    // 获取产权单位
    getDeptTreeSelect() {
      deptTreeSelect().then((res) => {
        this.propertyUnitList = this.filterTree(res.data)
        console.log('🚀 ~ getDeptTreeSelect ~ this.propertyUnitList:', this.propertyUnitList)
      })
    },
    filterTree(nodes) {
      return nodes
        .map((node) => {
          if (node.children) {
            node.children = this.filterTree(node.children)
          }
          return node
        })
        .filter((node) => node.status !== '1')
    },
    // 获取可选择的变更设备列表
    getSelectEquipmentList() {
      return new Promise((resolve) => {
        getDeviceListAPI(this.addEquipmentQueryParams).then((res) => {
          this.addEquipmentList = res.data.rows || []
          this.addEquipmentTotal = res.data.total || 0
          this.getMaxFeature()

          // 数据加载完成后设置选中状态
          this.$nextTick(() => {
            setTimeout(() => {
              this.setTableSelection()
              resolve()
            }, 0)
          })
        })
      })
    },

    // 分页变化处理
    handlePaginationChange() {
      this.getSelectEquipmentList()
    },

    // 设置表格选中状态（回显已选择项）
    setTableSelection() {
      if (!this.$refs.equipmentTable || !this.addEquipmentList.length) return

      // 先清除当前页选中状态
      this.$refs.equipmentTable.clearSelection()

      // 遍历当前页数据，对已选中的项进行勾选
      this.addEquipmentList.forEach((item) => {
        if (this.selectedIds.has(item.devId)) {
          setTimeout(() => {
            this.$refs.equipmentTable.toggleRowSelection(item, true)
          }, 0)
        }
      })
    },

    // 获取列表表头特征值数量
    async getMaxFeature() {
      const res = await getMaxFeatureAPI()
      this.tableColumns = res.data
    },

    // 获取使用项目的下拉选
    async getUseProjectList() {
      const res = await getUseProjectListAPI()
      const result = await getVoltageListAPI()
      this.useProjectList = res.data
      this.voltageList = result.data
    },

    // 查询可选择的变更设备列表
    onHandleAddEquipmentQuery() {
      this.addEquipmentQueryParams.pageNum = 1
      this.getSelectEquipmentList()
    },

    // 重置可选择的变更设备列表
    onHandleAddEquipmentReset() {
      this.addEquipmentQueryParams = {
        pageNum: 1,
        pageSize: 10,
        devName: '',
        status: '2',
        companyId: '',
        proId: this.addEquipmentQueryParams.proId || '' // 保留项目ID
      }
      this.getSelectEquipmentList()
    },

    // 表单重置
    resetForm() {
      this.$refs.outFormRef.resetFields()
      this.equipmentList = []
      this.selectedEquipment = []
      this.selectedIds.clear()
    },

    // 验证表单数据
    validateForm() {
      let isValid = true

      // 验证已选择的装备
      this.selectedEquipment.forEach((row) => {
        row.validationError = {}

        // 验证使用到期日期
        if (!row.useTime) {
          row.validationError.useTime = true
          isValid = false
        }
      })

      return isValid
    },

    // 提交表单
    submitForm() {
      // 先验证表格数据
      if (!this.validateForm()) {
        return
      }

      this.$refs.outFormRef.validate(async(valid) => {
        if (valid) {
          if (this.selectedEquipment.length === 0) {
            this.$modal.msgError('请至少添加一个装备')
            return
          }

          // 组装参数
          const params = { ...this.outForm, jsonData: '' }
          const jsonData = this.selectedEquipment.map((item) => {
            return {
              devId: item.maId,
              useTime: item.useTime,
              changeStatus: item.changeStatus
            }
          })

          params.jsonData = JSON.stringify(jsonData)
          console.log('params', params)

          try {
            const res = await addProjectStoreAPI(params)

            if (res.code === 200) {
              // 提交成功后，获取退库申请ID
              let returnId = null
              if (typeof res.data === 'number') {
                returnId = res.data
              } else if (res.data && typeof res.data === 'object' && res.data.id) {
                returnId = res.data.id
              }

              console.log('退库申请ID:', returnId, '返回数据:', res.data)

              // 查询审批实例，如果不存在则会自动创建
              try {
                const approvalRes = await getApprovalInstanceByBusiness('EQUIPMENT_RETURN', returnId)
                console.log('审批实例查询结果:', approvalRes)
                if (approvalRes && approvalRes.data) {
                  this.$modal.msgSuccess('申请已提交，请等待审批')
                  this.$router.push({
                    path: '/equipment/manage/equipment-ledger'
                  })
                }
              } catch (error) {
                console.error('查询审批实例失败:', error)
                this.$modal.msgSuccess('申请已提交，请等待审批')
                this.$router.push({
                  path: '/equipment/manage/equipment-ledger'
                })
              }
            } else {
              this.$modal.msgError(res.msg)
            }
          } catch (error) {
            console.error('提交失败:', error)
            this.$modal.msgError('提交失败: ' + error.message)
          }
        }
      })
    },

    // 添加装备
    onHandleAddEquipment() {
      if (!this.addEquipmentQueryParams.proId) {
        this.$modal.msgError('请选择使用项目')
        return
      }

      this.getSelectEquipmentList().then(() => {
        this.addEquipmentVisible = true
      })
    },

    // 删除单条装备
    onHandleDelete(index) {
      const removedItem = this.selectedEquipment.splice(index, 1)[0]
      this.selectedIds.delete(removedItem.devId)
      if (this.addEquipmentVisible) {
        this.setTableSelection()
      }
    },

    // 批量移除装备
    removeSelectedEquipment() {
      if (this.selectedEquipment.length === 0) {
        this.$modal.msgWarning('请选择要移除的装备')
        return
      }

      this.$modal.confirm('确认移除选中的装备吗？').then(() => {
        // 清除所有选中ID
        this.selectedEquipment.forEach((item) => {
          this.selectedIds.delete(item.devId)
        })
        this.selectedEquipment = []

        // 更新弹窗选择状态
        if (this.addEquipmentVisible) {
          this.setTableSelection()
        }
      })
    },

    // 选择变化处理
    handleSelectionAddEquipment(selection) {
      // 更新当前弹窗中的选择详情
      this.currentDialogSelected = selection.map((item) => ({
        ...item,
        useTime: '',
        validationError: {}
      }))

      // 更新选中ID集合
      this.selectedIds.clear()
      selection.forEach((item) => {
        this.selectedIds.add(item.devId)
      })
    },

    // 确定添加
    onHandleAddEquipmentConfirm() {
      if (this.currentDialogSelected.length === 0) {
        this.$modal.msgWarning('请选择要添加的装备')
        return
      }

      // 过滤掉已添加的装备，避免重复
      const newItems = this.currentDialogSelected.filter(
        (newItem) => !this.selectedEquipment.some((existing) => existing.devId === newItem.devId)
      )

      if (newItems.length > 0) {
        this.selectedEquipment = [...this.selectedEquipment, ...newItems]
        this.$modal.msgSuccess('成功添加 ' + newItems.length + ' 个装备')
        this.selectedEquipment.forEach((item) => {
          this.$set(item, 'changeStatus', '1');
        })
      } else {
        this.$modal.msgError('所选装备已添加')
      }

      this.addEquipmentVisible = false
    },

    // 处理弹窗关闭
    handleDialogClose() {
      // 保留选择状态，下次打开仍能看到之前的选择
    },

    // 选择使用项目
    onChangeProCode(value) {
      this.outForm.proCode = value
      this.addEquipmentQueryParams.proId = value
      const item = this.useProjectList.find((item) => item.proCode === value)
      if (item) {
        this.outForm.proName = item.proName
        const { proTypeName, proType, voltage, city, county, province } = item
        this.proTypeName = proTypeName
        this.outForm.proType = proType
        this.outForm.voltageLevel = voltage
        this.voltageLevel = voltage + 'kV'
        this.outForm.proProvince = province
        this.outForm.proCity = city
        this.outForm.proCounty = county
      }
    },

    // 选择省份
    onChangeProvince(value) {
      if (!value) {
        this.cityList = []
        return
      }
      this.cityList = this.provinceList.find((item) => item.label === value)?.children || []
    },

    // 选择城市
    onChangeCity(value) {
      if (!value) {
        this.countyList = []
        return
      }
      this.countyList = this.cityList.find((item) => item.label === value)?.children || []
    },

    // 确定变更
    onHandleSubmit() {
      this.submitForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f2f2f2;
}

.card {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;

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

::v-deep .el-table {
  margin-top: 15px;
}

::v-deep .el-form-item {
  margin-bottom: 18px;
}

.error-border {
  border-color: #f56c6c !important;
}

.error-text {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
  display: inline-block;
}

::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;
  }
}
</style>