feat(dms):为润滑、保养、维修知识库添加附件功能

- 在知识库列表中新增附件预览与下载按钮 - 表单中添加文件上传组件，支持文档类附件 - 新增附件字段到数据模型，包含 ossId 和 photoAddress - 实现附件的回显、上传及关联逻辑 - 添加附件预览和下载方法，支持通过 ossId 查询 - 优化润滑和保养标准字段为下拉选择框 - 增加对应的 API 接口引入和数据获取逻辑 - 默认显示附件列，提升用户操作便捷性
2 months ago · f02da81958
parent 2b2b093b6a
commit f02da81958
6 changed files with 219 additions and 2 deletions
--- a/src/api/dms/dmsKnowledgeLube/types.ts
+++ b/src/api/dms/dmsKnowledgeLube/types.ts
@ -39,6 +39,16 @@ export interface DmsKnowledgeLubeVO {
   */
  remark: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress: string;
+
  /**
   * 设备类型
   */
@ -92,6 +102,16 @@ export interface DmsKnowledgeLubeForm extends BaseEntity {
   */
  remark?: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId?: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress?: string;
+
  /**
   * 设备类型
   */
@ -102,6 +122,11 @@ export interface DmsKnowledgeLubeForm extends BaseEntity {
   */
  lubeStationName?: string;//JOIN

+  /**
+   * 文件
+   */
+  file?: string | [];
+
 }

 export interface DmsKnowledgeLubeQuery extends PageQuery {
--- a/src/api/dms/dmsKnowledgeMaint/types.ts
+++ b/src/api/dms/dmsKnowledgeMaint/types.ts
@ -39,6 +39,16 @@ export interface DmsKnowledgeMaintVO {
   */
  remark: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress: string;
+
  /**
   * 设备类型
   */
@ -92,6 +102,16 @@ export interface DmsKnowledgeMaintForm extends BaseEntity {
   */
  remark?: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId?: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress?: string;
+
  /**
   * 设备类型
   */
@ -102,6 +122,11 @@ export interface DmsKnowledgeMaintForm extends BaseEntity {
   */
  maintStationName?: string;//JOIN

+  /**
+   * 文件
+   */
+  file?: string | [];
+
 }

 export interface DmsKnowledgeMaintQuery extends PageQuery {
--- a/src/api/dms/dmsKnowledgeRepair/types.ts
+++ b/src/api/dms/dmsKnowledgeRepair/types.ts
@ -39,6 +39,16 @@ export interface DmsKnowledgeRepairVO {
   */
  remark: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress: string;
+
  /**
   * 设备类型
   */
@ -87,11 +97,26 @@ export interface DmsKnowledgeRepairForm extends BaseEntity {
   */
  remark?: string;

+  /**
+   * 附件OSS ID
+   */
+  ossId?: string | number;
+
+  /**
+   * 附件地址
+   */
+  photoAddress?: string;
+
  /**
   * 设备类型
   */
  deviceTypeName?: string;//JOIN

+  /**
+   * 文件
+   */
+  file?: string | [];
+
 }

 export interface DmsKnowledgeRepairQuery extends PageQuery {
--- a/src/views/dms/dmsKnowledgeLube/index.vue
+++ b/src/views/dms/dmsKnowledgeLube/index.vue
@ -69,6 +69,12 @@
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
+        <el-table-column label="附件" align="center" v-if="columns[14] && columns[14].visible">
+          <template #default="scope">
+            <el-button link type="primary" :disabled="!scope.row.photoAddress" @click="handlePreview(scope.row)">预览</el-button>
+            <el-button link type="primary" :disabled="!scope.row.ossId" @click="handleDownload(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
@ -111,7 +117,13 @@
          </el-select>
        </el-form-item>
        <el-form-item label="润滑标准" prop="protocolCode">
-          <el-input v-model="form.protocolCode" placeholder="请输入润滑标准" />
+          <!-- <el-input v-model="form.protocolCode" placeholder="请输入润滑标准" /> -->
+          <el-select v-model="form.protocolCode" placeholder="请选择润滑标准" clearable>
+            <el-option v-for="item in protocolCodeOptions"
+                       :key="item.lubeStandardCode"
+                       :label="item.deviceTypeName"
+                       :value="item.lubeStandardCode" />
+          </el-select>
        </el-form-item>
        <el-form-item label="操作描述" prop="operationsDescription">
          <el-input v-model="form.operationsDescription" placeholder="请输入操作描述" />
@ -128,6 +140,9 @@
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
+        <el-form-item label="附件" prop="file">
+          <FileUpload v-model="form.file" :limit="1" :file-type="['doc','docx','xls','ppt','txt','pdf']" />
+        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@ -144,6 +159,8 @@ import { listDmsKnowledgeLube, getDmsKnowledgeLube, delDmsKnowledgeLube, addDmsK
 import { DmsKnowledgeLubeVO, DmsKnowledgeLubeQuery, DmsKnowledgeLubeForm } from '@/api/dms/dmsKnowledgeLube/types';
 import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
 import {getDmsBaseLubeStationList} from "@/api/dms/dmsBaseLubeStation";
+import FileUpload from '@/components/FileUpload/index.vue';
+import { getDmsBaseLubeStandardList } from '@/api/dms/dmsBaseLubeStandard';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -181,6 +198,7 @@ const columns = ref<FieldOption[]>([
        { key: 11, label: `创建时间`, visible: false },
        { key: 12, label: `更新人`, visible: false },
        { key: 13, label: `更新时间`, visible: false },
+        { key: 14, label: `附件`, visible: true },
 ]);

 const initFormData: DmsKnowledgeLubeForm = {
@ -280,6 +298,8 @@ const handleUpdate = async (row?: DmsKnowledgeLubeVO) => {
  const _knowledgeLubeId = row?.knowledgeLubeId || ids.value[0]
  const res = await getDmsKnowledgeLube(_knowledgeLubeId);
  Object.assign(form.value, res.data);
+  // 回显已上传附件（支持通过 ossId 查询）
+  (form.value as any).file = res.data?.ossId ? res.data.ossId : undefined;
  dialog.visible = true;
  dialog.title = "修改润滑知识库";
 }
@ -289,6 +309,14 @@ const submitForm = () => {
  DmsKnowledgeLubeFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
+      const f: any = form.value as any;
+      if (f.file && f.file.length > 0) {
+        f.ossId = f.file[0]?.ossId;
+        f.photoAddress = f.file[0]?.url;
+      } else {
+        f.ossId = undefined;
+        f.photoAddress = undefined;
+      }
      if (form.value.knowledgeLubeId) {
        await updateDmsKnowledgeLube(form.value).finally(() =>  buttonLoading.value = false);
      } else {
@ -331,8 +359,33 @@ const getBaseLubeStationOption = async () => {
  lubeStationOptions.value = res.data;
 }

+// 润滑标准下拉框
+let protocolCodeOptions = ref([]);
+const getProtocolCodeOption = async () => {
+  const res = await getDmsBaseLubeStandardList(null);
+  protocolCodeOptions.value = res.data;
+}
+
 onMounted(() => {
+  getBaseLubeStationOption();
+  getProtocolCodeOption();
  getBaseDeviceTypeOption();
  getList();
 });
+
+// 预览与下载附件
+const handlePreview = (row: DmsKnowledgeLubeVO) => {
+  if (row.photoAddress) {
+    window.open(row.photoAddress, '_blank');
+  } else {
+    proxy?.$modal.msgWarning('暂无附件预览');
+  }
+}
+const handleDownload = (row: DmsKnowledgeLubeVO) => {
+  if (row.ossId) {
+    proxy?.$download.oss(row.ossId as any);
+  } else {
+    proxy?.$modal.msgWarning('暂无可下载附件');
+  }
+}
 </script>
--- a/src/views/dms/dmsKnowledgeMaint/index.vue
+++ b/src/views/dms/dmsKnowledgeMaint/index.vue
@ -69,6 +69,12 @@
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
+        <el-table-column label="附件" align="center" v-if="columns[14] && columns[14].visible">
+          <template #default="scope">
+            <el-button link type="primary" :disabled="!scope.row.photoAddress" @click="handlePreview(scope.row)">预览</el-button>
+            <el-button link type="primary" :disabled="!scope.row.ossId" @click="handleDownload(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
@ -111,7 +117,13 @@
          </el-select>
        </el-form-item>
        <el-form-item label="保养标准" prop="maintProtocol">
-          <el-input v-model="form.maintProtocol" placeholder="请输入保养标准" />
+          <!-- <el-input v-model="form.maintProtocol" placeholder="请输入保养标准" /> -->
+          <el-select v-model="form.maintProtocol" placeholder="请选择保养标准" clearable>
+            <el-option v-for="item in maintProtocolOptions"
+                       :key="item.maintProtocol"
+                       :label="item.maintProtocol"
+                       :value="item.maintProtocol" />
+          </el-select>
        </el-form-item>
        <el-form-item label="操作描述" prop="operationDescription">
          <el-input v-model="form.operationDescription" placeholder="请输入操作描述" />
@ -128,6 +140,9 @@
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
+        <el-form-item label="附件" prop="file">
+          <FileUpload v-model="form.file" :limit="1" :file-type="['doc','docx','xls','ppt','txt','pdf']" />
+        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@ -144,6 +159,8 @@ import { listDmsKnowledgeMaint, getDmsKnowledgeMaint, delDmsKnowledgeMaint, addD
 import { DmsKnowledgeMaintVO, DmsKnowledgeMaintQuery, DmsKnowledgeMaintForm } from '@/api/dms/dmsKnowledgeMaint/types';
 import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
 import {getDmsBaseMaintStationList} from "@/api/dms/dmsBaseMaintStation";
+import FileUpload from '@/components/FileUpload/index.vue';
+import { getDmsBaseMaintStandardList } from '@/api/dms/dmsBaseMaintStandard';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -181,6 +198,7 @@ const columns = ref<FieldOption[]>([
        { key: 11, label: `创建时间`, visible: false },
        { key: 12, label: `更新人`, visible: false },
        { key: 13, label: `更新时间`, visible: false },
+        { key: 14, label: `附件`, visible: true },
 ]);

 const initFormData: DmsKnowledgeMaintForm = {
@ -280,6 +298,8 @@ const handleUpdate = async (row?: DmsKnowledgeMaintVO) => {
  const _knowledgeMaintId = row?.knowledgeMaintId || ids.value[0]
  const res = await getDmsKnowledgeMaint(_knowledgeMaintId);
  Object.assign(form.value, res.data);
+  // 回显已上传附件（支持通过 ossId 查询）
+  (form.value as any).file = res.data?.ossId ? res.data.ossId : undefined;
  dialog.visible = true;
  dialog.title = "修改保养知识库";
 }
@ -289,6 +309,14 @@ const submitForm = () => {
  dmsKnowledgeMaintFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
+      const f: any = form.value as any;
+      if (f.file && f.file.length > 0) {
+        f.ossId = f.file[0]?.ossId;
+        f.photoAddress = f.file[0]?.url;
+      } else {
+        f.ossId = undefined;
+        f.photoAddress = undefined;
+      }
      if (form.value.knowledgeMaintId) {
        await updateDmsKnowledgeMaint(form.value).finally(() =>  buttonLoading.value = false);
      } else {
@ -331,9 +359,33 @@ const getBaseMaintStationOption = async () => {
  maintStationOptions.value = res.data;
 }

+// 保养标准下拉框
+let maintProtocolOptions = ref([]);
+const getMaintProtocolOption = async () => {
+  const res = await getDmsBaseMaintStandardList(null);
+  maintProtocolOptions.value = res.data;
+}
+
 onMounted(() => {
  getBaseDeviceTypeOption();
  getBaseMaintStationOption();
+  getMaintProtocolOption();
  getList();
 });
+
+// 预览与下载附件
+const handlePreview = (row: DmsKnowledgeMaintVO) => {
+  if (row.photoAddress) {
+    window.open(row.photoAddress, '_blank');
+  } else {
+    proxy?.$modal.msgWarning('暂无附件预览');
+  }
+}
+const handleDownload = (row: DmsKnowledgeMaintVO) => {
+  if (row.ossId) {
+    proxy?.$download.oss(row.ossId as any);
+  } else {
+    proxy?.$modal.msgWarning('暂无可下载附件');
+  }
+}
 </script>
--- a/src/views/dms/dmsKnowledgeRepair/index.vue
+++ b/src/views/dms/dmsKnowledgeRepair/index.vue
@ -69,6 +69,12 @@
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[8].visible"/>
+        <el-table-column label="附件" align="center" v-if="columns[14] && columns[14].visible">
+          <template #default="scope">
+            <el-button link type="primary" :disabled="!scope.row.photoAddress" @click="handlePreview(scope.row)">预览</el-button>
+            <el-button link type="primary" :disabled="!scope.row.ossId" @click="handleDownload(scope.row)">下载</el-button>
+          </template>
+        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
@ -119,6 +125,9 @@
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
+        <el-form-item label="附件" prop="file">
+          <FileUpload v-model="form.file" :limit="1" :file-type="['doc','docx','xls','ppt','txt','pdf']" />
+        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
@ -134,6 +143,7 @@
 import { listDmsKnowledgeRepair, getDmsKnowledgeRepair, delDmsKnowledgeRepair, addDmsKnowledgeRepair, updateDmsKnowledgeRepair } from '@/api/dms/dmsKnowledgeRepair';
 import { DmsKnowledgeRepairVO, DmsKnowledgeRepairQuery, DmsKnowledgeRepairForm } from '@/api/dms/dmsKnowledgeRepair/types';
 import {getBaseDeviceTypeList} from "@/api/dms/baseDeviceType";
+import FileUpload from '@/components/FileUpload/index.vue';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
@ -171,6 +181,7 @@ const columns = ref<FieldOption[]>([
        { key: 11, label: `创建时间`, visible: false },
        { key: 12, label: `更新人`, visible: false },
        { key: 13, label: `更新时间`, visible: false },
+        { key: 14, label: `附件`, visible: true },
 ]);

 const initFormData: DmsKnowledgeRepairForm = {
@ -266,6 +277,8 @@ const handleUpdate = async (row?: DmsKnowledgeRepairVO) => {
  const _knowledgeRepairId = row?.knowledgeRepairId || ids.value[0]
  const res = await getDmsKnowledgeRepair(_knowledgeRepairId);
  Object.assign(form.value, res.data);
+  // 回显已上传附件（支持通过 ossId 查询）
+  (form.value as any).file = res.data?.ossId ? res.data.ossId : undefined;
  dialog.visible = true;
  dialog.title = "修改维修知识库";
 }
@ -275,6 +288,14 @@ const submitForm = () => {
  dmsKnowledgeRepairFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
+      const f: any = form.value as any;
+      if (f.file && f.file.length > 0) {
+        f.ossId = f.file[0]?.ossId;
+        f.photoAddress = f.file[0]?.url;
+      } else {
+        f.ossId = undefined;
+        f.photoAddress = undefined;
+      }
      if (form.value.knowledgeRepairId) {
        await updateDmsKnowledgeRepair(form.value).finally(() =>  buttonLoading.value = false);
      } else {
@ -314,4 +335,20 @@ onMounted(() => {
  getBaseDeviceTypeOption();
  getList();
 });
+
+// 预览与下载附件
+const handlePreview = (row: DmsKnowledgeRepairVO) => {
+  if (row.photoAddress) {
+    window.open(row.photoAddress, '_blank');
+  } else {
+    proxy?.$modal.msgWarning('暂无附件预览');
+  }
+}
+const handleDownload = (row: DmsKnowledgeRepairVO) => {
+  if (row.ossId) {
+    proxy?.$download.oss(row.ossId as any);
+  } else {
+    proxy?.$modal.msgWarning('暂无可下载附件');
+  }
+}
 </script>