xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.2 更新内容

Browse Source
This commit is contained in:
浅念
2025-08-15 16:31:55 +08:00
parent f5deb7b8f7
commit 0e84bedb67
21 changed files with 2977 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/admin/user/index.vue
+19
View File
@@ -187,6 +187,23 @@
<el-input v-model="addForm.phone" placeholder="请输入电话" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="上级" prop="report_to">
<el-select
v-model="addForm.report_to"
filterable
placeholder="请选择上级"
style="width: 100%"
>
<el-option
v-for="item in userOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="状态" prop="status">
<el-select v-model="addForm.status">
@@ -348,6 +365,7 @@
name: '',
email: '',
phone: '',
report_to: '',
status: ''
})
const roleForm = reactive({
@@ -677,6 +695,7 @@
addForm.email = row.email
addForm.phone = row.phone
addForm.status = row.status
addForm.report_to = row.report_to || ''
}
const handleAddSubmit = async () => {
const res = await manageService.userEdit(addForm)
src/views/admin/user/user_info.vue
+533
View File
@@ -0,0 +1,533 @@
<template>
<div class="page-content user">
<div class="content">
<div class="left-wrap">
<div class="user-wrap box-style">
<!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
<img
class="avatar"
:src="userInfo.avatar != '' ? userInfo.avatar : '/src/assets/img/user/avatar.webp'"
/>
<h2 class="name">{{ userInfo.name }}</h2>
<p class="des">SN:{{ userInfo.sn }}</p>
<div class="outer-info">
<!-- <div class="info-row">
<span class="info-label">昵 称：</span>
<span class="info-value">{{ userInfo.phone }}</span>
</div> -->
<div class="info-row">
<span class="info-label">电 话：</span>
<span class="info-value">{{ userInfo.phone }}</span>
</div>
<div class="info-row">
<span class="info-label">邮 箱：</span>
<span class="info-value">{{ userInfo.email }}</span>
</div>
<div class="info-row">
<span class="info-label">公 司：</span>
<span class="info-value">{{ userInfo.corp_name }}</span>
</div>
<!-- <div class="info-row">
<span class="info-label">国 家：</span>
<span class="info-value">{{ userInfo.country_txt }}</span>
</div> -->
</div>
</div>
</div>
<div class="right-wrap">
<div class="info box-style">
<h1 class="title"><span class="border" style="margin-right: 5px"></span>基本信息</h1>
<ElForm
:model="form"
class="form"
ref="ruleFormRef"
label-width="86px"
label-position="left"
>
<ElFormItem label="头像" prop="avatar">
<el-upload
class="qrcode-upload"
:action="actionImageUplode"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleUploadavatar"
:disabled="!isEdit"
>
<div class="qrcode-upload-box">
<img
class="avatar"
:src="
imageUrlavatar != '' ? imageUrlavatar : '/src/assets/img/user/avatar.webp'
"
/>
</div>
</el-upload>
</ElFormItem>
<ElRow>
<ElFormItem label="昵称" prop="name">
<el-input v-model="form.name" :disabled="!isEdit" />
</ElFormItem>
<ElFormItem label="性别" prop="sex" class="right-input">
<ElSelect v-model="form.sex" placeholder="未知" :disabled="!isEdit">
<ElOption
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</ElSelect>
</ElFormItem>
</ElRow>
<ElRow>
<ElFormItem label="联系方式" prop="phone">
<ElInput v-model="form.phone" disabled />
</ElFormItem>
<ElFormItem label="公司" prop="company" class="right-input">
<ElInput v-model="form.corp_name" disabled />
</ElFormItem>
<!-- <ElFormItem label="职务" prop="position" class="right-input">
<ElInput v-model="form.position" :disabled="!isEdit" />
</ElFormItem> -->
</ElRow>
<!-- <ElRow>
<ElFormItem label="公司" prop="company">
<ElInput v-model="form.corp_name" disabled />
</ElFormItem>
<ElFormItem label="国家" prop="address" class="right-input">
<el-select
v-model="form.country_id"
filterable
placeholder="请选择国家"
:disabled="!isEdit"
>
<el-option
v-for="item in countryOptions"
:key="item.id"
:label="item.cn_addr"
:value="item.id"
/>
</el-select>
</ElFormItem>
</ElRow> -->
<ElRow>
<ElFormItem label="邮箱" prop="email">
<ElInput v-model="form.email" :disabled="!isEdit" />
</ElFormItem>
</ElRow>
<!-- <ElRow>
<ElFormItem
label="二维码"
prop="socialize"
:class="isEdit ? 'qrcode-radio-group' : ''"
>
<el-radio-group v-model="form.socialize" v-if="isEdit">
<el-radio label="微信">微信</el-radio>
<el-radio label="WhatsApp">WhatsApp</el-radio>
</el-radio-group>
<template v-else>
<img
v-if="form.socialize_pic_full"
:src="form.socialize_pic_full"
class="qrcode-img"
/>
<span v-else class="qrcode-upload-text">暂无二维码</span>
</template>
</ElFormItem>
<ElFormItem v-if="isEdit" label="上传二维码" prop="address" class="right-input">
<el-upload
class="qrcode-upload"
:action="actionImageUplode"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleUploadavatarqrcode"
>
<div class="qrcode-upload-box">
<img
v-if="form.socialize_pic_full"
:src="socialize_pic_full"
class="qrcode-img"
/>
<span v-else class="qrcode-upload-text">
<img :src="imageUrls" class="qrcode-img" />
</span>
</div>
</el-upload>
</ElFormItem>
</ElRow> -->
<div class="el-form-item-right">
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
<i v-if="!isEdit" class="iconfont-sys"> &#xe6bf;</i>
{{ isEdit ? '保存' : '编辑' }}
</ElButton>
</div>
</ElForm>
</div>
<div class="info box-style" style="margin-top: 20px">
<h1 class="title">更改密码</h1>
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
<ElFormItem label="当前密码" prop="password">
<ElInput
v-model="pwdForm.password"
type="password"
:disabled="!isEditPwd"
show-password
/>
</ElFormItem>
<ElFormItem label="新密码" prop="password_new">
<ElInput
v-model="pwdForm.password_new"
type="password"
:disabled="!isEditPwd"
show-password
/>
</ElFormItem>
<ElFormItem label="确认新密码" prop="confirmPassword">
<ElInput
v-model="pwdForm.confirmPassword"
type="password"
:disabled="!isEditPwd"
show-password
/>
</ElFormItem>
<div class="el-form-item-right">
<ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
<i v-if="!isEditPwd" class="iconfont-sys"> &#xe6bf;</i>
{{ isEditPwd ? '保存' : '编辑' }}
</ElButton>
</div>
</ElForm>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ElForm, FormInstance } from 'element-plus'
// import imageUrl from '@/assets/img/crm/upimg.png'
import { CrmService } from '@/api/crmApi'
import { UserService } from '@/api/usersApi'
import { useUploadHeaders } from '@/composables/useUploadHeaders'
import { useUserStore } from '@/store/modules/user'
const { uploadHeaders } = useUploadHeaders()
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
defineOptions({ name: 'UserCenter' })
// 定义客户详情类型
interface CustomerInfo {
[key: string]: any
}
// const imageUrls = ref(imageUrl)
const imageUrlavatar = ref('')
// const socialize_pic_full = ref('')
// const countryOptions = ref<any>()
const form = ref<CustomerInfo>({})
//获取公司 getCompanyList
// const companyList = ref<any>()
//国家
// const getarea = async () => {
// try {
// // 这里调用获取品牌列表的接口
// const res = await CrmService.getCountry()
// countryOptions.value = res||[]
// } catch (error) { countryOptions.value = [] }
// }
const { getUserInfo } = useUserStore()
const userInfo = ref<CustomerInfo>({})
const getuserInfo = async () => {
// const data = await CrmService.userget()
userInfo.value = getUserInfo.user
form.value = getUserInfo.user
imageUrlavatar.value = getUserInfo.user.avatar
// socialize_pic_full.value = data.socialize_pic_full
}
const isEdit = ref(false)
const isEditPwd = ref(false)
const pwdForm = reactive({
password: '',
password_new: '',
confirmPassword: ''
})
const ruleFormRef = ref<FormInstance>()
const options = [
{
value: '',
label: '未知'
},
{
value: '1',
label: '男'
},
{
value: '2',
label: '女'
}
]
onMounted(async () => {
// await getarea()
await getuserInfo()
})
const edit = async () => {
if (isEdit.value) {
const res = await UserService.editUserInfo(form.value)
ElMessage.success(res?.message || '操作成功')
getuserInfo()
}
isEdit.value = !isEdit.value
}
const editPwd = async () => {
if (isEditPwd.value) {
// 判断新密码和确认密码是否一致
if (pwdForm.password_new !== pwdForm.confirmPassword) {
ElMessage.error('新密码和确认密码不一致')
return
}
const res = await CrmService.savePassword(pwdForm)
ElMessage.success(res?.message || '操作成功')
}
isEditPwd.value = !isEditPwd.value
}
//头像上传
function handleUploadavatar(response: any) {
// 假设返回图片地址字段为 response.url 或 response.data.url
imageUrlavatar.value = response.url || (response.data && response.data.file_url) || ''
// 如需同步到 form.picture
form.value.avatar = response.url || (response.data && response.data.file_name) || ''
}
//二维码上传
// function handleUploadavatarqrcode(response: any) {
// // 假设返回图片地址字段为 response.url 或 response.data.url
// socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
// imageUrls.value = response.url || (response.data && response.data.file_url) || ''
// // 如需同步到 form.picture
// form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
// }
</script>
<style lang="scss">
.user {
.icon {
width: 1.4em;
height: 1.4em;
overflow: hidden;
vertical-align: -0.15em;
fill: currentcolor;
}
}
</style>
<style lang="scss" scoped>
:deep(.qrcode-radio-group .el-form-item__content){
height: 40px;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.qrcode-img{
width: 80px;
height: 80px;
}
.page-content {
width: 100%;
height: 100%;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
$box-radius: calc(var(--custom-radius) + 4px);
.box-style {
border: 1px solid var(--art-border-color);
}
.content {
position: relative;
display: flex;
justify-content: space-between;
margin-top: 10px;
.left-wrap {
width: 350px;
margin-right: 25px;
.user-wrap {
position: relative;
height: 400px;
padding: 35px 30px;
overflow: hidden;
text-align: center;
// background: var(--art-main-bg-color);
background: linear-gradient(180deg, #E9F0FF 0%, #FFFFFF 67.9%);
border-radius: $box-radius;
.avatar {
position: relative;
z-index: 10;
width: 80px;
height: 80px;
// margin-top: 120px;
object-fit: cover;
border: 2px solid #fff;
border-radius: 50%;
}
.name {
margin-top: 20px;
font-size: 22px;
font-weight: 400;
}
.des {
margin-top: 20px;
font-size: 14px;
}
.outer-info {
// width: 260px;
margin: 0 auto;
margin-top: 30px;
}
.info-row {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
font-size: 16px;
}
.info-label {
display: inline-block;
width: 100px;
color: #222;
text-align: right;
letter-spacing: 2px;
}
.info-value {
color: #333;
margin-left: 8px;
word-break: break-all;
}
.lables {
margin-top: 40px;
h3 {
font-size: 15px;
font-weight: 500;
}
> div {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px;
> div {
padding: 3px 6px;
margin: 0 10px 10px 0;
font-size: 12px;
background: var(--art-main-bg-color);
border: 1px solid var(--art-border-color);
border-radius: 2px;
}
}
}
}
.gallery {
margin-top: 25px;
border-radius: 10px;
.item {
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.right-wrap {
flex: 1;
overflow: hidden;
border-radius: $box-radius;
.info {
background: var(--art-main-bg-color);
border-radius: $box-radius;
.title {
padding: 15px 25px;
font-size: 20px;
font-weight: 400;
color: var(--art-text-gray-800);
// border-bottom: 1px solid var(--art-border-color);
}
.form {
box-sizing: border-box;
padding: 30px 25px;
> .el-row {
.el-form-item {
width: calc(50% - 10px);
}
.el-input,
.el-select {
width: 100%;
}
}
.right-input {
margin-left: 20px;
}
.el-form-item-right {
display: flex;
align-items: center;
justify-content: end;
.el-button {
width: 110px !important;
}
}
}
}
}
}
}
@media only screen and (max-width: $device-ipad-vertical) {
.page-content {
.content {
display: block;
margin-top: 5px;
.left-wrap {
width: 100%;
}
.right-wrap {
width: 100%;
margin-top: 15px;
}
}
}
}
</style>