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

     1  <script setup lang="ts">
     2  import {computed, defineEmits, ref, unref} from 'vue'
     3  import {useI18n} from '@/hooks/web/useI18n'
     4  import {ElButton, ElMessage, ElPopconfirm} from 'element-plus'
     5  import {useForm} from '@/hooks/web/useForm'
     6  import {useCache} from '@/hooks/web/useCache'
     7  import {useAppStore} from '@/store/modules/app'
     8  import {usePermissionStore} from '@/store/modules/permission'
     9  import {useRoute, useRouter} from 'vue-router'
    10  import {useValidator} from '@/hooks/web/useValidator'
    11  import api from "@/api/api";
    12  import Form from './components/Form.vue'
    13  import {ApiUserFull, ApiUserMeta} from "@/api/stub";
    14  import {ContentWrap} from "@/components/ContentWrap";
    15  import {User} from "@/views/Users/components/Types";
    16  import {prepareUrl} from "@/utils/serverId";
    17  
    18  const {register, elFormRef, methods} = useForm()
    19  const {required} = useValidator()
    20  const emit = defineEmits(['to-restore'])
    21  const appStore = useAppStore()
    22  const permissionStore = usePermissionStore()
    23  const {currentRoute, addRoute, push} = useRouter()
    24  const route = useRoute();
    25  const {wsCache} = useCache()
    26  const {t} = useI18n()
    27  
    28  const writeRef = ref<ComponentRef<typeof Form>>()
    29  const loading = ref(false)
    30  const userId = computed(() => route.params.id as number);
    31  const currentUser = ref<Nullable<User>>(null)
    32  
    33  const fetch = async () => {
    34    loading.value = true
    35    const res = await api.v1.userServiceGetUserById(userId.value)
    36        .catch(() => {
    37        })
    38        .finally(() => {
    39          loading.value = false
    40        })
    41    if (res) {
    42      const user = res.data as ApiUserFull
    43      currentUser.value = {
    44        nickname: user.nickname,
    45        firstName: user.firstName,
    46        lastName: user.lastName,
    47        email: user.email,
    48        status: user.status,
    49        lang: user.lang,
    50        image: user.image,
    51        roleName: user.roleName,
    52        role: user.role,
    53        meta: user.meta,
    54      } as User
    55    } else {
    56      currentUser.value = null
    57    }
    58  }
    59  
    60  const save = async () => {
    61    const write = unref(writeRef)
    62    const validate = await write?.elFormRef?.validate()?.catch(() => {
    63    })
    64    if (validate) {
    65      loading.value = true
    66      const data = (await write?.getFormData()) as User
    67      const body = {
    68        nickname: data.nickname,
    69        firstName: data.firstName,
    70        lastName: data.lastName,
    71        password: data.password,
    72        passwordRepeat: data.passwordRepeat,
    73        email: data.email,
    74        status: data.status,
    75        lang: data.lang,
    76        imageId: data.image?.id,
    77        roleName: data.role?.name || null,
    78      }
    79  
    80      if (data?.image && data.image.url) {
    81        appStore.SetAvatar(prepareUrl(import.meta.env.VITE_API_BASEPATH as string + data.image.url));
    82      } else {
    83        appStore.SetAvatar('')
    84      }
    85  
    86      const res = await api.v1.userServiceUpdateUserById(userId.value, body)
    87          .catch(() => {
    88          })
    89          .finally(() => {
    90            loading.value = false
    91          })
    92      if (res) {
    93        fetch()
    94        ElMessage({
    95          title: t('Success'),
    96          message: t('message.updatedSuccessfully'),
    97          type: 'success',
    98          duration: 2000
    99        })
   100      }
   101    }
   102  }
   103  
   104  const cancel = () => {
   105    push('/etc/users')
   106  }
   107  
   108  const remove = async () => {
   109    loading.value = true
   110    const res = await api.v1.userServiceDeleteUserById(userId.value)
   111        .catch(() => {
   112        })
   113        .finally(() => {
   114          loading.value = false
   115        })
   116    if (res) {
   117      cancel()
   118    }
   119  }
   120  
   121  fetch()
   122  
   123  </script>
   124  
   125  <template>
   126    <ContentWrap>
   127      <Form ref="writeRef" :current-row="currentUser"/>
   128  
   129      <div style="text-align: right">
   130  
   131        <ElButton type="primary" @click="save()">
   132          {{ t('main.save') }}
   133        </ElButton>
   134  
   135        <ElButton type="default" @click="cancel()">
   136          {{ t('main.return') }}
   137        </ElButton>
   138  
   139        <ElPopconfirm
   140            :confirm-button-text="$t('main.ok')"
   141            :cancel-button-text="$t('main.no')"
   142            width="250"
   143            style="margin-left: 10px;"
   144            :title="$t('main.are_you_sure_to_do_want_this?')"
   145            @confirm="remove"
   146        >
   147          <template #reference>
   148            <ElButton class="mr-10px" type="danger" plain>
   149              <Icon icon="ep:delete" class="mr-5px"/>
   150              {{ t('main.remove') }}
   151            </ElButton>
   152          </template>
   153        </ElPopconfirm>
   154  
   155      </div>
   156    </ContentWrap>
   157  </template>
   158  
   159  <style lang="less" scoped>
   160  
   161  </style>