mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2025-12-11 18:32:49 +00:00
up
This commit is contained in:
全栈小学生
parent
d09a12489d
commit
e7a5f5d316
@ -6,54 +6,52 @@
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import diyGroup from '@/addon/components/diy/group/index.vue'
|
||||
import { getFormRecord } from '@/app/api/diy_form';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import diyGroup from '@/addon/components/diy/group/index.vue'
|
||||
import { getFormRecord } from '@/app/api/diy_form';
|
||||
|
||||
const props = defineProps(['record_id','completeLayout']);
|
||||
const emits = defineEmits(['callback'])
|
||||
const props = defineProps(['record_id', 'completeLayout']);
|
||||
const emits = defineEmits(['callback'])
|
||||
const loading = ref(true);
|
||||
const diyFormData: any = reactive({
|
||||
global: {},
|
||||
value: []
|
||||
})
|
||||
|
||||
const loading = ref(true);
|
||||
onMounted(() => {
|
||||
getFormRecord({
|
||||
record_id: props.record_id
|
||||
}).then((res: any) => {
|
||||
diyFormData.global.completeLayout = props.completeLayout || 'style-1';
|
||||
if (res.data.recordsFieldList) {
|
||||
|
||||
const diyFormData: any = reactive({
|
||||
global: {},
|
||||
value: []
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getFormRecord({
|
||||
record_id: props.record_id
|
||||
}).then((res: any) => {
|
||||
diyFormData.global.completeLayout = props.completeLayout || 'style-1';
|
||||
if (res.data.recordsFieldList) {
|
||||
|
||||
res.data.recordsFieldList.forEach((item: any) => {
|
||||
let comp = {
|
||||
id: item.field_key,
|
||||
componentName: item.field_type,
|
||||
pageStyle: '',
|
||||
viewFormDetail: true, // 查看表单详情标识
|
||||
field: {
|
||||
name: item.field_name,
|
||||
value: item.handle_field_value,
|
||||
required: item.field_required,
|
||||
unique: item.field_unique,
|
||||
privacyProtection: item.privacy_protection,
|
||||
},
|
||||
margin: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
both: 0
|
||||
}
|
||||
};
|
||||
diyFormData.value.push(comp);
|
||||
})
|
||||
}
|
||||
emits('callback', res.data.recordsFieldList)
|
||||
loading.value = false;
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
emits('callback', [])
|
||||
})
|
||||
res.data.recordsFieldList.forEach((item: any) => {
|
||||
let comp = {
|
||||
id: item.field_key,
|
||||
componentName: item.field_type,
|
||||
pageStyle: '',
|
||||
viewFormDetail: true, // 查看表单详情标识
|
||||
field: {
|
||||
name: item.field_name,
|
||||
value: item.handle_field_value,
|
||||
required: item.field_required,
|
||||
unique: item.field_unique,
|
||||
privacyProtection: item.privacy_protection,
|
||||
},
|
||||
margin: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
both: 0
|
||||
}
|
||||
};
|
||||
diyFormData.value.push(comp);
|
||||
})
|
||||
}
|
||||
emits('callback', res.data.recordsFieldList)
|
||||
loading.value = false;
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
emits('callback', [])
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -7,185 +7,186 @@
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue';
|
||||
import { useDiyForm } from '@/hooks/useDiyForm'
|
||||
import { deepClone,getValidTime } from '@/utils/common'
|
||||
import diyGroup from '@/addon/components/diy/group/index.vue'
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue';
|
||||
import { useDiyForm } from '@/hooks/useDiyForm'
|
||||
import { deepClone, getValidTime } from '@/utils/common'
|
||||
import diyGroup from '@/addon/components/diy/group/index.vue'
|
||||
|
||||
const props = defineProps(['form_id', 'relate_id', 'storage_name', 'form_border']);
|
||||
const props = defineProps(['form_id', 'relate_id', 'storage_name', 'form_border']);
|
||||
|
||||
const diy = useDiyForm({
|
||||
form_id: props.form_id,
|
||||
needLogin: false // 不检测登录，调用业务自行处理
|
||||
})
|
||||
const diy = useDiyForm({
|
||||
form_id: props.form_id,
|
||||
needLogin: false // 不检测登录，调用业务自行处理
|
||||
})
|
||||
|
||||
const diyGroupRef = ref(null)
|
||||
const diyGroupRef = ref(null)
|
||||
|
||||
const requestData = computed(() => {
|
||||
return diy.requestData;
|
||||
})
|
||||
const requestData = computed(() => {
|
||||
return diy.requestData;
|
||||
})
|
||||
|
||||
const diyFormData: any = reactive({})
|
||||
const diyFormData: any = reactive({})
|
||||
|
||||
onMounted(() => {
|
||||
diy.getData(() => {
|
||||
diyFormData.status = diy.data.status;
|
||||
if (diyFormData.status) {
|
||||
diyFormData.title = diy.data.title;
|
||||
diyFormData.global = diy.data.global;
|
||||
if (diyFormData.global) {
|
||||
diyFormData.global.topStatusBar.isShow = false; // 顶部导航栏强制隐藏
|
||||
diyFormData.global.bottomTabBarSwitch = false; // 底部导航强制隐藏
|
||||
onMounted(() => {
|
||||
diy.getData(() => {
|
||||
diyFormData.status = diy.data.status;
|
||||
if (diyFormData.status) {
|
||||
diyFormData.title = diy.data.title;
|
||||
diyFormData.global = diy.data.global;
|
||||
if (diyFormData.global) {
|
||||
diyFormData.global.topStatusBar.isShow = false; // 顶部导航栏强制隐藏
|
||||
diyFormData.global.bottomTabBarSwitch = false; // 底部导航强制隐藏
|
||||
}
|
||||
let value: any = [];
|
||||
if (props.form_border == 'none') {
|
||||
diyFormData.global.borderControl = false;
|
||||
}
|
||||
// 需要过滤 组件类型，筛选出来表单，排除表单提交组件
|
||||
diy.data.value.forEach((item: any) => {
|
||||
if (item.componentType == 'diy_form' && item.componentName != 'FormSubmit') {
|
||||
value.push(item);
|
||||
}
|
||||
let value: any = [];
|
||||
if(props.form_border == 'none'){
|
||||
diyFormData.global.borderControl = false;
|
||||
}
|
||||
// 需要过滤 组件类型，筛选出来表单，排除表单提交组件
|
||||
diy.data.value.forEach((item: any) => {
|
||||
if (item.componentType == 'diy_form' && item.componentName != 'FormSubmit') {
|
||||
value.push(item);
|
||||
})
|
||||
diyFormData.value = value;
|
||||
diyFormData.componentRefs = null;
|
||||
diyGroupRef.value?.refresh();
|
||||
watchFormData();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const watchFormData = () => {
|
||||
watch(
|
||||
() => diyFormData.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue) {
|
||||
let formData: any = {
|
||||
validTime: getValidTime(5), // 缓存数据有效期为5分钟
|
||||
components: []
|
||||
};
|
||||
newValue.forEach((item: any) => {
|
||||
// 只存表单组件
|
||||
if (item.componentType == 'diy_form' && item.componentName != 'FormSubmit' && item.field.cache) {
|
||||
// 只存储表单数据，压缩存储空间
|
||||
let field = deepClone(item.field);
|
||||
// 移除不需要存储的数据
|
||||
delete field.remark; // 字段说明
|
||||
delete field.detailComponent; // 用于详情展示
|
||||
delete field.default; // 默认值
|
||||
formData.components.push({
|
||||
id: item.id,
|
||||
componentName: item.componentName,
|
||||
componentType: item.componentType,
|
||||
componentTitle: item.componentTitle,
|
||||
isHidden: item.isHidden,
|
||||
field: field
|
||||
})
|
||||
}
|
||||
})
|
||||
diyFormData.value = value;
|
||||
diyFormData.componentRefs = null;
|
||||
diyGroupRef.value?.refresh();
|
||||
watchFormData();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const watchFormData = () => {
|
||||
watch(
|
||||
() => diyFormData.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue) {
|
||||
let formData: any = {
|
||||
validTime: getValidTime(5), // 缓存数据有效期为5分钟
|
||||
components: []
|
||||
};
|
||||
newValue.forEach((item: any) => {
|
||||
// 只存表单组件
|
||||
if (item.componentType == 'diy_form' && item.componentName != 'FormSubmit') {
|
||||
// 只存储表单数据，压缩存储空间
|
||||
let field = deepClone(item.field);
|
||||
// 移除不需要存储的数据
|
||||
delete field.remark; // 字段说明
|
||||
delete field.detailComponent; // 用于详情展示
|
||||
delete field.default; // 默认值
|
||||
formData.components.push({
|
||||
id: item.id,
|
||||
componentName: item.componentName,
|
||||
componentType: item.componentType,
|
||||
componentTitle: item.componentTitle,
|
||||
isHidden: item.isHidden,
|
||||
field: field
|
||||
})
|
||||
}
|
||||
})
|
||||
if (formData.components.length) {
|
||||
uni.setStorageSync('diyFormStorage_' + props.form_id, formData)
|
||||
}
|
||||
if (formData.components.length) {
|
||||
uni.setStorageSync('diyFormStorage_' + props.form_id, formData)
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
}
|
||||
|
||||
const verify = () => {
|
||||
if(!diyFormData.status) return true;
|
||||
if(!diyFormData.value) return true;
|
||||
let allPass = true; // 是否全部通过验证
|
||||
const verify = () => {
|
||||
if (!diyFormData.status) return true;
|
||||
if (!diyFormData.value) return true;
|
||||
let allPass = true; // 是否全部通过验证
|
||||
|
||||
let componentRefs = diyGroupRef.value.getFormRef().componentRefs;
|
||||
let componentRefs = diyGroupRef.value.getFormRef().componentRefs;
|
||||
|
||||
// 需要过滤 组件类型，筛选出来表单
|
||||
for (let i = 0; i < diyFormData.value.length; i++) {
|
||||
let item = diyFormData.value[i];
|
||||
if (item.field.required || item.field.value) {
|
||||
let refKey = `diy${ item.componentName }Ref`;
|
||||
let isBreak = false;
|
||||
if (componentRefs[refKey]) {
|
||||
for (let k = 0; k < componentRefs[refKey].length; k++) {
|
||||
let compRef = componentRefs[refKey][k];
|
||||
let verify = compRef.verify(); // 验证表单组件数据
|
||||
if (verify && !verify.code) {
|
||||
isBreak = true;
|
||||
uni.showToast({
|
||||
title: verify.message,
|
||||
icon: 'none'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
if (isBreak) {
|
||||
allPass = false;
|
||||
// 需要过滤 组件类型，筛选出来表单
|
||||
for (let i = 0; i < diyFormData.value.length; i++) {
|
||||
let item = diyFormData.value[i];
|
||||
if (item.field.required || item.field.value) {
|
||||
let refKey = `diy${ item.componentName }Ref`;
|
||||
let isBreak = false;
|
||||
if (componentRefs[refKey]) {
|
||||
for (let k = 0; k < componentRefs[refKey].length; k++) {
|
||||
let compRef = componentRefs[refKey][k];
|
||||
let verify = compRef.verify(); // 验证表单组件数据
|
||||
if (verify && !verify.code) {
|
||||
isBreak = true;
|
||||
uni.showToast({
|
||||
title: verify.message,
|
||||
icon: 'none'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
if (isBreak) {
|
||||
allPass = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!allPass) return false;
|
||||
|
||||
const data = {
|
||||
form_id: props.form_id,
|
||||
value: uni.getStorageSync('diyFormStorage_' + props.form_id),
|
||||
relate_id: props.relate_id || 0 // 关联业务id
|
||||
}
|
||||
if (props.storage_name) {
|
||||
uni.setStorageSync(props.storage_name, data)
|
||||
}
|
||||
return allPass;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = ()=> {
|
||||
return {
|
||||
form_id: props.form_id,
|
||||
value: diyFormData.value,
|
||||
relate_id: props.relate_id || 0 // 关联业务id
|
||||
}
|
||||
if (!allPass) return false;
|
||||
|
||||
const data = {
|
||||
form_id: props.form_id,
|
||||
value: uni.getStorageSync('diyFormStorage_' + props.form_id),
|
||||
relate_id: props.relate_id || 0 // 关联业务id
|
||||
}
|
||||
|
||||
const clearStorage = (keys: any=[]) => {
|
||||
uni.removeStorageSync('diyFormStorage_' + props.form_id)
|
||||
if (props.storage_name) uni.removeStorageSync(props.storage_name)
|
||||
if(keys) {
|
||||
keys.forEach((key: any) => {
|
||||
uni.removeStorageSync(key)
|
||||
})
|
||||
}
|
||||
if (props.storage_name) {
|
||||
uni.setStorageSync(props.storage_name, data)
|
||||
}
|
||||
return allPass;
|
||||
}
|
||||
|
||||
// 监听页面隐藏
|
||||
diy.onHide();
|
||||
// 获取数据
|
||||
const getData = () => {
|
||||
return {
|
||||
form_id: props.form_id,
|
||||
value: diyFormData.value,
|
||||
relate_id: props.relate_id || 0 // 关联业务id
|
||||
}
|
||||
}
|
||||
|
||||
// 监听页面卸载
|
||||
diy.onUnload();
|
||||
const clearStorage = (keys: any = []) => {
|
||||
uni.removeStorageSync('diyFormStorage_' + props.form_id)
|
||||
if (props.storage_name) uni.removeStorageSync(props.storage_name)
|
||||
if (keys) {
|
||||
keys.forEach((key: any) => {
|
||||
uni.removeStorageSync(key)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 监听滚动事件
|
||||
// diy.onPageScroll()
|
||||
// 监听页面隐藏
|
||||
diy.onHide();
|
||||
|
||||
defineExpose({
|
||||
verify,
|
||||
getData,
|
||||
clearStorage
|
||||
})
|
||||
// 监听页面卸载
|
||||
diy.onUnload();
|
||||
|
||||
// 监听滚动事件
|
||||
// diy.onPageScroll()
|
||||
|
||||
defineExpose({
|
||||
verify,
|
||||
getData,
|
||||
clearStorage
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-template-wrap {
|
||||
/* #ifdef MP */
|
||||
.child-diy-template-wrap {
|
||||
::v-deep .diy-group {
|
||||
> .draggable-element.top-fixed-diy {
|
||||
display: block !important;
|
||||
}
|
||||
.diy-template-wrap {
|
||||
/* #ifdef MP */
|
||||
.child-diy-template-wrap {
|
||||
::v-deep .diy-group {
|
||||
> .draggable-element.top-fixed-diy {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -112,7 +112,6 @@
|
||||
<template v-if="component.componentName == 'FormFile'">
|
||||
<diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" />
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBarSwitch">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user