add list

hd/src/views/staff/list.vue

@@ -0,0 +1,230 @@
+<template>
+	<div class="app-list-content">
+		<x-crud class="liu-crud-wrap" @load="onLoad">
+			<template #table-column-addTime="{scope}">
+				<div>{{ scope.row.addTime | formatTime }}</div>
+			</template>
+
+			<!-- 权限设置 -->
+			<template #slot-auth="{scope}">
+				<el-button type="text" @click="authBtnFn(scope.row)">权限设置</el-button>
+			</template>
+			<!-- 编辑 -->
+			<template #slot-modify="{scope}">
+				<el-button type="text" @click="modifyBtnFn(scope.row)">编辑</el-button>
+			</template>
+			<!-- 删除 -->
+			<template #slot-del="{scope}">
+				<el-button type="text" @click="delBtnFn(scope.row)">删除</el-button>
+			</template>
+
+			<!-- 添加 -->
+			<template #slot-add-ad-btn="{scope}">
+				<el-button type="primary" size="mini" @click="addBtnFn">添加</el-button>
+			</template>
+		</x-crud>
+		<!-- 新增弹窗 -->
+		<el-dialog
+			:title="`${addOrModify == 1 ? '添加' : '修改'}角色`"
+			:visible.sync="addDialog"
+			:close-on-click-modal="false"
+			width="600px"
+		>
+			<div class="ad-modal-content">
+				<el-form
+					:model="form"
+					:rules="ruleForm"
+					ref="form"
+					label-width="100px"
+					class="demo-form"
+				>
+					<el-form-item label="角色名称" prop="roleName">
+						<el-input
+							v-model="form.roleName"
+							placeholder="请输入名称"
+							size="small"
+						></el-input>
+					</el-form-item>
+				</el-form>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button size="small" @click="resetForm">取 消</el-button>
+				<el-button type="primary" size="small" @click="submitForm('form')">确认</el-button>
+			</div>
+		</el-dialog>
+		<!-- 权限设置 -->
+		<role-set :show.sync="roleShow" :info="modifyData" />
+	</div>
+</template>
+
+<script>
+import roleSet from '@/components/role-set';
+export default {
+	name: 'list-ad',
+	components: {
+		roleSet
+	},
+	data() {
+		return {
+			app: null,
+			// 修改弹窗
+			modifyData: {},
+			// 新增或者修改弹窗
+			addOrModify: 1,
+			addDialog: false,
+			form: {
+				roleName: ''
+			},
+			ruleForm: {
+				roleName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+			},
+			// 权限设置
+			roleShow: false
+		};
+	},
+	methods: {
+		// api
+		delBtnFn(item) {
+
+			this.$message.success('即将开通...')
+			return false
+
+			this.$confirm('是否删除该角色?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					this.$service.role.delete({ id: item.id }).then(res => {
+						this.$message.success('删除成功!');
+						this.app.refresh({ type: this.tabIndex });
+					});
+				})
+				.catch();
+		},
+		// operate
+		authBtnFn(item) {
+			this.$message.success('即将开通...')
+			return false
+			this.modifyData = item;
+			this.roleShow = true;
+		},
+		modifyBtnFn(item) {
+			this.addOrModify = 2;
+			this.modifyData = item;
+			this.addDialog = true;
+			let data = JSON.parse(JSON.stringify(item));
+			data.addTime = this.$util.$formatDate(data.addTime);
+			this.form.roleName = item.roleName;
+		},
+		addBtnFn() {
+			this.addOrModify = 1;
+			this.addDialog = true;
+		},
+		resetForm() {
+			this.$refs['form'].resetFields();
+			this.addDialog = false;
+		},
+
+		addFn() {
+			let host = null;
+			if (this.addOrModify == 1) {
+				host = () => {
+					return this.$service.role.add(this.form);
+				};
+			} else {
+				host = () => {
+					return this.$service.role.update({
+						id: this.modifyData.id,
+						...this.form
+					});
+				};
+			}
+			host(this.form).then(res => {
+				this.$message.success('操作成功!');
+				this.resetForm();
+				this.app.refresh({ type: this.tabIndex });
+			});
+		},
+		submitForm(formName) {
+			this.$refs[formName].validate(valid => {
+				if (valid) {
+					this.addFn();
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		// x-crud 组件ad
+		onLoad({ ctx, app }) {
+			this.app = app;
+			ctx.service(this.$service.role)
+				.set('table', {
+					columns: [
+						{
+							prop: 'roleName',
+							label: '角色名称',
+							align: 'center'
+						},
+						{
+							prop: 'num',
+							label: '成员数量',
+							align: 'center'
+						},
+						{
+							prop: 'addTime',
+							label: '添加时间',
+							align: 'center'
+						}
+					],
+					// 操作列
+					op: {
+						visible: true, // 是否显示
+						// 同 element-ui Table-column Attributes
+						props: {
+							width: 160,
+							align: 'center',
+							fixed: 'right',
+							label: '操作'
+						},
+						// 布局，请移步 `layout`
+						layout: ['slot-auth', 'slot-modify', 'slot-del']
+					}
+				})
+				.set('layout', [
+					['slot-tabs'],
+					['flex1', 'slot-add-ad-btn', 'refresh-btn'],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				// .on('refresh', async (params, { next, render }) => {
+				// 	// 继续执行刷新
+				// 	let { list } = await next(params);
+				// 	list.map((e, index) => {
+				// 		e.index = index;
+				// 		e.imgUrl = e.smallImgList[0];
+				// 	});
+				// 	this.list = list;
+				// 	render(list);
+				// })
+				.done();
+			app.refresh({ type: this.tabIndex });
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+// module
+.ad-modal-content {
+	.member-wrap {
+		line-height: 1.4;
+		margin-bottom: 10px;
+		.member-det {
+			font-size: 12px;
+			margin-left: 10px;
+		}
+	}
+}
+</style>