uni-app动态true下拉框

<!-- 产品添加 -->
<template>
	<view class="gui-padding">
		<!-- 正确提示 -->
		<gui-top-message ref="guitopmsg1">
			<view class="gui-bg-green">
				<text class="message-text gui-block-text gui-color-white gui-icons">&#xe7f8; {{ msg1 }}</text>
			</view>
		</gui-top-message>
		<!-- 错误提示 -->
		<gui-top-message ref="guitopmsg2">
			<view class="gui-bg-red">
				<text class="message-text gui-block-text gui-color-white gui-icons">&#xe646; {{ msg2 }}</text>
			</view>
		</gui-top-message>
		<!-- 消息提示 -->
		<gui-top-message ref="guitopmsg3">
			<view style="background-color:rgba(0,0,0,0.8);">
				<text class="message-text gui-block-text gui-color-white gui-icons">&#xe6a1; {{ msg3 }}</text>
			</view>
		</gui-top-message>
		<view class="gui-margin-top">
			<gui-upload-images
				@change="change"
				ref="uploadimgcom"
				@uploaded="uploaded"
				:uploadServerUrl="uploadUrl"
				fileName="file"
				maxFileNumber=1
			></gui-upload-images>
		</view>

		<view class="gui-form-item gui-border-b" style="display: none;">
			<text class="gui-form-label">产品ID：</text>
			<view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.id" name="id" placeholder="请输入产品ID" /></view>
		</view>
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">产品名称：</text>
			<view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.proName" name="proName" placeholder="请输入产品名称" /></view>
		</view>
		<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">产品规格：</text>
			<view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.specs" name="specs" placeholder="请输入产品规格" /></view>
		</view>
		**//**<view class="gui-form-item gui-border-b">
			<text class="gui-form-label">所属单位：</text>
			<view class="gui-form-body">
				<picker mode="selector" :range="com" @change="comChange">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-text">{{ formData.comName }}</text>
						<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
					</view>
				</picker>
			</view>
		</view>**///**
		<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
			<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;margin-right: 20rpx;" formType="submit">
				<text class="gui-icons gui-color-white gui-button-text" @tap="submit">&#xe642; 保存</text>
			</button>
			<button type="default" class="gui-button gui-bg-red" style="width:200rpx;" @click="del(formData.id)">
				<text class="gui-icons gui-color-white gui-button-text">&#xe642; 删除</text>
			</button>
		</view>

		<!-- 例子 1 -->
		<gui-modal ref="guimodal1" title="消息">
			<view slot="content" class="gui-padding gui-bg-gray">
				<text class="gui-block-text gui-text-center gui-text gui-color-gray" style="line-height:100rpx; padding:10rpx;">您确定要这样做吗？</text>
			</view>
			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<view slot="btns" class="gui-flex gui-rows gui-space-between">
				<view class="modal-btns gui-flex1" style="margin-right:80rpx;"><text class="modal-btns gui-color-gray" @tap="close1">取消</text></view>
				<view class="modal-btns gui-flex1" style="margin-left:80rpx;"><text class="modal-btns gui-color-blue" @tap="confirm1(formData.id)">确认</text></view>
			</view>
		</gui-modal>
	</view>
</template>
<script>
const domain = getApp().globalData.domain;
var graceJS = require('@/uiPlugin/js/grace.js');
var graceChecker = require('@/uiPlugin/js/checker.js');
export default {
	data() {
		return {
			uploadUrl:domain+'app/product/UploadProductImg',
			msg1: '', //正确
			msg2: '', //错误
			msg3: '', //消息
			// 记录需要上传的图片数据
			needPploadedImgs: [],
			// 表单数据存储
			formData: {
				id: '',
				proName: '',
				specs: '',
				comName: '请选择所属单位'//重点
			},
			// picker
			com: []
		};
	},
	onLoad: function(data) {
		// 模拟 api 加载默认图片
		// 不需要默认值删除此函数即可
		// setTimeout(() => {
		// 	this.$refs.uploadimgcom.setItems([data.proImg]);
		// });

		// this.formData = data;
		//console.log(data);
		this.companyList();
	},
	methods: {
		openmsg1: function() {
			this.$refs.guitopmsg1.open();
		},
		openmsg2: function() {
			this.$refs.guitopmsg2.open();
		},
		openmsg3: function() {
			this.$refs.guitopmsg3.open();
		},
		// 记录选择图片时的待提交数据
		change: function(e) {
			this.needPploadedImgs = e;
		},
		// 提交动态
		// 过程说明 :
		// 点击提交按钮 > 首先执行组件的上传函数 > 上传成功后获得已经上传的图片数据 > 提交给后端 api 记录整个内容
		submit: function() {
			// 判断图片选择数量
			if (this.needPploadedImgs.length < 1) {
				uni.showToast({ title: '请选择图片', icon: 'none' });
				return;
			}
			var rule = [
				{ name: 'proName', checkType: 'notnull', errorMsg: '产品名称不能为空' },
				{ name: 'specs', checkType: 'notnull', errorMsg: '产品规格不能为空' },
				{ name: 'comName', checkType: 'notsame', checkRule:"请选择所属单位",  errorMsg: '请选择所属单位' }//重点
			];
			var checkRes = graceChecker.check(this.formData, rule);
			if (checkRes) {
				uni.showToast({ title: '验证通过!', icon: 'none' });
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
				return false;
			}
			this.subtxt = '提交中，请稍候 ...';
			this.$refs.uploadimgcom.upload();
			// 代码执行到这里，组件开始执行上传工作
			// uni-app 上传api 一次上传一个图片
			// 组件会一个一个循环上传
			// 上传完毕后会触发组件的 uploaded 事件
			// uploaded 事件意味着上传工作完毕
			// 事件会携带上传完成的图片数据 [数组格式]
		},
		// 图片上传完毕执行 uploaded 函数
		uploaded: function(uploadedImgs) {
			//console.log('图片上传完毕，开始提交数据');
			// 组合数据给后端 api 提交
			//console.log('全部数据 :');
			// 至此数据以及收集完毕
			// 请自己完成数据提交工作
			this.formData.proImg = uploadedImgs[0].url;
			graceJS.showLoading('Loading ...'); //显示Loading
			uni.request({
				url: domain + 'app/product/addProduct',
				method: 'POST',
				data: this.formData,
				success: res => {
					if (res.data.code == 200) {
						setTimeout(() => {
							this.openmsg1();
							this.msg1 = res.data.msg;
							setTimeout(function() {
								// uni.redirectTo({
								// 	url: "staff"
								// });
								let pages = getCurrentPages(); //页面栈
								let prePage = pages[pages.length - 2]; //上一页
								prePage.$vm.reFresh = Math.random(); //触发上一页监听器
								uni.navigateBack(); //返回上一页
							}, 1000);
							uni.hideLoading(); //关闭Loading
						}, 1000);
					} else {
						this.openmsg2();
						this.msg2 = res.data.msg;
					}
				}
			});
		},
		del: function(id) {
			this.open1();
		},
		open1: function() {
			this.$refs.guimodal1.open();
		},
		close1: function() {
			this.$refs.guimodal1.close();
		},
		confirm1: function(id) {
			// 客户点击确认按钮后的逻辑请在此处实现
			this.$refs.guimodal1.close();
			graceJS.showLoading('Loading ...'); //显示Loading
			uni.request({
				url: domain + 'app/product/deleteProduct',
				method: 'POST',
				data: {
					id: id
				},
				success: res => {
					console.log(res.data);
					if (res.data.code == 200) {
						setTimeout(() => {
							this.openmsg1();
							this.msg1 = res.data.msg;
							setTimeout(function() {
								let pages = getCurrentPages(); //页面栈
								let prePage = pages[pages.length - 2]; //上一页
								prePage.$vm.reFresh = Math.random(); //触发上一页监听器
								uni.navigateBack(); //返回上一页
							}, 1000);
							uni.hideLoading(); //关闭Loading
						}, 1000);
					} else {
						this.openmsg2();
						this.msg2 = res.data.msg;
					}
				}
			});
		},
		comChange: function(e) {//重点
			this.formData.comName = this.com[e.detail.value];
		},//重点
		companyList: function() {//重点
			uni.request({
				url: domain + 'app/company/listCompany',
				success: res => {
					var d = res.data.data;
					for (var i in d) {
						this.com.push(d[i].comName);
					}
					//console.log(d);
				}
			});//重点
		}
	}
};
</script>
<style>
.gui-form-label {
	width: 140rpx;
}
.modal-btns {
	line-height: 88rpx;
	font-size: 26rpx;
	text-align: center;
	width: 200rpx;
}
.message-text {
	line-height: 88rpx;
	font-size: 26rpx;
	text-align: center;
}
.gui-text-small {
	line-height: 50rpx;
}
.gui-text-area {
	font-size: 26rpx;
	color: #2b2e3d;
	height: 150rpx;
	padding: 20rpx;
}
.demo-sub-btn {
	padding: 10rpx 25rpx;
	line-height: 30rpx;
	font-size: 24rpx;
	border-radius: 6rpx;
}
.gui-form-label {
	width: 140rpx;
}
</style>