~chenshaoxiong/sms_center_backstage.git

long

2021-10-26 e9f8083097a8d4b247e41c629e4822400136e803

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