高级表单优化

Ben Lin

2024-07-04 b19d937fd8f1f0ff8b27b660966e3a4495b1d5ef

 src/views/form-design/components/VFormDesign/components/FormProps.vue

@@ -42,10 +42,10 @@
      </FormItem>
      <div v-if="formConfig.labelLayout === 'Grid'">
        <FormItem label="labelCol">
          <Slider v-model:value="formConfig.labelCol!.span" :max="24" />
          <Slider v-model:value="sliderSpan" :max="24" />
        </FormItem>
        <FormItem label="wrapperCol">
          <Slider v-model:value="formConfig.wrapperCol!.span" :max="24" />
          <Slider v-model:value="sliderSpan" :max="24" />
        </FormItem>

        <FormItem label="标签对齐">
@@ -65,7 +65,7 @@
      </div>
      <FormItem label="表单属性">
        <Col
          ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout == 'horizontal'"
          ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout === 'horizontal'"
            >label后面显示冒号</Checkbox
          ></Col
        >
@@ -75,40 +75,38 @@
    </Form>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
<script lang="ts" setup name="FormProps">
  import { computed } from 'vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { InputNumber, Slider, Checkbox, Col, RadioChangeEvent } from 'ant-design-vue';
  // import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
  import { Form, FormItem, Radio } from 'ant-design-vue';
  import {
    InputNumber,
    Slider,
    Checkbox,
    Col,
    RadioChangeEvent,
    Form,
    FormItem,
    RadioButton,
    RadioGroup,
  } from 'ant-design-vue';

  export default defineComponent({
    name: 'FormProps',
    components: {
      InputNumber,
      Slider,
      Checkbox,
      RadioGroup: Radio.Group,
      RadioButton: Radio.Button,
      Form,
      FormItem,
      Col,
    },
    setup() {
      const { formConfig } = useFormDesignState();
  const { formConfig } = useFormDesignState();

      formConfig.value = formConfig.value || {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
      };
  formConfig.value = formConfig.value || {
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
  };

      const lableLayoutChange = (e: RadioChangeEvent) => {
        if (e.target.value === 'Grid') {
          formConfig.value.layout = 'horizontal';
        }
      };
  const lableLayoutChange = (e: RadioChangeEvent) => {
    if (e.target.value === 'Grid') {
      formConfig.value.layout = 'horizontal';
    }
  };

      return { formConfig, lableLayoutChange };
    },
  const sliderSpan = computed(() => {
    if (formConfig.value.labelLayout) {
      return Number(formConfig.value.labelCol!.span);
    }
    return 0;
  });
</script>