113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<template>
|
|
<div class="mt-3">
|
|
<d-card class="mb-[16px] bg-white" shadow="never">
|
|
<div class="text-[14px] w-full flex items-center justify-between">
|
|
<div class="font-bold mb-[16px]">基础信息</div>
|
|
</div>
|
|
<d-form ref="formRef" layout="vertical" class="ml-3 mr-3" :data="forms">
|
|
<d-row :gutter="16">
|
|
<d-col span="8">
|
|
<d-form-item
|
|
field="nickname"
|
|
label="名称"
|
|
:rules="[{ required: true, message: '请填写名称', trigger: 'blur' }]"
|
|
>
|
|
<d-input v-model="forms.nickname" />
|
|
</d-form-item>
|
|
</d-col>
|
|
<d-col span="8">
|
|
<d-form-item
|
|
field="email"
|
|
label="邮件"
|
|
:rules="[{ required: true, message: '请填写邮件', trigger: 'blur' }]"
|
|
>
|
|
<d-input v-model="forms.email" />
|
|
</d-form-item>
|
|
</d-col>
|
|
<d-col span="8">
|
|
<d-form-item
|
|
field="mobile"
|
|
label="电话"
|
|
:rules="[{ required: true, message: '请填写电话', trigger: 'blur' }]"
|
|
>
|
|
<d-input v-model="forms.mobile" />
|
|
</d-form-item>
|
|
</d-col>
|
|
</d-row>
|
|
</d-form>
|
|
</d-card>
|
|
<d-card class="mb-[16px] bg-white" shadow="never">
|
|
<div class="text-[14px] w-full flex items-center justify-between">
|
|
<div class="font-bold mb-[16px]">预警通知设置</div>
|
|
</div>
|
|
<d-form layout="vertical">
|
|
<d-form-item field="radio" label="是否开启预警通知">
|
|
<d-radio-group direction="row" v-model="forms.userExt.emailAlertSwitch">
|
|
<d-radio :value="true">开启</d-radio>
|
|
<d-radio :value="false">关闭</d-radio>
|
|
</d-radio-group>
|
|
</d-form-item>
|
|
</d-form>
|
|
</d-card>
|
|
<div class="flex">
|
|
<d-button variant="solid" class="mr-[8px]" @click="save" :loading="loading">保存</d-button>
|
|
<!-- <d-button color="secondary" class="mr-[8px]">保存草稿</d-button> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { userEdit } from '@/api/jyh';
|
|
import { getUserInfo } from '@/api/user';
|
|
import { onMounted, reactive, ref, shallowRef } from 'vue';
|
|
import { Message } from 'vue-devui';
|
|
import { useAccountStore } from '@/stores/user';
|
|
|
|
const loading = ref(false);
|
|
|
|
const forms = reactive({
|
|
nickname: '',
|
|
mobile: '',
|
|
email: '',
|
|
userExt: {
|
|
emailAlertSwitch: true
|
|
}
|
|
});
|
|
|
|
const getInfo = async () => {
|
|
const userRes = await getUserInfo();
|
|
const user = userRes.data.data.data || {};
|
|
forms.nickname = user.nickname;
|
|
forms.mobile = user.mobile;
|
|
forms.email = user.email;
|
|
forms.userExt.emailAlertSwitch = user.userExt?.emailAlertSwitch || false;
|
|
|
|
if (userRes.data?.data) {
|
|
localStorage.setItem('userInfo', JSON.stringify(userRes.data?.data));
|
|
useAccountStore().saveAccountInfo({
|
|
...userRes.data?.data
|
|
});
|
|
// }
|
|
}
|
|
};
|
|
|
|
const formRef = ref();
|
|
const save = () => {
|
|
formRef.value.validate(async (isValid, invalidFields) => {
|
|
if (isValid) {
|
|
loading.value = true;
|
|
await userEdit(forms);
|
|
loading.value = false;
|
|
Message.success('保存成功');
|
|
getInfo();
|
|
}
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
getInfo();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|