form封装

<template>
  <div class="newForm">
    <a-form
      ref="formRef"
      size="medium"
      :model="form"
      layout="inline"
      class="formClass"
      @submit-success="loginBtn"
    >
      <a-form-item
        v-for="(item, i) in props.formInfo"
        :key="i"
        :label-col-flex="
          props.formInfo[0].labelWidth != void 0
            ? props.formInfo[0].labelWidth
            : '150px'
        "
        :field="item.vmodelName"
        :label="item.label"
        row-class="rowClass"
        feedback
        :required="item.required"
        :style="{ width: item.width }"
      >
        <a-input
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-if="item.type == 'text'"
        /><!-- 文本 -->
        <a-input-number
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'number'"
        /><!-- 数字 -->
        <a-date-picker
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'datepicker'"
          style="width: 100%"
        /><!-- 天 日期 -->
        <a-range-picker
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'rangepicker'"
          style="width: 100%"
        /><!-- 时间范围 -->
        <a-month-picker
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'monthpicker'"
          style="width: 100%"
        /><!-- 月份 -->
        <a-select
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'select'"
        >
          <!-- 下拉单选 -->
          <a-option v-for="(it, is) in item.arr" :key="is" :value="it.id">{{
            it.name
          }}</a-option>
        </a-select>
        <a-select
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'selectcreate'"
          allow-create
        >
          <!-- 允许创建 -->
          <a-option v-for="(it, is) in item.arr" :key="is" :value="it.id">{{
            it.name
          }}</a-option>
        </a-select>
        <a-select
          :placeholder="item.placeholder"
          multiple
          :max-tag-count="2"
          allow-clear
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'multipleSelect'"
        >
          <!-- 下拉多选 -->
          <a-option v-for="(it, is) in item.arr" :key="is" :value="it.id">{{
            it.name
          }}</a-option>
        </a-select>
        <!-- 单选按钮 -->
        <a-space
          size="large"
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'aradio'"
        >
          <a-radio value="全">全</a-radio>
          <a-radio value="不全">不全</a-radio>
          <a-radio value="无">无</a-radio>
        </a-space>
        <!-- 多选按钮 -->
        <a-checkbox value="1" v-else-if="item.type == 'fuxuankuan'">{{
          item.labelname
        }}</a-checkbox>
        <!-- 文本域 -->
        <a-textarea
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          v-else-if="item.type == 'textarea'"
          allow-clear
        />
        <!-- 上传 -->
        <a-upload
          draggable
          :action="URL + '/bridge//sys/common/upload'"
          :placeholder="item.placeholder"
          v-model="form[item.vmodelName]"
          :headers="{ 'X-Access-Token': store.token2 }"
          @success="success"
          @before-remove="remove"
          @button-click="uploadClick(item)"
          v-else-if="item.type == 'upload'"
        />
        <!-- 计数器 -->
        <a-space
          direction="vertical"
          size="large"
          v-else-if="item.type == 'jishuqi'"
        >
          <a-input-number
            v-model="value"
            :style="{ width: '120px' }"
            :step="0.1"
            class="input-demo"
            :min="0"
            :max="100"
          />
        </a-space>
        <!-- 选择器 -->
        <a-space
          direction="vertical"
          size="large"
          v-else-if="item.type == 'select'"
        >
          <a-select :style="{ width: '300px' }" placeholder="Please select ...">
            <a-option>Beijing</a-option>
            <a-option>Shanghai</a-option>
            <a-option>Guangzhou</a-option>
          </a-select></a-space
        >
      </a-form-item>

      <slot name="form"></slot>
    </a-form>
  </div>
</template>

<script setup>
import { ref, watch, reactive, computed } from 'vue'
import { useStore } from '@/store/index'
let URL = ref(import.meta.env.VITE_BASE_URL)
let picurlArr = ref([])
let uploadModelName = ref('')
let form = ref({})
const emits = defineEmits(['parentDate'])
const store = useStore()
const formRef = ref() //获取元素
const props = defineProps({
  formInfo: {
    type: Object,
    default: {},
  },
  forms: {
    type: Object,
    default: {},
  },
})
form.value = props.forms
console.log(props.forms)
// 上传点击事件
const uploadClick = (item) => {
  uploadModelName.value = item.vmodelName
}
// 上传成功
const success = (val) => {
  let path = {
    url: 'https://resource.jszfti.com/' + val.response.message,
  }
  picurlArr.value.push(path)
  form.value[uploadModelName.value] = JSON.stringify(picurlArr.value)
}
// 删除
const remove = (val) => {
  let index = picurlArr.value.findIndex((item) => item.name == val.name)
  picurlArr.value.splice(index, 1)
  form.value[uploadModelName.value] = JSON.stringify(picurlArr.value)
}

const loginBtn = () => {
  // formRef.value = ''
  console.log(form.value, '传过来的from')
  formRef.value.validate((valid) => {
    if (valid == void 0) {
      emits('parentDate', form.value)
    }
    console.log(valid)
  })
}
defineExpose({ loginBtn })
// watch(
//   () => props.formInfo,
//   (nv, ov) => {
//     // form.val = {}
//     // setTimeout(() => {
//     //   nv.forEach((element) => {
//     //     form.value[element.vmodelName] = element.vmodel
//     //   })
//     // }, 0)
//   },
//   { deep: true, immediate: true }
// )
</script>

<style lang="scss" scoped>
.newForm {
  :deep(.arco-form-item-message) {
    display: none;
  }
  :deep(.arco-form-item) {
    margin-bottom: 15px;
    margin-right: 0;
  }
  :deep(.arco-form) {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>