edit.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="form-card">
  3. <el-form ref="root" label-width="120px" :model="form" :rules="rules">
  4. <el-form-item :label="T('Username')" prop="username">
  5. <el-input v-model="form.username"></el-input>
  6. </el-form-item>
  7. <el-form-item :label="T('Email')" prop="email">
  8. <el-input v-model="form.email"></el-input>
  9. </el-form-item>
  10. <el-form-item :label="T('Nickname')" prop="nickname">
  11. <el-input v-model="form.nickname"></el-input>
  12. </el-form-item>
  13. <el-form-item :label="T('Group')" prop="group_id">
  14. <el-select v-model="form.group_id">
  15. <el-option
  16. v-for="item in groupsList"
  17. :key="item.id"
  18. :label="item.name"
  19. :value="item.id"
  20. ></el-option>
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item :label="T('IsAdmin')" prop="is_admin">
  24. <el-switch v-model="form.is_admin"
  25. :active-value="true"
  26. :inactive-value="false"
  27. ></el-switch>
  28. </el-form-item>
  29. <el-form-item :label="T('Status')" prop="status">
  30. <el-switch v-model="form.status"
  31. :active-value="ENABLE_STATUS"
  32. :inactive-value="DISABLE_STATUS"
  33. ></el-switch>
  34. </el-form-item>
  35. <el-form-item>
  36. <el-button @click="cancel">{{ T('Cancel') }}</el-button>
  37. <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
  38. </el-form-item>
  39. </el-form>
  40. </div>
  41. </template>
  42. <script setup>
  43. import { useRoute } from 'vue-router'
  44. import { useGetDetail, useSubmit } from '@/views/user/composables/edit'
  45. import { ENABLE_STATUS, DISABLE_STATUS } from '@/utils/common_options'
  46. import { T } from '@/utils/i18n'
  47. const route = useRoute()
  48. const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
  49. const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
  50. </script>
  51. <style lang="scss" scoped>
  52. .form-card {
  53. }
  54. </style>