chaoshi/src/pages/erp/user/addUser.vue

<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/erp/user` }">
						<!-- <Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            > -->
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="
              $route.query.id !== '0' ? '编辑用户' : '添加用户'
            " class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form class="formValidate mt20" ref="formValidate" :rules="ruleValidate" :model="formValidate"
				:label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<FormItem label="用户头像：" prop="avatar" v-if="avshow">
						<Row>
							<Col span="24">
							<div v-if="formValidate.avatar" class="upload-list">
								<div class="upload-item">
									<img v-lazy="formValidate.avatar" />
									<Button shape="circle" icon="ios-close" @click="delImage"></Button>
								</div>
							</div>
							<Button v-else class="upload-select" type="dashed" icon="ios-add"
								@click="modalPicTap('dan', 'avatar', 1)"></Button>
							</Col>
						</Row>
						<Row>
							<Col class="tips">
							建议上传大小：宽200px，高200px
							</Col>
						</Row>
					</FormItem>
					<Col span="24">
					<FormItem label="用户名称：" prop="staff_name">
						<Input v-model="formValidate.staff_name" placeholder="请输入用户名称" v-width="'400'" />
					</FormItem>
					</Col>
					<!-- is_manager -->
					<Col span="24">
					<FormItem label="是否管理：">
						<i-switch v-model="formValidate.is_manager" :true-value="1" :false-value="0" size="large">
							<span slot="open">是</span>
							<span slot="close">否</span>
						</i-switch>
					</FormItem>
					</Col>
					<!-- is_system -->
					<Col span="24">
					<FormItem label="是否系统用户：">
						<i-switch v-model="formValidate.is_system" :true-value="1" :false-value="0" size="large">
							<span slot="open">是</span>
							<span slot="close">否</span>
						</i-switch>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="登录账号：" prop="account" >
						<Input v-model="formValidate.account" placeholder="请输入账号" v-width="'400'" :disabled="formValidate.id != 0"/>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="登录密码：" prop="pwd" label-for="pwd" v-if="formValidate.id == 0">
						<Input v-model="formValidate.pwd" placeholder="请输入登录密码" v-width="'400'" type="password" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="绑定用户：" prop="nickname" label-for="nickname" v-if="ushow">
						<Input v-model="formValidate.nickname" @on-clear="clearSpread" clearable placeholder="请选择商城用户"
							icon="ios-arrow-down" @on-focus="editSpread" v-width="'400'" @on-blur="showUser"></Input>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="绑定客服：" prop="kefu" label-for="kefu" v-if="kshow">
						<Input v-model="formValidate.kefu" @on-clear="clearSpreadKefu" clearable placeholder="请选择客服"
							icon="ios-arrow-down" @on-focus="editSpreadKefu" v-width="'400'"
							@on-blur="showKefu"></Input>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="绑定后台：" prop="admin_name" label-for="admin_name" v-if="ashow">
						<Input v-model="formValidate.admin_name" @on-clear="clearSpreadAdmin" clearable
							placeholder="请选择后台账号" icon="ios-arrow-down" @on-focus="editSpreadAdmin" v-width="'400'"
							@on-blur="showAdmin"></Input>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="账号归属：" prop="wid">
						<RadioGroup v-model="formValidate.type">
							<!-- :disabled="formValidate.id != 0" -->
							<Radio :label="0" >
								<Icon type="social-apple"></Icon>
								<span>系统</span>
							</Radio>
							<Radio :label="1" >
								<Icon type="social-apple"></Icon>
								<span>仓库</span>
							</Radio>
							<Radio :label="2" >
								<Icon type="social-android"></Icon>
								<span>门店</span>
							</Radio>
						</RadioGroup>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="所属仓库：" prop="wid" v-if="this.formValidate.type == 1">
						<el-cascader placeholder="请选择所属仓库" class="input-add" size="mini" v-model="formValidate.wid"
							:options="data1" :props="props" @change="userSearchs" filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="所属门店：" prop="store_id" v-if="this.formValidate.type == 2">
						<el-cascader placeholder="请选择所属门店" class="input-add" size="mini" v-model="formValidate.store_id"
							:options="staffData" :props="propss" @change="userSearchs" filterable clearable
							v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<!-- tableList -->
					<Col span="24">
					<FormItem label="角色身份：" prop="roles" >
						<el-cascader placeholder="请选择角色身份" class="input-add" size="mini" v-model="formValidate.roles"
							:options="tableList" :props="propsss" @change="userSearchs" filterable clearable
							v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="手机号码：" prop="phone">
						<Input v-model="formValidate.phone" placeholder="请输入手机号码" v-width="'400'" />
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="fixed-card"
			:style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }">
			<Form>
				<FormItem>
					<Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
				</FormItem>
			</Form>
		</Card>
		<Modal v-model="customerShow" scrollable title="请选择商城用户" :closable="false" width="900">
			<customerInfo v-if="customerShow" @imageObject="imageObject"></customerInfo>
		</Modal>
		<Modal v-model="adminShow" scrollable title="请选择商城用户" :closable="false" width="900">
			<adminList v-if="adminShow" @imageObject="imageObjectAdmin"></adminList>
		</Modal>
		<Modal v-model="kefuShow" scrollable title="请选择绑定客服" :closable="false" width="900">
			<kefuList v-if="kefuShow" @imageObject="imageObjectKefu"></kefuList>
		</Modal>
		<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="上传用户头像" :mask-closable="false"
			:z-index="500">
			<uploadPictures isChoice="单选" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic">
			</uploadPictures>
		</Modal>
	</div>
</template>

<script>
	import customerInfo from "@/components/customerInfo";
	import kefuList from "@/components/kfList";
	import adminList from "@/components/adminList";
	import uploadPictures from "@/components/uploadPictures";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getGodownList,
		createUser,
		getUserInfo
	} from "@/api/erp";
	import {
		keyApi,
		storeGetInfoApi,
		cityApi,
		storeUpdateApi,
		cascaderList,
		staffListInfo
	} from '@/api/store';
	import {
		productSpecs,
		productSpecsInfo
	} from "@/api/product";
	import Setting from "@/setting";
	import {
	  roleListApi,
	} from '@/api/setting'
	export default {
		name: "userAdd",
		components: {
			uploadPictures,
			customerInfo,
			kefuList,
			adminList
		},
		data() {
			return {
				tableList: [],
				avshow: true,
				ushow: true,
				customerShow: false,
				kshow: true,
				kefuShow: false,
				ashow: true,
				adminShow: false,
				modalPic: false,
				propss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "name"
				},
				propsss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "role_name"
				},
				addresData: [],
				props: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "title"
				},
				roterPre: Setting.roterPre,
				data1: [],
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				formValidate: {
					type: 0,
					avatar: "",
					uid: 0,
					nickname: "",
					id: 0,
					account: "",
					wid: 0,
					staff_name: "",
					store_id: 0,
					is_manager: 0,
					pwd: "",
					phone: "",
					kefu: "",
					staff_id: 0,
					admin_name: "",
					is_system: 0,
					admin_id: 0,
					roles: 0
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8,
				},
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12,
				},
				staffData: [],
				ruleValidate: {
					nickname: [{
						required: true,
						message: "请选择绑定用户",
						trigger: "blur"
					}],
					kefu: [{
						required: true,
						message: "请选择绑定客服",
						trigger: "blur"
					}],
					admin_name: [{
						required: true,
						message: "请选择绑定后台账号",
						trigger: "blur"
					}],
					avatar: [{
						required: true,
						message: "请上传用户头像",
						trigger: "blur"
					}],
					staff_name: [{
						required: true,
						message: "请输入用户名称",
						trigger: "blur"
					}],
					account: [{
						required: true,
						message: "请输入登录账号",
						trigger: "blur"
					}, ],
					pwd: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur',
					}, ],
					roles: [{
						required: true,
						type: 'number',
						message: '请选择角色身份',
					}, ],
				},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			// let data = {
			// 	pid: 0
			// }
			// this.cityInfo(data);
		},
		mounted() {
			this.getList()
			// this.setCopyrightShow({
			// 	value: false
			// });
			this.getGodownList()
			this.staffList()
			console.log('this.$route.query.id != 0', this.$route.query.id != 0);
			if (this.$route.query.id != 0) {
				this.getUserInfo(this.$route.query.id)
			}
		},
		destroyed() {
			// this.setCopyrightShow({
			// 	value: true
			// });
		},
		methods: {
			...mapMutations("admin/layout", ["setCopyrightShow"]),
			getUserInfo(id) {
				console.log('hhh');
				getUserInfo(id).then(res => {
					console.log('zje', res);
					let data = res.data
					this.formValidate = {
						uid: data.user.uid,
						nickname: data.user ? data.user.nickname :'',
						id: id,
						account: data.account || '',
						wid: data.wid || 0,
						staff_name: data.staff_name || '',
						store_id: data.store_id,
						is_manager: data.is_manager,
						phone: data.phone,
						kefu: data.staff ? data.staff.nickname:'',
						staff_id: data.staff ?data.staff.id:0,
						admin_name: data.admin? data.admin.real_name: '',
						is_system: data.is_system + '',
						admin_id:  data.admin?data.admin.id: 0,
						avatar: data.avatar,
						type: data.wid?1:(data.store_id?2:0),
						roles: data.roles*1 || 0
					}

				})
			},
			imageObject(e) {
				this.customerShow = false;
				this.formValidate.uid = e.uid;
				this.formValidate.nickname = e.name
			},
			imageObjectKefu(e) {
				this.kefuShow = false;
				this.formValidate.staff_id = e.id;
				this.formValidate.kefu = e.name
			},
			imageObjectAdmin(e) {
				this.adminShow = false;
				console.log(e);
				this.formValidate.admin_id = e.id;
				this.formValidate.level = e.level;
				this.formValidate.admin_name = e.name
			},
			showUser() {
				this.ushow = true
			},
			showKefu() {
				this.kshow = true
			},
			showAdmin() {
				this.ashow = true
			},
			clearSpread() {
				this.formValidate.uid = 0;
				this.formValidate.nickname = '';
				this.ushow = true
			},
			clearSpreadKefu() {
				this.formValidate.staff_id = 0;
				this.formValidate.kefu = '';
				this.kshow = true
			},
			clearSpreadAdmin() {
				this.formValidate.admin_id = 0;
				this.formValidate.admin_name = '';
				this.formValidate.level = 0
				this.ashow = true
			},
			editSpread() {
				this.customerShow = true;
				this.ushow = false
			},
			editSpreadKefu() {
				this.kefuShow = true;
				this.kshow = false
			},
			editSpreadAdmin() {
				this.adminShow = true;
				this.ashow = false
			},
			getPic(pic) {
				this.modalPic = false;
				this.formValidate.avatar = pic.att_dir;
				this.avshow = true
				this.$refs.formValidate.validateField('image');
			},
			delImage() {
				this.formValidate.avatar = "";
				this.$refs.formValidate.validateField('image');
				this.avshow = true
			},
			modalPicTap() {
				this.modalPic = true;
				this.avshow = false
			},
			staffList() {
				staffListInfo()
					.then((res) => {
						this.staffData = res.data
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			addchack(e, selectedData) {
				console.log(selectedData, 'selectedData');
				e.forEach((i, index) => {
					if (index == 0) {
						this.formValidate.province = i
					} else if (index == 1) {
						this.formValidate.city = i
					} else if (index == 2) {
						this.formValidate.area = i
					} else {
						this.formValidate.street = i
					}
				})
				this.formValidate.address = (selectedData.map(o => o.label)).join('/')
				// console.log('this.formValidate.addressSelect',this.formValidate.addressSelect);

			},
			cityInfo(data) {
				cityApi(data).then(res => {
					this.addresData = res.data
				})
			},
			loadData(item, callback) {
				item.loading = true;
				cityApi({
					pid: item.value
				}).then(res => {
					item.children = res.data;
					item.loading = false;
					callback();
				});


			},
			getGodownList() {
				getGodownList().then(res => {
					console.log(res);
					this.data1 = res.data.data
				})
			},
			del(index) {
				this.data.splice(index, 1);
			},
			userSearchs(e) {

			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.formValidate.id = this.$route.query.id;
						if(this.formValidate.type == 1) {
							this.formValidate.store_id = ''
						}else {
								this.formValidate.wid = ''
						}
						createUser(this.formValidate.id, this.formValidate).then(res => {
							this.$Message.success(res.msg);
							this.$router.push({
								path: this.roterPre + "/erp/user"
							});
						}).catch(err => {
							this.$Message.error(err.msg);
						})
						console.log('this.formValidate:', this.formValidate);
					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
			getList() {
			  this.loading = true
			  roleListApi({
				  page: 1,
				  limit:100,
				  type: 3
			  })
			    .then(async (res) => {
			      let data = res.data
			      this.tableList = data.list
			      // this.total = res.data.count
			      // this.loading = false
			    })
			    .catch((res) => {
			      this.loading = false
			      this.$Message.error(res.msg)
			    })
			},
		},
	};
</script>

<style scoped lang="stylus">
	.table {
		/deep/.ivu-table-header table {
			border: 0 !important;
		}

		/deep/.ivu-table-header thead tr th:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table td:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table-cell {
			padding: 0 !important;
		}

		/deep/.ivu-table-border th,
		/deep/.ivu-table-border td {
			border-right: unset;
		}

		/deep/.ivu-table td {
			height: 59px;
		}
	}

	.form-submit {
		/deep/.ivu-card {
			border-radius: 0;
		}

		margin-bottom: 79px;

		.fixed-card {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 200px;
			z-index: 99;
			box-shadow: 0 -1px 2px rgb(240, 240, 240);

			/deep/ .ivu-card-body {
				padding: 15px 16px 14px;
			}

			.ivu-form-item {
				margin-bottom: 0;
			}

			/deep/ .ivu-form-item-content {
				margin-right: 124px;
				text-align: center;
			}

			.ivu-btn {
				height: 36px;
				padding: 0 20px;
			}
		}
	}

	.after-line {
		display: inline-block;
		position: relative;
		margin-right: 16px;
	}

	.ml16 {
		margin-left: 16px;
	}

	.upload-list {
		display: inline-block;
		margin: 0 0 -10px 0;

		.upload-item {
			position: relative;
			display: inline-block;
			width: 64px;
			height: 64px;
			border: 1px dashed #DDDDDD;
			border-radius: 4px;
			margin: 0 15px 10px 0;
		}

		img {
			width: 64px;
			height: 64px;
			border-radius: 4px;
			vertical-align: middle;
		}

		.ivu-btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 20px;
			height: 20px;
			margin: -10px -10px 0 0;
		}
	}

	.upload-select {
		width: 64px;
		height: 64px;
		font-size: 35px !important;
		background #f5f5f5;
		color #ccc;
	}
</style>