Просмотр исходного кода

对接公告管理、更改上传组件

chenrui 4 лет назад
Родитель
Сommit
81a24d2252

+ 1 - 2
src/api/notice.js

@@ -24,8 +24,7 @@ export const noticeDel = (params) => {
   const url = `/notice/delete/${params.id}`
   return axios({
     url: url,
-    data: params,
-    method: 'post'
+    method: 'get'
   })
 }
 //  公告 详情

+ 73 - 29
src/components/UploadFile/index.vue

@@ -4,10 +4,10 @@
       :action="action"
       :listType="listType"
       :fileList="fileList"
+      :disabled="disabled"
       @preview="handlePreview"
       @change="handleChange"
       :beforeUpload="beforeUpload"
-      :preview-file="previewFile"
       :data="params"
       :value="comVal"
     >
@@ -57,7 +57,7 @@ export default {
     },
     upText: {
       type: String,
-      default: '上传'
+      default: ''
     },
     value: {
       type: String
@@ -66,14 +66,21 @@ export default {
       type: Object,
       default: function () {
         return {
-          savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云
+          savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云, web
         }
       }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    uploadType: { //  上传类型  img图片;attach附件;import导入
+      type: String,
+      default: 'img'
     }
   },
   watch: {
     value (a, b) {
-      console.log(a, '=--====')
       this.comVal = a || ''
       if (a == undefined) {
         this.fileList = []
@@ -93,19 +100,37 @@ export default {
     setFileList (a) {
       const temp = []
       if (a && a.length > 0) {
-        a.split(',').map((item, index) => {
-          if (item) {
-            temp.push({
-              uid: index,
-              name: item,
-              status: 'done',
-              url: item,
-              response: {
-                data: item
-              }
-            })
-          }
-        })
+        if (this.uploadType == 'img') { // 图片
+          a.split(',').map((item, index) => {
+            if (item) {
+              temp.push({
+                uid: index,
+                name: item,
+                status: 'done',
+                url: item,
+                response: {
+                  data: item
+                }
+              })
+            }
+          })
+        } else if (this.uploadType == 'attach') { // 附件
+          a.map((item, index) => {
+            if (item) {
+              temp.push({
+                uid: index,
+                name: item.fileName,
+                status: 'done',
+                url: item.filePath,
+                response: {
+                  data: item
+                }
+              })
+            }
+          })
+        } else if (this.uploadType == 'import') { // 导入
+
+        }
       }
       this.fileList = temp
     },
@@ -116,39 +141,51 @@ export default {
       if (this.listType == 'text') {
         return
       }
-      console.log(file, '8888888888')
       this.previewImage = file.url || file.thumbUrl
-      // this.previewImage = file.response.data
       this.previewVisible = true
     },
     handleChange ({ file, fileList }) {
-      if (file.status == 'error') {
+      // console.log(file, fileList, '-----change')
+      if (file.status == 'error' || (file.response && (file.response.status == 500))) {
         this.$message.error('上传失败,请重试!')
         return
       }
       this.fileList = this.validaFile(file, fileList)
       this.$emit('change', this.formatFile())
+      this.$emit('input', this.formatFile())
     },
     // 格式化文件列表数据,给表单
     formatFile () {
       const a = this.fileList
-      const temp = []
+      let temp = []
+      let obj = null
       if (a && a.length) {
-        a.map(item => {
-          if (item.response && item.status == 'done') {
-            temp.push(item.response.data)
-          }
-        })
+        if (this.uploadType == 'img') { // 图片    将接口的返回图片地址逗号拼接后返回页面
+          a.map(item => {
+            if (item.response && item.status == 'done') {
+              temp.push(item.response.data)
+            }
+          })
+          obj = temp.join(',')
+        } else if (this.uploadType == 'attach') { // 附件    将接口的返回数据返回页面
+          a.map(item => {
+            if (item.response && item.status == 'done') {
+              temp = [...temp, ...item.response.data]
+            }
+          })
+          obj = JSON.stringify(temp)
+        } else if (this.uploadType == 'import') { // 导入
+
+        }
       }
-      return temp.join(',')
+      return obj
     },
     // 文件校验
     validaFile (file, filesList) {
       if (filesList.length == 0) {
         return []
       }
-
-      console.log(file, filesList, this.beforeUpload(file, 0))
+      // console.log(file, filesList, this.beforeUpload(file, 0))
       if (!this.beforeUpload(file, 0) && file.status != 'removed') {
         const index = filesList.findIndex(item => item.uid == file.uid)
         filesList.splice(index, 1)
@@ -192,10 +229,12 @@ export default {
   .upload-file{
     float: left;
     overflow: hidden;
+    height: 80px;
     /* you can make up upload button and sample style by using stylesheets */
     .ant-upload-select-picture-card i {
       font-size: 32px;
       color: #999;
+      margin-top: 9px;
     }
     .ant-upload-select-picture-card .ant-upload-text {
       margin-top: 8px;
@@ -207,11 +246,16 @@ export default {
         padding: 4px 0;
       }
     }
+    .ant-upload-list-picture-card-container{
+      height: 80px;
+      width: 80px;
+    }
     .ant-upload.ant-upload-select-picture-card,
     .ant-upload-list-picture-card .ant-upload-list-item{
       width:80px;
       height:80px;
       padding: 4px;
+      margin: 0;
     }
     .ant-upload-list-item-info{
       padding: 0 22px 0 4px;

+ 37 - 15
src/views/setting/noticeManagement/detailModal.vue

@@ -19,17 +19,17 @@
           <div v-html="detailsData.content" class="editor-box"></div>
         </a-descriptions-item>
         <a-descriptions-item label="图片" :span="2">
-          <img
-            v-for="(item,index) in imgPathsArr"
-            :key="index"
-            :src="item"
-            title="点击查看大图"
-            class="productPic"
-            @click="getPreview(item)" />
+          <div style="display: flex;">
+            <p class="pic-box" v-for="(item,index) in imgPathsArr" :key="index">
+              <img :src="item" title="点击查看大图" class="productPic" @click="getPreview(item)" />
+            </p>
+          </div>
           <span v-if="imgPathsArr.length == 0">--</span>
         </a-descriptions-item>
         <a-descriptions-item label="附件" :span="2">
-          <a v-for="(item,index) in attachPathsArr" :key="index" :href="item" style="display: block;"></a>
+          <p style="margin: 0 0 5px;" v-for="(item,index) in attachPathsArr" :key="index">
+            <a :href="item.filePath" :download="item.fileName" class="attachLink">{{ item.fileName }}</a>
+          </p>
           <span v-if="attachPathsArr.length == 0">--</span>
         </a-descriptions-item>
       </a-descriptions>
@@ -37,7 +37,7 @@
         <a-button id="announcementDetail-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
       </div>
     </div>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
+    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
       <img alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
   </a-modal>
@@ -62,7 +62,7 @@ export default {
       isShow: this.openModal, //  是否打开弹框
       detailsData: null, //  详情数据
       previewVisible: false,
-      previewImage: '',
+      previewImage: ''
     }
   },
   computed: {
@@ -92,11 +92,11 @@ export default {
       }
       return str
     },
-    imgPathsArr () {  //  图片数组
+    imgPathsArr () { //  图片数组
       return this.detailsData.imgPaths ? this.detailsData.imgPaths.split(',') : []
     },
-    attachPathsArr () {  //  附件数组
-      return this.detailsData.attachPaths ? this.detailsData.attachPaths.split(',') : []
+    attachPathsArr () { //  附件数组
+      return this.detailsData.attachList ? this.detailsData.attachList : []
     }
   },
   methods: {
@@ -141,10 +141,25 @@ export default {
     .ant-modal-body {
     	padding: 40px 40px 24px;
     }
-    .productPic{
-      cursor: pointer;
+    .ant-descriptions-item-label.ant-descriptions-item-colon{
+      width: 90px;
+    }
+    .pic-box{
       width: 200px;
+      height: 200px;
       margin-right: 10px;
+      display: inline-flex;
+      align-items: center;
+      border: 1px dashed #d9d9d9;
+      border-radius: 4px;
+      padding: 3px;
+      .productPic{
+        cursor: pointer;
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+        margin: 0 auto;
+      }
     }
     .editor-box{  //  编辑器基本样式初始化
       p{
@@ -164,5 +179,12 @@ export default {
       text-align: center;
       margin: 35px 0 10px;
     }
+    .attachLink{
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      &:hover{
+        text-decoration: underline;
+      }
+    }
   }
 </style>

+ 30 - 16
src/views/setting/noticeManagement/editModal.vue

@@ -50,20 +50,20 @@
             :fileSize="10"
             :maxNums="5"
             @change="changeImage"
-            listType="picture-card"
-            :uploadParams="uploadParams"></Upload>
+            listType="picture-card"></Upload>
           <span class="upload-desc">说明:单张大小小于10Mb,最多5张。</span>
         </a-form-model-item>
-        <a-form-model-item label="附件上传" prop="attachPaths">
+        <a-form-model-item label="附件上传" prop="attachList">
           <Upload
-            id="noticeEdit-attachPaths"
-            v-model="form.attachPaths"
-            ref="enclosure"
+            id="noticeEdit-attachList"
+            v-model="form.attachList"
+            ref="attachList"
             :fileSize="10"
             :maxNums="3"
             fileType="*"
-            @change="changeAttach"
-            :uploadParams="uploadParams"></Upload>
+            uploadType="attach"
+            :action="attachAction"
+            @change="changeAttach"></Upload>
           <span class="upload-desc">说明:单个文件小于10Mb,最多3个附件。</span>
         </a-form-model-item>
         <a-form-model-item label="公告内容" prop="content">
@@ -118,9 +118,10 @@ export default {
         title: '',
         releaseDate: null,
         imgPaths: '',
-        attachPaths: '',
+        attachList: '',
         content: ''
       },
+      attachList: [],
       rules: {
         type: [
           { required: true, message: '请选择类别', trigger: 'change' }
@@ -135,9 +136,7 @@ export default {
           { required: true, message: '请选择发布时间', trigger: 'change' }
         ]
       },
-      uploadParams: {
-        savePathType: 'web'
-      }
+      attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo'
     }
   },
   methods: {
@@ -150,9 +149,12 @@ export default {
       noticeDetail({ id: this.itemId }).then(res => {
         if (res.status == 200) {
           this.form = Object.assign(this.form, res.data)
+          this.form.attachList = ''
+          this.attachList = res.data.attachList
+          this.form.releaseDate = moment(res.data.releaseDate, 'YYYY-MM-DD HH:mm:ss')
           this.$refs.imgPaths.setFileList(res.data.imgPaths)
-          this.$refs.attachPaths.setFileList(res.data.attachPaths)
-          this.$refs.editor.setHtml(this.formData.content)
+          this.$refs.attachList.setFileList(res.data.attachList)
+          this.$refs.editor.setHtml(res.data.content)
         }
       })
     },
@@ -164,6 +166,7 @@ export default {
           const formData = JSON.parse(JSON.stringify(_this.form))
           formData.releaseDate = moment(formData.releaseDate).format('YYYY-MM-DD HH:mm:ss')
           formData.id = _this.itemId ? _this.itemId : undefined
+          formData.attachList = this.attachList
           noticeSave(formData).then(res => {
             if (res.status == 200) {
               _this.$message.success(res.message)
@@ -182,7 +185,7 @@ export default {
     },
     //  附件上传
     changeAttach (file) {
-      this.form.attachPaths = file
+      this.attachList = JSON.parse(file)
     },
     //  文本编辑器
     editorChange (html, text) {
@@ -198,6 +201,11 @@ export default {
     isShow (newValue, oldValue) {
       if (!newValue) {
         this.$emit('close')
+        this.attachList = []
+        this.$refs.imgPaths.setFileList('')
+        this.$refs.attachList.setFileList([])
+        this.$refs.editor.setHtml('')
+        this.$refs.ruleForm.resetFields()
       }
     },
     itemId (newValue, oldValue) {
@@ -212,7 +220,7 @@ export default {
 <style lang="less">
   .noticeEdit-modal{
     .ant-modal-body {
-    	padding: 40px 40px 24px;
+      padding: 40px 40px 24px;
     }
     .upload{
       width: 100%!important;
@@ -232,5 +240,11 @@ export default {
       text-align: center;
       margin: 35px 0 10px;
     }
+    #noticeEdit-attachList{
+      height: auto;
+    }
+    a{
+      color: inherit;
+    }
   }
 </style>