~chenshaoxiong/sms_center_backstage.git

long

2021-09-13 5f052d4e17b53d4fe07a87d53a9c112bff3dc852

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