旧的表单封装

src/components/CtForm/index copy.vue

@@ -0,0 +1,335 @@
+<template>
+  <v-form ref="form" v-model="valid" class="login-form" @submit.prevent>
+    <div>
+      <v-row dense no-gutters class="justify-space-between">
+        <template v-for="(item, index) 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" :class="item.flexStyle || 'flex-row'">
+              <v-text-field
+                v-if="['text', 'password', 'number'].includes(item.type)"
+                :type="item.type"
+                v-model="item.value"
+                :rules="item.rules"
+                :disabled="item.disabled"
+                :density="item.dense || 'compact'"
+                :color="item.color"
+                :label="item.label"
+                :placeholder="item.placeholder || item.label"
+                variant="outlined"
+                :width="item.width"
+                :autofocus="item.autofocus"
+                :class="item.class"
+                :suffix="item.suffix"
+                :append-inner-icon="item.appendIcon"
+                :clearable="item.clearable"
+                :readonly="item.readonly"
+                :prepend-inner-icon="item.prependInnerIcon"
+                hide-spin-buttons
+                @wheel="$event => handleWheel($event, item)"
+                @keyup.enter="item.keyupEnterNative && item.keyupEnterNative(index)"
+                @click="item.click && item.click(index)"
+                @click:append-inner="item.clickAppendInner"
+                @change="handleChange(item)"
+              />
+              <v-autocomplete
+                v-if="item.type === 'autocomplete'"
+                :rules="item.rules"
+                v-model="item.value"
+                :attach="!item.noAttach"
+                :loading="item.loading"
+                :label="item.label"
+                :placeholder="item.placeholder || item.label"
+                :items="item.items"
+                :item-title="item.itemText || 'label'"
+                :item-value="item.itemValue || 'value'"
+                variant="outlined"
+                :density="item.dense || 'compact'"
+                :disabled="item.disabled"
+                :multiple="item.multiple"
+                :clearable="item.clearable"
+                :search="item.searchInput"
+                :hide-no-data="item.hideNoData"
+                :no-data-text="item.noDataText || 'No data available'"
+                :hide-selected="item.hideSelected"
+                @change="handleChange(item)"
+              >
+                <template v-if="item.slotAppendItem" v-slot:append-item>
+                  <slot :name="item.slotAppendItem" :item="item"></slot>
+                </template>
+                <template v-if="item.prependItem" #prepend-item>
+                  <slot :name="item.prependItem" :item="item"></slot>
+                </template>
+              </v-autocomplete>
+              <!-- autocomplete2 多选纸片样式 -->
+              <v-autocomplete
+                v-if="item.type === 'autocomplete2'"
+                v-model="item.value"
+                :rules="item.rules"
+                :attach="!item.noAttach"
+                :loading="item.loading"
+                :label="item.label"
+                :placeholder="item.placeholder || item.label"
+                :items="item.canCreate ? [inputUpdateValue, ...item.items].filter(Boolean) : item.items"
+                :item-title="item.itemText || 'label'"
+                :item-value="item.itemValue || 'value'"
+                variant="outlined"
+                :density="item.dense || 'compact'"
+                :multiple="item.multiple"
+                :clearable="item.clearable"
+                :search-input="item.searchInput"
+                :hide-no-data="item.hideNoData"
+                :hide-selected="item.hideSelected"
+                :readonly="item.readonly"
+                @change="handleChange(item)"
+                @update:search-input="$event => item.canCreate ? inputUpdateValue = $event : inputUpdateAutocomplete($event)"
+                :hide-details="!item.showDetails"
+                deletable-chips
+                cache-items
+                small-chips
+              ></v-autocomplete>
+              <v-combobox
+                v-if="item.type === 'combobox'"
+                :rules="item.rules"
+                v-model="item.value"
+                :attach="true"
+                :label="item.label"
+                :placeholder="item.placeholder || item.label"
+                :items="item.items"
+                :item-title="item.itemText || 'label'"
+                :item-value="item.itemValue || 'value'"
+                variant="outlined"
+                :density="item.dense || 'compact'"
+                :clearable="item.clearable"
+                :disabled="item.disabled"
+                @change="handleChange(item)"
+              >
+                <template v-if="item.hasIcon" v-slot:selection="data">
+                  <v-icon color="blue darken-2">{{ data.item.label }}</v-icon>
+                </template>
+                <!-- <template v-if="item.hasIcon" v-slot:item="data">
+                  <v-list-item-avatar>
+                    <v-icon>{{ data.item.label }}</v-icon>
+                  </v-list-item-avatar>
+                  <v-list-item-content>
+                    {{ data.item.label }}
+                  </v-list-item-content>
+                </template> -->
+              </v-combobox>
+              <v-textarea
+                v-if="item.type === 'textarea'"
+                :rules="item.rules"
+                v-model="item.value"
+                :label="item.label"
+                :placeholder="item.placeholder || item.label"
+                :no-resize="!item.resize"
+                variant="outlined"
+                :density="item.dense || 'compact'"
+                :rows="item.rows || 3"
+                :disabled="item.disabled"
+                @change="handleChange(item)"
+              ></v-textarea>
+              <v-radio-group
+                v-if="item.type === 'ifRadio'"
+                v-model="item.value"
+                :disabled="item.disabled"
+                mandatory
+                row
+                @change="handleChange(item)"
+              >
+                <template v-slot:label>
+                  <div :style="`width: ${item.width || 120}px;`">{{ item.label }}</div>
+                </template>
+                <v-radio
+                  v-for="radio in item.items"
+                  :key="`${item.key}_radio_${radio.label}`"
+                  :readonly="radio.readonly"
+                  :label="radio.label"
+                  :value="radio.value"
+                  class="mr-8"
+                ></v-radio>
+              </v-radio-group>
+              <template v-if="item.type === 'checkbox'">
+                <div style="width: 120px;" class="mt-4 label text-left">{{ item.label }}</div>
+                <div :style="item.style">
+                  <v-checkbox
+                    v-model="item.value"
+                    v-for="k in item.items"
+                    :key="k.key"
+                    :label="k.label"
+                    :color="item.color"
+                    :value="k.value"
+                    :readonly="k.readonly"
+                    hide-details
+                    :multiple="true"
+                    class="mr-3"
+                  ></v-checkbox>
+                </div>
+              </template>
+              <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="item.dense || 'compact'"
+                v-model="item.value"
+                :placeholder="item.placeholder || item.label"
+                :hint="item.hint"
+                :rules="item.rules"
+                :label="item.label"
+                :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>
+              <v-color-picker
+                v-if="item.type === 'colorPicker'"
+                class="mb-5"
+                v-model="item.value"
+                :elevation="item.elevation || 5"
+                :dot-size="item.dotSize || 25"
+                :show-swatches="item.showSwatches || false"
+                swatches-max-height="200"
+                :mode="item.mode || 'hexa'"
+                :hide-mode-switch="true"
+                @input="item.change"
+              />
+              <template v-if="item.type === 'switch'">
+                <span v-if="item.describe"> {{ item.describe }} </span>
+                <span class="ml-2" v-if="item.trueLabel"> {{ item.trueLabel }}</span>
+                <v-switch
+                  dense hide-details class="mt-0 ml-2 pa-0"
+                  v-model="item.value"
+                  :label="item.label"
+                  :disabled="item.disabled || false"
+                  :color="item.color || 'primary'"
+                  :true-value="(item.trueValue !== undefined) ? item.trueValue : true"
+                  :false-value="(item.falseValue !== undefined) ? item.falseValue : false"
+                ></v-switch>
+                <span v-if="item.falseLabel"> {{ item.falseLabel }} </span>
+              </template>
+              <template v-if="item.type === 'date'">
+                <div class="d-flex" style="margin-bottom: 22px;">
+                  <span class="label d-flex align-center" :style="`width: ${item.width || 120}px;`">{{ item.label }}</span>
+                  <!-- <date-picker
+                    :is-valid="isValid"
+                    :option="{ ...item.option, disabled: item.disabled }"
+                    v-model="item.value"
+                    :style="item.style"
+                    @change="item.value = $event; handleChange(item); handleCheck(item)"></date-picker> -->
+                </div>
+              </template>
+              <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>
+// import DatePicker from '@/components/Form/datePicker.vue'
+import { ref, defineEmits  } from 'vue'
+defineOptions({ name: 'components-ct-form-copy' })
+const props = defineProps({items: Object})
+const inputUpdateValue = ref('')
+const form = ref()
+const valid = ref(false)
+const isValid = ref(true)
+const emit = defineEmits(['inputUpdateAutocomplete', 'change'])
+
+const handleWheel = (event, item) => {
+  if (item.type !== 'number') return
+  event.preventDefault()
+  if (event.deltaY > 0) {
+    item.value--
+  } else {
+    item.value++
+  }
+  handleChange(item)
+}
+
+
+const handleCheck = (e) => {
+  if (e.type !== 'date' || e.hide || !e.rules) return
+  const rules = e.rules[0]
+  const check = rules(e.value)
+  if (typeof check === 'string') {
+    e.option.error = true
+    e.option.errorMsg = check
+    return
+  }
+  e.option.error = false
+  e.option.errorMsg = null
+}
+
+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
+    }
+  })
+  return isValid.value
+}
+
+
+const validate = () => {
+  const form = form.value.validate()
+  const time = validateTime()
+  return form && time
+}
+
+const inputUpdateAutocomplete = (val) => {
+  emit('inputUpdateAutocomplete', val)
+}
+
+
+const resetValidation = () => {
+  form.value.resetValidation()
+}
+
+const reset = () => {
+  form.value.reset()
+}
+const handleChange = (item) => {
+  if (item.type === 'date' && item.value) item.option.validate = false
+  if (item?.change) item.change(item.value, item)
+  emit('change', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.position {
+  position: relative;
+}
+.label {
+  font-size: 14px;
+  color: rgba(0, 0, 0, .6);
+}
+</style>