~chenshaoxiong/sms_center_backstage.git

long

2021-06-17 1dcdda357b79fde24705e274818224c05d0a5587

提交 \| 用户 \| age
36b711	1	<template>
L	2	<div class="app-container">
7f89d0	3	<!-- 返回按钮和标题 -->
C	4	<!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->
	5
36b711	6	<!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
L	7	<el-form v-show="showSearch" ref="searchForm" :inline="true">
	8	<el-form-item label="角色名称">
	9	<el-input
	10	v-model="keyWord"
	11	placeholder="请输入角色名称"
	12	clearable
	13	size="small"
	14	style="width: 240px"
	15	maxlength="50"
	16	@keyup.enter.native="reGetList"
	17	/>
	18	</el-form-item>
	19	<el-form-item>
	20	<el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
	21	<el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
	22	</el-form-item>
	23	</el-form>
	24	<!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
	25
	26	<!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
	27	<el-row :gutter="10" class="mb8">
7f89d0	28	<!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
36b711	29	<el-col :span="1.5">
L	30	<el-button
	31	type="primary"
	32	icon="el-icon-plus"
	33	size="mini"
	34	@click="showAddDialog"
	35	>新增</el-button>
	36	</el-col>
	37	<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
	38	</el-row>
	39	<!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
	40
	41	<el-table :data="list" max-height="500px" stripe>
	42	<el-table-column type="index" label="序号" align="center" width="60" />
1dcdda	43	<el-table-column label="头像" prop="headImg" align="center" min-width="100">
L	44	<template slot-scope="scope">
	45	<el-image :src="scope.row.headImg" style="width:50px;height:50px;" fit="contain" :preview-src-list="[scope.row.headImg]">
	46	<div slot="error" class="image-slot">
	47	<svg-icon icon-class="avatar" style="width:50px;height:50px;" />
	48	</div>
	49	</el-image>
	50	</template>
	51	</el-table-column>
36b711	52	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
L	53	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
1dcdda	54	<el-table-column label="专家建议" prop="adviceInfo" align="center" min-width="160">
L	55	<template slot-scope="scope">
	56	<el-popover
	57	placement="top-start"
	58	width="400"
	59	popper-class="el-popover_tableFilter"
	60	trigger="hover"
	61	:popper-options="{ removeOnDestroy: true }"
	62	>
	63	<div style="max-height: 500px;overflow-y: auto;">{{ scope.row.adviceInfo }}</div>
	64	<div slot="reference" class="line-clamp-2" style="line-height: 1.2">{{ scope.row.adviceInfo }}</div>
	65	</el-popover>
	66	</template>
	67	</el-table-column>
36b711	68	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
L	69	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	70	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	71	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	72	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	73	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	74	<el-table-column label="角色名称" prop="name" align="center" min-width="120" />
	75	<el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
	76	<template slot-scope="scope">
7f89d0	77	<!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
36b711	78	<el-switch
L	79	v-model="scope.row.isUp"
	80	:active-value="1"
	81	:inactive-value="0"
	82	@change="handleUpChange(scope.row)"
	83	/>
	84	</template>
	85	</el-table-column>
	86	<el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
	87	<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
	88	<template slot-scope="scope">
7f89d0	89	<!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
36b711	90	<el-button
L	91	size="mini"
	92	type="text"
	93	icon="el-icon-edit"
	94	@click="showEditDialog(scope.row)"
	95	>编辑</el-button>
7f89d0	96	<!-- 权限判断 v-if="getAuthValueFN('xxx_del')" -->
36b711	97	<el-button
L	98	size="mini"
	99	type="text warn"
	100	icon="el-icon-delete"
	101	@click="handleDelete(scope.row)"
	102	>删除</el-button>
	103	</template>
	104	</el-table-column>
	105	</el-table>
	106
	107	<!-- 新增&编辑 -->
7f89d0	108	<el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
36b711	109	<el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
L	110	<el-form-item label="名称" prop="name">
	111	<el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
	112	</el-form-item>
	113	<el-form-item label="是否上架" prop="isUp">
	114	<el-switch
	115	v-model="dialogData.isUp"
	116	:active-value="1"
	117	:inactive-value="0"
	118	/>
	119	</el-form-item>
	120	</el-form>
	121	<div slot="footer" class="dialog-footer">
	122	<el-button @click="hideDialog">取消</el-button>
	123	<el-button type="primary" @click="submitHandle">确定</el-button>
	124	</div>
	125	</el-dialog>
	126
	127	<pagination
	128	v-show="total>0"
	129	:total="total"
	130	:page.sync="pageNum"
	131	:limit.sync="pageSize"
	132	@pagination="getList"
	133	/>
	134	</div>
	135	</template>
	136
	137	<script>
	138
	139	export default {
	140	name: 'Demo',
	141	data() {
	142	return {
	143	showSearch: true, // 是否显示搜索区
7f89d0	144	keyWord: '', // 搜索区字段，可自行扩展其余字段
36b711	145
7f89d0	146	// TODO
C	147	objectName: 'xx', // 对象名称，用于删除提示、启用提示、弹窗标题等
	148
	149	// 数据列表
36b711	150	list: [],
L	151
	152	// 弹窗数据
	153	dialogVisible: false,
	154	dialogData: {},
7f89d0	155
C	156	// 富文本编辑器
	157	// rangenum: null,
36b711	158
L	159	// 分页 ↓↓↓↓↓↓↓↓↓↓
	160	total: 0,
	161	pageNum: 1,
	162	pageSize: 20,
	163	// 分页 ↑↑↑↑↑↑↑↑↑↑
	164
	165	// 表单校验
	166	rules: {
	167	name: [
	168	{ required: true, message: '名称不能为空', trigger: 'change' }
	169	],
	170	isUp: [
	171	{ required: true, message: '是否上架不能为空', trigger: 'change' }
	172	]
	173	}
	174	}
	175	},
	176	mounted() {
	177	this.init()
	178	},
	179	methods: {
	180	// 初始化
	181	init() {
	182	this.getList()
	183	},
	184
7f89d0	185	// ========== 富文本相关
C	186	// 富文本编辑器的内容赋值
	187	// catchData(content) {
	188	// if (content === '<p><br></p>') content = ''
	189	// try {
	190	// const currentRange = window.getSelection().getRangeAt(0)
	191	// this.rangenum = currentRange
	192	// } catch (e) {
	193	//
	194	// }
	195	// this.$set(this.dialogData, 'content', content)
	196	// this.$refs[this.formName].validateField('content')
	197	// },
	198	// ========== 富文本相关
	199
36b711	200	// 获取列表
L	201	getList() {
	202	var { pageNum, pageSize, keyWord } = this
	203	this.postFN({
7f89d0	204	// TODO url
36b711	205	url: 'xxx',
L	206	params: {
	207	pageNum: pageNum,
	208	pageSize: pageSize,
	209	keyWord: keyWord
	210	},
	211	mockData: {
	212	code: 100,
	213	msg: '',
	214	data: {
	215	list: [{
	216	id: 'xxx',
	217	index: 1,
	218	name: '超级管理员',
1dcdda	219	createTime: '2020-08-09 10:10:10',
L	220	adviceInfo: '啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦'
36b711	221	}],
L	222	total: 100
	223	}
	224	}
	225	}, (inf) => {
7f89d0	226	// 测试用
36b711	227	for (var i = 0; i < 19; i++) {
L	228	inf.list.push({
	229	id: 'xxx',
	230	index: 1,
	231	name: '超级管理员',
	232	createTime: '2020-08-09 10:10:10'
	233	})
	234	}
	235	this.list = inf.list \|\| []
	236	this.total = inf.total
	237	})
	238	},
	239	// 重新获取列表
	240	reGetList() {
	241	this.pageNum = 1
	242	this.getList()
	243	},
	244	// 重置
	245	resetHandle() {
	246	this.keyWord = ''
	247	this.reGetList()
	248	},
	249	// 删除
	250	handleDelete(item) {
	251	// 打开二次确认弹窗
	252	this.$confirm('是否确认删除该角色?', '提示', {
	253	confirmButtonText: '确定',
	254	cancelButtonText: '取消',
	255	type: 'warning'
	256	}).then(() => {
	257	// 确定回调
7f89d0	258	// TODO url
36b711	259	this.postFN({
L	260	url: 'xxx',
	261	params: {
	262	id: item.id
	263	},
	264	mockData: {
	265	code: 100,
	266	msg: '',
	267	data: {}
	268	}
	269	}, () => {
	270	this.getList()
	271	this.$messageSuc('删除成功')
	272	})
	273	}).catch(() => {})
	274	},
	275	// 修改是否上架 todo
	276	handleUpChange(item) {
	277	const text = item.isUp === 1 ? '上架' : '下架'
	278	this.$confirm('确认要' + text + '该角色吗?', '提示', {
	279	confirmButtonText: '确定',
	280	cancelButtonText: '取消',
	281	type: 'warning'
	282	}).then(() => {
	283	this.postFN({
	284	url: 'xxx',
7f89d0	285	// TODO url
36b711	286	params: {
L	287	id: item.id
	288	},
	289	mockData: {
	290	code: 100,
	291	msg: '',
	292	data: {}
	293	}
	294	}, () => {
	295	this.$messageSuc(text + '成功')
4dde14	296	}, (res) => {
L	297	item.isUp = item.isUp === 1 ? 0 : 1
	298	this.$messageError(res.msg)
36b711	299	})
L	300	}).catch(() => {
	301	item.isUp = item.isUp === 1 ? 0 : 1
	302	})
	303	},
	304
	305	// 打开新增弹窗
	306	showAddDialog() {
	307	var dialogData = {
	308	type: 'add',
	309	isUp: 1
	310	}
	311	this.dialogVisible = true
	312	this.$nextTick(() => {
	313	this.dialogData = dialogData
	314	this.$refs['refDialog'].resetFields()
	315	})
	316	},
	317	// 打开编辑弹框
	318	showEditDialog(item) {
	319	var dialogData = {
	320	type: 'edit',
	321	...item
	322	}
	323	console.log('dialogData', dialogData)
	324	this.dialogVisible = true
	325	this.$nextTick(() => {
	326	this.dialogData = dialogData
	327	this.$refs['refDialog'].resetFields()
	328	})
	329	},
	330	// 关闭编辑弹窗
	331	hideDialog() {
	332	this.dialogData = {}
	333	this.dialogVisible = false
7f89d0	334	// 清空富文本
C	335	// this.rangenum = null
36b711	336	},
L	337	// 提交新增&编辑
	338	submitHandle() {
	339	this.$refs['refDialog'].validate(valid => {
	340	if (valid) {
	341	this.submitReq()
	342	}
	343	})
	344	},
	345	// 提交接口
	346	submitReq() {
	347	var { dialogData } = this
	348	var params = {
	349	name: dialogData.name,
	350	isUp: dialogData.isUp
	351	}
	352
	353	if (dialogData.password) params.password = dialogData.password
	354
	355	var isAdd = dialogData.type === 'add'
7f89d0	356	// TODO url
C	357	var url = isAdd ? 'xxx/add' : 'xxx/edit'
36b711	358
L	359	!isAdd && (params.id = dialogData.id)
	360
	361	this.postFN({
	362	url: url,
	363	params: params,
	364	mockData: {
	365	code: 100,
	366	msg: '',
	367	data: {}
	368	}
	369	}, () => {
	370	this.$messageSuc('保存成功')
	371	this.hideDialog()
b82c1e	372	isAdd ? this.reGetList() : this.getList()
36b711	373	})
L	374	}
	375	}
	376	}
	377	</script>
	378
	379	<style lang="scss" scoped>
	380
	381	</style>