Compare commits
2 Commits
cb79e228f8
...
77b09bec49
Author | SHA1 | Date |
---|---|---|
Your Name | 77b09bec49 | 1 year ago |
Your Name | 3c2ec0a4e4 | 1 year ago |
@ -0,0 +1,438 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
import type { UnwrapRef } from 'vue'
|
||||||
|
import {
|
||||||
|
ManOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
WomanOutlined,
|
||||||
|
} from '@ant-design/icons-vue'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const value1 = ref<string>('a')
|
||||||
|
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
name: string
|
||||||
|
delivery: boolean
|
||||||
|
type: string[]
|
||||||
|
resource: string
|
||||||
|
desc: string
|
||||||
|
}
|
||||||
|
const formState: UnwrapRef<FormState> = reactive({
|
||||||
|
name: '',
|
||||||
|
delivery: false,
|
||||||
|
type: [],
|
||||||
|
resource: '',
|
||||||
|
desc: '',
|
||||||
|
})
|
||||||
|
//对话框
|
||||||
|
|
||||||
|
const open = ref<boolean>(false)
|
||||||
|
const confirmLoading = ref<boolean>(false)
|
||||||
|
|
||||||
|
function showModal() {
|
||||||
|
open.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOk() {
|
||||||
|
modalText.value = ''
|
||||||
|
confirmLoading.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
open.value = false
|
||||||
|
confirmLoading.value = false
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
//覆盖antd样式
|
||||||
|
|
||||||
|
const customButtonStyle = [ {
|
||||||
|
width:'80px',
|
||||||
|
textAlign:'center',
|
||||||
|
borderRadius: '50px',
|
||||||
|
margin:'0 10px',
|
||||||
|
}]
|
||||||
|
const phoneStyle = [{
|
||||||
|
width:'60%',
|
||||||
|
}]
|
||||||
|
const changeStyle = [{
|
||||||
|
border:'none',
|
||||||
|
boxShadow: 'none',
|
||||||
|
color:'#409EFF',
|
||||||
|
}]
|
||||||
|
const labelCol = { style: { width: '100px' } }
|
||||||
|
const wrapperCol = { span: 20 }
|
||||||
|
const activeKey = ref('1')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-card
|
||||||
|
style="width: 80%; padding: 20px;margin: 20px auto;"
|
||||||
|
default-active-tab-key
|
||||||
|
>
|
||||||
|
<a-tabs v-model:activeKey="activeKey" tab-position="left">
|
||||||
|
<a-tab-pane key="1" tab="资料设置">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
基本资料
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p class="pleft">
|
||||||
|
基本信息
|
||||||
|
</p>
|
||||||
|
<div class="datumbox">
|
||||||
|
<div class="form">
|
||||||
|
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="登录账号:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="姓名:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="所属部门:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="员工职务:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="员工工号:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="手机号码:">
|
||||||
|
<div class="phonecss">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" :style="phoneStyle" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a-button :style="changeStyle" @click="showModal">
|
||||||
|
修改手机号
|
||||||
|
</a-button>
|
||||||
|
<a-modal v-model:open="open" title="修改手机号" :confirm-loading="confirmLoading" @ok="handleOk">
|
||||||
|
<div>
|
||||||
|
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="原手机号码:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证码:">
|
||||||
|
<div class="phonecss">
|
||||||
|
<a-input v-model:value="value" placeholder="输入验证码" :style="phoneStyle" />
|
||||||
|
<a-button :style="changeStyle">
|
||||||
|
获取验证码
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="新手机号码:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入新手机号" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="微信账号:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="邮箱地址:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="出生日期" label="DatePicker" v-bind="config">
|
||||||
|
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="性别:">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<a-radio-group v-model:value="value1">
|
||||||
|
<div>
|
||||||
|
<a-radio-group v-model:value="value1">
|
||||||
|
<a-radio-button :style="customButtonStyle" value="a">
|
||||||
|
男性<ManOutlined />
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button :style="customButtonStyle" value="b">
|
||||||
|
女性<WomanOutlined />
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button :style="customButtonStyle" value="c">
|
||||||
|
保密
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<p class="pleft">
|
||||||
|
更多信息
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a-form label-width="100px" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="籍贯:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="学历:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="专业:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="毕业院校:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="毕业时间:" label="DatePicker" v-bind="config">
|
||||||
|
<a-date-picker v-model:value="formState['date-picker']" value-format="YYYY-MM-DD" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="个人简介:" placeholder="输入内容" name="desc">
|
||||||
|
<a-textarea v-model:value="formState.desc" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="">
|
||||||
|
<button class="save">
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<div class="usepic">
|
||||||
|
<div class="idpic">
|
||||||
|
<a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
|
||||||
|
<template #icon>
|
||||||
|
<UserOutlined />
|
||||||
|
</template>
|
||||||
|
</a-avatar>
|
||||||
|
</div>
|
||||||
|
<div class="change">
|
||||||
|
<a-upload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
list-type="picture"
|
||||||
|
:max-count="1"
|
||||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||||
|
>
|
||||||
|
<a-button>
|
||||||
|
<upload-outlined />
|
||||||
|
修改头像
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<!-- 修改密码 -->
|
||||||
|
|
||||||
|
<a-tab-pane key="2" tab="修改密码">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
修改密码
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="datumbox">
|
||||||
|
<div class="form">
|
||||||
|
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||||
|
<a-form-item label="验证码:">
|
||||||
|
<div class="phonecss">
|
||||||
|
<a-input v-model:value="value" placeholder="输入内容" :style="phoneStyle" />
|
||||||
|
<a-button :style="changeStyle">
|
||||||
|
获取验证码
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="原密码:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入原密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="新密码:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入新密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="新密码:">
|
||||||
|
<a-input v-model:value="value" placeholder="输入确认新密码" />
|
||||||
|
</a-form-item>
|
||||||
|
<button class="save">
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="登录记录">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
登录记录
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- 日期 -->
|
||||||
|
<div class="date">
|
||||||
|
{{ `2023-08-22` }}
|
||||||
|
</div>
|
||||||
|
<div class="recordbox">
|
||||||
|
<div class="recordleft">
|
||||||
|
<div>
|
||||||
|
图标
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
登录人和地点时间
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="recordright">
|
||||||
|
<span>图标</span>{{ `具体时间` }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<a-tab-pane key="4" tab="系统通知">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
系统通知
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="5" tab="信息设置">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
信息设置
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="6" tab="公司列表">
|
||||||
|
<div class="datum">
|
||||||
|
<div class="datumtop">
|
||||||
|
<p>
|
||||||
|
<span>▋</span>
|
||||||
|
公司列表
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.ant-tabs-nav-list{
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab .ant-tabs-tab-active{
|
||||||
|
padding: 8px 24px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.datum{
|
||||||
|
//右边内容
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
.datumtop{
|
||||||
|
p{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size:18px;
|
||||||
|
font-weight:700;
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size:14px;
|
||||||
|
color:#409EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.datumbox{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.form{
|
||||||
|
width: 40%;
|
||||||
|
|
||||||
|
|
||||||
|
.save{
|
||||||
|
width: 160px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 100px;
|
||||||
|
color: aliceblue;
|
||||||
|
background-color: #409EFF;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.phonecss{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usepic{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 150px;
|
||||||
|
|
||||||
|
.change{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pleft{
|
||||||
|
margin: 20px ;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date{
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recordbox{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 90px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border: 1px solid #a1a0a0;
|
||||||
|
|
||||||
|
.recordleft{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6).ant-picker{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6).ant-input {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6).ant-input .phone{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.css-dev-only-do-not-override-176pxz6).ant-radio-button-wrapper:not(:first-child)::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in new issue