333 lines
9.5 KiB
Vue
333 lines
9.5 KiB
Vue
|
<template>
|
||
|
|
<view class="dynamicModel-list-v">
|
||
|
|
<view class="head-warp com-dropdown">
|
||
|
|
<u-dropdown class="u-dropdown" ref="uDropdown">
|
||
|
|
<u-dropdown-item title="筛选">
|
||
|
|
<view class="screen-box">
|
||
|
|
<view class="screen-list" v-if="showParser && columnCondition.length">
|
||
|
|
<view class="u-p-l-20 u-p-r-20 list">
|
||
|
|
<scroll-view scroll-y="true" style="height: 100%;">
|
||
|
|
<Parser :formConf="columnCondition" :searchFormData="searchFormData"
|
||
|
|
:webType="config.webType" ref="searchForm" @submit="sumbitSearchForm" />
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<JnpfEmpty v-else />
|
||
|
|
<view class="buttom-actions" v-if="showParser && columnCondition.length" style="z-index: 1;">
|
||
|
|
<u-button class="buttom-btn" @click="reset">{{$t('common.resetText')}}</u-button>
|
||
|
|
<u-button class="buttom-btn" type="primary"
|
||
|
|
@click="closeDropdown">{{$t('common.queryText')}}</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-dropdown-item>
|
||
|
|
</u-dropdown>
|
||
|
|
</view>
|
||
|
|
<view class="list-warp">
|
||
|
|
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
|
||
|
|
top="164">
|
||
|
|
<view class="list u-p-b-20 u-p-l-20 u-p-r-20" ref="tableRef">
|
||
|
|
<view class="list-box">
|
||
|
|
<uni-swipe-action ref="swipeAction">
|
||
|
|
<uni-swipe-action-item v-for="(item, index) in list" :key="item.id" :threshold="0"
|
||
|
|
:disabled="true">
|
||
|
|
<view class="item" @click="goDetail(item)">
|
||
|
|
<view class="item-cell" v-for="(column,i) in columnList" :key="i">
|
||
|
|
<template v-if="column.jnpfKey != 'table'">
|
||
|
|
<text class="item-cell-label">{{column.label}}:</text>
|
||
|
|
<text class="item-cell-content"
|
||
|
|
v-if="['calculate','inputNumber'].includes(column.jnpfKey)">
|
||
|
|
{{toThousands(item[column.prop],column)}}
|
||
|
|
</text>
|
||
|
|
<view class="item-cell-content" v-else-if="column.jnpfKey == 'sign'">
|
||
|
|
<JnpfSign v-model="item[column.prop]" align="left" detailed />
|
||
|
|
</view>
|
||
|
|
<view class="item-cell-content" v-else-if="column.jnpfKey == 'rate'">
|
||
|
|
<JnpfRate v-model="item[column.prop]" :count="column.count"
|
||
|
|
:allowHalf="column.allowHalf" disabled />
|
||
|
|
</view>
|
||
|
|
<view class="item-cell-content item-cell-slider"
|
||
|
|
v-else-if="column.jnpfKey == 'slider'">
|
||
|
|
<JnpfSlider v-model="item[column.prop]" :min="column.min"
|
||
|
|
:max="column.max" :step="column.step" disabled />
|
||
|
|
</view>
|
||
|
|
<view class="item-cell-content" v-else-if="column.jnpfKey == 'input'">
|
||
|
|
<JnpfInput v-model="item[column.prop]" detailed showOverflow
|
||
|
|
:useMask="column.useMask" :maskConfig="column.maskConfig"
|
||
|
|
align='left' />
|
||
|
|
</view>
|
||
|
|
<text class="item-cell-content" v-else>{{item[column.prop]}}</text>
|
||
|
|
</template>
|
||
|
|
<tableCell v-else @click.stop class="tableCell" ref="tableCell"
|
||
|
|
:label="column.label" :childList="item[column.prop]"
|
||
|
|
:children="column.children" :pageLen="3">
|
||
|
|
</tableCell>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-swipe-action-item>
|
||
|
|
</uni-swipe-action>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mescroll-uni>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import tableCell from '@/pages/apply/dynamicModel/components/tableCell.vue'
|
||
|
|
import resources from '@/libs/resources.js'
|
||
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
|
|
import Parser from '@/pages/apply/dynamicModel/components/parser/index.vue'
|
||
|
|
import {
|
||
|
|
listLink
|
||
|
|
} from '@/api/apply/webDesign'
|
||
|
|
export default {
|
||
|
|
mixins: [MescrollMixin],
|
||
|
|
props: ['config', 'modelId', 'columnCondition', 'columnText', 'encryption'],
|
||
|
|
components: {
|
||
|
|
Parser,
|
||
|
|
tableCell
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show: false,
|
||
|
|
upOption: {
|
||
|
|
page: {
|
||
|
|
num: 0,
|
||
|
|
size: 10,
|
||
|
|
time: null
|
||
|
|
},
|
||
|
|
empty: {
|
||
|
|
icon: resources.message.nodata,
|
||
|
|
tip: this.$t('common.noData'),
|
||
|
|
top: "300rpx"
|
||
|
|
},
|
||
|
|
textNoMore: this.$t('app.apply.noMoreData'),
|
||
|
|
toTop: {
|
||
|
|
bottom: 250
|
||
|
|
}
|
||
|
|
},
|
||
|
|
list: [],
|
||
|
|
listQuery: {
|
||
|
|
sidx: '',
|
||
|
|
keyword: '',
|
||
|
|
queryJson: ''
|
||
|
|
},
|
||
|
|
options: [{
|
||
|
|
text: '删除',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#dd524d'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
showParser: false,
|
||
|
|
columnList: {},
|
||
|
|
searchList: [],
|
||
|
|
searchFormConf: [],
|
||
|
|
searchFormData: {},
|
||
|
|
key: +new Date()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.init()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
this.columnList = this.transformColumnList(this.columnText)
|
||
|
|
this.columnList.map((o) => {
|
||
|
|
if (o.jnpfKey != 'table' && o.label.length > 4) {
|
||
|
|
o.label = o.label.substring(0, 4)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let config = JSON.parse(this.config.appColumnData)
|
||
|
|
this.setDefaultQuery(config.defaultSortConfig)
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.key = +new Date()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
setDefaultQuery(defaultSortList) {
|
||
|
|
const defaultSortConfig = (defaultSortList || []).map(o =>
|
||
|
|
(o.sort === 'desc' ? '-' : '') + o.field);
|
||
|
|
this.listQuery.sidx = defaultSortConfig.join(',')
|
||
|
|
},
|
||
|
|
toThousands(val, column) {
|
||
|
|
if (val) {
|
||
|
|
let valList = val.toString().split('.')
|
||
|
|
let num = Number(valList[0])
|
||
|
|
let newVal = column.thousands ? num.toLocaleString() : num
|
||
|
|
return valList[1] ? newVal + '.' + valList[1] : newVal
|
||
|
|
} else {
|
||
|
|
return val
|
||
|
|
}
|
||
|
|
},
|
||
|
|
transformColumnList(columnList) {
|
||
|
|
let list = []
|
||
|
|
for (let i = 0; i < columnList.length; i++) {
|
||
|
|
const e = columnList[i];
|
||
|
|
if (!e.prop.includes('-')) {
|
||
|
|
e.option = null
|
||
|
|
list.push(e)
|
||
|
|
} else {
|
||
|
|
let prop = e.prop.split('-')[0]
|
||
|
|
let vModel = e.prop.split('-')[1]
|
||
|
|
let label = e.label.split('-')[0]
|
||
|
|
let childLabel = e.label.replace(label + '-', '');
|
||
|
|
let newItem = {
|
||
|
|
align: "center",
|
||
|
|
jnpfKey: "table",
|
||
|
|
prop,
|
||
|
|
label,
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
e.vModel = vModel
|
||
|
|
e.childLabel = childLabel
|
||
|
|
if (!list.some(o => o.prop === prop)) list.push(newItem)
|
||
|
|
for (let i = 0; i < list.length; i++) {
|
||
|
|
if (list[i].prop === prop) {
|
||
|
|
e.option = null
|
||
|
|
list[i].children.push(e)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return list
|
||
|
|
},
|
||
|
|
upCallback(page) {
|
||
|
|
if (this.isPreview == '1') return this.mescroll.endSuccess(0, false);
|
||
|
|
const query = {
|
||
|
|
currentPage: page.num,
|
||
|
|
pageSize: page.size,
|
||
|
|
menuId: this.modelId,
|
||
|
|
...this.listQuery
|
||
|
|
}
|
||
|
|
listLink(this.modelId, query, this.encryption, {
|
||
|
|
load: page.num == 1
|
||
|
|
}, this.encryption).then(res => {
|
||
|
|
this.showParser = true
|
||
|
|
if (page.num == 1) this.list = [];
|
||
|
|
this.mescroll.endSuccess(res.data.list.length);
|
||
|
|
const list = res.data.list.map((o, i) => ({
|
||
|
|
show: false,
|
||
|
|
...o
|
||
|
|
}));
|
||
|
|
this.list = this.list.concat(list);
|
||
|
|
uni.$off('refresh')
|
||
|
|
}).catch((err) => {
|
||
|
|
this.mescroll.endByPage(0, 0);
|
||
|
|
this.mescroll.endErr();
|
||
|
|
uni.$off('refresh')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
goDetail(item) {
|
||
|
|
if (!item.id) return
|
||
|
|
let config = {
|
||
|
|
modelId: this.modelId,
|
||
|
|
id: item.id,
|
||
|
|
formTitle: '详情',
|
||
|
|
noShowBtn: 1,
|
||
|
|
encryption: this.encryption
|
||
|
|
}
|
||
|
|
this.$nextTick(() => {
|
||
|
|
const url = `./detail?config=${this.jnpf.base64.encode(JSON.stringify(config),"UTF-8")}`
|
||
|
|
uni.navigateTo({
|
||
|
|
url: url
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
reset() {
|
||
|
|
this.searchFormData = {}
|
||
|
|
const list = ['datePicker', 'timePicker', 'inputNumber', 'calculate', 'cascader', 'usersSelect']
|
||
|
|
for (let i = 0; i < this.searchList.length; i++) {
|
||
|
|
const item = this.searchList[i]
|
||
|
|
const config = item.__config__
|
||
|
|
let defaultValue = item.searchMultiple || list.includes(config.jnpfKey) ? [] : undefined
|
||
|
|
config.defaultValue = defaultValue
|
||
|
|
this.searchFormData[item.__vModel__] = defaultValue
|
||
|
|
}
|
||
|
|
this.searchFormConf = JSON.parse(JSON.stringify(this.searchList))
|
||
|
|
},
|
||
|
|
closeDropdown() {
|
||
|
|
if (this.isPreview == '1') return this.$u.toast('功能预览不支持检索')
|
||
|
|
this.$refs.searchForm && this.$refs.searchForm.submitForm()
|
||
|
|
},
|
||
|
|
fillFormData(list, data) {
|
||
|
|
for (let i = 0; i < list.length; i++) {
|
||
|
|
let item = list[i]
|
||
|
|
const val = data.hasOwnProperty(item.__vModel__) ? data[item.__vModel__] : item.__config__
|
||
|
|
.defaultValue
|
||
|
|
if (!item.__config__.custom && item.__config__.defaultCurrent && item.__config__
|
||
|
|
.jnpfKey === 'timePicker') val = this.jnpf.toDate(new Date(), item.format)
|
||
|
|
if (!item.__config__.custom && item.__config__.defaultCurrent && item.__config__
|
||
|
|
.jnpfKey === 'datePicker') val = new Date().getTime()
|
||
|
|
item.__config__.defaultValue = val
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sumbitSearchForm(data) {
|
||
|
|
const queryJson = data || {}
|
||
|
|
this.searchFormData = data
|
||
|
|
this.listQuery.queryJson = JSON.stringify(queryJson) !== '{}' ? JSON.stringify(queryJson) : ''
|
||
|
|
this.$refs.uDropdown.close();
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.list = [];
|
||
|
|
this.mescroll.resetUpScroll();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background-color: #f0f2f6;
|
||
|
|
height: 100%;
|
||
|
|
/* #ifdef MP-ALIPAY */
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
/* #endif */
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
padding: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notData-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding-bottom: 200rpx;
|
||
|
|
|
||
|
|
.notData-inner {
|
||
|
|
width: 280rpx;
|
||
|
|
height: 308rpx;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
|
||
|
|
.iconImg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notData-inner-text {
|
||
|
|
padding: 30rpx 0;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen-box {
|
||
|
|
background-color: #fff;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.screen-list {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.list {
|
||
|
|
height: calc(100% - 88rpx);
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|