wjxxy_xcx/pages/home/detail.vue

<template>
	<ComponentLoading class="d_w" :loading="loading">
		<!-- <WindowTop :title="title"></WindowTop> -->
		<view class="card">
			<view class="form_item">
				<view class="label">姓名</view>
				<input v-model="form.xm" placeholder="请输入姓名" v-if="type == 'add'" />
				<view class="value" v-else>{{ form.xm || '' }}</view>
			</view>
			<view class="form_item">
				<view class="label">身份证号</view>
				<input v-model="form.sfzh" placeholder="请输入身份证号" v-if="type == 'add'" />
				<view class="value" v-else>{{ form.sfzh || '' }}</view>
			</view>
			<view class="form_item">
				<view class="label">联系方式</view>
				<input v-model="form.lxfs" placeholder="请输入联系方式" v-if="type == 'add'" />
				<view class="value" v-else>{{ form.lxfs || '' }}</view>
			</view>
			<view class="form_item">
				<view class="label">政治面貌</view>
				<picker @change="zzmmChange" :value="zzmmIndex" :range="zzmmOp" range-key="label" v-if="type == 'add'">
					<view class="uni-input">{{ zzmmOp[zzmmIndex]['label'] || '' }}</view>
				</picker>
				<view class="value" v-else>{{ zzmmView || '' }}</view>
			</view>
			<view class="form_item">
				<view class="label">三长类别</view>
				<picker @change="szlbChange" :value="szlbIndex" :range="szlbOp" v-if="type == 'add'">
					<view class="uni-input">{{ szlbOp[szlbIndex] }}</view>
				</picker>
				<view class="value" v-else>{{ form.szlb || '' }}</view>
			</view>
			<view class="form_item">
				<view class="label">单位职务</view>
				<input v-model="form.dwzw" placeholder="请输入单位职务" v-if="type == 'add'" />
				<view class="value" v-else>{{ form.dwzw }}</view>
			</view>
			<view class="form_item text_area" style="height: 400rpx;">
				<view class="label">居住地址</view>
				<textarea v-model="form.zz" placeholder="请输入居住地址" v-if="type == 'add'" />
				<view class="value" v-else>{{ form.zz }}</view>
			</view>
		</view>
		<view class="f_b" @click="save" v-if="type == 'add'">
			<view>提 交</view>
		</view>
	</ComponentLoading>
</template>
<script>
	import {
		saveXxy,
		detail,
		dictionary
	} from '@/api/wjxxy.js'
	import WindowTop from '@/components/window-top/index'
	import ComponentLoading from '@/components/component-loading/index'

	export default {
		components: {
			WindowTop,
			ComponentLoading
		},
		data() {
			return {
				type: 'add',
				form: {
					xm: '',
					sfzh: '',
					lxfs: '',
					ldId: '',
					dyh: '',
					zzmm: '01',
					szlb: '网格长',
					dwzw: '',
					zz: ''
				},
				loading: false,
				zzmmOp: [],
				zzmmIndex: 0,
				szlbOp: ['网格长', '单元长', '楼栋长'],
				szlbIndex: 0,
				zzmmView: ''
			}
		},
		computed: {
			title() {
				if (this.type == 'add') {
					return '添加物建员'
				} else {
					return '物建员详情'
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			if (this.type == 'add') {
				this.form.ldId = option.ldId
				this.form.dyh = option.dyh

				let p = this.getOp()
				this.loading = true
				p.finally(() => {
					this.loading = false
				})

			} else {
				this.loading = true
				let p1 = this.getDetail(option.id)
				let p2 = this.getOp()

				Promise.all([p1, p2]).then(res => {
					const list = this.zzmmOp
					for (let i = 0; i < list.length; i++) {
						if (list[i].value == this.form.zzmm) {
							this.zzmmView = list[i].label
						}
					}
				}).finally(() => {
					this.loading = false
				})
			}
		},
		methods: {
			getDetail(id) {
				let p = new Promise((resolute, reject) => {
					detail(id.toString()).then(res => {
						let data = JSON.parse(res.data.dataList[0].fieldValues[0].value).data

						if (data) {
							this.form = data
						}
						resolute()
					}).catch(() => {
						reject()
					})
				})
				return p
			},
			getOp() {
				let p = new Promise((resolute, reject) => {
					dictionary().then(res => {
						this.zzmmOp = JSON.parse(res.data.dataList[0].fieldValues[0].value).data.zzmm
						resolute()
					}).catch(() => {
						reject()
					})
				})
				return p
			},
			zzmmChange(e) {
				const index = e.detail.value
				this.zzmmIndex = index
				this.form.zzmm = this.zzmmOp[index]['value']
			},
			szlbChange(e) {
				const index = e.detail.value
				this.szlbIndex = index
				this.form.szlb = this.szlbOp[index]
			},
			save() {
				this.loading = true
				saveXxy(this.form).then(res => {
					uni.navigateBack();
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.d_w {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.card {
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
		padding: 0 24rpx;
		flex: 1;
		margin: 8rpx 24rpx;
	}

	.form_item {
		border-bottom: 1rpx solid rgba(231, 231, 231, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;

		uni-input {
			width: 50vw;
		}

		uni-picker {
			width: 50vw;
		}

		textarea {
			width: 50vw;
		}
	}

	.text_area {
		align-items: flex-start !important;

		// border: 1rpx solid rgba(231, 231, 231, 1);
		.label {
			margin-top: 16rpx;
		}
	}

	.f_b {
		background-color: rgba(16, 109, 255, 1);
		border-radius: 16rpx;
		// width: 100%;
		width: calc(100% - 48rpx);
		height: 88rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-weight: 600;
	}
</style>