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.
232 lines
5.4 KiB
232 lines
5.4 KiB
7 months ago
|
<template>
|
||
|
<view class="add">
|
||
|
<!-- 设备信息 -->
|
||
|
<view class="main">
|
||
|
<u--form labelPosition="left" labelAlign="center" :model="member" ref="form1" >
|
||
|
<u-form-item label="姓名" prop="member.nickName" labelWidth="auto" borderBottom ref="item1" >
|
||
|
<u--input v-model="member.nickName" border="none" placeholder="请输入姓名"></u--input>
|
||
|
</u-form-item>
|
||
|
<u-form-item label="手机" prop="member.phonenumber" labelWidth="auto" borderBottom ref="item1" >
|
||
|
<u--input v-model="member.phonenumber" border="none" placeholder="请输入手机号码"></u--input>
|
||
|
</u-form-item>
|
||
|
<u-form-item
|
||
|
label="部门"
|
||
|
prop="member.dept"
|
||
|
borderBottom
|
||
|
@click="deptMethod"
|
||
|
labelWidth="auto"
|
||
|
ref="item1"
|
||
|
>
|
||
|
<u--input
|
||
|
v-model="member.dept"
|
||
|
disabled
|
||
|
disabledColor="#ffffff"
|
||
|
placeholder="请选择部门"
|
||
|
border="none"
|
||
|
></u--input>
|
||
|
<u-icon
|
||
|
slot="right"
|
||
|
name="arrow-right"
|
||
|
></u-icon>
|
||
|
</u-form-item>
|
||
|
|
||
|
<u-form-item label="头像" prop="member.avatar" labelWidth="auto" borderBottom ref="item1" >
|
||
|
<u-upload
|
||
|
:fileList="fileList1"
|
||
|
@afterRead="afterRead"
|
||
|
@delete="deletePic"
|
||
|
name="1"
|
||
|
multiple
|
||
|
:maxCount="1"
|
||
|
:previewFullImage="true"
|
||
|
></u-upload>
|
||
|
</u-form-item>
|
||
|
</u--form>
|
||
|
<u-action-sheet
|
||
|
:show="showDept"
|
||
|
:actions="deptActions"
|
||
|
title="请选择部门"
|
||
|
@close="showDept = false"
|
||
|
@select="deptSelect"
|
||
|
>
|
||
|
</u-action-sheet>
|
||
|
</view>
|
||
|
<u-button type="primary" class="submit" @click="submit" text="提 交"></u-button>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
show: true,
|
||
|
member: {
|
||
|
nickName:'',
|
||
|
phonenumber:'',
|
||
|
dept:'',
|
||
|
deptId:null,
|
||
|
lastTime: '',
|
||
|
remark:'',
|
||
|
avatar:''
|
||
|
},
|
||
|
pickerTime: Number(new Date()),
|
||
|
datePickShow: false,
|
||
|
|
||
|
showDept: false,
|
||
|
deptActions: [
|
||
|
],
|
||
|
fileList1:[]
|
||
|
}
|
||
|
},
|
||
|
|
||
|
onLoad: function() {
|
||
|
this.getDept();
|
||
|
},
|
||
|
filters: {
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
async getDept() {
|
||
|
const { data:res } = await this.$http('/deptList', {});
|
||
|
if(res.code) return
|
||
|
this.deptActions = [];
|
||
|
for (var i = 0; i < res.data.length; i++) {
|
||
|
this.deptActions.push({
|
||
|
name: res.data[i].deptName,
|
||
|
value: res.data[i].id
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
reset(){
|
||
|
this.member.nickName = '';
|
||
|
this.member.phonenumber='';
|
||
|
this.member.dept='';
|
||
|
this.member.deptId=null;
|
||
|
this.member.avatar='';
|
||
|
this.fileList1=[];
|
||
|
},
|
||
|
deptMethod(){
|
||
|
this.showDept = true;
|
||
|
},
|
||
|
deptSelect(e) {
|
||
|
this.member.dept = e.name
|
||
|
this.member.deptId = e.value
|
||
|
this.$refs.form1.validateField('member.dept')
|
||
|
},
|
||
|
submit(){
|
||
|
let flag = true;
|
||
|
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
||
|
if(!reg.test(this.member.phonenumber)){
|
||
|
return uni.showToast({
|
||
|
title: '手机号格式有误',
|
||
|
icon: 'error'
|
||
|
})
|
||
|
}
|
||
|
|
||
|
if(this.member.deptId==null || this.member.nickName=='' || this.member.phonenumber =='' ){
|
||
|
flag = false;
|
||
|
}
|
||
|
if(this.fileList1.length == 0){
|
||
|
flag = false;
|
||
|
}
|
||
|
if(!flag) return uni.showToast({
|
||
|
title: '请补充任务内容',
|
||
|
icon: 'error'
|
||
|
})
|
||
|
console.log(this.fileList1)
|
||
|
this.member.avatar = this.fileList1[0].url;
|
||
|
this.add();
|
||
|
|
||
|
},
|
||
|
async add(){
|
||
|
const { data:res } = await this.$http('/addUser', this.member);
|
||
|
if(res.code == 0){
|
||
|
uni.showToast({
|
||
|
title: '提交成功',
|
||
|
icon: 'success'
|
||
|
});
|
||
|
this.reset();
|
||
|
}
|
||
|
|
||
|
},
|
||
|
// 删除图片
|
||
|
deletePic(event) {
|
||
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
},
|
||
|
// 新增图片
|
||
|
async afterRead(event) {
|
||
|
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
|
||
|
let lists = [].concat(event.file)
|
||
|
let fileListLen = this[`fileList${event.name}`].length
|
||
|
lists.map((item) => {
|
||
|
this[`fileList${event.name}`].push({
|
||
|
...item,
|
||
|
status: 'uploading',
|
||
|
message: '上传中'
|
||
|
})
|
||
|
})
|
||
|
for (let i = 0; i < lists.length; i++) {
|
||
|
const result = await this.uploadFilePromise(lists[i].url)
|
||
|
let item = this[`fileList${event.name}`][fileListLen]
|
||
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
|
status: 'success',
|
||
|
message: '',
|
||
|
url: result
|
||
|
}))
|
||
|
fileListLen++
|
||
|
}
|
||
|
},
|
||
|
uploadFilePromise(url) {
|
||
|
return new Promise((resolve, reject) => {
|
||
|
const token = uni.getStorageSync("token");
|
||
|
let a = uni.uploadFile({
|
||
|
url: this.BASE_URL+'/upload', // 仅为示例,非真实的接口地址
|
||
|
filePath: url,
|
||
|
name: 'file',
|
||
|
header: {
|
||
|
"Authorization":"Bearer " + token,
|
||
|
},
|
||
|
formData: {
|
||
|
user: 'test'
|
||
|
},
|
||
|
success: (res) => {
|
||
|
setTimeout(() => {
|
||
|
let data = JSON.parse(res.data)
|
||
|
console.log(data)
|
||
|
resolve(data.fileName)
|
||
|
}, 1000)
|
||
|
}
|
||
|
});
|
||
|
})
|
||
|
},
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.add {
|
||
|
background: #f6f6f6;
|
||
|
padding: 2.667vw;
|
||
|
height: 100vh;
|
||
|
.main {
|
||
|
background: #ffffff;
|
||
|
margin-bottom: 2.667vw;
|
||
|
padding: 2vw;
|
||
|
border-radius: 8px;
|
||
|
|
||
|
.u-form-item__body__right{
|
||
|
padding-left: 20vw;
|
||
|
}
|
||
|
.submit{
|
||
|
position: absolute;
|
||
|
bottom: 10vw;
|
||
|
width: 100%;
|
||
|
}
|
||
|
.u-button{
|
||
|
border: none !important;
|
||
|
padding: 0 !important;
|
||
|
justify-content: flex-start;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|