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', 'phoneNumber'].includes(item.type)"
                v-model="item.value"
                :item="item"
                @blur="item.blur"
                @change="handleChange(item)"
                @appendInnerClick="item.appendInnerClick"
              ></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"
                @blur="item.blur"
                @change="handleChange(item)"
              ></textareaUI>
              <cascadeUI
                v-if="item.type === 'cascade'"
                v-model="item.value"
                :item="item"
                ref="cascadeRef"
                @change="handleChange(item)"
              ></cascadeUI>
              <datePickerUI
                v-if="item.type === 'datePicker'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></datePickerUI>
              <wangEditorUI
                v-if="item.type === 'wangEditor'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></wangEditorUI>
              <areaSelectUI
                v-if="item.type === 'areaSelect'"
                v-model="item.value"
                :item="item"
                @change="handleChange(item)"
              ></areaSelectUI>
              <DatePicker v-if="item.type === 'vueDatePicker'" v-model="item.value" :options="item.options" :width="item.width" :class="item.class"></DatePicker>
              <v-file-input
                v-if="item.type === 'upload'"
                :prepend-icon="item.prependIcon || ''"
                :append-icon="item.appendIcon"
                :append-outer-icon="item.appendOuterIcon"
                :show-size="item.showSize"
                variant="outlined"
                density="compact"
                v-model="item.value"
                :placeholder="item.placeholder || item.label"
                :hint="item.hint"
                :rules="item.rules"
                :label="item.label"
                color="primary"
                :persistent-hint="item.persistentHint"
                :loading= "item.loading"
                :disabled="item.disabled"
                :multiple="item.multiple"
                :success="item.success"
                :error="item.error"
                :accept="item.accept || '.xlsx, .xls, .csv, .pdf, .txt, .doc'"
                @change="handleChange(item)"
              >
                <template v-if="item.selfAppend" #append>
                  <slot :name="item.selfAppend" :data="item.value"></slot>
                </template>
              </v-file-input>
              <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 cascadeUI from './../FormUI/cascade'
import datePickerUI from './../FormUI/datePicker'
import DatePicker from '@/components/DatePicker'
import wangEditorUI from './../FormUI/wangEditor'
import areaSelectUI from './../FormUI/areaSelect'
import { ref } from 'vue'
const emit = defineEmits(['change', 'inputUpdateAutocomplete'])// 定义一个或多个自定义事件
const props = defineProps({items: Object})
const valid = ref(false)
const formRef = ref()

const handleChange = (item) => {
  // console.log('handleChange', item)
  if (item.type === 'date' && item.value) item.option.validate = false
  let selectObj = {}
  if (item.returnSelect && item.items?.length) {
    selectObj = item.items.find(e => e[item.itemValue || 'value'] === item.value)
  }
  if (item?.change) item.change(item.value, item, selectObj)
  emit('change', false)
}

// const isValid = ref(true)
// 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 cascadeRef = ref()
const validateCascade = () => {
  let cascadeValid = true
  if (cascadeRef.value && Array.isArray(cascadeRef.value) && cascadeRef.value?.length) {
    cascadeRef.value.forEach(ref => {
      const txt = ref?.handleBlur()
      if (txt) cascadeValid = false
    })
  }
  return cascadeValid
}
  
const validate = async () => {
  const form = await formRef.value.validate()
  // const time = validateTime()
  const cascade = validateCascade()
  return form && cascade
}
defineExpose({
  validate,
  formRef
})
</script>

<style lang="scss" scoped>
.position {
  position: relative;
}
.label {
  font-size: 14px;
  color: rgba(0, 0, 0, .6);
}
</style>