update

src/api/modules/res.ts

@@ -0,0 +1,6 @@
+import { ResPage, Stage, Subject, Scheme, Structure } from "@/api/interface/index";
+import http from "@/api";
+
+export const getFileExtIcon = () => {
+  return http.get(`/dsRes/res/getThumbs`);
+};

src/views/res/test/components/uploadDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+    v-model="dialogFormVisible"
+    :title="`${paramsProps.title}`"
+    draggable
+    append-to-body
+    :destroy-on-close="true"
+    width="500"
+  >
+    <el-upload
+      class="upload-demo"
+      drag
+      method="PUT"
+      action="http://10.10.14.210:9000/dsideal/resources/77d45a2c-af46-4c47-bc4e-056a9335e131.doc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AOxWewe7pywwEc1NQeP6%2F20241030%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241030T071930Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=bb1c75d0acbeb287a28d4810dd8d4c518ef3cb98a3dc2001abbcf0a31dd7173e"
+      :multiple="true"
+      :on-success="uploadSuccess"
+      :on-exceed="uploadExceed"
+      :on-change="uploadChange"
+      :limit="5"
+      :show-file-list="true"
+      list-type="picture"
+      v-model:file-list="fileList"
+    >
+      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+      <div class="el-upload__text">拖动文件到此区域 或 <em>点击上传</em></div>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="uploadDialog">
+import { ref, onMounted } from "vue";
+import { ElMessage, UploadUserFile } from "element-plus";
+import { getFileExtIcon } from "@/api/modules/res";
+
+const dialogFormVisible = ref(false);
+
+const fileList = ref<UploadUserFile[]>([]);
+
+const iconList = ref<any>([]);
+
+const paramsProps = ref<View.DefaultParams>({
+  title: "",
+  row: {},
+  updateId: 0,
+  getTableList: undefined
+});
+
+const acceptParams = (params: View.DefaultParams) => {
+  console.log(params);
+  paramsProps.value = params;
+  dialogFormVisible.value = true;
+};
+
+const uploadChange = async (uploadFile, uploadFiles) => {
+  if (uploadFile.status == "ready") {
+    const fileExt = uploadFile.name.split(".").pop();
+    const imageExt = ["jpg", "jpeg", "png", "gif", "bmp"];
+    const isImage = imageExt.includes(fileExt.toLowerCase());
+    if (!isImage) {
+      const extObj = iconList.value.find(item => item.ext === fileExt);
+      if (extObj) {
+        uploadFile.url = extObj.thumb_name;
+      } else {
+        const extOtherObj = iconList.value.find(item => item.ext === "other");
+        uploadFile.url = extOtherObj.thumb_name;
+      }
+    }
+  }
+};
+
+const uploadSuccess = (response, uploadFile, uploadFiles) => {
+  setTimeout(() => {
+    const _index = fileList.value.findIndex(item => item.name === uploadFile.name);
+    fileList.value.splice(_index, 1);
+  }, 3000);
+};
+
+const uploadExceed = () => {
+  ElMessage.warning(`一次最多只能选择5个文件上传！`);
+};
+
+const getFileExtIconList = async () => {
+  const res = await getFileExtIcon();
+  iconList.value = res.data;
+};
+
+onMounted(() => {
+  getFileExtIconList();
+});
+
+defineExpose({
+  acceptParams
+});
+</script>
+
+<style scoped lang="scss">
+:deep(li) {
+  height: 50px; /* 设置固定高度 */
+}
+
+:deep(.el-upload-list__item) {
+  margin-top: 0;
+}
+
+:deep(.el-upload-list__item-thumbnail) {
+  height: 30px;
+  width: none;
+}
+</style>

src/views/res/test/index.vue

@@ -62,7 +62,15 @@
 
       <TreeFilter label="structure_name" id="structure_id" title="" :request-api="getSchemeTree" ref="treeRef" />
     </div>
-    <div class="table-box"><ProTable ref="proTable" :columns="columns"></ProTable></div>
+    <div class="table-box">
+      <ProTable ref="proTable" :columns="columns">
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader="">
+          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('上传资源')">上传资源</el-button>
+        </template>
+      </ProTable>
+      <UploadDialog ref="dialogRef" />
+    </div>
   </div>
 </template>
 
@@ -73,9 +81,12 @@ import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
 import { Stage } from "@/api/interface";
 import ProTable from "@/components/ProTable/index.vue";
 import TreeFilter from "@/components/TreeFilter/index.vue";
+import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
 
 import { getStructureList, getStageList, getSubjectList, getSchemeList } from "@/api/modules/base";
 
+import UploadDialog from "@/views/res/test/components/uploadDialog.vue";
+
 const stageList = ref<any>([]);
 const stageSelect = ref("");
 const stageSelectTxt = ref("");
@@ -164,6 +175,15 @@ const wellleave = e => {
   tooltipShow.value = false;
 };
 
+const dialogRef = ref<InstanceType<typeof UploadDialog> | null>(null);
+const openDrawer = (title: string, scheme_id: number = 0) => {
+  const params = {
+    title,
+    row: {}
+  };
+  dialogRef.value?.acceptParams(params);
+};
+
 onMounted(() => {
   getStageSelectList();
 });