台账添加检信息测

src/views/pms/qhse/index.vue

@@ -106,10 +106,10 @@
           </el-table-column>
           <el-table-column label="备注" align="center" prop="remark" />
 
-          <el-table-column label="检测信息" align="center">
+          <el-table-column label="检测信息" align="center" fixed="right">
             <template #default="scope">
               <div>
-                <el-button link type="primary" @click="handleEdit(scope.row)"> 查看 </el-button>
+                <el-button link type="primary" @click="handleView(scope.row.id)"> 查看 </el-button>
               </div>
             </template>
           </el-table-column>
@@ -290,10 +290,107 @@
       <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
     </template>
   </el-dialog>
+
+  <el-drawer
+    v-model="drawerVisible"
+    title="检测信息"
+    size="60%"
+    direction="rtl"
+    :before-close="closeDrawer"
+  >
+    <div v-loading="drawerLoading">
+      <el-table
+        v-loading="loading"
+        :data="measureDetectionData"
+        :stripe="true"
+        height="80vh"
+        :show-overflow-tooltip="true"
+      >
+        <el-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
+          <template #default="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="计量器具名称"
+          align="center"
+          prop="measureName"
+          min-width="160"
+          fixed="left"
+        />
+        <el-table-column label="证书编码" align="center" prop="measureCertNo" min-width="160" />
+        <el-table-column label="检测/校准日期" align="center" prop="detectDate" width="140">
+          <template #default="scope">
+            <span class="iot-md-date">{{ formatDateCorrectly(scope.row.detectDate) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="检测/校准机构" align="center" prop="detectOrg" min-width="160" />
+        <el-table-column
+          label="检测/校准标准"
+          align="center"
+          prop="detectStandard"
+          min-width="160"
+        />
+        <el-table-column label="检测/校准内容" align="center" prop="detectContent" min-width="220">
+          <template #default="scope">
+            <div class="detect-content" v-html="scope.row.detectContent"></div>
+          </template>
+        </el-table-column>
+        <el-table-column label="检测/校准有效期" align="center" prop="validityPeriod" width="140">
+          <template #default="scope">
+            <span class="iot-md-date">{{ formatDateCorrectly(scope.row.validityPeriod) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="校准金额" align="center" prop="detectAmount" width="120" />
+        <el-table-column label="部门名称" align="center" prop="deptName" min-width="140" />
+        <el-table-column label="附件" align="center" prop="file" min-width="90" fixed="right">
+          <template #default="scope">
+            <el-button v-if="scope.row.file" link type="primary" @click="viewFile(scope.row.file)">
+              查看
+            </el-button>
+
+            <span v-else class="text-[#999ca1]">暂无附件</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="iot-md-pagination absolute right-2 bottom-2">
+        <Pagination
+          :total="totalMsg"
+          v-model:page="queryParams2.pageNo"
+          v-model:limit="queryParams2.pageSize"
+          @pagination="getList2"
+        />
+      </div>
+    </div>
+  </el-drawer>
+
+  <el-dialog v-model="dialogFileView" title="附件" width="500">
+    <div
+      v-for="(file, index) in fileList"
+      :key="index"
+      class="flex items-center justify-between mt-5"
+    >
+      <span class="file-name-text">{{ extractFileName(file) }}</span>
+      <div>
+        <el-button link type="primary" @click="viewFileInfo(file)">
+          <Icon icon="ep:view" class="mr-2px" />查看</el-button
+        >
+        <el-button link type="primary" @click="handleDownload(file)">
+          <Icon icon="ep:download" class="mr-2px" />下载</el-button
+        >
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer mt-10">
+        <el-button type="primary" @click="dialogFileView = false"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { IotInstrumentApi } from '@/api/pms/qhse/index'
+import { IotInstrumentApi, IotMeasureDetectApi } from '@/api/pms/qhse/index'
 import DeptTree from '@/views/system/user/DeptTree2.vue'
 import { handleTree } from '@/utils/tree'
 import { defaultProps } from '@/utils/tree'
@@ -482,6 +579,61 @@ const handleEdit = (row) => {
   dialogVisible.value = true
 }
 
+// 关闭抽屉
+const closeDrawer = () => {
+  drawerVisible.value = false
+  measureDetectionData.value = []
+}
+
+// 抽屉相关响应式数据
+const drawerVisible = ref(false)
+const drawerLoading = ref(false)
+const measureDetectionData = ref([])
+let totalMsg = ref(0)
+let currentId = ref(null)
+let queryParams2 = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  measureId: null
+})
+
+const handleView = async (id: any) => {
+  drawerLoading.value = true
+  currentId.value = id
+  try {
+    const response = await IotMeasureDetectApi.getIotMeasureDetectPage({
+      pageNo: queryParams2.pageNo,
+      pageSize: queryParams2.pageSize,
+      measureId: id
+    })
+    measureDetectionData.value = response.list || []
+    totalMsg.value = response.total
+    drawerVisible.value = true
+  } catch (error) {
+    console.error('获取检测信息失败:', error)
+  } finally {
+    drawerLoading.value = false
+  }
+}
+
+const getList2 = async () => {
+  drawerLoading.value = true
+  try {
+    const response = await IotMeasureDetectApi.getIotMeasureDetectPage({
+      pageNo: queryParams2.pageNo,
+      pageSize: queryParams2.pageSize,
+      measureId: currentId.value
+    })
+    measureDetectionData.value = response.list || []
+    totalMsg.value = response.total
+    drawerVisible.value = true
+  } catch (error) {
+    console.error('获取检测信息失败:', error)
+  } finally {
+    drawerLoading.value = false
+  }
+}
+
 // 确保时间戳是毫秒级的
 const ensureMillisecondTimestamp = (timestamp) => {
   let time = Number(timestamp)
@@ -575,6 +727,52 @@ const submitForm = async () => {
   }
 }
 
+let dialogFileView = ref(false)
+let fileList = ref([])
+const viewFile = (file) => {
+  fileList.value = file.split(',')
+  dialogFileView.value = true
+  // window.open(file)
+}
+
+const viewFileInfo = (file) => {
+  window.open(
+    'http://doc.deepoil.cc:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(file))
+  )
+}
+
+const extractFileName = (url: string): string => {
+  try {
+    // 移除查询参数和哈希
+    const cleanUrl = url.split('?')[0].split('#')[0]
+    // 获取最后一个斜杠后的内容
+    const parts = cleanUrl.split('/')
+    const fileName = parts[parts.length - 1]
+    // URL 解码
+    return decodeURIComponent(fileName) || url
+  } catch {
+    // 如果解析失败，返回原始 URL
+    return url
+  }
+}
+
+const handleDownload = async (url) => {
+  try {
+    const response = await fetch(url)
+    const blob = await response.blob()
+    const downloadUrl = window.URL.createObjectURL(blob)
+
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = url.split('/').pop() // 自动获取文件名‌:ml-citation{ref="3" data="citationList"}
+    link.click()
+
+    URL.revokeObjectURL(downloadUrl)
+  } catch (error) {
+    console.error('下载失败:', error)
+  }
+}
+
 onMounted(async () => {
   getList()