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

<template>
	<view class="create-container">
		<u--form labelPosition="left" :model="groundInfo" :rules="rules" ref="form">
			<u-form-item class="form-item" label="地块名称" prop="landName" labelWidth="100px" required>
				<u--input v-model="groundInfo.landName" border="none" placeholder="请选择地块名称"></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="groundInfo.landNum" border="none" placeholder="请输入地块编号"></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; width: 200px" v-model="groundInfo.userName" border="none" disabled
					placeholder="请选择地块负责人" suffixIcon="arrow-right"></u--input>
			</u-form-item>

			<u-gap height="10px" bgColor="#F3F3F3"></u-gap>

			<u-form-item class="form-item" label="地块地址" labelWidth="100px">
				<u--input v-model="groundInfo.landAddress" border="none" placeholder="请选择地块地址"></u--input>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>

			<u-form-item class="form-item" label="地块面积" labelWidth="100px">
				<u--input v-model="groundInfo.landIcon" border="none" type="digit" placeholder="请选择地块面积"></u--input>
			</u-form-item>

			<u-form-item class="form-item" label="土壤类型" labelWidth="100px">
				<u--input style="width: 200px; background: white" @click="showSoilType = true"
					v-model="groundInfo.soilTypeName" border="none" disabled placeholder="请选择土壤类型"
					suffixIcon="arrow-right"></u--input>
			</u-form-item>

			<u-form-item class="form-item" label="水源类型" labelWidth="100px">
				<u-checkbox-group v-model="groundInfo.waterSourceTypeStr" @change="waterSourceTypeGroupChange">
					<view v-for="(item, index) in waterSourceType" style="width: 100%;">
						<u-checkbox :key="index" :label="item.dictLabel" :name="item.dictValue"></u-checkbox>
					</view>
				</u-checkbox-group>
			</u-form-item>

			<u-form-item class="form-item" label="排序" prop="orderNum" labelWidth="100px" required>
				<u--input v-model="groundInfo.orderNum" border="none" type="number" placeholder="请输入排序"></u--input>
			</u-form-item>
			<u-gap height="10px" bgColor="#F3F3F3"></u-gap>

			<u-form-item class="form-item" label="是否分组" labelWidth="100px" required>
				<u-radio-group @change="onGroupChange" v-model="groundInfo.landGroupFlag">
					<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-form-item class="form-item" label="启用蝶阀" labelWidth="100px" required>
				<u-radio-group @change="onEnableFlapValveChange" v-model="groundInfo.enableFlapValve">
					<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-form-item v-if="userType == 0" class="form-item" label="启用批量控制" labelWidth="100px" required>
				<u-radio-group @change="onManualOperationChange" v-model="groundInfo.landManualOperation">
					<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-gap height="10px" bgColor="#F3F3F3"></u-gap>

			<view style="margin: 10px 20px">备注</view>
			<u-form-item label="" prop="groundInfo.remark" borderBottom ref="item3" labelWidth="40px">
				<u--textarea style="margin: 0px 20px" placeholder="请输入备注" v-model="groundInfo.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="showCompanys" :actions="companyActions" title="所属公司" description=""
			@close="showCompanys = false" @select="onCompanySelect"> </u-action-sheet>

		<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 setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import store from "@/store"
	import plugin from "@/plugins"
	const editFlag = ref(false)
	const item = ref({})
	const userType = ref(null)

	// 监听事件传过来的值
	onLoad(data => {
		userType.value = store.state.user.user.userType;
		if (data.item !== undefined) {
			item.value = JSON.parse(decodeURIComponent(data.item))

			item.value.soilTypeName = "";
			if (item.value.waterSourceType) {
				item.value.waterSourceTypeStr = item.value.waterSourceType.split(',');
			} else {
				item.value.waterSourceTypeStr = [];
			}
			groundInfo.value = item.value
			groundInfo.value.landGroupFlag = String(item.value.landGroupFlag)
			groundInfo.value.enableFlapValve = String(item.value.enableFlapValve)
			groundInfo.value.landManualOperation = String(item.value.landManualOperation)
			//监听是否编辑
			if (data.item) {
				editFlag.value = true
				uni.setNavigationBarTitle({
					title: "修改地块"
				})
			}
		} else {
			let companyTemp = store.state.user.company
			groundInfo.value.companyName = companyTemp.companyName
			groundInfo.value.companyId = companyTemp.companyId
			companyId.value = companyTemp.companyId
		}
	})

	const form = ref(null)
	const soilType = ref([])
	// 显示选择角色的操作菜单 （从页面底部弹出那个）
	const showSoilType = ref(false)
	const waterSourceType = ref([])

	const groundInfo = ref({
		companyName: "",
		companyId: 0,
		landAddress: "",
		landGroupFlag: "1",
		enableFlapValve: "1",
		landManualOperation: "1",
		landName: "",
		landNum: "",
		landIcon: 0,
		mobilePhone: "",
		remark: "",
		userId: 0,
		userName: "",
		orderNum: 0,
		soilType: null,
		soilTypeName: "",
		waterSourceType: null,
		waterSourceTypeStr: [],
	})
	const rules = ref({
		companyName: {
			type: "string",
			required: true,
			message: "请填写所属公司",
			trigger: ["blur", "change"]
		},
		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"]
		},
		landGroupFlag: {
			type: "string",
			required: true,
			message: "请选择",
			trigger: ["change"]
		},
		enableFlapValve: {
			type: "string",
			required: true,
			message: "请选择",
			trigger: ["change"]
		},
		orderNum: {
			type: "integer",
			required: true,
			message: "请输入序号",
			trigger: ["change"]
		}
	})
	const showCompanys = ref(false)
	const showCharges = ref(false)
	const companyId = ref(0)

	onReady(() => {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		form.value.setRules(rules.value)
		//获取数据字典
		getDictList("custom_soil_type")
		getDictList("custom_water_source_type")
		//获取地块编号
		//getLandNum()
		//获取负责人列表
		//getChargeList()
	})

	//公司列表
	const companyActions = ref([])
	//负责人列表
	const chargeActions = ref([])
	function onChargeOpen() {
		if (groundInfo.value.id) {
			return;
		}
		showCharges.value = true
	}

	//当选择了公司
	function onCompanySelect(data) {
		groundInfo.value.companyId = data.id
		groundInfo.value.companyName = data.name
	}
	//当选择了负责人
	function onChargeSelect(data) {
		groundInfo.value.userId = data.id
		groundInfo.value.userName = data.name
		showCharges.value = false
	}
	//当选择分组选定后
	function onGroupChange(e) {
		groundInfo.value.landGroupFlag = e
	}

	function onEnableFlapValveChange(e) {
		groundInfo.value.enableFlapValve = e
	}

	function onManualOperationChange(e) {
		groundInfo.value.landManualOperation = e
	}
	//获取数据字典
	function getDictList(type) {
		store
			.dispatch("getDictList", type)
			.then(res => {
				if (type == "custom_soil_type") {
					soilType.value = res.data.map(item => {
						if (groundInfo.value.soilType && groundInfo.value.soilType == item.dictValue) {
							groundInfo.value.soilTypeName = item.dictLabel;
						}
						return {
							name: item.dictLabel,
							id: item.dictValue,
							item: item
						}
					})
				}
				if (type == "custom_water_source_type") {
					waterSourceType.value = res.data
				}
			})
			.catch(error => {
				plugin.modal.msgError(error)
			})
			.finally(() => {
				plugin.modal.closeLoading()
			})
	}
	//土壤类型返回后
	function onSoilTypeSelect(object) {
		groundInfo.value.soilType = object.id
		groundInfo.value.soilTypeName = object.name
	}
	//水源类型选择
	function waterSourceTypeGroupChange(e) {
		groundInfo.value.waterSourceTypeStr = e;
		groundInfo.value.waterSourceType = e.join();
	}
	//获取负责人列表
	function getChargeList() {
		let query = {
			companyId: companyId.value,
			userType: 1,
			roleId: 5
		}
		store
			.dispatch("getChargeList", query)
			.then(res => {
				chargeActions.value = res.data.map(item => {
					return {
						name: item.userName,
						id: item.userId,
						mobilePhone: item.mobilePhone
					}
				})
			})
			.catch(error => {
				plugin.modal.msgError(error)
			})
			.finally(() => {
				plugin.modal.closeLoading()
			})
	}
	//提交生成的数据
	function submit() {
		form.value
			.validate()
			.then(res => {
				if (groundInfo.value.landIcon == 0) {
					groundInfo.value.landIcon = 0
				}
				if (editFlag.value) {
					//编辑地块
					//提交新增地块数据
					store.dispatch("onEditGround", groundInfo.value).then(res => {
						plugin.modal.showToast("提交成功")
						plugin.tab.navigateBack()
					})
				} else {
					//新增地块
					//提交新增地块数据
					store.dispatch("postNewGround", groundInfo.value).then(res => {
						plugin.modal.showToast("提交成功")
						plugin.tab.navigateBack()
					})
				}
			})
			.catch(errors => {
				plugin.modal.msgError(errors)
			})
	}
	//取消
	function cancel() {
		plugin.tab.navigateBack()
	}
	//获取地块编号
	function getLandNum() {
		plugin.modal.loading("获取地块编号中!")
		store
			.dispatch("onGetLandNum")
			.then(res => {
				groundInfo.value.landNum = res.data.landNum
				groundInfo.value.orderNum = res.data.orderNum
			})
			.catch(error => {
				plugin.modal.msgError("获取地块编号失败!")
			})
			.finally(() => {
				plugin.modal.closeLoading()
			})
	}
</script>

<style lang="scss">
	.create-container {
		.form-item {
			margin-left: 20px;
			display: flex;
			align-items: flex-start;
		}

		.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>