优化

src/api/system/file/index.js

@@ -1,68 +1,84 @@
 import request from '@/utils/request';
+import {download } from '@/utils/file';
 
 /**
  * 上传文件
  * @param file 文件
  */
-export async function uploadFile(file) {
+export async function uploadFile (data) {
   const formData = new FormData();
-  formData.append('file', file);
-  const res = await request.post('/file/upload', formData);
-  if (res.data.code === 0) {
-    return res.data.data;
+  formData.append('multiPartFile', data.multiPartFile);
+  formData.append('module', data.module);
+  const res = await request.post('/main/file/upload', formData);
+  if (res.data.code === '0') {
+    return res.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
-
 /**
- * 上传 base64 文件
- * @param base64 文件数据
- * @param fileName 文件名称
+ * 上传文件 批量
+ * @param file 文件
  */
-export async function uploadBase64File(base64, fileName) {
+export async function uploadBatch (data) {
   const formData = new FormData();
-  formData.append('base64', base64);
-  if (fileName) {
-    formData.append('fileName', fileName);
-  }
-  const res = await request.post('/file/upload/base64', formData);
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
+  data.multiPartFiles.forEach((item, index) => {
+    formData.append(`multiPartFiles`, item);
+  });
+  const res = await request.post(
+    `/main/file/uploadBatch?module=${data.module}`,
+    formData
+  );
+  if (res.data.code === '0') {
+    return res.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
 
 /**
- * 分页查询文件上传记录
+ * 获取文件路径
  */
-export async function pageFiles(params) {
-  const res = await request.get('/file/page', { params });
-  if (res.data.code === 0) {
+export async function getPathAddress () {
+  const res = await request.post('/main/file/getPathAddress');
+  if (res.data.code === '0') {
     return res.data.data;
   }
-  return Promise.reject(new Error(res.data.message));
+  return Promise.reject();
+}
+/**
+ * 获取文件
+ */
+export async function getFile (params, fileName) {
+  const res = await request.get('/main/file/getFile', {
+    params,
+    responseType: 'blob'
+  });
+  const arr = params.objectName.split('/');
+  download(res.data, fileName || arr[arr.length - 1]);
+  // if (res.data.code === '0') {
+  //   return res.data.data;
+  // }
+  // return Promise.reject();
 }
-
 /**
  * 删除文件
  */
-export async function removeFile(id) {
-  const res = await request.delete('/file/remove/' + id);
-  if (res.data.code === 0) {
+export async function removeFile (data) {
+  const res = await request.post(
+    `/main/file/delete?fileId=${data.fileId}`,
+    data
+  );
+  if (res.data.code === '0') {
     return res.data.message;
   }
   return Promise.reject(new Error(res.data.message));
 }
-
 /**
- * 批量删除文件
+ * 文件列表
  */
-export async function removeFiles(data) {
-  const res = await request.delete('/file/remove/batch', {
-    data
-  });
-  if (res.data.code === 0) {
-    return res.data.message;
+export async function getFileList (data) {
+  const res = await request.post(`/main/file/list`, data);
+  if (res.data.code === '0') {
+    return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }

src/components/upload/WithView.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="img-view" v-if="dialogImageUrl">
+      <img :src="dialogImageUrl" alt="" srcset="" />
+    </div>
+    <div class="placeholder-box" v-else>
+      <img src="~@/assets/upload-placeholder.svg" alt="" />
+    </div>
+    <div class="btn-box">
+      <el-upload
+        class="avatar-div"
+        action="#"
+        accept="image/png,image/jpeg"
+        :show-file-list="false"
+        ref="uploadRef"
+        :on-exceed="handleExceed"
+        :limit="1"
+        :http-request="handlSuccess"
+        :multiple="false"
+      >
+        <el-button type="text">上传{{ assetName }}图片</el-button>
+      </el-upload>
+      <el-button type="text" @click="clearImg">清除图片</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { uploadFile, removeFile } from '@/api/system/file/index.js';
+  import { getImageUrl } from '@/utils/file';
+  export default {
+    props: {
+      assetName: {
+        type: String,
+        default: '设备'
+      },
+      value: {
+        type: Object,
+        default: () => []
+      },
+      // 所属模块
+      module: {
+        type: String,
+        default: 'main'
+      }
+    },
+    data () {
+      return {};
+    },
+    computed: {
+      dialogImageUrl () {
+        return this.value?.storePath && getImageUrl(this.value.storePath);
+      }
+    },
+    methods: {
+      // 清空已上传的文件列表
+      clearUploadFiles () {},
+      //图片添加
+      async handlSuccess (params) {
+        let res = await uploadFile({
+          multiPartFile: params.file,
+          module: this.module
+        });
+        if (res?.data) {
+          this.$emit('input', res.data);
+        }
+      },
+      async clearImg () {
+        await removeFile({ fileId: this.value.id });
+        this.$emit('input', {});
+        this.$refs.uploadRef.clearFiles();
+      },
+      // 限制上传的数量
+      handleExceed (files, fileList) {
+        this.$message.warning(`最多允许上传一张图片！`);
+      }
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .img-view {
+    width: 280px;
+    height: 342px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(215, 215, 215, 1);
+    img {
+      max-width: 100%;
+    }
+  }
+  .placeholder-box {
+    width: 280px;
+    height: 342px;
+    text-align: center;
+
+    background-color: rgba(242, 242, 242, 1);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(215, 215, 215, 1);
+    padding-top: 60px;
+    img {
+      width: 158px;
+      height: 158px;
+    }
+  }
+
+  .btn-box {
+    display: flex;
+    justify-content: space-around;
+  }
+</style>

src/components/upload/fileUpload.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      class="upload-demo"
+      action="#"
+      :http-request="handlRequest"
+      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
+      :on-preview="handleItem"
+      multiple
+      :before-upload="beforeUpload"
+      :file-list="fileList"
+      :show-file-list="!showLib"
+    >
+      <slot>
+        <el-button type="primary" icon="el-icon-plus">点击上传</el-button>
+      </slot>
+    </el-upload>
+    <el-button type="primary" class="lib" @click="handleOpenLib" v-if="showLib"
+      >文档库</el-button
+    >
+    <div class="imgs-box" v-if="fileList.length && showLib">
+      <p class="imgs-p">
+        <span> {{ fileList[0].name }}</span>
+        <el-link @click="delFileList" type="primary" class="link">删除</el-link>
+      </p>
+    </div>
+    <!--图文档弹窗 -->
+    <el-dialog
+      title="图文档"
+      append-to-body
+      :visible.sync="documentVisible"
+      width="72%"
+    >
+      <el-form label-width="100px">
+        <el-row :gutter="12">
+          <el-col :span="8">
+            <el-form-item label-width="70px" label="文档名称">
+              <el-input v-model="documentForm.name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-button type="primary" @click="reload">搜索</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+      <ele-pro-table
+        ref="table"
+        :current.sync="selectItem"
+        :columns="columns"
+        highlight-current-row
+        :datasource="datasource"
+        :initLoad="false"
+        height="500px"
+        class="dict-table"
+        tool-class="ele-toolbar-actions"
+      >
+      </ele-pro-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="documentVisible = false"
+          >关 闭</el-button
+        >
+        <el-button size="small" @click="submitDocument" type="primary"
+          >确 认</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    uploadFile,
+    removeFile,
+    getFileList,
+    getFile
+  } from '@/api/system/file/index.js';
+  import { getImageUrl, getImagePath } from '@/utils/file';
+  export default {
+    props: {
+      value: {
+        type: [Array,String],
+        default: () => []
+      },
+      // 所属模块
+      module: {
+        type: String,
+        required: true
+      },
+      // 文档库
+      showLib: {
+        type: Boolean,
+        default: false
+      },
+      // 限制数量
+      limit: {
+        type: Number,
+        default: -1
+      },
+      // 限制大小 mb
+      size: {
+        type: Number,
+        default: 10
+      }
+    },
+    data () {
+      return {
+        documentVisible: false,
+        selectItem: null,
+        documentForm: {
+          name: ''
+        },
+        columns: [
+          {
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center'
+          },
+          {
+            label: '文档名称',
+            prop: 'name',
+            minWidth: '180',
+            showOverflowTooltip: true
+          },
+          {
+            label: '文档类型',
+            prop: 'type'
+          },
+          {
+            label: '系统'
+          },
+          {
+            label: '储存路径',
+            prop: 'storePath',
+            minWidth: '180',
+            showOverflowTooltip: true
+          },
+          {
+            label: '模块名',
+            prop: 'module'
+          },
+          {
+            label: '上传时间',
+            prop: 'createTime'
+          }
+        ]
+      };
+    },
+    computed: {
+      fileList: {
+        set (val) {
+          // console.log(val);
+          this.$emit(
+            'input',
+            val.map((item) => ({
+              ...item,
+              url: getImagePath(item.url)
+            }))
+          );
+        },
+        get () {
+          // console.log(this.value, 2);
+          if(!Array.isArray(this.value)) return []
+          const arr =
+            (this.value &&
+              this.value.map((item) => ({
+                ...item,
+                url: getImageUrl(item.url)
+              }))) ||
+            [];
+          return arr;
+        }
+      }
+    },
+
+    methods: {
+      //点击查看图片
+      handleItem(file){
+        console.log(file,'5555')
+       getFile({ objectName: file.storePath }, file.name);
+      },
+      delFileList () {
+        this.$emit('input', []);
+      },
+      handleOpenLib () {
+        this.documentVisible = true;
+        this.$nextTick(() => {
+          this.reload();
+        });
+      },
+      //图文档勾选
+      submitDocument () {
+        this.$emit('input', [
+          { url: this.selectItem.storePath, ...this.selectItem }
+        ]);
+        this.documentVisible = false;
+      },
+      datasource ({ page, limit }) {
+        return getFileList({
+          ...this.documentForm,
+          pageNum: page,
+          size: limit
+        });
+      },
+      reload () {
+        this.$refs.table.reload();
+      },
+      beforeRemove (file) {
+        if (file.id) {
+          return removeFile({
+            fileId: file.id
+          }).then(() => {
+            return true;
+          });
+        } else {
+          return true;
+        }
+      },
+      handleRemove (file, fileList) {
+        this.fileList = fileList;
+      },
+      beforeUpload (file) {
+        if (file.size / 1024 / 1024 > this.size) {
+          this.$message.error(`大小不能超过 ${this.size}MB`);
+          return false;
+        }
+
+        if (this.limit > 0 && this.fileList.length === this.limit) {
+          this.$message.error(`最多上传 ${this.limit}个文件`);
+          return false;
+        }
+        return uploadFile({
+          module: this.module,
+          multiPartFile: file
+        }).then((res) => {
+          if (res.data) {
+            this.$emit('input', [
+              ...(this.value || []),
+              { ...file, url: res.data.storePath, ...res.data }
+            ]);
+          }
+          return res.data;
+        });
+      },
+      handlRequest () {
+        return Promise.resolve();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .upload-file {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .lib {
+      margin-left: 12px;
+    }
+
+    .imgs-box {
+      margin-left: 10px;
+      flex: 1;
+    }
+    .imgs-box .imgs-p {
+      height: 30px;
+      background: #f0f3f3;
+      line-height: 30px;
+      min-width: 480px;
+      margin-bottom: 5px;
+      padding: 0 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>

src/components/upload/imgUpload.vue

@@ -0,0 +1,106 @@
+<template>
+  <ele-image-upload
+    v-model="images"
+    :limit="limit"
+    :drag="true"
+    :multiple="true"
+    :upload-handler="uploadHandler"
+    :beforeUpload="beforeUpload"
+    @upload="onUpload"
+  >
+  </ele-image-upload>
+</template>
+
+<script>
+  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import { getImageUrl, getImagePath } from '@/utils/file';
+  import { uploadFile } from '@/api/system/file/index';
+
+  export default {
+    components: { EleImageUpload },
+    props: {
+      // 所属模块
+      module: {
+        type: String,
+        default: 'main'
+      },
+      // 限制数量
+      limit: {
+        type: Number,
+        default: -1
+      },
+      value: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {};
+    },
+    computed: {
+      images: {
+        set (val) {
+          this.$emit(
+            'input',
+            val.map((item) => ({
+              ...item,
+              url: getImagePath(item.url)
+            }))
+          );
+        },
+        get () {
+          const arr =
+            (this.value &&
+              this.value.map((item) => ({
+                ...item,
+                url: getImageUrl(item.url)
+              }))) ||
+            [];
+
+          return arr;
+        }
+      }
+    },
+    methods: {
+      // beforeUpload(){},
+      /* 上传事件 */
+      uploadHandler (file) {
+        const item = {
+          file,
+          uid: file.uid,
+          name: file.name,
+          progress: 0,
+          status: null
+        };
+        if (!file.type.startsWith('image')) {
+          this.$message.error('只能选择图片');
+          return;
+        }
+        if (file.size / 1024 / 1024 > 2) {
+          this.$message.error('大小不能超过 2MB');
+          return;
+        }
+        this.$emit('input', [...this.value, item]);
+        this.onUpload(item);
+      },
+      /* 上传 item */
+      async onUpload (item) {
+        // 模拟上传
+        item.status = 'uploading';
+        item.progress = 20;
+
+        const res = await uploadFile({
+          module: this.module,
+          multiPartFile: item.file
+        });
+        if (res.data) {
+          item.url = res.data.storePath;
+          item.id = res.data.id;
+
+          item.progress === 100;
+          item.status = 'done';
+        }
+      }
+    }
+  };
+</script>

src/utils/file.js

@@ -0,0 +1,36 @@
+import { getToken } from './token-util';
+import { TOKEN_HEADER_NAME } from '@/config/setting';
+
+// 获取图片反显url
+export function getImageUrl(path) {
+  return `${sessionStorage.filePath}${path}`;
+  // if (process.env.NODE_ENV === 'development') {
+  //   return `http://192.168.3.51:18086/main/file/getFile?${TOKEN_HEADER_NAME}=${getToken()}&objectName=${path}`;
+  // } else {
+  //   return `${
+  //     sessionStorage.filePath
+  //   }${path}`;
+  // }
+}
+// 从反显url上获取接口需要path
+export function getImagePath(url) {
+  if (!url) {
+    return '';
+  }
+
+  const match = url.match(/&objectName=([\S\s]*)/);
+
+  return (match && match[1].split('&')[0]) || '';
+}
+
+// 下载方法
+
+export function download (data, name) {
+  const a = document.createElement('a');
+  const url = window.URL.createObjectURL(data);
+  const filename = name;
+  a.href = url;
+  a.download = filename;
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

src/views/inspectionStandard/components/edit.vue

@@ -39,6 +39,13 @@
         </el-col>
 
 
+        <el-col :span="8">
+              <el-form-item prop="imgUrl" label="附件">
+                <fileUpload v-model="form.imgUrl" module="main" :showLib="false" :limit="1" />
+              </el-form-item>
+            </el-col>
+
+
       
 
 
@@ -69,10 +76,10 @@
 <script>
 
 import { save, update, getById } from '@/api/inspectionStandard';
-
+import fileUpload from '@/components/upload/fileUpload';
 export default {
   components: {
-
+    fileUpload
   },