组件

src/components/Dialog/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 对话框共用组件 -->
+  <v-dialog
+    style="z-index: var(--zIndex-dialog)"
+    v-model="show"
+    persistent
+    v-bind="$attrs"
+    :fullscreen="props.showDrawer"
+    :max-width="dialogWidth"
+    :width="dialogWidth"
+  >
+    <v-card max-height="90vh" class="d-flex flex-column">
+      <v-card-title :class="{'drawer': props.showDrawer}">
+        <span class="text-h5 d-flex align-center justify-space-between">
+          {{ props.title }}
+          <v-btn
+            icon
+            elevation="0"
+            @click="handleClose"
+          >
+            <v-icon :color="props.showDrawer ? '#fff' : '#000'">
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </span>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text class="flex-grow-1 overflow-y-auto" :class="{ 'd-flex': props.flexBox }" :style="props.bodyStyle">
+        <slot></slot>
+      </v-card-text>
+      <template v-if="props.footer">
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            text
+            @click="handleClose"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="primary"
+            text
+            @click="handleSave"
+          >
+            提交
+          </v-btn>
+        </v-card-actions>
+      </template>
+      <template v-else>
+        <slot name="footer"></slot>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, defineEmits, computed, watch  } from 'vue'
+defineOptions({ name: 'dialog-page' })
+const emits = defineEmits('update:visible', 'close', 'submit')
+
+const props = defineProps({
+  bodyStyle: {
+    type: String,
+    default: ''
+  },
+  widthType: {
+    type: [Number, String],
+    default: 0
+  },
+  title: {
+    type: String,
+    default: '提示'
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  footer: {
+    type: Boolean,
+    default: true
+  },
+  showDrawer: {
+    type: Boolean,
+    default: false
+  },
+  flexBox: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const show = ref(false)
+watch(() => props.visible, (newVal) => {
+  show.value = newVal
+})
+
+const dialogWidth = computed(() => {
+  const arr = ['900px', '1200px', '400px']
+  return arr[+props.widthType]
+})
+const handleClose = () => {
+  emits('update:visible', false)
+  emits('close', false)
+}
+const handleSave = () => {
+  emits('submit', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer{
+  color: #fff;
+  background-color: #1976d2;
+}
+::v-deep .v-dialog:not(.v-dialog--fullscreen) {
+  overflow: visible !important;
+}
+</style>

src/components/Form/index.vue

@@ -1,247 +1,246 @@
 <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>
+    <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>
-                <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="$event => handleWheel($event, item)"
-                      @keyup.enter="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="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="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"
+                <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"
-                    :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-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"
-                    :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>
+                    :style="item.style"
+                    @change="item.value = $event; handleChange(item); handleCheck(item)"></date-picker> -->
                 </div>
-              </v-col>
-            </template>
-          </v-row>
-      </div>
-      <slot></slot>
+              </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>
 
@@ -249,7 +248,7 @@
 // import DatePicker from '@/components/Form/datePicker.vue'
 import { ref, defineEmits  } from 'vue'
 defineOptions({ name: 'form-index' })
-const props = defineProps({items: Array})
+const props = defineProps({items: Object})
 const inputUpdateValue = ref('')
 const form = ref()
 const valid = ref(false)

src/components/Pagination/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="d-flex justify-center align-center pa-5">
+    <v-pagination
+      v-model="currentPage"
+      :length="pageLength"
+      @input="handleCurrentChange"
+      v-bind="$attrs"
+      :total-visible="props.totalVisible"
+    ></v-pagination>
+    <span style="color: #666;">共{{ props.total }}条数据</span>
+    <div class="search px-3">
+      <v-text-field
+        v-model="currentJump"
+        type="number"
+        hide-details
+        variant="outlined"
+        density="compact"
+        height="35"
+        label=""
+        placeholder=""
+        hide-spin-buttons
+      ></v-text-field>
+    </div>
+    <div class="">
+      <v-btn color="primary" rounded class="half-button" @click="handleCurrentJump">跳转</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref, defineEmits } from 'vue'
+defineOptions({ name: 'pagnation-page' })
+const props = defineProps({
+  total: {
+    type: [String, Number],
+    default: 0
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 10
+  },
+  pageSizes: {
+    type: Array,
+    default: () => [5, 10, 15, 20]
+  },
+  layout: {
+    type: String,
+    default: 'total, prev, pager, next, jumper'
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  },
+  totalVisible: {
+    type: Number,
+    default: 7
+  }
+})
+const emit = defineEmits(['handleChange'])
+
+const currentPage = ref(1)
+const currentJump = ref(null)
+currentPage.value = props.page
+
+watch(() => props.page, (newVal) => {
+  currentPage.value = newVal
+})
+const pageLength = computed(() => {
+  return Math.ceil(props.total / props.limit)
+})
+
+const handleCurrentChange = () => {
+  emit('handleChange', currentPage.value)
+}
+const handleCurrentJump = () => {
+  if (currentJump.value > pageLength.value) currentJump.value = pageLength.value
+  if (currentJump.value < 1) currentJump.value = 1
+  currentPage.value = +currentJump.value
+  emit('handleChange', currentPage)
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+width: 80px;
+height: 50px;
+display: flex;
+align-items: center;
+}
+</style>

src/views/login/components/password.vue

@@ -22,9 +22,11 @@
       @click:append-inner="passwordType = !passwordType"
     ></v-text-field>
   </v-form>
+  <!-- <m-form ref="form" :items="formItems"></m-form> -->
 </template>
 
 <script setup>
+// import MForm from '@/components/Form/index'
 import { ref, reactive } from 'vue'
 defineOptions({ name: 'passowrd-form' })
 const passwordType = ref(false)
@@ -35,4 +37,32 @@ const loginData = reactive({
     passwod: ''
   }
 })
+// const formItems = ref({
+//   options: [
+//     {
+//       type: 'number',
+//       key: 'username',
+//       value: null,
+//       placeholder: '请输入账户',
+//       width: 289,
+//       color: '#00897B',
+//       prependInnerIcon: "mdi-account-outline" ,
+//       rules: [v => !!v || '请输入账户']
+//     },
+//     {
+//       type: 'number',
+//       key: 'password',
+//       width: 289,
+//       value: null,
+//       color: '#00897B',
+//       placeholder: '请填写密码',
+//       prependInnerIcon: 'mdi-lock-outline',
+//       appendIcon: 'mdi-eye-off-outline',
+//       rules: [v => !!v || '请填写密码'],
+//       clickAppendInner: handleAppendInnerIcon
+//     }
+//   ]
+// })
+// const handleAppendInnerIcon = () => {
+// }
 </script>