You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
7.1 KiB
280 lines
7.1 KiB
2 months ago
|
<template>
|
||
|
<view class="jnpf-pop-select">
|
||
|
|
||
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="true"
|
||
|
:down="downOption" :up="upOption">
|
||
|
<view class="search-box search-box_sticky">
|
||
|
<u-search placeholder="请输入关键词搜索" v-model="keyword" height="72" :show-action="false" @change="search"
|
||
|
bg-color="#f0f2f6" shape="square">
|
||
|
</u-search>
|
||
|
</view>
|
||
|
<view class="u-flex-col tableList">
|
||
|
<view class="u-flex list-card" v-for="(item,index) in list" :key="index">
|
||
|
<u-checkbox-group wrap @change="checkboxGroupChange(item,index)">
|
||
|
<u-checkbox v-model="item.checked">
|
||
|
<view class="u-flex-col fieldContent">
|
||
|
<view class="fieldList u-line-1 u-flex" v-for="(column,c) in addTableConf.columnOptions"
|
||
|
:key="c">
|
||
|
<view class="key">{{column.label+':'}}</view>
|
||
|
<view class="val">{{item[column.value]}}</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</u-checkbox>
|
||
|
</u-checkbox-group>
|
||
|
</view>
|
||
|
</view>
|
||
|
</mescroll-body>
|
||
|
<!-- 底部按钮 -->
|
||
|
<view class="flowBefore-actions">
|
||
|
<template>
|
||
|
<u-button class="buttom-btn" @click.stop="eventLauncher">
|
||
|
{{'取消'}}
|
||
|
</u-button>
|
||
|
<u-button class="buttom-btn" type="primary" @click.stop="eventLauncher">
|
||
|
{{'确定'}}
|
||
|
</u-button>
|
||
|
</template>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import {
|
||
|
getPopSelect
|
||
|
} from '@/api/common.js'
|
||
|
import resources from '@/libs/resources.js'
|
||
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
|
export default {
|
||
|
mixins: [MescrollMixin],
|
||
|
data() {
|
||
|
return {
|
||
|
downOption: {
|
||
|
use: true,
|
||
|
auto: true
|
||
|
},
|
||
|
upOption: {
|
||
|
page: {
|
||
|
num: 0,
|
||
|
size: 20,
|
||
|
time: null
|
||
|
},
|
||
|
empty: {
|
||
|
use: true,
|
||
|
icon: resources.message.nodata,
|
||
|
tip: "暂无数据",
|
||
|
fixed: true,
|
||
|
top: "300rpx",
|
||
|
},
|
||
|
textNoMore: '没有更多数据',
|
||
|
},
|
||
|
list: [],
|
||
|
type: '',
|
||
|
onLoadData: {},
|
||
|
keyword: '',
|
||
|
innerValue: '',
|
||
|
listQuery: {
|
||
|
keyword: '',
|
||
|
pageSize: 20
|
||
|
},
|
||
|
interfaceId: '',
|
||
|
cur: null,
|
||
|
firstVal: '',
|
||
|
firstId: 0,
|
||
|
selectId: "",
|
||
|
publicField: '',
|
||
|
selectItem: [],
|
||
|
addTableConf: {},
|
||
|
formData: {},
|
||
|
userInfo: {},
|
||
|
subVal: [],
|
||
|
keyword: '',
|
||
|
columnOptions: []
|
||
|
}
|
||
|
},
|
||
|
onLoad(e) {
|
||
|
this.userInfo = uni.getStorageSync('userInfo') || {}
|
||
|
this.onLoadData = JSON.parse(e.data);
|
||
|
this.addTableConf = this.onLoadData.addTableConf
|
||
|
this.addTableConf.columnOptions.filter(o => {
|
||
|
this.columnOptions.push(o.value)
|
||
|
})
|
||
|
uni.setNavigationBarTitle({
|
||
|
title: this.addTableConf.popupTitle
|
||
|
})
|
||
|
this.formData = this.onLoadData.formData
|
||
|
this.interfaceId = this.addTableConf.interfaceId
|
||
|
this.listQuery.pageSize = this.addTableConf.hasPage ? this.addTableConf.pageSize : 10000
|
||
|
uni.$on('refresh', () => {
|
||
|
this.list = [];
|
||
|
this.mescroll.resetUpScroll();
|
||
|
})
|
||
|
},
|
||
|
computed: {
|
||
|
paramList() {
|
||
|
return this.getParamList
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
getParamList() {
|
||
|
let templateJson = this.addTableConf.templateJson
|
||
|
for (let i = 0; i < templateJson.length; i++) {
|
||
|
templateJson[i].defaultValue = this.formData[templateJson[i].relationField] || ''
|
||
|
if (templateJson[i].jnpfKey === 'createUser') {
|
||
|
templateJson[i].defaultValue = this.userInfo.userId
|
||
|
}
|
||
|
if (templateJson[i].jnpfKey === 'createTime') {
|
||
|
templateJson[i].defaultValue = new Date().getTime()
|
||
|
}
|
||
|
if (templateJson[i].jnpfKey === 'currOrganize') {
|
||
|
templateJson[i].defaultValue = this.userInfo.organizeId
|
||
|
}
|
||
|
if (templateJson[i].jnpfKey === 'currPosition') {
|
||
|
templateJson[i].defaultValue = this.userInfo.positionIds && this.userInfo.positionIds.length ? this
|
||
|
.userInfo.positionIds[0] : ''
|
||
|
}
|
||
|
}
|
||
|
return templateJson
|
||
|
},
|
||
|
upCallback(page) {
|
||
|
let query = {
|
||
|
...this.listQuery,
|
||
|
currentPage: page.num,
|
||
|
interfaceId: this.interfaceId,
|
||
|
keyword: this.keyword,
|
||
|
paramList: this.paramList(),
|
||
|
columnOptions: this.columnOptions.join(',')
|
||
|
}
|
||
|
if (!this.interfaceId) return this.mescroll.endErr();
|
||
|
getPopSelect(this.interfaceId, query, {
|
||
|
load: page.num == 1
|
||
|
}).then(res => {
|
||
|
this.mescroll.endSuccess(res.data.list.length);
|
||
|
if (page.num == 1) this.list = [];
|
||
|
this.list = this.list.concat(res.data.list);
|
||
|
this.list = this.list.map((o, i) => ({
|
||
|
...o,
|
||
|
checked: false
|
||
|
}))
|
||
|
}).catch(() => {
|
||
|
this.mescroll.endErr();
|
||
|
})
|
||
|
},
|
||
|
search() {
|
||
|
// 节流,避免输入过快多次请求
|
||
|
this.searchTimer && clearTimeout(this.searchTimer)
|
||
|
this.searchTimer = setTimeout(() => {
|
||
|
this.list = [];
|
||
|
this.mescroll.resetUpScroll();
|
||
|
}, 300)
|
||
|
},
|
||
|
checkboxGroupChange(e, index) {
|
||
|
this.selectItem = this.list.filter(o => o.checked)
|
||
|
let subVal = []
|
||
|
for (let i = 0; i < this.selectItem.length; i++) {
|
||
|
const e = this.selectItem[i]
|
||
|
let item = {}
|
||
|
for (let j = 0; j < this.addTableConf.relationOptions.length; j++) {
|
||
|
let relationOptions = this.addTableConf.relationOptions[j]
|
||
|
item[relationOptions.field] = relationOptions.type == 1 ? e[relationOptions
|
||
|
.value
|
||
|
] : relationOptions.value
|
||
|
}
|
||
|
subVal.push(item)
|
||
|
}
|
||
|
this.subVal = subVal
|
||
|
},
|
||
|
interfaceDataHandler(data) {
|
||
|
if (!data.dataProcessing) return data.list
|
||
|
const dataHandler = this.jnpf.getScriptFunc(data.dataProcessing)
|
||
|
if (!dataHandler) return data.list
|
||
|
return dataHandler(data.list)
|
||
|
},
|
||
|
|
||
|
radioChange(item) {
|
||
|
this.selectId = item[this.publicField];
|
||
|
this.innerValue = item[this.onLoadData.relationField];
|
||
|
},
|
||
|
|
||
|
eventLauncher() {
|
||
|
uni.$emit('linkPageConfirm', this.subVal, this.onLoadData.tableVmodel)
|
||
|
uni.navigateBack();
|
||
|
},
|
||
|
search() {
|
||
|
// 节流,避免输入过快多次请求
|
||
|
this.searchTimer && clearTimeout(this.searchTimer)
|
||
|
this.searchTimer = setTimeout(() => {
|
||
|
this.list = [];
|
||
|
this.listQuery.keyword = this.keyword
|
||
|
this.listQuery.currentPage = 1
|
||
|
this.listQuery.pageSize = this.hasPage ? this.pageSize : 10000
|
||
|
this.mescroll.resetUpScroll();
|
||
|
}, 300)
|
||
|
},
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
page {
|
||
|
background-color: #f0f2f6;
|
||
|
}
|
||
|
|
||
|
.jnpf-pop-select {
|
||
|
width: 100%;
|
||
|
// height: 100%;
|
||
|
// margin-top: 20rpx;
|
||
|
padding-bottom: 90rpx;
|
||
|
|
||
|
.tableList {
|
||
|
overflow: hidden auto;
|
||
|
padding: 0 20rpx;
|
||
|
|
||
|
.list-card {
|
||
|
background-color: #fff;
|
||
|
width: 100%;
|
||
|
border-radius: 8rpx;
|
||
|
margin-top: 20rpx;
|
||
|
padding: 20rpx 20rpx;
|
||
|
align-items: flex-start;
|
||
|
|
||
|
.u-checkbox-group {
|
||
|
width: 100%;
|
||
|
|
||
|
.u-checkbox {
|
||
|
align-items: flex-start;
|
||
|
}
|
||
|
|
||
|
.u-checkbox__label {
|
||
|
.fieldContent {
|
||
|
width: 100%;
|
||
|
margin-top: -14rpx;
|
||
|
|
||
|
.fieldList {
|
||
|
width: 752rpx;
|
||
|
|
||
|
.key {
|
||
|
width: 136rpx;
|
||
|
margin-right: 10rpx;
|
||
|
text-align: right;
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
|
||
|
.val {
|
||
|
flex: 0.8;
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|