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

<template>
  <div class="form-container">
    <a-form :model="formData" ref="formRef" layout="vertical">
      <a-form-item
        v-for="(field, index) in formFields"
        :key="index"
        :label="field.label"
        :field="field.key"
        :rules="field.rules"
      >
        <a-input v-if="field.type === 'input'" v-model="formData[field.key]" :placeholder="field.placeholder" />
        <a-textarea v-if="field.type === 'textarea'" v-model="formData[field.key]" :placeholder="field.placeholder" />
        <ImageUpload v-if="field.type == 'upload'" v-model="formData[field.key]" :limit="1"></ImageUpload>

        <a-select v-else-if="field.type === 'select'" v-model="formData[field.key]" :placeholder="field.placeholder">
          <a-option v-for="(option, optIndex) in field.options" :key="optIndex" :value="option.value">
            {{ option.label }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.vue';

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;

  emit('submit', props.formData);
};
</script>

<style scoped lang="scss">
.form-container {
  padding: 24px;

  :deep(.arco-input-wrapper),
  :deep(.arco-textarea-wrapper) {
    border-radius: 4px;
    border-color: #d7d7d9;
    background-color: #fff;
    height: 35px;
    width: 400px;

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

    &.arco-textarea-wrapper {
      height: 60px;
    }
  }
}
</style>