<template>
<el-form label-position="top" :model="adminData"
class="el-form-show" :rules="adminRules" ref="ruleFormRef">
<
div class="el-form-left">
<el-form-item prop="user_name">
<span
class="el-tooltip-span-star">管理员账号:</span>
<el-input v-model="adminData.user_name" placeholder="请输入管理员账号" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item prop="nick_name">
<span
class="el-tooltip-span-star">管理员昵称:</span>
<el-input v-model="adminData.nick_name" placeholder="请输入管理员昵称" maxlength="16" show-word-limit></el-input>
</el-form-item>
<el-form-item prop="mobile">
<span
class="el-tooltip-span-star">手机号:</span>
<el-input v-model="adminData.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit></el-input>
</el-form-item>
<el-form-item prop="password">
<span
class="el-tooltip-spanr">密码:</span>
<el-input v-model="adminData.password" placeholder="编辑时，如果不需要修改密码，可以选择不填" maxlength="16"></el-input>
</el-form-item>
<el-form-item>
<span
class="el-tooltip-span-star">所属角色:</span>
<
div class="
div-clear"></
div>
<el-select v-model="adminData.role_id_list" multiple placeholder="所属角色" size="large">
<el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<
div class="option-button-
div">
<el-button type="danger" @click="router.go(-1)" plain>返回</el-button>
<el-button type="primary" @click="onSubmit()" :loading="isLoading" plain>提交</el-button>
</
div>
</
div>
<
div class="el-form-right">
<el-form-item>
<span
class="el-tooltip-span">管理员头像:</span>
<
div class="
div-clear"></
div>
<el-upload
class="avatar-uploader"
:action="`https://upload-z1.qiniup.com`"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload"
:data="qiniuData"
:loading="uploadDisabled">
<i
class="iconfont icon-tianjia icon-show"></i>
</el-upload>
<img :src="adminData.avatar"
class="avatar">
</el-form-item>
</
div>
</el-form>
</template>
<script>
export default {
name: "adminEditView"
}
</script>
<script setup>
import {onBeforeMount, reactive, ref} from "vue"
import {useRoute} from "vue-router"
import router from "@/router/index";
import {getAdminInfo , editAdmin} from "@/api/system/admin";
import {getParentList } from "@/api/system/role";
import {getToken} from "@/api/system/qiniu";
import {checkSpecialFilter,checkPhone} from "@/utils/tools/el-form-rules";
import {submitSuccessJump} from "@/utils/tools/el-message";
const ruleFormRef = ref();
const isLoading = ref(false);
const route = useRoute()
const uploadDisabled = ref(false)
const adminData = reactive({
id:0,
user_name:'',
nick_name:'',
avatar:"https://file.yuanyinfu.com/achilles-admin/admin-avatar-1702468392066.png",
mobile:'',
password:'',
role_id_list:[]
})
const qiniuData = reactive({
key: "",
token: "",
url_path: ""
})
const roleList = reactive([])
const adminRules = reactive({
user_name: [
{ required: true, message: '请输入管理员账号', trigger: 'blur' },
{ validator:checkSpecialFilter, trigger: 'blur' },
{ min:5,max:30,message: "管理员账号长度为5-30位", trigger: 'blur' }
],
nick_name: [
{ required: true, message: '请输入管理员昵称', trigger: 'blur' },
{ validator:checkSpecialFilter, trigger: 'blur' },
{ min:5,max:16,message: "管理员昵称长度为5-16位", trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator:checkPhone, trigger: 'blur' }
],
})
const onSubmit = () => {
if(!ruleFormRef){
return
}
isLoading.value = true
ruleFormRef.value.validate(async(valid) => {
if(!valid){
isLoading.value = false
return false
}
if (adminData.id == 0){
if(adminData.password.length < 10 || adminData.password.length > 16){
isLoading.value = false
ElMessage.error("密码位数不能小于10且不能大于16");
return
}
}
const res = await editAdmin(adminData)
isLoading.value = false
if (res.data.code != 200){
ElMessage.error(res.data.msg);
return
}
submitSuccessJump("/system/admin/list",{})
return
})
}
const handleAvatarSuccess =(res, file) => {
if (res.key) {
adminData.avatar = qiniuData.url_path+"/"+res.key;
}
uploadDisabled.value = false
}
const beforeUpload = (file) => {
uploadDisabled.value = true
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
const isLt2M = file.size / 1024 < 200;
if (!isJPG) {
ElMessage.error('上传图片只能是 JPG、JPEG、PNG 格式!');
uploadDisabled.value = false
return false
}
if (!isLt2M) {
ElMessage.error('上传头像图片大小不能超过 200K!');
uploadDisabled.value = false
return false
}
qiniuData.key = "smart-watch/smart-watch-avatar-"+Date.now()+"."+file.name.split(".")[1];
return true
}
// Dom 挂载之后
onBeforeMount(async () => {
// 获取
父级
const res = await getParentList()
if (res.data.code != 200){
ElMessage.error("加载数据失败");
return
}
roleList.push(...res.data.data)
// 获取七牛token
const qiniuRes = await getToken()
if (qiniuRes.data.code != 200){
ElMessage.error("加载数据失败");
return
}
qiniuData.token = qiniuRes.data.data.token;
qiniuData.url_path = qiniuRes.data.data.url_path
// 获取详情
if (!route.query || !route.query.id) {
return
}
const getRes = await getAdminInfo({id: parseInt(route.query.id)})
if (getRes.data.code != 200){
ElMessage.error("加载数据失败");
return
}
Object.assign(adminData, getRes.data.data.user_info);
adminData.password = "";
adminData.role_id_list.push(...getRes.data.data.bind_role_id_list)
return
})
</script>
<style scoped>
::v-deep(.el-radio__input) {
display: none;
}
::v-deep(.el-select) {
width: 50%;
}
.el-form-show {
display: flex;
height: calc(100% - 20px);
}
.el-form-left{
float: left;
width: calc(100% - 300px);
}
.el-form-right{
float: right;
width: 200px;
margin-top: 30px;
margin-left: 70px;
}
.el-form-right .avatar-uploader{
border: 1px dashed #d9d9d9;
background-color: #fff;
width: 80px;
height: 80px;
}
.el-form-right .icon-show{
font-size: 38px;
color: #d9d9d9;
margin-top: 23px;
}
.el-form-right .avatar {
width: 80px;
height: 80px;
display: block;
margin-left: 10px;
}
.option-button-
div {
display: flex;
width: 100%;
margin-left: 10px;
padding-top: 10px;
margin-bottom: 20px;
}
</style> 上面这个后台编辑管理员的vue代码上传头像使用的是七牛云服务，现在需要改成调用本地接口的方式，请帮我修改下
扫一扫
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
