463 lines
14 KiB
Vue
463 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="fix-top-window">
|
|||
|
|
<view class="uni-header">
|
|||
|
|
<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
|
|||
|
|
<view class="uni-group">
|
|||
|
|
<input class="uni-search" type="text" v-model="query" @confirm="search"
|
|||
|
|
:placeholder="$t('common.placeholder.query')" />
|
|||
|
|
<button class="uni-button hide-on-phone" type="default" size="mini"
|
|||
|
|
@click="search">{{$t('common.button.search')}}</button>
|
|||
|
|
<button class="uni-button" type="primary" size="mini"
|
|||
|
|
@click="navigateTo('./add')">{{$t('common.button.add')}}</button>
|
|||
|
|
<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
|
|||
|
|
@click="delTable">{{$t('common.button.batchDelete')}}</button>
|
|||
|
|
<button class="uni-button" type="primary" size="mini" :disabled="!selectedIndexs.length"
|
|||
|
|
@click="openTagsPopup">{{$t('common.button.tagManager')}}</button>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<button class="uni-button" type="primary" size="mini" @click="$refs.batchSms.open()">{{$t('common.button.sendSMS')}}</button>
|
|||
|
|
<download-excel class="hide-on-phone" :fields="exportExcel.fields" :data="exportExcelData"
|
|||
|
|
:type="exportExcel.type" :name="exportExcel.filename">
|
|||
|
|
<button class="uni-button" type="primary" size="mini">{{$t('common.button.exportExcel')}}</button>
|
|||
|
|
</download-excel>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="uni-container">
|
|||
|
|
<unicloud-db ref="udb" :collection="collectionList" :where="where"
|
|||
|
|
page-data="replace" :orderby="orderby" :getcount="true" :page-size="options.pageSize"
|
|||
|
|
:page-current="options.pageCurrent" v-slot:default="{ data, pagination, loading, error, options }"
|
|||
|
|
:options="options" loadtime="manual" @load="onqueryload">
|
|||
|
|
<uni-table ref="table" :loading="loading" :emptyText="error.message || $t('common.empty')" border stripe
|
|||
|
|
type="selection" @selection-change="selectionChange">
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'username')"
|
|||
|
|
sortable @sort-change="sortChange($event, 'username')">用户名</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'nickname')"
|
|||
|
|
sortable @sort-change="sortChange($event, 'nickname')">用户昵称</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'mobile')"
|
|||
|
|
sortable @sort-change="sortChange($event, 'mobile')">手机号码</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="select" :filter-data="options.filterData.status_localdata"
|
|||
|
|
@filter-change="filterChange($event, 'status')">用户状态</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'email')"
|
|||
|
|
sortable @sort-change="sortChange($event, 'email')">邮箱</uni-th>
|
|||
|
|
<uni-th align="center">角色</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="select" :filter-data="tagsData"
|
|||
|
|
@filter-change="filterChange($event, 'tags')">用户标签</uni-th>
|
|||
|
|
<uni-th align="center">可登录应用</uni-th>
|
|||
|
|
<uni-th align="center" filter-type="timestamp"
|
|||
|
|
@filter-change="filterChange($event, 'last_login_date')" sortable
|
|||
|
|
@sort-change="sortChange($event, 'last_login_date')">最后登录时间</uni-th>
|
|||
|
|
<uni-th align="center">操作</uni-th>
|
|||
|
|
</uni-tr>
|
|||
|
|
<uni-tr v-for="(item,index) in data" :key="index">
|
|||
|
|
<uni-td align="center">{{item.username}}</uni-td>
|
|||
|
|
<uni-td align="center">{{item.nickname}}</uni-td>
|
|||
|
|
<uni-td align="center">{{item.mobile}}</uni-td>
|
|||
|
|
<uni-td align="center">{{options.status_valuetotext[item.status]}}</uni-td>
|
|||
|
|
<uni-td align="center">
|
|||
|
|
<uni-link :href="'mailto:' + item.email" :text="item.email"></uni-link>
|
|||
|
|
</uni-td>
|
|||
|
|
<uni-td align="center"> {{ item.role }}</uni-td>
|
|||
|
|
<uni-td align="center">
|
|||
|
|
<block v-for="(tag,tagIndex) in item.tags" :key="tagIndex">
|
|||
|
|
<uni-tag type="primary" inverted size="small" :text="tag" v-if="item.tags" style="margin: 0 5px;"></uni-tag>
|
|||
|
|
</block>
|
|||
|
|
</uni-td>
|
|||
|
|
<uni-td align="center">
|
|||
|
|
<uni-link v-if="item.dcloud_appid === undefined" :href="noAppidWhatShouldIDoLink">
|
|||
|
|
未绑定可登录应用<view class="uni-icons-help"></view>
|
|||
|
|
</uni-link>
|
|||
|
|
{{ item.dcloud_appid }}
|
|||
|
|
</uni-td>
|
|||
|
|
<uni-td align="center">
|
|||
|
|
<uni-dateformat :threshold="[0, 0]" :date="item.last_login_date"></uni-dateformat>
|
|||
|
|
</uni-td>
|
|||
|
|
<uni-td align="center">
|
|||
|
|
<view class="uni-group">
|
|||
|
|
<button @click="navigateTo('./edit?id=' + item._id, false)" class="uni-button" size="mini"
|
|||
|
|
type="primary">{{ $t('common.button.edit') }}</button>
|
|||
|
|
<button @click="confirmDelete(item._id)" class="uni-button" size="mini"
|
|||
|
|
type="warn">{{ $t('common.button.delete') }}</button>
|
|||
|
|
</view>
|
|||
|
|
</uni-td>
|
|||
|
|
</uni-tr>
|
|||
|
|
</uni-table>
|
|||
|
|
<view class="uni-pagination-box">
|
|||
|
|
<uni-pagination show-iconn show-page-size :page-size="pagination.size" v-model="pagination.current"
|
|||
|
|
:total="pagination.count" @change="onPageChanged" @pageSizeChange="changeSize" />
|
|||
|
|
</view>
|
|||
|
|
</unicloud-db>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<fix-window />
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<uni-popup ref="tagsPopup" type="center">
|
|||
|
|
<view class="tags-manager--x">
|
|||
|
|
<view class="tags-manager--header mb">管理标签</view>
|
|||
|
|
<uni-data-checkbox ref="checkbox" v-model="managerTags" class="mb ml" :multiple="true"
|
|||
|
|
collection="uni-id-tag" field="tagid as value, name as text"></uni-data-checkbox>
|
|||
|
|
<view class="uni-group">
|
|||
|
|
<button @click="managerMultiTag" class="uni-button" type="primary"
|
|||
|
|
style="margin-right: 75px;">保存</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<batch-sms ref="batchSms" toType="user" :receiver="smsReceiver" :condition="smsCondition"></batch-sms>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
enumConverter,
|
|||
|
|
filterToWhere
|
|||
|
|
} from '../../../js_sdk/validator/uni-id-users.js';
|
|||
|
|
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms";
|
|||
|
|
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item";
|
|||
|
|
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput";
|
|||
|
|
|
|||
|
|
const db = uniCloud.database()
|
|||
|
|
// 表查询配置
|
|||
|
|
const dbOrderBy = 'last_login_date desc' // 排序字段
|
|||
|
|
const dbSearchFields = ['username', 'role.role_name', 'mobile', 'email'] // 支持模糊搜索的字段列表
|
|||
|
|
// 分页配置
|
|||
|
|
const pageSize = 20
|
|||
|
|
const pageCurrent = 1
|
|||
|
|
|
|||
|
|
const orderByMapping = {
|
|||
|
|
"ascending": "asc",
|
|||
|
|
"descending": "desc"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
collectionList: [ db.collection('uni-id-users').field('ali_openid,apple_openid,avatar,avatar_file,comment,dcloud_appid,department_id,email,email_confirmed,gender,invite_time,inviter_uid,last_login_date,last_login_ip,mobile,mobile_confirmed,my_invite_code,nickname,role,score,status,username,wx_unionid,qq_unionid,tags').getTemp(),db.collection('uni-id-roles').field('role_id, role_name').getTemp() ],
|
|||
|
|
query: '',
|
|||
|
|
where: '',
|
|||
|
|
orderby: dbOrderBy,
|
|||
|
|
orderByFieldName: "",
|
|||
|
|
selectedIndexs: [],
|
|||
|
|
pageSizeIndex: 0,
|
|||
|
|
pageSizeOption: [20, 50, 100, 500],
|
|||
|
|
tags: {},
|
|||
|
|
managerTags: [],
|
|||
|
|
queryTagid: '',
|
|||
|
|
queryUserId: '',
|
|||
|
|
options: {
|
|||
|
|
pageSize,
|
|||
|
|
pageCurrent,
|
|||
|
|
filterData: {
|
|||
|
|
"status_localdata": [{
|
|||
|
|
"text": "正常",
|
|||
|
|
"value": 0,
|
|||
|
|
"checked": true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"text": "禁用",
|
|||
|
|
"value": 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"text": "审核中",
|
|||
|
|
"value": 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"text": "审核拒绝",
|
|||
|
|
"value": 3
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
...enumConverter
|
|||
|
|
},
|
|||
|
|
imageStyles: {
|
|||
|
|
width: 64,
|
|||
|
|
height: 64
|
|||
|
|
},
|
|||
|
|
exportExcel: {
|
|||
|
|
"filename": "uni-id-users.xls",
|
|||
|
|
"type": "xls",
|
|||
|
|
"fields": {
|
|||
|
|
"用户名": "username",
|
|||
|
|
"手机号码": "mobile",
|
|||
|
|
"用户状态": "status",
|
|||
|
|
"邮箱": "email",
|
|||
|
|
"角色": "role",
|
|||
|
|
"last_login_date": "last_login_date"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
exportExcelData: [],
|
|||
|
|
noAppidWhatShouldIDoLink: 'https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=makeup-dcloud-appid',
|
|||
|
|
smsCondition: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this._filter = {}
|
|||
|
|
const tagid = e.tagid
|
|||
|
|
const userId = e.id
|
|||
|
|
|
|||
|
|
if (tagid) {
|
|||
|
|
this.queryTagid = tagid
|
|||
|
|
const options = {
|
|||
|
|
filterType: "select",
|
|||
|
|
filter: [tagid]
|
|||
|
|
}
|
|||
|
|
this.filterChange(options, "tags")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (userId) {
|
|||
|
|
this.queryUserId = userId
|
|||
|
|
const options = {
|
|||
|
|
filterType: "select",
|
|||
|
|
filter: [userId]
|
|||
|
|
}
|
|||
|
|
this.filterChange(options, "_id")
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.loadTags()
|
|||
|
|
if (!this.queryTagid && !this.queryUserId) {
|
|||
|
|
this.$refs.udb.loadData()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
tagsData() {
|
|||
|
|
const dynamic_data = []
|
|||
|
|
for (const key in this.tags) {
|
|||
|
|
const tag = {
|
|||
|
|
value: key,
|
|||
|
|
text: this.tags[key]
|
|||
|
|
}
|
|||
|
|
if (key === this.queryTagid) {
|
|||
|
|
tag.checked = true
|
|||
|
|
}
|
|||
|
|
dynamic_data.push(tag)
|
|||
|
|
}
|
|||
|
|
return dynamic_data
|
|||
|
|
},
|
|||
|
|
smsReceiver() {
|
|||
|
|
if (this.selectedIndexs.length) {
|
|||
|
|
let dataList = this.$refs.udb.dataList
|
|||
|
|
return this.selectedIndexs.map(i => dataList[i]._id)
|
|||
|
|
} else {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onqueryload(data) {
|
|||
|
|
for (let i = 0; i < data.length; i++) {
|
|||
|
|
let item = data[i]
|
|||
|
|
const roleArr = item.role.map(item => item.role_name)
|
|||
|
|
item.role = roleArr.join('、')
|
|||
|
|
const tagsArr = item.tags && item.tags.map(item => this.tags[item])
|
|||
|
|
item.tags = tagsArr
|
|||
|
|
if (Array.isArray(item.dcloud_appid)) {
|
|||
|
|
item.dcloud_appid = item.dcloud_appid.join('、')
|
|||
|
|
}
|
|||
|
|
item.last_login_date = this.$formatDate(item.last_login_date)
|
|||
|
|
}
|
|||
|
|
this.exportExcelData = data
|
|||
|
|
},
|
|||
|
|
changeSize(pageSize) {
|
|||
|
|
this.options.pageSize = pageSize
|
|||
|
|
this.options.pageCurrent = 1
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.loadData()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openTagsPopup() {
|
|||
|
|
this.$refs.tagsPopup.open()
|
|||
|
|
},
|
|||
|
|
closeTagsPopup() {
|
|||
|
|
this.$refs.tagsPopup.close()
|
|||
|
|
},
|
|||
|
|
getWhere() {
|
|||
|
|
const query = this.query.trim()
|
|||
|
|
if (!query) {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
const queryRe = new RegExp(query, 'i')
|
|||
|
|
|
|||
|
|
console.log(
|
|||
|
|
JSON.stringify(
|
|||
|
|
db.command.or(
|
|||
|
|
dbSearchFields.map(name => {
|
|||
|
|
return {
|
|||
|
|
[name]: queryRe
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return db.command.or(
|
|||
|
|
dbSearchFields.map(name => {
|
|||
|
|
return {
|
|||
|
|
[name]: queryRe
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
const newWhere = this.getWhere()
|
|||
|
|
|
|||
|
|
this.where = newWhere
|
|||
|
|
// 下一帧拿到查询条件
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.loadData()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loadData(clear = true) {
|
|||
|
|
this.$refs.udb.loadData({
|
|||
|
|
clear
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onPageChanged(e) {
|
|||
|
|
this.selectedIndexs.length = 0
|
|||
|
|
this.$refs.table.clearSelection()
|
|||
|
|
this.$refs.udb.loadData({
|
|||
|
|
current: e.current
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
navigateTo(url, clear) {
|
|||
|
|
// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url,
|
|||
|
|
events: {
|
|||
|
|
refreshData: () => {
|
|||
|
|
this.loadTags()
|
|||
|
|
this.loadData(clear)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 多选处理
|
|||
|
|
selectedItems() {
|
|||
|
|
let dataList = this.$refs.udb.dataList
|
|||
|
|
return this.selectedIndexs.map(i => dataList[i]._id)
|
|||
|
|
},
|
|||
|
|
// 批量删除
|
|||
|
|
delTable() {
|
|||
|
|
this.$refs.udb.remove(this.selectedItems(), {
|
|||
|
|
success: (res) => {
|
|||
|
|
this.$refs.table.clearSelection()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 多选
|
|||
|
|
selectionChange(e) {
|
|||
|
|
this.selectedIndexs = e.detail.index
|
|||
|
|
},
|
|||
|
|
confirmDelete(id) {
|
|||
|
|
this.$refs.udb.remove(id, {
|
|||
|
|
success: (res) => {
|
|||
|
|
this.$refs.table.clearSelection()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
sortChange(e, name) {
|
|||
|
|
this.orderByFieldName = name;
|
|||
|
|
if (e.order) {
|
|||
|
|
this.orderby = name + ' ' + orderByMapping[e.order]
|
|||
|
|
} else {
|
|||
|
|
this.orderby = ''
|
|||
|
|
}
|
|||
|
|
this.$refs.table.clearSelection()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.udb.loadData()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
filterChange(e, name) {
|
|||
|
|
this._filter[name] = {
|
|||
|
|
type: e.filterType,
|
|||
|
|
value: e.filter
|
|||
|
|
}
|
|||
|
|
let newWhere = filterToWhere(this._filter, db.command)
|
|||
|
|
|
|||
|
|
if (Object.keys(newWhere).length) {
|
|||
|
|
this.where = newWhere
|
|||
|
|
} else {
|
|||
|
|
this.where = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// uni-sms-co
|
|||
|
|
if (Object.keys(this._filter).length) {
|
|||
|
|
this.smsCondition = this._filter
|
|||
|
|
} else {
|
|||
|
|
this.smsCondition = {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.$refs.udb.loadData()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loadTags() {
|
|||
|
|
db.collection('uni-id-tag').limit(500).get().then(res => {
|
|||
|
|
res.result.data.map(item => {
|
|||
|
|
this.$set(this.tags, item.tagid, item.name)
|
|||
|
|
})
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: err.message,
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
managerMultiTag() {
|
|||
|
|
const ids = this.selectedItems()
|
|||
|
|
|
|||
|
|
db.collection('uni-id-users').where({
|
|||
|
|
_id: db.command.in(ids)
|
|||
|
|
}).update({
|
|||
|
|
tags: this.managerTags
|
|||
|
|
}).then(() => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '修改标签成功',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
this.$refs.table.clearSelection()
|
|||
|
|
this.managerTags = []
|
|||
|
|
this.loadData()
|
|||
|
|
this.closeTagsPopup()
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.showModal({
|
|||
|
|
content: err.message || '请求服务失败',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
}).finally(err => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.tags-manager {
|
|||
|
|
|
|||
|
|
&--x {
|
|||
|
|
width: 400px;
|
|||
|
|
padding: 40px 30px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--header {
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb {
|
|||
|
|
margin-bottom: 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ml {
|
|||
|
|
margin-left: 30px;
|
|||
|
|
}
|
|||
|
|
</style>
|