新增修改资料和修改密码功能
This commit is contained in:
zhangqi
parent
fbaae411ff
commit
a8a3ce85b5
|
|
@ -30,3 +30,22 @@ export function initInfo(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
export function updatePassword(data) {
|
||||
return request({
|
||||
url: '/frame/optr/passwd.htm',
|
||||
method: 'post',
|
||||
type: 'application/x-www-form-urlencoded',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改资料
|
||||
export function updateInfo(data) {
|
||||
return request({
|
||||
url: '/frame/optr/edit.htm',
|
||||
method: 'post',
|
||||
type: 'application/x-www-form-urlencoded',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,11 +112,11 @@
|
|||
<li v-for="(item, index) in dataUpdateList" :key="index" @click="turnDetailPage(item)">
|
||||
<div class="date">
|
||||
<p>{{ item.voyage_end_date.slice(8, 10) }}</p>
|
||||
<span class="text-ellipsis--4-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
|
||||
<span class="text-ellipsis--3-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
|
||||
</div>
|
||||
<div class="des">
|
||||
<p>{{ item.voyage_name }}</p>
|
||||
<span class="text-ellipsis--4-lines">{{ item.voyage_remark }}</span>
|
||||
<span class="text-ellipsis--3-lines">{{ item.voyage_remark }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -124,11 +124,11 @@
|
|||
<li v-for="(item, index) in sampleDataUpdateList" :key="index">
|
||||
<div class="date">
|
||||
<p>{{ item.create_time.slice(8, 10) }}</p>
|
||||
<span class="text-ellipsis--4-lines">{{ item.create_time.slice(0, 7) }}</span>
|
||||
<span class="text-ellipsis--3-lines">{{ item.create_time.slice(0, 7) }}</span>
|
||||
</div>
|
||||
<div class="des">
|
||||
<p>{{ item.dataset_name }}</p>
|
||||
<span class="text-ellipsis--4-lines">{{ item.job_type }}</span>
|
||||
<span class="text-ellipsis--3-lines">{{ item.job_type }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1289,9 +1289,9 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.text-ellipsis--4-lines {
|
||||
.text-ellipsis--3-lines {
|
||||
/* 限制显示的行数 */
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-line-clamp: 3;
|
||||
/* 将对象作为弹性伸缩盒子模型显示（必要） */
|
||||
display: -webkit-box;
|
||||
/* 设置或检索伸缩盒对象的子元素的排列方式为垂直（必要） */
|
||||
|
|
|
|||
|
|
@ -19,16 +19,16 @@
|
|||
<img v-else src="../../static/images/arrow_a.png" alt="">
|
||||
<p>我的信息</p>
|
||||
</div>
|
||||
<div class="left1" :class="show1 ? 'active' : ''">
|
||||
<img v-if="!show1" src="../../static/images/arrow.png" alt="">
|
||||
<img v-else src="../../static/images/arrow_a.png" alt="">
|
||||
<p>我的收藏</p>
|
||||
</div>
|
||||
<div class="left1" :class="show2 ? 'active' : ''">
|
||||
<img v-if="!show2" src="../../static/images/arrow.png" alt="">
|
||||
<img v-else src="../../static/images/arrow_a.png" alt="">
|
||||
<p>我的订单</p>
|
||||
</div>
|
||||
<!-- <div class="left1" :class="show1 ? 'active' : ''">-->
|
||||
<!-- <img v-if="!show1" src="../../static/images/arrow.png" alt="">-->
|
||||
<!-- <img v-else src="../../static/images/arrow_a.png" alt="">-->
|
||||
<!-- <p>我的收藏</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="left1" :class="show2 ? 'active' : ''">-->
|
||||
<!-- <img v-if="!show2" src="../../static/images/arrow.png" alt="">-->
|
||||
<!-- <img v-else src="../../static/images/arrow_a.png" alt="">-->
|
||||
<!-- <p>我的订单</p>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <el-menu
|
||||
default-active="2"
|
||||
|
|
@ -58,58 +58,59 @@
|
|||
<div class="con_left">
|
||||
<div class="left_top">
|
||||
<img src="../../static/images/tx.png" alt="">
|
||||
<p>马小云</p>
|
||||
<p>{{ info.optr_name }}</p>
|
||||
</div>
|
||||
<div class="list_mid">
|
||||
<div class="mid_1">
|
||||
<p>最后一次登录</p>
|
||||
<span>2023年2月10日 14:23:09</span>
|
||||
<p>性别</p>
|
||||
<span>{{ info.optr_sex }}</span>
|
||||
</div>
|
||||
<div class="mid_2">
|
||||
<p>最后一次订单</p>
|
||||
<span>2023年2月10日 14:23:09</span>
|
||||
<p>状态</p>
|
||||
<span>{{ getStatusText(info.optr_status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_dibu">
|
||||
<div class="dibu_1">
|
||||
<div class="dibu_1" @click="updateInfoVisible = true">
|
||||
<img src="../../static/images/bianji.png" alt="">
|
||||
<p>修改资料</p>
|
||||
</div>
|
||||
<div class="dibu_1">
|
||||
<div class="dibu_1" @click="updatePwdVisible = true">
|
||||
<img src="../../static/images/mima2.png" alt="">
|
||||
<p>修改密码</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con_right">
|
||||
|
||||
<div class="right1">
|
||||
<p>注册时间</p>
|
||||
<span>2022年2月10日 13:23:30</span>
|
||||
<p>联系地址</p>
|
||||
<span>{{ info.optr_addr }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>所在单位</p>
|
||||
<span>中科院深海科学与工程研究所</span>
|
||||
<p>联系电话</p>
|
||||
<span>{{ info.optr_mobile }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>联系方式</p>
|
||||
<span>+86 13590998987</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>身份</p>
|
||||
<span>样品管理员</span>
|
||||
<p>办公电话</p>
|
||||
<span>{{ info.optr_tel }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>邮箱</p>
|
||||
<span>sysadmin@idsse.ac.cn</span>
|
||||
<span>{{ info.optr_email }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>身份</p>
|
||||
<span>{{ info.optr_post }}</span>
|
||||
</div>
|
||||
|
||||
<div class="right1">
|
||||
<p>备注</p>
|
||||
<span>系统自动生成用户注册</span>
|
||||
<span>{{ info.optr_desc }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -119,10 +120,109 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码-->
|
||||
<el-dialog title="修改密码" :visible.sync="updatePwdVisible" :before-close="handleClosePwd" width="30%">
|
||||
<el-form ref="updatePwdForm" :model="updatePwdForm" :rules="updatePwdRules">
|
||||
<el-form-item label="旧密码" prop="old_password">
|
||||
<el-input v-model="updatePwdForm.old_password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_pass">
|
||||
<el-input v-model="updatePwdForm.new_pass" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="new_pass_again">
|
||||
<el-input v-model="updatePwdForm.new_pass_again" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClosePwd">取 消</el-button>
|
||||
<el-button type="primary" @click="submitUpdatePwdForm('updatePwdForm')">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 修改资料-->
|
||||
<el-dialog title="修改资料" :visible.sync="updateInfoVisible" :before-close="handleCloseInfo" width="50%">
|
||||
<el-form ref="updateInfoForm" :model="updateInfoForm" :rules="updateInfoRules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="optr_name">
|
||||
<el-input v-model="updateInfoForm.optr_name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="optr_sex">
|
||||
<el-radio-group v-model="updateInfoForm.optr_sex">
|
||||
<el-radio v-for="(item,index) in frameSex" :key="index" :label="item.dict_value">{{ item.dict_text }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="optr_email">
|
||||
<el-input v-model="updateInfoForm.optr_email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="optr_status">
|
||||
<el-radio-group v-model="updateInfoForm.optr_status">
|
||||
<el-radio v-for="(item,index) in frameStatus" :key="index" :label="item.dict_value">{{ item.dict_text }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="optr_mobile">
|
||||
<el-input v-model="updateInfoForm.optr_mobile" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="办公电话" prop="optr_tel">
|
||||
<el-input v-model="updateInfoForm.optr_tel" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系地址" prop="optr_addr">
|
||||
<el-input v-model="updateInfoForm.optr_addr" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="传真号码" prop="optr_fax">
|
||||
<el-input v-model="updateInfoForm.optr_fax" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门编号" prop="optr_dept">
|
||||
<el-input v-model="updateInfoForm.optr_dept" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮政编码" prop="optr_post">
|
||||
<el-input v-model="updateInfoForm.optr_post" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注信息" prop="optr_desc">
|
||||
<el-input v-model="updateInfoForm.optr_desc" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleCloseInfo">取 消</el-button>
|
||||
<el-button type="primary" @click="submitUpdateInfoForm('updateInfoForm')">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { initInfo, updatePassword, updateInfo } from '@/api/login'
|
||||
|
||||
export default {
|
||||
name: 'Person',
|
||||
|
|
@ -133,7 +233,141 @@ export default {
|
|||
return {
|
||||
show: true,
|
||||
show1: false,
|
||||
show2: false
|
||||
show2: false,
|
||||
info: {},
|
||||
frameStatus: [],
|
||||
frameSex: [],
|
||||
updatePwdVisible: false,
|
||||
updatePwdForm: {
|
||||
old_password: '',
|
||||
new_pass: '',
|
||||
new_pass_again: ''
|
||||
},
|
||||
updatePwdRules: {
|
||||
old_password: [
|
||||
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
||||
],
|
||||
new_pass: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入新密码'))
|
||||
} else {
|
||||
if (this.updatePwdForm.new_pass_again !== '') {
|
||||
this.$refs.updatePwdForm.validateField('new_pass_again')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
new_pass_again: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== this.updatePwdForm.new_pass) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
updateInfoVisible: false,
|
||||
updateInfoForm: {
|
||||
tsy_id: '',
|
||||
optr_name: '',
|
||||
optr_sex: '',
|
||||
optr_status: '',
|
||||
optr_email: '',
|
||||
optr_mobile: '',
|
||||
optr_tel: '',
|
||||
optr_addr: '',
|
||||
optr_fax: '',
|
||||
optr_dept: '',
|
||||
optr_post: '',
|
||||
optr_desc: ''
|
||||
},
|
||||
updateInfoRules: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
initInfo().then(res => {
|
||||
const data = res.map.FrameOptr
|
||||
const frameDictArray = res.map.FrameDictArray
|
||||
this.frameStatus = this.filterDictItems(frameDictArray, "FrameStatus")
|
||||
this.frameSex = this.filterDictItems(frameDictArray, "FrameSex")
|
||||
|
||||
this.info = data
|
||||
|
||||
this.updateInfoForm.tsy_id = data.tsy_id
|
||||
this.updateInfoForm.optr_name = data.optr_name
|
||||
this.updateInfoForm.optr_sex = data.optr_sex
|
||||
this.updateInfoForm.optr_status = data.optr_status
|
||||
this.updateInfoForm.optr_email = data.optr_email
|
||||
this.updateInfoForm.optr_mobile = data.optr_mobile
|
||||
this.updateInfoForm.optr_tel = data.optr_tel
|
||||
this.updateInfoForm.optr_addr = data.optr_addr
|
||||
this.updateInfoForm.optr_fax = data.optr_fax
|
||||
this.updateInfoForm.optr_dept = data.optr_dept
|
||||
this.updateInfoForm.optr_post = data.optr_post
|
||||
this.updateInfoForm.optr_desc = data.optr_desc
|
||||
})
|
||||
},
|
||||
filterDictItems(data, dictName) {
|
||||
return data.filter(item => item.dict_name === dictName)
|
||||
},
|
||||
getStatusText(status) {
|
||||
const matchedItem = this.frameStatus.find(item =>
|
||||
item.dict_value === status
|
||||
)
|
||||
return matchedItem ? matchedItem.dict_text : ''
|
||||
},
|
||||
submitUpdatePwdForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
updatePassword({
|
||||
tsy_id: this.info.tsy_id,
|
||||
old_password: this.updatePwdForm.old_password,
|
||||
new_pass: this.updatePwdForm.new_pass
|
||||
}).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success('修改成功,请退出后重新登录')
|
||||
this.handleClosePwd()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClosePwd() {
|
||||
this.$refs.updatePwdForm.resetFields()
|
||||
this.updatePwdVisible = false
|
||||
},
|
||||
submitUpdateInfoForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
updateInfo(this.updateInfoForm).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success('修改成功,请退出后重新登录')
|
||||
this.handleCloseInfo()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCloseInfo() {
|
||||
this.$refs.updateInfoForm.resetFields()
|
||||
this.updateInfoVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -341,6 +575,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: auto;
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue