pms-iot-vue/src/views/pms/maintain/IotMaintain.vue

<template>
  <ContentWrap v-loading="formLoading">
    <ContentWrap>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        style="margin-right: 4em; margin-left: 0.5em; margin-top: 1em"
        label-width="130px"
      >
        <div class="base-expandable-content">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.device')" prop="deviceName">
                <el-select
                  :disabled="formType === 'update'"
                  v-model="formData.deviceName"
                  clearable
                  @clear="deviceClear"
                  :placeholder="t('iotMaintain.deviceHolder')"
                  @click="formType === 'update' ? undefined : openForm()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.repairType')" prop="type">
                <el-select v-model="formData.type" :placeholder="t('iotMaintain.repairTypeHolder')" clearable>
                  <el-option
                    v-for="dict in getStrDictOptions(DICT_TYPE.PMS_MAIN_TYPE)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.shutDown')" prop="ifStop">
                <el-select v-model="formData.ifStop" :placeholder="t('iotMaintain.shutDownHolder')" clearable>
                  <el-option
                    v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :label="t('iotMaintain.startTime')"
                prop="maintainStartTime"
                :rules="formData.type === 'in' ? startRule : []"
              >
                <el-date-picker
                  style="width: 150%"
                  v-model="formData.maintainStartTime"
                  type="datetime"
                  value-format="x"
                  :placeholder="t('iotMaintain.startTimeHolder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :label="t('iotMaintain.endTime')"
                prop="maintainEndTime"
                :rules="formData.type === 'in' ? endRule : []"
              >
                <el-date-picker
                  @change="endTimeBlur"
                  style="width: 150%"
                  v-model="formData.maintainEndTime"
                  type="datetime"
                  value-format="x"
                  :placeholder="t('iotMaintain.endTimeHolder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.failureTime')" prop="failureTime" :rules="formData.type==='out'?failureTimeRule:[]" >
                <el-date-picker
                  @change="failureTimeBlur"
                  :disabled="formData.maintainType==='故障上报'"
                  style="width: 150%"
                  v-model="formData.failureTime"
                  type="datetime"
                  value-format="x"
                  :placeholder="t('iotMaintain.failureTimeHolder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.failureImpact')" prop="failureInfluence">
                <el-input v-model="formData.failureInfluence" :placeholder="t('iotMaintain.failureImpactHolder')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.faultySystem')" prop="failureSystem">
                <el-input v-model="formData.failureSystem" :placeholder="t('iotMaintain.faultySystemHolder')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('iotMaintain.picture')" prop="pic">
                <UploadImg v-model="formData.pic" height="55px" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formData.type === 'out'">
              <el-form-item :label="t('iotMaintain.supplier')" prop="supplier" :rules="supplierRules">
                <el-select
                  v-model="formData.supplier"
                  :placeholder="t('iotMaintain.suppHolder')"
                  :model-value="supplierLabel"
                  @click="openCustomer('supplier')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" >
              <el-form-item :label="t('iotMaintain.repairCosts')" prop="maintainFee">
                <el-input-number
                  :disabled="formData.type==='in'"
                  v-model="formData.maintainFee"
                  :min="0"
                  :precision="2"
                  :step="0.1"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="formData.type === 'out'">
              <el-form-item :label="t('iotMaintain.attachment')" prop="outFile">
                <UploadFile v-model="formData.outFile" class="min-w-80px" multiple :limit="2" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item :label="t('iotMaintain.faultDescription')" prop="description">
                <el-input type="textarea" v-model="formData.description"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('iotMaintain.repairDescription')" :rules="formData.type === 'in' ? descriptionRule : []" prop="maintainDescription">
                <el-input type="textarea" v-model="formData.maintainDescription" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('iotMaintain.solution')" prop="solution">
                <el-input type="textarea" v-model="formData.solution" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="t('iotMaintain.remark')" prop="remark">
                <el-input v-model="formData.remark" type="textarea" :placeholder="t('iotMaintain.remarkHolder')" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item>
            <!--          <el-button @click="openMaterialForm" type="primary"-->
            <!--            ><Icon icon="ep:plus" class="mr-5px" /> 选择物料</el-button>-->
            <el-button @click="openMaintainForm" type="primary"
              ><Icon icon="ep:plus" class="mr-5px" />
              {{ t('iotMaintain.selectMaintenanceItem') }}</el-button
            >
            <el-button @click="openMaintainItem" type="warning"
              ><Icon icon="ep:plus" class="mr-5px" />
              {{ t('iotMaintain.addMaintenanceItems') }}</el-button
            >
            <!--          <el-button @click="handleViewNew" type="warning"-->
            <!--            ><Icon icon="ep:plus" class="mr-5px" /> 新增物料</el-button>-->
          </el-form-item>
        </el-form>
      </ContentWrap>

      <!-- 列表 -->
      <ContentWrap>
        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column :label="t('iotMaintain.deviceCode')" align="center" prop="deviceCode" />
          <el-table-column :label="t('iotMaintain.deviceName')" align="center" prop="deviceName" />
          <el-table-column :label="t('iotMaintain.repairItems')"  align="center" prop="name" />
          <el-table-column :label="t('iotMaintain.numberOfMaterials')" align="center" prop="materialCount" >
            <template #default="scope">
              <el-tag v-if="scope.row.materialCount" type="danger"> {{scope.row.materialCount}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="t('iotMaintain.operation')" align="center" min-width="120px">
            <template #default="scope">
              <div style="display: flex; justify-content: center; align-items: center; width: 100%">
                <div>
                  <el-button
                    style="vertical-align: middle"
                    link
                    type="danger"
                    @click="handleDelete(scope.row.bomNodeId)"
                  >
                    <Icon style="vertical-align: middle; color: #ea3434" icon="ep:zoom-out" />
                    {{ t('iotMaintain.remove') }}
                  </el-button>
                </div>
                <div style="margin-left: 12px">
                  <el-button link type="primary" @click="openMaterialForm(scope.row)">
                    {{ t('iotMaintain.selectMaterials') }}
                  </el-button>
                </div>
                <div style="margin-left: 12px">
                  <el-button link type="primary" @click="handleViewNew(scope.row.bomNodeId)">
                    {{ t('iotMaintain.viewMaterials') }}
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>

      <!-- 表单弹窗：添加/修改 -->
      <WorkOrderMaterial ref="materialFormRef" @choose="selectChoose" />
      <ChooseMaintain ref="maintainFormRef" @choose="maintainChoose" />
    </ContentWrap>
    <ContentWrap>
      <el-form>
        <el-form-item style="float: right">
          <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('iotMaintain.save') }}</el-button>
          <el-button @click="close">{{ t('iotMaintain.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <DeviceList ref="deviceFormRef" @choose="deviceChoose" />
    <CustomerList ref="customerFormRef" @choose="customerChoose" />
    <MaterialListDrawer
      :model-value="drawerVisible"
      @update:model-value="(val) => (drawerVisible = val)"
      :node-id="currentBomNodeId"
      :materials="materialList.filter((item) => item.bomNodeId === currentBomNodeId)"
      @delete = "materialDelete"
    />
    <Dialog :title="t('iotMaintain.repairItems')" v-model="addItemVisible" style="min-height: 300px">
      <el-form
        ref="addFormRef"
        :model="addFormData"
        :rules="addFormRules"
        label-position="right"
        label-width="68px"
      >
        <el-form-item :label="t('iotMaintain.BOMNodeID')" v-if="false" prop="deviceCode">
          <el-input v-model="addFormData.bomNodeId" disabled />
        </el-form-item>
        <el-form-item :label="t('iotMaintain.deviceCode')" prop="deviceCode">
          <el-input v-model="addFormData.deviceCode" disabled />
        </el-form-item>
        <el-form-item :label="t('iotMaintain.deviceName')" prop="deviceName">
          <el-input v-model="addFormData.deviceName" disabled />
        </el-form-item>
        <el-form-item :label="t('iotMaintain.repairItems')" prop="name">
          <el-input v-model="addFormData.name" :placeholder="t('iotMaintain.repairItemsHolder')" />
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item style="float: right">
          <el-button @click="handleConfirm" type="primary">{{ t('iotMaintain.ok') }}</el-button>
          <el-button @click="closeDialog">{{  t('iotMaintain.cancel')  }}</el-button>
        </el-form-item>
      </el-form>
    </Dialog>
  </ContentWrap>
</template>
<script setup lang="ts">
import { IotMaintainApi } from '@/api/pms/maintain'
import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
import DeviceList from '@/views/pms/failure/DeviceList.vue'
import * as UserApi from '@/api/system/user'
import { ref } from 'vue'
import { IotMaintainMaterialVO } from '@/api/pms/maintain/material'
import { useTagsViewStore } from '@/store/modules/tagsView'
import CustomerList from '@/views/pms/device/CustomerList.vue'
import WorkOrderMaterial from '@/views/pms/iotmainworkorder/WorkOrderMaterial.vue'
import { IotMainWorkOrderBomMaterialVO } from '@/api/pms/iotmainworkorderbommaterial'
import MaterialListDrawer from '@/views/pms/iotmainworkorder/SelectedMaterialDrawer.vue'
import ChooseMaintain from '@/views/pms/maintain/material/ChooseMaintain.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import dayjs from 'dayjs'
/** 维修工单 表单 */
defineOptions({ name: 'MaintainAdd' })
const addItemVisible = ref(false) // 弹窗的是否展示
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { delView } = useTagsViewStore() // 视图操作
const { currentRoute, push } = useRouter()
const deptUsers = ref<UserApi.UserVO[]>([]) // 用户列表
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const deviceLabel = ref('') // 表单的类型：create - 新增；update - 修改
const drawerVisible = ref<boolean>(false)
const showDrawer = ref()
const list = ref<IotMaintainMaterialVO[]>([]) // 列表的数据
const { params, name } = useRoute() // 查询参数
const id = params.id
const supplierLabel = ref('') // 表单的类型：create - 新增；update - 修改
const totalFee = ref(0)
const { wsCache } = useCache()
const addFormData = ref({
  name: '',
  deviceName: '',
  deviceCode: '',
  bomNodeId: '',
})
const formData = ref({
  id: undefined,
  failureCode: undefined,
  failureName: undefined,
  deviceId: undefined,
  status: undefined,
  type: undefined,
  ifStop: undefined,
  failureTime: undefined,
  failureInfluence: undefined,
  failureSystem: undefined,
  description: undefined,
  pic: undefined,
  solution: undefined,
  maintainStartTime: undefined,
  maintainEndTime: undefined,
  remark: undefined,
  deviceName: undefined,
  deviceCode: undefined,
  processInstanceId: undefined,
  auditStatus: undefined,
  deptId: undefined,
  maintainPerson: undefined,
  maintainDescription: undefined,
  supplier: undefined,
  maintainFee: undefined,
  outFile: undefined,
  maintainType: undefined,
})
const failureTimeRule = [{ required: true, message: '故障时间不能为空', trigger: 'blur' }]
const startRule = [{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]
const descriptionRule = [{required: true, message:'维修描述不能为空', trigger: 'blur' }]
const endRule = [{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]
const formRules = reactive({
  deviceName: [{ required: true, message: '设备不能为空', trigger: 'blur' }],
  failureCode: [{ required: true, message: '故障编码不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '维修类型不能为空', trigger: 'blur' }],
  ifStop: [{ required: true, message: '是否停机不能为空', trigger: 'blur' }],
  failureName: [{ required: true, message: '故障名称不能为空', trigger: 'blur' }],
  // failureTime: [{ required: true, message: '故障时间不能为空', trigger: 'blur' }],
  // maintainStartTime: [{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }],
  // maintainEndTime: [{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }],
  // maintainDescription: [{ required: true, message: '维修描述不能为空', trigger: 'blur' }],
  // maintainPerson: [{ required: true, message: '维修负责人不能为空', trigger: 'blur' }],
  deviceId: [{ required: true, message: '设备id不能为空', trigger: 'blur' }]
  // status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})

const addFormRules = reactive({
  name: [{ required: true, message: '维修项不能为空', trigger: 'blur' }]
})

const handleConfirm = () => {
  addFormData.value.bomNodeId = Math.floor(100000 + Math.random() * 900000)

  const index = list.value.findIndex((item) => item.name === addFormData.value.name)
  if (index !== -1) {
    message.warning("维修项重复")
    return
  }
  const addItem = {...addFormData.value}
  list.value.push(addItem)
  addItemVisible.value = false
}
const customerChoose = (row) => {
  formData.value.supplier = row.id
  supplierLabel.value = row.name
}

const customerFormRef = ref()
const openCustomer = (type) => {
  customerFormRef.value.open(type)
}
const formRef = ref() // 表单 Ref
const addFormRef = ref()
const deviceChoose = (row) => {
  formData.value.deviceId = row.id
  formData.value.deviceName = row.deviceName
  formData.value.deviceCode = row.deviceCode
  formData.value.deptId = row.deptId
  // deviceLabel.value = row.deviceName
  list.value = []
}
const deviceClear = () => {
  formData.value.deviceId = undefined
  formData.value.deviceName = undefined
  formData.value.deviceCode = undefined
  formData.value.deptId = undefined
  list.value = []
}
const deviceFormRef = ref()
const openForm = () => {
  deviceFormRef.value.open()
}
const materialFormRef = ref()
const currentBomNodeId = ref() // 当前选中的bom节点
const openMaterialForm = (row: any) => {
  bomNodeId.value = row.bomNodeId
  console.log('设备id：', formData.value.deviceId)
  row.deviceId = formData.value.deviceId
  const type = 'repair'
  materialFormRef.value.open(formData.value.deptId, bomNodeId.value, row, type)
}

const maintainFormRef = ref()
const openMaintainForm = (type: string, id?: number) => {
  if (!formData.value.deviceId) {
    message.error(t('iotMaintain.deviceHolder'))
    return
  }
  maintainFormRef.value.open(type, formData.value.deviceId)
}
const openMaintainItem = () => {
  if (!formData.value.deviceId) {
    message.error(t('iotMaintain.deviceHolder'))
    return
  }
  addItemVisible.value = true
  addFormData.value.deviceName = formData.value.deviceName
  addFormData.value.deviceCode = formData.value.deviceCode
  addFormData.value.name = ''
}
const endTimeBlur = () => {
  if (formData.value.maintainEndTime <= formData.value.maintainStartTime) {
    message.error('维修结束时间不得早于开始时间')
    formData.value.maintainEndTime = undefined
  }
  const now = dayjs();
  const target = dayjs(formData.value.maintainEndTime);
  if (target.isAfter(now)) {
    message.error('维修结束时间不得晚于当前时间')
    formData.value.maintainEndTime = undefined
  }
}

const failureTimeBlur = () => {
  if (formData.value.maintainStartTime < formData.value.failureTime) {
    message.error('维修开始时间不得早于故障时间')
    formData.value.maintainStartTime = undefined
  }
  if (formData.value.maintainEndTime < formData.value.failureTime) {
    message.error('维修结束时间不得早于故障时间')
    formData.value.maintainEndTime = undefined
  }
}
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'IotMaintain', params: {} })
}
const closeDialog = () => {
  addItemVisible.value = false
}

const handleViewNew = (nodeId) => {
  currentBomNodeId.value = nodeId
  drawerVisible.value = true
  console.log('当前bom节点：', currentBomNodeId.value)
}

const materialDelete = (row) =>{
  totalFee.value = 0
  const index = materialList.value.findIndex((item) => item.bomNodeId === bomNodeId.value&&item.materialCode===row.materialCode)
  if (index>-1) {
    materialList.value.splice(index,1)
  }
  list.value.forEach((item)=>{
    if (item.bomNodeId === row.bomNodeId){
      item.materials = materialList.value.filter((item)=>item.bomNodeId===row.bomNodeId)
        item.materialCount = item.materials.length;
      }
    })

  materialList.value.forEach((it) => {
    totalFee.value = it.unitPrice * it.quantity + totalFee.value
  })
  formData.value.maintainFee = totalFee.value
}

const materialList = ref<IotMainWorkOrderBomMaterialVO[]>([]) // 保养工单bom关联物料列表
const bomNodeId = ref() // 最新的bomNodeId

const selectChoose = (selectedMaterial) => {
  selectedMaterial.bomNodeId = bomNodeId.value
  // 关联 bomNodeId
  const processedMaterials = selectedMaterial.map((material) => ({
    ...material,
    bomNodeId: bomNodeId.value // 统一关联当前行的 bomNodeId
  }))
  // 避免重复添加
  processedMaterials.forEach((newMaterial) => {
    // 检查是否已存在相同 bomNodeId + materialCode 的条目
    const isExist = materialList.value.some(
      (item) => item.bomNodeId === bomNodeId.value && item.materialCode === newMaterial.materialCode
    )

    if (!isExist) {
      materialList.value.push(newMaterial)
    }
  })
  totalFee.value = 0;
  list.value.forEach((item) => {
    if (item.bomNodeId === bomNodeId.value) {
      item.materials = materialList.value.filter((item) => item.bomNodeId === bomNodeId.value)
      if (item.materials) {
        item.materialCount = item.materials.length;
      }
    }
  })
  materialList.value.forEach((it) => {
    totalFee.value = it.unitPrice * it.quantity + totalFee.value
  })
  formData.value.maintainFee = totalFee.value
  console.log('选择完成的数据：', JSON.stringify(selectedMaterial))
  console.log('添加到本地列表的数据：', materialList.value)
}
const maintainChoose = (formData) => {
  formData.forEach((item) => {
    const index = list.value.findIndex((li) => item.name === li.name)
    if (index==-1){
      list.value.push(item)
    }
  })
}

const removeOnesFromKeys = (obj: Record<string, any>) => {
  return Object.keys(obj).reduce(
    (acc, key) => {
      const newKey = key.replace(/1/g, '') // 替换所有 1
      acc[newKey] = obj[key]
      return acc
    },
    {} as Record<string, any>
  )
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    if (formData.value.type==='in') {
      formData.value.status = 'finished'
    } else {
      formData.value.status = 'tx'
    }

    // let files: any[]
    // files = formData.value.outFile
    // if (files) {
    //   formData.value.outFile = files
    //     .map((element) => {
    //       return element.path
    //     })
    //     .join(',')
    // }
    const data = {
      maintain: formData.value,
      maintainMaterials: list.value
    }
    if (formType.value === 'create') {
      await IotMaintainApi.createIotMaintain(data)
      message.success(t('common.createSuccess'))
      close()
    } else {
      await IotMaintainApi.updateIotMaintain(data)
      message.success(t('common.updateSuccess'))
      close()
    }
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    failureCode: undefined,
    failureName: undefined,
    deviceId: undefined,
    status: undefined,
    ifStop: undefined,
    failureTime: undefined,
    failureInfluence: undefined,
    failureSystem: undefined,
    description: undefined,
    pic: undefined,
    solution: undefined,
    maintainStartTime: undefined,
    maintainEndTime: undefined,
    remark: undefined,
    deviceName: undefined,
    processInstanceId: undefined,
    auditStatus: undefined,
    deptId: undefined
  }
  formRef.value?.resetFields()
}
const userId = ref('')
onMounted(async () => {
  const userInfo = wsCache.get(CACHE_KEY.USER)
  userId.value = userInfo.user.id;
  if (id) {
    formType.value = 'update'
    const iotMaintain = await IotMaintainApi.getIotMaintain(id)
    deviceLabel.value = iotMaintain.deviceName
    formData.value = iotMaintain
    formData.value.status = undefined
  } else {
    formData.value.type = 'in'
    formType.value = 'create'
  }
})
const handleDelete = async (id: number) => {
  try {
    const index = list.value.findIndex((item) => item.bomNodeId === id)
    if (index !== -1) {
      // 通过 splice 删除元素
      list.value.splice(index, 1)
      totalFee.value = 0
      list.value.forEach(item => {
        item.materials.forEach((it) => {
          totalFee.value = it.unitPrice * it.quantity + totalFee.value
        })
      })
      formData.value.maintainFee = totalFee.value
    }
  } catch {}
}
</script>
<style scoped>
.base-expandable-content {
  overflow: hidden; /* 隐藏溢出的内容 */
  transition: max-height 0.3s ease; /* 平滑过渡效果 */
}
</style>