~chenshaoxiong/sms_center_backstage.git

liweilong

2020-12-25 faeb372259f5d47cd3ba304bf383361d18da2714

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