初始提交
This commit is contained in:
296
pages/formShortLink/detail.vue
Normal file
296
pages/formShortLink/detail.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="dynamicModel-form-v jnpf-wrap jnpf-wrap-form" v-if="showPage">
|
||||
<uni-nav-bar class='nav' :fixed="true" :statusBar="true" :border="false" height="44">
|
||||
<view class="nav-left">
|
||||
<view class="nav-left-text">详情</view>
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<Parser :formConf="formConf" :formValue="formData" ref="dynamicForm" v-if="!loading" :key="key"
|
||||
@toDetail="toDetail" />
|
||||
<view class="buttom-actions">
|
||||
<u-button class="buttom-btn" @click.stop="jnpf.goBack">取消</u-button>
|
||||
<u-button class="buttom-btn" type="primary" @click.stop="handleEdit"
|
||||
v-if="btnType === 'btn_edit'&&!this.setting.noShowBtn">编辑
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getConfig,
|
||||
createModel,
|
||||
getDataChange
|
||||
} from '@/api/apply/webDesign'
|
||||
import Parser from '@/pages/apply/dynamicModel/components/detail/Parser'
|
||||
const getFormDataFields = item => {
|
||||
const config = item.__config__
|
||||
if (!config || !config.jnpfKey) return true
|
||||
const jnpfKey = config.jnpfKey
|
||||
const list = ["input", "textarea", "inputNumber", "switch", "datePicker", "timePicker", "colorPicker", "rate",
|
||||
"slider", "editor", "link", "text", "alert", 'table', "collapse", 'collapseItem', 'tabItem',
|
||||
"tab", "row", "card", "groupTitle", "divider", 'location', 'stepItem', 'steps'
|
||||
]
|
||||
const fieldsSelectList = ["radio", "checkbox", "select", "cascader", "treeSelect"]
|
||||
if (list.includes(jnpfKey) || (fieldsSelectList.includes(jnpfKey) && config.dataType === 'static')) return true
|
||||
return false
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPage: false,
|
||||
loading: true,
|
||||
isPreview: '0',
|
||||
modelId: '',
|
||||
formConf: {},
|
||||
formData: {},
|
||||
dataForm: {
|
||||
id: '',
|
||||
data: ''
|
||||
},
|
||||
btnType: '',
|
||||
formPermissionList: {},
|
||||
formList: [],
|
||||
encryption: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let config = JSON.parse(this.jnpf.base64.decode(option.config))
|
||||
this.formPermissionList = !config.currentMenu ? [] : JSON.parse(decodeURIComponent(config.currentMenu))
|
||||
this.formList = this.formPermissionList.formList
|
||||
this.btnType = config.jurisdictionType || ''
|
||||
this.modelId = config.modelId;
|
||||
this.encryption = config.encryption;
|
||||
this.isPreview = config.isPreview || '0';
|
||||
this.dataForm.id = config.id || ''
|
||||
this.setting = config
|
||||
this.getConfigData()
|
||||
uni.$on('refresh', () => {
|
||||
this.getConfigData()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('refresh')
|
||||
},
|
||||
methods: {
|
||||
// 递归过滤
|
||||
recursivefilter(arr, value) {
|
||||
let newColumn = arr.filter(item => getFormDataFields(item))
|
||||
newColumn.forEach(x =>
|
||||
x.__config__ && x.__config__.children && Array.isArray(x.__config__.children) && (x
|
||||
.__config__.children = this.recursivefilter(x.__config__.children))
|
||||
)
|
||||
return newColumn
|
||||
},
|
||||
getConfigData() {
|
||||
this.loading = true
|
||||
getConfig(this.modelId, this.encryption).then(res => {
|
||||
if (res.code !== 200 || !res.data) {
|
||||
uni.showToast({
|
||||
title: '暂无此页面',
|
||||
icon: 'none',
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.formConf = res.data.formData ? JSON.parse(res.data.formData) : {};
|
||||
this.beforeInit(this.formConf.fields || []);
|
||||
this.showPage = true
|
||||
this.key = +new Date()
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
beforeInit(fields) {
|
||||
const loop = (list) => {
|
||||
for (var index = 0; index < list.length; index++) {
|
||||
const config = list[index].__config__;
|
||||
if (config.children && config.children.length) loop(config.children);
|
||||
if (config.jnpfKey == "tableGrid") {
|
||||
let newList = [];
|
||||
for (var i = 0; i < config.children.length; i++) {
|
||||
let element = config.children[i];
|
||||
for (var j = 0; j < element.__config__.children.length; j++) {
|
||||
let item = element.__config__.children[j];
|
||||
newList.push(...item.__config__.children);
|
||||
}
|
||||
}
|
||||
list.splice(index, 1, ...newList);
|
||||
}
|
||||
}
|
||||
};
|
||||
loop(fields);
|
||||
},
|
||||
initData() {
|
||||
this.$nextTick(() => {
|
||||
if (this.dataForm.id) {
|
||||
let extra = {
|
||||
modelId: this.modelId,
|
||||
id: this.dataForm.id,
|
||||
type: 2
|
||||
}
|
||||
getDataChange(this.modelId, this.dataForm.id, this.encryption).then(res => {
|
||||
this.dataForm = res.data
|
||||
if (!this.dataForm.data) return
|
||||
this.formData = {
|
||||
...JSON.parse(this.dataForm.data),
|
||||
id: this.dataForm.id
|
||||
}
|
||||
let fields = this.recursivefilter(this.formConf.fields)
|
||||
this.formConf.fields = fields
|
||||
this.fillFormData(fields, this.formData)
|
||||
this.initRelationForm(fields)
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
this.key = +new Date()
|
||||
})
|
||||
},
|
||||
fillFormData(form, data) {
|
||||
const loop = (list, parent) => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i]
|
||||
if (item.__vModel__) {
|
||||
if (item.__config__.jnpfKey === 'relationForm' || item.__config__.jnpfKey ===
|
||||
'popupSelect') {
|
||||
item.__config__.defaultValue = data[item.__vModel__ + '_id']
|
||||
this.$set(item, 'name', data[item.__vModel__] || '')
|
||||
} else {
|
||||
let val = data.hasOwnProperty(item.__vModel__) ? data[item.__vModel__] : item
|
||||
.__config__.defaultValue
|
||||
if (!item.__config__.custom && item.__config__.defaultCurrent && item.__config__
|
||||
.jnpfKey === 'time') val = this.jnpf.toDate(new Date(), item.format)
|
||||
item.__config__.defaultValue = val
|
||||
}
|
||||
if (this.formPermissionList.useFormPermission) {
|
||||
let id = item.__config__.isSubTable ? parent.__vModel__ + '-' + item.__vModel__ : item
|
||||
.__vModel__
|
||||
let noShow = true
|
||||
if (this.formList && this.formList.length) {
|
||||
noShow = !this.formList.some(o => o.enCode === id)
|
||||
}
|
||||
noShow = item.__config__.noShow ? item.__config__.noShow : noShow
|
||||
this.$set(item.__config__, 'noShow', noShow)
|
||||
}
|
||||
} else {
|
||||
if (['relationFormAttr', 'popupAttr'].includes(item.__config__.jnpfKey)) {
|
||||
item.__config__.defaultValue =
|
||||
data[item.relationField.split('_jnpfTable_')[0] + '_' + item.showField];
|
||||
}
|
||||
}
|
||||
if (item.__config__ && item.__config__.children && Array.isArray(item.__config__.children)) {
|
||||
loop(item.__config__.children, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
loop(form)
|
||||
this.loading = false
|
||||
},
|
||||
initRelationForm(componentList) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (config.jnpfKey == 'relationFormAttr' || config.jnpfKey == 'popupAttr') {
|
||||
const relationKey = cur.relationField.split("_jnpfTable_")[0]
|
||||
componentList.forEach(item => {
|
||||
const noVisibility = Array.isArray(item.__config__.visibility) && !item
|
||||
.__config__.visibility.includes('app')
|
||||
if ((relationKey == item.__vModel__) && (noVisibility || !!item.__config__
|
||||
.noShow)) {
|
||||
cur.__config__.noShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
|
||||
.__config__.children)
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
const id = item.__config__.defaultValue
|
||||
if (!id) return
|
||||
let config = {
|
||||
modelId: item.modelId,
|
||||
id: id,
|
||||
formTitle: '详情',
|
||||
noShowBtn: 1,
|
||||
noDataLog: 1
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const url =
|
||||
'/pages/apply/dynamicModel/detail?config=' + this.base64.encode(JSON.stringify(config),
|
||||
"UTF-8")
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
},
|
||||
handleEdit() {
|
||||
const currentMenu = encodeURIComponent(JSON.stringify(this.formPermissionList))
|
||||
let config = {
|
||||
modelId: this.modelId,
|
||||
isPreview: this.isPreview,
|
||||
id: this.setting.id,
|
||||
jurisdictionType: 'btn_edit',
|
||||
currentMenu,
|
||||
list: this.setting.list,
|
||||
index: this.setting.index
|
||||
}
|
||||
const url = '/pages/apply/dynamicModel/form?config=' + this.base64.encode(JSON.stringify(config), "UTF-8")
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
.nav {
|
||||
z-index: 99999;
|
||||
|
||||
:deep(.uni-navbar__content) {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
:deep(.uni-navbar__header-container) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nav-left-text {
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.right-icons {
|
||||
font-weight: 700;
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.select-right-icons {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
326
pages/formShortLink/index.vue
Normal file
326
pages/formShortLink/index.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar :fixed="true" :statusBar="true" :border="false" height="44">
|
||||
<view class="nav-left">
|
||||
<view class="nav-left-text">{{config.fullName}}</view>
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<view v-if="!showPsd">
|
||||
<template v-if="type==='form' || type==='list' || type === 'detail'">
|
||||
<view v-if="type==='form' || type === 'detail'">
|
||||
<view class="jnpf-wrap jnpf-wrap-form" v-if="!loading && (type==='form' || type === 'detail')">
|
||||
<JnpfParser :formConf="formConf" :isShortLink="true" ref="dynamicForm" @submit="sumbitForm"
|
||||
:key="newDate" />
|
||||
<view class="buttom-actions" v-if="type==='form'">
|
||||
<u-button class="buttom-btn" @click.stop="resetForm">重置</u-button>
|
||||
<u-button class="buttom-btn" type="primary" @click.stop="submit" :loading="btnLoading">
|
||||
{{formConf.confirmButtonText||'确定'}}
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="buttom-actions" v-if="type==='detail'">
|
||||
<u-button class="buttom-btn" @click.stop="resetForm">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type==='list' && flg">
|
||||
<List ref="List" :config="config" :modelId="modelId" :columnText="columnText"
|
||||
:columnCondition="columnCondition" :encryption='encryption' />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-show="!showPsd"></view>
|
||||
<u-modal v-model="showPsd" :title-style="titleStyle" title="密码" @confirm="confirm" v-if="showPsd">
|
||||
<view class="slot-content u-p-l-32 u-p-r-22 u-p-t-20 u-p-b-20">
|
||||
<u-input type="password" placeholder="请输入密码" :border="true" v-model="password" />
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getConfig,
|
||||
createModel,
|
||||
getShortLink,
|
||||
checkPwd
|
||||
} from '@/api/apply/webDesign'
|
||||
import md5Libs from "/uni_modules/vk-uview-ui/libs/function/md5";
|
||||
import List from './list.vue'
|
||||
const getFormDataFields = item => {
|
||||
const config = item.__config__
|
||||
if (!config || !config.jnpfKey) return true
|
||||
const jnpfKey = config.jnpfKey
|
||||
const list = ["input", "textarea", "inputNumber", "switch", "datePicker", "timePicker", "colorPicker", "rate",
|
||||
"slider", "editor", "link", "text", "alert", 'table', "collapse", 'collapseItem', 'tabItem',
|
||||
"tab", "row", "card", "groupTitle", "divider", 'location', 'stepItem', 'steps'
|
||||
]
|
||||
const fieldsSelectList = ["radio", "checkbox", "select", "cascader", "treeSelect"]
|
||||
if (list.includes(jnpfKey) || (fieldsSelectList.includes(jnpfKey) && config.dataType === 'static')) return true
|
||||
return false
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columnCondition: [],
|
||||
columnText: [],
|
||||
flg: false,
|
||||
password: '',
|
||||
titleStyle: {
|
||||
paddingTop: '24rpx'
|
||||
},
|
||||
showPsd: false,
|
||||
dataForm: {
|
||||
data: ''
|
||||
},
|
||||
formConf: {},
|
||||
newDate: +new Date(),
|
||||
btnLoading: false,
|
||||
loading: true,
|
||||
modelId: '',
|
||||
config: {},
|
||||
type: 'form',
|
||||
shortLinkData: {},
|
||||
formData: {},
|
||||
encryption: ''
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.formData = e.formData ? JSON.parse(e.formData) : {};
|
||||
const decryptedData = this.jnpf.aesEncryption.decrypt(e.encryption)
|
||||
if (!decryptedData) return
|
||||
const decrypt = JSON.parse(decryptedData)
|
||||
this.encryption = e.encryption
|
||||
this.modelId = decrypt.modelId
|
||||
this.type = decrypt.type
|
||||
this.getShortLink()
|
||||
this.getConfig()
|
||||
},
|
||||
methods: {
|
||||
// 递归过滤
|
||||
recursivefilter(arr, value) {
|
||||
let newColumn = arr.filter(item => getFormDataFields(item))
|
||||
newColumn.forEach(x =>
|
||||
x.__config__ && x.__config__.children && Array.isArray(x.__config__.children) && (x
|
||||
.__config__.children = this.recursivefilter(x.__config__.children))
|
||||
)
|
||||
return newColumn
|
||||
},
|
||||
getConfig() {
|
||||
getConfig(this.modelId, this.encryption).then(res => {
|
||||
this.config = res.data || {}
|
||||
this.formConf = JSON.parse(this.config.formData) || {}
|
||||
this.beforeInit(this.formConf.fields)
|
||||
let fields = this.recursivefilter(this.formConf.fields)
|
||||
this.formConf.fields = fields
|
||||
this.fillFormData(fields, this.formData)
|
||||
this.$nextTick(() => {
|
||||
this.flg = true
|
||||
this.newDate = +new Date()
|
||||
this.loading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeInit(fields) {
|
||||
const loop = (list) => {
|
||||
for (var index = 0; index < list.length; index++) {
|
||||
const config = list[index].__config__
|
||||
if (config.children && config.children.length) loop(config.children)
|
||||
if (config.jnpfKey == 'tableGrid') {
|
||||
let newList = []
|
||||
for (var i = 0; i < config.children.length; i++) {
|
||||
let element = config.children[i]
|
||||
for (var j = 0; j < element.__config__.children.length; j++) {
|
||||
let item = element.__config__.children[j]
|
||||
newList.push(...item.__config__.children)
|
||||
}
|
||||
}
|
||||
list.splice(index, 1, ...newList)
|
||||
}
|
||||
}
|
||||
}
|
||||
loop(fields)
|
||||
},
|
||||
getShortLink() {
|
||||
getShortLink(this.modelId, this.encryption).then(res => {
|
||||
this.shortLinkData = res.data || {}
|
||||
this.columnCondition = JSON.parse(this.shortLinkData.columnCondition)
|
||||
this.columnText = JSON.parse(this.shortLinkData.columnText)
|
||||
if (this.type == 'list' && this.shortLinkData.columnPassUse == 1) this.showPsd = true
|
||||
if (this.type == 'form' && this.shortLinkData.formPassUse == 1) this.showPsd = true
|
||||
this.newDate = +new Date()
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
let data = {
|
||||
id: this.modelId,
|
||||
password: md5Libs.md5(this.password),
|
||||
type: this.type == 'form' ? 0 : 1,
|
||||
encryption: this.encryption
|
||||
}
|
||||
checkPwd(data).then(res => {
|
||||
this.showPsd = false
|
||||
this.newDate = +new Date()
|
||||
}).catch(err => {
|
||||
this.showPsd = true
|
||||
this.password = ''
|
||||
this.newDate = +new Date()
|
||||
})
|
||||
},
|
||||
fillFormData(form, data) {
|
||||
const loop = list => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i]
|
||||
let vModel = item.__vModel__
|
||||
let config = item.__config__
|
||||
if (vModel) {
|
||||
let val = data.hasOwnProperty(vModel) ? data[vModel] : config
|
||||
.defaultValue
|
||||
if (!config.custom && config.defaultCurrent) {
|
||||
if (config.jnpfKey === 'timePicker') {
|
||||
config.defaultValue = this.jnpf.toDate(new Date(), this.jnpf.handelFormat(item
|
||||
.format))
|
||||
}
|
||||
if (config.jnpfKey === 'datePicker') {
|
||||
config.defaultValue = new Date().getTime()
|
||||
}
|
||||
if (config.jnpfKey === 'organizeSelect' && this.userInfo.organizeIds?.length) {
|
||||
config.defaultValue = item.multiple ? this.userInfo.organizeIds :
|
||||
this.userInfo.organizeId
|
||||
}
|
||||
if (config.jnpfKey === 'posSelect' && this.userInfo.positionIds?.length) {
|
||||
config.defaultValue = item.multiple ? this.userInfo.positionIds :
|
||||
this.userInfo.positionId
|
||||
}
|
||||
if (config.jnpfKey === 'userSelect' && this.userInfo.userId) {
|
||||
config.defaultValue = item.multiple ? [this.userInfo.userId] :
|
||||
this.userInfo.userId;
|
||||
}
|
||||
if (config.jnpfKey === 'usersSelect' && this.userInfo.userId) {
|
||||
config.defaultValue = [this.userInfo.userId + '--user']
|
||||
}
|
||||
}
|
||||
if (this.origin === 'scan') {
|
||||
this.$set(item, 'disabled', true)
|
||||
}
|
||||
let noShow = !config.noShow ? false : config.noShow
|
||||
let isVisibility = false
|
||||
if (!config.visibility || (Array.isArray(config.visibility) && config.visibility.includes(
|
||||
'app'))) isVisibility = true
|
||||
this.$set(config, 'isVisibility', isVisibility)
|
||||
this.$set(config, 'noShow', noShow)
|
||||
} else {
|
||||
let noShow = false,
|
||||
isVisibility = false
|
||||
if (!config.visibility || (Array.isArray(config.visibility) && item
|
||||
.__config__.visibility.includes('app'))) isVisibility = true
|
||||
this.$set(config, 'isVisibility', isVisibility)
|
||||
this.$set(config, 'noShow', noShow)
|
||||
}
|
||||
if (config && config.children && Array.isArray(config.children)) {
|
||||
loop(config.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
loop(form)
|
||||
},
|
||||
sumbitForm(data, callback) {
|
||||
if (!data) return
|
||||
this.btnLoading = true
|
||||
this.dataForm.data = JSON.stringify(data)
|
||||
if (callback && typeof callback === "function") callback()
|
||||
createModel(this.modelId, this.dataForm, this.encryption).then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
this.btnLoading = false
|
||||
this.resetForm()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (this.isPreview) return this.$u.toast('功能预览不支持数据保存')
|
||||
this.$refs.dynamicForm && this.$refs.dynamicForm.submitForm()
|
||||
},
|
||||
resetForm() {
|
||||
this.loading = true
|
||||
this.newDate = +new Date()
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
this.$refs.dynamicForm && this.$refs.dynamicForm.resetForm()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
.nav {
|
||||
z-index: 99999;
|
||||
|
||||
.uni-navbar__content {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.uni-navbar__header-container {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.nav-left-text {
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.right-icons {
|
||||
font-weight: 700;
|
||||
margin-top: 2px;
|
||||
margin-left: 4px;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.select-right-icons {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.pasd_box {
|
||||
width: 100%;
|
||||
padding: 60% 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.pasd_box_input {
|
||||
box-sizing: border-box;
|
||||
|
||||
.ipt {
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
333
pages/formShortLink/list.vue
Normal file
333
pages/formShortLink/list.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user