附件上传及回显

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

@@ -64,9 +64,15 @@
           <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>
+          <view v-for="(file, index) in JSON.parse(item.reportFile)" :key="index" style="font-size:12px">
+            <uni-link :href="file.url" text="file.url" style="color:#333">{{file.name}}</uni-link>
+          </view>
+      
         </view>
         <view class="content-area-center mb10">
           <view class="content-area-center-top">抄送人 </view>
@@ -102,6 +108,7 @@ const state = reactive({
   },
   userData:[],//用户列表
   images:[],//图片列表
+  files:[],//附件列表
 });
 
 const { dataList, userData} = toRefs(state);
@@ -132,10 +139,14 @@ function init() {
       dataList.value = requset.data.records;
       state.loading = false;
       var imgs = JSON.parse(dataList.value[0].reportImage);
+      var files= JSON.parse(dataList.value[0].reportFile);
       console.log(dataList.value[0].reportImage)
       imgs.forEach(function(item){
         state.images.push(item.url);
       })
+      files.forEach(function(item){
+        state.files.push(item.url);
+      })
     })
     .catch((err) => {
       state.loading = false;

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

@@ -69,6 +69,26 @@
       <view class="font14 weight mb10">图片上传</view>
       <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">
+      <view class="font14 weight mb10">附件上传</view>
+      <uni-file-picker limit="100" 
+					@select='selectUpload' 
+					:auto-upload='false' 
+					file-extname='png,git,pdf,docx,doc,xls,xlsx,ppt,pptx,txt,zip,rar,7z,gz,bz2,tar,tgz,tbz,txz,apk,ipa,mp3,mp4,avi,flv,rmvb,wmv,mkv,mov,wma,aac,m4a,amr,ogg,flac,wav,amr,ape,m4r,aac,ac3,dts,m4b,m4p,m4v,mp2,mpe,mpeg,mpg,mpv,ogv,rm,swf,vob,wmv,3gp,3g2,asf,asx,avi,flv,m2ts,m4v,mkv,mov,mp4,mpg,mpeg,rm,swf,vob,wmv,3gp,3g2,asf,asx,avi,' 
+					file-mediatype="all" 
+		  >
+        <u-button class="mt20" type="primary" style="width: 100px; height: 25px"  icon="plus" size="mini"  shape="circle"> 点击上传 </u-button>
+
+      </uni-file-picker>
+       <!-- 文件列表回显 -->
+       <br>
+      <view v-for="(file, index) in state.form.reportFile" :key="index" style="border-bottom:1px solid #eee;margin:6px;padding:6px;font-size:12px">
+       <uni-link :href="file.url" text="file.url">{{file.name}}</uni-link>
+        <uni-icons type="closeempty" size="12" style="float:right" @click="delectFile(file)"></uni-icons>
+      </view>
+    </view>
+
+    
 
     <view class="content-area-item mt10 p10 bg-white">
       <view class="font14 weight mb10">抄送到人</view>
@@ -208,6 +228,7 @@ const props = defineProps({
   },
 });
 /*----------------------------------变量声明-----------------------------------*/
+
 const modal = reactive({
   timeShow: false,
   timeValue: Number(new Date()),
@@ -224,6 +245,7 @@ const state = reactive({
     isRegularlySend: 0,
     timingTime: null,
     reportImage: [],
+    reportFile: [],
   },
   projectsCheck: [],
   projectsList: [],
@@ -232,7 +254,12 @@ const state = reactive({
   saveTime: "",
 });
 const { timeShow, timeValue, modalShow } = toRefs(modal);
-const { form, projectsCheck, projectsList, userList, userDate, saveTime } = toRefs(state);
+const { form, projectsCheck, projectsList, userList, userDate, saveTime,reportFile } = toRefs(state);
+
+
+
+
+
 
 /**
  * @初始化
@@ -340,6 +367,45 @@ function modalConfirm() {
   state.form.reportImage = e;
   realTimeSaving()
 }
+/**
+ * @文件上传
+ */
+function delectFile(param){
+  state.form.reportFile = state.form.reportFile.filter(function (item) {
+    return item.name!=param.name;
+  });
+  realTimeSaving()
+}
+/**
+ * @文件删除
+ */
+function selectUpload(e) {
+	console.log('上传：', e)
+    e.tempFilePaths.forEach((item,index) => {
+      uni.uploadFile({
+        url: 'http://172.16.120.165:801/dev-api/service-file/upload', 
+        filePath: item,
+        name: 'file',
+        success: (uploadFileRes) => {
+          state.form.reportFile.push(JSON.parse(uploadFileRes.data).data)
+          realTimeSaving()
+        },
+        fail: (err) => {
+          console.log(err);
+        }
+      })
+   })
+}
+// function delectUpload(e){
+//   console.log(e)
+// }
+// function uploadSuccess(e) {
+// console.log('上传成功', e)
+// }
+// function uploadFail(e) {
+// 	console.log('上传失败：', e)
+// }
+
 
 
 /** 提交 */
@@ -351,20 +417,23 @@ function handleSubmit() {
   state.form.workContents.forEach((e) => {
     e.workTime = Number(e.workTime);
   });
-  state.form.reportImage=JSON.stringify(state.form.reportImage)
+  state.form.reportImage=JSON.stringify(state.form.reportImage);
+  state.form.reportFile=JSON.stringify(state.form.reportFile);
   projectApi()
     .ReportInsert(state.form)
     .then((requset) => {
       proxy.$tab.redirectTo("/pages/business/common/projectMange/record/index"); //返回到需要执行方法的页面
-      state.form.workContents = [];
-      state.form.tomorrowPlan = "";
-      state.form.coordinateWork = null;
-      state.form.isRegularlySend = 0;
-      state.form.timingTime = null;
-      state.form.reportImage=[];
+      // state.form.workContents = [];
+      // state.form.tomorrowPlan = "";
+      // state.form.coordinateWork = null;
+      // state.form.isRegularlySend = 0;
+      // state.form.timingTime = null;
+      // state.form.reportImage=[];
+      // state.form.reportFile=[];
       // storageSystem.set("project", state);
     }).catch((err) => {
       state.form.reportImage=JSON.parse(state.form.reportImage)
+      state.form.reportFile=JSON.parse(state.form.reportFile)
     });;
 }
 
@@ -375,12 +444,14 @@ watch(
     state.projectsCheck = [];
     state.projectsList = [];
     state.form.reportImage = [];
+    state.form.reportFile = [];
    
     Object.keys(props.projectList).forEach((key) => {
       state.form[key] = props.projectList[key];
     });
  
     state.form.reportImage=state.form.reportImage?JSON.parse(state.form.reportImage):[];
+    state.form.reportFile=state.form.reportFile?JSON.parse(state.form.reportFile):[];
     state.form.workContents.forEach((e) => {
       state.projectsCheck.push(e.projectId);
     });
@@ -453,8 +524,15 @@ onUnload(() => {
   uni.$off("UserMall"); //将值删除监听器
 });
 </script>
-
+<style lang="scss" >
+ :deep(.uni-file-picker__lists, .is-text-box){
+  display:none!important;
+  opacity:0!important;
+  height:0!important;
+}
+</style>
 <style lang="scss" scoped>
+
 .checkbox-group-title{
   display:block;width:100%;
   font-size:16px;

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

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