Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/views/demo/form-design/components/VFormCreate/components/FormRender.vue

@@ -69,6 +69,20 @@
       </a-col>
     </a-row>
   </template>
+  <template v-else-if="['Tabs'].includes(schema.component)">
+    <a-tabs style="width: 100%">
+      <a-tab-pane v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
+        <FormRender
+          v-for="(item, k) in colItem.children"
+          :key="k"
+          :schema="item"
+          :formData="formData"
+          :formConfig="formConfig"
+          :setFormModel="setFormModel"
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </template>
   <template v-else>
     <VFormItem
       v-if="(isCreateOrModifyComponent && schema.display) || !isCreateOrModifyComponent"

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

@@ -107,6 +107,7 @@
               'TreeSelect',
               'Cascader',
               'AutoComplete',
+              'Tabs',
             ].includes(formConfig.currentItem.component)
           "
         >

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

@@ -90,9 +90,7 @@
       <Form
         label-align="left"
         layout="vertical"
-        v-else-if="
-          formConfig.currentItem.component == 'Card'
-        "
+        v-else-if="formConfig.currentItem.component == 'Card'"
       >
         <FormItem label="标签">
           <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
@@ -101,11 +99,7 @@
           <a-input v-model:value="formConfig.currentItem.field" placeholder="请输入" />
         </FormItem>
         <FormItem label="显示阴影">
-          <a-select
-            ref="select"
-            v-model:value="formConfig.currentItem.shadow"
-            style="width: 100%"
-          >
+          <a-select ref="select" v-model:value="formConfig.currentItem.shadow" style="width: 100%">
             <a-select-option value="always">总是</a-select-option>
             <a-select-option value="hover">悬浮显示</a-select-option>
             <a-select-option value="never">不显示</a-select-option>
@@ -119,7 +113,9 @@
         label-align="left"
         layout="vertical"
         v-else-if="
-        ['CreateUser','ModifyUser','CreateTime','ModifyTime'].includes(formConfig.currentItem.component)
+          ['CreateUser', 'ModifyUser', 'CreateTime', 'ModifyTime'].includes(
+            formConfig.currentItem.component,
+          )
         "
       >
         <FormItem label="标签">
@@ -173,7 +169,10 @@
             </Checkbox>
           </Col>
         </FormItem>
-        <FormItem label="是否必选" v-if="!['Grid'].includes(formConfig.currentItem.component)">
+        <FormItem
+          label="是否必选"
+          v-if="!['Grid', 'Tabs'].includes(formConfig.currentItem.component)"
+        >
           <Switch v-model:checked="formConfig.currentItem.itemProps['required']" />
           <Input
             v-if="formConfig.currentItem.itemProps['required']"
@@ -182,7 +181,7 @@
           />
         </FormItem>
         <FormItem
-          v-if="!['Grid'].includes(formConfig.currentItem.component)"
+          v-if="!['Grid', 'Tabs'].includes(formConfig.currentItem.component)"
           label="校验规则"
           :class="{ 'form-rule-props': !!formConfig.currentItem.itemProps['rules'] }"
         >

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

@@ -52,10 +52,19 @@
         if (!formConfig.value.currentItem?.componentProps?.[key])
           formConfig.value.currentItem!.componentProps![key] = [];
         const len = formConfig.value.currentItem?.componentProps?.[key].length + 1;
-        formConfig.value.currentItem!.componentProps![key].push({
-          label: `选项${len}`,
-          value: '' + len,
-        });
+
+        if (['Tabs'].includes(formConfig.value.currentItem!.component)) {
+          formConfig.value.currentItem!.componentProps![key].push({
+            label: `选项卡${len}`,
+            value: '' + len,
+            children: [],
+          });
+        } else {
+          formConfig.value.currentItem!.componentProps![key].push({
+            label: `选项${len}`,
+            value: '' + len,
+          });
+        }
       };
       const deleteOptions = (index: number) => {
         remove(formConfig.value.currentItem?.componentProps?.[key], index);

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

@@ -47,6 +47,43 @@
         <FormNodeOperate :schema="schema" :currentItem="currentItem" />
       </div>
     </template>
+    <template v-else-if="['Tabs'].includes(schema.component)">
+      <div
+        class="grid-box"
+        :class="{ active: schema.key === currentItem.key }"
+        @click.stop="handleSetSelectItem(schema)"
+      >
+        <a-tabs>
+          <a-tab-pane v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
+            <draggable
+              class="list-main draggable-box"
+              :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
+              v-bind="{
+                group: 'form-draggable',
+                ghostClass: 'moving',
+                animation: 180,
+                handle: '.drag-move',
+              }"
+              item-key="key"
+              v-model="colItem.children"
+              @start="$emit('dragStart', $event, colItem.children)"
+              @add="$emit('handleColAdd', $event, colItem.children)"
+            >
+              <template #item="{ element }">
+                <LayoutItem
+                  class="drag-move"
+                  :schema="element"
+                  :current-item="currentItem"
+                  @handle-copy="$emit('handle-copy')"
+                  @handle-delete="$emit('handle-delete')"
+                />
+              </template>
+            </draggable>
+          </a-tab-pane>
+        </a-tabs>
+        <FormNodeOperate :schema="schema" :currentItem="currentItem" />
+      </div>
+    </template>
     <FormNode
       v-else
       :key="schema.key"

src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts

@@ -163,7 +163,7 @@ export const advanceFormItemColProps: IBaseFormAttrs[] = [
       min: 0,
       marks: { 12: '' },
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'wrapperCol',
@@ -174,7 +174,7 @@ export const advanceFormItemColProps: IBaseFormAttrs[] = [
       min: 0,
       marks: { 12: '' },
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
 ];
 // 控件属性面板的配置项
@@ -191,7 +191,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
         key: item.component + '===' + item.label,
       })),
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'label',
@@ -201,7 +201,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
       type: 'Input',
       placeholder: '请输入标签',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'field',
@@ -211,7 +211,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
       type: 'InputTextArea',
       placeholder: '请输入字段标识',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'defaultValue',
@@ -220,7 +220,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     componentProps: {
       placeholder: '请输入默认值',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'helpMessage',
@@ -229,7 +229,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     componentProps: {
       placeholder: '请输入提示信息',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
 ];
 
@@ -251,7 +251,7 @@ export const advanceFormItemProps: IBaseFormAttrs[] = [
         },
       ],
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
 
   {
@@ -261,7 +261,7 @@ export const advanceFormItemProps: IBaseFormAttrs[] = [
     componentProps: {
       placeholder: '请输入提示信息',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'extra',
@@ -271,7 +271,7 @@ export const advanceFormItemProps: IBaseFormAttrs[] = [
       type: 'InputTextArea',
       placeholder: '请输入额外消息',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'validateTrigger',
@@ -281,7 +281,7 @@ export const advanceFormItemProps: IBaseFormAttrs[] = [
       type: 'InputTextArea',
       placeholder: '请输入',
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'validateStatus',
@@ -311,7 +311,7 @@ export const advanceFormItemProps: IBaseFormAttrs[] = [
         },
       ],
     },
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
 ];
 
@@ -331,7 +331,7 @@ export const baseFormItemControlAttrs: IBaseFormItemControlAttrs[] = [
   {
     name: 'hiddenLabel',
     component: 'Checkbox',
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
     label: '隐藏标签',
   },
   {
@@ -339,7 +339,7 @@ export const baseFormItemControlAttrs: IBaseFormItemControlAttrs[] = [
     label: 'label后面显示冒号',
     component: 'Checkbox',
     componentProps: {},
-    exclude: ['Grid'],
+    exclude: ['Grid', 'Tabs'],
   },
   {
     name: 'hasFeedback',

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

@@ -173,6 +173,40 @@
     (newVal) => {
       if (newVal.value && newVal.value.scheme && newVal.value.scheme.scheme) {
         receivedData.value = JSON.parse(newVal.value.scheme.scheme);
+        if (receivedData.value.formInfo.tabList && receivedData.value.formInfo.tabList.length > 1) {
+          const arr: any = [];
+          receivedData.value.formInfo.tabList.forEach((item, index) => {
+            arr.push({
+              label: item.text,
+              value: index + 1,
+              children: item.schemas,
+            });
+          });
+          receivedData.value.formInfo.schemas = [
+            {
+              component: 'Tabs',
+              label: '选项卡',
+              colProps: {
+                span: 24,
+              },
+              field: 'Tabs',
+              componentProps: {
+                options: arr,
+              },
+              itemProps: {
+                labelCol: {},
+                wrapperCol: {},
+              },
+            },
+          ];
+        }
+        if (
+          receivedData.value.formInfo.tabList &&
+          receivedData.value.formInfo.tabList.length == 1
+        ) {
+          receivedData.value.formInfo.schemas = receivedData.value.formInfo.tabList[0].schemas;
+        }
+        delete receivedData.value.formInfo.tabList;
         //渲染表单
         const editorJsonData = receivedData.value.formInfo as IFormConfig;
         editorJsonData.schemas &&

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

@@ -82,6 +82,27 @@ export function setFormDesignComponents(config: IVFormComponent | IVFormComponen
 
 //外部设置的自定义控件
 export const customComponents: IVFormComponent[] = [
+  {
+    component: 'Tabs',
+    label: '选项卡',
+    icon: 'ant-design:database-outlined',
+    colProps: { span: 24 },
+    field: 'Tabs',
+    componentProps: {
+      options: [
+        {
+          label: '选项卡1',
+          value: '1',
+          children: [],
+        },
+        {
+          label: '选项卡2',
+          value: '2',
+          children: [],
+        },
+      ],
+    },
+  },
   {
     component: 'InputGuid',
     label: 'GUID主键',

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

@@ -127,34 +127,76 @@
     let tabArr: any = [];
     let tabLabelArr: any = [];
     designTab.schemas.forEach((item) => {
-      if (item.componentProps.defaultValue) {
-        item.defaultValue = item.componentProps.defaultValue;
-      }
-      if (item.componentProps.fieldName) {
-        tableData.forEach((element) => {
-          if (element.name == item.componentProps.dataTable) {
-            var currentIndex = element.data.findIndex(
-              (childItem) => childItem.dbColumnName === item.componentProps.fieldName,
-            );
-            item.csType = element.data[currentIndex].csType;
-          }
-        });
-        console.log(item);
-        if (item.csType == 'int') {
-          item.componentProps.options.forEach((optionChild) => {
-            optionChild.value = Number(optionChild.value);
+      if (item.component !== 'Tabs') {
+        if (item.componentProps.defaultValue) {
+          item.defaultValue = item.componentProps.defaultValue;
+        }
+        if (item.componentProps.fieldName) {
+          tableData.forEach((element) => {
+            if (element.name == item.componentProps.dataTable) {
+              var currentIndex = element.data.findIndex(
+                (childItem) => childItem.dbColumnName === item.componentProps.fieldName,
+              );
+              item.csType = element.data[currentIndex].csType;
+            }
           });
         }
-      }
-      // 设计子表给里面的控件增加csType字段
-      if (item.type == 'subTable') {
-        item.columns = changeCloums(item.columns, tableData);
-      }
-      tabArr.push(item.componentProps.fieldName);
-      if (!item.componentProps.fieldName) {
-        tabLabelArr.push(item.label);
+        // 设计子表给里面的控件增加csType字段
+        if (item.type == 'subTable') {
+          item.columns = changeCloums(item.columns, tableData);
+        }
+        tabArr.push(item.componentProps.fieldName);
+        if (!item.componentProps.fieldName) {
+          tabLabelArr.push(item.label);
+        }
+      } else {
+        item.componentProps.options.forEach((val) => {
+          val.children.forEach((list) => {
+            if (list.componentProps && list.componentProps.defaultValue) {
+              list.defaultValue = list.componentProps.defaultValue;
+            }
+            if (list.componentProps && list.componentProps.fieldName) {
+              tableData.forEach((element) => {
+                if (element.name == list.componentProps.dataTable) {
+                  var currentIndex = element.data.findIndex(
+                    (childItem) => childItem.dbColumnName === list.componentProps.fieldName,
+                  );
+                  list.csType = element.data[currentIndex].csType;
+                }
+              });
+            }
+            // 设计子表给里面的控件增加csType字段
+            if (list.type == 'subTable') {
+              list.columns = changeCloums(item.columns, tableData);
+            }
+            tabArr.push(list.componentProps.fieldName);
+            if (!list.componentProps.fieldName) {
+              tabLabelArr.push(list.label);
+            }
+          });
+        });
       }
     });
+
+    let tabList: any = [];
+    if (designTab.schemas.length > 1) {
+      tabList.push({
+        text: '',
+        schemas: [],
+      });
+      designTab.schemas.forEach((item) => {
+        tabList[0].schemas.push(item);
+      });
+    } else {
+      designTab.schemas[0].componentProps.options.forEach((item) => {
+        tabList.push({
+          text: item.label,
+          schemas: item.children,
+        });
+      });
+    }
+    designTab.tabList = tabList;
+    delete designTab.schemas;
     schems.primaryKey = primaryKey.value;
     schems.formInfo = designTab;
     // 表结构配置