github/niucloud-admin
1
0
Fork 0
mirror of https://gitee.com/niucloud-team/niucloud-admin.git synced 2025-12-13 11:12:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
全栈小学生 2025-03-14 18:33:34 +08:00
parent d09a12489d
commit e7a5f5d316
3 changed files with 193 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
uni-app/src/addon/components/diy-form-detail/index.vue
View File

@ -6,54 +6,52 @@
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import diyGroup from '@/addon/components/diy/group/index.vue' import diyGroup from '@/addon/components/diy/group/index.vue'
import { getFormRecord } from '@/app/api/diy_form'; import { getFormRecord } from '@/app/api/diy_form';
const props = defineProps(['record_id','completeLayout']); const props = defineProps(['record_id', 'completeLayout']);
const emits = defineEmits(['callback']) 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({ res.data.recordsFieldList.forEach((item: any) => {
global: {}, let comp = {
value: [] id: item.field_key,
}) componentName: item.field_type,
pageStyle: '',
onMounted(() => { viewFormDetail: true, // 查看表单详情标识
getFormRecord({ field: {
record_id: props.record_id name: item.field_name,
}).then((res: any) => { value: item.handle_field_value,
diyFormData.global.completeLayout = props.completeLayout || 'style-1'; required: item.field_required,
if (res.data.recordsFieldList) { unique: item.field_unique,
privacyProtection: item.privacy_protection,
res.data.recordsFieldList.forEach((item: any) => { },
let comp = { margin: {
id: item.field_key, top: 0,
componentName: item.field_type, bottom: 0,
pageStyle: '', both: 0
viewFormDetail: true, // 查看表单详情标识 }
field: { };
name: item.field_name, diyFormData.value.push(comp);
value: item.handle_field_value, })
required: item.field_required, }
unique: item.field_unique, emits('callback', res.data.recordsFieldList)
privacyProtection: item.privacy_protection, loading.value = false;
}, }).catch(() => {
margin: { loading.value = false;
top: 0, emits('callback', [])
bottom: 0,
both: 0
}
};
diyFormData.value.push(comp);
})
}
emits('callback', res.data.recordsFieldList)
loading.value = false;
}).catch(() => {
loading.value = false;
emits('callback', [])
})
}) })
})
</script> </script>

297
uni-app/src/addon/components/diy-form/index.vue
View File

@ -7,185 +7,186 @@
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'; import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useDiyForm } from '@/hooks/useDiyForm' import { useDiyForm } from '@/hooks/useDiyForm'
import { deepClone,getValidTime } from '@/utils/common' import { deepClone, getValidTime } from '@/utils/common'
import diyGroup from '@/addon/components/diy/group/index.vue' 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({ const diy = useDiyForm({
form_id: props.form_id, form_id: props.form_id,
needLogin: false // 不检测登录，调用业务自行处理 needLogin: false // 不检测登录，调用业务自行处理
}) })
const diyGroupRef = ref(null) const diyGroupRef = ref(null)
const requestData = computed(() => { const requestData = computed(() => {
return diy.requestData; return diy.requestData;
}) })
const diyFormData: any = reactive({}) const diyFormData: any = reactive({})
onMounted(() => { onMounted(() => {
diy.getData(() => { diy.getData(() => {
diyFormData.status = diy.data.status; diyFormData.status = diy.data.status;
if (diyFormData.status) { if (diyFormData.status) {
diyFormData.title = diy.data.title; diyFormData.title = diy.data.title;
diyFormData.global = diy.data.global; diyFormData.global = diy.data.global;
if (diyFormData.global) { if (diyFormData.global) {
diyFormData.global.topStatusBar.isShow = false; // 顶部导航栏强制隐藏 diyFormData.global.topStatusBar.isShow = false; // 顶部导航栏强制隐藏
diyFormData.global.bottomTabBarSwitch = 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.value = value;
diyFormData.global.borderControl = false; diyFormData.componentRefs = null;
} diyGroupRef.value?.refresh();
// 需要过滤 组件类型，筛选出来表单，排除表单提交组件 watchFormData();
diy.data.value.forEach((item: any) => { }
if (item.componentType == 'diy_form' && item.componentName != 'FormSubmit') { })
value.push(item); })
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; if (formData.components.length) {
diyFormData.componentRefs = null; uni.setStorageSync('diyFormStorage_' + props.form_id, formData)
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)
}
} }
}, }
{ deep: true } },
) { deep: true }
} )
}
const verify = () => { const verify = () => {
if(!diyFormData.status) return true; if (!diyFormData.status) return true;
if(!diyFormData.value) return true; if (!diyFormData.value) return true;
let allPass = 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++) { for (let i = 0; i < diyFormData.value.length; i++) {
let item = diyFormData.value[i]; let item = diyFormData.value[i];
if (item.field.required || item.field.value) { if (item.field.required || item.field.value) {
let refKey = `diy${ item.componentName }Ref`; let refKey = `diy${ item.componentName }Ref`;
let isBreak = false; let isBreak = false;
if (componentRefs[refKey]) { if (componentRefs[refKey]) {
for (let k = 0; k < componentRefs[refKey].length; k++) { for (let k = 0; k < componentRefs[refKey].length; k++) {
let compRef = componentRefs[refKey][k]; let compRef = componentRefs[refKey][k];
let verify = compRef.verify(); // 验证表单组件数据 let verify = compRef.verify(); // 验证表单组件数据
if (verify && !verify.code) { if (verify && !verify.code) {
isBreak = true; isBreak = true;
uni.showToast({ uni.showToast({
title: verify.message, title: verify.message,
icon: 'none' icon: 'none'
}); });
break;
}
}
if (isBreak) {
allPass = false;
break; 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;
} }
// 获取数据 if (!allPass) return false;
const getData = ()=> {
return { const data = {
form_id: props.form_id, form_id: props.form_id,
value: diyFormData.value, value: uni.getStorageSync('diyFormStorage_' + props.form_id),
relate_id: props.relate_id || 0 // 关联业务id relate_id: props.relate_id || 0 // 关联业务id
}
} }
if (props.storage_name) {
const clearStorage = (keys: any=[]) => { uni.setStorageSync(props.storage_name, data)
uni.removeStorageSync('diyFormStorage_' + props.form_id)
if (props.storage_name) uni.removeStorageSync(props.storage_name)
if(keys) {
keys.forEach((key: any) => {
uni.removeStorageSync(key)
})
}
} }
return allPass;
}
// 监听页面隐藏 // 获取数据
diy.onHide(); const getData = () => {
return {
form_id: props.form_id,
value: diyFormData.value,
relate_id: props.relate_id || 0 // 关联业务id
}
}
// 监听页面卸载 const clearStorage = (keys: any = []) => {
diy.onUnload(); 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, diy.onUnload();
getData,
clearStorage // 监听滚动事件
}) // diy.onPageScroll()
defineExpose({
verify,
getData,
clearStorage
})
</script> </script>
<style lang="scss"> <style lang="scss">
.diy-template-wrap { .diy-template-wrap {
/* #ifdef MP */ /* #ifdef MP */
.child-diy-template-wrap { .child-diy-template-wrap {
::v-deep .diy-group { ::v-deep .diy-group {
> .draggable-element.top-fixed-diy { > .draggable-element.top-fixed-diy {
display: block !important; display: block !important;
}
} }
} }
/* #endif */
} }
/* #endif */
}
</style> </style>

1
uni-app/src/addon/components/diy/group/index.vue
View File

@ -112,7 +112,6 @@
<template v-if="component.componentName == 'FormFile'"> <template v-if="component.componentName == 'FormFile'">
<diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" /> <diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" />
</template> </template>
</view> </view>
</view> </view>
<template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBarSwitch"> <template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBarSwitch">