Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/components/CtForm/index copy.vue

@@ -0,0 +1,331 @@
+<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-text="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-text="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-text="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' })
+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>

src/components/CtForm/index.vue

@@ -2,238 +2,28 @@
   <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">
+        <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" :class="item.flexStyle || 'flex-row'">
-              <v-text-field
+              <span>{{ item.value }}</span>
+              <textUI
                 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"
+                :items="item"
                 @change="handleChange(item)"
-              />
-              <v-autocomplete
+              ></textUI>
+              <autocompleteUI
                 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-text="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"
+                :items="item"
                 @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-text="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-text="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>
+              ></autocompleteUI>
               <template v-if="item.slotName">
-                  <slot :name="item.slotName" :item="item"></slot>
+                <slot :name="item.slotName" :item="item"></slot>
               </template>
             </div>
           </v-col>
@@ -243,83 +33,22 @@
     <slot></slot>
   </v-form>
 </template>
-
 <script setup>
-// import DatePicker from '@/components/Form/datePicker.vue'
-import { ref, defineEmits  } from 'vue'
-defineOptions({ name: 'components-ct-form' })
+defineOptions({ name:'components-ct-form'})
+import textUI from './../FormUI/TextInput'
+import autocompleteUI from './../FormUI/TextInput'
+import { ref } from 'vue'
+const emit = defineEmits(['change', 'inputUpdateAutocomplete'])// 定义一个或多个自定义事件
 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) => {
+  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)
 }
 </script>
-
 <style lang="scss" scoped>
 .position {
   position: relative;
@@ -328,4 +57,4 @@ const handleChange = (item) => {
   font-size: 14px;
   color: rgba(0, 0, 0, .6);
 }
-</style>
+</style>

src/components/CtForm/list.vue

@@ -0,0 +1,338 @@
+<template>
+  <v-form ref="form" v-model="valid" class="login-form" @submit.native.prevent>
+      <div>
+          <v-row dense no-gutters class="justify-space-between">
+            <template v-for="(item, index) in 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="pl-2 pr-2 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"
+                      :dense="item.dense"
+                      :style="{width: item.width}"
+                      :color="item.color"
+                      :label="item.label"
+                      :placeholder="item.placeholder || item.label"
+                      :outlined="item.outlined"
+                      :autofocus="item.autofocus"
+                      :required="item.required"
+                      :class="item.class"
+                      :suffix="item.suffix"
+                      :append-icon="item.appendIcon"
+                      :clearable="item.clearable"
+                      :readonly="item.readonly"
+                      :prepend-inner-icon="item.prependInnerIcon"
+                      hide-spin-buttons
+                      @wheel.native="$event => handleWheel($event, item)"
+                      @keyup.enter.native="item.keyupEnterNative && item.keyupEnterNative(index)"
+                      @click="item.click && item.click(index)"
+                      @click:append="item.clickAppend && item.clickAppend(index)"
+                      @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-text="item.itemText || 'label'"
+                      :item-value="item.itemValue || 'value'"
+                      :outlined="item.outlined"
+                      :dense="item.dense"
+                      :disabled="item.disabled"
+                      :multiple="item.multiple"
+                      :clearable="item.clearable"
+                      :search-input.sync="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-text="item.itemText || 'label'"
+                      :item-value="item.itemValue || 'value'"
+                      :outlined="item.outlined"
+                      :dense="item.dense"
+                      :multiple="item.multiple"
+                      :clearable="item.clearable"
+                      :search-input.sync="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-text="item.itemText || 'label'"
+                      :item-value="item.itemValue || 'value'"
+                      :outlined="item.outlined"
+                      :dense="item.dense"
+                      :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"
+                    :outlined="item.outlined"
+                    :dense="item.dense"
+                    :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"
+                    :outlined="item.outlined"
+                    :dense="item.dense"
+                    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>
+import DatePicker from '@/components/Form/datePicker.vue'
+export default {
+  name: 'form-list',
+  components: { DatePicker },
+  props: {
+    items: {
+      type: Object,
+      default: () => {},
+      required: true
+    }
+  },
+  data () {
+    return {
+      inputUpdateValue: '',
+      valid: false,
+      isValid: true
+    }
+  },
+  methods: {
+    handleWheel (event, item) {
+      if (item.type !== 'number') return
+      event.preventDefault()
+      if (event.deltaY > 0) {
+        item.value--
+      } else {
+        item.value++
+      }
+      this.handleChange(item)
+    },
+    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
+    },
+    validateTime () {
+      this.isValid = true
+      this.items.options.forEach((e, index) => {
+        if (e.type !== 'date' || e.hide || !e.rules) return
+        const rules = e.rules[0]
+        const check = rules(e.value)
+        if (typeof check === 'string') {
+          this.isValid = false
+          e.option.error = true
+          e.option.errorMsg = check
+        } else {
+          e.option.error = false
+          e.option.errorMsg = null
+        }
+      })
+      return this.isValid
+    },
+    validate () {
+      const form = this.$refs.form.validate()
+      const time = this.validateTime()
+      return form && time
+    },
+    inputUpdateAutocomplete (val) {
+      this.$emit('inputUpdateAutocomplete', val)
+    },
+    resetValidation () {
+      this.$refs.form.resetValidation()
+    },
+    reset () {
+      this.$refs.form.reset()
+    },
+    handleChange (item) {
+      if (item.type === 'date' && item.value) item.option.validate = false
+      if (item?.change) item.change(item.value, item)
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.position {
+  position: relative;
+}
+.label {
+  font-size: 14px;
+  color: rgba(0, 0, 0, .6);
+}
+</style>

src/components/FormUI/TextInput/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
+    <v-text-field
+      v-model="value"
+      variant="outlined"
+      :density="item.dense || 'compact'"
+      :type="item.type"
+      :rules="item.rules"
+      :disabled="item.disabled"
+      :dense="item.dense"
+      :style="{width: item.width}"
+      :color="item.color"
+      :label="item.label"
+      :placeholder="item.placeholder || item.label"
+      :outlined="item.outlined"
+      :autofocus="item.autofocus"
+      :required="item.required"
+      :class="item.class"
+      :suffix="item.suffix"
+      :append-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"
+    ></v-text-field>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+defineOptions({ name:'v-text-field'})
+
+const props = defineProps({items: Object, modelValue: [String, Number]})
+const emit = defineEmits(['update:modelValue'])
+const item = props.items
+const value = computed({
+  get() { return props.modelValue },
+  set(value) { emit('update:modelValue', value) }
+})
+const handleWheel = (event, item) => {
+  if (item.type !== 'number') return
+  event.preventDefault()
+  if (event.deltaY > 0) {
+    item.value--
+  } else {
+    item.value++
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/FormUI/autocomplete/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
+    <v-autocomplete
+      v-model="value"
+      :rules="item.rules"
+      :attach="!item.noAttach"
+      :loading="item.loading"
+      :label="item.label"
+      :placeholder="item.placeholder || item.label"
+      :items="item.items"
+      :item-title="item.itemText || item.itemTitle || 'label'"
+      :item-value="item.itemValue || 'value'"
+      variant="outlined"
+      :density="item.dense || 'compact'"
+      :append-to-body="true"
+      :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"
+    ></v-autocomplete>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+defineOptions({ name:'v-autocomplete'})
+
+const props = defineProps({items: Object, modelValue: String})
+const emit = defineEmits(['update:modelValue'])
+const item = props.items
+const value = computed({
+  get() { return props.modelValue },
+  set(value) { emit('update:modelValue', value) }
+})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/Home/personal/index copy.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <NavBar></NavBar>
+    <div>个人用户首页</div>
+    <div>测试封装start</div>
+    <div class="pt-5 pl-12" style="width: 800px;">
+      <v-text-field
+        v-model="dhwdwd"
+        label="姓名"
+        placeholder="请输入姓名" 
+        color="#00897B" 
+        variant="outlined" 
+        density="compact" 
+        :rules="[v=> !!v || '请输入姓名']"
+      ></v-text-field>
+      <CtForm :items="formItems"></CtForm>
+    </div>
+    <div>测试封装end</div>
+  </div>
+</template>
+<script setup>
+import NavBar from './components/navBar.vue'
+defineOptions({ name:'personal-index'})
+
+import CtForm from '@/components/CtForm'
+import { ref } from 'vue';
+const dhwdwd = ref('wdwd')
+const clickFun = (a) => {
+  console.log('clickFun', a)
+}
+const formItems = ref({ options: [
+  {
+    key: 'username',
+    type: 'text',
+    value: '',
+    label: '姓名formItems',
+    click: clickFun,
+    rules: [v=> !!v || '请输入姓名formItems']
+  },
+  {
+    key: 'username1',
+    type: 'autocomplete',
+    value: '',
+    label: '请输入公司名称',
+    rules: [v=> !!v || '请输入公司名称'],
+    items: [{value: 'Alibaba', title: '阿里巴巴', shortName: '阿里' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }]
+  }
+]})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/enterprise/components/register.vue

@@ -53,38 +53,6 @@
           <div>人员规模</div>
           <div>法人招聘授权书</div>
           <div>法人身份证照片</div>
-          <v-form v-model="valid">
-            <v-text-field
-              v-model="addInForm.username"
-              label="公司全称（需要与营业执照完全一致）"
-              placeholder="请输入姓名" 
-              color="#00897B" 
-              variant="outlined" 
-              density="compact" 
-              :rules="[v=> !!v || '请输入姓名']"
-            ></v-text-field>
-            <v-autocomplete
-              v-model="addInForm.company"
-              label="公司名称"
-              placeholder="请输入公司名称" 
-              color="#00897B" 
-              variant="outlined" 
-              density="compact" 
-              return-object
-              :items="[{value: 'Alibaba', title: '阿里巴巴', shortName: '阿里' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }]"
-              :rules="[v=> !!v || '请输入公司名称']"
-              @update:search-input="companySearch"
-            ></v-autocomplete>
-            <v-text-field
-              v-model="addInForm.duties"
-              label="职务"
-              placeholder="请输入职务" 
-              variant="outlined" 
-              density="compact"
-              color="#00897B"
-              :rules="[v=> !!v || '请输入职务']"
-            ></v-text-field>
-          </v-form>
         </v-window-item>
       </v-window>
     <!-- 新建 -->