pms-iot-vue/src/views/pms/maintain/IotMaintainDetail.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="6">
            <el-form-item label="设备" prop="deviceName">
              <el-select
                disabled
                v-model="formData.deviceName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select v-model="formData.status" clearable disabled>
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.PMS_MAIN_STATUS)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修类型" prop="type">
              <el-select disabled v-model="formData.type" 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="6">
            <el-form-item label="是否停机" prop="ifStop">
              <el-select v-model="formData.ifStop" clearable disabled>
                <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="6">
            <el-form-item label="故障时间" prop="failureTime">
              <el-date-picker
                disabled
                style="width: 150%"
                v-model="formData.failureTime"
                type="date"
                value-format="x"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修开始时间" prop="maintainStartTime">
              <el-date-picker
                disabled
                style="width: 150%"
                v-model="formData.maintainStartTime"
                type="date"
                value-format="x"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修负责人" prop="maintainPerson">
              <el-select v-model="formData.maintainPerson" filterable clearable style="width: 100%" disabled>
                <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="6">
            <el-form-item label="故障影响" prop="failureInfluence">
              <el-input v-model="formData.failureInfluence"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="故障系统" prop="failureSystem">
              <el-input v-model="formData.failureSystem"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修结束时间" prop="maintainEndTime">
              <el-date-picker
                disabled
                style="width: 150%"
                v-model="formData.maintainEndTime"
                type="date"
                value-format="x"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="图片" prop="pic" >
              <UploadImg v-model="formData.pic" :disabled="true" height="55px" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="故障描述" prop="description">
              <el-input type="textarea" v-model="formData.description" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修描述" prop="maintainDescription">
              <el-input type="textarea" v-model="formData.maintainDescription"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="解决办法" prop="solution">
              <el-input type="textarea" v-model="formData.solution" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea"  disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="物料编码" align="center" prop="code" />
        <el-table-column label="物料名称" align="center" prop="name" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="单价" align="center" prop="price" />
        <el-table-column label="消耗数量" align="center" prop="depleteCount">
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.depleteCount" disabled/>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column label="总库存数量" align="center" prop="totalCount" />
        <el-table-column label="备注" align="center" prop="remark">
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.remark" />-->
<!--          </template>-->
        </el-table-column>
        <el-table-column label="物料来源" align="center" prop="sourceType" />
      </el-table>
    </ContentWrap>
  </ContentWrap>
  <ContentWrap>
    <el-form>
      <el-form-item style="float: right">
        <el-button type="info" @click="close">取 消</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script setup lang="ts">
import {DICT_TYPE, getBoolDictOptions, getStrDictOptions} from '@/utils/dict'
import * as UserApi from '@/api/system/user'
import { ref } from 'vue'
import {IotMaintainMaterialApi, IotMaintainMaterialVO} from '@/api/pms/maintain/material'
import { useTagsViewStore } from '@/store/modules/tagsView'
import {IotMaintainApi} from "@/api/pms/maintain";

/** 维修工单 表单 */
defineOptions({ name: 'IotMaintain' })

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 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 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
})
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' }],
  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 formRef = ref() // 表单 Ref

const close = () => {
  delView(unref(currentRoute))
  push({
    name: 'IotMaintain',
    query: {
      date: new Date().getTime()
    }
  })
}
/** 提交表单 */
onMounted(async () => {
  await IotMaintainApi.getIotMaintain(id).then((res) => {
    formData.value = res
    list.value = res.maintainMaterialDOS
    UserApi.getUser(formData.value.maintainPerson).then((res) => {
      formData.value.maintainPerson = res.nickname;
    })
    IotMaintainMaterialApi.getMaterialsByDeviceId()
  })
})
</script>