front-end/admin-code/src/views/staff/list.vue

<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #table-column-nickName="{scope}">
				<div class="flex-center">
					<cl-avatar
						shape="square"
						:size="60"
						:src="scope.row.avatarUrl | default_avatar"
					></cl-avatar>
					<div class="app-margin-left-10">{{ scope.row.nickName }}</div>
				</div>
			</template>

			<template #table-column-incomeNotice="{scope}">
				<el-switch
					v-model="scope.row.incomeNotice"
					active-value="1"
					inactive-value="0"
					@change="changeNotice(scope.row)"
				></el-switch>
			</template>

			<template #table-column-status="{scope}">
				<el-switch
					v-model="scope.row.status"
					active-value="1"
					inactive-value="0"
					@change="changeStatus(scope.row)"
				></el-switch>
			</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>
		</cl-crud>
		<!-- 新增弹窗 -->
		<el-dialog
			:title="`${addOrModify == 1 ? '添加' : '修改'}员工`"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="adForm"
					:rules="ruleForm"
					ref="adForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="员工姓名" prop="adminName">
						<el-input
							v-model="adForm.adminName"
							placeholder="请输入姓名"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="角色" prop="roleId">
						<el-select v-model="adForm.roleId" size="small" placeholder="请选择角色">
							<el-option
								v-for="(item, index) in roleList"
								:key="index"
								:value="item.id"
								>{{ item.roleName }}</el-option
							>
						</el-select>
					</el-form-item>
					<el-form-item label="关联微信" prop="userId">
						<div>
							<div class="member-wrap flex-center" v-if="!$util.isEmpty(memberData)">
								<div class="member-img">
									<cl-avatar
										shape="square"
										:size="40"
										:src="memberData.avatarUrl | default_avatar"
									></cl-avatar>
								</div>
								<div class="member-det">
									<div class="app-size-28">{{ memberData.realName }}</div>
									<div>{{ memberData.mobile }}</div>
								</div>
							</div>
							<div>
								<el-button type="primary" size="small" @click="selGoods"
									>选择会员</el-button
								>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="收款通知" prop="remind">
						<el-switch
							v-model="adForm.remind"
							active-value="1"
							inactive-value="0"
						></el-switch>
					</el-form-item>
					<el-form-item label="登陆密码" prop="password">
						<el-input
							v-model="adForm.password"
							placeholder="请输入登录密码"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="adForm.remark" type="textarea" size="small"></el-input>
					</el-form-item>
					<el-form-item label="马上启用" prop="status">
						<el-switch
							v-model="adForm.status"
							active-value="1"
							inactive-value="0"
						></el-switch>
					</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('adForm')"
					>确认</el-button
				>
			</div>
		</el-dialog>
		<!-- 选择商品 -->
		<sel-member
			:show.sync="selMemberModal"
			@confirm="selMemberConfirmFn"
			@cancel="selMemberModal = false"
		></sel-member>
	</div>
</template>

<script>
import selMember from '@/components/module/sel-member';

export default {
	name: 'list-ad',
	components: {
		selMember
	},
	data() {
		return {
			app: null,
			// 修改弹窗
			modifyData: {},
			// 新增或者修改弹窗
			addOrModify: 1,
			addDialog: false,
			adForm: {
				adminName: '',
				roleId: '',
				remind: '1',
				password: '',
				userId: '',
				remark: '',
				status: '1'
			},
			ruleForm: {
				adminName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
				userId: [{ required: true, message: '请选择会员', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			},
			// 角色列表
			roleList: [],
			// 商品列表
			selMemberModal: false,
			memberData: {}
		};
	},
	methods: {
		// api
		getRole() {
			if (!this.$util.isEmpty(this.roleList)) return this.roleList;
			this.$service.role.list().then(res => {
				this.roleList = res.list;
			});
		},
		delBtnFn(item) {
			this.$confirm('是否删除该员工?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.staff.delete({ id: item.id }).then(res => {
						this.$message.success('删除成功!');
						this.app.refresh({ type: this.tabIndex });
					});
				})
				.catch();
		},
		// operate
		authBtnFn(item) {},
		modifyBtnFn(item) {
			this.getRole();
			this.addOrModify = 2;
			this.modifyData = item;
			this.addDialog = true;
			let data = JSON.parse(JSON.stringify(item));
			data.startTime = this.$util.$formatDate(data.startTime);
			data.endTime = this.$util.$formatDate(data.endTime);
			if (this.$util.isEmpty(data)) return;
			Object.keys(this.adForm).forEach(i => {
				if (i == 'password') return false;
				this.adForm[i] = data[i];
			});
		},
		addBtnFn() {
			this.getRole();
			this.addOrModify = 1;
			this.addDialog = true;
		},
		// 切换收款通知
		changeNotice(item) {},
		changeStatus(item) {
			this.$service.staff.updateStatus({ id: item.id, status: item.status }).then(res => {
				this.$message.success('操作成功!');
			});
		},
		resetForm() {
			this.$refs['adForm'].resetFields();
			this.memberData = {};
			this.addDialog = false;
		},

		addFn() {
			let host = null;
			if (this.addOrModify == 1) {
				host = () => {
					return this.$service.staff.add(this.adForm);
				};
			} else {
				host = () => {
					return this.$service.staff.update({
						id: this.modifyData.id,
						...this.adForm
					});
				};
			}
			host(this.adForm).then(res => {
				this.$message.success('操作成功!');
				this.resetForm();
				this.app.refresh({ type: this.tabIndex });
			});
		},
		// 选择会员
		selGoods() {
			this.selMemberModal = true;
		},
		selMemberConfirmFn(item) {
			this.memberData = item;
			this.adForm.userId = item.id;
			this.selMemberModal = false;
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.addFn();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.staff)
				.set('table', {
					columns: [
						{
							prop: 'userId',
							label: 'id',
							align: 'center',
							'min-width': 100
						},
						{
							prop: 'nickName',
							label: '微信名',
							align: 'center',
							'min-width': 120
						},
						{
							prop: 'adminName',
							label: '姓名',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'incomeNotice',
							label: '收款通知',
							align: 'center'
						},
						{
							prop: 'roleName',
							label: '角色',
							align: 'center'
						},
						{
							prop: 'addDate',
							label: '添加时间',
							align: 'center'
						},
						{
							prop: 'lastLoginTime',
							label: '最后登录',
							align: 'center'
						},
						{
							prop: 'status',
							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', 'refresh-btn', 'slot-add-ad-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>