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

<template>
  <ContentWrap v-loading="formLoading">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      v-loading="formLoading"
      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="设备" prop="deviceName">
              <el-select
                :disabled="formType === 'update'"
                v-model="formData.deviceName"
                :model-value="deviceLabel"
                placeholder="请选择设备"
                @click="openForm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择维修类型" 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="是否停机" prop="ifStop">
              <el-select v-model="formData.ifStop" placeholder="请选择是否停机" 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="维修开始时间" prop="maintainStartTime">
              <el-date-picker
                style="width: 150%"
                v-model="formData.maintainStartTime"
                type="datetime"
                value-format="x"
                placeholder="选择维修开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修结束时间" prop="maintainEndTime">
              <el-date-picker
                @change="endTimeBlur"
                style="width: 150%"
                v-model="formData.maintainEndTime"
                type="datetime"
                value-format="x"
                placeholder="选择维修结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修负责人" prop="maintainPerson">
              <el-select v-model="formData.maintainPerson" filterable clearable style="width: 100%">
                <el-option
                  v-for="item in deptUsers"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障时间" prop="failureTime">
              <el-date-picker
                style="width: 150%"
                v-model="formData.failureTime"
                type="datetime"
                value-format="x"
                placeholder="选择故障时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障影响" prop="failureInfluence">
              <el-input v-model="formData.failureInfluence" placeholder="请输入故障影响" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障系统" prop="failureSystem">
              <el-input v-model="formData.failureSystem" placeholder="请输入故障系统" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片" 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="供应商" prop="supplier" :rules="supplierRules">
              <el-select
                v-model="formData.supplier"
                placeholder="请输入供应商"
                :model-value="supplierLabel"
                @click="openCustomer('supplier')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="formData.type === 'out'">
            <el-form-item label="维修费用" prop="maintainFee" :rules="strictRules">
              <el-input-number
                v-model="formData.maintainFee"
                :min="0"
                :precision="2"
                :step="0.1"
                placeholder="请输入维修费用"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="formData.type === 'out'">
            <el-form-item label="委外相关附件" prop="outFile">
              <UploadFile v-model="formData.outFile" class="min-w-80px" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="故障描述" prop="description">
              <el-input type="textarea" v-model="formData.description" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修描述" prop="maintainDescription">
              <el-input type="textarea" v-model="formData.maintainDescription" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="解决办法" prop="solution">
              <el-input type="textarea" v-model="formData.solution" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
            </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" /> 选择维修项</el-button
          >
          <el-button @click="openMaintainItem" type="warning"
            ><Icon icon="ep:plus" class="mr-5px" /> 新增维修项</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="资产编码" align="center" prop="deviceCode" />
        <el-table-column label="设备名称" align="center" prop="deviceName" />
        <el-table-column label="维修项" align="center" prop="name" />

        <el-table-column label="操作" align="center" min-width="120px">
          <template #default="scope">
            <div style="display: flex; justify-content: center; align-items: center; width: 100%">
              <div>
                <Icon style="vertical-align: middle; color: #ea3434" icon="ep:zoom-out" />
                <el-button
                  style="vertical-align: middle"
                  link
                  type="danger"
                  @click="handleDelete(scope.row.code)"
                >
                  移除
                </el-button>
              </div>
              <div style="margin-left: 12px">
                <el-button link type="primary" @click="openMaterialForm(scope.row)">
                  选择物料
                </el-button>
              </div>
              <div style="margin-left: 12px">
                <el-button link type="primary" @click="handleViewNew(scope.row.bomNodeId)">
                  物料详情
                </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">保 存</el-button>
        <el-button @click="close">取 消</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)"
  />
  <Dialog title="维修项" 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="资产编码" prop="deviceCode">
        <el-input v-model="addFormData.deviceCode" disabled />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="addFormData.deviceName" disabled />
      </el-form-item>
      <el-form-item label="维修项" prop="name">
        <el-input v-model="addFormData.name" placeholder="请输入维修项" />
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item style="float: right">
        <el-button @click="handleConfirm" type="primary">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </el-form-item>
    </el-form>
  </Dialog>
</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 { useUserStore } from '@/store/modules/user'
import { ref } from 'vue'
import { IotMaintainMaterialVO } from '@/api/pms/maintain/material'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
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'

/** 维修工单 表单 */
defineOptions({ name: 'IotMaintainAe' })
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 addFormData = ref({
  name: '',
  deviceName: '',
  deviceCode: ''
})
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,
  processInstanceId: undefined,
  auditStatus: undefined,
  deptId: undefined,
  maintainPerson: undefined,
  maintainDescription: undefined,
  supplier: undefined,
  maintainFee: undefined,
  outFile: undefined
})
const strictRules = {
  required: true,
  message: '请输入维修费用'
}
const supplierRules = {
  required: true,
  message: '请选择供应商'
}
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 outFormRules = 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' }],
  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' }],
  maintainFee: [{ required: true, message: '维修费用不能为空', trigger: 'blur' }],
  supplier: [{ required: true, message: '供应商不能为空', trigger: 'blur' }]
})

const handleConfirm = () => {
  list.value.push(addFormData.value)
  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
}
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('这是一个对象：', row.bomNodeId)
  materialFormRef.value.open(formData.value.deptId, bomNodeId.value)
}

const maintainFormRef = ref()
const openMaintainForm = (type: string, id?: number) => {
  if (!formData.value.deviceId) {
    message.error('请选择设备')
    return
  }
  maintainFormRef.value.open(type, formData.value.deviceId)
}
const openMaintainItem = () => {
  addItemVisible.value = true
  addFormData.value.deviceName = formData.value.deviceName
  addFormData.value.deviceCode = formData.value.deviceCode
}
const endTimeBlur = () => {
  if (formData.value.maintainEndTime <= formData.value.maintainStartTime) {
    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
  // showDrawer.value.openDrawer()
  console.log('当前bom节点：', currentBomNodeId.value)
}
const materialList = ref<IotMainWorkOrderBomMaterialVO[]>([]) // 保养工单bom关联物料列表
const bomNodeId = ref() // 最新的bomNodeId
const selectChoose = (selectedMaterial) => {
  // console.log('接收到的数据:', JSON.stringify(formData))
  // list.value.push(formData)
  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)
    }
  })
  console.log('选择完成的数据：', JSON.stringify(selectedMaterial))
  console.log('添加到本地列表的数据：', materialList.value)
}
const maintainChoose = (formData) => {
  console.log('接收到的数据eee:', JSON.stringify(formData))
  formData.forEach((item) => {
    list.value.push(item)
  })
}
const handleChildSubmit = (formData) => {
  const modified = removeOnesFromKeys(formData)
  modified.forEach((item) => {
    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()
  // if (list.value.length > 0) {
  //   const nullList = list.value.filter((item) => item.depleteCount === null)
  //   debugger
  //   if (nullList.length > 0) {
  //     message.error('请填写消耗数量')
  //     return
  //   }
  // }
  // 提交请求
  formLoading.value = true
  try {
    formData.value.status = 'finished'
    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
    }
    debugger
    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()
}
onMounted(async () => {
  const deptId = useUserStore().getUser.deptId
  deptUsers.value = await UserApi.getDeptUsersByDeptId(deptId)
  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 { wsCache } = useCache()
    const userInfo = wsCache.get(CACHE_KEY.USER)
    formData.value.maintainPerson = userInfo.user.id
  }
})
const handleDelete = async (id: number) => {
  try {
    const index = list.value.findIndex((item) => item.code === id)
    debugger
    if (index !== -1) {
      // 通过 splice 删除元素
      list.value.splice(index, 1)
    }
  } catch {}
}
</script>
<style scoped>
.base-expandable-content {
  overflow: hidden; /* 隐藏溢出的内容 */
  transition: max-height 0.3s ease; /* 平滑过渡效果 */
}
</style>