blog/blog-admin.git

inleft

2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151

commit \| author \| age
9bcb19	1	<template>
I	2	<a-modal
	3	title="用户增加"
	4	:width="900"
	5	:visible="visible"
	6	:confirmLoading="confirmLoading"
	7	@ok="handleSubmit"
	8	@cancel="handleCancel"
	9	>
	10	<a-spin :spinning="confirmLoading">
	11	<a-divider orientation="left">基本信息</a-divider>
	12	<a-row :gutter="24">
	13	<a-col :md="12" :sm="24">
	14	<a-form :form="form">
	15	<a-form-item
	16	label="账号"
	17	:labelCol="labelCol"
	18	:wrapperCol="wrapperCol"
	19	has-feedback
	20	>
	21	<a-input placeholder="请输入账号" v-decorator="['account', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号！'}]}]" />
	22	</a-form-item>
	23	</a-form>
	24	</a-col>
	25	<a-col :md="12" :sm="24" >
	26	<a-form :form="form">
	27	<a-form-item
	28	label="姓名"
	29	:labelCol="labelCol"
	30	:wrapperCol="wrapperCol"
	31	has-feedback
	32	>
	33	<a-input placeholder="请输入姓名" v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
	34	</a-form-item>
	35	</a-form>
	36	</a-col>
	37	</a-row>
	38	<a-row :gutter="24">
	39	<a-col :md="12" :sm="24">
	40	<a-form :form="form">
	41	<a-form-item
	42	label="密码"
	43	:labelCol="labelCol"
	44	:wrapperCol="wrapperCol"
	45	has-feedback
	46	>
	47	<a-input
	48	placeholder="请输入密码"
	49	type="password"
	50	v-decorator="['password', {rules: [{required: true, message: '请输入密码！'},{
	51	validator: validateToNextPassword,
	52	},]}]" />
	53	</a-form-item>
	54	</a-form>
	55	</a-col>
	56	<a-col :md="12" :sm="24">
	57	<a-form :form="form">
	58	<a-form-item
	59	label="重复密码"
	60	:labelCol="labelCol"
	61	:wrapperCol="wrapperCol"
	62	has-feedback
	63	>
	64	<a-input
	65	placeholder="请再次输入密码"
	66	type="password"
	67	v-decorator="['confirm', {rules: [{required: true, message: '请再次输入密码！'},
	68	{
	69	validator: compareToFirstPassword,
	70	}]}]" />
	71	</a-form-item>
	72	</a-form>
	73	</a-col>
	74	</a-row>
	75	<a-row :gutter="24">
	76	<a-col :md="12" :sm="24">
	77	<a-form :form="form">
	78	<a-form-item
	79	label="昵称"
	80	:labelCol="labelCol"
	81	:wrapperCol="wrapperCol"
	82	has-feedback
	83	>
	84	<a-input placeholder="请输入昵称" v-decorator="['nickName']" />
	85	</a-form-item>
	86	</a-form>
	87	</a-col>
	88	<a-col :md="12" :sm="24">
	89	<a-form :form="form">
	90	<a-form-item
	91	label="生日"
	92	:labelCol="labelCol"
	93	:wrapperCol="wrapperCol"
	94	has-feedback
	95	>
	96	<a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday']" />
	97	</a-form-item>
	98	</a-form>
	99	</a-col>
	100	</a-row>
	101	<a-row :gutter="24">
	102	<a-col :md="12" :sm="24">
	103	<a-form :form="form">
	104	<a-form-item
	105	label="性别"
	106	:labelCol="labelCol"
	107	:wrapperCol="wrapperCol"
	108	>
	109	<a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
	110	<a-radio :value="1">男</a-radio>
	111	<a-radio :value="2">女</a-radio>
	112	</a-radio-group>
	113	</a-form-item>
	114	</a-form>
	115	</a-col>
	116	<a-col :md="12" :sm="24">
	117	<a-form :form="form">
	118	<a-form-item
	119	label="邮箱"
	120	:labelCol="labelCol"
	121	:wrapperCol="wrapperCol"
	122	has-feedback
	123	>
	124	<a-input placeholder="请输入邮箱" v-decorator="['email']" />
	125	</a-form-item>
	126	</a-form>
	127	</a-col>
	128	</a-row>
	129	<a-row :gutter="24">
	130	<a-col :md="12" :sm="24">
	131	<a-form :form="form">
	132	<a-form-item
	133	label="手机号"
	134	:labelCol="labelCol"
	135	:wrapperCol="wrapperCol"
	136	has-feedback
	137	>
	138	<a-input placeholder="请输入手机号" v-decorator="['phone',{rules: [{ required: true, message: '请输入手机号！' }]}]" />
	139	</a-form-item>
	140	</a-form>
	141	</a-col>
	142	<a-col :md="12" :sm="24">
	143	<a-form :form="form">
	144	<a-form-item
	145	label="电话"
	146	:labelCol="labelCol"
	147	:wrapperCol="wrapperCol"
	148	has-feedback
	149	>
	150	<a-input placeholder="请输入电话" v-decorator="['tel']" />
	151	</a-form-item>
	152	</a-form>
	153	</a-col>
	154	</a-row>
	155	<a-divider orientation="left">员工信息</a-divider>
	156	<a-row :gutter="24">
	157	<a-col :md="12" :sm="24">
	158	<a-form :form="form">
	159	<a-form-item
	160	label="机构"
	161	:labelCol="labelCol"
	162	:wrapperCol="wrapperCol"
	163	has-feedback
	164	>
	165	<a-tree-select
	166	v-decorator="['sysEmpParam.orgId', {rules: [{ required: true, message: '请选择机构！' }]}]"
	167	style="width: 100%"
	168	:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
	169	:treeData="orgTree"
	170	placeholder="请选择机构"
	171	treeDefaultExpandAll
	172	@change="e => initrOrgName(e)"
	173	>
	174	<span slot="title" slot-scope="{ id }">{{ id }}</span>
	175	</a-tree-select>
	176	</a-form-item>
	177	<a-form-item v-show="false">
	178	<a-input v-decorator="['sysEmpParam.orgName']" />
	179	</a-form-item>
	180	</a-form>
	181	</a-col>
	182	<a-col :md="12" :sm="24">
	183	<a-form :form="form">
	184	<a-form-item
	185	label="工号"
	186	:labelCol="labelCol"
	187	:wrapperCol="wrapperCol"
	188	has-feedback
	189	>
	190	<a-input placeholder="请输入工号" v-decorator="['sysEmpParam.jobNum']" />
	191	</a-form-item>
	192	</a-form>
	193	</a-col>
	194	</a-row>
	195	<a-row :gutter="24">
	196	<a-col :md="24" :sm="24">
	197	<a-form :form="form">
	198	<a-form-item
	199	label="职位信息"
	200	:labelCol="labelCol_JG"
	201	:wrapperCol="wrapperCol_JG"
	202	has-feedback
	203	>
	204	<a-select
	205	mode="multiple"
	206	style="width: 100%"
	207	placeholder="请选择职位信息"
	208	v-decorator="['sysEmpParam.posIdList', {rules: [{ required: true, message: '请选择职位信息！' }]}]"
	209	>
	210	<a-select-option v-for="(item,index) in posList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
	211	</a-select>
	212	</a-form-item>
	213	</a-form>
	214	</a-col>
	215	</a-row>
	216	<a-row :gutter="24">
	217	<a-col :md="24" :sm="24">
	218	<a-form-item
	219	label="附属信息:"
	220	:labelCol="labelCol_JG"
	221	:wrapperCol="wrapperCol_JG"
	222	>
	223	<a-table
	224	size="middle"
	225	:columns="columns"
	226	:dataSource="data"
	227	:pagination="false"
	228	:loading="memberLoading"
	229	>
	230	<template v-for="(col,index) in ['extOrgId','extPosId']" :slot="col" slot-scope="text, record">
	231	<template v-if="index == 0" >
	232	<a-tree-select
	233	:key="col"
	234	v-if="record.editable"
	235	:treeData="orgTree"
	236	style="width: 100%"
	237	placeholder="请选择附属机构"
	238	treeDefaultExpandAll
	239	@change="e => handleChange(e,record.key,col)"
	240	>
	241	<span slot="title" slot-scope="{ id }">{{ id }}
	242	</span>
	243	</a-tree-select>
	244	<template v-else>{{ record.extOrgName }}</template>
	245	</template>
	246	<template v-if="index == 1">
	247	<a-select
	248	:key="col"
	249	v-if="record.editable"
	250	style="width: 100%"
	251	placeholder="请选择附属职位"
	252	@change="e => handleChange(e,record.key,col)"
	253	has-feedback
	254	>
	255	<a-select-option v-for="(item,indexs) in posList" :key="indexs" :value="item.id">{{ item.name }}</a-select-option>
	256	</a-select>
	257	<template v-else>{{ record.extPosName }}</template>
	258	</template>
	259	</template>
	260	<template slot="operation" slot-scope="text, record">
	261	<a @click="remove(record.key)">删除</a>
	262	</template>
	263	</a-table>
	264	<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">增行</a-button>
	265	</a-form-item>
	266	</a-col>
	267	</a-row>
	268	</a-spin>
	269	</a-modal>
	270	</template>
	271
	272	<script>
	273	import { sysUserAdd } from '@/api/modular/system/userManage'
	274	import { getOrgTree, getOrgList } from '@/api/modular/system/orgManage'
	275	import { sysPosList } from '@/api/modular/system/posManage'
	276	import moment from 'moment'
	277	export default {
	278	data () {
	279	return {
	280	labelCol: {
	281	xs: { span: 24 },
	282	sm: { span: 6 }
	283	},
	284	wrapperCol: {
	285	xs: { span: 24 },
	286	sm: { span: 16 }
	287	},
	288	// 机构行样式
	289	labelCol_JG: {
	290	xs: { span: 24 },
	291	sm: { span: 3 }
	292	},
	293	wrapperCol_JG: {
	294	xs: { span: 24 },
	295	sm: { span: 20 }
	296	},
	297	count: 1,
	298	columns: [
	299	{
	300	title: '附属机构',
	301	dataIndex: 'extOrgId',
	302	width: '45%',
	303	scopedSlots: { customRender: 'extOrgId' }
	304	},
	305	{
	306	title: '附属岗位',
	307	dataIndex: 'extPosId',
	308	width: '45%',
	309	scopedSlots: { customRender: 'extPosId' }
	310	},
	311	{
	312	title: '操作',
	313	key: 'action',
	314	scopedSlots: { customRender: 'operation' }
	315	}
	316	],
	317	visible: false,
	318	confirmLoading: false,
	319	orgTree: [],
	320	orgList: [],
	321	posList: [],
	322	sysEmpParamExtList: [],
	323	memberLoading: false,
	324	form: this.$form.createForm(this),
	325	data: [],
	326	birthdayString: []
	327	}
	328	},
	329	methods: {
	330	// 初始化方法
	331	add () {
	332	this.visible = true
	333	this.getOrgDate()
	334	this.getPosList()
	335	},
	336	/**
	337	* 增行
	338	*/
	339	newMember () {
	340	const length = this.data.length
	341	this.data.push({
	342	key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
	343	extOrgId: '',
	344	extPosId: '',
	345	editable: true,
	346	isNew: true
	347	})
	348	},
	349	/**
	350	* 删除
	351	*/
	352	remove (key) {
	353	const newData = this.data.filter(item => item.key !== key)
	354	this.data = newData
	355	},
	356	/**
	357	* 选择子表单单项触发
	358	*/
	359	handleChange (value, key, column) {
	360	const newData = [...this.data]
	361	const target = newData.find(item => key === item.key)
	362	if (target) {
	363	target[column] = value
	364	this.data = newData
	365	}
	366	},
	367	/**
	368	* 获取机构树，并加载于表单中
	369	*/
	370	getOrgDate () {
	371	getOrgTree().then((res) => {
	372	this.orgTree = res.data
	373	})
	374	getOrgList().then((res) => {
	375	this.orgList = res.data
	376	})
	377	},
	378	/**
	379	* 获取职位list列表
	380	*/
	381	getPosList () {
	382	sysPosList().then((res) => {
	383	this.posList = res.data
	384	})
	385	},
	386	compareToFirstPassword (rule, value, callback) {
	387	const form = this.form
	388	if (value && value !== form.getFieldValue('password')) {
	389	// eslint-disable-next-line standard/no-callback-literal
	390	callback('请确认两次输入密码的一致性！')
	391	} else {
	392	callback()
	393	}
	394	},
	395	validateToNextPassword (rule, value, callback) {
	396	const form = this.form
	397	if (value && this.confirmDirty) {
	398	form.validateFields(['confirm'], { force: true })
	399	}
	400	callback()
	401	},
	402	/**
	403	* 选择树机构，初始化机构名称于表单中
	404	*/
	405	initrOrgName (value) {
	406	this.form.getFieldDecorator('sysEmpParam.orgName', { initialValue: this.orgList.find(item => value === item.id).name })
	407	},
	408	/**
	409	* 子表单json重构
	410	*/
	411	JsonReconsitution () {
	412	this.sysEmpParamExtList = []
	413	const newData = [...this.data]
	414	newData.forEach(item => {
	415	// eslint-disable-next-line eqeqeq
	416	if (item.extOrgId != '' & item.extPosId != '') {
	417	this.sysEmpParamExtList.push({ orgId: item.extOrgId, posId: item.extPosId })
	418	}
	419	})
	420	},
	421	/**
	422	* 日期需单独转换
	423	*/
	424	onChange (date, dateString) {
	425	if (date == null) {
	426	this.birthdayString = []
	427	} else {
	428	this.birthdayString = moment(date).format('YYYY-MM-DD')
	429	}
	430	},
	431	handleSubmit () {
	432	const { form: { validateFields } } = this
	433	this.confirmLoading = true
	434	validateFields((errors, values) => {
	435	if (!errors) {
	436	this.JsonReconsitution()
	437	values.sysEmpParam['extIds'] = this.sysEmpParamExtList
	438	if (this.birthdayString.length > 0) {
	439	values.birthday = this.birthdayString
	440	}
	441	sysUserAdd(values).then((res) => {
	442	if (res.success) {
	443	this.$message.success('新增成功')
	444	this.confirmLoading = false
	445	this.$emit('ok', values)
	446	this.handleCancel()
	447	} else {
	448	this.$message.error('新增失败：' + res.message)
	449	}
	450	}).finally((res) => {
	451	this.confirmLoading = false
	452	})
	453	} else {
	454	this.confirmLoading = false
	455	}
	456	})
	457	},
	458	handleCancel () {
	459	this.form.resetFields()
	460	this.visible = false
	461	// 清理子表单中数据
	462	this.data = []
	463	// 清理时间
	464	this.birthdayString = []
	465	}
	466	}
	467	}
	468	</script>