编写文件列表组件、修改文件上传组件

src/components/FileUpload/index.vue

@@ -19,20 +19,38 @@
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
-        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileSize">
-        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
         的文件
       </div>
     </el-upload>
 
     <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <transition-group
-      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+      class="upload-file-list el-upload-list el-upload-list--text"
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+      name="el-fade-in-linear"
+      tag="ul"
+    >
+      <li
+        :key="file.url"
+        class="el-upload-list__item ele-upload-list__item-content"
+        v-for="(file, index) in fileList"
+      >
+        <el-link
+          :href="`${baseUrl}${file.url}`"
+          :underline="false"
+          target="_blank"
+        >
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+          <el-link :underline="false" @click="handleDelete(index)" type="danger"
+            >删除</el-link
+          >
         </div>
       </li>
     </transition-group>
@@ -57,23 +75,28 @@ export default {
       type: Number,
       default: 5,
     },
+    // 是否返回文件名称以及url
+    isReturnFileAll: {
+      type: Boolean,
+      default: true,
+    },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "docx", "xls", "xlsx", "ppt", "txt", "pdf"],
     },
     // 是否显示提示
     isShowTip: {
       type: Boolean,
-      default: true
+      default: true,
-    }
+    },
   },
   data() {
     return {
       number: 0,
       uploadList: [],
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/zongzhi/common/upload", // 上传文件服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
@@ -86,11 +109,13 @@ export default {
         if (val) {
           let temp = 1;
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          const list = Array.isArray(val) ? val : this.value.split(",");
           // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
+          this.fileList = list.map((item) => {
             if (typeof item === "string") {
               item = { name: item, url: item };
+            } else if (typeof item === "object") {
+              item = { name: item.name, url: item.url };
             }
             item.uid = item.uid || new Date().getTime() + temp++;
             return item;
@@ -101,8 +126,8 @@ export default {
         }
       },
       deep: true,
-      immediate: true
+      immediate: true,
-    }
+    },
   },
   computed: {
     // 是否显示提示
@@ -115,11 +140,13 @@ export default {
     handleBeforeUpload(file) {
       // 校检文件类型
       if (this.fileType) {
-        const fileName = file.name.split('.');
+        const fileName = file.name.split(".");
         const fileExt = fileName[fileName.length - 1];
         const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
         if (!isTypeOk) {
-          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+          this.$modal.msgError(
+            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
+          );
           return false;
         }
       }
@@ -142,12 +169,20 @@ export default {
     // 上传失败
     handleUploadError(err) {
       this.$modal.msgError("上传文件失败，请重试");
-      this.$modal.closeLoading()
+      this.$modal.closeLoading();
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
       if (res.code === 200) {
+        if (this.isReturnFileAll) {
+          this.uploadList.push({
+            name: res.originalFilename,
+            url: res.fileName,
+          });
+        } else {
           this.uploadList.push({ name: res.fileName, url: res.fileName });
+        }
+
         this.uploadedSuccessfully();
       } else {
         this.number--;
@@ -160,7 +195,11 @@ export default {
     // 删除文件
     handleDelete(index) {
       this.fileList.splice(index, 1);
+      if (this.isReturnFileAll) {
+        this.$emit("input", this.fileList);
+      } else {
         this.$emit("input", this.listToString(this.fileList));
+      }
     },
     // 上传结束处理
     uploadedSuccessfully() {
@@ -168,12 +207,20 @@ export default {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
         this.number = 0;
+        if (this.isReturnFileAll) {
+          this.$emit("input", this.fileList);
+        } else {
           this.$emit("input", this.listToString(this.fileList));
+        }
+
         this.$modal.closeLoading();
       }
     },
     // 获取文件名称
     getFileName(name) {
+      if (this.isReturnFileAll) {
+        return name;
+      }
       if (name.lastIndexOf("/") > -1) {
         return name.slice(name.lastIndexOf("/") + 1);
       } else {
@@ -187,9 +234,9 @@ export default {
       for (let i in list) {
         strs += list[i].url + separator;
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
-    }
+    },
-  }
+  },
 };
 </script>
 

src/components/FileView/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="file-view">
+    <div class="file-title">{{ title }}</div>
+    <div class="file-list">
+      <div v-for="(item, index) in fileList" :key="'file' + index">
+        <img :src="filerIcon(item.url)" alt="" />
+        <div class="file-name">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "文件列表",
+    },
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    filerIcon(url) {
+      // console.log('图标', item.name)
+      let typeName = url.substr(url.lastIndexOf("."));
+      let icon = "";
+      if (typeName == ".pdf") {
+        icon = require("@/assets/images/pdf@2x.png");
+      }
+      if (typeName == ".ppt" || typeName == ".pptx") {
+        icon = require("@/assets/images/ppt@2x.png");
+      }
+      if (typeName == ".docx" || typeName == ".doc") {
+        icon = require("@/assets/images/doc@2x.png");
+      }
+      if (typeName == ".xlsx" || typeName == ".xls") {
+        icon = require("@/assets/images/excel@2x.png");
+      }
+      if (typeName == ".txt") {
+        icon = require("@/assets/images/text@2x.png");
+      }
+      return icon;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.file-view {
+  .file-title {
+    color: #303133;
+    font-weight: bold;
+    font-size: 13px;
+    margin: 10px;
+  }
+  .file-list {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e6ebf5;
+    padding: 10px;
+    & > div {
+      margin-right: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      img {
+        height: 40px;
+        width: 32px;
+      }
+      .file-name {
+        font-size: 12px;
+        text-align: center;
+        width: 100px;
+        overflow: hidden; /* 超出部分隐藏 */
+        text-overflow: ellipsis; /* 文本超出容器宽度时显示省略号 */
+        white-space: nowrap; /* 文本强制不换行，显示为单行 */
+        margin-top: 3px;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -61,6 +61,8 @@ import DictTag from "@/components/DictTag";
 import VueMeta from "vue-meta";
 // 字典数据组件
 import DictData from "@/components/DictData";
+// 文件列表
+import FileView from "@/components/FileView";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
@@ -81,6 +83,7 @@ Vue.component("Editor", Editor);
 Vue.component("FileUpload", FileUpload);
 Vue.component("ImageUpload", ImageUpload);
 Vue.component("ImagePreview", ImagePreview);
+Vue.component("FileView", FileView);
 
 Vue.use(directive);
 Vue.use(plugins);

src/views/netSecurity/SafetyYh/index.vue

@@ -230,12 +230,14 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="文件名称" prop="fileName">
+
-          <el-input v-model="form.fileName" placeholder="请输入文件名称" />
+        <el-form-item label="附件上传" prop="fileName">
+          <FileUpload v-model="fileList" />
         </el-form-item>
-        <el-form-item label="文件地址" prop="fileUrl">
+        <!-- <el-form-item label="文件地址" prop="fileUrl">
+           <el-input v-model="form.fileName" placeholder="请输入文件名称" />
           <el-input v-model="form.fileUrl" placeholder="请输入文件地址" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="部门" prop="depName">
           <el-input v-model="form.depName" placeholder="请输入部门" />
         </el-form-item>
@@ -319,13 +321,13 @@
           <dict-tag :options="dict.type.tc_yh_cz_state" :value="form.state" />
         </el-descriptions-item>
 
-        <el-descriptions-item label="文件名称">{{
+        <!-- <el-descriptions-item label="文件名称">{{
           form.fileName
         }}</el-descriptions-item>
 
         <el-descriptions-item label="文件地址">{{
           form.fileUrl
-        }}</el-descriptions-item>
+        }}</el-descriptions-item> -->
 
         <el-descriptions-item label="部门">{{
           form.depName
@@ -339,6 +341,7 @@
           form.endTime
         }}</el-descriptions-item>
       </el-descriptions>
+      <FileView :fileList="fileList" />
     </el-dialog>
   </div>
 </template>
@@ -362,6 +365,7 @@ export default {
   dicts: ["tc_yh_level", "tc_yh_cz_state", "tc_yh_source", "tc_yh_type"],
   data() {
     return {
+      fileList: [],
       tableHeigth: 0,
       //查看详情
       infoOpen: false,
@@ -472,6 +476,7 @@ export default {
 
         remark: null,
       };
+      this.fileList = [];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -495,6 +500,7 @@ export default {
       this.reset();
       const id = row.id || this.ids;
       getDanger(id).then((response) => {
+        this.filterFile(2, response.data.fileName, response.data.fileUrl);
         this.form = response.data;
         this.infoOpen = true;
         this.infoTitle = "查看安全隐患详情";
@@ -511,15 +517,50 @@ export default {
       this.reset();
       const id = row.id || this.ids;
       getDanger(id).then((response) => {
+        this.filterFile(2, response.data.fileName, response.data.fileUrl);
         this.form = response.data;
+        console.log(this.fileList);
         this.open = true;
         this.title = "修改安全隐患";
       });
     },
+
+    filterFile(state, fileName, fileUrl) {
+      //1.提交 else 查看
+      if (state == 1) {
+        let fileName = [];
+        let fileUrl = [];
+        if (this.fileList.length > 0) {
+          this.fileList.forEach((item) => {
+            fileName.push(item.name);
+            fileUrl.push(item.url);
+          });
+          this.form.fileName = fileName.join(",");
+          this.form.fileUrl = fileUrl.join(",");
+        } else {
+          this.form.fileName = "";
+          this.form.fileUrl = "";
+        }
+      } else {
+        if (fileName != "" || fileUrl != "") {
+          fileName = fileName.split(",");
+          fileUrl = fileUrl.split(",");
+          fileName.forEach((item, index) => {
+            this.fileList.push({
+              name: item,
+              url: fileUrl[index],
+            });
+          });
+        } else {
+          this.fileList = [];
+        }
+      }
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
+          this.filterFile(1);
           if (this.form.id != null) {
             updateDanger(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");