menduner/src/components/CtForm/index.vue

<template>
  <v-form ref="formRef" v-model="valid" class="login-form" @submit.prevent>
    <div>
      <v-row dense no-gutters class="justify-space-between">
        <template v-for="(item) in props.items.options">
          <slot :name="item.prevSlot"></slot>
          <v-col :key="item.key" v-if="!item.hide" :cols="item.col || '12'" class="position">
            <template v-if="item.slotTitle">
              <div :class="item.class" :style="item.slotTitleStyle">{{ item.slotTitle }}</div>
            </template>
            <div class="d-flex mb-2" :class="item.flexStyle || 'flex-row'">
              <!-- <span>{{ item.value }}</span> -->
              <textUI
                v-if="['text', 'password', 'number'].includes(item.type)"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></textUI>
              <autocompleteUI
                v-if="item.type === 'autocomplete'"
                v-model="item.value"
                :item="item"
                @search="v => item.search ? item.search(v) : null"
                @change="handleChange(item)"
              ></autocompleteUI>
              <comboboxUI
                v-if="item.type === 'combobox'"
                v-model="item.value"
                :item="item"
                @search="v => item.search ? item.search(v) : null"
                @change="handleChange(item)"
              ></comboboxUI>
              <!-- comboboxZhAndEnUI暂不可用 -->
              <comboboxZhAndEnUI 
                v-if="item.type === 'comboboxZhAndEn'"
                v-model="item.value"
                :item="item"
                @search="v => item.search ? item.search(v) : null"
                @change="handleChange(item)"
              ></comboboxZhAndEnUI>
              <radioGroupUI
                v-if="item.type === 'ifRadio'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></radioGroupUI>
              <checkboxUI
                v-if="item.type === 'checkbox'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></checkboxUI>
              <textareaUI
                v-if="item.type === 'textarea'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></textareaUI>
              <nestedListGroupUI
                v-if="item.type === 'nestedListGroup'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></nestedListGroupUI>
              <DatePicker v-if="item.type === 'datePicker'" v-model="item.value" :options="item.options" :width="item.width" :class="item.class"></DatePicker>
              
              <template v-if="item.slotName">
                <slot :name="item.slotName" :item="item"></slot>
              </template>
            </div>
          </v-col>
        </template>
      </v-row>
    </div>
    <slot></slot>
  </v-form>
</template>
<script setup>
defineOptions({ name:'components-ct-form'})
import textUI from './../FormUI/TextInput'
import autocompleteUI from './../FormUI/autocomplete'
import comboboxUI from './../FormUI/combobox'
import comboboxZhAndEnUI from './../FormUI/comboboxZhAndEn'
import radioGroupUI from './../FormUI/radioGroup'
import checkboxUI from './../FormUI/checkbox'
import textareaUI from './../FormUI/textArea'
import nestedListGroupUI from './../FormUI/nestedListGroup'
import DatePicker from '@/components/DatePicker'
import { ref, defineEmits, defineExpose } from 'vue'
const emit = defineEmits(['change', 'inputUpdateAutocomplete'])// 定义一个或多个自定义事件
const props = defineProps({items: Object})
const valid = ref(false)
const isValid = ref(true)
const formRef = ref()

const handleChange = (item) => {
  // console.log('handleChange', item)
  if (item.type === 'date' && item.value) item.option.validate = false
  if (item?.change) item.change(item.value, item)
  emit('change', false)
}

const validateTime = () => {
  isValid.value = true
  props.items.options.forEach((e) => {
    if (e.type !== 'date' || e.hide || !e.rules) return
    const rules = e.rules[0]
    const check = rules(e.value)
    if (typeof check === 'string') {
      isValid.value = false
      e.option.error = true
      e.option.errorMsg = check
    } else {
      e.option.error = false
      e.option.errorMsg = null
    }
  })
}
  
const validate = () => {
  const form = formRef.value.validate()
  const time = validateTime()
  return form && time
}
defineExpose({
  validate,
  formRef
})
</script>
<style lang="scss" scoped>
.position {
  position: relative;
}
.label {
  font-size: 14px;
  color: rgba(0, 0, 0, .6);
}
</style>