表单设计、发布-穿梭框里出现的bug

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

@@ -38,7 +38,7 @@
           图斑组件
         </Divider>
         <a-button
-          v-if="['Button'].includes(schema.component)"
+          v-else-if="['Button'].includes(schema.component)"
           :type="schema.componentProps.type"
           :shape="schema.componentProps.shape"
           :size="schema.componentProps.size"
@@ -78,6 +78,24 @@
             :defaultValue="schema.defaultValue">
           </a-select>
         </div>
+        <a-transfer
+          v-else-if="['Transfer'].includes(schema.component)"
+          :dataSource="schema.componentProps.dataSource"
+          :targetKeys="schema.componentProps.targetKeys"
+          :selectedKeys="schema.componentProps.selectedKeys"
+          :schema="schema"
+          :render="(item) => `${item.title} ${item.description}`"
+          :titles="schema.componentProps.titles"
+          :disabled="schema.componentProps.disabled"
+          :oneWay="schema.componentProps.oneWay"
+          :pagination="schema.componentProps.pagination"
+          :showSearch="schema.componentProps.showSearch"
+          :showSelectAll="schema.componentProps.showSelectAll"
+          @change="transferChange"
+          @search="transferSearch"
+          @selectChange="transferSelectChange"
+          @click="handleClick(schema)"
+        />
         <component
           v-else
           class="v-form-item-wrapper"
@@ -258,6 +276,17 @@
         setFormModel(props.schema.field!, value);
         emit('change', value);
       };
+
+      // 穿梭框-左右穿梭
+      const transferChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
+        props.schema.componentProps.targetKeys = nextTargetKeys;
+      };
+      // 穿梭框-查找
+      const transferSearch = (dir: string, value: string) => {};
+      // 穿梭框-选中
+      const transferSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+        props.schema.componentProps.selectedKeys = sourceSelectedKeys.concat(targetSelectedKeys);
+      };
       return {
         ...toRefs(state),
         componentItem,
@@ -269,6 +298,9 @@
         colPropsComputed,
         selectUseOptions,
         showSelectDictionaryList,
+        transferChange,
+        transferSearch,
+        transferSelectChange,
       };
     },
   });

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

@@ -365,8 +365,7 @@ export const commonComponents: IVFormComponent[] = [
     field: '',
     colProps: { span: 24 },
     componentProps: {
-      render: (item) => item.title,
+      titles: ['', ''],
-      titles: ['Source', 'Target'],
       dataSource: [
         {
           key: 'key-1',
@@ -387,6 +386,8 @@ export const commonComponents: IVFormComponent[] = [
           disabled: false,
         },
       ],
+      targetKeys: [],
+      selectedKeys: [],
     },
   },
 ];

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

@@ -810,24 +810,31 @@
       }
       if (columnObj.table.querys) {
         columnObj.table.querys.forEach((item) => {
-          if (item.options) {
+          // if (item.options) {
+          //   searchFormSchema.push({
+          //     field: item.key,
+          //     component: item.type || 'Input',
+          //     label: item.label,
+          //     colProps: { span: 6 },
+          //     componentProps: {
+          //       options: item.options,
+          //     },
+          //   });
+          // } else {
+          //   searchFormSchema.push({
+          //     field: item.key,
+          //     component: item.type || 'Input',
+          //     label: item.label,
+          //     colProps: { span: 6 },
+          //   });
+          // }
+          if (['Transfer'].includes(item.type)) {
             searchFormSchema.push({
               field: item.key,
-              component: item.type || 'Input',
+              component: item.type,
               label: item.label,
-              colProps: { span: 6 },
+              colProps: { span: 12 },
-              componentProps: {
+              componentProps: item.componentProps,
-                options: item.options,
-              },
-            });
-          } else {
-            searchFormSchema.push({
-              field: item.key,
-              component: item.type || 'Input',
-              label: item.label,
-              colProps: { span: 6 },
-            });
-          }
         });
       }
       callColumns.forEach((item) => {

src/views/demo/onlineform/formModule/modalDesign.vue

@@ -281,16 +281,28 @@
           !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
       )
       .map((t) => {
-        if (t.componentProps.options) {
+        // if (t.componentProps.options) {
+        //   return {
+        //     key: t.field,
+        //     label: t.label,
+        //     type: t.component,
+        //     options: t.componentProps.options,
+        //     componentProps: t.componentProps,
+        //   };
+        // } else {
+        //   return {
+        //     key: t.field,
+        //     label: t.label,
+        //     type: t.component,
+        //     componentProps: t.componentProps,
+        //   };
+        // }
         return {
           key: t.field,
           label: t.label,
           type: t.component,
-            options: t.componentProps.options,
+          componentProps: t.componentProps,
         };
-        } else {
-          return { key: t.field, label: t.label, type: t.component };
-        }
       });
 
     // 常用按钮-树