资料库

src/router/modules/remaining.ts

@@ -115,6 +115,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '设备台账详情',
           activeMenu: '/device/info'
         }
+      },{
+        path: 'device/upload/:id',
+        component: () => import('@/views/pms/device/DeviceUpload.vue'),
+        name: 'DeviceUpload',
+        meta: {
+          noCache: false,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:info',
+          title: '设备台账资料上传',
+          activeMenu: '/device/upload'
+        }
       },
     ]
   },

src/views/pms/device/DeviceInfo.vue

@@ -1,40 +1,37 @@
 <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: 15em; margin-top: 10px">
+      <div style="flex: 1; height: 10em; margin-left: 20px">
+        <img :src="formData.picUrl" style="width: 30em; height: 15em" />
       </div>
-      <div style="flex: 2.5;height: 15em">
-        <el-form
-          ref="formRef"
-          :disabled="false"
-          :model="formData"
-          label-width="120px"
-        >
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="资产编码:" prop="deviceCode">{{formData.deviceCode}}
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="设备名称:" prop="deviceName">{{formData.deviceName}}
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="品牌:" prop="brand">
-              {{formData.brandName}}
-            </el-form-item>
-          </el-col>
+      <div style="flex: 2.5; height: 15em">
+        <el-form ref="formRef" :disabled="false" :model="formData" label-width="120px">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="资产编码:" prop="deviceCode"
+                >{{ formData.deviceCode }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="设备名称:" prop="deviceName"
+                >{{ formData.deviceName }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="品牌:" prop="brand">
+                {{ formData.brandName }}
+              </el-form-item>
+            </el-col>
           </el-row>
           <el-row>
             <el-col :span="8">
               <el-form-item label="所在部门:" prop="orgId">
-                {{formData.deptName}}
+                {{ formData.deptName }}
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="资产类别:" prop="assetClass">
-                {{formData.assetClassName}}
+                {{ formData.assetClassName }}
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -44,78 +41,78 @@
             </el-col>
           </el-row>
           <el-row>
-          <el-col :span="8">
-            <el-form-item label="资产性质:" prop="assetProperty">
-              {{getDictLabel(DICT_TYPE.PMS_ASSET_PROPERTY, formData.assetProperty)}}
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="规格型号:" prop="model">
-              <el-select
-                v-model="formData.model"
-                :model-value="modelLabel"
-                placeholder="请输入规格型号"
-                @click="openModelForm"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
+            <el-col :span="8">
+              <el-form-item label="资产性质:" prop="assetProperty">
+                {{ getDictLabel(DICT_TYPE.PMS_ASSET_PROPERTY, formData.assetProperty) }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="规格型号:" prop="model">
+                <el-select
+                  v-model="formData.model"
+                  :model-value="modelLabel"
+                  placeholder="请输入规格型号"
+                  @click="openModelForm"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </div>
     </div>
   </ContentWrap>
   <ContentWrap v-loading="formLoading">
     <el-tabs v-model="activeName">
       <el-tab-pane label="基础信息" name="info">
-        <el-form style="margin-top: 5px;margin-left: 15px">
+        <el-form style="margin-top: 5px; margin-left: 15px">
           <el-row>
             <el-col :span="6">
               <el-form-item label="制造商:" prop="manufacturerId">
-                {{formData.zzName}}
+                {{ formData.zzName }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="生产日期:" prop="manDate">
-                {{formatDate(formData.manDate,'YYYY-MM-DD')}}
+                {{ formatDate(formData.manDate, 'YYYY-MM-DD') }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="供应商" prop="supplierId">
-                {{formData.supplierName?formData.supplierName:'-'}}
+                {{ formData.supplierName ? formData.supplierName : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="铭牌信息:" prop="nameplate">
-                {{formData.nameplate?formData.nameplate:'-'}}
+                {{ formData.nameplate ? formData.nameplate : '-' }}
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="6">
               <el-form-item label="质保到期:" prop="expires">
-                {{formData.expires?formatDate(formData.expires, 'YYYY-MM-DD'):'-'}}
+                {{ formData.expires ? formatDate(formData.expires, 'YYYY-MM-DD') : '-' }}
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="6">
               <el-form-item label="采购价格:" prop="plPrice">
-                {{formData.plPrice?formData.plPrice:'-'}}
+                {{ formData.plPrice ? formData.plPrice : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="采购日期:" prop="plDate">
-                {{formData.plDate?formatDate(formData.plDate, 'YYYY-MM-DD'):'-'}}
+                {{ formData.plDate ? formatDate(formData.plDate, 'YYYY-MM-DD') : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="折旧年限" prop="plYear">
-                {{formData.plYear?formData.plYear:'-'}}
+                {{ formData.plYear ? formData.plYear : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="折旧开始日期" prop="plStartDate">
-                {{formData.plStartDate?formatDate(formData.plStartDate,'YYYY-MM-DD'):'-'}}
+                {{ formData.plStartDate ? formatDate(formData.plStartDate, 'YYYY-MM-DD') : '-' }}
               </el-form-item>
             </el-col>
           </el-row>
@@ -123,30 +120,30 @@
           <el-row>
             <el-col :span="6">
               <el-form-item label="已提折旧月数" prop="plMonthed">
-                {{formData.plMonthed?formData.plMonthed:'-'}}
+                {{ formData.plMonthed ? formData.plMonthed : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="已提折旧金额" prop="plAmounted">
-                {{formData.plAmounted?formData.plAmounted:'-'}}
+                {{ formData.plAmounted ? formData.plAmounted : '-' }}
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="剩余金额" prop="remainAmount">
-                {{formData.remainAmount?formData.remainAmount:'-'}}
+                {{ formData.remainAmount ? formData.remainAmount : '-' }}
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col v-for="field in list" :key="field.id" :span="6">
               <el-form-item :label="field.label" :prop="field.model" :rules="field.rules">
-                {{formData[field.prop]}}
+                {{ formData[field.prop] }}
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </el-tab-pane>
-      <el-tab-pane label="证件信息" name="cert">
+      <el-tab-pane label="资料库" name="cert">
         <CertList
           ref="certRef"
           v-model:activeName="activeName"
@@ -179,26 +176,16 @@
         />
       </el-tab-pane>
     </el-tabs>
-    <!--    <el-form>-->
-    <!--      <el-form-item style="float: right">-->
-    <!--        <el-button v-if="!isDetail" :loading="formLoading" type="primary" @click="submitForm">-->
-    <!--          保存-->
-    <!--        </el-button>-->
-    <!--        <el-button @click="close">返回</el-button>-->
-    <!--      </el-form-item>-->
-    <!--    </el-form>-->
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import SupplierInfoForm from '@/views/supplier/base/form/SupplierInfoForm.vue'
 import CertList from '@/views/supplier/certificate/index.vue'
 import ContactList from '@/views/supplier/contact/index.vue'
 import CoreList from '@/views/supplier/coreproduct/index.vue'
 import ConnectList from '@/views/supplier/connect/index.vue'
-import {IotDeviceVO, IotDeviceApi} from "@/api/pms/device";
-import {defaultProps} from "@/utils/tree";
-import {DICT_TYPE, getDictLabel, getStrDictOptions} from "@/utils/dict";
-import {formatDate} from "../../../utils/formatTime";
+import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { formatDate } from '../../../utils/formatTime'
 
 defineOptions({ name: 'DeviceDetailInfo' })
 
@@ -237,22 +224,6 @@ const getDetail = async () => {
     formLoading.value = true
     try {
       const res = (await IotDeviceApi.getIotDevice(id)) as IotDeviceVO
-      // res.skus?.forEach((item) => {
-      //   if (isDetail.value) {
-      //     item.price = floatToFixed2(item.price)
-      //     item.marketPrice = floatToFixed2(item.marketPrice)
-      //     item.costPrice = floatToFixed2(item.costPrice)
-      //     item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
-      //     item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
-      //   } else {
-      //     // 回显价格分转元
-      //     item.price = formatToFraction(item.price)
-      //     item.marketPrice = formatToFraction(item.marketPrice)
-      //     item.costPrice = formatToFraction(item.costPrice)
-      //     item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice)
-      //     item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice)
-      //   }
-      // })
       formData.value = res
     } finally {
       formLoading.value = false
@@ -270,6 +241,4 @@ onMounted(async () => {
   await getDetail()
 })
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/pms/device/DeviceUpload.vue

@@ -0,0 +1,132 @@
+<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>
+      <div style="flex: 2.5; height: 15em">
+        <el-form ref="formRef" :disabled="false" :model="formData" label-width="120px">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="资产编码:" prop="deviceCode"
+                >{{ formData.deviceCode }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="设备名称:" prop="deviceName"
+                >{{ formData.deviceName }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="品牌:" prop="brand">
+                {{ formData.brandName }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="所在部门:" prop="orgId">
+                {{ formData.deptName }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="资产类别:" prop="assetClass">
+                {{ formData.assetClassName }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="设备状态:" prop="deviceStatus">
+                {{ getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, formData.deviceStatus) }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="资产性质:" prop="assetProperty">
+                {{ getDictLabel(DICT_TYPE.PMS_ASSET_PROPERTY, formData.assetProperty) }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="规格型号:" prop="model">
+                <el-select
+                  v-model="formData.model"
+                  :model-value="modelLabel"
+                  placeholder="请输入规格型号"
+                  @click="openModelForm"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+  </ContentWrap>
+
+  <ContentWrap v-loading="formLoading">
+    <el-row>
+      <el-col :span="4">
+        <FileTree @node-click="handleDeptNodeClick" />
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import FileTree from '@/views/pms/device/FileTree.vue'
+
+defineOptions({ name: 'DeviceDetailInfo' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const { params } = useRoute() // 查询参数
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('info') // Tag 激活的窗口
+const infoRef = ref() // 商品信息 Ref
+const id = params.id as unknown as number
+// SPU 表单数据
+const formData = ref({
+  id: undefined,
+  code: undefined,
+  name: undefined,
+  classification: undefined,
+  type: undefined,
+  nature: undefined,
+  creditCode: undefined,
+  tin: undefined,
+  corporation: undefined,
+  incorporationDate: undefined,
+  address: undefined,
+  bizScope: undefined,
+  registeredCapital: undefined,
+  annualTurnove: undefined,
+  size: undefined,
+  status: undefined,
+  remark: undefined,
+  deptName: undefined
+})
+
+/** 获得详情 */
+const getDetail = async () => {
+  if (id) {
+    formLoading.value = true
+    try {
+      const res = (await IotDeviceApi.getIotDevice(id)) as IotDeviceVO
+      formData.value = res
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+/** 关闭按钮 */
+// const close = () => {
+//   delView(unref(currentRoute))
+//   push({ name: 'Suppliers' })
+// }
+
+/** 初始化 */
+onMounted(async () => {
+  await getDetail()
+})
+</script>
+<style scoped></style>

src/views/pms/device/FileTree.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入资料分类名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+      @node-contextmenu="handleRightClick"
+      style="height: 35em"
+    />
+  </div>
+  <div
+    v-show="menuVisible"
+    class="custom-menu"
+    :style="{ left: menuX + 'px', top: menuY + 'px' }"
+  >
+    <ul>
+      <li @click="handleMenuClick('add')">新增子节点</li>
+      <li @click="handleMenuClick('edit')">重命名</li>
+      <li @click="handleMenuClick('delete')">删除</li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'DeviceFileTree' })
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const menuVisible = ref(false);
+const menuX = ref(0);
+const menuY = ref(0);
+let selectedNode = null;
+const handleRightClick = (event, { node, data }) => {
+  event.preventDefault();
+  menuX.value = event.clientX;
+  menuY.value = event.clientY;
+  selectedNode = data; // 存储当前操作的节点数据 ‌:ml-citation{ref="7" data="citationList"}
+  menuVisible.value = true;
+};
+
+const handleMenuClick = (action) => {
+  switch(action) {
+    case 'add':
+      // 调用新增节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
+      break;
+    case 'edit':
+      // 调用编辑节点逻辑 ‌:ml-citation{ref="7" data="citationList"}
+      break;
+    case 'delete':
+      // 调用删除节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
+      break;
+  }
+  menuVisible.value = false;
+};
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptList.value = []
+  deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>
+<style lang="scss" scoped>
+.custom-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+  z-index: 1000;
+}
+.custom-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.custom-menu li {
+  padding: 8px 20px;
+  cursor: pointer;
+}
+.custom-menu li:hover {
+  background: #f5f5f5;
+}
+</style>

src/views/pms/device/index.vue

@@ -151,13 +151,13 @@
           >
             删除
           </el-button>
-<!--          <el-button-->
-<!--            link-->
-<!--            type="info"-->
-<!--            @click="handleDetail(scope.row.id)"-->
-<!--          >-->
-<!--            详情-->
-<!--          </el-button>-->
+          <el-button
+            link
+            type="info"
+            @click="handleUpload(scope.row.id)"
+          >
+            资料上传
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -282,6 +282,10 @@ const handleDetail = (id: number) => {
   push({ name: 'DeviceDetailInfo', params:{id} })
 }
 
+const handleUpload = (id: number) => {
+  push({ name: 'DeviceUpload', params:{id} })
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

src/views/system/user/DeptTree.vue

@@ -17,8 +17,21 @@
       highlight-current
       node-key="id"
       @node-click="handleNodeClick"
+      @node-contextmenu="handleRightClick"
+      style="height: 35em"
     />
   </div>
+  <div
+    v-show="menuVisible"
+    class="custom-menu"
+    :style="{ left: menuX + 'px', top: menuY + 'px' }"
+  >
+    <ul>
+      <li @click="handleMenuClick('add')">新增子节点</li>
+      <li @click="handleMenuClick('edit')">重命名</li>
+      <li @click="handleMenuClick('delete')">删除</li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -31,7 +44,32 @@ defineOptions({ name: 'SystemUserDeptTree' })
 const deptName = ref('')
 const deptList = ref<Tree[]>([]) // 树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
+const menuVisible = ref(false);
+const menuX = ref(0);
+const menuY = ref(0);
+let selectedNode = null;
+const handleRightClick = (event, { node, data }) => {
+  event.preventDefault();
+  menuX.value = event.clientX;
+  menuY.value = event.clientY;
+  selectedNode = data; // 存储当前操作的节点数据 ‌:ml-citation{ref="7" data="citationList"}
+  menuVisible.value = true;
+};
 
+const handleMenuClick = (action) => {
+  switch(action) {
+    case 'add':
+      // 调用新增节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
+      break;
+    case 'edit':
+      // 调用编辑节点逻辑 ‌:ml-citation{ref="7" data="citationList"}
+      break;
+    case 'delete':
+      // 调用删除节点逻辑 ‌:ml-citation{ref="4" data="citationList"}
+      break;
+  }
+  menuVisible.value = false;
+};
 /** 获得部门树 */
 const getTree = async () => {
   const res = await DeptApi.getSimpleDeptList()
@@ -61,3 +99,24 @@ onMounted(async () => {
   await getTree()
 })
 </script>
+<style lang="scss" scoped>
+.custom-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+  z-index: 1000;
+}
+.custom-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.custom-menu li {
+  padding: 8px 20px;
+  cursor: pointer;
+}
+.custom-menu li:hover {
+  background: #f5f5f5;
+}
+</style>