jch-wx_tmsaip/pages/manifest/newManifest/newManifest.vue

<template>
	<view class="new-manifest">
		<!-- 基本信息 -->
		<view class="from-box" v-for="(item,index) in fromdata">
			<view class="tit">{{item.title}}</view>
			<ul class="from">
				<template v-for="(sec,sIndex) in item.from">
					<li class="label" v-if="sec.type=='input'">
						<view class="left"><text class="required" v-if="sec.required">*</text>{{sec.label}}</view>
						<view class="right"><input :placeholder="sec.placeholder" v-model="fromRes[item.type][sec.name]"/></view>
					</li>
					<li class="label" v-else-if="sec.type=='picker'">
						<view class="left"><text class="required" v-if="sec.required">*</text>{{sec.label}}</view>
						<view class="right">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view> 
					</li>
				</template>
			</ul>
		</view>
		
		<view class="bottom-btn">
			<button class="create">生成分单</button>
			<button class="save">保存</button>
			<button class="send">直发</button>
		</view>	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromdata: [
					{
						title: '基本信息',
						type: 'baseInfo',
						from: [
							{
								type: 'input',
								label: '主提单号',
								name: 'masterOddNum',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'input',
								label: '次提单号',
								name: 'secOddNum',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'input',
								label: '船名',
								name: 'shipName',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'input',
								label: '航次',
								name: 'voyageNum',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'input',
								label: '航次',
								name: 'voyageNum',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'picker',
								label: '起运港',
								name: 'leavePort',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'picker',
								label: '目的港',
								name: 'arrivePort',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'picker',
								label: '船代',
								name: 'shipAgent',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'picker',
								label: '船公司',
								name: 'shipCompany',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'picker',
								label: '开船日期',
								name: 'sailingDate',
								placeholder: '请选择',
								required:true,
							},
						],
					},
					{
						title: '发货人信息',
						type: 'sailingInfo',
						from: [
							{
								type: 'picker',
								label: '发货人名称',
								name: 'sailingName',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '发货人地址',
								name: 'sailingAddress',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'picker',
								label: '国家代码',
								name: 'countryCode',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '电话',
								name: 'tel',
								placeholder: '请输入',
								required:true,
							},
						],
					},
					{
						title: '收货人信息',
						type: 'consigneeInfo',
						from: [
							{
								type: 'picker',
								label: '收货人名称',
								name: 'consigneeName',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '收货人地址',
								name: 'consigneeAddress',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'picker',
								label: '国家代码',
								name: 'countryCode',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '电话',
								name: 'tel',
								placeholder: '请输入',
								required:true,
							},
						],
					},
					{
						title: '通知人信息',
						type: 'notifierInfo',
						from:[
							{
								type: 'picker',
								label: '通知人名称',
								name: 'notifierName',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '通知人地址',
								name: 'notifierAddress',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'picker',
								label: '国家代码',
								name: 'countryCode',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '电话',
								name: 'tel',
								placeholder: '请输入',
								required:true,
							},
						],
					},
					{
						title: '更多',
						type: 'moreInfo',
						from: [
							{
								type: 'input',
								label: '唛头',
								name: 'mark',
								placeholder: '请输入',
								required:true,
							},
							{
								type: 'textArea',
								label: '货物描述',
								name: 'goodsdesc',
								placeholder: '请输入',
								required:true,
							},
						],
					},
					{
						title: '集装箱信息',
						type: 'containerInfo',
						from: [
							{
								type: 'picker',
								label: '箱型',
								name: 'model',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'picker',
								label: '包装',
								name: 'packing',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '箱号',
								name: 'caseNo',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '封号',
								name: 'title',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '件数',
								name: 'num',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '重量',
								name: 'weight',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '尺码',
								name: 'size',
								placeholder: '请选择',
								required:true,
							},
						],
						
					},
					{
						title: '货物信息',
						type: 'cargoInfo',
						from: [
							{
								type: 'picker',
								label: '货物类型',
								name: 'type',
								placeholder: '请选择',
								required:true,
							},
							{
								type: 'input',
								label: '温度',
								name: 'temperature',
								placeholder: '冷冻货必填',
								required:false,
							},
							{
								type: 'input',
								label: '通风',
								name: 'ventilate',
								placeholder: '冷冻货必填',
								required:false,
							},
							{
								type: 'input',
								label: 'UN CLASS',
								name: 'unClass',
								placeholder: '危险品必填',
								required:false,
							},
							{
								type: 'input',
								label: 'UN NO.',
								name: 'unNo',
								placeholder: '危险品必填',
								required:false,
							},
							{
								type: 'input',
								label: '危品联系人',
								name: 'dangerGoodsContact',
								placeholder: '危险品必填',
								required:false,
							},
							{
								type: 'input',
								label: '危品电话',
								name: 'dangerGoodsTel',
								placeholder: '危险品必填',
								required:false,
							},
							{
								type: 'input',
								label: '总件数',
								name: 'totalNum',
								placeholder: '',
								required:false,
							},
							{
								type: 'input',
								label: '总重量',
								name: 'totalWeight',
								placeholder: '',
								required:false,
							},
							{
								type: 'input',
								label: '总尺码',
								name: 'totalSize',
								placeholder: '',
								required:false,
							}
						],
					},
				],
				
				fromRes: {
					baseInfo:{
						masterOddNum: '1231', // 主提单号
						secOddNum: '', // 次提单号
						shipName: '', // 船名
						voyageNum: '', // 航次
						leavePort: '', // 起运港
						arrivePort: '', // 目的港
						shipAgent: '', // 船代
						shipCompany: '', // 船公司
						sailingDate: '', // 开船日期
					},
					sailingInfo:{
						sailingName: '', // 发货人名称
						sailingAddress: '', // 发货人地址
						countryCode: '', // 国家代码
						tel: '', // 电话
					},
					consigneeInfo:{
						consigneeName: '', // 收货人名称
						consigneeAddress: '', // 收货人地址
						countryCode: '', // 国家代码
						tel: '', // 电话
					},
					notifierInfo:{
						notifierName: '', // 收货人名称
						notifierAddress: '', // 收货人地址
						countryCode: '', // 国家代码
						tel: '', // 电话
					},
					moreInfo:{
						mark: '', // 唛头
						goodsdesc: '', // 获取描述
					},
					containerInfo:{
						model: '',
						packing: '',
						caseNo: '',
						title: '',
						num: '',
						weight: '',
						size: '',
					},
					cargoInfo:{
						type: '', // 货物类型
						temperature: '', //温度
						ventilate:'', // 通风
						unNo: '', // UN NO.
						dangerGoodsContact: '', // 危品联系人
						dangerGoodsTel: '', // 危品电话
						totalNum: '',
						totalWeight: '',
						totalSize: '',
					},
				},
				
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
			}
		},
		watch:{
			fromRes:{
				handler(newValue, oldValue) {
					console.log("obj 发⽣了变化", newValue);
				},
				deep: true,
				immediate: true,
				
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		}
	}
</script>

<style lang="less">
	@import url("./newManifest.less");
</style>