OfficeApp/components/newArchives/plant.vue

<template>

	<view class="content">

		<view class="tit">
			<text v-if="readonly">更新时间: {{update_time}}</text>
			<text>种植信息</text>

		</view>


		<view class="card">
			<!-- <view class="title">种植信息</view> -->
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
				<u-form-item labelWidth="auto" label="土地总面积(亩)" required prop="cultivated_area" borderBottom>
					<u--input :readonly="readonly" v-model="formData.cultivated_area" placeholder="请输入土地总面积(亩)" type="number"></u--input>
				</u-form-item>
				<picker :range="landPlanList" :disabled="readonly" mode="selector" @change="changeLanPlan">
					<u-form-item labelWidth="auto" label="土地规划" required prop="planning" borderBottom>
						<u--input :value="landPlanList[formData.planning]" style="pointer-events: none;" placeholder="请选择规划" disabled
							disabledColor="#fff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<u-form-item labelWidth="auto" label="有无种植培训" required prop="breeding_training" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.breeding_training" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="有无注册成立种植公司" required prop="planting_company" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.planting_company" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="notes" borderBottom>
					<u--textarea :disabled="readonly" v-model="formData.notes" autoHeight placeholder="请输入备注"
						border="surround" count></u--textarea>
				</u-form-item>
				<u-form-item labelWidth="auto" label="种植类型" required prop="breeding_type" borderBottom>
					<u--input :readonly="readonly" v-model="formData.breeding_type" placeholder="请输入种植类型"></u--input>
				</u-form-item>
				<u-form-item labelWidth="auto" label="面积(亩)" required prop="area" borderBottom>
					<u--input :readonly="readonly" v-model="formData.area" placeholder="请输入面积(亩)" type="number"></u--input>
				</u-form-item>
				<picker mode="date" @change="changeDate" :disabled="readonly" :data-value="'breeding_time'">
					<u-form-item labelWidth="auto" label="种植开始时间" required prop="breeding_time" borderBottom>
						<u--input :value="formData.breeding_time" style="pointer-events: none;" placeholder="请选择种植开始时间" disabled
							disabledColor="#fff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<picker mode="date" @change="changeDate" :disabled="readonly" :data-value="'mature_time'">
					<u-form-item labelWidth="auto" label="上市时间" required prop="mature_time" borderBottom>
						<u--input :value="formData.mature_time" style="pointer-events: none;" placeholder="请选择上市时间" disabled
							disabledColor="#fff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<u-form-item labelWidth="auto" label="产量(斤)" required prop="yield" borderBottom>
					<u--input :readonly="readonly" v-model="formData.yield" placeholder="请输入产量(斤)" type="number"></u--input>
				</u-form-item>
				<u-form-item labelWidth="auto" label="预计收益(元)" required prop="estimated_income" borderBottom>
					<u--input :readonly="readonly" v-model="formData.estimated_income" placeholder="请输入预计收益(元)" type="number"></u--input>
				</u-form-item>
				<u-form-item labelWidth="auto" labelPosition="top" label="农资农具使用情况" required prop="farm_tools"
					borderBottom>
					<u--textarea :disabled="readonly" v-model="formData.farm_tools" autoHeight placeholder="请输入农资农具使用情况"
						border="surround" count></u--textarea>
				</u-form-item>
				<u-form-item labelWidth="auto" label="是否生态种植" required prop="ecological_farming" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.ecological_farming" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="现代化程度(%)" required prop="modernization" borderBottom>
					<u--input :readonly="readonly" v-model="formData.modernization" placeholder="请输入现代化程度(%)" type="number" maxlength="3"></u--input>
				</u-form-item>
				<u-form-item labelWidth="auto" label="预售卖价格(元/500g)" required prop="pre_price" borderBottom>
					<u--input :readonly="readonly" v-model="formData.pre_price" placeholder="请输入预售卖价格" type="number"></u--input>
				</u-form-item>
				<u-form-item labelWidth="auto" label="销售方式" required prop="method_sales" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.method_sales" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="有无加工仓储" required prop="processing_storage" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.processing_storage" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="有无宣传推广" required prop="promote" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.promote" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="有无运输" required prop="transportation" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.transportation" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="expand_business_needs" borderBottom>
					<u-radio-group :disabled="readonly" v-model="formData.expand_business_needs" style="margin: 16rpx;">
						<u-radio :customStyle="{marginRight: '16px'}"
							v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item labelWidth="auto" labelPosition="top" label="需求描述" prop="demand" borderBottom>
					<u--textarea :disabled="readonly" v-model="formData.demand" autoHeight placeholder="请输入需求描述"
						border="surround" count></u--textarea>
				</u-form-item>
				<u-form-item labelWidth="auto" labelPosition="top" label="政策补助" prop="policy_subsidies" borderBottom>
					<u--textarea :disabled="readonly" v-model="formData.policy_subsidies" autoHeight
						placeholder="请输入政策补助" border="surround" count></u--textarea>
				</u-form-item>
			</u--form>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			readonly: {
				type: Boolean,
				default: false
			},
			update_time: {
				type: String,
				default: null
			},
			datas: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				landPlanList: ['自己种', '出租', '代种', '租更多地扩大种植'],
				formData: {
					// "cultivated_area": "20", //耕地总面积
					// "planning": 1, //土地规划
					// "breeding_training": 1, //有无种植培训
					// "planting_company": 0, //有无注册成立种殖公司
					// "notes": "试试备注", //备注
					// "breeding_type": 22, //种植类型
					// "area": 20, //面积
					// "breeding_time": "2022-07-22", //种植开始时间
					// "mature_time": "2022-07-22", //上市时间
					// "yield": 600, //产量
					// "estimated_income": 1500, //预计收益
					// "farm_tools": "收割机一台,打米机一台", //农资农具使用情况
					// "ecological_farming": 1, //是否生态种植
					// "modernization": 30, //现代化程度
					// "pre_price": "30.00", //预售卖价格
					// "method_sales": 1, //销售方式
					// "processing_storage": 0, //有无加工仓储
					// "promote": 0, //有无宣传推广
					// "transportation": 0, //有无运输
					// "expand_business_needs": 0, //是否有扩大经营需求
					// "demand": "没有述求", //种植述求
					// "policy_subsidies": "无补助" ,//政策补助
					"cultivated_area": "", //耕地总面积
					"planning": "", //土地规划
					"breeding_training": "", //有无种植培训
					"planting_company": "", //有无注册成立种殖公司
					"notes": "", //备注
					"breeding_type": "", //种植类型
					"area": "", //面积
					"breeding_time": "", //种植开始时间
					"mature_time": "", //上市时间
					"yield": "", //产量
					"estimated_income": "", //预计收益
					"farm_tools": "", //农资农具使用情况
					"ecological_farming": "", //是否生态种植
					"modernization": "", //现代化程度
					"pre_price": "", //预售卖价格
					"method_sales": "", //销售方式
					"processing_storage": "", //有无加工仓储
					"promote": "", //有无宣传推广
					"transportation": "", //有无运输
					"expand_business_needs": "", //是否有扩大经营需求
					"demand": "", //种植述求
					"policy_subsidies": "" //政策补助
				},
				rules: {

				}
			}
		},
		created() {
			this.initRules();
			if (this.$props.readonly && this.$props.datas) {
				this.formData = this.$props.datas;
				let keys = Object.keys(this.formData);
				keys.forEach(item => {
					if (!isNaN(this.formData[item])&&this.formData[item]!=''&&this.formData[item]!=null&&this.formData[item]!=undefined){
					  parseFloat(this.formData[item])!='NaN'?this.formData[item] = parseFloat(this.formData[item]):null;
					} 
				})
			}
		},
		watch: {
			datas(newValue, oldValue) {
				if (this.$props.readonly && newValue) {
					this.formData = this.$props.datas;
					let keys = Object.keys(this.formData);
					keys.forEach(item => {
						if (!isNaN(this.formData[item])&&this.formData[item]!=''&&this.formData[item]!=null&&this.formData[item]!=undefined){
						  parseFloat(this.formData[item])!='NaN'?this.formData[item] = parseFloat(this.formData[item]):null;
						} 
					})
				}
			}
		},
		methods: {
			// 初始化校验
			initRules() {
				let arr = Object.keys(this.formData);
				let white = ['demand', 'policy_subsidies'];
				arr = arr.filter(item => {
					return !white.includes(item);
				})
				arr.forEach(key => {
					this.rules[key] = {
						validator: (rule, value, callback) => {
							this.$refs.breedingForm.clearValidate(rule.field);
							value.trim() !== '' ? callback() : callback('不能为空');
						},
						trigger: ['change', 'blur']
					}
				})
			},
			// 校验
			async validate() {
				return await this.$refs.breedingForm.validate();
			},
			// 选择土地规划
			changeLanPlan(e) {
				let index = e.currentTarget.dataset.index;
				this.formData.planning = e.detail.value;
			},
			// 选择时间
			changeDate(e) {
				let data = e.currentTarget.dataset;
				this.formData[data.value] = e.detail.value;
			},
		},
	}
</script>

<style lang="scss">
	.card {
		background-color: #fff;
		margin: 28rpx;
		padding: 28rpx;
		margin-top: 0;
		padding-top: 0;
		border-radius: 0 0 14rpx 14rpx;
	}

	.tit {
		margin: 28rpx 28rpx 0 28rpx;
		padding: 28rpx 28rpx 0 28rpx;
		border-radius: 14rpx 14rpx 0 0;
		background-color: $theme-oa-color;
		color: white;
		height: 100rpx;
		display: flex;
		justify-content: space-between;

	}

	.title {
		font-weight: 500;
		font-size: 34rpx;

		&::before {
			width: 8rpx;
			height: 26rpx;
			border-radius: 4rpx;
			background-color: #0122c7;
			content: "";
			display: inline-block;
			margin-right: 8rpx;
		}
	}

	.delete {
		margin: 22rpx 0;
		// margin-bottom: 40rpx;
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		background: #f56c6c;
		border-radius: 14rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.plus {

		margin: 22rpx 0;

		// margin-bottom: 40rpx;

		width: 100%;

		height: 64rpx;

		line-height: 64rpx;

		background: $theme-oa-color;

		border-radius: 14rpx;

		font-size: 28rpx;

		color: #fff;

		text-align: center;

	}
</style>