hitap-chat/pages/investigation/detail.vue

<template>
	<view id="page">
		<view class="Width100 Box BorderBox">
			<view class="Content BorderBox Width100">
				<top-title @skipPage="$.back(1)" :isCuMethod="true" :is-show-left="true" title="三轮车信息登记"
					:rightWidth='120' class="custom_bg">
				</top-title>
			</view>
			<view class="formBox">
				<uni-forms :modelValue="formData" border>
					<view class="label-box">
						<view class="border"></view> 车辆信息
					</view>
					<uni-forms-item label="车辆号牌" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px ">
							<input type="text" :placeholder="editFlag?'请填写车辆号牌':''" v-model="formData.vehicleLicense"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆类型" class="border-bottom" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click="handleShowDrop('vehicleType') ">
							<u-picker :show="pickerType == 'vehicleType'" :columns="[this.enumList.vehicleTypeEnum]"
								@cancel="pickerType = ''" keyName='enumname'
								@confirm="e=>handleSelect(e,'vehicleType')"></u-picker>
							<view :class="formData.vehicleType?'':'gary'" class="font_style">
								{{editFlag?formData.vehicleType ||'请选择车辆类型':formData.vehicleType}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆颜色" class="border-bottom" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click=" handleShowDrop('vehicleColor')">
							<u-picker :show="pickerType == 'vehicleColor'" :columns="[this.enumList.vehicleColorEnum]"
								@cancel="pickerType = ''" keyName='enumname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'vehicleColor')"></u-picker>
							<view :class="formData.vehicleColor?'':'gary'" class="font_style">
								{{editFlag?formData.vehicleColor ||'请选择车辆颜色':formData.vehicleColor}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆品牌" class="border-bottom">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写车辆品牌':''" v-model="formData.vehicleBrand"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="车架号" class="border-bottom" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写车架号':''" v-model="formData.vin"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<view class="label-box">
						<view class="border"></view> 驾驶人信息
					</view>
					<uni-forms-item label="驾驶人" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写驾驶人姓名':''" v-model="formData.driverName"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="身份证号" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写驾驶人身份证号':''" v-model="formData.driverIdNumber"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="联系电话" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写驾驶人联系电话':''" v-model="formData.driverPhone"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="准驾车型" class="border-top">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							>
							<!-- <u-picker :show="pickerType === 'driverAuthorizedModel'"
								:columns="[this.enumList.getVehicleAuthorizedModelEnum]" @cancel="pickerType = ''"
								keyName='enumname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'driverAuthorizedModel')"></u-picker> -->
							<!-- <view :class="formData.driverAuthorizedModel?'':'gary'"
								style="text-align: left;width: 190rpx;" class="font_style">
								{{editFlag?formData.driverAuthorizedModel || '请选择准驾车型':formData.driverAuthorizedModel}}
							</view> -->
							<multiplePick v-model="multiplePickValue" :columns="multiplePickColumns"
								@confirm="multiplePickConfirm" :disabled="!editFlag"/>
						</view>
						<!-- <view v-if="formData.driverAuthorizedModel && editFlag"
							style="width: 10%;position: absolute;right: 0;top: 0;"><uni-icons
								@click="multiplePickValue = ''" type="clear" color="#7e7d96ff" size="36">
							</uni-icons>
						</view> -->
					</uni-forms-item>
					<uni-forms-item label="街镇" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click="handleShowDrop('streetCommunity')">
							<u-picker :show="pickerType === 'streetCommunity'" :columns="[this.streetCommunityByXq]"
								@cancel="pickerType = ''" keyName='jdname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'streetCommunity')"></u-picker>
							<view :class="formData.streetCommunity?'':'gary'" class="font_style">
								{{editFlag? formData.streetCommunity || '请选择街镇':formData.streetCommunity}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="村社区" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click="handleShowDrop('villageCommunity') ">
							<u-picker :show="pickerType === 'villageCommunity'" :columns="[this.streetCommunityByJd]"
								@cancel="pickerType = ''" keyName='sqname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'villageCommunity')"></u-picker>
							<view :class="formData.villageCommunity?'':'gary'" class="font_style">
								{{editFlag? formData.villageCommunity || '请选择村社区':formData.villageCommunity}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="村社区干部" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写村社区干部':''" v-model="formData.communityCadre"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<!-- 					<uni-forms-item label="村社区干部电话" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" placeholder="请填写村社区干部电话" v-model="formData.communityCadrePhone"
								:disabled="!editFlag" />
						</view>
					</uni-forms-item> -->
				</uni-forms>
			</view>
			<view class="formBox">
				<uni-forms border>
					<view class="label-box">
						<view class="border"></view> 其他信息
					</view>
					<uni-forms-item label="保险购置情况" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click=" handleShowDrop('vehicleInsurance')">
							<u-picker :show="pickerType === 'vehicleInsurance'"
								:columns="[this.enumList.getVehicleInsuranceEnum]" @cancel="pickerType = ''"
								keyName='enumname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'vehicleInsurance')"></u-picker>
							<view :class="formData.vehicleInsurance?'':'gary'" class="font_style">
								{{editFlag?formData.vehicleInsurance ||'请选择保险购置情况':formData.vehicleInsurance}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆状态" class="border-top">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click="handleShowDrop('vehicleStatus') ">
							<u-picker :show="pickerType === 'vehicleStatus'"
								:columns="[this.enumList.getVehicleStatusEnum]" @cancel="pickerType = ''"
								keyName='enumname' :disabled="!editFlag"
								@confirm="e=>handleSelect(e,'vehicleStatus')"></u-picker>
							<view :class="formData.vehicleStatus?'':'gary'" style="text-align: left;width: 190rpx;"
								class="font_style">
								{{editFlag?formData.vehicleStatus||'请选择车辆状态':formData.vehicleStatus}}
							</view>
						</view>
						<view v-if="formData.vehicleStatus && editFlag"
							style="width: 10%;position: absolute;right: 0;top:0">
							<uni-icons @click="formData.vehicleStatus = ''" type="clear" color="#7e7d96ff" size="36">
							</uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item label="录入人员" class="border-top">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<view>
								{{formData.insertPersonnel}}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="录入时间" class="border-top">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<view class="Height100">
								{{ formData.insertTime }}
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="详细地址" class="border-top" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请填写详细地址':''" v-model="formData.driverAddress"
								:disabled="!editFlag" class="font_style" />
						</view>
					</uni-forms-item>
					<view class="detail-item">
						<uni-forms-item label="村干部见车主" label-position="top" label-width="100px" required />
						<locationUpload :disabled="!editFlag" :fileList="cadreDriverImg"
							@afterRead="(e) => afterRead(e, 'cadreDriverImg')"
							@delete="(e) => deletePic(e, 'cadreDriverImg')" name="1" :maxCount="1"></locationUpload>
					</view>
					<view class="detail-item">
						<uni-forms-item label="保证书" label-position="top" label-width="100px" required />
						<locationUpload :disabled="!editFlag" :fileList="guaranteeImg"
							@afterRead="(e) => afterRead(e, 'guaranteeImg')"
							@delete="(e) => deletePic(e, 'guaranteeImg')" name="1" :maxCount="1"></locationUpload>
					</view>
					<view class="detail-item">
						<uni-forms-item label="车主驾车" label-position="top" label-width="100px" required />
						<locationUpload :disabled="!editFlag" :fileList="drivingImg"
							@afterRead="(e) => afterRead(e, 'drivingImg')" @delete="(e) => deletePic(e, 'drivingImg')"
							name="1" :maxCount="1"></locationUpload>
					</view>
					<view class="detail-item">
						<uni-forms-item label="车主大头照" label-position="top" label-width="100px" required />
						<locationUpload :disabled="!editFlag" :fileList="driverImg"
							@afterRead="(e) => afterRead(e, 'driverImg')" @delete="(e) => deletePic(e, 'driverImg')"
							name="1" :maxCount="1"></locationUpload>
					</view>

				</uni-forms>
			</view>
			<view class="bottom" v-if="!editFlag">
				<view class="trapezoidal min" @click="editFlag = true">
					<text>修改</text>
				</view>
			</view>
			<view class="bottom" v-else-if="editFlag && !formData.vehicleId">
				<view class="trapezoidal min" @click="handleSave">
					<text>保存</text>
				</view>
			</view>
			<three class="footer-buttons" :type="'view'" first-text="取消" next-text="确认" :second-primary="true"
				@first="handleCancel" @last="handleSave" v-else />
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	import NoData from "../../components/no-data.vue";
	import Tabbar from "../../components/tabbar.vue";
	import TopTitle from "../../components/top-title";
	import $ from "../../common/globalJs/globalJs";
	import taskInfo from "../../components/task-info.vue";
	import uploadFile from "../../components/upload-file.vue";
	import Three from "../../components/bottom-button/three.vue";
	import BottomButton from "../../components/bottom-button/three.vue";
	import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
	import locationUpload from '@/components/u-upload/index.js';
	import multiplePick from './multiplePick.vue';
	export default {
		// 组件
		components: {
			TopTitle,
			NoData,
			taskInfo,
			uploadFile,
			Three,
			BottomButton,
			locationUpload,
			multiplePick
		},
		data() {
			return {
				editFlag: false,
				$: this.$,
				formData: {
					cadreDriverImg: "",
					communityCadre: "",
					communityCadrePhone: '',
					driverAddress: "",
					driverAuthorizedModel: "",
					driverIdNumber: "",
					driverImg: "",
					driverName: "",
					driverPhone: "",
					drivingImg: "",
					guaranteeImg: "",
					insertPersonnel: "",
					insertTime: "",
					streetCommunity: "",
					vehicleBrand: "",
					vehicleColor: "",
					vehicleInsurance: "",
					vehicleLicense: "",
					vehicleStatus: "",
					vehicleType: "",
					villageCommunity: "",
					vin: ""
				},
				pickerType: '',
				enumList: {},
				streetCommunityByXq: [],
				streetCommunityByJd: [],
				fileList: [],
				cadreDriverImg: [],
				guaranteeImg: [],
				drivingImg: [],
				driverImg: [],

				multiplePickValue: "",
				multiplePickColumns: [],
			}
		},
		// 页面加载
		onLoad(e) {
			//字典枚举
			this.$request
				.globalRequest(
					"/hiddenDanger/tricycle/getTricycleInfoEnumType",
					"GET"
				)
				.then((res) => {
					this.enumList = res.result
					if (this.enumList.getVehicleAuthorizedModelEnum) {
						this.enumList.getVehicleAuthorizedModelEnum.map(i => {
							this.multiplePickColumns.push({
								label: i.enumname,
								value: i.enumvalue
							})
						})
					}
					//街镇
					this.$request
						.globalRequest(
							`/hiddenDanger/config/getStreetCommunityByXq?nuserId=${this.$.getData('token')}`,
							"GET"
						)
						.then((res) => {
							res.result.map(i => {
								if (this.streetCommunityByXq.every(j => i.jdname != j.jdname)) {
									this.streetCommunityByXq.push(i)
								}
							})
							if (e.id) {
								this.getDetail(e.id);
							} else {
								this.editFlag = true
								this.formData.insertTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
								this.formData.insertPersonnel = this.$.getData('cusername')
							}
						});
				});
			//查询用户名称
			this.$request
				.globalRequest(
					"/hiddenDanger/auth/getOperatorInformation", {
						nuserid: this.$.getData('userInfo').username,
					},
					"GET"
				)
				.then((res) => {
					if (res.code === 200) {
						this.$.setData('cusername', res.result.cusername)
					}
				});
		},
		computed: {

		},
		onShow() {

		},
		methods: {
			//取消
			handleCancel() {
				this.editFlag = false
				this.getDetail(this.formData.id)
			},
			//保存
			handleSave() {
				if (this.cadreDriverImg[0]?.url) {
					this.formData.cadreDriverImg = this.cadreDriverImg[0]?.url;
				};
				if (this.guaranteeImg[0]?.url) {
					this.formData.guaranteeImg = this.guaranteeImg[0]?.url;
				};
				if (this.drivingImg[0]?.url) {
					this.formData.drivingImg = this.drivingImg[0]?.url;
				};
				if (this.driverImg[0]?.url) {
					this.formData.driverImg = this.driverImg[0]?.url;
				};

				const {
					vehicleLicense,
					vehicleType,
					vehicleColor,
					vin,
					driverName,
					driverIdNumber,
					driverPhone,
					streetCommunity,
					villageCommunity,
					communityCadre,
					vehicleInsurance,
					driverAddress,
					cadreDriverImg,
					guaranteeImg,
					drivingImg,
					driverImg,
					driverAuthorizedModel,
					vehicleStatus,
				} = this.formData;
				console.log(driverAuthorizedModel,'222222222222')
				if (!vehicleLicense || !vehicleType || !vehicleColor || !vin || !driverName || !driverIdNumber || !
					driverPhone ||
					!streetCommunity || !villageCommunity || !communityCadre || !vehicleInsurance || !driverAddress || !
					cadreDriverImg || !guaranteeImg || !drivingImg || !driverImg) {
					return this.$.toast("请填写完成表单必填项");
				}

				let vehicleTypeValue = ''
				let vehicleColorValue = ''
				let vehicleInsuranceValue = ''
				let vehicleStatusValue = ''
				if (vehicleType) {
					vehicleTypeValue = this.enumList.vehicleTypeEnum?.find(i => i.enumname ==
						vehicleType)?.enumvalue
				}
				if (vehicleColor) {
					vehicleColorValue = this.enumList.vehicleColorEnum?.find(i => i.enumname ==
						vehicleColor)?.enumvalue
				}
				
				if (vehicleInsurance) {
					vehicleInsuranceValue = this.enumList.getVehicleInsuranceEnum?.find(i => i
						.enumname ==
						vehicleInsurance)?.enumvalue
				}
				if (vehicleStatus) {
					vehicleStatusValue = this.enumList.getVehicleStatusEnum?.find(i => i
						.enumname ==
						vehicleStatus)?.enumvalue
				}
				let streetCommunityValue = ''
				let villageCommunityValue = ''

				if (streetCommunity) {
					streetCommunityValue = this.streetCommunityByXq?.find(i => i
						.jdname ==
						streetCommunity).jdcode
					this.$request
						.globalRequest(
							"/hiddenDanger/config/getStreetCommunityByJq", {
								jdcode: streetCommunityValue,
							},
							"GET"
						)
						.then((res) => {
							if (villageCommunity) {
								villageCommunityValue = res.result?.find(i => i
									.sqname ==
									villageCommunity).sqcode
							}
							console.log(driverAuthorizedModel,'333333333333333')
							this.$request.globalRequest("/hiddenDanger/tricycle/saveTricycleInfo", {
										...this.formData,
										vehicleType: vehicleTypeValue,
										vehicleColor: vehicleColorValue,
										driverAuthorizedModel,
										vehicleInsurance: vehicleInsuranceValue,
										vehicleStatus: vehicleStatusValue,
										streetCommunity: streetCommunityValue,
										villageCommunity: villageCommunityValue
									},
									"POST"
								)
								.then((res) => {
									this.editFlag = false
									if (this.formData.vehicleId) {
										uni.showToast({
											title: '修改成功'
										})
									} else {
										uni.showToast({
											title: '保存成功'
										})
										setTimeout(() => {
											this.$.back(1)
										}, 500);
									}
								});
						});

				}
			},
			getDetail(id) {
				this.formData = {}
				this.$request
					.globalRequest(
						"/hiddenDanger/tricycle/getTricycleInfoBaseById", {
							id
						},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							this.formData = res.result
							if (res.result.cadreDriverImg) {
								this.cadreDriverImg = [{
									url: res.result.cadreDriverImg,
									name: ''
								}]
							}
							if (res.result.guaranteeImg) {
								this.guaranteeImg = [{
									url: res.result.guaranteeImg,
									name: ''
								}]
							}
							if (res.result.drivingImg) {
								this.drivingImg = [{
									url: res.result.drivingImg,
									name: ''
								}]
							}
							if (res.result.driverImg) {
								this.driverImg = [{
									url: res.result.driverImg,
									name: ''
								}]
							}

							//字典回显
							const {
								vehicleType,
								vehicleColor,
								vehicleInsurance,
								vehicleStatus,
								streetCommunity,
								villageCommunity,
								driverAuthorizedModel
							} = this.formData
							this.multiplePickValue = driverAuthorizedModel
							if (vehicleType) {
								this.formData.vehicleType = this.enumList.vehicleTypeEnum?.find(i => i.enumvalue ==
									vehicleType)?.enumname
							}
							if (vehicleColor) {
								this.formData.vehicleColor = this.enumList.vehicleColorEnum?.find(i => i.enumvalue ==
									vehicleColor)?.enumname
							}
							if (vehicleInsurance) {
								this.formData.vehicleInsurance = this.enumList.getVehicleInsuranceEnum?.find(i => i
									.enumvalue ==
									vehicleInsurance)?.enumname
							}
							if (vehicleStatus) {
								this.formData.vehicleStatus = this.enumList.getVehicleStatusEnum?.find(i => i
									.enumvalue ==
									vehicleStatus)?.enumname
							}
							if (streetCommunity) {
								this.formData.streetCommunity = this.streetCommunityByXq?.find(i => i
									.jdcode ==
									streetCommunity).jdname
								this.$request
									.globalRequest(
										"/hiddenDanger/config/getStreetCommunityByJq", {
											jdcode: streetCommunity
										},
										"GET"
									)
									.then((res) => {
										this.streetCommunityByJd = res.result
										if (villageCommunity) {
											this.formData.villageCommunity = this.streetCommunityByJd?.find(i => i
												.sqcode ==
												villageCommunity).sqname
										}
									});

							}


						}
					});
			},

			timestampToTime() {
				var date = new Date()
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				return Y + M + D; // 返回格式：YYYY-MM-DD
			},
			//下拉选择
			handleSelect(e, keyName) {
				this.pickerType = 'keyName'
				if (keyName == 'streetCommunity') {
					if (this.formData.streetCommunity == e.value[0].jdname) {
						return
					}
					this.formData.streetCommunity = e.value[0].jdname;
					this.formData.villageCommunity = '';
					// 村镇
					this.$request
						.globalRequest(
							"/hiddenDanger/config/getStreetCommunityByJq", {
								jdcode: e.value[0].jdcode,
								nuserId: this.$.getData('token')
							},
							"GET"
						)
						.then((res) => {
							this.streetCommunityByJd = res.result
						});
				} else if (keyName === 'villageCommunity') {
					this.formData.villageCommunity = e.value[0].sqname;
				} else {
					this.formData[keyName] = e.value[0].enumname
				}
			},
			//显示下拉
			handleShowDrop(pickerType) {
				if (!this.editFlag) {
					return
				}
				this.pickerType = pickerType
			},
			//获取随机id
			uuid(len, binary) {
				len = !len ? 36 : len;
				binary = !binary ? 16 : binary;
				return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
					.replace(/[xy]/g, function(c) {
						var r = (Math.random() * binary) | 0,
							v = c == "x" ? r : (r & 0x3) | 0x8;
						return v.toString(binary);
					})
					.substring(0, len);
			},
			uploadFilePromise(event) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址
						filePath: event?.file.url,
						name: "file",
						formData: {
							position: event.position,
							longitude: event.longitude,
							latitude: event.latitude
						},
						success: (res) => {
							resolve(res.data);
						},
					});
				});
			},
			async afterRead(event, key) {
				// console.log(key)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const id = this.uuid();
				this[key].push({
					id,
					...event?.file,
					status: "uploading",
					message: "上传中",
				});
				const result = await this.uploadFilePromise(event);
				const resultInfo = JSON.parse(result);
				const index = this[key]?.findIndex((v) => v.id === id);
				if (resultInfo.code == 200) {
					this[key].splice(
						index,
						1,
						Object.assign(event?.file, {
							status: "success",
							message: "",
							result: resultInfo,
							url: resultInfo.result,

						})
					);
				} else {
					this.$.toast("上传失败");
					this[key].splice(
						index,
						1,

					);
				}
			},
			// 删除图片
			deletePic(event, keyName) {
				if (!this.editFlag) {
					return
				}
				this[keyName].splice(event.index, 1);
			},
			//多选确认
			multiplePickConfirm(data, value, label) {
				this.formData.driverAuthorizedModel = value.join()
				console.log(value,this.formData.driverAuthorizedModel,'valuevaluevaluevaluevalue')
			},
		},
		onReady() {},
		// 页面卸载
		onUnload() {},
	}
</script>

<style>
</style>
<style lang="scss" scoped>
	.footer-buttons {
		z-index: 3;
	}

	page {
		background: #F6F8FA;
	}


	.query-form {

		font-size: 16px;
		height: 44px;
		background: #ffffff;
		box-shadow: 3px 0px 10px #ccc;
		color: #666666;
		position: sticky;
		// top: var(--status-bar-height + 88rpx);
		top: calc(var(--status-bar-height) + 88rpx);
		z-index: 10;

		.search-box {
			padding: 10px 10px 3px;
		}
	}

	.formBox {
		margin: 30rpx 20rpx;
		border: 1px solid #e6e6e6;
		background: #ffffff;
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;

		/deep/ .uni-forms-item--border .uni-forms-item__content {
			justify-content: flex-end;
			text-align: right;
		}

		.photo {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.Box {
		padding-top: var(--status-bar-height);

		.Content {
			width: calc(100% - 48rpx);
			padding-bottom: 88rpx;
		}

		.Unit {
			padding: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			box-shadow: 1px 1px 3px #ccc;

			.trapezoidal {
				position: absolute;
				top: -0px;
				right: 0px;
				color: #ffffff;
				font-size: 22rpx;
				font-weight: normal;
				z-index: 1;
			}

			image {
				width: 200rpx;
			}

			.right {
				flex: 1;
				padding-left: 30rpx;

				.title {
					font-size: 16px;
					width: 380rpx;
					min-height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.type {
					font-size: 14px;
					color: #666;
					font-weight: normal;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.label-box {
		display: flex;
		align-items: center;
		height: 110rpx;
		font-size: 30rpx;
		font-weight: 600;

		.border {
			background-color: #2663BF;
			height: 35rpx;
			width: 6rpx;
			margin-right: 14rpx;
		}
	}

	.label-box2 {
		height: 100rpx;


	}

	.label-box-small {
		font-size: 28rpx;
		margin-top: -25rpx;
		font-weight: 500;
	}

	.border-bottom {
		border-bottom: 1px #eee solid;
	}

	.border-top {
		border-top: 1px #eee solid;
	}


	/deep/ .uni-forms-item__label {
		font-size: 28rpx;
		height: auto;
		margin-bottom: 20rpx;
		white-space: nowrap;
	}

	/deep/ .u-input {
		background-color: #ffffff !important;
	}

	.detail-item-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.investigation-item-zl {
		.uni-forms-item--border {
			border: none;
		}

		border-top: 1px solid #eee;
	}

	.btn-right {
		width: 100%;
		text-align: right;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: calc(100% - 40rpx);
		padding: 18rpx 20rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-top: 1px solid #cccccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 3;
	}

	.Img {
		width: 512rpx;
		height: 440rpx;
		margin: 0 auto;
	}

	.trapezoidal {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		width: 20%;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10rpx;
		line-height: 60rpx;

		&.primary {
			background: #2663BF;
			color: #fff;

			&::after,
			&::before {
				background: #2663BF;
			}
		}
	}

	.trapezoidal::before,
	.trapezoidal::after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		background: #E9EDF5;
		z-index: -1;
		transform-origin: bottom;
		box-sizing: border-box;
	}

	.trapezoidal::after {
		left: auto;
		right: 0;
		border-radius: 10rpx;
		background-color: #E9EDF5;
		border-left: 0 none;
	}

	.gary {
		color: gray;
		text-align: right !important;
	}

	.Height100 {
		font-size: 14px;
	}

	.font_style {
		font-size: 14px;
		white-space: nowrap;
	}
</style>