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

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

@@ -5,8 +5,50 @@
   <div class="properties-content">
     <div class="properties-body" v-if="formConfig.currentItem">
       <Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择组件" />
+      <Form
+        label-align="left"
+        layout="vertical"
+        v-if="
+          ['Grid'].includes(formConfig.currentItem.component) &&
+          formConfig.currentItem.type == 'subTable'
+        "
+      >
+        <FormItem v-for="item in subTableOptions" :key="item.name" :label="item.label">
+          <!--     处理数组属性，placeholder       -->
+          <div v-if="item.children">
+            <template v-for="(child, index) of item.children" :key="index">
+              <component
+                v-if="child.component"
+                v-bind="child.componentProps"
+                v-model:value="formConfig.currentItem.componentProps[item.name][index]"
+                :is="child.component"
+              />
+            </template>
+          </div>
+          <!--     如果不是数组，则正常处理属性值       -->
+          <component
+            v-else-if="item.component"
+            class="component-prop"
+            v-bind="item.componentProps"
+            :is="item.component"
+            @change="handleFieldTableChange"
+            v-model:value="formConfig.currentItem.componentProps[item.name]"
+          />
+        </FormItem>
 
-      <Form label-align="left" layout="vertical">
+        <FormItem label="控制属性">
+          <Col v-for="item in SubControllOptions" :key="item.name">
+            <Checkbox
+              v-if="showControlAttrs(item.includes)"
+              v-bind="item.componentProps"
+              v-model:checked="formConfig.currentItem.componentProps[item.name]"
+            >
+              {{ item.label }}
+            </Checkbox>
+          </Col>
+        </FormItem>
+      </Form>
+      <Form label-align="left" layout="vertical" v-else>
         <!--    循环遍历渲染组件属性      -->
 
         <div v-if="formConfig.currentItem && formConfig.currentItem.componentProps">
@@ -68,7 +110,13 @@
           <FormOptions />
         </FormItem>
 
-        <FormItem label="栅格" v-if="['Grid'].includes(formConfig.currentItem.component)">
+        <FormItem
+          label="栅格"
+          v-if="
+            ['Grid'].includes(formConfig.currentItem.component) &&
+            formConfig.currentItem.label == '栅格布局'
+          "
+        >
           <FormOptions />
         </FormItem>
       </Form>
@@ -97,6 +145,8 @@
     baseComponentAttrs,
     baseComponentCommonAttrs,
     componentPropsFuncs,
+    designSubTableAttrs,
+    designSubControlAttrs,
   } from '../../VFormDesign/config/componentPropsConfig';
   import FormOptions from './FormOptions.vue';
   import { formItemsForEach, remove } from '../../../utils';
@@ -123,24 +173,29 @@
     setup() {
       let fieldTableValue = ref();
       let FieldTableOptions = ref();
-
+      let ChlidTableOptions = ref(); //子表
       let receivedData = ref();
       const handleNextStepsData = inject('handleNextStepsData');
+      let currentIndex = ref(); //判断是不是子表里的
       watch(
         () => handleNextStepsData, // 点击下一步按钮传递的参数
         (newVal) => {
-          console.log('下一步', newVal);
           FieldTableOptions.value = [];
+          ChlidTableOptions.value = [];
           if (newVal && newVal.value && newVal.value.scheme && newVal.value.scheme.scheme) {
             receivedData.value = JSON.parse(newVal.value.scheme.scheme);
-
             receivedData.value.db.forEach((item) => {
               FieldTableOptions.value.push({
                 value: item.name,
                 label: item.name,
               });
+              if (item.type == 'chlid') {
+                ChlidTableOptions.value.push({
+                  value: item.name,
+                  label: item.name,
+                });
+              }
             });
-            console.log('receivedData.value', receivedData.value);
           }
         },
         { deep: true, immediate: true },
@@ -171,7 +226,6 @@
         });
       };
       const handleFieldTableChange = (e) => {
-        // console.log('cccccc', e);
         fieldTableValue.value = e;
         fetch();
         inputOptions.value.forEach((item) => {
@@ -184,13 +238,13 @@
       // 让compuated属性自动更新
 
       const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[]);
+
       const showControlAttrs = (includes: string[] | undefined) => {
         if (!includes) return true;
         return includes.includes(formConfig.value.currentItem!.component);
       };
 
       const { formConfig } = useFormDesignState();
-
       if (formConfig.value.currentItem) {
         formConfig.value.currentItem.componentProps =
           formConfig.value.currentItem.componentProps || {};
@@ -199,6 +253,9 @@
       watch(
         () => formConfig.value.currentItem?.field,
         (_newValue, oldValue) => {
+          currentIndex.value = formConfig.value.schemas.findIndex(
+            (element) => element.field === formConfig.value.currentItem.field,
+          );
           formConfig.value.schemas &&
             formItemsForEach(formConfig.value.schemas, (item) => {
               if (item.link) {
@@ -212,6 +269,10 @@
       watch(
         () => formConfig.value.currentItem && formConfig.value.currentItem.component,
         () => {
+          console.log(formConfig.value);
+          currentIndex.value = formConfig.value.schemas.findIndex(
+            (element) => element.field === formConfig.value.currentItem.field,
+          );
           allOptions.value = [];
           baseComponentControlAttrs.forEach((item) => {
             item.category = 'control';
@@ -264,6 +325,11 @@
         });
       });
 
+      // 控制性的选项
+      const SubControllOptions = computed(() => {
+        return designSubControlAttrs;
+      });
+
       // 非控制性选择
       const inputOptions = computed(() => {
         fetch();
@@ -273,8 +339,12 @@
 
         arr.forEach((item) => {
           if (item.name == 'dataTable') {
+            if (currentIndex.value == -1) {
+              item.componentProps.options = ChlidTableOptions;
+            } else {
               item.componentProps.options = FieldTableOptions;
             }
+          }
           if (item.name == 'fieldName') {
             item.componentProps.options = FieldNamesOptions;
           }
@@ -282,6 +352,18 @@
         return arr;
       });
 
+      const subTableOptions = computed(() => {
+        let arr = designSubTableAttrs;
+        arr.forEach((item) => {
+          if (item.name == 'dataTable') {
+            item.componentProps.options = ChlidTableOptions;
+          }
+          if (item.name == 'fieldName') {
+            item.componentProps.options = FieldNamesOptions;
+          }
+        });
+        return arr;
+      });
       watch(
         () => formConfig.value.currentItem!.componentProps,
         () => {
@@ -310,9 +392,12 @@
         showControlAttrs,
         linkOptions,
         controlOptions,
+        SubControllOptions,
         inputOptions,
+        subTableOptions,
         fieldTableValue,
         FieldTableOptions,
+        ChlidTableOptions,
         handleFieldTableChange,
         fetch,
       };

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

@@ -73,6 +73,15 @@
           <Switch v-model:checked="formConfig.currentItem.mapSetData.isEnablePostionJump" />
         </FormItem>
       </Form>
+      <Form
+        v-else-if="
+          formConfig.currentItem.component == 'Grid' && formConfig.currentItem.type == 'subTable'
+        "
+      >
+        <FormItem label="标签">
+          <a-input v-model:value="formConfig.currentItem.label" placeholder="请输入" />
+        </FormItem>
+      </Form>
       <Form v-else label-align="left" layout="vertical">
         <div v-for="item of baseFormItemProps" :key="item.name">
           <FormItem :label="item.label" v-if="showProps(item.exclude)">

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

@@ -200,6 +200,54 @@ export const baseComponentCommonAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
   },
 ];
 
+// 设计子表属性
+export const designSubTableAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
+  {
+    name: 'dataTable',
+    label: '数据表',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请输入',
+      allowClear: true,
+      options: [],
+    },
+  },
+  {
+    name: 'fieldName',
+    label: '排序字段',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请输入',
+      options: [],
+    },
+  },
+
+  {
+    name: 'addBtnText',
+    label: '按钮文本',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+      options: [],
+    },
+  },
+];
+// 设计子表控制属性
+export const designSubControlAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
+  {
+    name: 'isAddBtn',
+    label: '添加按钮',
+  },
+  {
+    name: 'isRemoveBtn',
+    label: '删除按钮',
+  },
+  {
+    name: 'isShowNum',
+    label: '序列号',
+  },
+];
+
 const componentAttrs: IBaseComponentProps = {
   AutoComplete: [
     {

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

@@ -191,6 +191,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
         key: item.component + '===' + item.label,
       })),
     },
+    exclude: ['Grid'],
   },
   {
     name: 'label',

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

@@ -142,6 +142,28 @@ export const customComponents: IVFormComponent[] = [
     colProps: { span: 24 },
     componentProps: {},
   },
+  {
+    field: '',
+    component: 'Grid',
+    label: '设计子表',
+    icon: 'ant-design:snippets-outlined',
+    type: 'subTable',
+    componentProps: {},
+    columns: [
+      {
+        span: 12,
+        children: [],
+      },
+      {
+        span: 12,
+        children: [],
+      },
+    ],
+    colProps: { span: 24 },
+    options: {
+      gutter: 0,
+    },
+  },
 ];
 
 // 左侧控件列表与初始化的控件属性

src/views/demo/form-design/typings/v-form-component.ts

@@ -106,6 +106,8 @@ export interface IVFormComponent {
   columns?: Array<{ span: number; children: any[] }>;
   // 图斑数据
   mapSetData?: MapComponent;
+  // 判断子表的字段
+  type?: string;
 }
 
 declare type namesType = string | string[];