|
|
@@ -0,0 +1,378 @@
|
|
|
+<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-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
|
|
|
+ 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: 100,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ // 布局，请移步 `layout`
|
|
|
+ layout: ['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>
|
lalala