merge

src/router/routes/index.ts

@@ -39,10 +39,21 @@ export const LoginRoute: AppRouteRecordRaw = {
     title: t('routes.basic.login'),
   },
 };
+export const H5HtmlRoute: AppRouteRecordRaw = {
+  path: '/h5html',
+  name: 'h5html',
+  component: () => import('@/views/demo/h5html/index.vue'),
+  meta: {
+    title: t('routes.basic.h5html'),
+  },
+};
+
+
 
 // Basic routing without permission
 // 未经许可的基本路由
 export const basicRoutes = [
+  H5HtmlRoute,
   LoginRoute,
   RootRoute,
   ...mainOutRoutes,

src/utils/http/axios/index.ts

@@ -89,7 +89,7 @@ const transform: AxiosTransform = {
     if (options.errorMessageMode === 'modal') {
       createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg });
     } else if (options.errorMessageMode === 'message') {
-      createMessage.error(timeoutMsg);
+      // createMessage.error(timeoutMsg);
     }
 
     throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'));

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

@@ -158,7 +158,7 @@
           }
           getOutKeyList({tableNames: fieldTableValue.value, dbCode: receivedData.dbCode}).then((data: AreaRespVO[]) => {
             let arr: any[] = []
-            if(data[0]){
+            if(data && data[0]){
               data[0].db_codecolumnsList.forEach(item =>{
                 arr.push({
                   label: item.dbColumnName,

src/views/demo/form-design/core/formItemConfig.ts

@@ -8,7 +8,43 @@ import { ComponentType } from '@/components/Form/src/types';
 
 import { componentMap as Cmp } from '../components';
 import { Component } from 'vue';
+import { getDeptList,getAccountList,getPosGroupList } from '@/api/demo/system';
 
+//获取部门列表数据
+const deptTreeData = await Promise.all([getDeptListData()])
+function getDeptListData(){
+  let param = {
+    page: 1,
+    limit: 9999
+  };
+  return getDeptList( param ).then( data => {
+    return data
+  })
+}
+
+//获取职级列表数据
+const positionTreeData = await Promise.all([getPositionListData()])
+function getPositionListData(){
+  let param = {
+    page: 1,
+    limit: 9999
+  };
+  return getPosGroupList( param ).then( data => {
+    return data
+  })
+}
+//获取人员选择列表数据
+const userTreeData = await Promise.all([getUserListData()])
+function getUserListData(){
+  let param = {
+    page: 1,
+    limit: 9999
+  };
+  return getAccountList( param ).then( data => {
+    return data.items
+  })
+}
+ 
 const componentMap = new Map<string, Component>();
 
 //如果有其它控件，可以在这里初始化
@@ -56,41 +92,33 @@ export const customComponents: IVFormComponent[] = [
     componentProps: {},
   },
   {
-    component: 'Select',
-    label: '公司选择',
+    component: 'TreeSelect',
+    label: '职级选择',
     icon: 'gg:select',
     field: '',
     colProps: { span: 24 },
     componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
+      fieldNames:{
+        children: 'children',
+        label: 'name',
+        value: 'id',
+      },
+      treeData: positionTreeData[0],
     },
   },
   {
-    component: 'Select',
+    component: 'TreeSelect',
     label: '部门选择',
-    icon: 'gg:select',
+    icon: 'clarity:tree-view-line',
     field: '',
     colProps: { span: 24 },
     componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
+      fieldNames:{
+        children: 'children',
+        label: 'name',
+        value: 'id',
+      },
+      treeData: deptTreeData[0],
     },
   },
   {
@@ -100,16 +128,11 @@ export const customComponents: IVFormComponent[] = [
     field: '',
     colProps: { span: 24 },
     componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
+      fieldNames:{
+        label: 'name',
+        value: 'account',
+      },
+      options: userTreeData[0],
     },
   },
 ];

src/views/demo/h5html/index.data.ts

@@ -0,0 +1,49 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+
+  {
+    title: '名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '分类',
+    dataIndex: 'category',
+  },
+  {
+    title: '类型',
+    dataIndex: 'formType',
+    width: 80,
+    customRender: ({ record }) => {
+      const status = record.formType;
+      const enable = ~~status === 0;
+      const color = enable ? '#67c23a' : '#e6a23c';
+      const text = enable ? '常规表单' : '视图表单';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate'
+  },
+  // {
+  //   title: '备注',
+  //   dataIndex: 'remark',
+  // },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'key',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+  

src/views/demo/h5html/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="[
+              {
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否删除该数据',
+                  confirm: handleDelete.bind(null, record),
+                },
+              }
+            ]" />
+        </template>
+      </template>
+      <template #toolbar>
+        <a-button type="primary" @click="handleAddForm(eFormPreview!)"> 新增 </a-button>
+        
+      </template>
+    </BasicTable>
+    
+    <VformRender ref="eFormPreview" :formConfig="formConfig" @renderdata="renderdata" />
+
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, nextTick, unref,reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getFormGroupList,getBaseConfigList } from '@/api/formdesign/index';
+  import { columns, searchFormSchema } from './index.data';
+  import { cloneDeep } from 'lodash-es';
+  import VformRender from '../form-design/components/VformRender/index.vue';
+  import {  IFormConfig,IToolbarMethods } from '../form-design/typings/v-form-component';
+
+  const eFormPreview = ref<null | IToolbarMethods>(null);
+  
+  const [registerTable, { reload, getSelectRows }] = useTable({
+    title: '表单列表',
+    api: getFormGroupList,
+    rowKey: 'f_Id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    beforeFetch: (data) => {
+      // 接口请求前 参数处理
+      var temp = {
+        page: data.page,
+        limit: data.limit,
+        keyWord: data.key,
+        category: data.f_Category
+      };
+      return temp;
+    },
+    afterFetch: (data) => {    
+      
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
+
+  const formConfig = ref<IFormConfig>({
+    // 表单配置
+    schemas: [],
+    layout: 'horizontal',
+    labelLayout: 'flex',
+    labelWidth: 100,
+    labelCol: {},
+    wrapperCol: {},
+    currentItem: {
+      component: '',
+      componentProps: {},
+    },
+    activeKey: 1,
+  });
+
+  const handleAddForm = (Modal: IToolbarMethods) => {
+    console.log('formConfig',formConfig)
+    const config = cloneDeep(formConfig.value);
+    Modal?.showModal(config);
+  }
+  function handleEdit(record: Recordable) {
+      
+  }
+  function handleDelete(record: Recordable) {
+    // openAccountModal(true, {
+    //   record,
+    // });
+  }
+  function getPublicForm(){
+    getBaseConfigList({ id: "ed985a1e-b007-43d1-af14-be4e44018c8b" }).then((res: AreaRespVO[]) =>{
+      let obj = JSON.parse(res.scheme.scheme)
+      console.log('res',obj.formInfo)
+      formConfig.value.schemas = obj.formInfo.schemas
+    })
+  }
+  //表单填写数据
+  function renderdata(e){
+    console.log('renderdata',e)
+  }
+  
+  onMounted(() => {
+    getPublicForm()
+  })
+</script>

src/views/demo/onlineform/formCall/index.vue

@@ -104,9 +104,14 @@
     // });
   }
   function getPublicForm(){
-    getBaseConfigList({ id: "ed985a1e-b007-43d1-af14-be4e44018c8b" }).then((res: AreaRespVO[]) =>{
+    getBaseConfigList({ id: "e03bd1db-7a4f-43b2-9e8a-f6cd8c2126be" }).then((res: AreaRespVO[]) =>{
       let obj = JSON.parse(res.scheme.scheme)
       console.log('res',obj.formInfo)
+      if(obj.formInfo.schemas){
+        obj.formInfo.schemas.forEach(item =>{
+          
+        })
+      }
       formConfig.value.schemas = obj.formInfo.schemas
     })
   }

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

@@ -76,8 +76,8 @@
     beforeFetch: (data) => {
       // 接口请求前 参数处理
       var temp = {
-        pageIndex: data.page,
-        pageSize: data.limit,
+        page: data.page,
+        limit: data.limit,
         keyWord: data.key,
         dbCode:  receiceDbCode.value
       };

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

@@ -230,29 +230,8 @@ export const formSchema: FormSchema[] = [
     colProps: {
       span: 24,
     },
-    // componentProps: () => {
-    //   return {
-    //     api: getDataBaseCodeList,
-    //     // 接口返回数据
-    //     resultField: 'result',
-    //     labelField: 'text',
-    //     valueField: 'value',
-        
-    //   };
-    // }
     componentProps: {
-      // api: () => {
-      //   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);
         });
@@ -264,15 +243,8 @@ export const formSchema: FormSchema[] = [
         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){
@@ -285,7 +257,6 @@ export const formSchema: FormSchema[] = [
               }
             }
           })
-          console.log('children22',children)
           children.forEach((item) => {
             item.isLeaf = false;
             item.children = [];