feat(选项设置扩展)：选择类题型增加选项排列配置 (#403)

* build: add optimizeDeps packages

* feat(选项设置扩展)：选择类题型增加选项排列配置

* feat(选项设置扩展): 验收问题修复

---------

Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>

web/src/materials/questions/widgets/BaseChoice/index.jsx

@@ -97,7 +97,7 @@ export default defineComponent({
 
     return (
       <div class="choice-wrapper">
-        <div class={[isMatrix ? 'nest-box' : '', 'choice-box']}>
+        <div class={[isMatrix ? 'nest-box' : '', 'choice-box', this.layout || 'vertical']}>
           {getOptions.map((item, index) => {
             return (
               !item.hide && (
@@ -106,11 +106,10 @@ export default defineComponent({
                   style={this.choiceStyle}
                   class={['choice-outer']}
                 >
-                  <div style="position: relative">
+                  <div style="position: relative" class="choice-content">
                     {!/^\s*$/.test(item.text) && (
                       <div
                         class={[
-                          this.layout === 'vertical' ? 'vertical' : '',
                           isChecked(item) ? 'is-checked' : '',
                           index === getOptions.length - 1 ? 'lastchild' : '',
                           index === getOptions.length - 2 ? 'last2child' : '',

web/src/materials/questions/widgets/BaseChoice/style.scss

@@ -25,11 +25,41 @@
     padding: 0 0.2rem !important;
     box-sizing: border-box;
 
+   
+
+    // .choice-content, .choice-item {
+    //   width: 100%;
+    // }
+
+    &.vertical {
+      display:  flex;
+      flex-direction: column;
+
+      .choice-outer {
+        width: 100%;
+      }
+    }
+
+    &.horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .choice-outer {
+        width: 50%;
+
+        .question {
+          padding-top: 0;
+        }
+      }
+    }
+
     .choice-item {
       position: relative;
       display: inline-flex;
       align-items: center;
-      width: 50%;
+      width: 100%;
       box-sizing: border-box;
       vertical-align: top;
       // height: .88rem;

web/src/materials/questions/widgets/BinaryChoiceModule/meta.js

@@ -71,9 +71,37 @@ const meta = {
           hash: '115020'
         }
       ]
+    },
+    {
+      name: 'layout',
+      propType: String,
+      description: '排列方式',
+      defaultValue: 'vertical'
     }
   ],
-  formConfig: [basicConfig],
+  formConfig: [basicConfig, {
+    name: 'optionConfig',
+    title: '选项配置',
+    type: 'Customed',
+    content: [
+      {
+        label: '排列方式',
+        type: 'RadioGroup',
+        key: 'layout',
+        value: 'vertical',
+        options: [
+          {
+            label: '竖排',
+            value: 'vertical'
+          },
+          {
+            label: '横排',
+            value: 'horizontal'
+          },
+        ]
+      },
+    ]
+  }],
   editConfigure: {
     optionEdit: {
       show: false

web/src/materials/questions/widgets/CheckboxModule/index.jsx

@@ -107,6 +107,7 @@ export default defineComponent({
         options={myOptions}
         onChange={onChange}
         value={value}
+        layout={this.layout}
       >
         {{
           selectMore: (scoped) => {

web/src/materials/questions/widgets/CheckboxModule/meta.js

@@ -1,5 +1,4 @@
 import basicConfig from '@materials/questions/common/config/basicConfig'
-
 const meta = {
   title: '多选',
   type: 'checkbox',
@@ -83,6 +82,12 @@ const meta = {
       propType: Number,
       description: '最多选择数',
       defaultValue: 0
+    },
+    {
+      name: 'layout',
+      propType: String,
+      description: '排列方式',
+      defaultValue: 'vertical'
     }
   ],
   formConfig: [
@@ -92,6 +97,22 @@ const meta = {
       title: '选项配置',
       type: 'Customed',
       content: [
+        {
+          label: '排列方式',
+          type: 'RadioGroup',
+          key: 'layout',
+          value: 'vertical',
+          options: [
+            {
+              label: '竖排',
+              value: 'vertical'
+            },
+            {
+              label: '横排',
+              value: 'horizontal'
+            },
+          ]
+        },
         {
           label: '至少选择数',
           type: 'InputNumber',

web/src/materials/questions/widgets/RadioModule/meta.js

@@ -71,9 +71,37 @@ const meta = {
           hash: '115020'
         }
       ]
+    },
+    {
+      name: 'layout',
+      propType: String,
+      description: '排列方式',
+      defaultValue: 'vertical'
     }
   ],
-  formConfig: [basicConfig],
+  formConfig: [basicConfig, {
+    name: 'optionConfig',
+    title: '选项配置',
+    type: 'Customed',
+    content: [
+      {
+        label: '排列方式',
+        type: 'RadioGroup',
+        key: 'layout',
+        value: 'vertical',
+        options: [
+          {
+            label: '竖排',
+            value: 'vertical'
+          },
+          {
+            label: '横排',
+            value: 'horizontal'
+          },
+        ]
+      },
+    ]
+  }],
   editConfigure: {
     optionEdit: {
       show: true

web/src/materials/questions/widgets/VoteModule/index.jsx

@@ -103,7 +103,7 @@ export default defineComponent({
     return (
       <BaseChoice
         uiTarget={innerType}
-        layout={'vertical'}
+        layout={this.layout}
         name={this.field}
         innerType={this.innerType}
         value={this.value}

web/src/materials/questions/widgets/VoteModule/meta.js

@@ -1,4 +1,5 @@
 import basicConfig from '@materials/questions/common/config/basicConfig'
+import * as optionConfig from '@materials/questions/common/config/optionsConfig';
 
 const meta = {
   title: '投票',
@@ -93,6 +94,7 @@ const meta = {
       type: 'Customed',
       key: 'optionConfig',
       content: [
+        optionConfig.layout,
         {
           label: '设置为多选题',
           type: 'CheckBox',

web/vite.config.ts

@@ -67,7 +67,9 @@ export default defineConfig({
       'yup',
       'crypto-js/sha256',
       'element-plus/es/locale/lang/zh-cn',
-      'node-forge'
+      'node-forge',
+      '@logicflow/core',
+      '@logicflow/extension'
     ]
   },
   plugins: [