fix: 样式优化

src/views/pms/qhse/iotmeasuredetect/IotMeasureDetectForm.vue

@@ -4,9 +4,16 @@
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="120px"
       v-loading="formLoading"
     >
+      <el-form-item label="计量器具" prop="measureId">
+        <el-input v-model="formData.measureName" disabled placeholder="选择计量器具">
+          <template #append>
+            <el-link @click="selectMeasure" :underline="false">选择计量器具</el-link>
+          </template>
+        </el-input>
+      </el-form-item>
       <el-form-item label="检测/校准日期" prop="detectDate">
         <el-date-picker
           v-model="formData.detectDate"
@@ -32,8 +39,8 @@
       <el-form-item label="校准金额" prop="detectAmount">
         <el-input v-model="formData.detectAmount" placeholder="请输入校准金额" />
       </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
-        <el-input v-model="formData.deptId" placeholder="请输入部门id" />
+      <el-form-item label="部门" prop="deptId">
+        <el-input v-model="formData.deptId" placeholder="请选择部门" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -41,9 +48,100 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+
+  <Dialog title="选择仪器" v-model="measureDialogVisible" width="60%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+        <el-form-item label="计量器具名称" prop="measureName">
+          <el-input
+            v-model="queryParams.measureName"
+            placeholder="请输入计量器具名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-200px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"
+            ><Icon icon="ep:search" class="mr-5px" /> {{ t('devicePerson.search') }}</el-button
+          >
+          <el-button @click="resetQuery"
+            ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('devicePerson.reset') }}</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+    <div class="pb-10">
+      <el-table
+        v-loading="loading"
+        :data="measureList"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        ref="measureTableRef"
+      >
+        <el-table-column width="50" align="center">
+          <template #default="scope">
+            <el-radio
+              :model-value="selectedMeasureId"
+              :label="scope.row.id"
+              @change="handleRadioChange(scope.row)"
+            >
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('monitor.serial')" width="70" align="center">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" align="center" prop="measureUnit" />
+        <el-table-column label="名称" align="center" prop="measureName" />
+        <el-table-column label="责任人" align="center" prop="dutyPerson" />
+        <el-table-column label="品牌" align="center" prop="brand" />
+        <el-table-column label="规格型号" align="center" prop="modelName" />
+        <el-table-column label="分类" align="center" prop="classify" />
+        <el-table-column label="采购日期" align="center" prop="buyDate">
+          <template #default="scope">
+            {{ formatDateCorrectly(scope.row.buyDate) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="有效期" align="center" prop="validity">
+          <template #default="scope">
+            {{ formatDateCorrectly(scope.row.validity) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上次检验日期" align="center" prop="lastTime" min-width="150">
+          <template #default="scope">
+            {{ formatDateCorrectly(scope.row.lastTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="价格" align="center" prop="measurePrice">
+          <template #default="scope">
+            {{ scope.row.measurePrice }}
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <template #footer>
+      <el-button @click="confirmSelectMeasure" type="primary">确 定</el-button>
+      <el-button @click="measureDialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 </template>
 <script setup lang="ts">
-import { IotMeasureDetectApi, IotMeasureDetectVO } from '@/api/pms/qhse/index'
+import { IotMeasureDetectApi, IotMeasureDetectVO, IotInstrumentApi } from '@/api/pms/qhse/index'
+import { formatDate } from '@/utils/formatTime'
 
 /** 计量器具-检测校准明细 表单 */
 defineOptions({ name: 'IotMeasureDetectForm' })
@@ -61,7 +159,9 @@ const formData = ref({
   detectContent: undefined,
   validityPeriod: undefined,
   detectAmount: undefined,
-  deptId: undefined
+  deptId: undefined,
+  measureName: '',
+  measureId: ''
 })
 const formRules = reactive({
   detectDate: [{ required: true, message: '检测/校准日期不能为空', trigger: 'blur' }],
@@ -70,6 +170,7 @@ const formRules = reactive({
   validityPeriod: [{ required: true, message: '检测/校准有效期不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const measureList = ref([])
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -82,6 +183,7 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       formData.value = await IotMeasureDetectApi.getIotMeasureDetect(id)
+      formData.value.detectDate = Number(formData.value.detectDate)
     } finally {
       formLoading.value = false
     }
@@ -113,6 +215,33 @@ const submitForm = async () => {
   }
 }
 
+const formatDateCorrectly = (timestamp) => {
+  if (!timestamp) return ''
+
+  // 确保处理各种可能的时间戳格式
+  let time = Number(timestamp)
+
+  // 处理不同时间戳格式
+  if (time < 10000000000) {
+    time = time * 1000
+  }
+
+  // 检查是否为有效日期
+  const date = new Date(time)
+  if (isNaN(date.getTime())) {
+    return ''
+  }
+
+  // 验证日期合理性（例如：不能是过于久远的日期）
+  const minValidYear = 1900
+  if (date.getFullYear() < minValidYear) {
+    console.warn('Invalid date detected:', timestamp)
+    return ''
+  }
+
+  return formatDate(time).substring(0, 10)
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -121,8 +250,68 @@ const resetForm = () => {
     detectContent: undefined,
     validityPeriod: undefined,
     detectAmount: undefined,
-    deptId: undefined
+    deptId: undefined,
+    measureName: '',
+    measureId: ''
   }
   formRef.value?.resetFields()
 }
+
+/** 获取计量器具列表 */
+let loading = ref(false)
+let total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  measureName: undefined,
+  deptId: undefined
+})
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+const resetQuery = () => {
+  queryParams.measureName = undefined
+  queryParams.deptId = undefined
+  handleQuery()
+}
+// 仪器选择相关
+const measureDialogVisible = ref(false)
+const selectedMeasureId = ref<number | undefined>(undefined) // 当前选中的仪器ID
+const selectedMeasure = ref<any>(null) // 当前选中的仪器对象
+// 处理单选框变化
+const handleRadioChange = (row: any) => {
+  selectedMeasureId.value = row.id
+  selectedMeasure.value = row
+}
+const selectMeasure = () => {
+  measureDialogVisible.value = true
+  getList()
+}
+
+// 确认选择仪器
+const confirmSelectMeasure = () => {
+  if (!selectedMeasure.value) {
+    message.warning('请先选择一个计量器具')
+    return
+  }
+
+  // 将选中的仪器信息填入表单
+  formData.value.measureId = selectedMeasure.value.id
+  formData.value.measureName = selectedMeasure.value.measureName
+
+  // 关闭选择仪器对话框
+  measureDialogVisible.value = false
+}
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await IotInstrumentApi.getInstrumentList(queryParams)
+    measureList.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
 </script>

src/views/pms/qhse/iotmeasuredetect/index.vue

@@ -10,7 +10,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-150px"
+          class="!w-200px"
         />
       </el-form-item>
       <el-form-item label="检测/校准机构" prop="detectOrg">
@@ -41,17 +41,6 @@
           class="!w-150px"
         />
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-150px"
-        />
-      </el-form-item>
 
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
@@ -80,25 +69,25 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="计量器具id" align="center" prop="measureId" />
-      <el-table-column label="检测/校准日期" align="center" prop="detectDate" />
+      <el-table-column label="计量器具名称" align="center" prop="measureName" />
+      <el-table-column label="检测/校准日期" align="center" prop="detectDate">
+        <template #default="scope">
+          <span>{{ formatDateCorrectly(scope.row.detectDate) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="检测/校准机构" align="center" prop="detectOrg" />
-      <el-table-column label="检测/校准内容" align="center" prop="detectContent" />
-      <el-table-column
-        label="检测/校准有效期"
-        align="center"
-        prop="validityPeriod"
-        :formatter="dateFormatter"
-        width="180px"
-      />
+      <el-table-column label="检测/校准内容" align="center" prop="detectContent">
+        <template #default="scope">
+          <div v-html="scope.row.detectContent"></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="180px">
+        <template #default="scope">
+          <span>{{ formatDateCorrectly(scope.row.validityPeriod) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="校准金额" align="center" prop="detectAmount" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
+
       <el-table-column label="部门名称" align="center" prop="deptName" />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
@@ -139,7 +128,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { IotMeasureDetectApi, IotMeasureDetectVO } from '@/api/pms/qhse/index'
 import IotMeasureDetectForm from './IotMeasureDetectForm.vue'
-
+import { formatDate } from '@/utils/formatTime'
 /** 计量器具-检测校准明细 列表 */
 defineOptions({ name: 'IotMeasureDetect' })
 
@@ -181,7 +170,32 @@ const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
+const formatDateCorrectly = (timestamp) => {
+  if (!timestamp) return ''
+
+  // 确保处理各种可能的时间戳格式
+  let time = Number(timestamp)
 
+  // 处理不同时间戳格式
+  if (time < 10000000000) {
+    time = time * 1000
+  }
+
+  // 检查是否为有效日期
+  const date = new Date(time)
+  if (isNaN(date.getTime())) {
+    return ''
+  }
+
+  // 验证日期合理性（例如：不能是过于久远的日期）
+  const minValidYear = 1900
+  if (date.getFullYear() < minValidYear) {
+    console.warn('Invalid date detected:', timestamp)
+    return ''
+  }
+
+  return formatDate(time).substring(0, 10)
+}
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()

src/views/pms/qhse/iotmeasurerecord/IotMeasureRecordForm.vue

@@ -198,7 +198,20 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await IotMeasureRecordApi.getIotMeasureRecord(id)
+      const recordData = await IotMeasureRecordApi.getIotMeasureRecord(id)
+      formData.value = recordData
+
+      // 特别处理 useDate 字段
+      if (recordData.useDate) {
+        // 确保 useDate 是正确的毫秒时间戳
+        const date = new Date(recordData.useDate)
+        if (!isNaN(date.getTime()) && date.getFullYear() >= 1900) {
+          formData.value.useDate = recordData.useDate
+        } else {
+          formData.value.useDate = undefined
+        }
+      }
+
       // 设置选中的仪器ID
       selectedMeasureId.value = formData.value.measureId
     } finally {
@@ -306,13 +319,27 @@ const confirmSelectMeasure = () => {
 const formatDateCorrectly = (timestamp) => {
   if (!timestamp) return ''
 
-  // 如果是秒级时间戳，转换为毫秒级
+  // 确保处理各种可能的时间戳格式
   let time = Number(timestamp)
+
+  // 处理不同时间戳格式
   if (time < 10000000000) {
-    // 小于这个数通常表示秒级时间戳
     time = time * 1000
   }
 
+  // 检查是否为有效日期
+  const date = new Date(time)
+  if (isNaN(date.getTime())) {
+    return ''
+  }
+
+  // 验证日期合理性（例如：不能是过于久远的日期）
+  const minValidYear = 1900
+  if (date.getFullYear() < minValidYear) {
+    console.warn('Invalid date detected:', timestamp)
+    return ''
+  }
+
   return formatDate(time).substring(0, 10)
 }