feat:完成了个人中心的样式调整,修复了工单界面一些显示错误
This commit is contained in:
@@ -1,133 +1,133 @@
|
||||
<template>
|
||||
<div class="my">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10" :xs="24">
|
||||
<el-card class="box-card1">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div>个人信息</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="userDetail">
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<User/>
|
||||
</el-icon>
|
||||
用户名:
|
||||
<div class="my" style="margin-top:7vh ;">
|
||||
<el-row :gutter="10">
|
||||
<div class="mybox">
|
||||
<el-col :span="infoWidth" :xs="24">
|
||||
<el-card class="box-card1">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div v-if="isShowDiv"></div>
|
||||
<div style="font-weight: bold">个人信息 <span v-if="isShowPassword">:</span></div>
|
||||
<el-button v-if="isShowDiv" @click="changePassword" type="primary" plain size="small">修改密码</el-button>
|
||||
</div>
|
||||
<div>{{ userParams.userName }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<User/>
|
||||
</el-icon>
|
||||
用户名称:
|
||||
|
||||
</template>
|
||||
<div class="userDetail">
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<User />
|
||||
</el-icon>
|
||||
<strong>工号 :</strong>
|
||||
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.userNumber }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.nickName }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Notification/>
|
||||
</el-icon>
|
||||
工号:
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Notification />
|
||||
</el-icon>
|
||||
<strong>邮箱 :</strong>
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.email }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.workCode }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Phone/>
|
||||
</el-icon>
|
||||
电话号码:
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Notification />
|
||||
</el-icon><strong>登录账号 :</strong>
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.loginAccount }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.mobile }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<House/>
|
||||
</el-icon>
|
||||
所属公司:
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Folder />
|
||||
</el-icon>
|
||||
<strong>用户名称 :</strong>
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.userName }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.subCompanyName }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<FolderOpened/>
|
||||
</el-icon>
|
||||
所属部门:
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Folder />
|
||||
</el-icon>
|
||||
<strong>手机号码 :</strong>
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.userPhone }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.departmentName }}</div>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Folder/>
|
||||
</el-icon>
|
||||
岗位:
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center" class="userInfo_label">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Folder />
|
||||
</el-icon>
|
||||
<strong>账号类型 :</strong>
|
||||
|
||||
</div>
|
||||
<div>{{ userParams.accountType }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.jobActivityDesc }}</div>
|
||||
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<Wallet/>
|
||||
</el-icon>
|
||||
账号类型:
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div class="line" v-if="isShowPassword"></div>
|
||||
<el-col :span="10" :xs="24" v-if="isShowPassword">
|
||||
<el-card class="box-card">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div style="font-weight: bold">{{ isInitPassword ? '修改密码 :' : '初始化密码 :' }}</div>
|
||||
</div>
|
||||
<div>{{ userParams.accountType === '0' ? '主账号' : '次账号' }}</div>
|
||||
</template>
|
||||
<div class="card-body">
|
||||
<el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
|
||||
<el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left;margin: 7vh 0;"
|
||||
v-if="isInitPassword">
|
||||
<el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password" :prefix-icon="Lock"
|
||||
show-password="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left;margin: 7vh 0">
|
||||
<el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password" :prefix-icon="Lock"
|
||||
show-password="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword" :required="true"
|
||||
style="text-align:left;margin-top: 7vh;margin-bottom: 5vh">
|
||||
<el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"
|
||||
:prefix-icon="Lock" show-password="true" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="button-word">
|
||||
<el-button color="#409eff" @click="handleSubmit" style="color: white">提交</el-button>
|
||||
<el-button color="#409eff" @click="close" style="color: white">关闭</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<div style="display: flex;align-items: center">
|
||||
<el-icon size="18" style="margin-right: 5px">
|
||||
<User/>
|
||||
</el-icon>
|
||||
所属角色:
|
||||
</div>
|
||||
<div>{{ belongToRole(userParams.roles) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="14" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div>{{ isInitPassword ? '修改密码' : '初始化密码' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
|
||||
<el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left" v-if="isInitPassword">
|
||||
<el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left">
|
||||
<el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword" :required="true" style="text-align:left">
|
||||
<el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ElNotification} from 'element-plus'
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {editPassword} from "@/api/auth/auth";
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { useTagsView } from '@/stores/tagsview.js'
|
||||
import { editPassword } from "@/api/auth/auth";
|
||||
import { Lock } from '@element-plus/icons-vue'
|
||||
import { ref } from 'vue';
|
||||
|
||||
const isInitPassword = ref(false);
|
||||
const infoWidth = ref(22)
|
||||
const isShowDiv = ref(true)
|
||||
const isShowPassword = ref(false);
|
||||
const isInitPassword = ref(true);
|
||||
const userParams = ref({});
|
||||
const passwordRef = ref();
|
||||
const router = useRouter()
|
||||
@@ -137,6 +137,7 @@ const userPassword = ref({
|
||||
confirmPassword: ''
|
||||
});
|
||||
const tagsViewStore = useTagsView()
|
||||
|
||||
const validatePasswordComplexity = (rule, value, callback) => {
|
||||
const reg = /^(?=.*[a-zA-Z])(?=.*\d).{1,9}$/; //密码必须是至少包含字母、数字,1-9位
|
||||
if (!reg.test(value)) {
|
||||
@@ -156,10 +157,10 @@ const validatePasswordEquality = (rule, value, callback) => {
|
||||
}
|
||||
const rules = reactive({
|
||||
oldPassword: [
|
||||
{required: true, message: "旧密码不能为空", trigger: ["change", "blur"]},
|
||||
{ required: true, message: "旧密码不能为空", trigger: ["change", "blur"] },
|
||||
],
|
||||
newPassword: [
|
||||
{required: true, message: "新密码不能为空", trigger: ["change", "blur"]},
|
||||
{ required: true, message: "新密码不能为空", trigger: ["change", "blur"] },
|
||||
{
|
||||
required: true,
|
||||
trigger: ["change", "blur"],
|
||||
@@ -167,7 +168,7 @@ const rules = reactive({
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{required: true, message: "确认密码不能为空", trigger: ["change", "blur"]},
|
||||
{ required: true, message: "确认密码不能为空", trigger: ["change", "blur"] },
|
||||
{
|
||||
required: true,
|
||||
trigger: ["change", "blur"],
|
||||
@@ -190,30 +191,58 @@ const belongToRole = (roles) => {
|
||||
|
||||
// 修改密码
|
||||
const handleSubmit = async () => {
|
||||
editPassword({
|
||||
...userPassword.value
|
||||
}).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
passwordRef.value.resetFields()
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
'提交成功',
|
||||
{
|
||||
confirmButtonText: '关闭',
|
||||
dangerouslyUseHTMLString: true,
|
||||
// type: 'warning',
|
||||
center: true,
|
||||
showCancelButton: false,
|
||||
'show-close': false,
|
||||
customStyle: {
|
||||
'max-width': '15%',
|
||||
height: '40%'
|
||||
},
|
||||
message: `<svg t="1726160648055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" data-spm-anchor-id="a313x.search_index.0.i2.2bb23a81IdR6cV" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2672" data-spm-anchor-id="a313x.search_index.0.i3.2bb23a81IdR6cV" class=""></path></svg>
|
||||
<br><br><div style="font-size: 18px;text-align:center"> 提交成功</div><br><br>`
|
||||
|
||||
}
|
||||
)
|
||||
editPassword({
|
||||
...userPassword.value
|
||||
}).then(res => {
|
||||
ElNotification({
|
||||
title: '提示',
|
||||
message: res.msg,
|
||||
type: res.code === 1000 ? 'success' : 'error'
|
||||
})
|
||||
if (res.code === 1000) {
|
||||
passwordRef.value.resetFields()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关闭
|
||||
const close = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/')
|
||||
// tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
// router.push('/')
|
||||
isShowPassword.value = false
|
||||
isShowDiv.value = true
|
||||
infoWidth.value = 22
|
||||
}
|
||||
|
||||
const changePassword = () => {
|
||||
isShowPassword.value = true
|
||||
isShowDiv.value = false
|
||||
infoWidth.value = 10
|
||||
}
|
||||
// onMounted(() => {
|
||||
// getInfo()
|
||||
// })
|
||||
</script>
|
||||
<style lang="scss">
|
||||
body, div {
|
||||
body,
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -222,6 +251,41 @@ body, div {
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
|
||||
.mybox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.box-card {
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
// background-color: blue;
|
||||
|
||||
}
|
||||
|
||||
.card-body {
|
||||
width: 90%;
|
||||
// display: flex;
|
||||
height: 45vh;
|
||||
// background-color: red;
|
||||
|
||||
// justify-content: space-around;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
||||
border-left: 1px solid #000;
|
||||
}
|
||||
|
||||
.userDetail {
|
||||
.userImg {
|
||||
height: 170px;
|
||||
@@ -239,21 +303,37 @@ body, div {
|
||||
}
|
||||
|
||||
.userInfo_item {
|
||||
display: flex;align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
border-bottom-style: solid;
|
||||
border-color: #daddd2;
|
||||
border-width: 1px;
|
||||
// height: 70px;
|
||||
height: 9vh;
|
||||
// border-bottom-style: solid;
|
||||
// border-color: #daddd2;
|
||||
// border-width: 1px;
|
||||
//text-align: left;
|
||||
//line-height: 40px;
|
||||
|
||||
}
|
||||
|
||||
.userInfo_label {
|
||||
width: 100%;
|
||||
border-bottom-style: solid;
|
||||
border-color: #daddd2;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
//
|
||||
//.userInfo_item > div {
|
||||
// float: right;
|
||||
//}
|
||||
}
|
||||
|
||||
.button-word {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search">
|
||||
<FvSelect></FvSelect>
|
||||
</fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
||||
<WorkDialog ref="workDialogRef"></WorkDialog>
|
||||
@@ -59,7 +58,6 @@ const searchConfig = reactive([
|
||||
cacheKey: 'work_order_status',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
filterable: true,
|
||||
},
|
||||
component: shallowRef(fvSelect),
|
||||
}, {
|
||||
@@ -83,7 +81,7 @@ const searchConfig = reactive([
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'requirementName',
|
||||
prop: 'requirementDate',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
@@ -92,7 +90,7 @@ const searchConfig = reactive([
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '处理时间',
|
||||
prop: 'requirementName',
|
||||
prop: 'requirementDate',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
@@ -101,7 +99,7 @@ const searchConfig = reactive([
|
||||
component: 'el-date-picker',
|
||||
}, {
|
||||
label: '完成时间',
|
||||
prop: 'requirementName',
|
||||
prop: 'requirementDate',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
@@ -245,8 +243,8 @@ const handleClose = (row) => {
|
||||
'确定要关单吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
@@ -269,8 +267,8 @@ const handleDelete = (row) => {
|
||||
'确定要删除吗?',
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user