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

<template>
  <!-- 装备入库页面 -->
  <div class="app-container">
    <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="auto" size="small">
      <el-row :gutter="20" type="flex">
        <el-col>
          <el-form-item label="变更状态为" prop="status">
            <el-radio-group v-model="outForm.status">
              <el-radio label="1">在库</el-radio>
              <el-radio label="5">维修</el-radio>
            </el-radio-group>

            <el-button size="mini" style="margin-left: 80px" type="primary" @click="onHandleSubmit">
              确定变更
            </el-button>
            <el-button size="mini" plain @click="resetForm">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col :span="6">
          <el-form-item label="使用项目：" prop="proCode">
            <el-select
              clearable
              style="width: 100%"
              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-col>
        <el-col :span="6">
          <el-form-item label="项目类型：" prop="proType">
            <el-input style="width: 100%" disabled v-model="proTypeName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电压等级：" prop="voltageLevel">
            <el-input style="width: 100%" disabled v-model="voltageLevel" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目所在省：" prop="proProvince">
            <el-input style="width: 100%" disabled v-model="outForm.proProvince" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" type="flex">
        <el-col :span="6">
          <el-form-item label="项目所在市：" prop="proCity">
            <el-input style="width: 100%" disabled v-model="outForm.proCity" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目所在区/县：" prop="proCounty">
            <el-input style="width: 100%" disabled v-model="outForm.proCounty" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址：" prop="proLocation">
            <el-input v-model="outForm.proLocation" placeholder="请输入详细地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 10px">
        <el-button size="mini" type="primary" @click="onHandleAddEquipment">添加变更装备</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="removeSelectedEquipment"
          :disabled="selectedEquipment.length === 0"
        >
          批量删除
        </el-button>
      </el-row>
    </el-form>

    <el-table :data="selectedEquipment" border>
      <el-table-column label="序号" type="index" align="center" width="55" />
      <el-table-column prop="devName" label="装备名称" align="center" />
      <el-table-column prop="devModel" label="规格型号" align="center" />
      <el-table-column prop="devCode" label="装备编码" align="center" />
      <el-table-column label="使用到期日期" align="center">
        <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 }"
          />
          <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="scope">
          <el-button type="danger" size="mini" @click="onHandleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <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"
      >
        <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="compName" label="公司名称" align="center" />
        <el-table-column width="160" show-overflow-tooltip prop="devName" label="装备名称" align="center" />
        <el-table-column width="160" show-overflow-tooltip prop="devModel" label="装备型号" align="center" />
        <el-table-column width="160" show-overflow-tooltip prop="devCode" label="装备编号" align="center" />
        <el-table-column align="center" show-overflow-tooltip prop="changeStatus" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" size="mini">在库</el-tag>
            <el-tag v-if="scope.row.status == 2 || scope.row.status == 3" size="mini">
              在用
            </el-tag>
            <el-tag v-if="scope.row.status == 5" size="mini"> 维修 </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="160" show-overflow-tooltip prop="unit" label="计数单位" align="center" />
        <el-table-column width="160" show-overflow-tooltip prop="compName" label="产权单位" align="center" />
        <el-table-column
          width="160"
          show-overflow-tooltip
          prop="buyPrice"
          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="useYears" label="使用年限" align="center" />
        <el-table-column width="160" show-overflow-tooltip prop="proName" label="所在项目" align="center" />
        <el-table-column
          width="160"
          show-overflow-tooltip
          prop="nextDate"
          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="scope">
                            <span v-if="scope.row.propertyVoList && scope.row.propertyVoList.length > 0">
                                <span v-if="item - 1 < scope.row.propertyVoList.length">
                                    {{ scope.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="scope">
                            <span v-if="scope.row.propertyVoList && scope.row.propertyVoList.length > 0">
                                <span v-if="item - 1 < scope.row.propertyVoList.length">
                                    {{ scope.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 {
  getSelectEquipmentListAPI,
  getMaxFeatureAPI,
  getUseProjectListAPI,
  getVoltageListAPI,
  addProjectOutAPI,
} from '@/api/EquipmentLedger/equ-out'

import { addProjectStoreAPI } from '@/api/EquipmentLedger/equ-store.js'
export default {
  data() {
    return {
      addEquipmentVisible: false,
      // 存储所有已选择的装备ID（用于跨页回显）
      selectedIds: new Set(),
      // 当前弹窗中选择的装备详情
      currentDialogSelected: [],

      // 入库表单
      outForm: {
        type: 1, // 入库
        status: '', // 变更状态
        proCode: '', // 使用项目id
        proName: '', // 使用项目名称
        proType: '', // 项目类型
        voltageLevel: '', // 电压等级
        proProvince: '', // 项目所在省
        proCity: '', // 项目所在市
        proCounty: '', // 项目所在区/县
        proLocation: '', // 详细地址
      },
      // 入库表单规则
      outFormRules: {
        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: [],

      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.provinceList = regionData
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },

    // 获取可选择的变更设备列表
    getSelectEquipmentList() {
      return new Promise((resolve) => {
        getSelectEquipmentListAPI(this.addEquipmentQueryParams).then((res) => {
          this.addEquipmentList = res.rows
          this.addEquipmentTotal = res.total
          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.devId,
              useTime: item.useTime,
            }
          })

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

          const res = await addProjectStoreAPI(params)

          if (res.code === 200) {
            this.$modal.msgSuccess('状态变更成功')
            this.$router.go(-1)
          } else {
            this.$modal.msgError(res.msg)
          }
        }
      })
    },

    // 添加装备
    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 + ' 个装备')
      } else {
        this.$modal.msgInfo('所选装备已全部添加')
      }

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

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