jsy-app/pages/work/land/create-new.vue

<template>
	<view class="create-container">
		<u-form labelPosition="left" :model="landInfo" :rules="rules" ref="form" required>
			<u-form-item class="form-item" label="所属公司" labelWidth="100px" prop="companyName" required >
				<u--input v-model="landInfo.companyName" border="none" placeholder="" disabled  class="custom-input"></u--input>
			</u-form-item>
			<u-form-item class="form-item" label="地块名称" prop="landName" labelWidth="100px" required>
				<u--input v-model="landInfo.landName" border="none" placeholder="请选择地块名称" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="地块编号" prop="landNum" labelWidth="100px" required>
				<u--input v-model="landInfo.landNum" border="none" placeholder="请输入地块编号" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="地块负责人" prop="userName" labelWidth="100px" required
				@click="onChargeOpen">
				<u--input style="background: white;" v-model="landInfo.userName" border="none" disabled
					placeholder="请选择地块负责人" suffixIcon="arrow-right" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="地块地址" labelWidth="100px">
				<u--input v-model="landInfo.landAddress" border="none" placeholder="请选择地块地址" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="地块面积" labelWidth="100px">
				<u--input v-model="landInfo.landArea" border="none" type="digit" placeholder="请选择地块面积" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="土壤类型" labelWidth="100px">
				<u--input style="background: white" @click="showSoilType = true"
					v-model="landInfo.soilTypeName" border="none" disabled placeholder="请选择土壤类型"
					suffixIcon="arrow-right" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="水源类型" labelWidth="100px">
				<u-checkbox-group v-model="landInfo.waterSourceTypeStr" @change="waterSourceTypeGroupChange">
					<view v-for="(item, index) in waterSourceType" style="width: 100%;">
						<u-checkbox :key="index" :label="item.dictLabel" :name="item.dictValue" class="custom-input"></u-checkbox>
					</view>
				</u-checkbox-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="排序" prop="orderNum" labelWidth="100px" required>
				<u--input v-model="landInfo.orderNum" border="none" type="number" placeholder="请输入排序" class="custom-input"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="是否分组" prop="enableGroup" labelWidth="100px" required>
				<u-radio-group @change="onGroupChange" v-model="landInfo.enableGroup">
					<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
						name="0" />
					<u-radio activeColor="green" shape="square" label="否" name="1" />
				</u-radio-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="启用蝶阀" prop="enableButterflyValve" labelWidth="100px" required>
				<u-radio-group @change="onEnableButterflyValveChange" v-model="landInfo.enableButterflyValve">
					<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
						name="0" />
					<u-radio activeColor="green" shape="square" label="否" name="1" />
				</u-radio-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="启用批量控制" prop="enableBatchControl" labelWidth="100px" required>
				<u-radio-group @change="onEnableBatchControlChange" v-model="landInfo.enableBatchControl">
					<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
						name="0" />
					<u-radio activeColor="green" shape="square" label="否" name="1" />
				</u-radio-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item class="form-item" label="启用自动刷新" prop="enableAutoRefresh" labelWidth="100px" required>
				<u-radio-group @change="onEnableAutoRefreshChange" v-model="landInfo.enableAutoRefresh">
					<u-radio activeColor="green" shape="square" :customStyle="{ marginRight: '50px' }" label="是"
						name="0" />
					<u-radio activeColor="green" shape="square" label="否" name="1" />
				</u-radio-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<view style="margin: 10px 20px">备注</view>
			<u-form-item label="" borderBottom ref="item3" labelWidth="40px">
				<u--textarea style="margin: 0px 20px" placeholder="请输入备注" v-model="landInfo.remark" count></u--textarea>
			</u-form-item>
		</u-form>
		<view class="buttons">
			<u-button type="success" @click="submit">确认</u-button>
			<u-button @click="cancel">取消</u-button>
		</view>
		<u-action-sheet :show="showSoilType" :actions="soilType" title="土壤类型" description=""
			@close="showSoilType = false" @select="onSoilTypeSelect"></u-action-sheet>
		<u-popup :show="showCharges" mode="center">
			<view class="dialog-container">
				<view class="dialog-title">
					<text>选择地块负责人</text>
					<u-icon name="close" size="20" class="close-btn" @click="showCharges = false"></u-icon>
				</view>
				<view class="dialog-body">
					<view v-for="item in chargeActions" :key="item.id" @click="onChargeSelect(item)" class="people">
						<text>{{ item.name }}</text>
						<text>{{ item.mobilePhone }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import store from "@/store"
	import plugin from "@/plugins"
	export default {
		data() {
			return {
				editFlag: false,
				item: {},
				userType: null,
				form: null,
				soilType: [],
				showSoilType: false,
				waterSourceType: [],
				landInfo: {},
				rules: {
					landName: {
						type: "string",
						required: true,
						message: "请输入地块名称",
						trigger: ["blur", "change"]
					},
					landNum: {
						type: "string",
						required: true,
						message: "请输入地块编号",
						trigger: ["blur", "change"]
					},
					userName: {
						type: "string",
						required: true,
						message: "请选择地块负责人",
						trigger: ["blur", "change"]
					},
					enableGroup: {
						type: "string",
						required: true,
						message: "请选择",
						trigger: ["change"]
					},
					enableButterflyValve: {
						type: "string",
						required: true,
						message: "请选择",
						trigger: ["change"]
					},
					enableBatchControl: {
						type: "string",
						required: true,
						message: "请选择",
						trigger: ["change"]
					},
					enableAutoRefresh: {
						type: "string",
						required: true,
						message: "请选择",
						trigger: ["change"]
					},
					orderNum: {
						type: "integer",
						required: true,
						message: "请输入序号",
						trigger: ["change"]
					}
				},
				showCompanys: false,
				showCharges: false,
				chargeActions: [],
				companyObj: {}
			}
		},
		created() {
			this.onRest();
		},
		onLoad(data) {
			//获取数据字典
			this.getDictList("custom_soil_type");
			this.getDictList("custom_water_source_type");
			if (data) {
				if (data.companyObj) {
					let companyAllObj = JSON.parse(decodeURIComponent(data.companyObj));
					if (companyAllObj && companyAllObj.originItem && companyAllObj.originItem.node) {
						this.companyObj = companyAllObj.originItem.node;
						this.landInfo.companyId = this.companyObj.rootCompanyId;
						this.landInfo.companyGroupId = this.companyObj.companyId;
						this.landInfo.companyName = this.companyObj.companyFullName;
					}
				}
				if (data.item !== undefined) {
					this.item = JSON.parse(decodeURIComponent(data.item))
					this.item.soilTypeName = "";
					if (this.item.waterSourceType) {
						this.item.waterSourceTypeStr = this.item.waterSourceType.split(',');
					} else {
						this.item.waterSourceTypeStr = [];
					}
					this.landInfo = this.item;
					this.landInfo.userName = this.item.user.userName;
					this.landInfo.companyName = this.item.companyGroup.companyFullName;
					this.landInfo.enableGroup = String(this.item.landConfig.enableGroup)
					this.landInfo.enableButterflyValve = String(this.item.landConfig.enableButterflyValve)
					this.landInfo.enableAutoRefresh = String(this.item.landConfig.enableAutoRefresh)
					this.landInfo.enableBatchControl = String(this.item.landConfig.enableBatchControl)
					//监听是否编辑
					if (data.item) {
						this.editFlag = true
						uni.setNavigationBarTitle({
							title: "修改地块"
						})
					}
				} else {
					this.getLandNum();
					this.getChargeList();
				}
			}
		},
		methods: {
			/** 查询公司下拉树结构 */
			getDictList(type) {
				store
					.dispatch("getDictList", type)
					.then(res => {
						if (type == "custom_soil_type") {
							this.soilType = res.data.map(item => {
								if (this.landInfo.soilType && this.landInfo.soilType == item.dictValue) {
									this.landInfo.soilTypeName = item.dictLabel;
								}
								return {
									name: item.dictLabel,
									id: item.dictValue,
									item: item
								}
							})
						}
						if (type == "custom_water_source_type") {
							this.waterSourceType = res.data
						}
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			onRest() {
				this.landInfo = {
					id: null,
					companyName: "",
					companyId: null,
					companyGroupId: null,
					landAddress: "",
					enableGroup: "1",
					enableButterflyValve: "1",
					enableBatchControl: "1",
					enableAutoRefresh: "1",
					landName: "",
					landNum: "",
					landArea: 0,
					mobilePhone: "",
					remark: "",
					userId: 0,
					userName: "",
					orderNum: 0,
					soilType: null,
					soilTypeName: "",
					waterSourceType: null,
					waterSourceTypeStr: []
				}
			},
			onChargeOpen() {
				if (this.landInfo.id) {
					return;
				}
				this.showCharges = true
			},
			//当选择了负责人
			onChargeSelect(data) {
				this.landInfo.userId = data.id
				this.landInfo.userName = data.name
				this.showCharges = false
			},
			//土壤类型返回后
			onSoilTypeSelect(object) {
				this.landInfo.soilType = object.id
				this.landInfo.soilTypeName = object.name
			},
			onGroupChange(e) {
				this.landInfo.enableGroup = e
			},
			onEnableBatchControlChange(e) {
				this.landInfo.enableBatchControl = e
			},
			onEnableAutoRefreshChange(e) {
				this.landInfo.enableAutoRefresh = e;
			},
			onEnableButterflyValveChange(e) {
				this.landInfo.enableButterflyValve = e;
			},
			//水源类型选择
			waterSourceTypeGroupChange(e) {
				this.landInfo.waterSourceTypeStr = e;
				this.landInfo.waterSourceType = e.join();
			},
			//获取负责人列表
			getChargeList() {
				let obj = {
					companyIds: null,
					companyGroupIds: null,
					status: 0,
					delFlag: 0,
					roleId: "5",
					roleKeys: "owner",
				};
				obj.companyIds = this.landInfo.companyId;
				store
					.dispatch("allListUser", obj)
					.then(res => {
						this.chargeActions = res.rows.map(item => {
							return {
								name: item.userName,
								id: item.userId,
								mobilePhone: item.mobilePhone
							}
						})
					})
					.catch(error => {
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			//提交生成的数据
			submit() {
				this.$refs["form"]
					.validate()
					.then(res => {
						if (this.landInfo.landArea == 0) {
							this.landInfo.landArea = 0
						}
						let landConfig = {
							enableGroup: this.landInfo.enableGroup,
							enableBatchControl: this.landInfo.enableBatchControl,
							enableButterflyValve: this.landInfo.enableButterflyValve,
							enableAutoRefresh: this.landInfo.enableAutoRefresh,
						}
						if (this.landInfo.id) {
							landConfig.id = this.landInfo.landConfig.id;
						}
						this.landInfo.landConfig = landConfig;
						if (this.landInfo.id) {

							//编辑地块
							store.dispatch("updateLand", this.landInfo).then(res => {
								plugin.modal.showToast("提交成功")
								plugin.tab.navigateBack()
							})
						} else {
							//新增地块
							store.dispatch("addLand", this.landInfo).then(res => {
								plugin.modal.showToast("提交成功")
								plugin.tab.navigateBack()
							})
						}
					})
					.catch(errors => {})
			},
			//取消
			cancel() {
				plugin.tab.navigateBack()
			},
			//获取地块编号
			getLandNum() {
				plugin.modal.loading("获取地块编号中!")
				store
					.dispatch("getLandNum")
					.then(res => {
						this.landInfo.landNum = res.data.landNum
						this.landInfo.orderNum = res.data.orderNum
					})
			}
		}
	}
</script>

<style lang="scss">
	.create-container {
		background-color: #FFF;
		.custom-input {
		  width: 280px;
		}
		.form-item {
			margin-left: 20px;
			display: flex;
			align-items: flex-start;
			width: 100%;
		}

		.buttons {
			margin: 10px 50px;
			display: flex;
			justify-content: space-between;

			button {
				margin: 0px 20px;
			}
		}
	}

	// 弹窗
	.dialog-container {
		width: 90vw;
		height: 90vh;
		overflow: hidden;

		.dialog-title {
			width: 100%;
			height: 34px;
			font-size: 16px;
			line-height: 34px;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #999;
			position: relative;

			.reload-btn {
				position: absolute;
				top: 50%;
				right: 56px;
				transform: translateY(-50%);
			}

			.close-btn {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
			}
		}

		.dialog-body {
			height: auto;
			min-height: 300px;
			max-height: calc(100% - 35px);
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #f7f7f7;

			.people {
				height: 30px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 14px;
				color: black;
				line-height: 30px;
				margin: 8px 20px;
				border-bottom: 1px solid #e8e8e8;
				padding: 4px 10px;
			}
		}
	}
</style>