图片上传九宫格

src/views/modules/workRecord/dailyrecordinfo.vue

@@ -77,7 +77,8 @@
         <el-table-column prop="createdTime" label="发布时间" header-align="center" align="center"></el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="addHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text" size="small" @click="addHandle(scope.row.id,false)">{{ $t('update') }}</el-button>
+            <el-button type="text" size="small" @click="addHandle(scope.row.id,true)">{{ '查看' }}</el-button>
             <el-button v-if="$hasPermission('news:dailyrecordinfo:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
         </el-table-column>
@@ -150,9 +151,9 @@ export default {
       e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
       this.dataForm.createdBy = e.target.value
     },
-    addHandle (id) {
+    addHandle (id, disabled) {
       this.$parent.selectComponent = 'DailyrecordinfoDetail'
-      this.$router.push({ path: '/workRecord-dailyrecordinforoute', query: { id: id } })
+      this.$router.push({ path: '/workRecord-dailyrecordinforoute', query: { id: id, disabled: disabled } })
     },
     // 随手记类型取值变化事件
     selectModel (event) {

src/views/modules/workRecord/dailyrecordinfoDetail.vue

@@ -1,11 +1,13 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-__masteruserrelation}">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+    <el-form>
       <el-form-item>
         <el-button type="primary" @click="backToUserRelationList">{{"返回"}}</el-button>
-        <el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+        <el-button v-if="!pageDisabled" type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
       </el-form-item>
+    </el-form>
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'" :disabled="pageDisabled">
       <el-form-item v-if="dailyTypeArr.length > 0" label="随手记" prop="dailyType">
         <el-select v-model="dataForm.dailyType" placeholder="随手记类型" @change="selectModel($event)" clearable style="width:50%">
           <el-option v-for="item in dailyTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" >
@@ -46,8 +48,10 @@
       </el-form-item>
       <el-form-item label="添加图片" v-loading="loading" prop="images">
         <!-- :action="uploadUrl" -->
+        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
           <el-upload
-            action="https://jsonplaceholder.typicode.com/posts/"
+            :action="uploadUrl"
+            :class="{hide:hideUpload}"
             list-type="picture-card"
             :file-list="dataForm.images"
             :limit=9
@@ -55,7 +59,8 @@
             :on-remove="handleRemove"
             :on-success="handleAvatarSuccess"
             :on-error="handelError"
-            :before-upload="beforeAvatarUpload">
+            :before-upload="beforeAvatarUpload"
+            style="width:40%">
             <i class="el-icon-plus"></i>
           </el-upload>
           <el-dialog :visible.sync="dialogVisible">
@@ -103,6 +108,8 @@ export default {
       isAble: false,
       meetTypeArr: [],
       dailyTypeArr: [],
+      hideUpload: false,
+      pageDisabled: false,
       // imgUrlArr: [],
       uploadUrl: '',
       loading: false,
@@ -141,9 +148,13 @@ export default {
     }
   },
   created: function () {
-    this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+    // this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+    this.uploadUrl = `http://219.146.91.110:10000/epdc-api/oss/file/uploadImg?token=${Cookies.get('token')}`
   },
   mounted () {
+    console.log('this.$route.query.disabled:' + this.$route.query.disabled)
+    this.pageDisabled = this.$route.query.disabled
+    this.hideUpload = this.$route.query.disabled
     if (this.$route.query.id !== '' && this.$route.query.id != null) {
       this.dataForm.id = this.$route.query.id
       this.getInfo()
@@ -164,7 +175,7 @@ export default {
       })
     },
     beforeAvatarUpload (file) {
-      if (this.imgUrlArr.length === 9) {
+      if (this.dataForm.length === 9) {
         this.$message.error('最多上传9张图片!')
         return false
       }
@@ -179,11 +190,16 @@ export default {
       }
     },
     handleAvatarSuccess (res, file) {
+      console.log('res:')
+      console.log(res)
+      console.log('file:')
+      console.log(file)
       this.loading = false
       // this.imgUrlArr.push({ url: file.url, thumbnail: file.url, fileType: 1 })
-      this.dataForm.images.push({ url: file.url, thumbnail: file.url, fileType: 1 })
+      this.dataForm.images.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1 })
       console.log('++++++新增后+++++++')
       console.log(this.dataForm.images)
+      this.hideUpload = this.dataForm.images.length >= 9
     },
     handelError () {
       this.loading = false
@@ -191,10 +207,11 @@ export default {
     handleRemove (file, fileList) {
       for (var i = 0; i < this.dataForm.images.length; i++) {
         let item = this.dataForm.images[i]
-        if (item.url === file) {
+        if (item.url === file.url) {
           this.dataForm.images.splice(i, 1)
         }
       }
+      this.hideUpload = this.dataForm.images.length >= 9
       console.log('++++++删除出后+++++++')
       console.log(this.dataForm.images)
     },
@@ -218,6 +235,10 @@ export default {
           ...this.dataForm,
           ...res.data
         }
+        // 判断是否存在九张照片，九张照片隐藏上传操作按钮
+        if (!this.$route.query.disabled) {
+          this.hideUpload = this.dataForm.images.length >= 9
+        }
         // 随手记下拉框赋值
         this.getDailyTypeArrInfo('0')
       }).catch(() => {})
@@ -298,3 +319,8 @@ export default {
   }
 }
 </script>
+<style>
+.hide .el-upload--picture-card {
+    display: none;
+}
+</style>