lingji-work-fe/src/views/agent/work-flow/components/DynamicForm.vue

<template>
  <div class="form-container">
    <Form :model="formData" ref="formRef" layout="vertical">
      <FormItem
        v-for="(field, index) in formFields"
        :key="index"
        :label="field.props.label"
        :name="field.props.name"
        :rules="field.props.rules"
        :tooltip="field.props.tip"
      >
        <Input
          allowClear
          v-if="field.type === 'input'"
          v-model:value="formData[field.props.name]"
          :placeholder="field?.props?.placeholder"
        />
        <TextArea
          v-if="field.type === 'textarea'"
          style="width: 500px; height: 200px"
          v-model:value="formData[field.props.name]"
          :placeholder="field?.props?.placeholder"
        />
        <ImageUpload
          v-if="field.type == 'upload_image'"
          v-model="formData[field.props.name]"
          :limit="field.props.limit"
        ></ImageUpload>
        <FileUpload
          v-if="field.type == 'upload_file'"
          v-model="formData[field.props.name]"
          :limit="field.props.limit"
        ></FileUpload>
        <Select
          v-else-if="field.type === 'select'"
          v-model:value="formData[field.props.name]"
          :placeholder="field.placeholder"
        >
          <Option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
            {{ option.label }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.vue';
import FileUpload from '@/components/upload/FileUpload.vue';
import { Button, Input, Select, Row, Col, Form } from 'ant-design-vue';
const { TextArea } = Input;
const { Option } = Select;
const { Item: FormItem } = Form;

const props = defineProps({
  formFields: {
    type: Array,
    required: true,
  },
  formData: {
    type: Object,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['submit']);
const formRef = ref(null);
const handleSubmit = async () => {
  const errors = await formRef.value.validate();
  if (errors) return;
  console.log(props.formFields, 'props.formFields');
  emit('submit', props.formData);
};
</script>

<style scoped lang="scss">
.form-container {
  :deep(.ant-input),
  :deep(.ant-input:focus),
  :deep(.ant-input-focused) {
    border-radius: 4px;
    border-color: #d7d7d9;
    background-color: #fff;
    height: 35px;
    width: 300px;

    &:focus,
    &:focus-within {
      background-color: var(--color-bg-2);
      border-color: rgb(var(--primary-6));
      box-shadow: 0 0 0 0 var(--color-primary-light-2);
    }
  }

  &.ant-textarea-wrapper {
    height: 60px;
  }

  .submit-btn {
    display: block;
    margin: 0 auto;
  }
}
</style>