~chenshaoxiong/sms_center_backstage.git

long

2021-05-11 277f3d8070b6b08ad5b79a2416ea7157895dc76c

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