效果如下
<uni-popup ref="bankListAll" type="dialog">
<ty-mutiple-select
:multiple="false"
v-model="selectedBank"
:selectData="bankListAll"
:duration="2000"
:before-close="true"
@change="mutiple\_select\_change"
@close="close\_bank\_list"
@confirm="selectedBankConfirm"
title="请选择题库"
type="input"
mode="input" >
</ty-mutiple-select>
</uni-popup>
<listBar :list="bankList" :select\_item="selectedBank" @click\_item="click\_bar" :is\_more="isBankListMore" />
click\_bar(item) {
if(item === 'more') {
uni.showLoading({
title:'正在加载...'
});
getBankList({type: 'all'})
.then(({data}) => {
this.$refs.bankListAll.open()
this.bankListAll = \[\]
data.map(item => {
this.bankListAll.push({
value: item.id,
label: item.name
})
})
})
.finally(() => {
uni.hideLoading();
});
}else{
this.selectedBank = item
}
},
mutiple\_select\_change: function({detail}) {
this.selectedBank = detail.data
},
//组件一
//组件二
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list': true,'is-wrap':true}" @change="chagne">
<label class="checklist-box" :class="item.labelClass" :style="\[item.styleBackgroud\]" v-for="(item,index) in dataList"
:key="index">
<checkbox class="hidden" hidden :value="item.value+''" :checked="item.selected" />
<view class="checkbox\_\_inner"
:class="item.checkboxBgClass" :style="\[item.styleIcon\]">
<view class="checkbox\_\_inner-icon" :class="item.checkboxClass"></view>
</view>
<view class="checklist-content list-content">
<text class="checklist-text" :class="item.textClass" :style="\[item.styleIconText\]">{{item.label}}</text>
<view v-if="icon === 'right'" class="checkobx\_\_list" :class="item.listClass" :style="\[item.styleBackgroud\]"></view>
</view>
</label>
</checkbox-group>
<radio-group v-else class="checklist-group is-list is-wrap" @change="chagne">
<label v-for="(item,index) in dataList" :key="index" class="checklist-box" :class="item.labelClass" :style="\[item.styleBackgroud\]">
<radio hidden :disabled="item.disabled" :value="item.value+''" :checked="item.selected" />
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio\_\_inner"
:class="item.checkboxBgClass" :style="\[item.styleBackgroud\]">
<view class="radio\_\_inner-icon" :class="item.checkboxClass" :style="\[item.styleIcon\]"></view>
</view>
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
<text class="checklist-text" :class="item.textClass" :style="\[item.styleIconText\]">{{item.label}}</text>
<view v-if="mode === 'list' && icon === 'right'" class="checkobx\_\_list" :class="item.listClass" :style="\[item.styleRightIcon\]"></view>
</view>
</label>
</radio-group>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="close">
<text class="uni-dialog-button-text">取消</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">确定</text>
</view>
</view>
</view>
//cilentDb
const events = {
load: 'load',
error: 'error'
}
const pageMode = {
add: 'add',
replace: 'replace'
}
const attrs = [
'pageCurrent',
'pageSize',
'collection',
'action',
'field',
'getcount',
'orderby',
'where'
]
export default {
data() {
return {
loading: false,
listData: this.getone ? {} : [],
paginationInternal: {
current: this.pageCurrent,
size: this.pageSize,
count: 0
},
errorMessage: ''
}
},
created() {
let db = null;
let dbCmd = null;
if(this.collection){
this.db = uniCloud.database();
this.dbCmd = this.db.command;
}
this.\_isEnded = false
this.$watch(() => {
var al = \[\]
attrs.forEach(key => {
al.push(this\[key\])
})
return al
}, (newValue, oldValue) => {
this.paginationInternal.pageSize = this.pageSize
let needReset = false
for (let i = 2; i < newValue.length; i++) {
if (newValue\[i\] != oldValue\[i\]) {
needReset = true
break
}
}
if (needReset) {
this.clear()
this.reset()
}
if (newValue\[0\] != oldValue\[0\]) {
this.paginationInternal.current = this.pageCurrent
}
this.\_execLoadData()
})
// #ifdef H5
if (process.env.NODE\_ENV === 'development') {
this.\_debugDataList = \[\]
if (!window.unidev) {
window.unidev = {
clientDB: {
data: \[\]
}
}
}
unidev.clientDB.data.push(this.\_debugDataList)
}
// #endif
// #ifdef MP-TOUTIAO
let changeName
let events = this.$scope.dataset.eventOpts
for (var i = 0; i < events.length; i++) {
let event = events\[i\]
if (event\[0\].includes('^load')) {
changeName = event\[1\]\[0\]\[0\]
}
}
if (changeName) {
let parent = this.$parent
let maxDepth = 16
this.\_changeDataFunction = null
while (parent && maxDepth > 0) {
let fun = parent\[changeName\]
if (fun && typeof fun === 'function') {
this.\_changeDataFunction = fun
maxDepth = 0
break
}
parent = parent.$parent
maxDepth--;
}
}
// #endif
// if (!this.manual) {
// this.loadData()
// }
},
// #ifdef H5
beforeDestroy() {
if (process.env.NODE\_ENV === 'development' && window.unidev) {
var cd = this.\_debugDataList
var dl = unidev.clientDB.data
for (var i = dl.length - 1; i >= 0; i--) {
if (dl\[i\] === cd) {
dl.splice(i, 1)
break
}
}
}
},
// #endif
methods: {
loadData(args1, args2) {
let callback = null
if (typeof args1 === 'object') {
if (args1.clear) {
this.clear()
this.reset()
}
if (args1.current !== undefined) {
this.paginationInternal.current = args1.current
}
if (typeof args2 === 'function') {
callback = args2
}
} else if (typeof args1 === 'function') {
callback = args1
}
this.\_execLoadData(callback)
},
loadMore() {
if (this.\_isEnded) {
return
}
this.\_execLoadData()
},
refresh() {
this.clear()
this.\_execLoadData()
},
clear() {
this.\_isEnded = false
this.listData = \[\]
},
reset() {
this.paginationInternal.current = 1
},
remove(id, {
action,
callback,
confirmTitle,
confirmContent
} = {}) {
if (!id || !id.length) {
return
}
uni.showModal({
title: confirmTitle || '提示',
content: confirmContent || '是否删除该数据',
showCancel: true,
success: (res) => {
if (!res.confirm) {
return
}
this.\_execRemove(id, action, callback)
}
})
},
\_execLoadData(callback) {
if (this.loading) {
return
}
this.loading = true
this.errorMessage = ''
this.\_getExec().then((res) => {
this.loading = false
const {
data,
count
} = res.result
this.\_isEnded = data.length < this.pageSize
callback && callback(data, this.\_isEnded)
this.\_dispatchEvent(events.load, data)
if (this.getone) {
this.listData = data.length ? data\[0\] : undefined
} else if (this.pageData === pageMode.add) {
this.listData.push(...data)
if (this.listData.length) {
this.paginationInternal.current++
}
} else if (this.pageData === pageMode.replace) {
this.listData = data
this.paginationInternal.count = count
}
// #ifdef H5
if (process.env.NODE\_ENV === 'development') {
this.\_debugDataList.length = 0
this.\_debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
}
// #endif
}).catch((err) => {
this.loading = false
this.errorMessage = err
callback && callback()
this.$emit(events.error, err)
})
},
\_getExec() {
let exec = this.db
if (this.action) {
exec = exec.action(this.action)
}
exec = exec.collection(this.collection)
if (!(!this.where || !Object.keys(this.where).length)) {
exec = exec.where(this.where)
}
if (this.field) {
exec = exec.field(this.field)
}
if (this.orderby) {
exec = exec.orderBy(this.orderby)
}
const {
current,
size
} = this.paginationInternal
exec = exec.skip(size \* (current - 1)).limit(size).get({
getCount: this.getcount
})
return exec
},
\_execRemove(id, action, callback) {
if (!this.collection || !id) {
return
}
const ids = Array.isArray(id) ? id : \[id\]
if (!ids.length) {
return
}
uni.showLoading({
mask: true
})
let exec = this.db
if (action) {
exec = exec.action(action)
}
exec.collection(this.collection).where({
\_id: dbCmd.in(ids)
}).remove().then((res) => {
callback && callback(res.result)
if (this.pageData === pageMode.replace) {
this.refresh()
} else {
this.removeData(ids)
}
}).catch((err) => {
uni.showModal({
content: err.message,
showCancel: false
})
}).finally(() => {
uni.hideLoading()
})
},
removeData(ids) {
let il = ids.slice(0)
let dl = this.listData
for (let i = dl.length - 1; i >= 0; i--) {
let index = il.indexOf(dl\[i\].\_id)
if (index >= 0) {
dl.splice(i, 1)
il.splice(index, 1)
}
}
},
\_dispatchEvent(type, data) {
if (this.\_changeDataFunction) {
this.\_changeDataFunction(data, this.\_isEnded)
} else {
this.$emit(type, data, this.\_isEnded)
}
}
}
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章