Files
medicine_app/pages/miniClass/memberSet.vue
@fawn-nine 4426b044bd 暂存
2024-08-05 17:30:54 +08:00

777 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="page">
<z-nav-bar title="班级成员设置"></z-nav-bar>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<uni-forms :modelValue="form" :rules="rules" ref="form">
<view class="input_box " style="">
<uni-forms-item label="" name="monitor" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>班长</text>
</view>
<view class="addBtnBox">
<view class="item" v-if="memeberRefsh">
<view class="box" @click="showMemberAdd('monitor')">
<span v-show="!form.monitor"><uni-icons class="addIcon" color="#999" type="plusempty"
size="20"></uni-icons></span>
<text style="width: 100%; display: inline-block;"
v-if="form.monitor">
<!-- {{item && item.nickname != '' && item.nickname != null ? item.nickname : '匿名用户'}} -->
{{form.monitor.tel}}</text>
<text class="delBtn" v-if="form.monitor" @click.stop="delMemeber('monitor')">删除</text>
<text class="addText" v-else >添加人员</text>
</view>
</view>
</view>
</uni-forms-item>
<uni-forms-item label="" name="dmonitor" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>副班长</text>
</view>
<view class="addBtnBox">
<view class="item" v-if="memeberRefsh">
<view class="box" @click="showMemberAdd('dmonitor')">
<span v-show="!form.dmonitor"><uni-icons class="addIcon" color="#999" type="plusempty"
size="20"></uni-icons></span>
<text style="width: 100%; display: inline-block;"
v-if="form.dmonitor">
<!-- {{item && item.nickname != '' && item.nickname != null ? item.nickname : '匿名用户'}} -->
{{form.dmonitor.tel}}</text>
<text class="delBtn" v-if="form.dmonitor" @click.stop="delMemeber('dmonitor')">删除</text>
<text class="addText" v-else >添加人员</text>
</view>
</view>
</view>
</uni-forms-item>
<uni-forms-item label="" name="learner" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>学习委员</text>
</view>
<view class="addBtnBox">
<view class="item" v-if="memeberRefsh">
<view class="box" @click="showMemberAdd('learner')">
<span v-show="!form.learner"><uni-icons class="addIcon" color="#999" type="plusempty"
size="20"></uni-icons></span>
<text style="width: 100%; display: inline-block;"
v-if="form.learner">
<!-- {{item && item.nickname != '' && item.nickname != null ? item.nickname : '匿名用户'}} -->
{{form.learner.tel}}</text>
<text class="delBtn" v-if="form.learner" @click.stop="delMemeber('learner')">删除</text>
<text class="addText" v-else >添加人员</text>
</view>
</view>
</view>
</uni-forms-item>
<uni-forms-item label="" name="scorer" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>评分员</text>
</view>
<view class="addBtnBox">
<!-- {{setDefaultAddItem}} -->
<view class="item" v-if="memeberRefsh">
<view class="box" v-for="(item, index) in form.scorer" @click="showMemberAdd('scorer',index)">
<span v-show="!item || item == null || item == 'null'"><uni-icons class="addIcon" color="#999" type="plusempty"
size="20"></uni-icons></span>
<text style="width: 100%; display: inline-block;"
v-if="item">
<!-- {{item && item.nickname != '' && item.nickname != null ? item.nickname : '匿名用户'}} -->
{{item.tel}}</text>
<text class="delBtn" v-if="item" @click.stop="delMemeber('scorer',index)">删除</text>
<text class="addText" v-else >添加人员</text>
</view>
</view>
</view>
</uni-forms-item>
<uni-forms-item label="" name="counter" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>记分员</text>
</view>
<view class="addBtnBox">
<view class="item" v-if="memeberRefsh">
<view class="box" v-for="(item, index) in form.counter" @click="showMemberAdd('counter',index)">
<span v-show="!item"><uni-icons class="addIcon" color="#999" type="plusempty"
size="20"></uni-icons></span>
<text style="width: 100%; display: inline-block;"
v-if="item">
<!-- {{item && item.nickname != '' && item.nickname != null ? item.nickname : '匿名用户'}} -->
{{item.tel}}</text>
<text class="delBtn" v-if="item" @click.stop="delMemeber('counter',index)">删除</text>
<text class="addText" v-else >添加人员</text>
</view>
</view>
</view>
</uni-forms-item>
</view>
</uni-forms>
<view class="btn_box"><button @click="onSubmit"> </button></view>
<u-popup v-if="MemberAdd" key="1" :show="MemberAdd" :round="10" @close="closePup">
<view style="padding: 40rpx;" class="flex_box box6">
<view class="" style="width: 100%; text-align: center;">
<text class="tips">请选择在下放输入栏中输入电话号码</text>
<u-search placeholder="请输入电话号码" @focus="focus" @clear="clear" v-model="searchValue" @input="input"
@blur="blur" @search="search"></u-search>
<view class="searchList" v-show="showSearchList">
<view class="itemBox" v-if="searchList.length > 0">
<view class="item" v-for="(item, index) in searchList" :key="index"
@click="setMember(item)">
{{item.tel}}
</view>
</view>
<view v-else class="">
<u-divider text="未找到此用户"></u-divider>
</view>
</view>
</view>
</view>
</u-popup>
<!-- <z-navigation></z-navigation> -->
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import permission from "@/js_sdk/wa-permission/permission.js"
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
memeberRefsh:true,
fileList1: [],
searchValue: '',
searchList: [],
showSearchList: false,
playData: {},
nowSeting: {
name: '',
index: 0
},
MemberAdd: false,
modeType: undefined, // 模型type
//手机号账号
form: {
"classId": 1,
"monitor": undefined, //班长
"dmonitor": undefined, //2班长
"learner": undefined, //学习委员
"scorer": [undefined,undefined], //评分员
"counter": [undefined,undefined] //记分员
},
telError: false,
// relationError: false,
// relationErrorPattern: false,
rules: {
monitor: {
rules: [{
required: true,
errorMessage: '请设置班长人员',
}
]
},
dmonitor: {
rules: [{
required: true,
errorMessage: '请设置副班长人员',
}
]
},
learner: {
rules: [{
required: true,
errorMessage: '请设置学习委员人员',
}
]
},
},
pageType: '',
modelLIst: [
// { value: 0, text: "请选择" },
],
};
},
//第一次加载
onLoad(e) {
console.log('收到的值', e);
// this.getUserModel()
if (e.id) {
this.form.classId = e.id
this.getClassInfo()
} else {
this.form.id = undefined
}
},
//页面显示
onShow() {
},
computed: {
...mapState(['userInfo'])
},
//方法
methods: {
selectChange(e) {
},
closePup() {
this.MemberAdd = false
setTimeout(() => {
this.clearSearchData()
}, 200)
},
// 显示人员添加面板
showMemberAdd(dataName, index) {
this.nowSeting = {
name: dataName,
index
}
console.log('赋值', this.nowSeting);
this.MemberAdd = true
},
// 获取班级详情
getClassInfo() {
// console.log('获取课程详情');
uni.showLoading({
title: '正在加载'
})
$http.request({
url: "common/class/getClassInfo",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"classId": this.form.classId
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
this.refresh = false
if (res.code == 0) {
if (res.result.admins.length > 0) {
var scorerIndex = 0
var counterIndex = 0
res.result.admins.forEach(item => {
if (item.role == '1') {
this.form.monitor = item.user
}
if (item.role == '2') {
this.form.dmonitor = item.user
}
if (item.role == '3') {
this.form.learner = item.user
}
if (item.role == '4') {
this.form.scorer[scorerIndex] = item.user
scorerIndex += 1
}
if (item.role == '5') {
this.form.counter[counterIndex] = item.user
counterIndex += 1
}
})
}
console.log('this.form.scorer',this.form.scorer.length);
}
console.log('this.form', this.form);
uni.hideLoading()
}).catch(e => {
uni.hideLoading()
console.log(e, '数据报错')
// this.status = 3
uni.showToast({
title: `获取数据失败`,
icon: 'error'
})
});
},
getSearch() {
$http.request({
url: "book/user/getUserList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
// loadAnimate: 'none', // 请求加载动画
page: 1,
limit: 5,
key: this.searchValue
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log(res, '搜索结果')
if (res.code == 0 && res.user.records.length > 0) {
this.searchList = res.user.records
}
}).catch(e => {
// this.titleList = []
this.searchList = []
console.log(e)
})
},
focus(e) {
// uni.showToast({
// title: 'focus事件输出值为' + e.value,
// icon: 'none'
// })
// 等于1 就是有权限
this.showSearchList = true
},
blur(res) {
if (res == '') {
this.showSearchList = false
this.searchList = []
} else {
this.getSearch()
}
},
clear(res) {
// uni.showToast({
// title: 'clear事件清除值为',
// icon: 'none'
// })
this.searchValue = ''
this.showSearchList = false
},
input(res) {
console.log('----input:', res)
if (res == '') {
this.searchList = []
} else {
this.getSearch()
}
},
delMemeber(dataName,index){
console.log(dataName,index);
this.memeberRefsh = false
switch (dataName) {
case 'counter':
this.form.counter[index] = undefined
break;
case 'scorer':
this.form.scorer[index] = undefined
break;
case 'learner':
this.form.learner = undefined
break;
case 'dmonitor':
this.form.dmonitor = undefined
break;
case 'monitor':
this.form.monitor = undefined
break;
}
this.memeberRefsh = true
},
setMember(item) {
console.log('选中了值', item);
if (this.nowSeting.name != '') {
switch (this.nowSeting.name) {
case 'counter':
this.form.counter[this.nowSeting.index] = item
break;
case 'scorer':
this.form.scorer[this.nowSeting.index] = item
break;
case 'learner':
this.form.learner = item
break;
case 'dmonitor':
this.form.dmonitor = item
break;
case 'monitor':
this.form.monitor = item
break;
}
}
this.MemberAdd = false
setTimeout(() => {
this.clearSearchData()
}, 200)
},
clearSearchData() {
console.log('走重置数据');
this.showSearchList = false
this.nowSeting = {
name: '',
index: 0
}
this.searchValue = ''
this.searchList = []
},
search(res) {
console.log(res, 'res')
// uni.showToast({
// title: '搜索:' + res,
// icon: 'none'
// })
},
relationInput(e) {
// this.relationError = false
// this.relationErrorPattern = false
},
telInput(e) {
// console.log('键盘输入',e);
this.telError = false
},
async checkPermision() {
var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
if (result != 1) {
return false
}
},
addPic(e) {
console.log("添加图片");
let that = this;
// for (var i = 0; i < e.file.length; i++) {
// console.log(i,e.file[i].url)
// uni.uploadFile({
// url: this.$baseUrl + "oss/fileoss", //仅为示例,非真实的接口地址
// filePath: tempFilePaths[0],
// name: 'file',
// formData: {
// 'user': 'test'
// },
// success: (uploadFileRes) => {
// console.log(uploadFileRes.data);
// }
// });
// return
uni.uploadFile({
url: this.$baseUrl + "oss/fileoss",
filePath: e.file.url,
//files:e.file,
name: "file",
formData: {},
success: (res) => {
// console.log("that.uploadPicLIst", res);
that.fileList1.push({
url: JSON.parse(res.data).url,
});
// console.log(that.fileList1, "that.uploadPicLIst");
},
fail: (error) => {
console.log("上传失败", error);
},
});
// }
},
deletePic(event) {
this.fileList1.splice(event.index, 1)
},
onSubmit() {
this.$refs.form.validate().then(res => {
var newScorer = [...this.form.scorer]
var newCounter = [...this.form.counter]
console.log('this.form.scorer',this.form.scorer);
if(!this.form.scorer[0] && !this.form.scorer[1]){
uni.showToast({
title:'请至少设置一名评分员',
icon:'none'
})
return
}else{
if(this.form.scorer[0].id == this.form.scorer[1].id){
uni.showToast({
title:'两名评分员不能是同一人',
icon:'none'
})
return
}
this.form.scorer.forEach((item, index) => {
if(!item){
newScorer.splice(index, 1)
}
})
newScorer = newScorer.map(item => {
return item.id
})
console.log('删除后的newScorer',newScorer);
}
if(!this.form.counter[0] && !this.form.counter[1]){
uni.showToast({
title:'请至少设置一名记分员',
icon:'none'
})
return
}else{
if(this.form.counter[0].id == this.form.counter[1].id){
uni.showToast({
title:'两名记分员不能是同一人',
icon:'none'
})
return
}
this.form.counter.forEach((item, index) => {
if(!item){
newCounter.splice(index, 1)
}
})
newCounter = newCounter.map(item => {
return item.id
})
console.log('删除后的newCounter',newCounter);
}
var _url = 'common/class/setUserRole'
// this.form.classId ? _url = 'common/class/editClass' : _url = "common/class/addClass"
$http.request({
url: _url,
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"classId": this.form.classId,
"monitor": this.form.monitor.id+'', //班长
"dmonitor": this.form.dmonitor.id+'', //2班长
"learner": this.form.learner.id+'', //学习委员
"scorer": newScorer.join(','), //评分员
"counter": newCounter.join(',') //记分员
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
uni.showToast({
title: "操作成功",
icon: 'success'
});
setTimeout(() => {
// this.fileList1 = []
// this.$nextTick(() => {
uni.navigateBack({
delta: 1
});
}, 300)
}).catch(e => {
// console.log('表单错误信息:', err);
uni.showToast({
title: '操作失败',
icon: 'error'
})
});
}).catch(err => {
console.log('表单错误信息:', err);
uni.showToast({
title: '页面有未填写的内容哦',
icon: 'none'
})
})
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
::v-deep .uni-forms-item {
margin-bottom: 26rpx !important;
}
/deep/.uni-select__selector {
top: unset;
bottom: calc(100% + 12px);
}
/deep/.uni-select {
border: none;
}
/deep/.uni-select__input-text {
font-size: 14px;
color: #7f7f7f //修改为你的字体颜色
}
/deep/.uni-select__input-placeholder {
font-size: 14px;
color: #7f7f7f //修改为你的字体颜色
}
/deep/.uni-popper__arrow {
top: unset;
bottom: -6px;
transform: rotate(180deg);
}
/deep/.uni-popper__arrow::after {
top: 0
}
.addType {
width: 100%;
margin-top: 40rpx;
margin-bottom: 40rpx;
border: 1px solid #eee;
}
.searchList {
.item {
color: #333333;
font-size: 28rpx;
padding: 20rpx;
border-bottom: 1px solid #eee;
}
}
.box6 {
height: 50vh;
overflow: scroll;
.tips {
color: #999;
font-size: 26rpx;
display: block;
margin-bottom: 20rpx;
}
}
.addBtnBox {
.item {
.box {
color: #999;
margin: 20rpx;
align-items: center;
font-size: 28rpx;
background-color: #eee;
padding: 4rpx 8rpx;
border-radius: 6rpx;
justify-content: start;
width: 100%;
padding: 10rpx 8rpx;
.delBtn {
color: #e60000 !important;
display: inline-block;
border-radius: 6rpx; margin-left: 20rpx;
}
text {
width: auto !important;
}
.span {
display: inline-block;
width: 40rpx;
.addIcon {
border: 1px solid #999;
}
}
}
}
}
.input_tit {
font-weight: bold;
}
.page {
background-color: #ffffff;
padding: 0 65rpx;
min-height: 100vh;
.title {
padding: 30rpx 0 40rpx 0;
font-size: 40rpx;
color: #333333;
}
.input_box {
display: block;
// justify-content: space-between;
// overflow: hidden;
// height: 100rpx;
padding-top: 10rpx;
// border-bottom: 1rpx solid #eeeeee;
align-items: center;
i {
font-size: 24rpx;
color: red;
padding-right: 10rpx;
}
.in {
border: 1rpx solid #eeeeee;
border-radius: 8rpx;
padding: 8rpx;
margin-top: 10rpx;
}
text {
font-size: 30rpx;
width: 180rpx;
}
input {
flex: 1;
height: 50rpx;
// line-height: 70rpx;
font-size: 30rpx;
}
button {
height: 78rpx;
line-height: 78rpx;
font-size: 30rpx;
color: $themeColor;
&:active {
background-color: transparent;
}
}
}
.btn_box {
margin-top: 70rpx;
padding-bottom: 20rpx;
button {
font-size: 32rpx;
@include theme('btn_bg') color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
}
}
.protocol {
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 20rpx;
text {
color: $themeColor;
}
}
}
</style>