uniapp-sample-scan/pages/collections/sample-collection-detail.vue

<template>
	<view style="height: 100vh;">
		<uni-nav-bar v-if="!isUploaded" dark :fixed="true" :border="false" background-color="#253a6f" status-bar
			left-icon="left" left-text="完成" title="样品采集" @clickLeft="goBack" />
		<uni-nav-bar v-if="isUploaded" dark :fixed="true" :border="false" background-color="#253a6f" status-bar
			left-icon="left" left-text="返回" title="样品采集" @clickLeft="goBack" />

		<view class="container" :style="{'height': clientHeight + 'px'}">
			<view class="header">
				<view class="segmented-control-item" :class="{ 'active': activeTab === 0 }" @click="switchTab(0)">接待信息
					<view class="underline" v-show="activeTab === 0"></view>
				</view>
				<view class="segmented-control-item" :class="{ 'active': activeTab === 1 }" @click="switchTab(1)">选样扫描
					<view class="underline" v-show="activeTab === 1"></view>
				</view>
				<view class="segmented-control-item" :class="{ 'active': activeTab === 2 }" @click="switchTab(2)">选样列表
					<view class="underline" v-show="activeTab === 2"></view>
				</view>

			</view>

			<!-- <view class="absolute-element"> -->
			<!-- <scroll-view class="scroll-view" scroll-y="true"> -->
			<swiper class="scroll-view swiper" style="height: 100%;" :current="activeTab" duration="0"
				@change="handleSwiperChange">
				<swiper-item>
					<!-- 根据 activeTab 显示不同的页面 -->
					<!-- <view v-if="activeTab === 0"> -->
					<!-- <scroll-view scroll-y="true" style="height: 100%;"> -->
					<scroll-view scroll-y="true" :style="{'height': clientHeight + 'px'}">
						<view class="content" v-if="activeTab === 0">
							<view class="content1">
								<u--form labelPosition="left" :model="baseData" ref="uForm" labelWidth='40'
									:rules="rules" :errorType="errorType">
									<u-form-item left-icon="../../static/meeting.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="exhibitionName" borderBottom
										@click="">
										<u--input v-model.trim="baseData.exhibitionName" placeholder="请输入展会名称"
											border="none"></u--input>
									</u-form-item><u-form-item left-icon="../../static/customer.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="customerName" borderBottom
										@click="">
										<u--input v-model.trim="baseData.customerName" placeholder="请输入客户名称"
											border="none"></u--input>
									</u-form-item><u-form-item left-icon="../../static/receiver.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="receiver" borderBottom @click="">
										<u--input v-model.trim="baseData.receiver" placeholder="请输入接待人姓名"
											border="none"></u--input>
									</u-form-item><u-form-item prop="exhibitionNote" borderBottom @click="">
										<!-- <uni-easyinput type="textarea" v-model="baseData.exhibitionNote" placeholder="展会备注信息" /> -->
										<u--textarea confirmType="null" v-model="baseData.exhibitionNote"
											placeholder="展会备注信息"></u--textarea>
									</u-form-item>
									<uni-section required>
										<uni-file-picker :value="baseData.fileSavePath"
											:source-type="['album', 'camera']" @select="handleFileSelect"
											@delete="handleDelete" ref="filePicker" :image-styles="imageStyles">
											<view style="color: #c0c4cc ;font-size: 15px;">上传图片</view>
										</uni-file-picker>
									</uni-section>
									<u-button v-if="!isUploaded" style="margin-top: 5px;" @click="handleSave"
										type="primary" color="#253a6f" text="保存接待信息"></u-button>
								</u--form>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item style="height: 100%;">
					<!-- <scroll-view scroll-y="true" style="height: 100%;"> -->
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="content" v-if="activeTab === 1">
							<view class="content1">


								<u--form labelPosition="left" :model="detailData" ref="uForm1" labelWidth='40'
									:rules="rules2" :errorType="errorType">
									<u-form-item left-icon="../../static/customer.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="" borderBottom @click="">
										<u--input readonly v-model.trim="baseData.customerName" placeholder=""
											border="none"></u--input>
									</u-form-item>
									<u-form-item left-icon="../../static/code.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="barCode" borderBottom>
										<u--input type="text" v-model.trim="detailData.barCode" @confirm="getScanValue"
											:focus="focus" placeholder="样品条码序列号" border="none"></u--input>
										<u-button slot="right" type="primary" hairline size="small"
											url="/pages/scan/scanView" @click="goScan()"
											v-if="!isUploaded">扫描条码</u-button>
										<!-- <u-button slot="right" type="primary" hairline size="small" v-if="!isUploaded"> -->
										<!-- <navigator url="/pages/collections/scanView">扫描条码</navigator> -->
										<!-- </u-button> -->
									</u-form-item>
									<u-form-item left-icon="../../static/bs.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="bpQuantity" borderBottom>
										<u--input type="number" v-model.trim="detailData.bpQuantity"
											placeholder="布片数量(默认为1)" border="none"></u--input>
									</u-form-item><u-form-item left-icon="../../static/gs.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="gyQuantity" borderBottom>
										<u--input type="number" v-model.trim="detailData.gyQuantity"
											placeholder="挂样数量(默认为0)" border="none"></u--input>
									</u-form-item><u-form-item left-icon="../../static/ms.png"
										leftIconStyle="width:60rpx;height:60rpx" prop="myQuantity" borderBottom>
										<u--input type="number" v-model.trim="detailData.myQuantity"
											placeholder="米样数量(默认为0)" border="none"></u--input>
									</u-form-item><u-form-item borderBottom>
										<u--textarea autoHeight confirmType="null" v-model="detailData.note"
											placeholder="样品备注信息"></u--textarea>
									</u-form-item>
									<uni-section>
										<view style="padding-top: 0;">
											<uni-file-picker v-model="detailData.fileSavePath"
												:source-type="['album', 'camera']" :image-styles="imageStyles"
												@select="handleDetailFileSelect" @delete="handleDetailFileDelete"
												ref="filePicker">
												<view style="color: #c0c4cc ;font-size: 15px;">上传图片</view>
											</uni-file-picker>
										</view>
									</uni-section>
									<u-button @click="handleSaveDetail" style="margin-top: 5px;" type="primary"
										color="#253a6f" text="保存选样" v-if="!isUploaded"></u-button>
								</u--form>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<!-- <scroll-view scroll-y="true" style="height: 100%;"> -->
					<scroll-view scroll-y="true" :style="{'height': clientHeight + 'px'}">
						<view class="content" v-if="activeTab === 2">
							<view class="content2">

								<view class="list" v-for="(item, index) in detailList" :key="index">
									<view class="list-item">
										<view style="padding-top: 5px;">
											<checkbox-group @change="toggleSelect(index)">
												<checkbox
													style="transform: scale(0.6,0.6);activeBackgroundColor: #253a6f;iconColor: #253a6f;"
													v-model="selected[index]" :checked="selected[index]"
													:key="item.id" />
											</checkbox-group>

										</view>
										<view>
											<view class="item" @click="goDetailPage(item.id)">
												<text style="color: #949494;">序号:{{detailList.length-index}}</text>
											</view>
											<view class="item" @click="goDetailPage(item.id)">
												<image class="icon" src="/static/barcode.png" />
												<text
													style="color: #949494;margin-top: 3px;margin-left: 10px;">{{ item.barCode }}</text>
											</view>
											<view style="display: flex;margin-top: 20rpx;"
												@click="goDetailPage(item.id)">
												<view class="box" style="background-color: #F29047;">
													<text class="text">布样:{{item.bpQuantity}}</text>
												</view>
												<view class="gap"></view>
												<view class="box" style="background-color: #3AA693;">
													<text class="text">挂样:{{ item.gyQuantity }}</text>
												</view>
												<view class="gap"></view>
												<view class="box" style="background-color: #3855A4;">
													<text class="text">米样:{{ item.myQuantity }}</text>
												</view>
											</view>

											<view class="item"
												:style="{ 'flex-wrap': item.fileSavePath.length <= 2 ? 'nowrap' : 'wrap' }">
												<u--image class="image-item" v-for="(element, i) in item.fileSavePath"
													:key="i" :src="element" width="80px" height="80px"
													@click="previewImage(item,i)"></u--image>
											</view>

											<text class="item" style="color: #949494;">备注信息：{{ item.note }}</text>
										</view>
									</view>
								</view>

							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<!-- </scroll-view> -->
			<view class="bottom-bar" v-show="activeTab === 2" v-if="!isUploaded">
				<view style="display: flex; width: 90%;margin: 0 auto;align-items:center">
					<!-- <checkbox-group style="margin-left: 20px;">
						<view style="width: 300rpx;">
							<checkbox-group @change="toggleSelectAll">

								<checkbox :value="selectAll" :checked="selectAll"
									style="transform: scale(0.6,0.6);activeBackgroundColor: #253a6f;iconColor: #253a6f;" />
								全选 已选{{selectedCount}}项


							</checkbox-group>
						</view>
					</checkbox-group> -->
					<checkbox-group style="margin-left: 10px;" @change="toggleSelectAll">
						<view style="width: 300rpx;">
							<checkbox :value="selectAll" :checked="selectAll"
								style="transform: scale(0.5,0.5);activeBackgroundColor: #253a6f;iconColor: #253a6f;" />
							全选 已选{{selectedCount}}项
						</view>
					</checkbox-group>
					<!-- <view style="display: flex;margin-left:70px;align-items: center;"> -->
					<view style="margin-right: 10px;">
						<button type="default"
							style="color:#ffffff;backgroundColor:#6DFBDB; border-radius: 50px;width:150rpx; height:65rpx;font-size: unset;visibility: hidden;">删除</button>

					</view>
					<view>
						<button
							style="color:#ffffff;backgroundColor:#6DFBDB; border-radius: 50px;width:150rpx; height:65rpx;font-size: unset;display: flex;justify-content: center; align-items:center"
							@click="changeListData">删除</button>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		openSqlite,
		executeSql,
		closedb,
		getTable,
		isTable,
		getAllField,
		insertAll,
		addSql,
		getPageList,
		selectList,
		deleteSql,
		updateSql,
		selectSql,
		batchUpdate
	} from "@/utils/database";
	const scanner = uni.requireNativePlugin('Ba-Scanner');
	export default {
		data() {
			return {
				tableName: "public",
				baseData: {
					exhibitionName: '',
					customerName: '',
					receiver: '',
					exhibitionNote: "",
					fileList: [],
				},
				initbaseData: {},
				detailData: {
					barCode: '',
					bpQuantity: '',
					gyQuantity: '',
					myQuantity: '',
					note: "",
					fileSavePath: [],
				},
				clientHeight: '',
				isUploaded: false,
				detailList: [],
				errorType: 'toast',
				rules: {
					exhibitionName: [{
						required: true,
						message: '请输入展会名称',
					}],
					customerName: [{
						required: true,
						message: '请输入客户名称',
					}],
					receiver: [{
						required: true,
						message: '请输入接待人姓名',
					}]
				},
				rules2: {
					barCode: [{
						required: true,
						message: '条形码不能为空',
					}],
					bpQuantity: [{
							type: 'number',
							max: 5,
							message: '布片数量过大',
						},
						{
							validator: this.validateDecimal,
							trigger: 'blur'
						}
					],
					gyQuantity: [{
							type: 'number',
							max: 5,
							message: '挂样数量过大',
						},
						{
							validator: this.validateDecimal,
							trigger: 'blur'
						}
					],
					myQuantity: [{
							type: 'number',
							max: 5,
							message: '米样数量过大',
						},
						{
							validator: this.validateDecimal,
							trigger: 'blur'
						}
					]
					// barCode: [{
					// 	required: true,
					// 	message: '条形码不能为空',
					// }],
					// barCode: [{
					// 	required: true,
					// 	message: '条形码不能为空',
					// }]
				},
				imageStyles: {
					border: {
						color: "#dadbde",
						width: 1,
						style: '',
						radius: '2px'
					}
				},
				focus: true,
				selected: [], // 保存每个数据项是否被选中的状态
				selectAll: false, // 全选状态
				selectedCount: 0,
				activeTab: 0, // 当前选中的页面索引
				imageUrl: 'file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/uniapp_save/17049440506630.jpg',
				fileSavePath: []
			};
		},

		async onShow() {
			/**
			 * 数据库设置名称 在 database.js 文件中
			 */
			// console.log("所有表名称",await getTable())
			// 默认打开数据库,并创建表
			await this.openSqlite()
			await this.createTable()
			await this.createDetailTable()
			const res = uni.getSystemInfo({
				success: (res => {
					console.log(res.windowHeight)
					if (res.windowHeight < 600) {
						this.clientHeight = 520
					} else {
						this.clientHeight = res.windowHeight - 150;
					}
					console.log(res.windowHeight)
					// console.log(getApp().globalData.navHeight)
				})
			});
			console.log(this.clientHeight)
			// plus.key.hideSoftKeybord();

		},
		mounted() {
			this.selected = new Array(this.detailData.length).fill(false)
		},
		watch: {
			selected: {
				handler() {
					this.selectedCount = this.selected.filter(value => value === true).length;
				},
				deep: true,
			},
		},
		computed: {

		},
		//获取上一页传过来的参数
		onLoad(option) {
			plus.key.hideSoftKeybord();
			uni.$on('data', (data) => {
				console.log(data); // 输出 { name: 'John', age: 25 }
				this.detailData.barCode = data
				this.pointblur()
				plus.key.hideSoftKeybord();
			})
			uni.$on('data1', (data) => {
				console.log(data)
				this.getData(data)
				this.switchTab(2)

			})
			// 监听自定义事件 receiveData
			uni.$on('receiveData', (data) => {
				console.log(data)
				this.getData(data)
				this.pointblur()
				plus.key.hideSoftKeybord();
			});
			// if (option.hasOwnProperty('barCode')) {
			// 	this.detailData.barCode = option.barCode
			// 	this.switchTab(1)
			// 	return
			// }
			if (option.hasOwnProperty('uid')) {
				this.getData(option.uid)
				this.switchTab(1)
				return
			} else {
				this.switchTab(2)
			}

			// console.log(option)
			// console.log(option.uid)
			// this.getData(option.uid)
			// uni.hideKeyboard();
			// this.initbaseData = this.baseData
			// console.log(this.baseData)
			// this.baseData = JSON.parse(decodeURIComponent(option.data));
			// console.log(this.baseData.fileList)


		},
		methods: {
			// 自定义校验函数，验证小数点位数
			validateDecimal(rule, value, callback) {
				console.log(value)
				if (value) {
					// 小数点位数不超过两位
					if (!/^\d+(\.\d{1,2})?$/.test(value)) {
						return callback(new Error('小数点后不能超过两位'));
					}
					callback();
				}

			},

			handleSwiperChange(event) {
				console.log(event.detail.current)
				this.activeTab = event.detail.current;
				if (event.detail.current == 1) {
					console.log(event.detail.current)
					setTimeout(() => {
						console.log('隐藏')
						plus.key.hideSoftKeybord();
						// uni.hideKeyboard()
					}, 700)
				}
			},

			goBack() {
				if (this.isUploaded) {
					uni.$emit('refreshData');
					uni.navigateBack({
						delta: 1, // 返回上一层页面
						success() {
							console.log('返回上一页成功');
						},
						fail(err) {
							console.error('返回上一页失败', err);
						}
					});
					return
				}
				let self = this
				console.log(self.baseData)
				console.log(self.initbaseData)
				console.log(this.compareObjects(self.baseData, self.initbaseData))
				if (!this.compareObjects(self.baseData, self.initbaseData)) {
					uni.showModal({
						// title: '提示',
						content: '您有接待信息尚未保存，确定要退出吗?',
						confirmText: '保存并退出',
						success: async function(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								// self.handleSaveNoValidate()
								const urls = self.baseData.fileSavePath.map(item => item.url);
								const fileSavePath = urls.join(',');
								try {
									await updateSql('public', {
										exhibitionName: self.baseData.exhibitionName,
										customerName: self.baseData.customerName,
										receiver: self.baseData.receiver,
										exhibitionNote: self.baseData.exhibitionNote,
										fileSavePath: fileSavePath
									}, {
										uid: self.baseData.uid
									})
								} catch (e) {
									uni.showToast({
										title: "修改报错，请查看控制台",
										icon: "none"
									});
									console.error("修改报错", e)
								}
								uni.$emit('refreshData');
								uni.navigateBack({
									delta: 1, // 返回上一层页面
									success() {
										console.log('返回上一页成功');
										let page = getCurrentPages().pop();
										if (page) {
											page.onLoad(page.options); //执行上个页面的方法
										};
									},
									fail(err) {
										console.error('返回上一页失败', err);
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				} else {
					uni.showModal({
						// title: '提示',
						content: '确认选样完结?',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								uni.$emit('refreshData');
								uni.navigateBack({
									delta: 1, // 返回上一层页面
									success() {
										console.log('返回上一页成功');

									},
									fail(err) {
										console.error('返回上一页失败', err);
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				}

			},
			onBackPress(e) {
				console.log("监听返回按钮事件", e);
				if (e.from == "backbutton") {
					this.goBack()
					return true
				}

			},
			async getData(uid) {
				try {
					let where = {
						"uid": uid,
					}
					let detailwhere = {
						"publicId": uid,
						'deleted': 0
					}
					let res = await selectList(this.tableName, where)
					let res2 = await selectList('detail', detailwhere, "createTime desc")
					console.log("加载数据", res)
					res.forEach(item => {
						if (item.fileSavePath === "") {
							item.fileSavePath = []; // 如果为空字符串，则设置为空数组
						} else {
							// 将 fileSavePath 字符串转换为数组
							const files = item.fileSavePath.split(',');

							// 使用 map() 方法将每个文件路径转换为对象
							item.fileSavePath = files.map(file => {
								const fileName = file.split('/').pop(); // 提取文件名
								const extname = fileName.split('.').pop(); // 提取扩展名

								return {
									name: fileName,
									extname: extname,
									url: file,
									path: file
								};
							});

						}

					});

					const detailRes = res2.map(({
						fileSavePath,
						...rest
					}) => ({
						fileSavePath: fileSavePath ? fileSavePath.split(',') : [],
						...rest
					}));

					// console.log(result[0]);
					this.baseData = res[0]
					if (res[0].uploaded == 1) {
						this.isUploaded = true
					}
					this.initbaseData = {
						...res[0]
					};
					this.detailList = detailRes
					console.log(this.baseData)
					console.log(this.detailList)
					// this.total = res.data.data.total
				} catch (e) {
					uni.showToast({
						title: "报错，请查看控制台",
						icon: "none"
					});
					console.error("报错", e)
				}
			},
			getDetailData(id) {
				try {
					let where = {
						"id": id,
						'deleted': 0
					}
					let res = selectList('detail', where)
					return res
					// console.log("加载数据", res)
					// const result = res.map(({
					// 	fileSavePath,
					// 	...rest
					// }) => ({
					// 	fileSavePath: fileSavePath ? fileSavePath.split(',') : [],
					// 	...rest
					// }));


					// console.log(result[0]);
					// this.detailData = result[0]
				} catch (e) {
					uni.showToast({
						title: "报错，请查看控制台",
						icon: "none"
					});
					console.error("报错", e)
				}
			},
			getScanValue(event) {
				if (this.isUploaded) { //已上传不执行代码
					return;
				}
				// console.log(event)
				setTimeout(() => {
					console.log(this.detailData.barCode)
					// console.log("event", event)
					// this.detailData.barCode  = event
					this.handleSaveDetail1()
					// plus.key.hideSoftKeybord()
				}, 400)

				// this.handleSaveDetail()
				// this.pointblur();
				// console.log('hahahha')
			},
			pointblur() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
			onmarked(type, result) {
				var text = '未知: ';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				return text + result;
			},
			onScan() { //单次，默认界面
				console.log('onScan')
				let that = this;
				scanner.onScan({
						// barcodeFormats: ["QR Code", "Code 128"],
						// isShowVibrate: true,
						// isShowBeep: true,
						hintText: '单次扫码',
					},
					(ret) => {
						console.log(ret)
						if (ret.result) {
							that.resultList.push(ret.result);
							that.showToast(ret.result);
						}
					});
			},
			goScan() {
				let params = this.detailData
				params.publicId = this.baseData.uid
				console.log('onScan')
				uni.navigateTo({
					url: '/pages/collections/scanView?params=' +
						JSON.stringify(params)
				});
				// url: '/pages/automatedwarehouse/index?formData=' + encodeURIComponent(JSON.stringify(this.formData)),
				//扫描设备二维码
				// scan() {
				// 		const currentWebview = this.$mp.page.$getAppWebview();
				// 		var barcode = plus.barcode.create('barcode', [plus.barcode.CODE128], {
				// 			top: '100px',
				// 			left: '0px',
				// 			width: '300px',
				// 			height: '300px',
				// 			position: 'static'
				// 		});


				//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理  
				//注意扫码区域需为正方形，否则影响扫码识别率  
				// currentWebview.append(barcode);
				// barcode.start();
				// barcode.onmarked = function(type, code, file) {
				// 	// 在这里处理扫码成功后的逻辑
				// 	console.log('扫码成功，类型：', type);
				// 	console.log('扫描结果：', code);
				// 	console.log('文件路径：', file);

				// 	// 示例：展示扫描结果
				// 	alert('扫描成功\n类型：' + type + '\n结果：' + code);
				// };
				// uni.scanCode({
				// 	scanType: ['CODE_128'],
				// 	success: qrcode => {
				// 		let scanRedult = qrcode.result
				// 		this.detailData.barCode = scanRedult
				// 	}
				// })
			},
			handleFileSelect(e) {
				console.log(this.baseData)
				const self = this
				this.handleSaveImages(e) //上传图片
					.then(e => {
						// console.log('returneeeee', e);
						console.log(self.baseData)
						// console.log('fileSavePath', self.baseData.fileSavePath);
						self.baseData.fileSavePath = self.baseData.fileSavePath.concat(e.tempFiles)
						console.log(self.baseData)
					})

			},
			handleDetailFileSelect(e) {
				console.log(e.tempFiles)
				const self = this
				this.handleSaveImages(e) //上传图片
					.then(e => {
						// console.log('returneeeee', e);
						self.detailData.fileSavePath = self.detailData.fileSavePath.concat(e.tempFiles)
						// console.log('fileSavePath', self.detailData.fileSavePath)
					})

			},
			async handleSaveImages(e) {
				console.log('eeee', e)
				for (const item of e.tempFiles) {
					console.log('bbbb', item)
					try {
						const trueurl = await this.saveImage(item.path);
						item.url = trueurl;
						console.log('item', item)

					} catch (error) {
						console.error(`Failed to convert image to Base64:`, error);
					}
				}
				return e

			},
			// 定义一个异步函数上传图片
			async saveImage(filePath) {
				console.log(filePath)
				return new Promise((resolve, reject) => {
					uni.saveFile({
						tempFilePath: filePath,
						success: res => {
							console.log('文件保存成功', res);
							resolve(res.savedFilePath);
						},
						fail: err => reject(err)
					})
				});
			},

			handleDelete(e) {
				console.log(e)
				// uni.removeSavedFile({
				// 	filePath: res.fileList[0].filePath,
				// 	complete: function(res) {
				// 		console.log(res);
				// 	}
				// });
				this.baseData.fileSavePath = this.baseData.fileSavePath.filter(item => item !== e.tempFile)
			},
			handleDetailFileDelete(e) {
				// console.log(e)
				// uni.removeSavedFile({
				// 	filePath: res.fileList[0].filePath,
				// 	complete: function(res) {
				// 		console.log(res);
				// 	}
				// });
				this.detailData.fileSavePath = this.detailData.fileSavePath.filter(item => item !== e
					.tempFile)
			},
			handleSave() {
				this.$refs['uForm'].validate().then(async () => {
					// console.log(this.baseData)
					const urls = this.baseData.fileSavePath.map(item => item.url);
					const fileSavePath = urls.join(',');
					// console.log(fileSavePath);
					// const fileSavePath = this.baseData.fileSavePath.join(',');
					// console.log(fileSavePath);
					try {
						await updateSql(this.tableName, {
							exhibitionName: this.baseData.exhibitionName,
							customerName: this.baseData.customerName,
							receiver: this.baseData.receiver,
							exhibitionNote: this.baseData.exhibitionNote,
							fileSavePath: fileSavePath
						}, {
							uid: this.baseData.uid
						})
						const self = this
						uni.showToast({
							title: "接待信息保存成功",
							icon: "none",
							success: function() {
								self.detailData.customerName = self.baseData
									.customerName
								self.initbaseData = self.baseData
								// showToast 弹窗关闭后执行跳转
								self.switchTab(1)
							}
						});
					} catch (e) {
						uni.showToast({
							title: "修改报错，请查看控制台",
							icon: "none"
						});
						console.error("修改报错", e)
					}

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors[0].message)
				})
			},
			handleSaveNoValidate() {
				self.$refs['uForm'].validate().then(async () => {
					const urls = self.baseData.fileSavePath.map(item => item.url);
					const fileSavePath = urls.join(',');
					try {
						await updateSql(self.tableName, {
							exhibitionName: self.baseData.exhibitionName,
							customerName: self.baseData.customerName,
							receiver: self.baseData.receiver,
							exhibitionNote: self.baseData.exhibitionNote,
							fileSavePath: fileSavePath
						}, {
							uid: self.baseData.uid
						})
						const self = self
						uni.showToast({
							title: "接待信息保存成功",
							icon: "none",
							success: function() {
								self.detailData.customerName = self.baseData
									.customerName
								// showToast 弹窗关闭后执行跳转
								self.switchTab(1)
							}
						});
					} catch (e) {
						uni.showToast({
							title: "修改报错，请查看控制台",
							icon: "none"
						});
						console.error("修改报错", e)
					}

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors[0].message)
				})
			},
			async handleSaveDetail1() {
				this.$refs['uForm1'].validate().then(async () => {
					console.log('aaaaa', this.detailData.fileSavePath)
					// 使用 map 方法提取需要的属性值
					const urls = this.detailData.fileSavePath.map(item => item.url);
					console.log(urls)
					// 使用 join 方法将剩余元素以逗号拼接为字符串
					const fileSavePath = urls.join(',');
					console.log(fileSavePath); // 输出 "Alice, Charlie"
					try {
						// detailData: {
						// 	barCode: '',
						// 	bpQuantity: '',
						// 	gyQuantity: '',
						// 	myQuantity: '',
						// 	note: "",
						// 	fileList: [],
						// },
						let b = await addSql('detail', {
							publicId: this.baseData.uid,
							barCode: this.detailData.barCode,
							bpQuantity: this.detailData.bpQuantity || 1,
							gyQuantity: this.detailData.gyQuantity || 0,
							myQuantity: this.detailData.myQuantity || 0,
							note: this.detailData.note,
							fileSavePath: fileSavePath
						})
						const self = this
						uni.showToast({
							title: "添加成功",
							icon: "none",
							duration: 1000,
							success: function() {
								self.getData(self.baseData.uid)
								self.detailData.barCode = ''
								self.detailData.bpQuantity = ''
								self.detailData.gyQuantity = ''
								self.detailData.myQuantity = ''
								self.detailData.note = ''
								self.detailData.fileSavePath = []
								self.pointblur()
								plus.key.hideSoftKeybord();
								// showToast 弹窗关闭后执行跳转
								self.switchTab(1)
							}
						});
					} catch (e) {
						console.error("添加数据，报错", e)
					}
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors[0].message)
					this.pointblur()
				})
			},
			async handleSaveDetail() {
				this.$refs['uForm1'].validate().then(async () => {
					// 使用 map 方法提取需要的属性值
					console.log('aaaa', this.detailData)
					const urls = this.detailData.fileSavePath.map(item => item.url);
					// 使用 join 方法将剩余元素以逗号拼接为字符串
					const fileSavePath = urls.join(',');
					console.log(fileSavePath);
					if ('id' in this.detailData) {
						// barCode: '',
						// bpQuantity: '',
						// gyQuantity: '',
						// myQuantity: '',
						// note: "",
						// fileSavePath: [],
						try {
							await updateSql('detail', {
								barCode: this.detailData.barCode,
								bpQuantity: this.detailData.bpQuantity || 1,
								gyQuantity: this.detailData.gyQuantity || 0,
								myQuantity: this.detailData.myQuantity || 0,
								note: this.detailData.note,
								fileSavePath: fileSavePath
							}, {
								id: this.detailData.id
							})
							const self = this
							uni.showToast({
								title: "修改成功",
								icon: "none",
								success: function() {
									self.getData(self.baseData.uid)
									self.detailData = {
										barCode: '',
										bpQuantity: '',
										gyQuantity: '',
										myQuantity: '',
										note: "",
										fileSavePath: []
									}
									// showToast 弹窗关闭后执行跳转
									self.switchTab(2)
								}
							});
						} catch (e) {
							uni.showToast({
								title: "修改报错，请查看控制台",
								icon: "none"
							});
							console.error("修改报错", e)
						}

					} else {
						try {
							let b = await addSql('detail', {
								publicId: this.baseData.uid,
								barCode: this.detailData.barCode,
								bpQuantity: this.detailData.bpQuantity || 1,
								gyQuantity: this.detailData.gyQuantity || 0,
								myQuantity: this.detailData.myQuantity || 0,
								note: this.detailData.note,
								fileSavePath: fileSavePath
							})
							const self = this
							uni.showToast({
								title: "添加成功",
								icon: "none",
								success: function() {
									self.getData(self.baseData.uid)
									self.detailData = {
										barCode: '',
										bpQuantity: '',
										gyQuantity: '',
										myQuantity: '',
										note: "",
										fileSavePath: []
									}
									// showToast 弹窗关闭后执行跳转
									self.switchTab(2)
								}
							});
						} catch (e) {
							console.error("添加数据，报错", e)
						}

					}
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors[0].message)
				})
			},
			switchTab(index) {
				console.log('index的值为', index)
				if (index == 1) {
					setTimeout(() => {
						console.log('隐藏')
						plus.key.hideSoftKeybord();
						// uni.hideKeyboard()
					}, 700)
				}
				// if (index == 1) {
				// 	console.log('隐藏键盘')
				// 	uni.hideKeyboard();
				// 	// document.activeElement.blur()
				// }

				this.activeTab = index; // 切换页面

			},
			async openSqlite() {
				// 打开数据库
				try {
					let b = await openSqlite()
					// uni.showToast({
					// 	title: "打开数据库成功",
					// 	icon: "none"
					// })
				} catch (e) {
					console.error("打开数据库，报错", e)
				}
			},
			// 创建表
			async createTable() {
				let sql = this.createTableSql_outbound()
				try {
					let exist = await isTable(this.tableName)
					console.log("表是否存在", exist)
					if (!exist) {
						let res = await executeSql(sql)
						uni.showToast({
							title: "新增数据表成功",
							icon: "none"
						})
						console.log("新增表ord_storage_order", res)
					} else {
						// uni.showToast({
						// 	title: "数据表已存在",
						// 	icon: "none"
						// })
					}
				} catch (e) {
					uni.showToast({
						title: "新增数据表失败",
						icon: "none"
					})
					console.error("新增表报错ord_storage_order", e)
				}
			},
			// 创建选样表
			async createDetailTable() {
				let sql = this.createTableSql_detail()
				try {
					let exist = await isTable('detail')
					console.log("表是否存在", exist)
					if (!exist) {
						let res = await executeSql(sql)
						uni.showToast({
							title: "新增数据表成功",
							icon: "none"
						})
						console.log("新增表detail", res)
					} else {
						// uni.showToast({
						// 	title: "数据表已存在",
						// 	icon: "none"
						// })
					}
				} catch (e) {
					uni.showToast({
						title: "新增数据表失败",
						icon: "none"
					})
					console.error("新增表报错ord_storage_order", e)
				}
			},
			/**
			 * 创建表， 仅供参考
			 * @returns {string}
			 * 因为java后台用的id，所以这里用fid 作为自增id
			 */

			createTableSql_outbound() {
				return "CREATE TABLE IF NOT EXISTS `public` (" +
					"  `id` INTEGER PRIMARY KEY AUTOINCREMENT," +
					"  `uid` varchar(20) DEFAULT NULL ," +
					"  `exhibitionName` varchar(50) DEFAULT NULL ," +
					"  `customerName` varchar(50) DEFAULT NULL ," +
					"  `receiver` varchar(50) DEFAULT NULL ," +
					"  `exhibitionNote` varchar(500) DEFAULT NULL ," +
					"  `fileSavePath` varchar(2000) DEFAULT NULL ," +
					"  `createTime` datetime  DEFAULT NULL default(datetime('now','localtime')) ," +
					"  `updateTime` datetime DEFAULT NULL default(datetime('now','localtime')) ," +
					"  `deleted` char(1) DEFAULT '0' " +
					"); "
			},
			createTableSql_detail() {
				return "CREATE TABLE IF NOT EXISTS `detail` (" +
					"  `id` INTEGER PRIMARY KEY AUTOINCREMENT," +
					"  `publicId` varchar(20) NOT NULL ," +
					"  `barCode` varchar(50) NOT NULL ," +
					"  `bpQuantity` INT  NOT NULL ," +
					"  `gyQuantity` INT  NOT NULL ," +
					"  `myQuantity` INT  NOT NULL ," +
					"  `note` varchar(500) DEFAULT NULL ," +
					"  `fileSavePath` varchar(2000) DEFAULT NULL ," +
					"  `createTime` TEXT  DEFAULT NULL default(datetime('now','localtime')) ," +
					"  `updateTime` TEXT  DEFAULT NULL default(datetime('now','localtime')) ," +
					"  `deleted` char(1) DEFAULT '0' " +
					"); "
			},
			// 添加数据
			async addData() {
				const uniqueId = Date.now().toString();
				const result = this.fileSavePath.join(','); // 使用逗号作为分隔符
				try {
					let b = await addSql(this.tableName, {
						uid: uniqueId,
						exhibitionName: this.baseData.exhibitionName,
						customerName: this.baseData.customerName,
						receiver: this.baseData.receiver,
						exhibitionNote: this.baseData.exhibitionNote,
						fileSavePath: result
					})
					console.log('vvvvvv', b)
					uni.showToast({
						title: "添加成功",
						icon: "none"
					});
					this.switchTab(1)
				} catch (e) {
					console.error("添加数据，报错", e)
				}

			},
			toggleSelectAll(e) {
				console.log(e.detail)
				console.log(this.selectAll = !this.selectAll)
				this.selectAll = e.detail.value[0] == false ? true : false
				// console.log(this.selectAll)
				this.selected = this.detailList.map(() => this.selectAll);
				// console.log(this.selected)
			},
			toggleSelect(index) {
				console.log(index)
				this.selected[index] = !this.selected[index];
				this.selectAll = this.selected.every(item => item);
				this.selectedCount = this.selected.filter(value => value === true)
					.length;
				console.log(this.selectAll)
			},
			isEmptyObject(obj) {
				return Object.keys(obj).length === 0;
			},
			async changeListData() {

				const listToDelete = this.detailList.filter((item, index) =>
					this.selected[index]).map(item => {
					return {
						id: item.id,
						deleted: 1
					};
				});
				if (this.isEmptyObject(listToDelete)) {
					uni.showToast({
						title: "请选择删除条目",
						icon: "none"
					});
					return
				}
				console.log(listToDelete)
				console.log('selected', this.selected)
				let self = this
				uni.showModal({
					// title: '提示',
					content: '确认删除选中的条目?',
					success: async function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							try {

								await batchUpdate("detail",
									listToDelete, "id")
								// 过滤掉arr1中对应arr2中值为true的索引的元素
								self.detailList = self.detailList
									.filter((item, index) => !self
										.selected[
											index])
								self.selected = self.selected
									.filter(item => item !== true);
								self.selectAll = false
								console.log(self.list)
								console.log("self.selected", self.selected)
								uni.showToast({
									title: "删除成功",
									icon: "none",
									success: function() {}
								});
							} catch (e) {
								console.error("批量修改数据，报错", e)
							}

						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})


			},
			goDetailPage(id) { //选样详情页面
				console.log(id)
				this.getDetailData(id).then(res => {
					console.log('returneeeee', res);
					res.forEach(item => {
						if (item.fileSavePath === "") {
							item
								.fileSavePath = []; // 如果为空字符串，则设置为空数组
						} else {
							// 将 fileSavePath 字符串转换为数组
							const files = item.fileSavePath
								.split(',');
							// 使用 map() 方法将每个文件路径转换为对象
							item.fileSavePath = files.map(
								file => {
									const fileName = file
										.split('/')
										.pop(); // 提取文件名
									const extname =
										fileName.split('.')
										.pop(); // 提取扩展名
									return {
										name: fileName,
										extname: extname,
										url: file
									};
								});

						}

					});
					this.detailData = res[0]
					this.switchTab(1)
				})
			},
			//图片预览
			previewImage(item, i) {
				uni.previewImage({
					current: i,
					urls: item.fileSavePath
				});
			},
			// 比较两个对象是否相同
			compareObjects(obj1, obj2) {
				// 将两个对象转换为字符串并进行比较
				const str1 = JSON.stringify(obj1);
				const str2 = JSON.stringify(obj2);

				// 比较转换后的字符串是否相等
				return str1 === str2;
			}

		},
	};
</script>

<style>
	/* 	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	} */

	.container {
		position: relative;
		width: 100%;
		/* height: 520px; */
		/* border: solid 1px blue; */
		/* height: 100vh; */
		overflow: hidden;
		/* 隐藏溢出内容，禁止滚动 */
	}

	.header {
		position: fixed;
		background-color: #253a6f;
		height: 170rpx;
		width: 100%;
		z-index: 1;
		display: flex;
	}

	.scroll-view {
		position: absolute;
		left: 50%;
		top: 60%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: 100%;
		overflow: auto;
		/* 设置滚动 */
		background-color: white;
		/* background-color: #EDEDED; */
		border-radius: 5px;
		/* padding: 0 20px; */
		z-index: 999;

	}


	.content {
		width: 100%;
		margin-bottom: 80px;
		overflow-y: auto;
		z-index: 999;
		/* background-color: #EDEDED; */
		background-color: white;
		/* border: 1px solid red; */
		/* 允许内容纵向滚动 */
		/* 此处设置滚动区域的内容样式 */
	}

	.content1 {
		height: 100%;
		/* 	width: 100%;
		margin-bottom: 50px;
		overflow-y: auto;
		z-index: 999; */
		/* background-color: #EDEDED; */
		/* background-color: white; */
		/* border: 1px solid blue; */
		padding: 0 20px;
		/* 允许内容纵向滚动 */
		/* 此处设置滚动区域的内容样式 */
	}

	.content2 {
		/* 	width: 100%;
		margin-bottom: 50px;
		overflow-y: auto;
		z-index: 999; */
		background-color: #EDEDED;
		/* background-color: white; */
		/* border: 1px solid blue; */
		/* padding: 0 20px; */
		/* 允许内容纵向滚动 */
		/* 此处设置滚动区域的内容样式 */
	}

	.icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}


	.segmented-control-item {
		flex: 1;
		text-align: center;
		padding: 10px;
		color: white;
	}

	.underline {
		bottom: 0;
		left: 0;
		width: 20%;
		height: 1px;
		background-color: white;
		/* 设置下划线的颜色 */
		display: none;
		margin: 0 auto;
	}

	.segmented-control-item.active .underline {
		display: block;
	}

	.card-bottom {
		touch-action: none;

		// height: 60px;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background-color: white;
		border-top: 1px;
		display: flex;
		flex-direction: column;
	}

	.list {
		margin-bottom: 10px;
		/* border: 1px solid blue; */
		border-radius: 5px;
		background-color: white;
	}

	.list-item {
		display: flex;
		/* border: 1px solid red; */
	}

	.item {
		display: flex;
		align-items: center;
		padding-top: 10px;
	}

	.bottom-bar {
		position: fixed;
		/* 将底部操作栏固定在页面底部 */
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		/* text-align: center; */
		background-color: white;
		/* color: #fff; */
		font-size: 32rpx;
		line-height: 80rpx;
		z-index: 999;
	}

	.box {
		width: 150rpx;
		height: 50rpx;
		/* border: 2rpx solid #333; */
		border-radius: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.text {
		color: white;
	}

	.gap {
		width: 20rpx;
	}

	.image-item {
		margin-right: 5px;
		margin-bottom: 5px;
		border: solid 1px #dadbde;
	}

	button::after {
		border: 0; // 或者 border: none;
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 80rpx !important;
		border: 2px solid #ccc;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font: normal normal normal 14px/1 uni;
		content: "EA08";
		font-size: 0;
		/* 重点使用这一步取消的默认样式 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -48%) scale(1);
		-webkit-transform: translate(-50%, -48%) scale(1);
	}

	/deep/ .uni-checkbox-input-checked::before {
		width: 19px;
		height: 19px;
		background: #253a6f;
		border-radius: 50%;
		/* background: url(../../static/img/seal.png) no-repeat center; */
	}
</style>