报告详情图片回显及预览功能实现

src/pages/business/common/projectMange/record/details.vue

@@ -60,6 +60,14 @@
           <view class="content-area-center-top"> 工作协调 </view>
           <u-text :text="item.coordinateWork" color="#000000" size="14"></u-text>
         </view>
+        <view class="content-area-center mb10">
+          <view class="content-area-center-top">图片 </view>
+            <view class="imageBox" v-if="item.reportImage">
+              <image class="image" style="width:50px;margin:5px" mode="widthFix" v-for="(a,index) in JSON.parse(item.reportImage)" :key="index" :src="a.url"  @click="previewImage(index)" />
+
+            </view>
+          <!-- <u-text :text='item.ccTo ? proxy.$common.mapping("nickName", "userId", item.ccTo, userData) : "无"' color="#000000" size="14"></u-text> -->
+        </view>
         <view class="content-area-center mb10">
           <view class="content-area-center-top">抄送人 </view>
           <u-text :text='item.ccTo ? proxy.$common.mapping("nickName", "userId", item.ccTo, userData) : "无"' color="#000000" size="14"></u-text>
@@ -93,10 +101,18 @@ const state = reactive({
     reportId: "",
   },
   userData:[],//用户列表
+  images:[],//图片列表
 });
 
 const { dataList, userData} = toRefs(state);
 
+function previewImage(index){
+  uni.previewImage({
+        current: index, // 当前显示图片索引
+        urls: state.images // 需要预览的图片http链接列表
+      });
+}
+
 
 /**
  * @初始化
@@ -115,6 +131,11 @@ function init() {
     .then((requset) => {
       dataList.value = requset.data.records;
       state.loading = false;
+      var imgs = JSON.parse(dataList.value[0].reportImage);
+      console.log(dataList.value[0].reportImage)
+      imgs.forEach(function(item){
+        state.images.push(item.url);
+      })
     })
     .catch((err) => {
       state.loading = false;

src/pages/business/common/projectMange/write/components/template1.vue

@@ -67,7 +67,7 @@
     </view>
     <view class="content-area-item mt10 p10 bg-white">
       <view class="font14 weight mb10">图片上传</view>
-      <oa-upload :uploadCount="5" :uploadList="state.form.reportFile" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
+      <oa-upload :uploadCount="5" :uploadList="state.form.reportImage" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
     </view>
 
     <view class="content-area-item mt10 p10 bg-white">
@@ -223,7 +223,7 @@ const state = reactive({
     sendDingTalk: 1,
     isRegularlySend: 0,
     timingTime: null,
-    reportFile: [],
+    reportImage: [],
   },
   projectsCheck: [],
   projectsList: [],
@@ -327,7 +327,7 @@ function modalConfirm() {
  * @图片上传成功回调
  */
  function uploadSuccessChange(e) {
-  state.form.reportFile.push({
+  state.form.reportImage.push({
     name: e.name,
     url: e.url,
   })
@@ -337,7 +337,7 @@ function modalConfirm() {
  * @图片删除回调
  */
  function uploadDeleteChange(e) {
-  state.form.reportFile = e;
+  state.form.reportImage = e;
   realTimeSaving()
 }
 
@@ -351,7 +351,7 @@ function handleSubmit() {
   state.form.workContents.forEach((e) => {
     e.workTime = Number(e.workTime);
   });
-  state.form.reportFile=JSON.stringify(state.form.reportFile)
+  state.form.reportImage=JSON.stringify(state.form.reportImage)
   projectApi()
     .ReportInsert(state.form)
     .then((requset) => {
@@ -361,10 +361,10 @@ function handleSubmit() {
       state.form.coordinateWork = null;
       state.form.isRegularlySend = 0;
       state.form.timingTime = null;
-      state.form.reportFile=[];
+      state.form.reportImage=[];
       // storageSystem.set("project", state);
     }).catch((err) => {
-      state.form.reportFile=JSON.parse(state.form.reportFile)
+      state.form.reportImage=JSON.parse(state.form.reportImage)
     });;
 }
 
@@ -374,13 +374,13 @@ watch(
     state.userList = [];
     state.projectsCheck = [];
     state.projectsList = [];
-    state.form.reportFile = [];
+    state.form.reportImage = [];
    
     Object.keys(props.projectList).forEach((key) => {
       state.form[key] = props.projectList[key];
     });
  
-    state.form.reportFile=state.form.reportFile?JSON.parse(state.form.reportFile):[];
+    state.form.reportImage=state.form.reportImage?JSON.parse(state.form.reportImage):[];
     state.form.workContents.forEach((e) => {
       state.projectsCheck.push(e.projectId);
     });

src/pages/business/common/projectMange/write/insert.vue

@@ -109,7 +109,7 @@ function handleSubmit(type, id) {
           workContents: newData.workContents,
           sendDingTalk: newData.sendDingTalk,
           ccTo: newData.ccTo,
-          reportFile: newData.reportFile,
+          reportImage: newData.reportImage,
           timingTime: newData.timingTime,
           isRegularlySend: newData.isRegularlySend,
         };