~chenshaoxiong/sms_center_backstage.git

long

2021-12-08 bf97988edfb77f5436d4ef20575e9f34477f36a7

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