TaicangPopulationApp2/pages/house/addAndEdit.vue

<template>
	<navigation-general :title="title">
		<u-form :model="form" ref="uForm" label-width="130rpx">
			<u-form-item label="姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
			<u-form-item label="身份证"><u-input v-model="form.credentialNo" /></u-form-item>
			<u-form-item label="手机号" prop="phone"><u-input v-model="form.phone" /></u-form-item>
			<u-form-item label="人员类型">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="item.checked" v-for="(item, index) in typeList" :key="index" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="户籍" prop="color">
				<u-radio-group v-model="form.color">
					<u-radio v-for="(item, index) in hujiList" :key="index" :name="item.dictLabel">
						{{item.dictLabel}}{{item.dictLabel == "HZ" ? "（有户口自住）" : "（有户口不住）"}}

					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="流动" prop="color">
				<u-radio-group v-model="form.color">
					<u-radio v-for="(item, index) in liudList" :key="index" :name="item.dictLabel">
						{{item.dictLabel}}{{item.dictLabel == "NZ" ? "（没户口自住）" : "（没户口租客）"}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="工作单位"><u-input v-model="form.workunit" /></u-form-item>
			<u-form-item label="备注"><u-input v-model="form.remark" /></u-form-item>
		</u-form>
		<bottom-btn type="primary" title="提交" @handlerClick="handlerClick"></bottom-btn>


	</navigation-general>
</template>

<script>
	import {
		mapGetters
	} from "vuex";

	import {
		addPerson,
		getPerson,
		updatePerson
	} from "@/api/taicangpop/person.js";
	import {
		getDicts
	} from "@/api/system/dict/data";
	export default {

		data() {
			return {
				multiple: [],
				hujiList: [],
				liudList: [],
				title: '',
				form: {
					buildingId: undefined,
					color: undefined,
					credentialNo: undefined,
					deptId: undefined,
					houseId: undefined,
					id: null,
					isD: 0,
					isJ: 0,
					isK: 0,
					isX: 0,
					name: undefined,
					phone: undefined,
					remark: undefined,
					type: null,
					userId: null,
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur'],
						},

					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								console.log("value:" + value);
								if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
									callback(new Error("手机号只能为数字！"));
								} else {
									callback();
								}
							},
							trigger: "blur"
						},
					],
					color: [{
						required: true,
						message: '请选择分色',
						trigger: ['change', 'blur'],
					}],
				},
				typeList: [{
						name: '中共党员',
						key: 'isD',
						checked: false,

					},
					{
						name: '帮扶对象',
						key: 'isK',
						checked: false,

					},
					{
						name: '重点人群',
						checked: false,
						key: 'isX',

					},
					{
						name: '退伍军人',
						key: 'isJ',
						checked: false,

					},
				]
			};
		},
		computed: {
			...mapGetters(["userId"]),
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if (option.personId) {
				this.title = '居民信息修改'
				//获取人员详细信息
				this.getPersonInfo(option.personId)
			} else {
				this.title = '新增居民'
				this.form.buildingId = option.buildingId
				this.form.houseId = option.houseId
				this.form.deptId = option.deptId

			}

			this.getDictList()
		},
		methods: {
			async getPersonInfo(personId) {
				const res = await getPerson(personId)
				for (let key in res.data) {
					const item = res.data[key]
					let index = this.typeList.findIndex(it => it.key == key)
					if (index != -1) {
						this.typeList[index].checked = item > 0 ? true : false
					}
				}
				this.form = res.data
			},
			handlerClick() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.color == "HZ" || this.form.color == "HO") {
							this.form.type = 1;
						} else {
							this.form.type = 2;
						}
						this.form.userId = this.userId
						if (this.form.id != null) {
							updatePerson(this.form).then((response) => {
								uni.showToast({
									title: '修改成功',
									success: () => {
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)
									}
								})
							});
						} else {
							addPerson(this.form).then((res) => {
								uni.showToast({
									title: '新增成功',
									success: () => {
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)
									}
								})

							});
						}

					} else {
						console.log('没有痛苦')
					}
				})

			},
			checkboxGroupChange(e) {
				console.log(e)
				this.form.isD = e.some((item) => item == "中共党员") ?
					1 :
					0;
				this.form.isK = e.some((item) => item == "帮扶对象") ?
					1 :
					0;
				this.form.isJ = e.some((item) => item == "退伍军人") ?
					1 :
					0;
				this.form.isX = e.some((item) => item == "重点人群") ?
					1 :
					0;
			},
			//获取字典
			async getDictList() {
				const res = await getDicts('b_census_color_type')
				this.hujiList = res.data
				const result = await getDicts('b_flow_color_type')
				this.liudList = result.data
				console.log(this.hujiList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-form {
		background: #fff;
		padding: 20rpx;
	}
</style>