<template>
|
<view class="main">
|
<view v-if="loaded">
|
<view class="uni-header">
|
<view class="uni-group">
|
<view class="uni-sub-title">当前应用：</view>
|
<view class="uni-title app-list">
|
<picker @change="(e) => showAppIndex = e.detail.value" :value="showAppIndex"
|
:range="appNameList">
|
<view class="uni-input" style="font-size: 14px;">
|
{{appNameList[showAppIndex]}}
|
<uni-icons type="bottom"></uni-icons>
|
</view>
|
</picker>
|
</view>
|
</view>
|
<view class="uni-group">
|
<input class="uni-search" type="text" v-model="query" @confirm="search" placeholder="请输入搜索内容" />
|
<button class="uni-button" type="default" size="mini" @click="search">搜索</button>
|
<button class="uni-button publish" type="primary" size="mini" @click="publish">发布新版</button>
|
<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
|
@click="delTable">批量删除</button>
|
</view>
|
</view>
|
<view class="uni-container">
|
<unicloud-db ref="udb" :collection="appVersionListDbName"
|
field="store_list,appid,contents,platform,type,version,min_uni_version,url,stable_publish,create_date,title,name"
|
: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">
|
<uni-table style="overflow-y: hidden;" :loading="loading" :emptyText="error.message || '没有更多数据'"
|
border stripe type="selection" @selection-change="selectionChange">
|
<uni-tr>
|
<uni-th align="center">AppID</uni-th>
|
<uni-th align="center">更新标题</uni-th>
|
<uni-th align="center">安装包类型</uni-th>
|
<uni-th align="center">平台</uni-th>
|
<uni-th align="center">已上架应用市场</uni-th>
|
<uni-th align="center">版本号</uni-th>
|
<uni-th align="center">安装包状态</uni-th>
|
<uni-th align="center">上传时间</uni-th>
|
<uni-th align="center">操作</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item,index) in data" :key="index" :disabled="item.stable_publish">
|
<uni-td align="center"> {{item.appid}} </uni-td>
|
<uni-td align="center"> {{item.title || '-'}} </uni-td>
|
<uni-td align="center">
|
<text :style="{
|
padding: '5px 8px',
|
backgroundColor: item.type === 'wgt' ? '#f0f9eb' : '#ecf5ff',
|
color: item.type === 'wgt' ? '#67c23a' : '#409eff',
|
border: `1px solid ${item.type === 'wgt' ? '#e1f3d8' : '#d9ecff'}`,
|
borderRadius: '4px'
|
}">{{options.type_valuetotext[item.type]}}</text>
|
</uni-td>
|
<uni-td align="center">
|
<uni-data-picker :localdata="options.platform_valuetotext" :value="item.platform"
|
:border="false" :readonly="true" split="," />
|
</uni-td>
|
<uni-td align="center">
|
<text>{{store_list_key(item.store_list)}}</text>
|
</uni-td>
|
<uni-td align="center"> {{item.version}} </uni-td>
|
<uni-td align="center"> {{item.stable_publish == true ? '已上线' : '已下线'}} </uni-td>
|
<uni-td align="center">
|
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="item.create_date"
|
:threshold="[0, 0]" />
|
</uni-td>
|
<uni-td align="center">
|
<button @click="navigateTo('./detail?id='+item._id, false)" class="uni-button" size="mini" type="primary">详情</button>
|
</uni-td>
|
</uni-tr>
|
</uni-table>
|
<view class="uni-pagination-box">
|
<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
|
:total="pagination.count" @change="onPageChanged" />
|
</view>
|
</unicloud-db>
|
</view>
|
</view>
|
<view v-else class="page-loading" :style="containerTop">
|
<i class="uni-icon_toast uni-loading"></i>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
enumConverter
|
} from '@/js_sdk/validator/opendb-app-versions.js';
|
import {
|
appListDbName,
|
appVersionListDbName,
|
defaultDisplayApp
|
} from '../utils.js'
|
import {
|
mapState
|
} from 'vuex'
|
|
const db = uniCloud.database()
|
const dbCmd = db.command
|
// 表查询配置
|
const dbOrderBy = 'stable_publish desc,create_date desc' // 排序字段
|
const dbSearchFields = ['name', 'title', 'stable_publish', 'type'] // 模糊搜索字段，支持模糊搜索的字段列表
|
// 分页配置
|
const pageSize = 20
|
const pageCurrent = 1
|
|
const appidKey = '__app_version_appid'
|
const nameKey = '__app_version_name'
|
|
function getScreenHeight() {
|
return document.documentElement ? document.documentElement.clientHeight : window.innerHeight;
|
}
|
|
function createListQuery(condition = {}) {
|
return {
|
create_env: dbCmd.neq("uni-stat"),
|
...condition
|
}
|
}
|
|
export default {
|
data() {
|
return {
|
backButtonHover: false,
|
appVersionListDbName,
|
currentAppid: '',
|
currentAppName: '',
|
query: '',
|
where: '',
|
orderby: dbOrderBy,
|
selectedIndexs: [],
|
options: {
|
pageSize,
|
pageCurrent,
|
...enumConverter
|
},
|
imageStyles: {
|
width: 64,
|
height: 64
|
},
|
loaded: false,
|
containerTop: {},
|
appList: [],
|
showAppIndex: 0
|
}
|
},
|
async onLoad({
|
appid
|
}) {
|
await this.getAppList()
|
if (!this.appList.length) {
|
this.showModalToAppManager()
|
return
|
}
|
this.loaded = true
|
|
this.appList.forEach((item, index) => {
|
if (item.appid === appid || defaultDisplayApp) {
|
this.showAppIndex = index
|
}
|
})
|
this.setAppInfo(this.showAppIndex)
|
this.where = createListQuery({
|
appid: this.currentAppid
|
})
|
},
|
computed: {
|
...mapState('app', ['appid']),
|
appNameList() {
|
return this.appList.map(item => item.name)
|
}
|
},
|
watch: {
|
showAppIndex(val) {
|
this.setAppInfo(val)
|
|
this.where = createListQuery({
|
appid: this.currentAppid
|
})
|
}
|
},
|
onReady() {
|
this.containerTop.height = `${getScreenHeight()}px`
|
},
|
methods: {
|
setAppInfo(index) {
|
this.currentAppid = this.appList[index].appid
|
this.currentAppName = this.appList[index].name
|
},
|
navigateBack() {
|
uni.navigateBack()
|
},
|
getWhere() {
|
const query = this.query.trim()
|
if (!query) {
|
return ''
|
}
|
const queryRe = new RegExp(query, 'i')
|
return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
|
},
|
search() {
|
const newWhere = this.getWhere()
|
const isSameWhere = newWhere === this.where
|
this.where = newWhere
|
if (this.where) {
|
this.where = `(${this.where}) && `
|
}
|
this.where += `${new RegExp(this.currentAppid, 'i')}.test(appid)`
|
if (isSameWhere) { // 相同条件时，手动强制刷新
|
this.loadData()
|
}
|
},
|
loadData(clear = true) {
|
this.$refs.udb.loadData({
|
clear
|
})
|
},
|
onPageChanged(e) {
|
this.$refs.udb.loadData({
|
current: e.current
|
})
|
},
|
navigateTo(url, clear) {
|
// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
|
uni.navigateTo({
|
url,
|
events: {
|
refreshData: () => {
|
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())
|
},
|
// 多选
|
selectionChange(e) {
|
this.selectedIndexs = e.detail.index
|
},
|
confirmDelete(id) {
|
this.$refs.udb.remove(id)
|
},
|
publish(e) {
|
// #ifdef H5
|
const {
|
top,
|
left,
|
width,
|
height
|
} = document.querySelector('.uni-button.publish').getBoundingClientRect()
|
// #endif
|
|
const platforms = Object.keys(this.options.type_valuetotext)
|
uni.showActionSheet({
|
itemList: Object.values(this.options.type_valuetotext),
|
// #ifdef H5
|
popover: {
|
top: top + height,
|
left,
|
width
|
},
|
// #endif
|
success: async (res) => {
|
this.navigateTo(
|
`./add?appid=${this.currentAppid}&name=${this.currentAppName}&type=${platforms[res.tapIndex]}`
|
)
|
}
|
});
|
},
|
async getAppList() {
|
try {
|
const {
|
result
|
} = await db.collection(appListDbName).get()
|
if (result && result.data && result.data.length > 0) {
|
this.appList = result.data.filter(item => item.appid !== this.appid)
|
} else {
|
this.showModalToAppManager()
|
}
|
} catch (e) {
|
const arr = ['TOKEN_INVALID_TOKEN_EXPIRED', 'TOKEN_INVALID_ANONYMOUS_USER']
|
if (arr.indexOf(e.code) === -1)
|
this.showModalToAppManager()
|
}
|
},
|
showModalToAppManager() {
|
let timer = null
|
let second = 3
|
|
function jump() {
|
uni.navigateTo({
|
url: '/pages/system/app/list'
|
})
|
clearInterval(timer)
|
}
|
|
timer = setInterval(() => {
|
if (--second <= 0) {
|
jump()
|
}
|
}, 1000)
|
|
uni.showModal({
|
title: '请先添加应用',
|
content: '即将跳转至应用管理……',
|
showCancel: false,
|
confirmText: '立即跳转',
|
success: (res) => jump()
|
})
|
},
|
store_list_key(store_list) {
|
const arr = store_list ? store_list.filter(item => item.enable) : []
|
return arr.length ?
|
arr.sort((a, b) => b.priority - a.priority)
|
.map(item => item.name).join(',') :
|
'-'
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.page-loading {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
flex: 1;
|
|
i {
|
$icon-size: 80rpx;
|
width: $icon-size;
|
height: $icon-size;
|
}
|
}
|
|
page,
|
page .main,
|
.page-loading {
|
height: 100%;
|
}
|
|
.app-list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 5px 10px;
|
border-radius: 4px;
|
border: 1px solid #2e76ba;
|
color: #3A8EE6;
|
|
uni-text {
|
margin-left: 10px;
|
}
|
}
|
</style>
|
