wx_oms/userManagement/customer/detail.vue

<template>
	<view class="detail">
		<view class="addDiver_card">
			<view class="card_title">
				<view class="tiao"></view>
				<view class="card_title_text">基础信息</view>
			</view>
			<uni-list>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;"
							mode="widthFix"></image>
						用户手机号
					</view>
					<view slot="body" class="list_right">
						<input v-model="postData.phone" :disabled="!isAdd" placeholder="请输入用户手机号"
							class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;"
							mode="widthFix"></image>
						用户姓名
					</view>
					<view slot="body" class="list_right">
						<input v-model="postData.userName" :disabled="!wantUpdate" placeholder="请输入用户姓名"
							class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;"
							mode="widthFix"></image>
						用户密码
					</view>
					<view slot="body" class="list_right">
						<input v-model="postData.password" password :disabled="!wantUpdate" placeholder="请输入密码"
							class="list_right_input" />
					</view>
				</uni-list-item>
			</uni-list>
			<view class="card_title">
				<view class="tiao"></view>
				<view class="card_title_text">用户权限信息</view>
			</view>
			<uni-list>
				<uni-list-item direction="column"
					@tap="jump('/userManagement/customer/components/company',postData.oilCompanyInfoList)">
					<view class="list_header" slot="header">
						所属公司
					</view>
					<view slot="body" class="list-frame">
						<view>
							<text class="label" v-for="(item,index) in postData.oilCompanyInfoList"
								:key="index">{{item.name}}</text>
						</view>
						<view v-if="!postData.oilCompanyInfoList.length" class="tips">选择所属公司</view>
						<uni-icons v-show="wantUpdate" color="#999" type="right" size="15"></uni-icons>
					</view>
				</uni-list-item>
				<uni-list-item direction="column"
					@tap="jump('/userManagement/customer/components/auth',postData.sysUserRoleList)">
					<view class="list_header" slot="header">
						<image v-if="isAdd" src="@/static/bt.png" style="width: 12rpx;position: absolute;left: -20rpx;"
							mode="widthFix"></image>
						所属权限
					</view>
					<view slot="body" class="list-frame">
						<view>
							<text class="label" v-for="(item,index) in postData.sysUserRoleList"
								:key="index">{{item.roleName}}</text>
						</view>
						<view v-if="!postData.sysUserRoleList.length" class="tips">选择所属权限</view>
						<uni-icons v-show="wantUpdate || !postData.sysUserRoleList.length" color="#999" type="right"
							size="15"></uni-icons>
					</view>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="button-group">
			<view v-if="!wantUpdate" class="button orange" @tap="update">修改</view>
			<view v-else class="button blue" @tap="submit">保存</view>
			<view class="button special red" @tap="deleteData">删除</view>
		</view>
	</view>
</template>

<script>
	import tool from '@/utils/tool'

	import serve from '@/api/userManagement/customer.js'

	export default {
		data() {
			return {
				isAdd: false,
				wantUpdate: false,
				postData: {
					phone: '',
					userName: '',
					password: '',
					sysUserRoleList: [],
					oilCompanyInfoList: [],
				},
			}
		},
		onLoad(options) {
			if (options.item) {
				this.postData = JSON.parse(decodeURI(options.item))
				this.getByUserId()
			} else this.isAdd = this.wantUpdate = true

			uni.$on('customerCompany', (item) => {
				if (!item.isChecked) {
					let index = this.postData.oilCompanyInfoList.findIndex(secItem => secItem.id == item.id)
					if (index !== -1) {
						this.postData.oilCompanyInfoList.splice(index, 1)
					}
					return
				}
				this.postData.oilCompanyInfoList.push(item)
			})

			uni.$on('customerAuth', (item) => {
				if (!item.isChecked) {
					let index = this.postData.sysUserRoleList.findIndex(secItem => secItem.id == item.id)
					if (index !== -1) {
						this.postData.sysUserRoleList.splice(index, 1)
					}
					return
				}
				this.postData.sysUserRoleList.push(item)
				console.log('this.postData.sysUserRoleList', this.postData.sysUserRoleList)
			})
		},
		methods: {
			deleteData() {
				uni.showModal({
					title: '确定删除吗？',
					success: res => {
						if (res.confirm) {
							serve.deleteByUserId({
								id: this.postData.id
							}).then(res => {
								if (res.code === 20000) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}
							})
						}
					}
				})
			},
			getByUserId() {
				serve.getByUserId(this.postData.id).then(res => {
					this.$set(this.postData, 'sysUserRoleList', res.data.sysUserRoleList)
					this.$set(this.postData, 'oilCompanyInfoList', res.data.oilCompanyInfoList)
				})
			},
			submit() {
				let needCheckMap = {
					userName: {
						tacitly: '',
						WrongText: '请输入用户姓名'
					},
					phone: {
						custom: /^[1][3,4,5,7,8,9][0-9]{9}$/,
						WrongText: '请输入正确手机号码'
					},
					oilCompanyInfoList: {
						minLength: 1,
						WrongText: '请选择所属公司'
					},
					sysUserRoleList: {
						minLength: 1,
						WrongText: '请选择所属权限'
					}
				}
				if (this.isAdd) {
					needCheckMap['password'] = {
						tacitly: '',
						WrongText: '请输入用户密码'
					}
				}

				let check = tool.checkFn(this.postData, [], needCheckMap)

				if (!check.result) {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
					return
				}

				let roleIds = this.postData.sysUserRoleList.reduce((pre, cur) => {
					pre.push(cur.id)
					return pre
				}, [])
				this.postData.roleIds = roleIds

				let companyIds = this.postData.oilCompanyInfoList.reduce((pre, cur) => {
					pre.push(cur.id)
					return pre
				}, [])
				this.postData.companyIds = companyIds
				this.postData.userId = this.postData.id

				this.judgeQuery().then(res => {
					if (res.code === 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
			judgeQuery() {
				if (this.isAdd) return serve.enterpriseUserSave(this.postData)
				else return serve.userPermissionUpdate(this.postData)
			},
			update() {
				this.wantUpdate = true
			},
			jump(path, item, banJump = true) {
				if (!banJump) return
				if (!this.wantUpdate) return
				let url = item ? `${path}?item=${encodeURI(JSON.stringify(item))}` : path
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		padding: 0 40rpx;

		.addDiver_card {

			background: #FFFFFF;
			box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
			border-radius: 20rpx;
			margin-top: 38rpx;
			overflow: hidden;
			padding: 20rpx;
			box-sizing: border-box;

			.card_title {
				display: flex;
				// border-bottom: 1px solid #F0F0F0;
				align-items: center;
				padding-bottom: 17rpx;
				height: 86rpx;
			}

			.card_title_text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-left: 10rpx;
			}

			.tiao {
				width: 8rpx;
				height: 34rpx;
				background: #2866FF;
			}

			.list_header {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;
				// padding-left: 16px;
				position: relative;
				height: fit-content;
			}


			.list_right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}

			.list_right_input {
				width: 100%;
				color: #333333;
				text-align: end !important;
				font-size: 28rpx;
				text-align: right !important;
				padding-left: 90rpx;
				box-sizing: border-box;
			}

			.list-frame {
				margin-top: 25rpx;
				position: relative;

				&.site {
					margin: 0;
					flex: 1
				}

				uni-icons {
					position: absolute;
					top: 50%;
					transform: translateY(-51%);
					right: -30rpx;
				}

				.tips {
					font-size: 24rpx;
					color: #999;
					text-align: right;

					&.rel2rpx {
						position: 'relative';
						top: 2rpx
					}
				}
			}

			.single-label {
				color: #999;
				font-size: 24rpx;
			}

			.label {
				margin: 3rpx 1rpx;
				display: inline-block;
				padding: 10rpx 15rpx;
				color: #999;
				font-size: 24rpx;
				border: 1px solid #F0F0F0;
				border-radius: 5rpx;
			}
		}

		.button-group {
			position: absolute;
			left: 50%;
			bottom: 70rpx;
			transform: translateX(-50%);
		}

		.button {
			width: 670rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			border-radius: 10rpx;

			&.special {
				margin-top: 35rpx;
			}

			&.orange {
				background: #FF8C00;
			}

			&.red {
				background: #EA0000;
			}

			&.blue {
				background: #2866FF;
			}
		}
	}
</style>