front-end/mobile-code/src/admin/staff/add.vue

<template>
	<div class="app-content">
		<!-- 员工信息 -->
		<form @submit="formSubmit" @reset="formReset">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">员工姓名</div>
					<input v-model="form.adminName" placeholder-class="phcolor" class="tui-input" name="adminName" placeholder="请输入姓名" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title required">角色</div>
					<picker mode="selector" :value="form.roleId" :range="roleList" range-key="roleName" @change="changeRoleFn" class="tui-input">
						<input v-model="form.roleId" name="roleId" type="text" hidden />
						<div v-if="form.roleId">{{ roleSelData.roleName }}</div>
						<div class="tui-placeholder" v-else>请选择</div>
					</picker>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true" @click="selMemberFn">
					<div class="tui-title required">绑定微信</div>
					<div v-if="form.userId" class="member-wrap flex-center">
						<input v-model="form.userId" name="userId" type="text" hidden />
						<div class="member-img">
							<app-avatar-module :src="memberData.avatarUrl" :width="60" />
						</div>
						<div class="member-det">
							<div class="app-size-28">{{ memberData.userName }}</div>
							<div>{{ memberData.mobile == 0 ? '暂无' : memberData.mobile }}</div>
						</div>
					</div>
					<div v-else class="tui-placeholder">请选择</div>
				</tui-list-cell>
			</div>
			<div class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登陆</div>
			<!-- 收款通知 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
					<div class="tui-title">收款通知</div>
					<div>
						<switch :checked="form.remind == 0 ? false : true" @change="remindChangeFn" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 登录信息 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">手机号</div>
					<input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">登陆密码</div>
					<input v-model="form.password" placeholder-class="phcolor" class="tui-input" name="password" placeholder="请输入" maxlength="50" type="password" />
				</tui-list-cell>
				<tui-list-cell class="line-cell remark-wrap" :hover="false">
					<div class="tui-title">备注信息</div>
					<div class="tui-input">
						<textarea v-model="form.remark" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入内容" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 马上启用 -->
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell between" padding="14rpx 30rpx" :hover="false">
					<div class="tui-title">马上启用</div>
					<div>
						<switch :checked="form.status == 0 ? false : true" @change="statusChangeFn" />
					</div>
				</tui-list-cell>
			</div>
			<!-- 提交 -->
			<div class="confirm-btn">
				<button class="admin-button-com big blue" formType="submit">提交</button>
			</div>
		</form>
	</div>
</template>

<script>
	import TuiListCell from '@/components/plugin/list-cell'
	import AppAvatarModule from '@/components/module/app-avatar'
	const form = require('@/utils/formValidation.js')
	// api
	import { getRoleList, getStaffDet as getDet, addStaff as add, updateStaff as update } from '@/api/staff'
	import { getDet as getMemberDet } from '@/api/member'
	export default {
		name: 'staff-add',
		components: {
			TuiListCell,
			AppAvatarModule
		},
		data() {
			return {
				form: {
					adminName: '',
					mobile: '',
					roleId: '',
					remind: 0,
					password: '',
					userId: '',
					status: 0,
					remark: ''
				},
				roleList: [],
				roleSelData: {},
				memberData: {}
			}
		},
		onLoad() {
			// this.init()
		},
		onShow() {
			if (this.option.id) {
				uni.setNavigationBarTitle({
					title: `修改员工`
				})
			} else {
				uni.setNavigationBarTitle({
					title: `添加员工`
				})
			}
		},
		methods: {
			init() {
				let data = uni.getStorageSync('addStaffData')
				if (data) {
					uni.removeStorageSync('addStaffData')
					this.form = data.form
					this.roleList = data.roleList
					this.roleSelData = data.roleSelData
				}
				let memberData = uni.getStorageSync('addSelMember')
				if (memberData) {
					uni.removeStorageSync('addSelMember')
					this.memberData = memberData
					this.form.userId = memberData.id
				}

				if (data) return false

				this._getRoleList().then(res => {
					if (this.option.id) {
						this._getDet()
					}
				})
			},
			// api
			async _getRoleList() {
				await getRoleList().then(res => {
					if (this.$util.isEmpty(res.data)) return false
					this.roleList = res.data.list
				})
			},
			_getDet() {
				getDet({ id: this.option.id }).then(res => {
					if (this.$util.isEmpty(res.data)) return
					Object.keys(this.form).forEach((i, index) => {
						// if (i != 'password') {
						this.form[i] = res.data[i]
						// }
					})
					this.roleSelData = this.roleList.filter(e => this.form.roleId == e.id)[0]

					if (this.form.userId && this.form.userId != '0') {
						this._getMemberDet()
					}
				})
			},
			// 获取客户详情
			_getMemberDet() {
				getMemberDet({ userId: this.form.userId }).then(res => {
					if (this.$util.isEmpty(res.data)) return
					this.memberData = res.data
				})
			},
			// option
			// 关联微信
			selMemberFn() {
				let data = {
					form: this.form,
					roleList: this.roleList,
					roleSelData: this.roleSelData
				}
				uni.setStorageSync('addStaffData', data)
				this.$util.pageTo({
					url: '/admin/staff/sel-member',
					query: {
						...this.option
					}
				})
			},
			changeRoleFn(e) {
				this.roleSelData = this.roleList[e.detail.value]
				this.form.roleId = this.roleSelData.id
			},
			remindChangeFn(e) {
				this.form.remind = e.detail.value ? 1 : 0
			},
			statusChangeFn(e) {
				this.form.status = e.detail.value ? 1 : 0
			},
			confirmFn() {
				let hostFn = this.option.id ? update : add
				if (this.option.id) {
					this.form.id = this.option.id
				}
				hostFn(this.form).then(res => {
					let promptText = this.option.id ? '修改成功！' : '添加成功！'
					this.$msg(promptText)
					this.$util.pageTo('/admin/staff/list')
				})
			},
			// 表单验证
			formSubmit(e) {
				// 表单规则
				let rules = [
					{
						name: 'adminName',
						rule: ['required'],
						msg: ['请输入姓名']
					},
					{
						name: 'mobile',
						rule: ['required'],
						msg: ['请输入手机号']
					},
					{
						name: 'roleId',
						rule: ['required'],
						msg: ['请选择角色']
					},
					{
						name: 'userId',
						rule: ['required'],
						msg: ['请选择关联微信']
					},
					{
						name: 'password',
						rule: ['required'],
						msg: ['请输入密码']
					}
				]
				// 进行表单检查
				let formData = e.detail.value
				let checkRes = form.validation(formData, rules)
				// 验证通过!
				if (!checkRes) {
					this.confirmFn()
				} else {
					this.$msg(checkRes)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.prompt-text {
		color: $fontColor3;
		padding-left: 30px;
		margin-bottom: 30px;
	}
	// ---
	.module-com {
		margin-bottom: 20px;
		.member-wrap {
			.member-det {
				font-size: 24px;
				margin-left: 20px;
			}
		}
		.remark-wrap {
			align-items: flex-start;
			.remark {
				height: 240px;
			}
		}
	}
	// 按钮
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 20px;
		.admin-button-com {
			width: 100%;
		}
	}
</style>