资料库

src/views/pms/device/DeviceUpload.vue

@@ -57,14 +57,14 @@
                 </el-button>
               </template>
             </el-table-column>
-            <el-table-column label="备注" align="center" prop="remark" />
-            <el-table-column
-              label="创建时间"
-              align="center"
-              prop="createTime"
-              :formatter="dateFormatter"
-              width="180px"
-            />
+<!--            <el-table-column label="备注" align="center" prop="remark" />-->
+<!--            <el-table-column-->
+<!--              label="创建时间"-->
+<!--              align="center"-->
+<!--              prop="createTime"-->
+<!--              :formatter="dateFormatter"-->
+<!--              width="180px"-->
+<!--            />-->
             <el-table-column label="操作" align="center" width="160">
               <template #default="scope">
                 <div class="flex items-center justify-center">
@@ -109,6 +109,7 @@
   </div>
   <IotInfoForm
     ref="formRef"
+    type="device"
     @success="getList"
     :deviceId="deviceId"
     :classId="queryParams.classId"

src/views/pms/iotinfo/IotInfoForm.vue

@@ -12,6 +12,7 @@
       <!--      </el-form-item>-->
       <el-form-item label="文件目录" prop="classId">
         <el-tree-select
+          :disabled="formType==='detail'"
           v-model="formData.classId"
           :data="fileList"
           :props="defaultProps"
@@ -23,13 +24,14 @@
       <el-form-item label="附件" prop="filePath" style="">
         <UploadFileAll style="vertical-align: middle"
           :is-show-tip="false"
+          :disabled="formType==='detail'"
           v-model="formData.filePath"
           :multiple="formType === 'create'"
           :limit="formType === 'create' ? 5 : 1"
         />
       </el-form-item>
       <el-form-item label="文件类型" prop="fileType">
-        <el-select v-model="formData.fileType" placeholder="请选择">
+        <el-select v-model="formData.fileType" placeholder="请选择" :disabled="formType==='detail'">
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.PMS_FILE_TYPE)"
             :key="dict.label"
@@ -39,11 +41,11 @@
         </el-select>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        <el-input v-model="formData.remark" :disabled="formType==='detail'" type="textarea" placeholder="请输入备注" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="submitForm" type="primary" v-if="formType!=='detail'" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -53,6 +55,7 @@ import { IotInfoApi, IotInfoVO } from '@/api/pms/iotinfo'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import {defaultProps, handleTree} from "@/utils/tree";
 import * as FileClassifyApi from "@/api/pms/info";
+import {IotTreeApi} from "@/api/system/tree";
 
 /** 资料 表单 */
 defineOptions({ name: 'IotInfoForm' })
@@ -68,6 +71,7 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   deviceId: undefined,
+  classId: undefined,
   deptId: undefined,
   filename: undefined,
   fileType: undefined,
@@ -76,21 +80,28 @@ const formData = ref({
   fileList: []
 })
 const formRules = reactive({
-  classId: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
+  // classId: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
   filePath: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const props = defineProps<{
   deviceId: string
   classId: string
+  type: string
 }>()
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
+  // if (props.type==='file') {
+  //   await getTreeInfo()
+  // } else {
+    await getTree();
+  // }
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
   // 修改时，设置数据
+  debugger
   if (id) {
     formLoading.value = true
     try {
@@ -98,12 +109,19 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  }else {
+    formData.value.fileType = 'file'
   }
   formData.value.classId = props.classId
-  await getTree();
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
+const getTreeInfo = async () => {
+  const res = await IotTreeApi.getSimpleTreeList()
+  fileList.value = []
+  fileList.value.push(...handleTree(res))
+  // firstLevelKeys.value = treeList.value.map(node => node.id);
+  // emits('success', treeList.value[0].id)
+}
 /** 获得分类树 */
 const getTree = async () => {
   const res = await FileClassifyApi.IotInfoClassifyApi.getSimpleInfotClassifyList(props.deviceId)
@@ -121,7 +139,7 @@ const submitForm = async () => {
     formData.value.fileList = formData.value.filePath
     formData.value.filePath = ''
     const data = formData.value as unknown as IotInfoVO
-
+    debugger
     if (formType.value === 'create') {
       data.deviceId = props.deviceId
       // data.filePath = data.filePath.join(',')

src/views/pms/iotinfo/IotInfoFormTree.vue

@@ -0,0 +1,176 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <!--      <el-form-item label="文件名称" prop="filename">-->
+      <!--        <el-input v-model="formData.filename" placeholder="请输入文件名称" />-->
+      <!--      </el-form-item>-->
+      <el-form-item label="文件目录" prop="classId">
+        <el-tree-select
+          :disabled="formType==='detail'"
+          v-model="formData.classId"
+          :data="fileList"
+          :props="defaultProps"
+          check-strictly
+          placeholder="请选择文件目录"
+          value-key="id"
+        />
+      </el-form-item>
+      <el-form-item label="附件" prop="filePath" style="">
+        <UploadFileAll style="vertical-align: middle"
+          :is-show-tip="false"
+          :disabled="formType==='detail'"
+          v-model="formData.filePath"
+          :multiple="formType === 'create'"
+          :limit="formType === 'create' ? 5 : 1"
+        />
+      </el-form-item>
+      <el-form-item label="文件类型" prop="fileType">
+        <el-select v-model="formData.fileType" placeholder="请选择" :disabled="formType==='detail'">
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PMS_FILE_TYPE)"
+            :key="dict.label"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" :disabled="formType==='detail'" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" v-if="formType!=='detail'" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { IotInfoApi, IotInfoVO } from '@/api/pms/iotinfo'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import {defaultProps, handleTree} from "@/utils/tree";
+import * as FileClassifyApi from "@/api/pms/info";
+import {IotTreeApi} from "@/api/system/tree";
+
+/** 资料 表单 */
+defineOptions({ name: 'IotInfoFormTree' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const fileList = ref<Tree[]>([]) // 树形结构
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  deviceId: undefined,
+  classId: undefined,
+  deptId: undefined,
+  filename: undefined,
+  fileType: undefined,
+  filePath: undefined,
+  remark: undefined,
+  fileList: []
+})
+const formRules = reactive({
+  // classId: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
+  filePath: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const props = defineProps<{
+  deviceId: string
+  classId: string
+  nodeId: string
+}>()
+const classIdd = ref('')
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  // if (props.type==='file') {
+    await getTreeInfo()
+  // } else {
+  //   await getTree();
+  // }
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  debugger
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value.classid =
+      formData.value = await IotInfoApi.getIotInfo(id)
+    } finally {
+      formLoading.value = false
+    }
+  }else {
+    formData.value.fileType = 'file'
+  }
+  classIdd.value = props.classId
+  formData.value.classId = props.nodeId
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const getTreeInfo = async () => {
+  const res = await IotTreeApi.getSimpleTreeList()
+  fileList.value = []
+  fileList.value.push(...handleTree(res))
+  // firstLevelKeys.value = treeList.value.map(node => node.id);
+  // emits('success', treeList.value[0].id)
+}
+/** 获得分类树 */
+const getTree = async () => {
+  const res = await FileClassifyApi.IotInfoClassifyApi.getSimpleInfotClassifyList(props.deviceId)
+  fileList.value = []
+  fileList.value.push(...handleTree(res))
+}
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    formData.value.fileList = formData.value.filePath
+    formData.value.filePath = ''
+    const data = formData.value as unknown as IotInfoVO
+    debugger
+    if (formType.value === 'create') {
+      data.deviceId = props.deviceId
+      // data.filePath = data.filePath.join(',')
+      await IotInfoApi.createIotInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await IotInfoApi.updateIotInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    deviceId: undefined,
+    deptId: undefined,
+    filename: undefined,
+    fileType: undefined,
+    filePath: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/system/tree/index.vue

@@ -52,20 +52,23 @@
                 <el-button link type="primary" @click="openWeb(scope.row.filePath)"> <Icon size="19" icon="ep:view"  /> </el-button>
               </template>
             </el-table-column>
-            <el-table-column label="备注" align="center" prop="remark" />
-            <el-table-column
-              label="创建时间"
-              align="center"
-              prop="createTime"
-              :formatter="dateFormatter"
-              width="180px"
-            />
+<!--            <el-table-column label="备注" align="center" prop="remark" />-->
+<!--            <el-table-column-->
+<!--              label="创建时间"-->
+<!--              align="center"-->
+<!--              prop="createTime"-->
+<!--              :formatter="dateFormatter"-->
+<!--              width="180px"-->
+<!--            />-->
             <el-table-column label="操作" align="center" width="160">
               <template #default="scope">
                 <div class="flex items-center justify-center">
                   <el-button type="primary" link @click="handleDownload( scope.row.filePath)">
                     <Icon icon="ep:download" />下载
                   </el-button>
+                  <el-button type="primary" link @click="handleView( scope.row)">
+                    <Icon icon="ep:view" />查看
+                  </el-button>
 <!--                  <el-dropdown-->
 <!--                    @command="(command) => handleCommand(command, scope.row)"-->
 <!--                    v-hasPermi="[-->
@@ -103,17 +106,18 @@
       </div>
   </el-row>
   </div>
-  <IotInfoForm
+  <IotInfoFormTree
     ref="formRef"
     @success="getList"
     :deviceId="deviceId"
+    :nodeId = "nodeId"
     :classId="clickNodeId"
   />
 </template>
 <script lang="ts" setup>
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
 import { dateFormatter } from '@/utils/formatTime'
-import IotInfoForm from '@/views/pms/iotinfo/IotInfoForm.vue'
+import IotInfoFormTree from '@/views/pms/iotinfo/IotInfoFormTree.vue'
 import * as IotInfoApi from '@/api/pms/iotinfo'
 import { IotInfoVO } from '@/api/pms/iotinfo'
 import { ref, onMounted, onUnmounted } from 'vue'
@@ -121,6 +125,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import PmsTree from '@/views/system/tree/PmsTree.vue'
 import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
 import {DICT_TYPE} from "@/utils/dict";
+import {IotInfoClassifyApi} from "@/api/pms/info";
 defineOptions({ name: 'IotTree' })
 
 const container = ref(null)
@@ -130,7 +135,9 @@ let isDragging = false
 const openWeb = (url) => {
   window.open('http://1.94.244.160:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
 }
-
+const handleView = (row) => {
+  openForm('detail', row.id)
+}
 const startDrag = (e) => {
   isDragging = true
   document.addEventListener('mousemove', onDrag)
@@ -250,9 +257,28 @@ const openForm = (type: string, id?: number) => {
 }
 const deviceId = ref('')
 const clickNodeId = ref('')
+const nodeId = ref('')
 const handleFileNodeClick = async (row) => {
+  debugger
   queryParams.classId = row.id
-  clickNodeId.value = row.originId
+  if (row.type==='device') {
+    const queryParam = {
+      deviceId: row.originId,
+      pageNo: 1,
+      pagesize: 10,
+    }
+    const data = await IotInfoClassifyApi.getIotInfoClassifyPage(queryParam)
+    if (data){
+      const target = data.filter((item)=> item.parentId===0)
+      clickNodeId.value = target[0].id
+    }
+  } else if (row.type === 'file'){
+    clickNodeId.value = row.originId
+  } else if (row.type==='dept') {
+    message.error("请选择设备及文件节点")
+    return
+  }
+  nodeId.value = row.id
   await getList()
 }
 /** 获得详情 */