~chenshaoxiong/sms_center_backstage.git

登录页密码限制文案修复；新增管理员限制密码长度5-20；管理员列表修复帐号类型显示

children117cl

2021-06-25 d9cc69690e5c3ea805e8ff642a1839e0333c9b8f

提交 \| 用户 \| age
2a61f6	1	<template>
L	2	<div class="app-container">
	3	<!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
	4	<el-form v-show="showSearch" ref="searchForm" :inline="true">
	5	<el-form-item label="管理员搜索">
	6	<el-input
	7	v-model="keyWord"
	8	placeholder="请输入管理员名称/账号"
	9	clearable
	10	size="small"
	11	style="width: 240px"
36b711	12	maxlength="50"
2a61f6	13	@keyup.enter.native="reGetList"
L	14	/>
	15	</el-form-item>
	16	<el-form-item>
	17	<el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
	18	<el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
	19	</el-form-item>
	20	</el-form>
	21	<!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
	22
	23	<!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
	24	<el-row :gutter="10" class="mb8">
	25	<el-col :span="1.5">
	26	<el-button
	27	v-if="getAuthValueFN('sys_admin_add')"
	28	type="primary"
	29	icon="el-icon-plus"
	30	size="mini"
	31	@click="showAddAdminDialog"
	32	>新增</el-button>
	33	</el-col>
	34	<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
	35	</el-row>
	36	<!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
	37
	38	<el-table :data="list">
	39	<el-table-column type="index" label="序号" align="center" width="60" />
9f32bd	40	<el-table-column label="名称" prop="name" align="center" min-width="120" />
2a61f6	41	<el-table-column label="账号" prop="account" align="center" min-width="120" />
7661a8	42	<el-table-column label="账号类型" prop="account" align="center" min-width="120">
L	43	<template slot-scope="scope">
d9cc69	44	{{ accountTypeOptions.find(item=>item.id == scope.row.type) ? accountTypeOptions.find(item=>item.id == scope.row.type).name : '' }}
7661a8	45	</template>
L	46	</el-table-column>
2a61f6	47	<el-table-column label="角色" prop="roleName" align="center" min-width="120" />
L	48	<!-- <el-table-column label="最近登录时间" prop="loginTime" align="center" min-width="180" /> -->
	49	<el-table-column label="状态" align="center" min-width="100">
	50	<template slot-scope="scope">
	51	<el-switch
	52	v-model="scope.row.isUse"
	53	:active-value="1"
	54	:inactive-value="0"
	55	:disabled="!getAuthValueFN('sys_admin_edit')"
	56	@change="handleStatusChange(scope.row)"
	57	/>
	58	</template>
	59	</el-table-column>
	60	<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
	61	<template slot-scope="scope">
	62	<el-button
	63	v-if="getAuthValueFN('sys_admin_edit')"
	64	size="mini"
	65	type="text"
	66	icon="el-icon-edit"
	67	@click="showEditAdminDialog(scope.row)"
	68	>编辑</el-button>
	69	<el-button
	70	v-if="getAuthValueFN('sys_admin_del')"
	71	size="mini"
	72	type="text warn"
	73	icon="el-icon-delete"
	74	@click="handleDelete(scope.row)"
	75	>删除</el-button>
	76	</template>
	77	</el-table-column>
	78	</el-table>
	79
	80	<pagination
	81	v-show="total>0"
	82	:total="total"
	83	:page.sync="pageNum"
	84	:limit.sync="pageSize"
	85	@pagination="getList"
	86	/>
	87
	88	<!-- 新增&编辑 -->
4dde14	89	<el-dialog v-el-drag-dialog :title="adminDialogData.type==='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body :close-on-click-modal="false">
ad3cc5	90	<el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small">
2a61f6	91	<el-form-item label="名称" prop="name">
36b711	92	<el-input v-model="adminDialogData.name" placeholder="请输入名称" maxlength="50" />
2a61f6	93	</el-form-item>
L	94	<el-form-item label="账号" prop="account">
36b711	95	<el-input v-model="adminDialogData.account" placeholder="请输入帐号" maxlength="20" :disabled="adminDialogData.type!='add'" />
2a61f6	96	</el-form-item>
4602af	97	<el-form-item label="密码" :prop="adminDialogData.type==='add'\|\|adminDialogData.password\|\|adminDialogData.passwordSure?'password':'none'">
36b711	98	<el-input v-model="adminDialogData.password" type="password" placeholder="请输入密码" maxlength="20" />
2a61f6	99	</el-form-item>
4602af	100	<el-form-item label="确认密码" :prop="adminDialogData.type==='add'\|\|adminDialogData.password\|\|adminDialogData.passwordSure?'passwordSure':'none'">
36b711	101	<el-input v-model="adminDialogData.passwordSure" type="password" placeholder="请输入确认密码" maxlength="20" />
2a61f6	102	</el-form-item>
7661a8	103	<!-- 账号类型 -->
L	104	<el-form-item label="账号类型" prop="accountType">
	105	<el-select
	106	v-model="adminDialogData.accountType"
	107	clearable
	108	placeholder="账号类型"
	109	style="width: 100%"
	110	>
	111	<el-option v-for="item in accountTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
	112	</el-select>
	113	</el-form-item>
2a61f6	114	<!-- 角色 -->
L	115	<el-form-item label="角色" prop="sysRoleId">
	116	<el-select
	117	v-model="adminDialogData.sysRoleId"
	118	clearable
	119	placeholder="角色"
9f32bd	120	style="width: 100%"
2a61f6	121	>
L	122	<el-option v-for="item in roleArr" :key="item.id" :label="item.name" :value="item.id" />
	123	</el-select>
9f32bd	124	</el-form-item>
L	125
abd7fd	126	<el-form-item label="是否启用" prop="isUse">
9f32bd	127	<el-switch
L	128	v-model="adminDialogData.isUse"
	129	:active-value="1"
	130	:inactive-value="0"
	131	/>
2a61f6	132	</el-form-item>
L	133
	134	</el-form>
	135	<div slot="footer" class="dialog-footer">
	136	<el-button @click="hideAdminDialog">取消</el-button>
	137	<el-button type="primary" @click="submitAdmin(adminDialogData.type)">确定</el-button>
	138	</div>
	139	</el-dialog>
	140	</div>
	141	</template>
	142
	143	<script>
	144	export default {
	145	name: 'Admin',
	146	data() {
	147	const equalToPassword = (rule, value, callback) => {
	148	if (this.adminDialogData.password !== value) {
	149	callback(new Error('两次输入的密码不一致'))
	150	} else {
	151	callback()
	152	}
	153	}
	154	return {
	155	showSearch: true, // 是否显示搜索区
	156	keyWord: '',
	157
	158	list: [],
	159
	160	// 角色列表
	161	roleArr: [],
7661a8	162	// 账号类型
L	163	accountTypeOptions: [
	164	{ name: '普通管理员', id: 1 },
	165	{ name: '超级管理员', id: 0 }
	166	],
2a61f6	167
7661a8	168	adminDialogVisible: false,
2a61f6	169	adminDialogData: {},
L	170
	171	// 分页 ↓↓↓↓↓↓↓↓↓↓
	172	total: 0,
	173	pageNum: 1,
	174	pageSize: 20,
	175	// 分页 ↑↑↑↑↑↑↑↑↑↑
	176
	177	// 表单校验
	178	rules: {
	179	name: [
	180	{ required: true, message: '名称不能为空', trigger: 'change' }
	181	],
	182	account: [
	183	{ required: true, message: '账号不能为空', trigger: 'change' }
	184	],
	185	password: [
d9cc69	186	{ required: true, message: '密码不能为空', trigger: 'change' },
C	187	{ min: 5, max: 20, message: '密码在5~20个字之间'}
2a61f6	188	],
L	189	passwordSure: [
	190	{ required: true, message: '确认密码不能为空', trigger: 'change' },
	191	{ required: true, validator: equalToPassword, trigger: 'change' }
	192	],
	193	sysRoleId: [
	194	{ required: true, message: '角色不能为空', trigger: 'change' }
7661a8	195	],
L	196	accountType: [
	197	{ required: true, message: '账号类型不能为空', trigger: 'change' }
faeb37	198	],
L	199	isUse: [
	200	{ required: true, message: '是否启用不能为空', trigger: 'change' }
2a61f6	201	]
L	202	}
	203	}
	204	},
	205	mounted() {
	206	this.init()
	207	},
	208	methods: {
	209	// 初始化
	210	init() {
	211	this.getList()
	212	this.getRoleList()
	213	},
	214
	215	// 获取角色列表
	216	getRoleList() {
	217	this.postFN({
7661a8	218	url: 'admin/role/list',
L	219	params: {
	220	pageNum: 1,
	221	pageSize: 9999
	222	},
2a61f6	223	mockData: {
L	224	code: 100,
	225	msg: '',
3f3c98	226	data: {
L	227	list: [{
	228	id: 'xxx',
	229	name: '野马发'
	230	}]
	231	}
2a61f6	232	}
L	233	}, (inf) => {
7661a8	234	this.roleArr = inf.list \|\| []
2a61f6	235	})
L	236	},
	237
	238	// 获取列表
	239	getList() {
	240	var { pageNum, pageSize, keyWord } = this
	241	this.postFN({
	242	url: 'admin/list',
	243	params: {
	244	pageNum: pageNum,
efd7c8	245	pageSize: pageSize,
2a61f6	246	keyWord: keyWord
L	247	},
	248	mockData: {
	249	code: 100,
	250	msg: '',
	251	data: {
	252	list: [{
	253	id: 'xxx',
	254	account: 'xasdasd2123123',
	255	name: '野马发',
	256	roleName: '超级管理员',
	257	tel: '13760749294',
	258	loginTime: '2020-08-08 12:10:10',
	259	isUse: 1
	260	}],
	261	total: 100
	262	}
	263	}
	264	}, (inf) => {
	265	this.list = inf.list \|\| []
	266	this.total = inf.total
	267	})
	268	},
	269	// 重新获取列表
	270	reGetList() {
	271	this.pageNum = 1
	272	this.getList()
	273	},
	274	// 重置
	275	resetHandle() {
	276	this.keyWord = ''
	277	this.reGetList()
	278	},
	279	// 修改状态
	280	handleStatusChange(item) {
	281	const text = item.isUse === 1 ? '启用' : '停用'
	282	this.$confirm('确认要' + text + '"' + item.roleName + '"角色吗?', '提示', {
	283	confirmButtonText: '确定',
	284	cancelButtonText: '取消',
	285	type: 'warning'
	286	}).then(() => {
	287	this.postFN({
	288	url: 'admin/editUse',
	289	params: {
	290	id: item.id
	291	},
	292	mockData: {
	293	code: 100,
	294	msg: '',
	295	data: {}
	296	}
	297	}, () => {
	298	this.$messageSuc(text + '成功')
	299	})
	300	}).catch(() => {
	301	item.isUse = item.isUse === 1 ? 0 : 1
	302	})
	303	},
	304	// 删除
	305	handleDelete(item) {
	306	// 打开二次确认弹窗
	307	this.$confirm('是否确认删除该帐号?', '提示', {
	308	confirmButtonText: '确定',
	309	cancelButtonText: '取消',
	310	type: 'warning'
	311	}).then(() => {
	312	// 确定回调
	313	this.postFN({
	314	url: 'admin/delete/one',
	315	params: {
	316	id: item.id
	317	},
	318	mockData: {
	319	code: 100,
	320	msg: '',
	321	data: {}
	322	}
	323	}, () => {
	324	this.getList()
	325	this.$messageSuc('删除成功')
	326	})
	327	}).catch(() => {})
	328	},
	329
	330	// 打开新增分类弹窗
	331	showAddAdminDialog() {
	332	var adminDialogData = {
	333	type: 'add',
	334	name: '',
	335	account: '',
	336	password: '',
	337	passwordSure: '',
9f32bd	338	sysRoleId: '',
7661a8	339	isUse: 1,
L	340	accountType: 1
2a61f6	341	}
7661a8	342	this.adminDialogVisible = true
L	343	this.$nextTick(() => {
	344	this.adminDialogData = adminDialogData
	345	this.$refs['adminDialog'].resetFields()
	346	})
2a61f6	347	},
L	348	// 打开编辑分类弹框
	349	showEditAdminDialog(item) {
	350	var adminDialogData = {
	351	type: 'edit',
	352	name: item.name,
	353	account: item.account,
	354	password: '',
	355	passwordSure: '',
	356	sysRoleId: item.roId,
9f32bd	357	id: item.id,
57fedb	358	isUse: item.isUse,
L	359	accountType: item.type
2a61f6	360	}
7661a8	361	this.adminDialogVisible = true
L	362	this.$nextTick(() => {
	363	this.adminDialogData = adminDialogData
	364	this.$refs['adminDialog'].resetFields()
	365	})
2a61f6	366	},
L	367	// 关闭编辑弹窗
	368	hideAdminDialog() {
	369	this.adminDialogData = {}
7661a8	370	this.adminDialogVisible = false
2a61f6	371	},
L	372	// 提交新增&编辑
	373	submitAdmin(type) {
	374	this.$refs['adminDialog'].validate(valid => {
	375	if (valid) {
	376	var { adminDialogData } = this
	377	var params = {
	378	name: adminDialogData.name,
	379	account: adminDialogData.account,
9f32bd	380	sysAdRoleId: adminDialogData.sysRoleId,
7661a8	381	isUse: adminDialogData.isUse,
L	382	type: adminDialogData.accountType
2a61f6	383	}
7661a8	384	if (adminDialogData.password) params.password = adminDialogData.password
2a61f6	385	var isAdd = adminDialogData.type === 'add'
L	386	var url = isAdd ? 'admin/add' : 'admin/update'
	387
	388	!isAdd && (params.id = adminDialogData.id)
	389
	390	this.postFN({
	391	url: url,
	392	params: params,
	393	mockData: {
	394	code: 100,
	395	msg: '',
	396	data: {}
	397	}
	398	}, () => {
	399	this.$messageSuc('保存成功')
	400	this.hideAdminDialog()
b82c1e	401	isAdd ? this.reGetList() : this.getList()
2a61f6	402	})
L	403	}
	404	})
	405	}
	406
	407	}
	408	}
	409	</script>
	410
	411	<style lang="scss" scoped>
	412
	413	</style>