文件资料管理

src/api/pms/iotinfo/index.ts

@@ -1,45 +1,46 @@
-import request from '@/config/axios'
-
-// 资料 VO
-export interface IotInfoVO {
-  id: number // 主键id
-  deviceId: number // 设备id
-  orgId: number // 部门id
-  filename: string // 文件名称
-  fileType: string // 文件类型
-  filePath: string // 文件路径
-  remark: string // 备注
-}
-
-// 资料 API
-export const IotInfoApi = {
-  // 查询资料分页
-  getIotInfoPage: async (params: any) => {
-    return await request.get({ url: `/rq/iot-info/page`, params })
-  },
-
-  // 查询资料详情
-  getIotInfo: async (id: number) => {
-    return await request.get({ url: `/rq/iot-info/get?id=` + id })
-  },
-
-  // 新增资料
-  createIotInfo: async (data: IotInfoVO) => {
-    return await request.post({ url: `/rq/iot-info/create`, data })
-  },
-
-  // 修改资料
-  updateIotInfo: async (data: IotInfoVO) => {
-    return await request.put({ url: `/rq/iot-info/update`, data })
-  },
-
-  // 删除资料
-  deleteIotInfo: async (id: number) => {
-    return await request.delete({ url: `/rq/iot-info/delete?id=` + id })
-  },
-
-  // 导出资料 Excel
-  exportIotInfo: async (params) => {
-    return await request.download({ url: `/rq/iot-info/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 资料 VO
+export interface IotInfoVO {
+  id: number // 主键id
+  deviceId: number // 设备id
+  orgId: number // 部门id
+  filename: string // 文件名称
+  fileType: string // 文件类型
+  filePath: string // 文件路径
+  remark: string // 备注
+  classId: number
+}
+
+// 资料 API
+export const IotInfoApi = {
+  // 查询资料分页
+  getIotInfoPage: async (params: any) => {
+    return await request.get({ url: `/rq/iot-info/page`, params })
+  },
+
+  // 查询资料详情
+  getIotInfo: async (id: number) => {
+    return await request.get({ url: `/rq/iot-info/get?id=` + id })
+  },
+
+  // 新增资料
+  createIotInfo: async (data: IotInfoVO) => {
+    return await request.post({ url: `/rq/iot-info/create`, data })
+  },
+
+  // 修改资料
+  updateIotInfo: async (data: IotInfoVO) => {
+    return await request.put({ url: `/rq/iot-info/update`, data })
+  },
+
+  // 删除资料
+  deleteIotInfo: async (id: number) => {
+    return await request.delete({ url: `/rq/iot-info/delete?id=` + id })
+  },
+
+  // 导出资料 Excel
+  exportIotInfo: async (params) => {
+    return await request.download({ url: `/rq/iot-info/export-excel`, params })
+  },
+}

src/router/modules/remaining.ts

@@ -104,7 +104,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/device/base'
         }
       },{
-        path: 'device/detail/:row',
+        path: 'device/detail/:id',
         component: () => import('@/views/pms/device/DeviceInfo.vue'),
         name: 'DeviceDetailInfo',
         meta: {

src/views/pms/device/DeviceInfo.vue

@@ -1,10 +1,10 @@
 <template>
   <ContentWrap>
-    <div style="display: flex; flex-direction: row; height: 15em; margin-top: 10px">
-      <div style="flex: 1; height: 10em; margin-left: 20px">
-        <img :src="formData.picUrl" style="width: 30em; height: 15em" />
+    <div style="display: flex; flex-direction: row; height: 12em; margin-top: 2px">
+      <div style="flex: 1; height: 12em; margin-left: 20px">
+        <img :src="formData.picUrl" style="width: 35em; height: 12em" />
       </div>
-      <div style="flex: 2.5; height: 15em">
+      <div style="flex: 2; height: 12em">
         <el-form ref="formRef" :disabled="false" :model="formData" label-width="120px">
           <el-row>
             <el-col :span="8">
@@ -144,7 +144,7 @@
           v-model:activeName="activeName"
         />
       </el-tab-pane>
-      <el-tab-pane label="联系人信息" name="contact">
+      <el-tab-pane label="设备BOM" name="bom">
         <ContactList
           ref="contactRef"
           v-model:activeName="activeName"
@@ -152,7 +152,7 @@
           :ifAlone="false"
         />
       </el-tab-pane>
-      <el-tab-pane label="核心产品" name="core">
+      <el-tab-pane label="维修记录" name="servicing">
         <CoreList
           ref="coreRef"
           v-model:activeName="activeName"
@@ -160,7 +160,15 @@
           :ifAlone="false"
         />
       </el-tab-pane>
-      <el-tab-pane label="联系记录" name="connect">
+      <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"
@@ -189,7 +197,7 @@ const { params } = useRoute() // 查询参数
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const activeName = ref('info') // Tag 激活的窗口
 const list = ref([])
-const deviceVo = params.row as unknown as IotDeviceVO
+const id = params.id
 const fileRef = ref() // 搜索的表单
 // SPU 表单数据
 const formData = ref({
@@ -215,10 +223,10 @@ const formData = ref({
 
 /** 获得详情 */
 const getDetail = async () => {
-  if (deviceVo.id) {
+  if (id) {
     formLoading.value = true
     try {
-      const res = (await IotDeviceApi.getIotDevice(deviceVo.id)) as IotDeviceVO
+      const res = (await IotDeviceApi.getIotDevice(id)) as IotDeviceVO
       formData.value = res
       if (res) {
         debugger

src/views/pms/device/DeviceUpload.vue

@@ -2,7 +2,7 @@
   <el-row :gutter="20">
     <el-col :span="5" :xs="24">
       <ContentWrap class="h-1/1">
-            <FileTree @node-click="handleFileNodeClick" :deviceId="deviceId" />
+            <FileTree @node-click="handleFileNodeClick" :deviceId="id" />
       </ContentWrap>
     </el-col>
     <el-col :span="19">
@@ -14,25 +14,15 @@
           :inline="true"
           label-width="68px"
         >
-          <el-form-item label="文件名称" prop="filename">
+          <el-form-item label="文件名称" prop="fileName">
             <el-input
-              v-model="queryParams.filename"
+              v-model="queryParams.fileName"
               placeholder="请输入文件名称"
               clearable
               @keyup.enter="handleQuery"
               class="!w-240px"
             />
           </el-form-item>
-          <el-form-item label="文件类型" prop="fileType">
-            <el-select
-              v-model="queryParams.fileType"
-              placeholder="请选择文件类型"
-              clearable
-              class="!w-240px"
-            >
-              <el-option label="请选择字典生成" value="" />
-            </el-select>
-          </el-form-item>
           <el-form-item>
             <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
             <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
@@ -43,9 +33,9 @@
         </el-form>
       </ContentWrap>
       <ContentWrap>
-        <el-table v-loading="loading" :data="list">
-          <el-table-column label="设备名称" align="center" prop="deviceId" />
-          <el-table-column label="资料分类" align="center" prop="classId" />
+        <el-table v-loading="formLoading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+<!--          <el-table-column label="设备名称" align="center" prop="deviceId" />-->
+<!--          <el-table-column label="资料分类" align="center" prop="classId" />-->
           <el-table-column label="文件名称" align="center" prop="filename" />
           <el-table-column label="文件类型" align="center" prop="fileType" />
           <el-table-column label="文件路径" align="center" prop="filePath" />
@@ -67,6 +57,35 @@
                 >
                   <Icon icon="ep:edit" />修改
                 </el-button>
+                <el-dropdown
+                  @command="(command) => handleCommand(command, scope.row)"
+                  v-hasPermi="[
+                    'system:user:delete',
+                    'system:user:update-password',
+                    'system:permission:assign-user-role'
+                  ]"
+                >
+                  <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        command="handleDelete"
+                      >
+                        <Icon icon="ep:delete" />删除
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="fileView"
+                      >
+                        <Icon icon="ep:view" />预览
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="fileDownload"
+                      >
+                        <Icon icon="ep:view" />下载
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </template>
           </el-table-column>
@@ -80,7 +99,7 @@
       </ContentWrap>
     </el-col>
   </el-row>
-  <IotInfoForm ref="formRef" @success="getList" />
+  <IotInfoForm ref="formRef" @success="getList" :deviceId="deviceId" :classId="queryParams.classId"/>
 </template>
 <script lang="ts" setup>
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
@@ -88,13 +107,17 @@ import FileTree from '@/views/pms/device/FileTree.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import IotInfoForm from "@/views/pms/iotinfo/IotInfoForm.vue";
 import * as IotInfoApi from '@/api/pms/iotinfo'
+import {SupplierVO} from "@/api/supplier/base";
+import {IotInfoVO} from "@/api/pms/iotinfo";
 defineOptions({ name: 'DeviceUpload' })
 const queryFormRef = ref() // 搜索的表单
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+const loading = ref(true) // 列表的加载中
 const { params } = useRoute() // 查询参数
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const activeName = ref('info') // Tag 激活的窗口
+const list = ref<IotDeviceVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
 const id = params.id as unknown as number
 const queryParams = reactive({
   pageNo: 1,
@@ -115,8 +138,60 @@ const formData = ref({
   remark: undefined,
   classId: undefined,
 })
+const handleCommand = (command: string, row: IotInfoVO) => {
+  switch (command) {
+    case 'handleDelete':
+      handleDelete(row.id)
+      break
+    case 'handleUpdate':
+      openForm('update', row.id)
+      break
+    case 'fileView':
+      handleFileView(row.filePath)
+      break
+    case 'fileDownload':
+      handleDownload(row.filePath)
+      break
+    default:
+      break
+  }
+}
+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);
+  }
+}
+const handleFileView = (url: string) => {
+  window.open('http://1.94.244.160:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
+}
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await IotInfoApi.IotInfoApi.deleteIotInfo(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
+  if (!queryParams.classId){
+    message.error("请选择左侧资料分类")
+    return
+  }
   formRef.value.open(type, id)
 }
 const deviceId = ref('')

src/views/pms/device/FileTree.vue

@@ -21,11 +21,14 @@
       style="height: 35em"
     >
       <template #default="{ node}">
-        <div class="custom-node">
-          <!-- 手动添加图标 -->
-<!--          <icon style="vertical-align: middle" icon="ep:search" />-->
-          <el-icon style="vertical-align: middle"><Folder /></el-icon>    <!-- 文件夹图标 -->
-          <span style="vertical-align: middle;margin-left: 3px">{{ node.data.name }}</span>
+        <div style="display: flex; justify-content: space-between;align-items: center;width: 100%">
+          <div>
+            <el-icon style="vertical-align: middle"><Folder /></el-icon>    <!-- 文件夹图标 -->
+            <span style="vertical-align: middle;margin-left: 3px">{{ node.data.name }}</span>
+          </div>
+          <div>
+            <icon style="vertical-align: middle" @click="handleRightClick" icon="ep:edit" />
+          </div>
         </div>
       </template>
     </el-tree>
@@ -196,6 +199,7 @@ const handleMenuClick = async (action) => {
 }
 /** 获得部门树 */
 const getTree = async () => {
+  console.log('3333333333333333333'+props.deviceId)
   const res = await FileClassifyApi.IotInfoClassifyApi.getSimpleInfotClassifyList(props.deviceId)
   fileList.value = []
   fileList.value.push(...handleTree(res))

src/views/pms/device/index.vue

@@ -96,7 +96,7 @@
       <el-table-column label="资产编码" align="center" prop="deviceCode" />
       <el-table-column label="设备名称" align="center" prop="deviceName" >
         <template #default="scope">
-          <el-link :underline="false" type="primary" @click="handleDetail(scope.row)">
+          <el-link :underline="false" type="primary" @click="handleDetail(scope.row.id)">
             {{ scope.row.deviceName }}
           </el-link>
         </template>
@@ -278,8 +278,8 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-const handleDetail = (row: number) => {
-  push({ name: 'DeviceDetailInfo', params:{row} })
+const handleDetail = (id: number) => {
+  push({ name: 'DeviceDetailInfo', params:{id} })
 }
 
 const handleUpload = (id: number) => {

src/views/pms/iotinfo/IotInfoForm.vue

@@ -64,7 +64,10 @@ const formRules = reactive({
   filePath: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
-
+const props = defineProps<{
+  deviceId: string
+  classId: string
+}>()
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -92,6 +95,8 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as IotInfoVO
+    data.classId = props.classId
+    data.deviceId = props.deviceId
     if (formType.value === 'create') {
       await IotInfoApi.createIotInfo(data)
       message.success(t('common.createSuccess'))