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

Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev
2024-03-15 17:01:55 +08:00 · 2024-03-13 17:33:36 +08:00 · 2024-03-13 16:53:57 +08:00 · 2024-03-13 16:53:35 +08:00 · 2024-03-13 16:53:01 +08:00
24 changed files with 642 additions and 274 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/components/ProcessDesigner/index.vue
+++ b/src/components/ProcessDesigner/index.vue
@ -7,7 +7,7 @@
        'connection.changed'
      ]" @connection-added="connectionAdded" @connection-removed="connectionRemoved"
      @connection-changed="connectionChanged" @element-click="elementClick" @init-finished="initModeler"
-      @event="handlerEvent" @save="onSaveProcess" />
+      @event="handlerEvent" @save="onSaveProcess" :schemeCode="props.schemeCode"/>
    <!-- 属性面板 -->
    <bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
      class="process-panel" ref=processPanel :schemeCode="props.schemeCode"/>
@ -52,8 +52,11 @@
    element: null,
  })
  const processPanel = ref < any > ()
+  const processDesigner = ref <any> ()
  async function getFlow() {
    let panel = await processPanel.value.getPanel()
+    let flow = await processDesigner.value.getFlow()
+    panel.scheme.flowContent = flow
    return panel
  }
  async function validateFlow(){
@ -77,6 +80,7 @@
    console.log('connectionChanged')
  }
  function elementClick(element) {
+    console.log(element)
    data.element = element;
  }
  function initModeler(modeler) {
--- a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
@ -41,7 +41,7 @@
 </template>

 <script lang="ts" setup>
-  import { h,provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
+  import { h, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  // 生产环境时优化
  import BpmnModeler from "bpmn-js/lib/Modeler";
@ -54,6 +54,7 @@
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

  const emit = defineEmits(['init-finished', 'event', 'commandStack-changed', 'input', 'change', 'canvas-viewbox-changed', 'destroy', 'save', 'element-click', 'connection-added', 'connection-removed', 'connection-changed']);
+  import { getDetail } from '@/api/sys/WFSchemeInfo'

  // 引入json转换与高亮
  import convert from "xml-js";
@ -107,13 +108,26 @@
      type: String,
      default: "primary",
      validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
-    }
+    },
+    schemeCode: String,
  })

  onMounted(() => {
    initBpmnModeler();
    createNewDiagram(props.value);
+    if (props.schemeCode) {
+      getDetailInfo(1)
+    }
  })
+  async function getDetailInfo(a) {
+    let data = await getDetail({ code: props.schemeCode })
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData
+    console.log(wfData)
+    if (a == 1) {
+      createNewDiagram(data.scheme.flowContent)
+    }
+  }
  function onSave() {
    return new Promise((resolve, reject) => {
      if (process.bpmnModeler == null) {
@ -145,8 +159,8 @@
    // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
    props.events.forEach(event => {
      EventBus.on(event, function (eventObj) {
-        provide('wfdesign',eventObj)
-        let eventName = event.replace(/\./g, "-");
+        provide('wfdesign', eventObj)
+        let eventName = event.replace('.', "-");
        let element = eventObj ? eventObj.element : null;
        emit(eventName, element, eventObj);
        emit('event', eventName, element, eventObj);
@ -318,6 +332,7 @@
  /*-----------------------------    方法结束     ---------------------------------*/
  function previewProcessXML() {
    process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+      console.log(xml)
      process.previewResult = xml;
      process.previewType = "xml";
      process.previewModelVisible = true;
@ -327,13 +342,25 @@
    process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
      console.log(convert.xml2json(xml, { spaces: 2 }))
      process.previewResult = convert.xml2json(xml, { spaces: 2 });
+      console.log(convert.json2xml(process.previewResult, { spaces: 2 }))
      process.previewType = "json";
      process.previewModelVisible = true;
    });
  }
+  async function getFlow() {
+    let flowContent
+    await process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+      console.log(xml)
+      flowContent = xml;
+    });
+    return flowContent
+  }
+  defineExpose({
+    getFlow
+  })
 </script>
 <style scoped>
-::v-deep .bjs-container a{
-  visibility: hidden;
-}
+  ::v-deep .bjs-container a {
+    visibility: hidden;
+  }
 </style>
--- a/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/ProcessDesigner/package/penal/PropertiesPanel.vue
@ -2,14 +2,14 @@
  <div :class="prefixCls" :style="{ width: `${props.width}px` }">
    <a-tabs v-model:activeKey="configActiveName">
      <a-tab-pane :tab="data.wfNodeName" key="1">
-        <start-event-option ref="startRef" :element="data.currentWfNode"
+        <start-event-option ref="startRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
          :class="data.currentWfNode.type=='bpmn:StartEvent' ? '' : 'hidden'"></start-event-option>
-        <user-task-option ref="taskRef" :element="data.currentWfNode"
+        <user-task-option ref="taskRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
          :class="data.currentWfNode.type=='bpmn:Task' ? '' : 'hidden'">
        </user-task-option>
-        <end-event-option ref="endRef" :element="data.currentWfNode"
+        <end-event-option ref="endRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
          :class="data.currentWfNode.type=='bpmn:EndEvent' ? '' : 'hidden'"></end-event-option>
-        <subprocess-option ref="subprocessRef" :element="data.currentWfNode"
+        <subprocess-option ref="subprocessRef" :element="data.currentWfNode" :schemeCode="props.schemeCode"
          :class="data.currentWfNode.type=='bpmn:SubProcess' ? '' : 'hidden'"></subprocess-option>
      </a-tab-pane>
      <a-tab-pane tab="流程属性" key="2">
@ -75,18 +75,17 @@
    element: Object,
    schemeCode: String,
  })
-  
+
  const startRef = ref < any > ()
  const shcemeinfoRef = ref < any > ()
  const authRef = ref < any > ()
  const taskRef = ref < any > ()
  const endRef = ref < any > ()
  const subprocessRef = ref < any > ()
-  
  const configActiveName = ref('2')
  const data = reactive({
    currentWfNode: undefined,
-    wfNodeName: ""
+    wfNodeName: "",
  })
  watch(
    () => props.element,
@ -181,7 +180,6 @@
    };

    let wfData = scheme.wfData
-
    let auth = {
      authType: data.schemeinfo.authType,
      authData: data.schemeAuthList.map(t => {
@ -194,7 +192,6 @@
    }
    shcemeinfoRef.value.setForm(baseinfo)
    authRef.value.setForm(auth)
-    console.log(wfData)
  }

  function scriptTaskNodeInit(node) {
@ -244,10 +241,10 @@
    wfData.push(endFrom)
    let taskFrom = await !(taskRef.value) ? {} : taskRef.value.getForm();
    let subprocessFrom = await !(subprocessRef.value) ? {} : subprocessRef.value.getForm();
-    if(subprocessFrom != undefined){
+    if (subprocessFrom != undefined) {
      wfData.push(subprocessFrom)
    }
-    if(subprocessFrom != undefined){
+    if (subprocessFrom != undefined) {
      wfData.push(taskFrom)
    }
    // 3.流程节点信息
@ -289,7 +286,7 @@
    };
    let dto = {
      schemeinfo: {
-        id:baseinfo.id,
+        id: baseinfo.id,
        code: baseinfo.code,
        name: baseinfo.name,
        category: baseinfo.category,
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@ -1,7 +1,6 @@
 <!-- 开始节点配置 -->
 <template>
  <div class="start-event">
-
    <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <a-form-item label="节点标识">
@ -17,7 +16,6 @@
        <a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
          :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
      </a-form-item>
-
      <a-divider plain="true">表单添加</a-divider>
      <a-tabs v-model:activeKey="node.formType" type="card" size="small" centered="true">
        <a-tab-pane key="1" tab="自定义表单">
@ -91,8 +89,10 @@
 </template>

 <script lang="ts" setup>
-  import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
+  import { reactive, defineProps, computed, inject, ref, watch, h ,onMounted} from 'vue'
  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
+  import { getDetail } from '@/api/sys/WFSchemeInfo'
+
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const props = defineProps({
@ -100,7 +100,8 @@
      type: Boolean,
      default: false
    },
-    element: Object
+    element: Object,
+    schemeCode:String,
  })
  const data = reactive({
    columns: [
@ -130,7 +131,7 @@
    formRelations: [],
    elementData: props.element
  })
-  const node = reactive({
+  let node = ref({
    id: data.elementData.id,
    type: data.elementData.type,
    isNextAuditor: false,
@ -158,13 +159,14 @@
    () => props.element,
    (newVal, oldVal) => {
      if(newVal.type == "bpmn:StartEvent"){
-        node.id = newVal.id
-        node.type = newVal.type
+        node.value.id = newVal.id
+        node.value.type = newVal.type
+        getDetailInfo()
      }
    }
  )
  watch(
-    () => node.formType,
+    () => node.value.formType,
    (newVal, oldVal) => {
      if (newVal == 1) {
        data.columns = data.columns.filter(item => item.dataIndex !== 'operation');
@ -176,8 +178,19 @@
      }
    }
  )
+  async function getDetailInfo() {
+    let data = await getDetail({ code: props.schemeCode })
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData
+    wfData.forEach(element => {
+      if(element.id == node.value.id){
+        node.value = element
+      }
+    });
+   
+  }
  function handleAddAuthField() {
-    node.authFields.push({
+    node.value.authFields.push({
      field: '',
      label: '',
      required: true,
@ -186,15 +199,19 @@
    })
  }
  function handleDeleteAuthField(key) {
-    node.authFields = node.authFields.filter(item => item.field !== key);
+    node.value.authFields = node.value.authFields.filter(item => item.field !== key);
  }
-
  function getForm() {
-    return node
+    return node.value
  }
  defineExpose({
    getForm
  })
+  onMounted(() => {
+    if (props.schemeCode) {
+      getDetailInfo()
+    }
+  })
 </script>
 <style lang="less" scoped>
  .site-space-compact-wrapper {
--- a/src/components/ProcessDesigner/package/penal/subprocess/index.vue
+++ b/src/components/ProcessDesigner/package/penal/subprocess/index.vue
@ -21,13 +21,15 @@
 </template>

 <script lang="ts" setup>
-  import { reactive, defineProps, computed, inject, ref, watch, h } from 'vue'
+  import { reactive, defineProps, computed, inject, ref, watch, h ,onMounted} from 'vue'
+  import { getDetail } from '@/api/sys/WFSchemeInfo'
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const props = defineProps({
-    element: Object
+    element: Object,
+    schemeCode:String,
  })
-  const node = reactive({
+  let node = ref({
    id: '',
    isAsync: false,
    wfschemeId: '',
@ -37,18 +39,35 @@
    () => props.element,
    (newVal, oldVal) => {
      if (newVal.type == "bpmn:SubProcess") {
-        node.id = newVal.id
-        node.type = newVal.type
+        node.value.id = newVal.id
+        node.value.type = newVal.type
+        getDetailInfo()
      }
    }
  )
+  async function getDetailInfo() {
+    let data = await getDetail({ code: props.schemeCode })
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData
+    wfData.forEach(element => {
+      if(element.id == node.value.id){
+        node.value = element
+      }
+    });
+   
+  }
  const data = reactive({
    list: [],
    verisons: []
  })
+  onMounted(() => {
+    if (props.schemeCode) {
+      getDetailInfo()
+    }
+  })
  function getForm() {
-    if (node.id != '') {
-      return node
+    if (node.value.id != '') {
+      return node.value
    }
  }
  defineExpose({
--- a/src/components/ProcessDesigner/package/penal/userTask/index.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/index.vue
@ -1,7 +1,7 @@
 <!-- 开始节点配置 -->
 <template>
    <div class="user-task">
-        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
+        <a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol">
            <a-collapse v-model:activeKey="activeKey" accordion ghost>
                <a-collapse-panel key="1" header="基础配置">
@ -196,10 +196,13 @@
    import AuditorLevel from './src/auditorLevel.vue'
    import { getOrgPositonTree, userOrgs } from '@/api/demo/system';
    import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
+    import { getDetail } from '@/api/sys/WFSchemeInfo'
+
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
+    const activeKey = ref('1')
+
    const data = reactive({
-        activeKey: '1',
        atuoAgreeOptions: [{ value: '1', label: '处理人就是提交人' }, { value: '2', label: '处理人和上一步的处理人相同' }, { value: '3', label: '处理人审批过' }],
        postOpen: false,
        roleOpen: false,
@ -241,7 +244,7 @@
        isLooker: false,
        conditionOptions: [{ value: '1', label: '同一个部门' }, { value: '2', label: '同一个公司' }, { value: '3', label: '发起人上级' }, { value: '4', label: '发起人下级' }],
    })
-    const node = reactive({
+    let node = ref({
        id: "",
        type: "",
        isAddSign: false,
@ -295,17 +298,35 @@

    })
    const props = defineProps({
-        element: Object
+        element: Object,
+        schemeCode: String,
    })
    watch(
        () => props.element,
        (newVal, oldVal) => {
            if (newVal.type == "bpmn:Task") {
-                node.id = newVal.id
-                node.type = newVal.type
+                node.value.id = newVal.id
+                node.value.type = newVal.type
+                getDetailInfo()
            }
        }
    )
+    async function getDetailInfo() {
+        let data = await getDetail({ code: props.schemeCode })
+        let scheme = JSON.parse(data.scheme.content);
+        let wfData = scheme.wfData
+        wfData.forEach(element => {
+            if (element.id == node.value.id) {
+                node.value = element
+            }
+        });
+
+    }
+    onMounted(() => {
+        if (props.schemeCode) {
+            getDetailInfo()
+        }
+    })
    // 岗位
    const posRef = ref < any > ()
    function handlePostClick(isLooker) {
@ -364,21 +385,21 @@
    // 审核人员设置
    function onDelete(key, isLook) {
        if (isLook) {
-            node.lookUsers = node.lookUsers.filter(item => item.name !== key);
+            node.value.lookUsers = node.value.lookUsers.filter(item => item.name !== key);
        } else {
-            node.auditUsers = node.auditUsers.filter(item => item.name !== key);
+            node.value.auditUsers = node.value.auditUsers.filter(item => item.name !== key);
        }
    }
    // 按钮设置
    function handleAddBtns() {
-        node.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
+        node.value.btnlist.push({ code: '', name: '', hidden: false, isNextAuditor: false, isSign: false })
    }
    function handleDeleteBtns(key) {
-        node.btnlist = node.btnlist.filter(item => item.code !== key);
+        node.value.btnlist = node.value.btnlist.filter(item => item.code !== key);
    }
    function getForm() {
-        if(node.id!=''){
-            return node
+        if (node.value.id != '') {
+            return node.value
        }
    }
    defineExpose({
--- a/src/layouts/default/tabs/index.vue
+++ b/src/layouts/default/tabs/index.vue
@ -124,6 +124,7 @@

  // Close the current tab
  function handleEdit(targetKey: string) {
+    console.log(targetKey)
    // Added operation to hide, currently only use delete operation
    if (unref(unClose)) {
      return;
--- 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();
--- a/src/views/demo/workflow/scheme/HistoryDrawer.vue
+++ b/src/views/demo/workflow/scheme/HistoryDrawer.vue
@ -79,12 +79,12 @@
                const { createMessage } = useMessage();
                updateScheme({ schemeId: record.id, id: searchInfo.id })
                  .then((data) => {
-                    createMessage.success(data.message);
+                    createMessage.success('版本切换成功');
                    schemeId.value = record.id
                    reload()
                  })
                  .catch((err) => {
-                    createMessage.error(err.message);
+                    createMessage.success('版本切换失败');
                  })
                  .finally(() => {
                    record.pendingStatus = false;
--- a/src/views/demo/workflow/scheme/index.vue
+++ b/src/views/demo/workflow/scheme/index.vue
@ -1,6 +1,7 @@
 <template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="classifyEdit" @add='handleCreate'  @success="handleSuccess"/>
+    <SchemeTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="classifyEdit" @add='handleCreate'
+      @success="handleSuccess" />
    <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
      :searchInfo="searchInfo">
      <template #toolbar>
@ -30,7 +31,7 @@

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getButtonList, getMenuDetail, deleteButton } from '@/api/demo/system';
-  import { getLoadPage } from '@/api/sys/WFSchemeInfo';
+  import { getLoadPage, del } from '@/api/sys/WFSchemeInfo';

  import { PageWrapper } from '@/components/Page';
  import SchemeTree from './SchemeTree.vue';
@ -49,7 +50,7 @@
  defineOptions({ name: 'SchemeManagement' });
  const searchInfo = reactive < Recordable > ({});

-  const [registerHistoryDrawer, { openDrawer:openHistoryDrawer }] = useDrawer();
+  const [registerHistoryDrawer, { openDrawer: openHistoryDrawer }] = useDrawer();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
    title: '模板列表',
@ -90,9 +91,8 @@
    go('/dashboard/scheme_preview/' + record.id);
  }
  // 查看历史记录
-  function handleHistory(record){
-    console.log(record)
-    openHistoryDrawer(true,{
+  function handleHistory(record) {
+    openHistoryDrawer(true, {
      record
    })
  }
@ -102,7 +102,7 @@
      return createMessage.warn('请选择一个模板进行编辑');
    }
    const record = rows[0]
-    go('/dashboard/scheme_preview/add?code='+record.code);
+    go('/dashboard/scheme_preview/add?code=' + record.code);
  }
  async function classifyEdit(record) {
    openDrawer(true, {
@ -118,16 +118,23 @@
  async function handleDelete(record: Recordable) {
    let rows = getSelectRows();
    if (rows.length == 0) {
-      return createMessage.warn('请选择一个按钮进行删除');
+      return createMessage.warn('请选择一个模板进行删除');
+    }
+    const query = {
+      id: rows[0].id
    }
-    const query = [rows[0].id]
    createConfirm({
      iconType: 'info',
      title: '删除',
-      content: '确定要删除当前按钮吗',
+      content: '确定要删除当前模板吗',
      onOk: async () => {
-        const data = await deleteButton(query);
+        const data = await del(query);
        reload();
+        if (data) {
+          return createMessage.warn('删除成功');
+        }else{
+          return createMessage.warn('删除失败');
+        }
      },
    });
  }
--- a/src/views/demo/workflow/scheme/preview.vue
+++ b/src/views/demo/workflow/scheme/preview.vue
@ -1,7 +1,9 @@
 <template>
  <div class="preview-box">
    <div class="btn-box">
-      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button>
+      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(2)" class="ml-2">暂存 </a-button>
+      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(1)" class="ml-2">保存 </a-button>
+      <a-button type="primary" :icon="h(CloseCircleOutlined)" @click="closePreview" class="ml-2" danger>关闭 </a-button>
    </div>
    <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
      v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form" :schemeCode="schemeCode"
@ -13,9 +15,15 @@
 <script lang="ts" setup>
  import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
-  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
+  import { SaveOutlined, CloseCircleOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  import { postAdd ,update} from '@/api/sys/WFSchemeInfo'
  import { useRoute } from 'vue-router'
+  import { useMultipleTabStore } from '@/store/modules/multipleTab';
+  import { useRouter } from 'vue-router';
+
+  const tabStore = useMultipleTabStore();
+  const router = useRouter();
+
  const route = useRoute()
  const schemeCode = route.query.code
  const designerOpen = ref(false)
@ -29,18 +37,24 @@
    }
  })
  const modelDesigner = ref < any > ()
-  async function onSave() {
+  async function onSave(type) {
    let validateData = await modelDesigner.value.validateFlow()
    if (validateData) {
      let formData = await modelDesigner.value.getFlow()
-      formData.scheme.type = 1
+      console.log(formData)
+      // 1正式 2草稿
+      formData.scheme.type = Number(type)
      if(!schemeCode){
        let data = await postAdd(formData)
      }else{
        let data = await update(formData)
      }
+      closePreview()
    }
  }
+  function closePreview(){
+    tabStore.closeTabByKey('/dashboard/scheme_preview/add', router);
+  }
 </script>
 <style scoped>
  .preview-box {
--- a/src/views/demo/workflow/scheme/scheme.data.ts
+++ b/src/views/demo/workflow/scheme/scheme.data.ts
@ -40,10 +40,10 @@ export const columns: BasicColumn[] = [
            updateState({ id: record.id, state: newStatus })
              .then((data) => {
                record.enabledMark = newStatus;
-                createMessage.success(data.message);
+                createMessage.success('状态修改成功');
              })
              .catch((err) => {
-                createMessage.error(err.message);
+                createMessage.success('状态修改失败');
              })
              .finally(() => {
                record.pendingStatus = false;
Author	SHA1	Message	Date
zzq	fa3a7546ad	编辑新增接口对接，表单设计器json渲染	2024-03-15 17:01:55 +08:00
zzq	d52e7b1dc1	Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev	2024-03-13 17:33:36 +08:00
刘妍	743edcba2b	Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev	2024-03-13 16:53:57 +08:00
刘妍	6cc00a29c5	Merge branch 'ly' into dev	2024-03-13 16:53:35 +08:00
刘妍	e03e530e99	简单的模板设计：编辑模板，节点面板流程图展示，属性面板数据绑定。编辑和删除接口对接	2024-03-13 16:53:01 +08:00