From 23b2c479f36ff270b95c7d28a272b6dae9f67e5e Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Fri, 16 Dec 2022 17:34:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E7=94=A8=E6=88=B7=E9=A9=AC=E7=94=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sylive/activity/index.js              |  12 +
 src/api/sylive/members/index.js               | 168 +++++++++++
 src/views/sylive/activity/index.vue           |  14 +
 .../members/components/members-edit.vue       | 192 ++++++++++++
 .../components/members-majia-search.vue       |  31 ++
 .../members/components/members-majia.vue      | 185 ++++++++++++
 .../members/components/members-search.vue     | 102 +++++++
 src/views/sylive/members/index.vue            | 285 ++++++++++++++++++
 8 files changed, 989 insertions(+)
 create mode 100644 src/api/sylive/members/index.js
 create mode 100644 src/views/sylive/members/components/members-edit.vue
 create mode 100644 src/views/sylive/members/components/members-majia-search.vue
 create mode 100644 src/views/sylive/members/components/members-majia.vue
 create mode 100644 src/views/sylive/members/components/members-search.vue
 create mode 100644 src/views/sylive/members/index.vue

diff --git a/src/api/sylive/activity/index.js b/src/api/sylive/activity/index.js
index 98913c0..624d30d 100644
--- a/src/api/sylive/activity/index.js
+++ b/src/api/sylive/activity/index.js
@@ -64,6 +64,18 @@ export async function updateActivity(data) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 复制活动
+ * @param id 活动id
+ */
+export async function copyActivity(id) {
+  const res = await request.get('/sylive/activity/copy/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 修改活动商品
  * @param data 活动信息
diff --git a/src/api/sylive/members/index.js b/src/api/sylive/members/index.js
new file mode 100644
index 0000000..0ecdee1
--- /dev/null
+++ b/src/api/sylive/members/index.js
@@ -0,0 +1,168 @@
+import request from '@/utils/request';
+
+/**
+ * 分页查询用户
+ * @param params 查询条件
+ */
+export async function pageMembers(params) {
+  const res = await request.get('/sylive/members/page', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改马甲
+ * @param userId 用户id
+ * @param maJiaId 马甲id
+ */
+export async function updateMembersMaJia(userId, maJiaId) {
+  const res = await request.put('/sylive/members/majia', {
+    userId,
+    maJiaId
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询用户列表
+ * @param params 查询条件
+ */
+export async function listMembers(params) {
+  const res = await request.post('/sylive/members/list', params);
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询用户
+ * @param id 用户id
+ */
+export async function getMembers(id) {
+  const res = await request.get('/sylive/members/' + id);
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加用户
+ * @param data 用户信息
+ */
+export async function addMembers(data) {
+  const res = await request.post('/sylive/members', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户
+ * @param data 用户信息
+ */
+export async function updateMembers(data) {
+  const res = await request.put('/sylive/members', data);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除用户
+ * @param id 用户id
+ */
+export async function removeMembers(id) {
+  const res = await request.delete('/sylive/members/' + id);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除用户
+ * @param data 用户id集合
+ */
+export async function removeMembersBatch(data) {
+  const res = await request.delete('/sylive/members/batch', {
+    data
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改用户状态
+ * @param userId 用户id
+ * @param status 状态
+ */
+export async function updateMembersStatus(userId, status) {
+  const res = await request.put('/sylive/members/status', {
+    userId,
+    status
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 重置用户密码
+ * @param membersId 用户id
+ * @param password 密码
+ * @returns {Promise<string>}
+ */
+export async function updateMembersPassword(membersId, password = '123456') {
+  const res = await request.put('/sylive/members/password', {
+    membersId,
+    password
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导入用户
+ * @param file excel文件
+ */
+export async function importMembers(file) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await request.post('/sylive/members/import', formData);
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 检查用户是否存在
+ * @param field 检查的字段
+ * @param value 字段的值
+ * @param organizationId 机构id
+ */
+export async function checkExistence(field, value, organizationId) {
+  const res = await request.get('/sylive/members/existence', {
+    params: { field, value, organizationId }
+  });
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/sylive/activity/index.vue b/src/views/sylive/activity/index.vue
index 174b3b2..e831730 100644
--- a/src/views/sylive/activity/index.vue
+++ b/src/views/sylive/activity/index.vue
@@ -98,6 +98,7 @@
                 <el-dropdown-item command="goods">修改商品</el-dropdown-item>
                 <el-dropdown-item command="groups">修改分组</el-dropdown-item>
                 <!--
+                <el-dropdown-item command="copy">复制活动</el-dropdown-item>
                 <el-dropdown-item command="item">修改权益商品</el-dropdown-item>
                 <el-dropdown-item command="coupon">修改券</el-dropdown-item>
                 -->
@@ -152,6 +153,7 @@
     pageActivity,
     removeActivity,
     removeActivitys,
+    copyActivity,
     updateActivityStatus
   } from '@/api/sylive/activity';
   import { listOrganizationParent } from '@/api/sylive/organization';
@@ -270,6 +272,18 @@
           this.$router.replace('/sylive/goods?id=' + row.activityId);
         } else if (command === 'groups') {
           this.$router.replace('/sylive/groups?id=' + row.activityId);
+        } else if (command === 'copy') {
+          const loading = this.$loading({ lock: true });
+          copyActivity(row.activityId)
+            .then((msg) => {
+              loading.close();
+              this.$message.success(msg);
+              this.reload();
+            })
+            .catch((e) => {
+              loading.close();
+              this.$message.error(e.message);
+            });
         }
       },
       /* 打开数据统计页 */
diff --git a/src/views/sylive/members/components/members-edit.vue b/src/views/sylive/members/components/members-edit.vue
new file mode 100644
index 0000000..f31fb1f
--- /dev/null
+++ b/src/views/sylive/members/components/members-edit.vue
@@ -0,0 +1,192 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isUpdate ? '修改用户' : '添加用户'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="所属机构:" prop="organizationId">
+            <ele-tree-select
+              :data="organizationList"
+              label-key="organizationName"
+              value-key="organizationId"
+              v-model="form.organizationId"
+              :multiple="false"
+              :clearable="true"
+              placeholder="请选择所属机构"
+              :disabled="false"
+              :default-expand-all="true"
+              size="small"
+              :check-strictly="false"
+            />
+          </el-form-item>
+          <el-form-item label="手机号:" prop="mobile">
+            <el-input
+              clearable
+              :maxlength="11"
+              :disabled="isUpdate"
+              v-model="form.mobile"
+              placeholder="请输入手机号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="姓名:" prop="uname">
+            <el-input
+              clearable
+              :maxlength="20"
+              v-model="form.uname"
+              placeholder="请输入姓名"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { phoneReg } from 'ele-admin';
+  import {
+    addMembers,
+    updateMembers,
+    checkExistence
+  } from '@/api/sylive/members';
+
+  export default {
+    components: {},
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object,
+      // 全部机构
+      organizationList: Array
+    },
+    data() {
+      const defaultForm = {
+        userId: null,
+        organizationId: null,
+        mobile: '',
+        uname: ''
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        // 表单验证规则
+        rules: {
+          mobile: [
+            {
+              required: true,
+              trigger: 'blur',
+              validator: (_rule, value, callback) => {
+                if (this.data) {
+                  return callback();
+                }
+                if (!value) {
+                  return callback(new Error('请输入手机号'));
+                }
+                const st = new RegExp(phoneReg);
+                if (!st.test(value)) {
+                  return callback(new Error('手机号格式不正确'));
+                }
+                checkExistence('mobile', value, this.form.organizationId)
+                  .then(() => {
+                    callback(new Error('手机号已经存在'));
+                  })
+                  .catch(() => {
+                    callback();
+                  });
+              }
+            }
+          ],
+          organizationId: [
+            {
+              required: true,
+              message: '请选择所属机构',
+              trigger: 'blur'
+            }
+          ],
+          uname: [
+            {
+              required: true,
+              message: '请输入姓名',
+              trigger: 'blur'
+            }
+          ]
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          const data = {
+            ...this.form
+          };
+          const saveUpdate = this.isUpdate ? updateMembers : addMembers;
+          saveUpdate(data)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.$util.assignObject(this.form, {
+              ...this.data
+            });
+            this.isUpdate = true;
+          } else {
+            this.form.organizationId = null;
+            this.isUpdate = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/members/components/members-majia-search.vue b/src/views/sylive/members/components/members-majia-search.vue
new file mode 100644
index 0000000..deaf04a
--- /dev/null
+++ b/src/views/sylive/members/components/members-majia-search.vue
@@ -0,0 +1,31 @@
+<template>
+  <div style="max-width: 200px">
+    <el-input
+      clearable
+      size="small"
+      v-model="where.keywords"
+      placeholder="输入关键字搜索"
+      prefix-icon="el-icon-search"
+      @change="search"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        // 搜索表单
+        where: {
+          keywords: ''
+        }
+      };
+    },
+    methods: {
+      // 搜索
+      search() {
+        this.$emit('search', this.where);
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/members/components/members-majia.vue b/src/views/sylive/members/components/members-majia.vue
new file mode 100644
index 0000000..25ebb48
--- /dev/null
+++ b/src/views/sylive/members/components/members-majia.vue
@@ -0,0 +1,185 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="680px"
+    :visible="visible"
+    :close-on-click-modal="true"
+    custom-class="ele-dialog-form"
+    :title="isMaJia ? '修改马甲' : '披上马甲'"
+    @update:visible="updateVisible"
+  >
+    <el-form ref="form" :model="form" label-width="82px">
+      <el-row :gutter="15">
+        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+          <el-form-item label="选择马甲:">
+            <ele-table-select
+              ref="select"
+              v-model="form.maJiaId"
+              :multiple="false"
+              :clearable="true"
+              :placeholder="isMaJia ? '马甲已删除请保存' : '请选择'"
+              value-key="userId"
+              label-key="maJiaShow"
+              :table-config="tableConfig"
+              :popper-width="580"
+              :init-value="initValue"
+            >
+              <!-- 角色列 -->
+              <template v-slot:roleName="{ row }">
+                <el-tag type="primary" size="mini">
+                  {{ row.roleName }}
+                </el-tag>
+              </template>
+              <!-- 表头工具栏 -->
+              <template v-slot:toolbar>
+                <members-majia-search @search="search" />
+              </template>
+            </ele-table-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="updateVisible(false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="save">
+        保存
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import { pageMembers, updateMembersMaJia } from '@/api/sylive/members';
+  import MembersMajiaSearch from './members-majia-search.vue';
+
+  export default {
+    components: { MembersMajiaSearch },
+    props: {
+      // 弹窗是否打开
+      visible: Boolean,
+      // 修改回显的数据
+      data: Object
+    },
+    data() {
+      const defaultForm = {
+        maJiaId: null
+      };
+      return {
+        defaultForm,
+        // 表单数据
+        form: { ...defaultForm },
+        tableConfig: {
+          datasource({ page, limit, where, order }) {
+            return pageMembers({ ...where, ...order, page, limit });
+          },
+          columns: [
+            {
+              prop: 'uname',
+              label: '姓名',
+              showOverflowTooltip: true,
+              minWidth: 90
+            },
+            {
+              prop: 'nickname',
+              label: '微信昵称',
+              showOverflowTooltip: true,
+              minWidth: 90
+            },
+            {
+              prop: 'mobile',
+              label: '手机号',
+              showOverflowTooltip: true,
+              minWidth: 90
+            },
+            {
+              prop: 'organizationName',
+              label: '机构',
+              showOverflowTooltip: true,
+              minWidth: 120
+            },
+            {
+              prop: 'roleName',
+              label: '角色',
+              showOverflowTooltip: true,
+              minWidth: 60,
+              slot: 'roleName'
+            }
+          ],
+          pageSize: 5,
+          pageSizes: [5, 10, 15, 20],
+          rowClickChecked: true,
+          rowClickCheckedIntelligent: false,
+          toolkit: ['reload', 'columns'],
+          size: 'small',
+          toolStyle: { padding: '0 10px' }
+        },
+        // 提交状态
+        loading: false,
+        // 是否是修改
+        isUpdate: false,
+        // 是否有马甲
+        isMaJia: false,
+        // 回显值
+        initValue: undefined
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      // 搜索
+      search(where) {
+        this.$refs.select.reload({
+          where: where,
+          page: 1
+        });
+      },
+      /* 保存编辑 */
+      save() {
+        this.$refs.form.validate((valid) => {
+          if (!valid) {
+            return false;
+          }
+          this.loading = true;
+          updateMembersMaJia(this.data.userId, this.form.maJiaId)
+            .then((msg) => {
+              this.loading = false;
+              this.$message.success(msg);
+              this.updateVisible(false);
+              this.$emit('done');
+            })
+            .catch((e) => {
+              this.loading = false;
+              this.$message.error(e.message);
+            });
+        });
+      },
+      /* 更新visible */
+      updateVisible(value) {
+        this.$emit('update:visible', value);
+      }
+    },
+    watch: {
+      visible(visible) {
+        if (visible) {
+          if (this.data) {
+            this.initValue = {
+              userId: this.data.maJiaId,
+              maJiaShow: this.data.maJiaName
+            };
+            this.isMaJia = this.data.maJiaId ? true : false;
+          } else {
+            this.form.maJiaId = null;
+            this.isMaJia = false;
+          }
+        } else {
+          this.$refs.form.clearValidate();
+          this.form = { ...this.defaultForm };
+        }
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/members/components/members-search.vue b/src/views/sylive/members/components/members-search.vue
new file mode 100644
index 0000000..58184d4
--- /dev/null
+++ b/src/views/sylive/members/components/members-search.vue
@@ -0,0 +1,102 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
+        <el-form-item label="姓名:">
+          <el-input clearable v-model="where.uname" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
+        <el-form-item label="手机号:">
+          <el-input clearable v-model="where.mobile" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
+        <el-form-item label="机构:">
+          <el-select
+            clearable
+            v-model="where.topOrgId"
+            placeholder="请选择"
+            class="ele-fluid"
+          >
+            <el-option
+              v-for="item in organizationTopList"
+              :key="item.organizationId"
+              :label="item.organizationName"
+              :value="item.organizationId"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  import { listOrganizationParent } from '@/api/sylive/organization';
+
+  export default {
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        topOrgId: null,
+        uname: '',
+        mobile: ''
+      };
+      return {
+        // 表单数据
+        organizationTopList: [],
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    created() {
+      this.organizationParentQuery();
+    },
+    methods: {
+      /* 查询顶级机构 */
+      organizationParentQuery() {
+        listOrganizationParent({ parentId: 0 })
+          .then((list) => {
+            this.organizationTopList = list;
+          })
+          .catch((e) => {
+            this.$message.error(e.message);
+          });
+      },
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/members/index.vue b/src/views/sylive/members/index.vue
new file mode 100644
index 0000000..bb6eabe
--- /dev/null
+++ b/src/views/sylive/members/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 搜索表单 -->
+      <members-search @search="reload" />
+      <!-- 数据表格 -->
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :selection.sync="selection"
+        cache-key="systemMembersTable"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="openEdit()"
+          >
+            新建
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            icon="el-icon-delete"
+            class="ele-btn-icon"
+            @click="removeBatch"
+          >
+            删除
+          </el-button>
+        </template>
+        <!-- 角色列 -->
+        <template v-slot:roleName="{ row }">
+          <el-tag type="primary" size="mini">
+            {{ row.roleName }}
+          </el-tag>
+        </template>
+        <!-- 状态列 -->
+        <template v-slot:status="{ row }">
+          <el-switch
+            :active-value="0"
+            :inactive-value="1"
+            v-model="row.status"
+            @change="editStatus(row)"
+          />
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openEdit(row)"
+          >
+            修改
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此用户吗？"
+            @confirm="remove(row)"
+          >
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">
+                删除
+              </el-link>
+            </template>
+          </el-popconfirm>
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="openMaJia(row)"
+          >
+            {{ row.maJiaId ? '修改马甲' : '披上马甲' }}
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!-- 编辑弹窗 -->
+    <members-edit
+      :data="current"
+      :visible.sync="showEdit"
+      :organization-list="organizationList"
+      @done="reload"
+    />
+    <!-- 马甲弹窗 -->
+    <members-majia :data="current" :visible.sync="showMaJia" @done="reload" />
+  </div>
+</template>
+
+<script>
+  import MembersSearch from './components/members-search.vue';
+  import MembersEdit from './components/members-edit.vue';
+  import MembersMajia from './components/members-majia.vue';
+  import { listOrganizations } from '@/api/sylive/organization';
+  import {
+    pageMembers,
+    removeMembers,
+    removeMembersBatch,
+    updateMembersStatus
+  } from '@/api/sylive/members';
+
+  export default {
+    name: 'SystemMembers',
+    components: { MembersSearch, MembersEdit, MembersMajia },
+    data() {
+      return {
+        organizationList: [],
+        // 表格列配置
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 60,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'uname',
+            label: '姓名',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'nickname',
+            label: '微信昵称',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'mobile',
+            label: '手机号',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 80
+          },
+          {
+            prop: 'organizationName',
+            label: '机构',
+            showOverflowTooltip: true,
+            minWidth: 120
+          },
+          {
+            prop: 'roleName',
+            label: '角色',
+            showOverflowTooltip: true,
+            minWidth: 60,
+            slot: 'roleName'
+          },
+          {
+            prop: 'createTime',
+            label: '创建时间',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            minWidth: 120,
+            formatter: (_row, _column, cellValue) => {
+              return this.$util.toDateString(cellValue);
+            }
+          },
+          {
+            prop: 'status',
+            label: '状态',
+            align: 'center',
+            sortable: 'custom',
+            width: 100,
+            resizable: false,
+            slot: 'status'
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 260,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        // 表格选中数据
+        selection: [],
+        // 当前编辑数据
+        current: null,
+        // 是否显示编辑弹窗
+        showEdit: false,
+        // 是否显示马甲弹窗
+        showMaJia: false
+      };
+    },
+    created() {
+      this.organizationQuery();
+    },
+    methods: {
+      /* 表格数据源 */
+      datasource({ page, limit, where, order }) {
+        return pageMembers({ ...where, ...order, page, limit });
+      },
+      /* 查询机构 */
+      organizationQuery() {
+        listOrganizations()
+          .then((list) => {
+            this.organizationList = this.$util.toTreeData({
+              data: list,
+              idField: 'organizationId',
+              parentIdField: 'parentId'
+            });
+          })
+          .catch((e) => {
+            this.$message.error(e.message);
+          });
+      },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      /* 打开编辑弹窗 */
+      openEdit(row) {
+        this.current = row;
+        this.showEdit = true;
+      },
+      /* 打开马甲弹窗 */
+      openMaJia(row) {
+        this.current = row;
+        this.showMaJia = true;
+      },
+      /* 删除 */
+      remove(row) {
+        const loading = this.$loading({ lock: true });
+        removeMembers(row.userId)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+            this.reload();
+          })
+          .catch((e) => {
+            loading.close();
+            this.$message.error(e.message);
+          });
+      },
+      /* 批量删除 */
+      removeBatch() {
+        if (!this.selection.length) {
+          this.$message.error('请至少选择一条数据');
+          return;
+        }
+        this.$confirm('确定要删除选中的用户吗?', '提示', {
+          type: 'warning'
+        })
+          .then(() => {
+            const loading = this.$loading({ lock: true });
+            removeMembersBatch(this.selection.map((d) => d.userId))
+              .then((msg) => {
+                loading.close();
+                this.$message.success(msg);
+                this.reload();
+              })
+              .catch((e) => {
+                loading.close();
+                this.$message.error(e.message);
+              });
+          })
+          .catch(() => {});
+      },
+      /* 更改状态 */
+      editStatus(row) {
+        const loading = this.$loading({ lock: true });
+        updateMembersStatus(row.userId, row.status)
+          .then((msg) => {
+            loading.close();
+            this.$message.success(msg);
+          })
+          .catch((e) => {
+            loading.close();
+            row.status = !row.status ? 1 : 0;
+            this.$message.error(e.message);
+          });
+      }
+    }
+  };
+</script>