qhse调整

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

@@ -117,6 +117,15 @@
             class="!w-200px" />
         </el-form-item>
 
+        <el-form-item label="序列号" prop="serialNo">
+          <el-input
+            v-model="queryParams.serialNo"
+            placeholder="请输入序列号"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-200px" />
+        </el-form-item>
+
         <el-form-item label="计量器具编码" prop="measureName">
           <el-input
             v-model="queryParams.measureCode"
@@ -167,6 +176,7 @@
           </template>
         </zm-table-column>
         <zm-table-column label="计量器具编码" align="center" prop="measureCode" />
+        <zm-table-column label="序列号" align="center" prop="serialNo" />
         <zm-table-column label="计量器具名称" align="center" prop="measureName" />
         <zm-table-column label="计量单位" align="center" prop="measureUnit" />
 
@@ -380,7 +390,8 @@ const queryParams = reactive({
   measureName: undefined,
   measureCode: undefined,
   deptId: undefined,
-  dutyPerson: undefined
+  dutyPerson: undefined,
+  serialNo: undefined
 })
 
 const handleQuery = () => {

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

@@ -89,6 +89,7 @@
                 </template>
               </zm-table-column>
               <zm-table-column label="计量器具编码" align="center" prop="measureCode" />
+              <zm-table-column label="序列号" align="center" prop="serialNo" />
               <zm-table-column label="计量器具名称" align="center" prop="measureName" />
               <zm-table-column label="证书编码" align="center" prop="measureCertNo" />
               <zm-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
@@ -98,9 +99,19 @@
               </zm-table-column>
               <zm-table-column label="检测/校准机构" align="center" prop="detectOrg" />
               <zm-table-column label="检测/校准标准" align="center" prop="detectStandard" />
-              <zm-table-column label="检测/校准内容" align="center" prop="detectContent">
+              <zm-table-column
+                label="检测/校准内容"
+                align="center"
+                prop="detectContent"
+                width="140">
                 <template #default="scope">
-                  <div class="detect-content" v-html="scope.row.detectContent"></div>
+                  <el-button
+                    v-if="getDetectContentText(scope.row.detectContent) !== '-'"
+                    link
+                    type="primary"
+                    @click="openDetectContentDialog(scope.row.detectContent)">
+                    查看详情
+                  </el-button>
                 </template>
               </zm-table-column>
               <zm-table-column
@@ -175,6 +186,14 @@
   </Dialog>
 
   <!-- 表单弹窗：添加/修改 -->
+  <Dialog v-model="detectContentDialogVisible" title="检测/校准内容" width="720">
+    <div
+      v-if="detectContentDialogHtml"
+      class="detect-content-rich"
+      v-html="detectContentDialogHtml"></div>
+    <el-empty v-else description="暂无内容" />
+  </Dialog>
+
   <IotMeasureDetectForm ref="formRef" @success="getList" />
 </template>
 
@@ -269,6 +288,33 @@ const formatDateCorrectly = (timestamp) => {
   return formatDate(time).substring(0, 10)
 }
 /** 重置按钮操作 */
+const stripHtml = (html?: string) => {
+  if (!html) return ''
+  if (typeof window === 'undefined') {
+    return html
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+  }
+
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return (div.textContent || div.innerText || '')
+    .replace(/\u00a0/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const getDetectContentText = (html?: string) => {
+  return stripHtml(html) || '-'
+}
+
+const getDetectContentSummary = (html?: string, maxLength = 36) => {
+  const text = getDetectContentText(html)
+  if (text === '-' || text.length <= maxLength) return text
+  return `${text.slice(0, maxLength)}...`
+}
+
 const resetQuery = () => {
   queryFormRef.value.resetFields()
   handleQuery()
@@ -310,6 +356,14 @@ const handleExport = async () => {
 
 let dialogFileView = ref(false)
 let fileList = ref([])
+const detectContentDialogVisible = ref(false)
+const detectContentDialogHtml = ref('')
+
+const openDetectContentDialog = (html?: string) => {
+  detectContentDialogHtml.value = html || ''
+  detectContentDialogVisible.value = true
+}
+
 const viewFile = (file) => {
   fileList.value = file.split(',')
   dialogFileView.value = true
@@ -368,4 +422,61 @@ onMounted(() => {
   margin-right: 12px;
   color: var(--el-text-color-primary);
 }
+
+.detect-content-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--el-text-color-primary);
+  cursor: default;
+}
+
+.detect-content-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.detect-content-rich {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 4px 2px;
+  line-height: 1.75;
+  color: var(--el-text-color-primary);
+  word-break: break-word;
+}
+
+.detect-content-rich :deep(p) {
+  margin: 0 0 12px;
+}
+
+.detect-content-rich :deep(ul),
+.detect-content-rich :deep(ol) {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+
+.detect-content-rich :deep(li) {
+  margin-bottom: 6px;
+}
+
+.detect-content-rich :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.detect-content-rich :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.detect-content-rich :deep(td),
+.detect-content-rich :deep(th) {
+  border: 1px solid var(--el-border-color-lighter);
+  padding: 8px;
+}
 </style>