295 lines
8.9 KiB
Vue
295 lines
8.9 KiB
Vue
|
<template>
|
||
|
|
<view class="dynamicModel-form-v jnpf-wrap jnpf-wrap-form" v-if="showPage">
|
||
|
|
<JnpfParser :formConf="formConf" ref="dynamicForm" @submit="sumbitForm" :key="key" v-if="!loading" />
|
||
|
|
<view class="buttom-actions" v-if="btnType === 'btn_edit' || btnType === 'btn_add'">
|
||
|
|
<CustomButton class="u-flex buttom-btn-left-inner" :btnText="getCancelText"
|
||
|
|
btnIcon="icon-ym icon-ym-add-cancel" customIcon :btnLoading="btnLoading" />
|
||
|
|
<u-button class="buttom-btn" type="primary" @click.stop="submit" :loading="btnLoading">
|
||
|
|
{{getOkText}}
|
||
|
|
</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import CustomButton from '@/components/CustomButton'
|
||
|
|
import {
|
||
|
|
getConfigData,
|
||
|
|
createModel,
|
||
|
|
updateModel,
|
||
|
|
getModelInfo
|
||
|
|
} from '@/api/apply/visualDev'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
CustomButton
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
webType: '',
|
||
|
|
showPage: false,
|
||
|
|
btnLoading: false,
|
||
|
|
loading: true,
|
||
|
|
isPreview: '0',
|
||
|
|
modelId: '',
|
||
|
|
formConf: {},
|
||
|
|
formData: {},
|
||
|
|
dataForm: {
|
||
|
|
id: '',
|
||
|
|
data: ''
|
||
|
|
},
|
||
|
|
btnType: '',
|
||
|
|
formPermissionList: {},
|
||
|
|
formList: [],
|
||
|
|
key: +new Date(),
|
||
|
|
config: {},
|
||
|
|
clickType: 'submit',
|
||
|
|
prevDis: false,
|
||
|
|
nextDis: false,
|
||
|
|
index: 0,
|
||
|
|
userInfo: {},
|
||
|
|
isAdd: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getOkText() {
|
||
|
|
const text = this.formConf.confirmButtonTextI18nCode ?
|
||
|
|
this.$t(this.formConf.confirmButtonTextI18nCode, this.formConf.confirmButtonText) :
|
||
|
|
this.formConf.confirmButtonText;
|
||
|
|
return text || this.$t('common.okText');
|
||
|
|
},
|
||
|
|
getCancelText() {
|
||
|
|
const text = this.formConf.cancelButtonTextI18nCode ?
|
||
|
|
this.$t(this.formConf.cancelButtonTextI18nCode, this.formConf.cancelButtonText) :
|
||
|
|
this.formConf.cancelButtonText;
|
||
|
|
return text || this.$t('common.cancelText');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.init(option)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init(option) {
|
||
|
|
// 使用解构赋值提取配置项
|
||
|
|
const parseConfig = (rawConfig) => {
|
||
|
|
try {
|
||
|
|
return JSON.parse(this.jnpf.base64.decode(rawConfig)) || {}
|
||
|
|
} catch (error) {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const config = parseConfig(option.config)
|
||
|
|
const {
|
||
|
|
index,
|
||
|
|
currentMenu,
|
||
|
|
btnType = '',
|
||
|
|
modelId,
|
||
|
|
isPreview = '0',
|
||
|
|
id = ''
|
||
|
|
} = config
|
||
|
|
const formPermissionList = currentMenu ? JSON.parse(decodeURIComponent(currentMenu)) : []
|
||
|
|
Object.assign(this, {
|
||
|
|
userInfo: uni.getStorageSync('userInfo') || {},
|
||
|
|
config,
|
||
|
|
index,
|
||
|
|
formPermissionList,
|
||
|
|
formList: formPermissionList?.formList || [], // 添加安全访问
|
||
|
|
btnType,
|
||
|
|
modelId,
|
||
|
|
isPreview,
|
||
|
|
dataForm: {
|
||
|
|
id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const getNavigationTitle = () => this.dataForm.id ? this.$t('common.editText') : this.$t('common.addText')
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: getNavigationTitle()
|
||
|
|
})
|
||
|
|
this.getConfigData()
|
||
|
|
},
|
||
|
|
getConfigData() {
|
||
|
|
getConfigData(this.modelId, this.config.menuId).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.showPage = true
|
||
|
|
this.initData()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initData() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (this.dataForm.id) {
|
||
|
|
let extra = {
|
||
|
|
modelId: this.modelId,
|
||
|
|
id: this.dataForm.id,
|
||
|
|
type: 1
|
||
|
|
}
|
||
|
|
uni.setStorageSync('dynamicModelExtra', extra)
|
||
|
|
getModelInfo(this.modelId, this.dataForm.id, this.config.menuId).then(res => {
|
||
|
|
this.dataForm = res.data
|
||
|
|
if (!this.dataForm.data) return
|
||
|
|
this.formData = {
|
||
|
|
...JSON.parse(this.dataForm.data),
|
||
|
|
id: this.dataForm.id
|
||
|
|
}
|
||
|
|
this.fillFormData(this.formConf, this.formData)
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.isAdd = true
|
||
|
|
this.formData = {}
|
||
|
|
this.loading = false
|
||
|
|
this.fillFormData(this.formConf, this.formData)
|
||
|
|
}
|
||
|
|
this.key = +new Date()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fillFormData(form, data) {
|
||
|
|
this.key = +new Date()
|
||
|
|
const loop = (list, parent) => {
|
||
|
|
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.isSubTable) config.defaultValue = val
|
||
|
|
if (this.isAdd || config.isSubTable) { //新增时候，默认当前
|
||
|
|
if (config.defaultCurrent) {
|
||
|
|
if (config.jnpfKey === 'datePicker') {
|
||
|
|
if (!data.hasOwnProperty(vModel)) {
|
||
|
|
let format = this.jnpf.handelFormat(item.format)
|
||
|
|
let dateStr = this.jnpf.toDate(new Date().getTime(), format)
|
||
|
|
let time = format === 'yyyy' ? '-01-01 00:00:00' : format === 'yyyy-MM' ?
|
||
|
|
'-01 00:00:00' : format === 'yyyy-MM-dd' ?
|
||
|
|
' 00:00:00' : ''
|
||
|
|
val = new Date(dateStr + time).getTime()
|
||
|
|
config.defaultValue = val
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (config.jnpfKey === 'timePicker') {
|
||
|
|
if (!data.hasOwnProperty(vModel)) {
|
||
|
|
config.defaultValue = this.jnpf.toDate(new Date(), item.format)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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
|
||
|
|
}
|
||
|
|
const userId = this.userInfo.userId
|
||
|
|
if (config.jnpfKey === 'userSelect' && userId) {
|
||
|
|
config.defaultValue = item.multiple ? [userId] : userId;
|
||
|
|
}
|
||
|
|
if (config.jnpfKey === 'usersSelect' && userId) {
|
||
|
|
config.defaultValue = [userId + '--user'];
|
||
|
|
}
|
||
|
|
if (config.jnpfKey === 'sign' && this.userInfo.signImg) {
|
||
|
|
config.defaultValue = this.userInfo.signImg
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const btn_detail = this.$permission.hasBtnP('btn_detail', this.formPermissionList
|
||
|
|
.menuId)
|
||
|
|
const btn_edit = this.$permission.hasBtnP('btn_edit', this.formPermissionList
|
||
|
|
.menuId)
|
||
|
|
if (!!this.dataForm.id && !btn_edit && btn_detail) item.disabled = btn_detail
|
||
|
|
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)
|
||
|
|
if (this.formPermissionList.useFormPermission) {
|
||
|
|
let id = config.isSubTable ? parent.__vModel__ + '-' + vModel : vModel
|
||
|
|
noShow = true
|
||
|
|
if (this.formList && this.formList.length) {
|
||
|
|
noShow = !this.formList.some(o => o.enCode === id)
|
||
|
|
}
|
||
|
|
noShow = config.noShow ? config.noShow : noShow
|
||
|
|
this.$set(config, 'noShow', noShow)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let noShow = config.noShow ? config.noShow : false,
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
if (config && config.children && Array.isArray(config.children)) {
|
||
|
|
loop(config.children, item)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
loop(form.fields)
|
||
|
|
form.formData = data
|
||
|
|
this.key = +new Date()
|
||
|
|
},
|
||
|
|
sumbitForm(data, callback) {
|
||
|
|
if (!data) return
|
||
|
|
this.btnLoading = true
|
||
|
|
const formData = {
|
||
|
|
...this.formData,
|
||
|
|
...data
|
||
|
|
}
|
||
|
|
this.dataForm.data = JSON.stringify(formData)
|
||
|
|
this.dataForm.menuId = this.config.menuId
|
||
|
|
if (callback && typeof callback === "function") callback()
|
||
|
|
const formMethod = this.dataForm.id ? updateModel : createModel
|
||
|
|
formMethod(this.modelId, this.dataForm).then(res => {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
complete: () => {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (this.clickType == 'save_add') {
|
||
|
|
this.key = +new Date()
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.dynamicForm && this.$refs
|
||
|
|
.dynamicForm.resetForm()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.btnLoading = false
|
||
|
|
this.initData()
|
||
|
|
if (this.clickType != 'save_proceed' && this.clickType !=
|
||
|
|
'save_add') {
|
||
|
|
uni.$emit('refresh')
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}, 1500)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(() => {
|
||
|
|
this.btnLoading = false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
commonSubmit(type) {
|
||
|
|
this.clickType = type
|
||
|
|
this.submit(type)
|
||
|
|
},
|
||
|
|
submit(type) {
|
||
|
|
this.clickType = type
|
||
|
|
if (this.isPreview == '1') return this.$u.toast('功能预览不支持数据保存')
|
||
|
|
this.$refs.dynamicForm && this.$refs.dynamicForm.submitForm()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background-color: #f0f2f6;
|
||
|
|
}
|
||
|
|
</style>
|