HC_YFZX
/
vue-vben-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

编辑新增接口对接，表单设计器json渲染

main
zzq 2024-03-15 17:01:55 +08:00
parent d52e7b1dc1
commit fa3a7546ad
13 changed files with 465 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/formdesign/index.ts
View File

@ -8,7 +8,7 @@ enum Api {
OUTKEY_LIST = '/api/CodeTable/GetForms',
GETBASE_LIST = '/api/FormScheme/GetForm',
ADDFORM_DATA = '/api/FormScheme/AddForm',
EDITFORM_DATA = '/api/FormScheme/UpdateForm'
EDITFORM_DATA = '/api/FormScheme/UpdateForm?id='
}
/**
@ -32,5 +32,7 @@ export const getBaseConfigList = (params: NoOptionsParam) =>
export const addFormDesignData = (params: NoOptionsParam) =>
defHttp.post<AccountListGetResultModel>({ url: Api.ADDFORM_DATA, params });
export const editFormDesignData = (params: NoOptionsParam) =>
defHttp.post<AccountListGetResultModel>({ url: Api.EDITFORM_DATA, params });
export const editFormDesignData = (params: NoOptionsParam) =>
defHttp.post<AccountListGetResultModel>({ url: Api.EDITFORM_DATA+params.info.id, params });

6
src/store/modules/permission.ts
View File

@ -191,7 +191,7 @@ export const usePermissionStore = defineStore({
await Promise.all(moduleRoutes);
// 设置菜单列表
console.log(moduleRoutes)
_this.setFrontMenuList(moduleRoutes);
}
@ -272,7 +272,7 @@ export const usePermissionStore = defineStore({
menuList.sort((a, b) => {
return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0);
});
console.log(menuList)
// 设置菜单列表
// this.setFrontMenuList(menuList);
//通过后端api获取菜单列表
@ -304,7 +304,7 @@ export const usePermissionStore = defineStore({
} catch (error) {
console.error(error);
}
console.log(routeList)
// Dynamically introduce components
// 动态引入组件
routeList = transformObjToRoute(routeList);

84
src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
View File

@ -10,9 +10,9 @@
<!-- 循环遍历渲染组件属性 -->
<div v-if="formConfig.currentItem && formConfig.currentItem.componentProps">
<FormItem v-for="item in inputOptions" :key="item.name" :label="item.label">
<!-- 处理数组属性，placeholder -->
<div v-if="item.children">
<template v-for="(child, index) of item.children" :key="index">
<component
@ -29,6 +29,7 @@
class="component-prop"
v-bind="item.componentProps"
:is="item.component"
@change="handleFieldTableChange"
v-model:value="formConfig.currentItem.componentProps[item.name]"
/>
</FormItem>
@ -90,7 +91,7 @@
Row,
} from 'ant-design-vue';
import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
import { computed, defineComponent, ref, watch } from 'vue';
import { computed, defineComponent, ref, watch,inject } from 'vue';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
import {
baseComponentControlAttrs,
@ -101,6 +102,8 @@
import FormOptions from './FormOptions.vue';
import { formItemsForEach, remove } from '../../../utils';
import { IBaseFormAttrs } from '../config/formItemPropsConfig';
import { getOutKeyList } from '@/api/formdesign/index'
export default defineComponent({
name: 'ComponentProps',
@ -120,6 +123,64 @@
Row,
},
setup() {
let fieldTableValue = ref();
let FieldTableOptions = ref();
let receivedData = ref();
const handleNextStepsData = inject('handleNextStepsData')
watch(
() => handleNextStepsData,// 点击下一步按钮传递的参数
newVal => {
console.log('newValcommm',newVal)
FieldTableOptions = []
if(newVal && newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
receivedData = JSON.parse(newVal.value.scheme.scheme)
console.log('receivedData',receivedData)
receivedData.db.forEach(item =>{
FieldTableOptions.push({
value: item.name,
label: item.name
})
})
}
},
{ deep: true, immediate: true },
)
let FieldNamesOptions = ref<SelectProps['options']>([])
const fetch = () => {
if(!fieldTableValue.value){
return
}
getOutKeyList({tableNames: fieldTableValue.value, dbCode: receivedData.dbCode}).then((data: AreaRespVO[]) => {
let arr: any[] = []
if(data[0]){
data[0].db_codecolumnsList.forEach(item =>{
arr.push({
label: item.dbColumnName,
value: item.dbColumnName
})
})
}
FieldNamesOptions.value = arr
})
}
const handleFieldTableChange = (e) => {
fieldTableValue.value = e
fetch()
inputOptions.value.forEach(item =>{
if(item.name == "fieldName"){
item.componentProps.options = FieldNamesOptions
}
})
}
// 让compuated属性自动更新
const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[]);
@ -129,7 +190,7 @@
};
const { formConfig } = useFormDesignState();
if (formConfig.value.currentItem) {
formConfig.value.currentItem.componentProps =
formConfig.value.currentItem.componentProps || {};
@ -205,9 +266,20 @@
// 非控制性选择
const inputOptions = computed(() => {
return allOptions.value.filter((item) => {
fetch()
let arr = allOptions.value.filter((item) => {
return item.category == 'input';
});
arr.forEach(item =>{
if(item.name == "dataTable"){
item.componentProps.options = FieldTableOptions
}
if(item.name == "fieldName"){
item.componentProps.options = FieldNamesOptions
}
})
return arr
});
watch(
@ -237,6 +309,10 @@
linkOptions,
controlOptions,
inputOptions,
fieldTableValue,
FieldTableOptions,
handleFieldTableChange,
fetch
};
},
});

78
src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
View File

@ -6,28 +6,6 @@
<div class="properties-body" v-if="formConfig.currentItem?.itemProps">
<Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
<Form v-else label-align="left" layout="vertical">
<div>
<FormItem label="数据表" >
<a-select
ref="select"
v-model:value="fieldTableValue"
:options="FieldTableOptions"
@change="handleFieldTableChange"
></a-select>
</FormItem>
</div>
<div>
<FormItem label="字段名" >
<a-select
ref="select"
allowClear
:filterOption="false"
v-model:value="fieldNameValue"
:options="FieldNamesOptions"
@change="handleFieldNameChange"
></a-select>
</FormItem>
</div>
<div v-for="item of baseFormItemProps" :key="item.name">
<FormItem :label="item.label" v-if="showProps(item.exclude)">
<component
@ -87,16 +65,16 @@
</div>
</template>
<script lang="ts" setup name="FormItemProps">
import { computed, watch , ref ,onMounted } from 'vue';
import { optionsListApi,getOutKeyList } from '@/api/formdesign/index'
import { computed, watch } from 'vue';
import {
baseFormItemControlAttrs,
baseFormItemProps,
advanceFormItemProps,
advanceFormItemColProps,
} from '../../VFormDesign/config/formItemPropsConfig';
import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
import RuleProps from './RuleProps.vue';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
import { isArray } from 'lodash-es';
@ -129,55 +107,5 @@
});
});
let fieldTableValue = ref();
let FieldTableOptions = ref<SelectProps['options']>([
{
value: 'lr_base_role',
label: 'lr_base_role',
},
{
value: 'f_test',
label: 'f_test',
},
{
value: 'f_parent',
label: 'f_parent',
},
]);
function handleFieldTableChange(e){
fieldTableValue.value = e
fetch();
}
let fieldNameValue = ref();
let FieldNamesOptions = ref<SelectProps['options']>([])
function handleFieldNameChange(e){
}
async function fetch() {
if(!fieldTableValue.value){
return
}
getOutKeyList({tableNames: fieldTableValue.value}).then((data: AreaRespVO[]) => {
let arr: any[] = []
if(data[0]){
data[0].lr_db_codecolumnsList.forEach(item =>{
arr.push({
label: item.f_DbColumnName,
value: item.f_DbColumnName
})
})
}
FieldNamesOptions.value = arr
fieldNameValue.value = ''
})
}
onMounted(() => {
fetch();
})
</script>

1
src/views/demo/form-design/components/VFormDesign/components/ImportJsonModal.vue
View File

@ -90,6 +90,7 @@
// 导入JSON
try {
const editorJsonData = JSON.parse(state.json) as IFormConfig;
console.log('editorJsonData',editorJsonData)
editorJsonData.schemas &&
formItemsForEach(editorJsonData.schemas, (formItem) => {
generateKey(formItem);

18
src/views/demo/form-design/components/VFormDesign/config/componentPropsConfig.ts
View File

@ -106,6 +106,24 @@ export const baseComponentControlAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
//共用属性
export const baseComponentCommonAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
{
name: 'dataTable',
label: '数据表',
component: 'Select',
componentProps: {
placeholder: '请输入',
options: [],
}
},
{
name: 'fieldName',
label: '字段名',
component: 'Select',
componentProps: {
placeholder: '请输入',
options: [],
}
},
{
name: 'size',
label: '尺寸',

59
src/views/demo/form-design/components/VFormDesign/index.vue
View File

@ -92,11 +92,11 @@
import 'codemirror/mode/javascript/javascript';
import { ref, provide, Ref } from 'vue';
import { ref, provide, Ref ,inject ,watch, computed , defineProps} from 'vue';
import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
import { IVFormComponent, IFormConfig, PropsTabKey } from '../../typings/v-form-component';
import { formItemsForEach, generateKey } from '../../utils';
import { formItemsForEach, generateKey,removeAttrs } from '../../utils';
import { cloneDeep } from 'lodash-es';
import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig';
import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
@ -106,12 +106,24 @@
import { CollapseContainer } from '@/components/Container';
defineProps({
// defineProps({
// title: {
// type: String,
// default: 'v-form-antd表单设计器',
// }
// });
const props = defineProps({
title: {
type: String,
default: 'v-form-antd表单设计器',
},
});
saveClick: {
default: false,
type: Boolean,
}
})
const { prefixCls } = useDesign('form-design');
// 子组件实例
const propsPanel = ref<null | IPropsPanel>(null);
@ -138,6 +150,43 @@
},
activeKey: 1,
});
const designSendGrandson = inject('designSendGrandson')
watch(()=>props.saveClick,(newValue,oldValue)=>{
if(newValue){
const config = cloneDeep(formConfig.value);
let formJson = JSON.stringify(removeAttrs(config), null, '\t');
designSendGrandson(formJson)
}
},{immediate:true,deep:true})
let receivedData = ref();
const handleNextStepsData = inject('handleNextStepsData')
watch(
() => handleNextStepsData,// 点击下一步按钮传递的参数
newVal => {
console.log('receivedData333',newVal)
if(newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
receivedData = JSON.parse(newVal.value.scheme.scheme)
//渲染表单
const editorJsonData = receivedData.formInfo as IFormConfig;
console.log('editorJsonData',editorJsonData)
editorJsonData.schemas &&
formItemsForEach(editorJsonData.schemas, (formItem) => {
generateKey(formItem);
});
setFormConfig({
...editorJsonData,
activeKey: 1,
currentItem: { component: '' },
});
}
console.log('receivedData',receivedData)
},
{ deep: true, immediate: true },
)
const setFormConfig = (config: IFormConfig) => {
//外部导入时，可能会缺少必要的信息。
@ -173,6 +222,7 @@
* @param schema 当前选中的表单项
*/
const handleSetSelectItem = (schema: IVFormComponent) => {
console.log('click',schema)
formConfig.value.currentItem = schema as any;
handleChangePropsTabs(
schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1,
@ -290,6 +340,7 @@
* @param Modal {IToolbarMethods}
*/
const handleOpenModal = (Modal: IToolbarMethods) => {
console.log('formConfig',formConfig)
const config = cloneDeep(formConfig.value);
Modal?.showModal(config);
};

33
src/views/demo/form-design/index.vue
View File

@ -1,12 +1,41 @@
<template>
<PageWrapper dense >
<VFormDesign />
<VFormDesign :saveClick="visible" />
</PageWrapper>
</template>
<script lang="ts" setup>
<script lang="ts">
import { defineComponent, watch,toRefs,reactive } from 'vue';
import { PageWrapper } from '@/components/Page';
import VFormDesign from './components/VFormDesign/index.vue';
export default defineComponent({
name: 'FormDesign',
components: {
PageWrapper,
VFormDesign,
},
props: ['isSubmitClick'],
setup(_props, { emit }) {
const state = reactive<{
visible: boolean
}>({
visible: false
});
watch(()=>_props.isSubmitClick,(newValue,oldValue)=>{
state.visible = newValue
setTimeout(()=>{
emit('designformback')
},1000)
},{immediate:true,deep:true})
return { ...toRefs(state) };
}
})
</script>
<style lang="less" scoped></style>

154
src/views/demo/onlineform/formdesign/FormModal.vue
View File

@ -35,8 +35,8 @@
</div>
</div>
<div class="design-content">
<FormDesign v-show="stepsCurrent==1"></FormDesign>
<FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" />
<FormDesign v-show="stepsCurrent==1" :isSubmitClick="isSubmitClick" @designformback="designformback"></FormDesign>
<FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" @formDataNoBack="formDataNoBack" />
</div>
<!-- <FormPage /> -->
<!-- <FormDesign></FormDesign> -->
@ -45,7 +45,8 @@
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref,provide,computed } from 'vue';
import { message } from 'ant-design-vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import FormPage from './form/index.vue';
@ -55,90 +56,161 @@
defineOptions({ name: 'FormModal' });
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['submitsuccess']);
let isAddVisible = ref();
let formScheme = ref();
let saveFormDatas = ref();
let saveFormDatas = ref({});
provide("handleNextStepsData", computed(() => saveFormDatas.value));
function designSendGrandson(value){
let designTab = JSON.parse(value)
let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
schems.formInfo = designTab
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
console.log('孙子传值给我', designTab)
submitSaveClick()
console.log('saveschems',schems)
designTab.schemas.forEach(item =>{
})
}
provide('designSendGrandson', designSendGrandson)
const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
console.log('dattt',data)
stepsCurrent.value = 0
isSubmitClick.value = false
if(data.id){
isAddVisible.value = false
getBaseConfigList({ id: data.id }).then((res: AreaRespVO[]) =>{
formScheme.value = res
saveFormDatas.value = res
isAddVisible.value = false
console.log('res',)
})
}else{
let schemejson = {
db: [],
DbCode: '',
formInfo: {}
}
isAddVisible.value = true
formScheme.value = {
"info": {},
"scheme": {}
}
saveFormDatas.value = {
"info": {},
"scheme": {}
}
}
});
let stepsCurrent = ref();
let isNextSteps = false
let isNextSteps = ref(false)
let isSubmitClick = ref(false)
function formNextClick(){
isNextSteps = true
stepsCurrent.value = 1
isNextSteps.value = true
isSubmitClick.value = false
}
function formPrevClick(){
isNextSteps = false
isNextSteps.value = false
stepsCurrent.value = 0
}
function closeModalClick(){
stepsCurrent.value = 1
formScheme = ref()
saveFormDatas = ref()
isNextSteps = false
isNextSteps.value = false
closeModal()
}
function formDataNoBack(){
isNextSteps.value = false
}
function handleformData(data){
stepsCurrent.value = 1
let arr: any[] = []
data.table.forEach(item =>{
arr.push({
id: item.id,
name: item.name,
field: item.field,
comment: item.comment,
relationField: item.relationField,
relationName: item.relationName,
type: item.type
console.log('adddata',data)
if(data.table){
data.table.forEach(item =>{
arr.push({
id: item.id,
name: item.name,
field: item.field,
comment: item.comment,
relationField: item.relationField,
relationName: item.relationName,
type: item.type
})
})
})
let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
schems.db = arr
}
if(isAddVisible.value){ //新增
let schems
if(saveFormDatas.value.scheme.scheme){
schems = JSON.parse(saveFormDatas.value.scheme.scheme)
schems.db = arr
schems.dbCode = data.form.DbCode
}else{
schems = {
db: arr,
dbCode: data.form.DbCode,
formInfo:{}
}
}
saveFormDatas.value.info = data.form
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
console.log('add')
}else{ //编辑
console.log('edit')
let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
schems.db = arr
saveFormDatas.value.info.category = data.form.category
saveFormDatas.value.info.description = data.form.description
saveFormDatas.value.info.enabledMark = data.form.enabledMark
saveFormDatas.value.info.name = data.form.name
saveFormDatas.value.info.DbCode = data.form.DbCode
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
}
saveFormDatas.value.info.category = data.form.category
saveFormDatas.value.info.description = data.form.description
saveFormDatas.value.info.enabledMark = data.form.enabledMark
saveFormDatas.value.info.name = data.form.name
saveFormDatas.value.info.DbCode = data.form.DbCode
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
console.log('saveFormDatas123',saveFormDatas.value)
}
function submitClick(){
console.log('isAddVisible',isAddVisible)
console.log('123333211',saveFormDatas)
isSubmitClick.value = true
}
function designformback(){
isSubmitClick.value = false
}
function submitSaveClick(){
let param = {
info: saveFormDatas.value.info,
scheme: saveFormDatas.value.scheme
}
console.log('param',param)
if(isAddVisible.value){
console.log('1111')
}else{
console.log('2222')
editFormDesignData( saveFormDatas.value.info.id ).then((res: AreaRespVO[]) =>{
addFormDesignData( param ).then((res: AreaRespVO[]) =>{
console.log('addsuccess',res)
closeModalClick()
message.success('操作成功', 2);
emit("submitsuccess")
})
}else{
editFormDesignData( param ).then((res: AreaRespVO[]) =>{
closeModalClick()
message.success('操作成功', 2);
emit("submitsuccess")
})
}
}

2
src/views/demo/onlineform/formdesign/form/DataBaseTable.vue
View File

@ -28,7 +28,7 @@
// const x1 = props.workOrder
// console.log(x1,'watchEffect配置的回调执行了')
// })
console.log('props',props)
// console.log('props',props)
// watch(()=>props.workOrder,(newValue,oldValue)=>{
// handleEmitsBase()

23
src/views/demo/onlineform/formdesign/form/index.data.ts
View File

@ -117,7 +117,7 @@ export const columns: BasicColumn[] = [
// },
];
const isButton = (formType: string) => formType === 0;
export const formSchema: FormSchema[] = [
{
field: 'name',
@ -127,12 +127,9 @@ export const formSchema: FormSchema[] = [
span: 24,
},
defaultValue: '',
rules: [{ required: true }],
required: true,
componentProps: {
placeholder: '请输入',
onChange: (e) => {
},
},
},
{
@ -190,7 +187,7 @@ export const formSchema: FormSchema[] = [
options: [
{ label: '常规表单', value: 0 },
{ label: '视图表单', value: 1 },
],
]
},
colProps: { lg: 24, md: 24 },
},
@ -204,9 +201,6 @@ export const formSchema: FormSchema[] = [
defaultValue: '',
componentProps: {
placeholder: '请输入',
onChange: (e) => {
},
},
},
{
@ -216,6 +210,7 @@ export const formSchema: FormSchema[] = [
span: 24,
},
slot: 'addDatabaseTableSlot',
ifShow: ({ values }) => isButton(values.formType),
},
{
field: 'field1',
@ -224,6 +219,16 @@ export const formSchema: FormSchema[] = [
span: 24,
},
slot: 'addDatabaseContantSlot',
ifShow: ({ values }) => isButton(values.formType),
},
{
field: 'field1',
label: '',
colProps: {
span: 24,
},
slot: 'addViewsDatabaseTableSlot',
ifShow: ({ values }) => !isButton(values.formType),
},
]

162
src/views/demo/onlineform/formdesign/form/index.vue
View File

@ -30,7 +30,7 @@
v-model:value="record.relationName"
:options="record.relationalTable"
:field-names="{ label: 'name', value: 'name' }"
@change="handleRelationalTableChange"
@change="handleRelationalTableChange(record)"
></a-select>
</div>
</template>
@ -71,6 +71,65 @@
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
</div>
</template>
<template #addViewsDatabaseTableSlot="{ model, field }">
<div>添加数据库表（请先选择数据库）</div>
<!-- <BasicTable @register="registerDataBaseTable">
<template v-slot:bodyCell="{ column, record, index }">
<template v-if="column.key === 'fieldAction'">
<div v-if="record.type == 'chlid'">
<a-select
ref="select"
placeholder="请选择"
size="small"
v-model:value="record.field"
:options="record.outColumnKey"
:field-names="{ label: 'dbColumnName', value: 'dbColumnName' }"
></a-select>
</div>
</template>
<template v-if="column.key === 'relationTabAction'" >
<div v-if="record.type == 'chlid'">
<a-select
ref="select1"
size="small"
placeholder="请选择"
v-model:value="record.relationName"
:options="record.relationalTable"
:field-names="{ label: 'name', value: 'name' }"
@change="handleRelationalTableChange(record)"
></a-select>
</div>
</template>
<template v-if="column.key === 'relationFieldAction'">
<div v-if="record.type == 'chlid' && record.relationalTieldTable">
<a-select
ref="select2"
size="small"
placeholder="请选择"
v-model:value="record.relationField"
:options="record.relationalTieldTable"
:field-names="{ label: 'dbColumnName', value: 'dbColumnName' }"
></a-select>
</div>
</template>
<template v-if="column.key === 'action'">
<TableAction :actions="[
{
label: '删除',
color: 'error',
popConfirm: {
title: '是否删除该数据',
confirm: handleDelete.bind(null, record),
},
}
]" />
</template>
</template>
</BasicTable>
<div class="addDataBaseTableBox" @click="handleAddDataBase">
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
</div> -->
</template>
</BasicForm>
@ -95,7 +154,7 @@
import DataObject from './DataObject.vue'
import DataBaseTable from './DataBaseTable.vue'
const emit = defineEmits(['formDataBack']);
const emit = defineEmits(['formDataBack','formDataNoBack']);
const props = defineProps({
formScheme: {
@ -114,34 +173,70 @@
watch(()=>props.formScheme,(newValue,oldValue)=>{
if(newValue){
let schemObj = JSON.parse(newValue.scheme.scheme)
let obj = {
name: newValue.info.name,
category: newValue.info.category,
DbCode: schemObj.dbCode,
enabledMark: newValue.info.enabledMark,
formType: newValue.info.formType,
description: newValue.info.description
if(newValue.scheme.scheme){
let schemObj = JSON.parse(newValue.scheme.scheme)
let obj = {
name: newValue.info.name,
category: newValue.info.category,
DbCode: schemObj.dbCode,
enabledMark: newValue.info.enabledMark,
formType: newValue.info.formType,
description: newValue.info.description
}
console.log('schemObj',schemObj)
setFieldsValue(obj)
setTimeout(()=>{
handleTableData(schemObj.db)
},100)
}
console.log('schemObj',schemObj)
setFieldsValue(obj)
handleTableData(schemObj.db)
}
},{immediate:true,deep:true})
watch(()=>props.isNextSteps,(newValue,oldValue)=>{
console.log('newValue',newValue)
if(newValue){
let tableArr = getDataSourceMain()
let formArr = getFieldsValue()
let obj = {
form: formArr,
table: tableArr
}
emit('formDataBack', obj);
const checkForm = validate();
console.log('checkForm',checkForm)
console.log('formArr',formArr)
if(!formArr.name || !formArr.category || !formArr.DbCode){
emit('formDataNoBack');
console.log('fail')
return false
}
let tabArr = []
if(tableArr){
if(tableArr.length == 1){
emit('formDataBack', obj);
}else{
tableArr.forEach(item =>{
if( item.type != 'main'){
tabArr.push(item.field,item.relationField,item.relationName)
}
})
}
}else{
emit('formDataNoBack');
message.error("请添加数据库表",2)
return
}
if(tabArr.includes(undefined)){
emit('formDataNoBack');
message.error("请完善数据库表信息",2)
}else{
emit('formDataBack', obj);
}
}
},{immediate:true,deep:true})
watch(()=>props.isAddVisible,(newValue,oldValue)=>{
console.log('isAddVisible',newValue)
if(newValue){
setTableDataMain()
resetFields()
@ -264,35 +359,36 @@
function handleTableData(record: Recordable){
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
let tabDatas = record
console.log('reree',record)
tabDatas.forEach(item =>{
if(item.type !== 'main'){
getOutKeyList({tableNames: item.name,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
item.outColumnKey = data[0].db_codecolumnsList
})
item.relationalTable = record.filter((val) => item.name !== val.name)
if(item.relationName){
getOutKeyList({tableNames: item.relationName,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
item.relationalTieldTable = data[0].db_codecolumnsList
if(tabDatas){
tabDatas.forEach(item =>{
if(item.type !== 'main'){
getOutKeyList({tableNames: item.name,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
item.outColumnKey = data[0].db_codecolumnsList
})
item.relationalTable = record.filter((val) => item.name !== val.name)
if(item.relationName){
getOutKeyList({tableNames: item.relationName,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
item.relationalTieldTable = data[0].db_codecolumnsList
})
}
}
}
})
})
}
setTableDataMain(tabDatas)
reload()
}
function handleRelationalTableChange(record: Recordable){
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
let arr = getDataSourceMain()
arr.forEach(item =>{
if(item.relationName == record){
getOutKeyList({tableNames: record,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
if(item.name == record.name){
getOutKeyList({tableNames: record.relationName,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
item.relationalTieldTable = data[0].db_codecolumnsList
item.relationField = ''
item.relationField = undefined
})
}
})

41
src/views/demo/onlineform/formdesign/index.vue
View File

@ -42,7 +42,7 @@
</template>
</BasicTable>
<FormModal @register="registerModal" />
<FormModal @submitsuccess="submitsuccess" @register="registerModal" v-if="formModalVisible" />
</lrlayout>
@ -57,8 +57,8 @@
import { getFormGroupList } from '@/api/formdesign/index';
import { getFormsTypeList } from '@/api/formdesign/index';
import { getFormGroupList,getFormsTypeList } from '@/api/formdesign/index';
import { SettingOutlined } from '@ant-design/icons-vue';
@ -103,31 +103,7 @@
};
return temp;
},
afterFetch: (data) => {
console.log('1234567',data)
// data.forEach(item =>{
// let d = item.f_CreateDate ? new Date(item.f_CreateDate) : new Date(),
// obj = {
// year: d.getFullYear(),
// month: d.getMonth() + 1,
// day: d.getDate(),
// hours: d.getHours(),
// min: d.getMinutes(),
// seconds: d.getSeconds()
// }
// Object.keys(obj).forEach(key => {
// if (obj[key] < 10) obj[key] = `0${obj[key]}`
// })
// item.f_CreateDate = `${obj.year}-${obj.month}-${obj.day} ${obj.hours}:${obj.min}:${obj.seconds}`
// item.f_CreateDate = item.f_CreateDate.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')
// treeData.value.forEach(val =>{
// if(item.f_Category == val.f_ItemValue){
// item.f_Category_Name = val.f_ItemName
// }
// })
// })
//请求之后对返回值进行处理
afterFetch: (data) => {
},
handleSearchInfoFn(info) {
@ -142,6 +118,7 @@
},
});
const formModalVisible = ref(true)
const searchInfo = reactive < Recordable > ({});
const treeData = ref < TreeItem[] > ([]);
@ -165,7 +142,7 @@
}
function handleEdit(record: Recordable) {
console.log('09',record)
formModalVisible.value = true
openModal(true,record);
}
function handleDelete(record: Recordable) {
@ -175,9 +152,15 @@
}
function handleAddForm() {
formModalVisible.value = true
openModal(true, {});
}
function submitsuccess(){
reload()
formModalVisible.value = false
}
onMounted(() => {
fetch();