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

src/api/formdesign/index.ts

@@ -4,6 +4,7 @@ import { DemoOptionsItem, selectParams, AccountListGetResultModel, AccountParams
 
 enum Api {
   FORMSTYPES_LIST = '/api/SysDataItemDetail/Load', //字典
+  GETDATABASETABLE_LIST = '/api/SysDatabaseLink/LoadDataBaseLinkTree', //获取数据库
   FORMS_LIST = '/api/FormScheme/LoadFormPage', //查询表单列表
   DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage',  //数据对象选择表
   GETIMPORTDATA_FORM = '/api/FormModule/GetTableList',  // 查询导入数据表列表
@@ -47,7 +48,10 @@ export const getImportBaseTableList = (params: NoOptionsParam) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.GETIMPORTDATA_FORM, params });
 
 export const importDataBaseTable = (params: NoOptionsParam) =>
-  defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });   
+  defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });  
+  
+export const getDataBaseCodeList = (params: NoOptionsParam) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLE_LIST, params });
 
 
  

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -9,12 +9,12 @@
       :draggable="false"
       title="慧创 表单设计"
     >
-    <div class="form-box">
+    <div :class="`${prefixCls}`">
-      <div class="form-box-header">
+      <div :class="`${prefixCls}-header`">
-        <div class="form-box-header-logo">
+        <div :class="`${prefixCls}-header-logo`">
           慧创  表单设计
         </div>
-        <div class="steps-box">
+        <div :class="`${prefixCls}-header-stepsBox`">
           <a-steps
             :current="stepsCurrent"
             :items="[
@@ -27,19 +27,17 @@
             ]"
           ></a-steps>
         </div>
-        <div class="button-box">
+        <div :class="`${prefixCls}-header-btnBox`">
           <a-button :disabled="stepsCurrent!==1" @click="formPrevClick">上一步</a-button>
           <a-button :disabled="stepsCurrent==1" @click="formNextClick">下一步</a-button>
           <a-button :disabled="stepsCurrent!==1" @click="submitClick" type="primary">保存</a-button>
           <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
         </div>
       </div>
-      <div class="design-content">
+      <div :class="`${prefixCls}-content`">
         <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> -->
     </div>
       
   </BasicModal>
@@ -218,51 +216,57 @@
     }
   }
   
- 
+  const prefixCls = 'form-box';
 </script>
-<style scoped>
+<style lang="less" scoped>
   .form-box{
     width: 100%;
-    /* height: calc(100% - 55px); */
     height: 100%;
     position:fixed;
     top:0;
     left: 0;
-    background: #fff;
+    background-color: @component-background;
     z-index: 1111;
+
+    &-header{
+      height: 55px;
+
+      &-logo{
+        line-height: 55px;
+        font-size: 18px;
+        margin-left: 20px;
+        font-weight: bold;
+      }
+
+      &-stepsBox{
+        width: 320px;
+        height: 56px;
+        position: fixed;
+        left: 50%;
+        margin-left: -160px;
+        top: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      &-btnBox{
+        width: 310px;
+        height: 56px;
+        position: fixed;
+        right: 10px;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+
+    }
+
+    &-content{
+      height: calc(100% - 55px);
+      padding: 10px;
+      background-color: @component-background;
+    }
   }
-  .form-box-header{
+
-    height: 55px;
-  }
-  .form-box-header-logo{
-    line-height: 55px;
-    font-size: 18px;
-    margin-left: 20px;
-    font-weight: bold;
-  }
-  .design-content{
-    height: calc(100% - 55px);
-    padding: 10px;
-    background: #f0f2f5;
-  }
-  .steps-box{
-    width: 320px;
-    height: 56px;
-    position: fixed;
-    left: 50%;
-    margin-left: -160px;
-    top: 0;
-    display: flex;
-    align-items: center;
-  }
-  .button-box{
-    width: 310px;
-    height: 56px;
-    position: fixed;
-    right: 10px;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
 </style>

src/views/demo/onlineform/formdesign/form/DataObject.vue

@@ -45,6 +45,7 @@
   const [registerModal, { closeModal:closeBaseModal }] = useModalInner((data: any) => {
     receiceDbCode.value = data.dbCode
     clearBaseSelectedRowKeys()
+    reload()
   })
 
   const [registerImportModal, {openModal:openImportTableModal , closeModal:closeImportModal }] = useModal()

src/views/demo/onlineform/formdesign/form/index.data.ts

@@ -1,5 +1,5 @@
 import { BasicColumn, FormSchema } from '@/components/Table';
-import { getFormsTypeList } from '@/api/formdesign/index'
+import { getFormsTypeList , getDataBaseCodeList } from '@/api/formdesign/index'
 import { h  } from 'vue';
 import { Tag } from 'ant-design-vue';
 
@@ -94,25 +94,25 @@ export const columns: BasicColumn[] = [
   {
     title: '表名',
     dataIndex: 'name',
-    width: 150,
+    width: 140,
   },
   {
     title: '外键',
-    width: 150,
+    width: 130,
     key: 'fieldAction',
     dataIndex: 'fieldAction',
     // slots: { customRender: 'fieldAction' },
   },
   {
     title: '关联表',
-    width: 150,
+    width: 130,
     key: 'relationTabAction',
     dataIndex: 'relationTabAction',
     // slots: { customRender: 'relationTabAction' },
   },
   {
     title: '关联主键',
-    width: 150,
+    width: 130,
     key: 'relationFieldAction',
     dataIndex: 'relationFieldAction',
     // slots: { customRender: 'relationFieldAction' },
@@ -224,16 +224,78 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: 'DbCode',
-    component: 'ApiSelect',
+    component: 'ApiTreeSelect',
     label: '数据库',
     required: true,
     colProps: {
       span: 24,
     },
+    // componentProps: () => {
+    //   return {
+    //     api: getDataBaseCodeList,
+    //     // 接口返回数据
+    //     resultField: 'result',
+    //     labelField: 'text',
+    //     valueField: 'value',
+        
+    //   };
+    // }
     componentProps: {
-      options: [
+      // api: () => {
-        { label: '系统数据库', value: 'lrsystemdb' },
+      //   return new Promise((resolve) => {
-      ],
+      //     resolve([
+      //       {
+      //         title: 'Parent Node',
+      //         value: '0-0',
+      //       },
+      //     ]);
+      //   });
+      // },
+      api: () => getDataBaseCodeList().then((data: AreaRespVO[]) => {
+        console.log('aaaaadata',data)
+        return new Promise((resolve) => {
+          resolve(data);
+        });
+      }),
+      labelField: 'text',
+      valueField: 'value',
+      async: true,
+      onChange: (e, v) => {
+        console.log('ApiTreeSelect====>:', e, v);
+      },
+      onLoadData: ({ treeData, resolve, treeNode }) => {
+        console.log('treeNode====>:', treeNode);
+        console.log('treeData====>:', treeData);
+        setTimeout(() => {
+          // const children: Recordable[] = [
+          //   { title: `Child Node ${treeNode.eventKey}-0`, value: `${treeNode.eventKey}-0` },
+          //   { title: `Child Node ${treeNode.eventKey}-1`, value: `${treeNode.eventKey}-1` },
+          // ];
+          const children: Recordable[] = []
+          console.log('children',children)
+          treeData.value.forEach(item =>{
+            if(item.id == treeNode.id){
+              if(item.childNodes){
+                item.childNodes.forEach(val =>{
+                  children.push({
+                    text: val.text,
+                    value: val.value
+                  })
+                })
+              }
+            }
+          })
+          console.log('children22',children)
+          children.forEach((item) => {
+            item.isLeaf = false;
+            item.children = [];
+          });
+          treeNode.dataRef.children = children;
+          treeData.value = [...treeData.value];
+          resolve();
+          return;
+        }, 300);
+      },
     },
   },
   {

src/views/demo/onlineform/formdesign/form/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="l-rblock" >
+  <div  :class="prefixCls" >
-    <div class="l-page-pane">
+    <div :class="`${prefixCls}__content`">
       <BasicForm
         ref="myDataBaseFormRef"
         @register="registerForm"
@@ -60,12 +60,12 @@
               </template>
             </template>
           </BasicTable>
-          <div class="addDataBaseTableBox"  @click="handleAddDataBase">
+          <div :class="`${prefixCls}__content-addbtn`" @click="handleAddDataBase">
             <a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
           </div>
         </template>
         <template #addDatabaseContantSlot="{ model, field }">
-          <div class="connectTableTitle">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
+          <div :class="`${prefixCls}__content-title`">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
           <BasicTable @register="registerContanctTable">
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'fname'">
@@ -136,7 +136,7 @@
               </template>
             </template>
           </BasicTable>
-          <div class="addDataBaseTableBox"  @click="handleAddConnectBase">
+          <div :class="`${prefixCls}__content-addbtn`" @click="handleAddConnectBase">
             <a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
           </div>
         </template>
@@ -171,14 +171,14 @@
               </template>
             </template>
           </BasicTable>
-          <div class="addDataBaseTableBox"  @click="handleAddSqlData">
+          <div :class="`${prefixCls}__content-addbtn`"  @click="handleAddSqlData">
             <a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
           </div>
         </template>
 
         
       </BasicForm>
-      <div class="formLine"></div>
+      <div :class="`${prefixCls}__content-formLine`"></div>
     </div>
   </div>
   
@@ -685,38 +685,44 @@
     setTableDataViews(newArr)
     reloadViews()
   }
+  const prefixCls = 'l-rblock';
 </script>
-<style lang="less">
+<style lang="less" scoped>
   .l-rblock{
     width: 100%;
     height: 100%;
-    background:#f0f2f5;
+    background-color: @border-color-base;
-  }
+
-  .l-page-pane{
+    &__content{
-    box-sizing: border-box;
+      box-sizing: border-box;
-    position: relative;
+      position: relative;
-    width: 100%;
+      width: 100%;
-    height: 100%;
+      height: 100%;
-    max-width: 794px;
+      max-width: 794px;
-    overflow: hidden auto;
+      overflow: hidden auto;
-    background: #fff;
+      background-color: @component-background;
-    border-radius: 4px;
+      border-radius: 4px;
-    margin: auto;
+      margin: auto;
-    padding: 24px;
+      padding: 24px;
-  }
+
-  .addDataBaseTableBox{
+      &-addbtn{
-    border: 1px dashed #f0f0f0;
+        border: 1px dashed #f0f0f0;
-    text-align: center;
+        border-color: @border-color-base;
-    cursor: pointer;
+        text-align: center;
-    margin-top: -20px;
+        cursor: pointer;
-    &:hover {
+        margin-top: -20px;
-      border-color: #409EFF;
+        &:hover {
+          border-color: #409EFF;
+        }
+      }
+
+      &-title{
+        padding-top: 20px;
+      }
+
+      &-formLine{
+        height: 50px;
+      }
     }
   }
-  .connectTableTitle{
-    padding-top: 20px;
-  }
-  .formLine{
-    height: 50px;
-  }
 </style>