Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev

编辑新增接口对接，表单设计器json渲染
2024-03-15 17:02:59 +08:00 · 2024-03-15 17:01:55 +08:00
13 changed files with 465 additions and 204 deletions
--- a/src/api/formdesign/index.ts
+++ b/src/api/formdesign/index.ts
@ -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 }); 
+
+ 
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@ -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);
--- a/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
@ -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
      };
    },
  });
--- a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
@ -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>
--- a/src/views/demo/form-design/components/VFormDesign/components/ImportJsonModal.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/ImportJsonModal.vue
@ -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);
--- a/src/views/demo/form-design/components/VFormDesign/config/componentPropsConfig.ts
+++ b/src/views/demo/form-design/components/VFormDesign/config/componentPropsConfig.ts
@ -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: '尺寸',
--- a/src/views/demo/form-design/components/VFormDesign/index.vue
+++ b/src/views/demo/form-design/components/VFormDesign/index.vue
@ -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);
  };
--- a/src/views/demo/form-design/index.vue
+++ b/src/views/demo/form-design/index.vue
@ -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>
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@ -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")
      })
    }
-    
  }
  
 
--- a/src/views/demo/onlineform/formdesign/form/DataBaseTable.vue
+++ b/src/views/demo/onlineform/formdesign/form/DataBaseTable.vue
@ -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()
--- a/src/views/demo/onlineform/formdesign/form/index.data.ts
+++ b/src/views/demo/onlineform/formdesign/form/index.data.ts
@ -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),
  },
 ]
 
--- a/src/views/demo/onlineform/formdesign/form/index.vue
+++ b/src/views/demo/onlineform/formdesign/form/index.vue
@ -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
        })
      }
    })
--- a/src/views/demo/onlineform/formdesign/index.vue
+++ b/src/views/demo/onlineform/formdesign/index.vue
@ -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();
Author	SHA1	Message	Date
zzq	8681ad3c6c	Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev	2024-03-15 17:02:59 +08:00
zzq	fa3a7546ad	编辑新增接口对接，表单设计器json渲染	2024-03-15 17:01:55 +08:00