github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Users/components/Form.vue (about)

     1  <script setup lang="ts">
     2  import {computed, defineEmits, onMounted, PropType, reactive, ref, watch} from 'vue'
     3  import {Form} from '@/components/Form'
     4  import {useI18n} from '@/hooks/web/useI18n'
     5  import {ElButton, ElPopconfirm} from 'element-plus'
     6  import {useForm} from '@/hooks/web/useForm'
     7  import {useCache} from '@/hooks/web/useCache'
     8  import {useAppStore} from '@/store/modules/app'
     9  import {usePermissionStore} from '@/store/modules/permission'
    10  import {useRoute, useRouter} from 'vue-router'
    11  import {useValidator} from '@/hooks/web/useValidator'
    12  import {FormSchema} from '@/types/form'
    13  import {User} from "@/views/Users/components/types";
    14  import api from "@/api/api";
    15  import {ApiImage, ApiPluginOptionsResultEntityState, ApiRole} from "@/api/stub";
    16  
    17  const {register, elFormRef, methods} = useForm()
    18  const {required} = useValidator()
    19  const appStore = useAppStore()
    20  const permissionStore = usePermissionStore()
    21  const {currentRoute, addRoute, push} = useRouter()
    22  const route = useRoute();
    23  const {wsCache} = useCache()
    24  const {t} = useI18n()
    25  
    26  const props = defineProps({
    27    currentRow: {
    28      type: Object as PropType<Nullable<User>>,
    29      default: () => null
    30    }
    31  })
    32  
    33  const rules = {
    34    nickname: [required()],
    35    email: [required()],
    36    status: [required()],
    37    role: [required()]
    38  }
    39  
    40  const schema = reactive<FormSchema[]>([
    41    {
    42      field: 'nickname',
    43      label: t('users.nickname'),
    44      component: 'Input',
    45      colProps: {
    46        span: 24
    47      },
    48      componentProps: {
    49        placeholder: t('users.nickname')
    50      }
    51    },
    52    {
    53      field: 'firstName',
    54      label: t('users.firstName'),
    55      component: 'Input',
    56      colProps: {
    57        span: 24
    58      },
    59      componentProps: {
    60        placeholder: t('users.firstName')
    61      }
    62    },
    63    {
    64      field: 'lastName',
    65      label: t('users.lastName'),
    66      component: 'Input',
    67      colProps: {
    68        span: 24
    69      },
    70      componentProps: {
    71        placeholder: t('users.lastName')
    72      }
    73    },
    74    {
    75      field: 'status',
    76      label: t('users.status'),
    77      component: 'Select',
    78      value: 'active',
    79      componentProps: {
    80        options: [
    81          {
    82            label: t('main.ACTIVE'),
    83            value: 'active'
    84          },
    85          {
    86            label: t('main.BLOCKED'),
    87            value: 'blocked'
    88          }
    89        ],
    90        onChange: (value: string) => {
    91  
    92        }
    93      }
    94    },
    95    {
    96      field: 'email',
    97      label: t('users.email'),
    98      component: 'Input',
    99      colProps: {
   100        span: 24
   101      },
   102      componentProps: {
   103        placeholder: t('users.email')
   104      }
   105    },
   106    {
   107      field: 'image',
   108      label: t('users.image'),
   109      component: 'Image',
   110      value: null,
   111      colProps: {
   112        span: 24
   113      },
   114      componentProps: {
   115        placeholder: t('users.image'),
   116      }
   117    },
   118    {
   119      field: 'role',
   120      label: t('users.role'),
   121      component: 'Role',
   122      colProps: {
   123        span: 24
   124      },
   125      value: null,
   126      componentProps: {
   127        placeholder: t('users.role'),
   128      }
   129    },
   130    {
   131      field: 'password',
   132      label: t('users.password'),
   133      value: '',
   134      component: 'InputPassword',
   135      colProps: {
   136        span: 24
   137      },
   138      componentProps: {
   139        style: {
   140          width: '100%'
   141        },
   142        strength: true,
   143        placeholder: t('users.passwordPlaceholder')
   144      }
   145    },
   146    {
   147      field: 'passwordRepeat',
   148      label: t('users.passwordRepeat'),
   149      value: '',
   150      component: 'InputPassword',
   151      colProps: {
   152        span: 24
   153      },
   154      componentProps: {
   155        style: {
   156          width: '100%'
   157        },
   158        strength: true,
   159        placeholder: t('users.passwordPlaceholder')
   160      }
   161    },
   162  ])
   163  
   164  watch(
   165      () => props.currentRow,
   166      (currentRow) => {
   167        if (!currentRow) return
   168        const { setValues, setSchema } = methods
   169        setValues(currentRow)
   170      },
   171      {
   172        deep: true,
   173        immediate: true
   174      }
   175  )
   176  
   177  defineExpose({
   178    elFormRef,
   179    getFormData: methods.getFormData
   180  })
   181  </script>
   182  
   183  <template>
   184    <Form
   185        :schema="schema"
   186        :rules="rules"
   187        label-position="top"
   188        @register="register"
   189    />
   190  </template>