pms-iot-vue/src/views/pms/device/DeviceInfo.vue

<template>
  <ContentWrap>
    <div style="display: flex; flex-direction: row; height: 12em; margin-top: 2px">
      <div style="flex: 1; height: 12em; margin-left: 20px">
        <el-image
          :key="index"
          :src="formData.picUrl"
          style="width: 35em; height: 12em"
          @click="imagePreview(formData.picUrl)"
        />
      </div>
      <div style="flex: 2; height: 12em; margin-top: 23px">
        <el-form ref="formRef" :disabled="false" :model="formData" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="资产编码:" prop="deviceCode"
                >{{ formData.deviceCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备名称:" prop="deviceName"
                >{{ formData.deviceName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌:" prop="brand">
                {{ formData.brandName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所在部门:" prop="deptId">
                {{ formData.deptName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产类别:" prop="assetClass">
                {{ formData.assetClassName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备状态:" prop="deviceStatus">
                {{ getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, formData.deviceStatus) }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="资产性质:" prop="assetProperty">
                {{ getDictLabel(DICT_TYPE.PMS_ASSET_PROPERTY, formData.assetProperty) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规格型号:" prop="model">
                {{formData.modelName?formData.modelName:'-'}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap v-loading="formLoading">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="info">
        <el-form style="margin-top: 5px; margin-left: 35px;margin-right: 35px;">
          <el-row style="border-bottom: 1px solid #dcdfe6;">
            <el-col :span="6">
              <el-form-item label="制造商:" prop="manufacturerId">
                {{ formData.zzName }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产日期:" prop="manDate">
                {{ formatDate(formData.manDate, 'YYYY-MM-DD') }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商" prop="supplierId">
                {{ formData.supplierName ? formData.supplierName : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="铭牌信息:" prop="nameplate">
                {{ formData.nameplate ? formData.nameplate : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="质保到期:" prop="expires">
                {{ formData.expires ? formatDate(formData.expires, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top:20px;border-bottom: 1px solid #dcdfe6;">
            <el-col :span="6">
              <el-form-item label="采购价格:" prop="plPrice">
                {{ formData.plPrice ? formData.plPrice : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购日期:" prop="plDate">
                {{ formData.plDate ? formatDate(formData.plDate, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="折旧年限:" prop="plYear">
                {{ formData.plYear ? formData.plYear : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="折旧开始日期:" prop="plStartDate">
                {{ formData.plStartDate ? formatDate(formData.plStartDate, 'YYYY-MM-DD') : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="已提折旧月数:" prop="plMonthed">
                {{ formData.plMonthed ? formData.plMonthed : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="已提折旧金额:" prop="plAmounted">
                {{ formData.plAmounted ? formData.plAmounted : '-' }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="剩余金额:" prop="remainAmount">
                {{ formData.remainAmount ? formData.remainAmount : '-' }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top:20px">
            <el-col v-for="field in list" :key="field.sort" :span="6">
              <el-form-item :label="field.name" :prop="field.identifier" >
                {{ field.value }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="资料库" name="file">
        <DeviceUpload
          ref="fileRef"
          v-model:activeName="activeName"
        />
      </el-tab-pane>
      <el-tab-pane label="设备BOM" name="bom">
        <BomInfo
          ref="bomRef"
          v-model:activeName="activeName"
        />
      </el-tab-pane>
      <el-tab-pane label="故障记录" name="failure">
        <FailureList
          ref="failureRef"
          v-model:activeName="activeName"
          :deviceId = "id"
        />
      </el-tab-pane>
      <el-tab-pane label="维修记录" name="maintain">
        <MaintainList
          ref="maintainRef"
          v-model:activeName="activeName"
          :deviceId = "id"
        />
      </el-tab-pane>
<!--      <el-tab-pane label="保养记录" name="maintenance">-->
<!--        <ConnectList-->
<!--          ref="connectRef"-->
<!--          v-model:activeName="activeName"-->
<!--          :propFormData="formData"-->
<!--          :ifAlone="false"-->
<!--        />-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="巡检记录" name="inspect">-->
<!--        <ConnectList-->
<!--          ref="connectRef"-->
<!--          v-model:activeName="activeName"-->
<!--          :propFormData="formData"-->
<!--          :ifAlone="false"-->
<!--        />-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </ContentWrap>
</template>
<script lang="ts" setup>
import ContactList from '@/views/supplier/contact/index.vue'
import CoreList from '@/views/supplier/coreproduct/index.vue'
import ConnectList from '@/views/supplier/connect/index.vue'
import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
import { formatDate } from '../../../utils/formatTime'
import DeviceUpload from "@/views/pms/device/DeviceUpload.vue";
import BomInfo from "@/views/pms/device/BomInfo.vue";
import FailureList from "@/views/pms/device/FailureList.vue";
import MaintainList from "@/views/pms/device/MaintainList.vue";
import {createImageViewer} from "@/components/ImageViewer";


defineOptions({ name: 'DeviceDetailInfo' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { params } = useRoute() // 查询参数
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const list = ref([])
const id = params.id
const fileRef = ref() // 搜索的表单
// SPU 表单数据
const formData = ref({
  id: undefined,
  code: undefined,
  name: undefined,
  classification: undefined,
  type: undefined,
  nature: undefined,
  creditCode: undefined,
  tin: undefined,
  corporation: undefined,
  incorporationDate: undefined,
  address: undefined,
  bizScope: undefined,
  registeredCapital: undefined,
  annualTurnove: undefined,
  size: undefined,
  status: undefined,
  remark: undefined,
  deptName: undefined
})
const pics = ref([])
/** 获得详情 */
const getDetail = async () => {
  if (id) {
    formLoading.value = true
    try {
      const res = (await IotDeviceApi.getIotDevice(id)) as IotDeviceVO
      formData.value = res
      pics.value.push(res.picUrl)
      if (res) {
        if (res.templateJson) {
          list.value = JSON.parse(res.templateJson)
        }
      }
    } finally {
      formLoading.value = false
    }
  }
}
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
/** 初始化 */
onMounted(async () => {
  await getDetail()
})
</script>
<style scoped></style>