update 调整代码格式
This commit is contained in:
疯狂的狮子Li
@ -1,143 +1,3 @@
|
||||
<script setup name="Config" lang="ts">
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
|
||||
import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { DateModelType } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
|
||||
|
||||
const configList = ref<ConfigVO[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<number | string>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
|
||||
const queryFormRef = ref(ElForm);
|
||||
const configFormRef = ref(ElForm);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const initFormData: ConfigForm = {
|
||||
configId: undefined,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
configType: "Y",
|
||||
remark: ''
|
||||
}
|
||||
const data = reactive<PageData<ConfigForm, ConfigQuery>>({
|
||||
form: {...initFormData},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: '',
|
||||
},
|
||||
rules: {
|
||||
configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
|
||||
configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
|
||||
configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询参数列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
|
||||
configList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = {...initFormData};
|
||||
configFormRef.value.resetFields();
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: ConfigVO[]) => {
|
||||
ids.value = selection.map(item => item.configId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加参数";
|
||||
nextTick(() => {
|
||||
reset();
|
||||
})
|
||||
}
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = (row?: ConfigVO) => {
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改参数";
|
||||
const configId = row?.configId || ids.value[0];
|
||||
nextTick(async () => {
|
||||
reset();
|
||||
const res = await getConfig(configId);
|
||||
form.value = res.data;
|
||||
})
|
||||
}
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
configFormRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
dialog.visible = false;
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ConfigVO) => {
|
||||
const configIds = row?.configId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
|
||||
await delConfig(configIds);
|
||||
getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("system/config/export", {
|
||||
...queryParams.value
|
||||
}, `config_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
/** 刷新缓存按钮操作 */
|
||||
const handleRefreshCache = async () => {
|
||||
await refreshCache();
|
||||
proxy?.$modal.msgSuccess("刷新缓存成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
@ -259,3 +119,143 @@ onMounted(() => {
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Config" lang="ts">
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
|
||||
import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { DateModelType } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
|
||||
|
||||
const configList = ref<ConfigVO[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<number | string>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
|
||||
const queryFormRef = ref(ElForm);
|
||||
const configFormRef = ref(ElForm);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const initFormData: ConfigForm = {
|
||||
configId: undefined,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
configType: "Y",
|
||||
remark: ''
|
||||
}
|
||||
const data = reactive<PageData<ConfigForm, ConfigQuery>>({
|
||||
form: {...initFormData},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: '',
|
||||
},
|
||||
rules: {
|
||||
configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
|
||||
configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
|
||||
configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询参数列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value));
|
||||
configList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = {...initFormData};
|
||||
configFormRef.value.resetFields();
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: ConfigVO[]) => {
|
||||
ids.value = selection.map(item => item.configId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加参数";
|
||||
nextTick(() => {
|
||||
reset();
|
||||
})
|
||||
}
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = (row?: ConfigVO) => {
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改参数";
|
||||
const configId = row?.configId || ids.value[0];
|
||||
nextTick(async () => {
|
||||
reset();
|
||||
const res = await getConfig(configId);
|
||||
form.value = res.data;
|
||||
})
|
||||
}
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
configFormRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
dialog.visible = false;
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ConfigVO) => {
|
||||
const configIds = row?.configId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
|
||||
await delConfig(configIds);
|
||||
getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("system/config/export", {
|
||||
...queryParams.value
|
||||
}, `config_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
/** 刷新缓存按钮操作 */
|
||||
const handleRefreshCache = async () => {
|
||||
await refreshCache();
|
||||
proxy?.$modal.msgSuccess("刷新缓存成功");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,31 +1,3 @@
|
||||
<script setup name="Profile" lang="ts">
|
||||
import userAvatar from "./userAvatar.vue";
|
||||
import userInfo from "./userInfo.vue";
|
||||
import resetPwd from "./resetPwd.vue";
|
||||
import { getUserProfile } from "@/api/system/user";
|
||||
|
||||
const activeTab = ref("userinfo");
|
||||
const state = ref<{ user: any; roleGroup: string; postGroup: string}>({
|
||||
user: {},
|
||||
roleGroup: '',
|
||||
postGroup: ''
|
||||
});
|
||||
|
||||
const userForm = ref({});
|
||||
|
||||
const getUser = async () => {
|
||||
const res = await getUserProfile();
|
||||
state.value.user = res.data.user;
|
||||
userForm.value = { ...res.data.user }
|
||||
state.value.roleGroup = res.data.roleGroup;
|
||||
state.value.postGroup = res.data.postGroup;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getUser();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
@ -89,3 +61,31 @@ onMounted(() => {
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Profile" lang="ts">
|
||||
import userAvatar from "./userAvatar.vue";
|
||||
import userInfo from "./userInfo.vue";
|
||||
import resetPwd from "./resetPwd.vue";
|
||||
import { getUserProfile } from "@/api/system/user";
|
||||
|
||||
const activeTab = ref("userinfo");
|
||||
const state = ref<{ user: any; roleGroup: string; postGroup: string}>({
|
||||
user: {},
|
||||
roleGroup: '',
|
||||
postGroup: ''
|
||||
});
|
||||
|
||||
const userForm = ref({});
|
||||
|
||||
const getUser = async () => {
|
||||
const res = await getUserProfile();
|
||||
state.value.user = res.data.user;
|
||||
userForm.value = { ...res.data.user }
|
||||
state.value.roleGroup = res.data.roleGroup;
|
||||
state.value.postGroup = res.data.postGroup;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getUser();
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import { updateUserPwd } from '@/api/system/user';
|
||||
import { ComponentInternalInstance } from 'vue';
|
||||
import { ResetPwdForm } from '@/api/system/user/types'
|
||||
import { ElForm } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
|
||||
const pwdRef = ref(ElForm);
|
||||
|
||||
const user = ref<ResetPwdForm>({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
const equalToPassword = (rule: any, value: string, callback: any) => {
|
||||
if (user.value.newPassword !== value) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rules = ref({
|
||||
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
|
||||
newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
|
||||
confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
const submit = () => {
|
||||
pwdRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
await updateUserPwd(user.value.oldPassword, user.value.newPassword)
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 关闭按钮 */
|
||||
const close = () => {
|
||||
proxy?.$tab.closePage();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
@ -60,3 +15,48 @@ const close = () => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { updateUserPwd } from '@/api/system/user';
|
||||
import { ComponentInternalInstance } from 'vue';
|
||||
import { ResetPwdForm } from '@/api/system/user/types'
|
||||
import { ElForm } from 'element-plus';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
|
||||
const pwdRef = ref(ElForm);
|
||||
|
||||
const user = ref<ResetPwdForm>({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
const equalToPassword = (rule: any, value: string, callback: any) => {
|
||||
if (user.value.newPassword !== value) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const rules = ref({
|
||||
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
|
||||
newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
|
||||
confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
const submit = () => {
|
||||
pwdRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
await updateUserPwd(user.value.oldPassword, user.value.newPassword)
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 关闭按钮 */
|
||||
const close = () => {
|
||||
proxy?.$tab.closePage();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,104 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import "vue-cropper/dist/index.css";
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import { uploadAvatar } from "@/api/system/user";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
|
||||
interface Options {
|
||||
img: string | ArrayBuffer | null // 裁剪图片的地址
|
||||
autoCrop: boolean // 是否默认生成截图框
|
||||
autoCropWidth: number // 默认生成截图框宽度
|
||||
autoCropHeight: number // 默认生成截图框高度
|
||||
fixedBox: boolean // 固定截图框大小 不允许改变
|
||||
fileName: string
|
||||
previews: any // 预览数据
|
||||
outputType: string
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const open = ref(false);
|
||||
const visible = ref(false);
|
||||
const title = ref("修改头像");
|
||||
|
||||
const cropper = ref<any>({});
|
||||
//图片裁剪数据
|
||||
const options = reactive<Options>({
|
||||
img: userStore.avatar,
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true,
|
||||
outputType: "png",
|
||||
fileName: '',
|
||||
previews: {},
|
||||
visible: false
|
||||
});
|
||||
|
||||
/** 编辑头像 */
|
||||
const editCropper = () => {
|
||||
open.value = true;
|
||||
}
|
||||
/** 打开弹出层结束时的回调 */
|
||||
const modalOpened = () => {
|
||||
visible.value = true;
|
||||
}
|
||||
/** 覆盖默认上传行为 */
|
||||
const requestUpload = (): any => {}
|
||||
/** 向左旋转 */
|
||||
const rotateLeft = () => {
|
||||
cropper.value.rotateLeft();
|
||||
}
|
||||
/** 向右旋转 */
|
||||
const rotateRight = () => {
|
||||
cropper.value.rotateRight();
|
||||
}
|
||||
/** 图片缩放 */
|
||||
const changeScale = (num: number) => {
|
||||
num = num || 1;
|
||||
cropper.value.changeScale(num);
|
||||
}
|
||||
/** 上传预处理 */
|
||||
const beforeUpload = (file: any) => {
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
proxy?.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
options.img = reader.result;
|
||||
options.fileName = file.name;
|
||||
};
|
||||
}
|
||||
}
|
||||
/** 上传图片 */
|
||||
const uploadImg = async () => {
|
||||
cropper.value.getCropBlob(async (data: any) => {
|
||||
let formData = new FormData();
|
||||
formData.append("avatarfile", data, options.fileName);
|
||||
const res = await uploadAvatar(formData);
|
||||
open.value = false;
|
||||
options.img = res.data.imgUrl;
|
||||
userStore.avatar = options.img as string;
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
visible.value = false;
|
||||
});
|
||||
}
|
||||
/** 实时预览 */
|
||||
const realTime = (data: any) => {
|
||||
options.previews = data;
|
||||
}
|
||||
/** 关闭窗口 */
|
||||
const closeDialog = () => {
|
||||
options.img = userStore.avatar;
|
||||
options.visible = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-info-head" @click="editCropper()">
|
||||
<img :src="options.img as string" title="点击上传头像" class="img-circle img-lg" />
|
||||
@ -154,6 +53,107 @@ const closeDialog = () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "vue-cropper/dist/index.css";
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import { uploadAvatar } from "@/api/system/user";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
|
||||
interface Options {
|
||||
img: string | ArrayBuffer | null // 裁剪图片的地址
|
||||
autoCrop: boolean // 是否默认生成截图框
|
||||
autoCropWidth: number // 默认生成截图框宽度
|
||||
autoCropHeight: number // 默认生成截图框高度
|
||||
fixedBox: boolean // 固定截图框大小 不允许改变
|
||||
fileName: string
|
||||
previews: any // 预览数据
|
||||
outputType: string
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const open = ref(false);
|
||||
const visible = ref(false);
|
||||
const title = ref("修改头像");
|
||||
|
||||
const cropper = ref<any>({});
|
||||
//图片裁剪数据
|
||||
const options = reactive<Options>({
|
||||
img: userStore.avatar,
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true,
|
||||
outputType: "png",
|
||||
fileName: '',
|
||||
previews: {},
|
||||
visible: false
|
||||
});
|
||||
|
||||
/** 编辑头像 */
|
||||
const editCropper = () => {
|
||||
open.value = true;
|
||||
}
|
||||
/** 打开弹出层结束时的回调 */
|
||||
const modalOpened = () => {
|
||||
visible.value = true;
|
||||
}
|
||||
/** 覆盖默认上传行为 */
|
||||
const requestUpload = (): any => {}
|
||||
/** 向左旋转 */
|
||||
const rotateLeft = () => {
|
||||
cropper.value.rotateLeft();
|
||||
}
|
||||
/** 向右旋转 */
|
||||
const rotateRight = () => {
|
||||
cropper.value.rotateRight();
|
||||
}
|
||||
/** 图片缩放 */
|
||||
const changeScale = (num: number) => {
|
||||
num = num || 1;
|
||||
cropper.value.changeScale(num);
|
||||
}
|
||||
/** 上传预处理 */
|
||||
const beforeUpload = (file: any) => {
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
proxy?.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
options.img = reader.result;
|
||||
options.fileName = file.name;
|
||||
};
|
||||
}
|
||||
}
|
||||
/** 上传图片 */
|
||||
const uploadImg = async () => {
|
||||
cropper.value.getCropBlob(async (data: any) => {
|
||||
let formData = new FormData();
|
||||
formData.append("avatarfile", data, options.fileName);
|
||||
const res = await uploadAvatar(formData);
|
||||
open.value = false;
|
||||
options.img = res.data.imgUrl;
|
||||
userStore.avatar = options.img as string;
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
visible.value = false;
|
||||
});
|
||||
}
|
||||
/** 实时预览 */
|
||||
const realTime = (data: any) => {
|
||||
options.previews = data;
|
||||
}
|
||||
/** 关闭窗口 */
|
||||
const closeDialog = () => {
|
||||
options.img = userStore.avatar;
|
||||
options.visible = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
|
||||
@ -1,43 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import { updateUserProfile } from "@/api/system/user";
|
||||
import { FormRules } from "element-plus";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { PropType } from "vue";
|
||||
import { ElForm } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object as PropType<any>,
|
||||
}
|
||||
});
|
||||
const userForm = computed(() => props.user);
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const userRef = ref(ElForm);
|
||||
|
||||
const rules = ref<FormRules>({
|
||||
nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
|
||||
phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
|
||||
});
|
||||
|
||||
|
||||
/** 提交按钮 */
|
||||
const submit = () => {
|
||||
userRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
await updateUserProfile(props.user)
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 关闭按钮 */
|
||||
const close = () => {
|
||||
proxy?.$tab.closePage();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
@ -61,3 +21,43 @@ const close = () => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { updateUserProfile } from "@/api/system/user";
|
||||
import { FormRules } from "element-plus";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { PropType } from "vue";
|
||||
import { ElForm } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object as PropType<any>,
|
||||
}
|
||||
});
|
||||
const userForm = computed(() => props.user);
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const userRef = ref(ElForm);
|
||||
|
||||
const rules = ref<FormRules>({
|
||||
nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
|
||||
email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
|
||||
phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
|
||||
});
|
||||
|
||||
|
||||
/** 提交按钮 */
|
||||
const submit = () => {
|
||||
userRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
await updateUserProfile(props.user)
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 关闭按钮 */
|
||||
const close = () => {
|
||||
proxy?.$tab.closePage();
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user