文件管理 上传文件

src/components/Upload/FilesUpload.vue

@@ -1,28 +1,28 @@
 <template>
   <el-upload
     v-model:file-list="fileList"
-    :auto-upload="false"
-    :limit="limit"
+    class="upload-demo"
     :on-change="handleChange"
+    :limit="limit"
+    :auto-upload="false"
     :show-file-list="false"
-    class="upload-demo"
   >
     <el-button
-      :disabled="fileList.length >= limit"
-      :loading="loading"
       type="primary"
-      >点击上传文件
-    </el-button>
+      :loading="loading"
+      :disabled="fileList.length >= limit || disabled"
+      >点击上传文件</el-button
+    >
     <template #tip>
-      <div v-if="showTip" class="tip">
+      <div class="tip" v-if="showTip">
         文件类型限制为.jpg,.jpeg,.png,word文档,pdf,大小不超过{{ size }}M
       </div>
     </template>
     <div>
       <el-tag
+        class="file-item"
         v-for="(file, index) in fileList"
         :key="file.name"
-        class="file-item"
         closable
         type="success"
         @close="deleteFile(index)"
@@ -34,12 +34,12 @@
   </el-upload>
   <el-drawer
     v-model="PDFVisible"
-    :append-to-body="true"
     :footer="false"
     :header="false"
     :show-close="false"
     destroy-on-close
     direction="rtl"
+    :append-to-body="true"
     size="972px"
   >
     <VuePdfEmbed :source="pdfSource" annotation-layer text-layer />
@@ -47,8 +47,9 @@
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
-import { UploadFile, UploadUserFile } from "element-plus";
+import { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
 import { uploadFileApi } from "@/api/file";
+import PDFView from "@/components/PDFView/index.vue";
 import VuePdfEmbed from "vue-pdf-embed";
 
 const props = defineProps({
@@ -64,6 +65,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
   srcList: {
     type: Array<string>,
     default: () => [],
@@ -104,6 +109,9 @@ const fileNameList = useVModel(props, "fileNameList", emit); //多文件上传
 
 // el-upload 绑定的值
 const fileList = ref<UploadUserFile[]>([]);
+const setFileList = (data: any) => {
+  fileList.value = data;
+};
 
 const handleChange = async (uploadFile: UploadFile) => {
   if (uploadFile.size! > props.size * 1048 * 1048) {
@@ -132,7 +140,6 @@ const deleteFile = (index: number) => {
   srcList.value.splice(index, 1);
   pdfList.value.splice(index, 1);
   fileNameList.value.splice(index, 1);
-  emit("finished");
 };
 
 const PDFVisible = ref(false);
@@ -144,15 +151,15 @@ const handlePreview = (index: number) => {
     PDFVisible.value = true;
   }
 };
+defineExpose({ setFileList });
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .tip {
   font-size: 12px;
   color: #e6a23c;
   margin-top: 5px;
 }
-
 .file-item {
   margin-left: 10px;
 }

src/views/sets/files.vue

@@ -17,8 +17,12 @@
       @selelction-change="selectionChange"
     >
       <template #fileUrl-form="scope">
-        <single-upload v-model="form.fileUrl"/>
-
+        <FilesUpload
+          v-model:src="form.fileUrl"
+          v-model:file-name-list="filesNamesList"
+          :limit="1"
+          @finished="onUploadFinish"
+        />
       </template>
     </avue-crud>
 
@@ -50,7 +54,7 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleRoleMenuSubmit"
-          >确 定
+            >确 定
           </el-button>
           <el-button @click="menuDialogVisible = false">取 消</el-button>
         </div>
@@ -59,8 +63,8 @@
   </div>
 </template>
 <script setup>
-import {ref} from "vue";
-import {useCrud} from "@/hooks/userCrud";
+import { ref } from "vue";
+import { useCrud } from "@/hooks/userCrud";
 import {
   addSystemUserMenu,
   bindedRoleMenuList,
@@ -70,15 +74,16 @@ import {
   treeList,
 } from "@/api/user/index";
 import SingleUpload from "@/components/Upload/SingleUpload.vue";
+import FilesUpload from "@/components/Upload/FilesUpload.vue";
 // 传入一个url，后面不带/
-const {form, data, option, search, page, toDeleteIds, Methords, Utils} =
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/synFileShare",
   });
-const {dataList, createRow, updateRow, deleteRow, searchChange, resetChange} =
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
   Methords; //增删改查
-const {selectionChange, multipleDelete} = Methords; //选中和批量删除事件
-const {checkBtnPerm, downloadTemplate, exportData} = Utils; //按钮权限等工具
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
@@ -107,7 +112,7 @@ option.value = Object.assign(option.value, {
       label: "文件名",
       prop: "fileName",
       search: true,
-      display: false
+      display: false,
     },
     {
       label: "描述",
@@ -117,7 +122,8 @@ option.value = Object.assign(option.value, {
     {
       label: "文件上传",
       prop: "fileUrl",
-      slot: true
+      slot: true,
+      hide: true,
     },
     {
       label: "创建人",
@@ -180,4 +186,15 @@ onMounted(() => {
   getDeptList(); //获取部门列表
   dataList();
 });
+
+// 测试上传文件相关
+const fileUrl = ref(""); //单文件
+const filesNamesList = ref([]);
+const onUploadFinish = () => {
+  console.log("fileUrl", fileUrl.value, filesNamesList.value);
+  if (filesNamesList.value.length > 0) {
+    form.value.fileName = filesNamesList.value[0];
+  }
+  console.log(form.value);
+};
 </script>