~chenshaoxiong/sms_center_backstage.git

liweilong

2020-12-24 3fccf2450a3ed31ceca512551858f886b30c499d

提交 \| 用户 \| 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
	125	<el-form-item label="是否启用" prop="sysRoleId">
	126	<el-switch
	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' }
2a61f6	197	]
L	198	}
	199	}
	200	},
	201	mounted() {
	202	this.init()
	203	},
	204	methods: {
	205	// 初始化
	206	init() {
	207	this.getList()
	208	this.getRoleList()
	209	},
	210
	211	// 获取角色列表
	212	getRoleList() {
	213	this.postFN({
7661a8	214	url: 'admin/role/list',
L	215	params: {
	216	pageNum: 1,
	217	pageSize: 9999
	218	},
2a61f6	219	mockData: {
L	220	code: 100,
	221	msg: '',
	222	data: [{
	223	id: 'xxx',
	224	name: '野马发'
	225	}]
	226	}
	227	}, (inf) => {
7661a8	228	this.roleArr = inf.list \|\| []
2a61f6	229	})
L	230	},
	231
	232	// 获取列表
	233	getList() {
	234	var { pageNum, pageSize, keyWord } = this
	235	this.postFN({
	236	url: 'admin/list',
	237	params: {
	238	pageNum: pageNum,
efd7c8	239	pageSize: pageSize,
2a61f6	240	keyWord: keyWord
L	241	},
	242	mockData: {
	243	code: 100,
	244	msg: '',
	245	data: {
	246	list: [{
	247	id: 'xxx',
	248	account: 'xasdasd2123123',
	249	name: '野马发',
	250	roleName: '超级管理员',
	251	tel: '13760749294',
	252	loginTime: '2020-08-08 12:10:10',
	253	isUse: 1
	254	}],
	255	total: 100
	256	}
	257	}
	258	}, (inf) => {
	259	this.list = inf.list \|\| []
	260	this.total = inf.total
	261	})
	262	},
	263	// 重新获取列表
	264	reGetList() {
	265	this.pageNum = 1
	266	this.getList()
	267	},
	268	// 重置
	269	resetHandle() {
	270	this.keyWord = ''
	271	this.reGetList()
	272	},
	273	// 修改状态
	274	handleStatusChange(item) {
	275	const text = item.isUse === 1 ? '启用' : '停用'
	276	this.$confirm('确认要' + text + '"' + item.roleName + '"角色吗?', '提示', {
	277	confirmButtonText: '确定',
	278	cancelButtonText: '取消',
	279	type: 'warning'
	280	}).then(() => {
	281	this.postFN({
	282	url: 'admin/editUse',
	283	params: {
	284	id: item.id
	285	},
	286	mockData: {
	287	code: 100,
	288	msg: '',
	289	data: {}
	290	}
	291	}, () => {
	292	this.$messageSuc(text + '成功')
	293	})
	294	}).catch(() => {
	295	item.isUse = item.isUse === 1 ? 0 : 1
	296	})
	297	},
	298	// 删除
	299	handleDelete(item) {
	300	// 打开二次确认弹窗
	301	this.$confirm('是否确认删除该帐号?', '提示', {
	302	confirmButtonText: '确定',
	303	cancelButtonText: '取消',
	304	type: 'warning'
	305	}).then(() => {
	306	// 确定回调
	307	this.postFN({
	308	url: 'admin/delete/one',
	309	params: {
	310	id: item.id
	311	},
	312	mockData: {
	313	code: 100,
	314	msg: '',
	315	data: {}
	316	}
	317	}, () => {
	318	this.getList()
	319	this.$messageSuc('删除成功')
	320	})
	321	}).catch(() => {})
	322	},
	323
	324	// 打开新增分类弹窗
	325	showAddAdminDialog() {
	326	var adminDialogData = {
	327	type: 'add',
	328	name: '',
	329	account: '',
	330	password: '',
	331	passwordSure: '',
9f32bd	332	sysRoleId: '',
7661a8	333	isUse: 1,
L	334	accountType: 1
2a61f6	335	}
7661a8	336	this.adminDialogVisible = true
L	337	this.$nextTick(() => {
	338	this.adminDialogData = adminDialogData
	339	this.$refs['adminDialog'].resetFields()
	340	})
2a61f6	341	},
L	342	// 打开编辑分类弹框
	343	showEditAdminDialog(item) {
	344	var adminDialogData = {
	345	type: 'edit',
	346	name: item.name,
	347	account: item.account,
	348	password: '',
	349	passwordSure: '',
	350	sysRoleId: item.roId,
9f32bd	351	id: item.id,
L	352	isUse: item.isUse
2a61f6	353	}
7661a8	354	if (!item.type + '') adminDialogData.accountType = item.type
L	355	this.adminDialogVisible = true
	356	this.$nextTick(() => {
	357	this.adminDialogData = adminDialogData
	358	this.$refs['adminDialog'].resetFields()
	359	})
2a61f6	360	},
L	361	// 关闭编辑弹窗
	362	hideAdminDialog() {
	363	this.adminDialogData = {}
7661a8	364	this.adminDialogVisible = false
2a61f6	365	},
L	366	// 提交新增&编辑
	367	submitAdmin(type) {
	368	this.$refs['adminDialog'].validate(valid => {
	369	if (valid) {
	370	var { adminDialogData } = this
	371	var params = {
	372	name: adminDialogData.name,
	373	account: adminDialogData.account,
9f32bd	374	sysAdRoleId: adminDialogData.sysRoleId,
7661a8	375	isUse: adminDialogData.isUse,
L	376	type: adminDialogData.accountType
2a61f6	377	}
7661a8	378	if (adminDialogData.password) params.password = adminDialogData.password
2a61f6	379	var isAdd = adminDialogData.type === 'add'
L	380	var url = isAdd ? 'admin/add' : 'admin/update'
	381
	382	!isAdd && (params.id = adminDialogData.id)
	383
	384	this.postFN({
	385	url: url,
	386	params: params,
	387	mockData: {
	388	code: 100,
	389	msg: '',
	390	data: {}
	391	}
	392	}, () => {
	393	this.$messageSuc('保存成功')
	394	this.hideAdminDialog()
	395	this.getList()
	396	})
	397	}
	398	})
	399	}
	400
	401	}
	402	}
	403	</script>
	404
	405	<style lang="scss" scoped>
	406
	407	</style>