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.props.label"
        :field="field.props.name"
        :rules="field.props.rules"
        :tooltip="field.props.tip"
      >
        <a-input
          allowClear
          v-if="field.type === 'input'"
          v-model="formData[field.props.name]"
          :placeholder="field?.props?.placeholder"
        />
        <a-textarea
          v-if="field.type === 'textarea'"
          style="width: 500px; height: 200px"
          v-model="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>
        <a-select
          v-else-if="field.type === 'select'"
          v-model="formData[field.props.name]"
          :placeholder="field.placeholder"
        >
          <a-option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
            {{ option.label }}
          </a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.vue';
import FileUpload from '@/components/upload/FileUpload.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;
  console.log(props.formFields, 'props.formFields');
  emit('submit', props.formData);
};
</script>

<style scoped lang="scss">
.form-container {
  padding: 24px;
  border: 1px solid #d7d7d9; /* 添加灰色边框 */
  background: var(--BG-White, white);
  min-height: 70vh;

  :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;
    }
  }

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