|
|
@@ -1,259 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container">
|
|
|
- <!-- 搜索区域 -->
|
|
|
- <div class="filter-container">
|
|
|
- <div class="filter-control">
|
|
|
- <span>姓名:</span>
|
|
|
- <el-input v-model="listQuery.name" placeholder="姓名" @keyup.enter.native="getList" />
|
|
|
- </div>
|
|
|
- <div class="filter-control">
|
|
|
- <span>手机号:</span>
|
|
|
- <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
|
|
|
- </div>
|
|
|
- <div class="filter-control">
|
|
|
- <permission-button type="primary" @click="getList">查询</permission-button>
|
|
|
- <permission-button type="primary" @click="handleCreate">添加用户</permission-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 搜索区域END -->
|
|
|
- <!-- 表格区域 -->
|
|
|
- <el-table
|
|
|
- v-loading="listLoading"
|
|
|
- :data="list"
|
|
|
- style="width: 100%"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- cell-class-name="table-cell"
|
|
|
- header-row-class-name="tableHeader"
|
|
|
- >
|
|
|
- <el-table-column label="序号" :index="indexMethod" type="index" width="80px" align="center" />
|
|
|
- <el-table-column label="姓名" prop="name" align="center" />
|
|
|
- <el-table-column label="手机号" width="140" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <span v-if="row.mobile">{{ row.mobile }}</span>
|
|
|
- <span v-else>—</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="添加时间" width="160px" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <span>{{ row.addTime | formatTime }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="微信昵称" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <span v-if="row.nickName">{{ row.nickName }}</span>
|
|
|
- <span v-else>—</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="openID" width="280" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <span v-if="row.openId">{{ row.openId }}</span>
|
|
|
- <span v-else>—</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="200px" align="center">
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <permission-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- style="margin-right: 5px"
|
|
|
- @click="handleEdit(row)"
|
|
|
- >编辑</permission-button>
|
|
|
- <permission-button
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- style="margin-right: 5px"
|
|
|
- @click="handleRemove(row)"
|
|
|
- >删除</permission-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 表格区域END -->
|
|
|
- <pagination
|
|
|
- :total="total"
|
|
|
- :page.sync="listQuery.pageNum"
|
|
|
- :limit.sync="listQuery.pageSize"
|
|
|
- @pagination="getList(listQuery)"
|
|
|
- />
|
|
|
-
|
|
|
- <el-dialog title="添加用户" width="30%" :visible.sync="dialogVisible" @close="onDialogClose">
|
|
|
- <el-form ref="form" label-width="80px" :model="formData" :rules="rules">
|
|
|
- <el-form-item label="姓名：" prop="name">
|
|
|
- <el-input v-model="formData.name" placeholder="请输入姓名" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="手机号：" prop="mobile">
|
|
|
- <el-input v-model="formData.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSave">确 定</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import PermissionButton from '@/views/components/PermissionButton'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import { createClubUser, getAuthUserList, removeClubUser } from '@/api/auth'
|
|
|
-import { isMobile } from '@/utils/validate'
|
|
|
-
|
|
|
-const resetFormData = () => ({
|
|
|
- clubUserId: '',
|
|
|
- authId: '',
|
|
|
- name: '',
|
|
|
- mobile: ''
|
|
|
-})
|
|
|
-
|
|
|
-export default {
|
|
|
- components: { PermissionButton },
|
|
|
- data() {
|
|
|
- const validateMobile = (rule, value, callback) => {
|
|
|
- console.log(value)
|
|
|
- if (isMobile(value)) {
|
|
|
- callback()
|
|
|
- } else {
|
|
|
- callback(new Error('手机号格式不正确'))
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return {
|
|
|
- total: 0,
|
|
|
- authId: '', // 机构id
|
|
|
- listLoading: false,
|
|
|
- listQuery: {
|
|
|
- authId: '', // 机构id
|
|
|
- name: '', // 用户名
|
|
|
- mobile: '', // 手机号
|
|
|
- pageNum: 0, // 页码
|
|
|
- pageSize: 10 // 分页大小
|
|
|
- },
|
|
|
- list: [],
|
|
|
- srcList: [],
|
|
|
- dialogVisible: false,
|
|
|
- formData: resetFormData(),
|
|
|
- rules: {
|
|
|
- name: [{ required: true, message: '请输入用户姓名', trigger: ['blur'] }],
|
|
|
- mobile: [
|
|
|
- { required: true, message: '请输入手机号', trigger: ['blur'] },
|
|
|
- { validator: validateMobile, message: '手机号格式不正确', trigger: ['blur'] }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['authUserId', 'authUserId'])
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.authId = parseInt(this.$route.query.id)
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 更新列表
|
|
|
- getList() {
|
|
|
- this.listQuery.pageNum = 1
|
|
|
- this.fetchUserList()
|
|
|
- },
|
|
|
-
|
|
|
- // 获取列表数据
|
|
|
- async fetchUserList() {
|
|
|
- this.listLoading = true
|
|
|
- this.listQuery.authId = this.authId
|
|
|
- try {
|
|
|
- const res = await getAuthUserList(this.listQuery)
|
|
|
- this.list = res.data.list
|
|
|
- this.total = res.data.total
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- } finally {
|
|
|
- this.listLoading = false
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 创建用户
|
|
|
- handleCreate() {
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
- // 修改用户
|
|
|
- handleEdit(row) {
|
|
|
- this.formData.clubUserId = row.clubUserId
|
|
|
- this.formData.authId = row.authId
|
|
|
- this.formData.name = row.name
|
|
|
- this.formData.mobile = row.mobile
|
|
|
- this.dialogVisible = true
|
|
|
- },
|
|
|
-
|
|
|
- // 保存用户信息
|
|
|
- async onSave() {
|
|
|
- let valide = false
|
|
|
- try {
|
|
|
- valide = await this.$refs.form.validate()
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
- if (!valide) return
|
|
|
-
|
|
|
- this.formData.authId = this.authId
|
|
|
- try {
|
|
|
- await createClubUser(this.formData)
|
|
|
- this.$message.success('添加用户成功')
|
|
|
- this.fetchUserList()
|
|
|
- this.dialogVisible = false
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
- },
|
|
|
- // 删除用户
|
|
|
- async handleRemove(row) {
|
|
|
- let confirmType = ''
|
|
|
- try {
|
|
|
- confirmType = await this.$confirm('确认删除改用户？', '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
-
|
|
|
- if (!confirmType) return
|
|
|
-
|
|
|
- try {
|
|
|
- await removeClubUser({ clubUserId: row.clubUserId })
|
|
|
- this.$message.success('删除用户成功')
|
|
|
- this.fetchUserList()
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onDialogClose() {
|
|
|
- this.$refs.form.resetFields()
|
|
|
- this.formData = resetFormData()
|
|
|
- },
|
|
|
-
|
|
|
- indexMethod(index) {
|
|
|
- return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.app-container {
|
|
|
- ::v-deep {
|
|
|
- .el-dialog__body {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.el-table .cell {
|
|
|
- overflow: visible;
|
|
|
-}
|
|
|
-.el-badge {
|
|
|
- margin: 0 6px;
|
|
|
-}
|
|
|
-</style>
|
yuwenjun1997