You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

275 lines
6.4 KiB

<template>
<view class="evan-form-show">
<view class="bottom-border flex-between">
<view class="left-border"><text class="mgl10">基本信息</text></view>
<text class="btn-col" @click="submitForm('form')">保存</text>
</view>
<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast">
<uni-forms-item name="name" required label="姓名">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="gender" required label="性别">
<uni-data-checkbox v-model="formData.gender" :localdata="genderList"></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item required name="departments" label="部门">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.departments" placeholder="请选择部门"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="positions" label="职位">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.positions" placeholder="请输入职位"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="jobNumber" label="工号">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="formData.jobNumber" placeholder="请输入工号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="birthday" required label="生日">
<picker disabled mode="date" :value="formData.birthday">
<view class="picker-view flex-between">
<text>{{formData.birthday ? formData.birthday : '请选择'}}</text>
<text class="cuIcon-unfold lg text-gray"></text>
</view>
</picker>
</uni-forms-item>
<uni-forms-item required name="officePhone" label="办公电话">
<uni-easyinput type="text" :inputBorder="true" v-model="formData.officePhone" placeholder="请输入办公电话"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="phone" label="手机号码">
<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone" placeholder="请输入手机号码"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="companyMail" label="公司邮箱">
<uni-easyinput type="text" :inputBorder="true" v-model="formData.companyMail" placeholder="请输入公司邮箱"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="spareMail" label="备用邮箱">
<uni-easyinput type="text" :inputBorder="true" v-model="formData.spareMail" placeholder="请输入备用邮箱"></uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
import utils from '@/components/evan-form/utils.js'
export default{
data(){
return{
formData: {
name: '',//姓名
gender: '',//性别
departments: '',//部门
positions: '',//职位
jobNumber: '',//工号
birthday: '',//生日
officePhone: '',//办公电话
phone: '',//手机号
companyMail: '',//公司邮箱
spareMail: '',//备用邮箱
},
genderList: [{
text: '男',
value: 1
},
{
text: '女',
value: 2
}],//性别列表
rules: {
phone: {
rules: [{
required: true,
errorMessage: '请输入手机号码',
},{
validateFunction: function(rule, value, data, callback) {
let pattern = /^1[3456789]\d{9}$/
if (!pattern.test(value)) {
callback('请输入正确的手机号码')
}
return true
}
}]
},
companyMail: {
rules: [{
required: true,
errorMessage: '请输入邮箱地址',
},{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
},
}
},
mounted(){
this.workUserMsg()
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
// 用户信息
async workUserMsg() {
try{
let res = await this.$http.get('/api-hrms/hrms/user/info');
this.formData = res.data;
}catch(err){
}
},
// 修改信息
submitForm(form) {
this.$refs[form].submit()
.then((res) => {
let params = {
companyMail: this.formData.companyMail,
phone: this.formData.phone,
gender: this.formData.gender
}
this.$http.post('/api-hrms/hrms/user/update',{params}).then(res => {
uni.switchTab({
url: '/pages/user/user'
});
uni.showToast({title: '编辑成功'})
}).catch(function (error) {});
}).catch((errors) => {
})
}
}
}
</script>
<style lang="scss" scoped>
.btn-col{
color: #00B9FF;
}
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 28rpx;
line-height: inherit;
}
.example {
padding: 0 30rpx 30rpx;
}
.example-info {
padding: 30rpx;
color: #3b4144;
background: #ffffff;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 28rpx;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 30rpx;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 30rpx;
color: #3b4144;
background-color: #ffffff;
font-size: 28rpx;
line-height: 40rpx;
}
.example-info-text {
font-size: 28rpx;
line-height: 40rpx;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 30rpx;
background-color: #ffffff;
}
.word-btn-white {
font-size: 36rpx;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 12rpx;
height: 96rpx;
margin: 30rpx;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
.example {
padding: 0 20rpx 20rpx;
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 28rpx;
color: #666;
border: 2rpx #e5e5e5 solid;
border-radius: 40rpx;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 40rpx;
height: 70rpx;
}
.uni-textarea-border {
padding: 20rpx;
height: 160rpx;
}
.label-box {
margin-right: 20rpx;
}
.transform-scale {
transform: scale(0.7);
}
.button {
margin: 20rpx auto;
}
</style>