要货图片上传和嵌入第三方H5页面

pages.json

@@ -1135,6 +1135,28 @@
 				}
 				// "enablePullDownRefresh": true
 			}
+		},
+		{
+			"path" : "pages/out-web-site/out-web-site",
+			"style": {
+				"app-plus": {
+					"titleNView": {
+						"titleAlign": "left",
+						"titleColor": "#333",
+						"titleSize": "17px",
+						"backgroundColor": "#fff",
+						"titleText": "外部链接",
+						"autoBackButton": true,
+						"splitLine": {
+							"color": "#ccc",
+							"height": "0.5px"
+						}
+					}
+				},
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+			
 		}
 	],
 	"globalStyle": {
@@ -1168,12 +1190,14 @@
 				"iconPath": "static/image/tab_purchase@3x.png",
 				"selectedIconPath": "static/image/tab_purchase_red@3x.png",
 				"text": "要货"
-			}, {
+			},
+			{
 				"pagePath": "pages/message/message",
 				"iconPath": "static/image/tab_message@3x.png",
 				"selectedIconPath": "static/image/tab_message_red@3x.png",
 				"text": "消息"
-			}, {
+			},
+			{
 				"pagePath": "pages/usercenter/usercenter",
 				"iconPath": "static/image/tab_my@3x.png",
 				"selectedIconPath": "static/image/tab_my_red@3x.png",

pages/my-purchase/my-purchase.nvue

@@ -366,7 +366,7 @@
 					this.condition.startDate = this.handleDate(timeRangeFormat(item))
 				}
 				this.condition.endDate = this.handleDate(timeRangeFormat('tomorrow'))
-				this.pageList[this.tabIndex].refreshData()
+				this.pageList && this.pageList[this.tabIndex].refreshData()
 			},
 			handleDate(date){
 				const str1 = date.slice(0,4)

pages/my-purchase/order-item.nvue

@@ -138,10 +138,16 @@
 					<text class="detal-item-label">备注</text>
 					<text class="detal-item-value detal-item-value3">{{newsItem.remark}}</text>
 				</view>
-				<!-- <view class="block-detal-item attach-block">
+				<view class="block-detal-item attach-block">
 					<text class="detal-item-label">附件</text>
-					<image class="attach-file" src="@/static/image/avatar@3x.png" mode="aspectFit"></image>
-				</view> -->
+					<view class="upload-block">
+						<uni-file-picker readonly :value="allFiles" :imageStyles="imageStyles" file-mediatype="image">
+						</uni-file-picker>
+					</view>
+					<!-- <view class="" v-for="item in allFiles">
+						<image class="attach-file" :src="item" mode="aspectFit"></image>
+					</view> -->
+				</view>
 				<view class="float-btn-block">
 					<view class="float-btn" @click="handleShowReceiveDetail">
 						<text class="float-btn__text">{{ishowReceiveDetail?'收起':'展示完整信息'}}</text>
@@ -158,7 +164,9 @@
 	// #ifdef APP-NVUE
 	const dom = weex.requireModule('dom')
 	// #endif
-
+	import { doQuery, attachmentDownFile } from '@/servers/purchaseList.js'
+	import store from '@/store/index.js'
+	import { pathToBase64, base64ToPath } from 'image-tools'
 	export default {
 		props: {
 			newsItem: {
@@ -174,6 +182,7 @@
 				ishowReceiveDetail: false,
 				receiveInfoHeight: '132',
 				receiveInfoDetailSize: {},
+				allFiles: [],
 			}
 		},
 		// watch:{
@@ -186,10 +195,20 @@
 		// 	}	
 		// },
 		computed: {
+			imageStyles() {
+				return {
+					width: 64,
+					height: 64,
+					border: {
+						radius: '50%'
+					}
+				}
+			},
 			receiveInfoHeightComputed() {
 				console.log(this.receiveInfoHeight - 0,'[][]')
 				if(this.receiveInfoHeight - 0 === 0){
-					return { "minHeight": "385px" }
+					const height = this.allFiles.length > 0 ? 485 : 385
+					return { "minHeight": height + "px" }
 				}else{
 					return {
 						"height": `${this.receiveInfoHeight}px`
@@ -198,6 +217,7 @@
 			}
 		},
 		mounted() {
+			this.getFiles(this.newsItem.id)
 			// setTimeout(() => {
 			// 	const result = dom.getComponentRect(this.$refs.receiveInfo, option => {
 			// 		console.log('getComponentRect:', option)
@@ -208,6 +228,43 @@
 			// }, 100);
 		},
 		methods: {
+			async getFiles(id) {
+				const params = {
+					bizId: id,
+					bizCode: 'wantGoods'
+				}
+				const res= await doQuery(params)
+				res.data.forEach((ele,idx) => {
+					this.downFiles(ele)
+				});
+			},
+			async downFiles(item) {
+				// 获取arraybuffer格式数据
+				let res = await uni.request({
+					method: "POST",
+					url: `http://221.10.127.60:5000/crm-app/attachmentDownFile?id=`+item.id,
+					params: {
+					  id: item.id
+					},
+					header: {
+						'X-Auth-Token': store.state.vuex_token,
+						// 'content-type': 'multipart/form-data'
+					},
+					responseType: "arraybuffer"   //只有text、arraybuffer两种
+				})
+				 const buff = res[1].data
+				// 转成base64格式路径
+				const base64Src = 'data:image/png;base64,' + uni.arrayBufferToBase64(buff);
+				// 通过 image-tools  中方法再将base64路径转为普通路径，用于预览
+				const path = await  base64ToPath(base64Src);
+				const picObj = {
+					...item,
+					"name": item.fileName,
+					"extname": item.fileKind,
+					"url":path,
+				}
+				this.allFiles.push(picObj)
+			},
 			click() {
 				this.$emit('click');
 			},
@@ -496,4 +553,11 @@
 	.cell-list {
 		flex-direction: column;
 	}
+	.upload-block {
+		display: flex;
+		height: 388rpx;
+		border-radius: 4px;
+		margin-top: 20rpx;
+		flex-direction: column;
+	}
 </style>

pages/my-purchase/order-page.nvue

@@ -12,8 +12,8 @@
 				</div>
 			</uni-refresh>
 			<uni-cell v-for="(item, index) in dataList" :key="item.id">
-				<order-item v-if="!saveItemFlag" :newsItem="item" @click.native="goDetail(item)"></order-item>
-				<saveItem v-else :newsItem="item" @click.native="goDetail(item,'saveItem')"></saveItem>
+				<order-item v-if="!saveItemFlag && item.id" :newsItem="item" @click.native="goDetail(item)"></order-item>
+				<saveItem v-if="saveItemFlag && item.id" :newsItem="item" @click.native="goDetail(item,'saveItem')"></saveItem>
 			</uni-cell>
 			<uni-cell v-if="isLoading || dataList.length > 4">
 				<view class="loading-more">
@@ -33,7 +33,7 @@
 	import noData from '@/components/nodata.nvue';
 	import orderItem from './order-item.nvue';
 	import saveItem from './save-item.nvue';
-	import { findAppGoodsSingle, findSavedApplyBill } from '@/servers/purchaseList.js'
+	import { findAppGoodsSingle, findSavedApplyBill, doQuery } from '@/servers/purchaseList.js'
 	export default {
 		components: {
 			uniList,
@@ -112,6 +112,15 @@
 			// #endif
 		},
 		methods: {
+			async getFiles(id) {
+			  const params = {
+				bizId: id,
+				bizCode: 'wantGoods'
+			  }
+			  const res= await doQuery(params)
+			  console.log(res,'------')
+			  // this.gridOptions2.data = data
+			},
 			async loadData(refresh) {
 				if (this.isLoading) {
 					return;

pages/out-web-site/out-web-site.vue

+<template>
+	<view class="">
+		<view class="status_bar" :style="navHeight"></view>
+		<web-view ref="web-view" class="uni-flex-item" :src="src" :webview-styles="webview_styles" @message="message"
+			@error="error" @loading="loading" @loaded="loaded">
+		</web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				src: 'https://www.baidu.com',
+				webview_styles: {
+				}
+			}
+		},
+		onLoad() {
+			this.getWebviewPage()
+		},
+		computed: {
+			navHeight() {
+				return {
+					'height': `100px`
+				}
+			},
+		},
+		methods: {
+			getWebviewPage() {
+			  setTimeout(() => {
+				uni.setNavigationBarTitle({
+				  title: "需要显示的title",
+				});
+			  }, 2000);
+			},
+			message(event) {
+				console.log(JSON.stringify(event.detail));
+			},
+			error(event) {
+				console.log(JSON.stringify(event.detail));
+			},
+			loading(event) {
+				console.log(JSON.stringify(event.type));
+			},
+			loaded(event ) {
+				console.log(JSON.stringify(event.type));
+			},
+		}
+	}
+</script>
+
+<style>
+	.uni-input-v {
+		padding: 10rpx 0;
+	}
+
+	.uni-btn-ml {
+		margin-left: 10rpx;
+	}
+	.uni-flex-item{
+		height: 100%
+	}
+	.status_bar {
+		height: var(--status-bar-height);
+	}
+</style>

pages/purchase-receive/purchase-receive.nvue

@@ -117,7 +117,18 @@
 						</uni-file-picker>
 					</view> -->
 				</view>
-
+				<view class="middle summary">
+					<view class="summary-block">
+						<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
+						<text class="upload-text">附件上传(最多上传3张图片)</text>
+					</view>
+					<view class="upload-block">
+						<uni-file-picker ref='files' limit="3" :auto-upload='false' :value="allFilesPath" v-model="allFilesPath" file-mediatype="image"
+							:imageStyles="imageStyles" @select="select" @progress="progress" @success="success" @fail='fail' @delete='deletes'>
+							<text>+</text>
+						</uni-file-picker>
+					</view>
+				</view>
 				<!-- <text class="receive-record">历史收货信息</text>
 				<view class="middle view receive-record-view">
 					<view class="text-block text-block-last receive-record-info">
@@ -162,16 +173,20 @@
 	import {
 		mapState
 	} from 'vuex'
-	
+	import store from '@/store/index.js'
 	import {
 		querySysDictionaryDetailsByCode,
 		getReceipt,
 		findByCustomer,
 		startProcessInstanceByKey,
 		advance,
-		saveBizData
+		saveBizData,
+		webUploadFile,
+		doDeleteFile,
+		doQuery, 
+		attachmentDownFile
 	} from '@/servers/purchaseList.js'
-	
+	import { pathToBase64, base64ToPath } from 'image-tools'
 	export default {
 		data() {
 			return {
@@ -186,10 +201,16 @@
 				fileList: [],
 				scrollTop: 0,
 				objectId: '',
-				flag: false
+				flag: false,
+				allFiles: [],
+				allFilesPath: [],
 			}
 		},
 		props: {
+			sourceType: {
+				type: String,
+				default: ''
+			},
 			orderItem: {
 				type: Object,
 				default () {
@@ -211,6 +232,15 @@
 			}
 		},
 		computed: {
+			imageStyles() {
+				return {
+					width: 64,
+					height: 64,
+					border: {
+						radius: '50%'
+					}
+				}
+			},
 			navHeight() {
 				return {
 					'height': `${this.sysinfo.safeArea.top + 44}px`
@@ -267,7 +297,9 @@
 				_this.orderItem.spurtCodeUnit = data.selectShuntCode.info.partner
 				_this.orderItem.spurtCodeUnitName = data.selectShuntCode.info.name_org1
 			})
-		
+			if(this.sourceType === 'myPurchase'){
+				this.getFiles(this.orderItem.id)
+			}
 		},
 		onUnload() {
 			uni.$off('selectShuntAccountInfo')
@@ -288,6 +320,44 @@
 			// this.queryData()
 		},
 		methods: {
+			async getFiles(id) {
+				const params = {
+					bizId: id,
+					bizCode: 'wantGoods'
+				}
+				const res= await doQuery(params)
+				res.data.forEach((ele,idx) => {
+					this.downFiles(ele)
+				});
+			},
+			async downFiles(item) {
+				console.log(item,'item')
+				// 获取arraybuffer格式数据
+				let res = await uni.request({
+					method: "POST",
+					url: `http://221.10.127.60:5000/crm-app/attachmentDownFile?id=`+item.id,
+					params: {
+					  id: item.id
+					},
+					header: {
+						'X-Auth-Token': store.state.vuex_token,
+						// 'content-type': 'multipart/form-data'
+					},
+					responseType: "arraybuffer"   //只有text、arraybuffer两种
+				})
+				 const buff = res[1].data
+				// 转成base64格式路径
+				const base64Src = 'data:image/png;base64,' + uni.arrayBufferToBase64(buff);
+				// 通过 image-tools  中方法再将base64路径转为普通路径，用于预览
+				const path = await  base64ToPath(base64Src);
+				const picObj = {
+					...item,
+					"name": item.fileName,
+					"extname": item.fileKind,
+					"url":path,
+				}
+				this.allFilesPath.push(picObj)
+			},
 			fnCheckOrderByNo() {
 				this.$refs.popup.close()
 				uni.redirectTo({
@@ -410,27 +480,49 @@
 			progress(e) {
 				console.log('上传进度：', e)
 			},
-			// 选择文件
-			select(e) {
-				console.log('选择文件：', e ,this.fileList)
-				// let _this = this
-				// const unit16Array = await formatToUnit16Array(e.tempFiles[0].file)
-				// let reader = new FileReader();
-				// let fileObj = {
-				// 	FILENAME: e.tempFiles[0].name,
-				// 	MIMETYPE: '',
-				// 	DOC_TYPE: e.tempFiles[0].fileType,
-				// 	XCONTENT: unit16Array,
-				// 	FILELENGTH: e.tempFiles[0].size,
-				// 	ZZFLD00002D: this.userInfo.code,
-				// 	ZZFLD00002D_DSCR: this.userInfo.name,
-				// }
-				// reader.readAsDataURL(e.tempFiles[0].file);
-				// reader.onload = function(e) {
-				// 	// fileObj.XCONTENT = e.target.result;
-				// 	_this.imgFileBase64.push(fileObj);
-				// 	console.log('2222', e)
-				// }
+			async select(data) {
+				data.tempFilePaths.forEach((item,idx) => {
+					console.log('idx',data.tempFilePaths[idx],data.tempFiles[idx].file.name)
+					uni.uploadFile({
+						url: `http://221.10.127.60:5000/crm-app/webUpload/ajaxUpload`,
+						filePath: data.tempFilePaths[idx],
+						name: 'file',
+						formData: {
+							bizId: this.orderItem.fileBizId,
+							bizCode: 'wantGoods',
+							formSecretLevel: 0,
+							name: data.tempFiles[idx].file.name,
+							type: data.tempFiles[idx].file.fileType,
+							lastModifiedDate: data.tempFiles[idx].file.lastModifiedDate,
+							size: data.tempFiles[idx].file.size,
+							// file: data.tempFiles[idx].file
+						},
+						header: {
+							// 'Access-Control-Allow-Origin': 'http://221.10.127.60',
+							'Access-Control-Allow-Origin': '*',
+							'method': "POST",
+							'X-Auth-Token': store.state.vuex_token,
+							// 'content-type': 'multipart/form-data'
+							
+						},
+						success: (uploadFileRes) => {
+							this.allFiles.push(JSON.parse(uploadFileRes.data).data)
+							console.log(this.allFiles, '成功');
+							uni.showToast({
+								title: '上传成功！',
+								duration: 2000,
+								icon: 'none'
+							})
+						},
+						fail: (uploadFileRes) => {
+							uni.showToast({
+								title: '上传失败！',
+								duration: 2000,
+								icon: 'none'
+							})
+						},
+					})
+				})
 			},
 			// 上传成功
 			success(e) {
@@ -440,10 +532,33 @@
 			fail(e) {
 				console.log('上传失败：', e)
 			},
+			async deletes(e){
+				const params = {
+					id: e.tempFile.id,
+					isCheck: false
+				}
+				const res = await doDeleteFile(params)
+				if(res.status - 0 === 1){
+					const arr = this.allFiles.filter(item => item.fileName === e.tempFile.name || item.fileName === e.tempFile.fileName )
+					this.allFiles = [...arr]
+					console.log(this.allFiles)
+				}
+			},
 			preStep() {
 				// uni.switchTab({
 				// 	url: '/pages/purchase-main/purchase-main'
 				// })
+				// 返回上一级 把刚刚上传的附件删除
+				if(this.allFiles.length > 0){
+					this.allFiles.forEach(ele => {
+						const params = {
+							id: ele.id,
+							isCheck: false
+						}
+						const res = doDeleteFile(params)
+						this.allFiles = []
+					});
+				}
 				this.$emit('click', 'purchaseMain')
 			},
 			async preSave(){
@@ -735,27 +850,6 @@
 		font-weight: 600;
 	}
 
-	.upload-block {
-		display: flex;
-		align-items: center;
-		width: 188rpx;
-		height: 188rpx;
-		background: #f5f6f7;
-		border: 1px dashed #dedede;
-		border-radius: 4px;
-		margin-bottom: 40rpx;
-	}
-
-	.uni-file-picker {
-		width: 100%;
-		height: 100%;
-	}
-
-	/deep/ .uni-file-picker__container {
-		width: 100%;
-		height: 100%;
-	}
-
 	.receive-record-view {
 		padding: 40rpx 48rpx;
 	}
@@ -919,4 +1013,48 @@
 		padding-top: 30rpx;
 		justify-content: start;
 	}
+	.summary-block {
+		display: flex;
+		align-items: center;
+	}
+	.summary {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		margin-bottom: 32rpx;
+		padding: 32rpx 48rpx 140rpx;
+	}
+	.icon_plan {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+	
+	.upload-block {
+		display: flex;
+		// width: 100%;
+		// align-items: center;
+		// justify-content: center;
+		// align-self: center;
+		// width: 388rpx;
+		height: 388rpx;
+		// background: #f5f6f7;
+		// border: 1px dashed #dedede;
+		border-radius: 4px;
+		margin-top: 90rpx;
+		flex-direction: column;
+	}
+	.upload-text {
+		flex: 2;
+		font-size: 32rpx;
+		color: #333;
+		font-weight: 500;
+	}
+	.summary {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		margin-bottom: 32rpx;
+		padding: 32rpx 48rpx 140rpx;
+	}
 </style>

pages/purchase/purchase-apply.nvue

@@ -2,7 +2,7 @@
 	<view class="apply-history view" :style="winHeight">
 		<view class="status_bar" :style="navHeight"></view>
 		<view class="apply-history-wrapper view">
-			<component :style="componentHeight" :orderItem='detail' :channelTypeArr='channelTypeArr' :is="currentTabComponent" @click="changeComponent" @submit="submit"></component>
+			<component :style="componentHeight" :sourceType='sourceType' :orderItem='detail' :channelTypeArr='channelTypeArr' :is="currentTabComponent" @click="changeComponent" @submit="submit" ></component>
 		</view>
 	</view>
 </template>
@@ -10,7 +10,7 @@
 	import {
 		mapState
 	} from 'vuex'
-	import { initAppWantGoods, getChannelType, findById } from '@/servers/purchaseList.js'
+	import { initAppWantGoods, getChannelType, findById, generateUUID } from '@/servers/purchaseList.js'
 
 	import purchaseMain from '../purchase-main/purchase-main'
 	import purchaseReceive from '../purchase-receive/purchase-receive'
@@ -125,6 +125,18 @@
 			this.sourceType === 'purchase' && this.getDetail()
 		},
 		methods: {
+			// changeUUid(res){
+			// 	if(res.data.length > 0){
+			// 		this.detail.fileBizId = res.data[0].bizId
+			// 	}else{
+			// 		this.generateUUID()
+			// 	}
+			// },
+			// 获取生成文件id
+			async generateUUID(){
+				const res = await generateUUID()
+				this.detail.fileBizId = res.data
+			},
 			async findById(id){
 				const res = await findById(id)
 				this.detail = {
@@ -139,6 +151,8 @@
 					 shuntTypeName: res.data.shuntChannelsTypeTextView,
 					...res.data,
 					 shuntDealerName: res.data.shuntDealer,
+					 fileBizId: res.data.id,
+					 bizCode: 'wantGoods'
 				}
 				this.getChannelType()
 			},
@@ -176,8 +190,11 @@
 					 billStatus: "E001",
 					 status: 0,
 					 isShunt: '0',
+					 fileBizId: null,
+					 bizCode: 'wantGoods'
 				}
 				this.getChannelType()
+				this.sourceType === 'purchase' && this.generateUUID()
 			},
 			changeComponent(com) {
 				this.currentTabComponent = com;

servers/purchaseList.js

@@ -81,3 +81,38 @@ export async function getCtrbase(params) {
 	const res = await apiHelper.post('/sap/bc/ztpm/to_new_crm/transdata/get_ctrbase', params)
 	return res
 }
+/**
+ * 生成唯一id
+ */
+export async function generateUUID(params) {
+	const res = await apiHelper.get('/crm-app/utils/randomUUID')
+	return res
+}
+/**
+ * 公共api
+ * 上传附件
+ * @param {*} params
+ */
+export async function webUploadFile(params) {
+	const res = await apiHelper.post('/crm-app/webUpload/ajaxUpload', params)
+	return res
+}
+/**
+ * 公共api
+ * 删除附件
+ * @param {*} params
+ */
+export async function doDeleteFile(params) {
+	const res = await apiHelper.post('/crm-app/attachment/doDelete',  params, {'Content-Type': 'application/x-www-form-urlencoded'})
+	return res
+}
+// 获取要货附件
+export async function doQuery(params) {
+	const res = await apiHelper.post('/crm-app/attachment/doQuery',  params, {'Content-Type': 'application/x-www-form-urlencoded'})
+	return res
+}
+// 下载附件
+export async function attachmentDownFile(params) {
+	const res = await apiHelper.post('/crm-app/attachmentDownFile',  params)
+	return res
+}
\ No newline at end of file