This commit is contained in:
@fawn-nine
2024-08-02 13:11:47 +08:00
parent 77aa8de252
commit f0cba9303a
2 changed files with 596 additions and 261 deletions

View File

@@ -52,7 +52,7 @@
<uni-forms-item label="" name="content" label-width="0"> <uni-forms-item label="" name="content" label-width="0">
<text class="input_tit"> <text class="input_tit">
<!-- <i>*</i> --> <!-- <i>*</i> -->
班级简介:</text> 班级简介:<span style="font-weight: normal; color: #999; font-size: 26rpx;">(600字以内)</span></text>
<view class="in"> <view class="in">
<view class="uni-textarea"> <view class="uni-textarea">
<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600" <textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
@@ -61,20 +61,9 @@
</view> </view>
</uni-forms-item> </uni-forms-item>
</view> </view>
<!-- <view class="input_box">
<uni-forms-item label="" name="contactInformation" label-width="0">
<text class="input_tit"><i>*</i>联系电话:</text>
<view class="in">
<input type="number" placeholder-style="font-size:26rpx" @input="telInput"
v-model="form.contactInformation" placeholder="请输入与您联系的手机号" />
</view>
<text v-show="telError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">手机号格式错误</text>
</uni-forms-item>
</view> -->
</uni-forms> </uni-forms>
<view class="btn_box"><button @click="onSubmit"> </button></view> <view class="btn_box"><button @click="onSubmit"> </button></view>
<z-navigation></z-navigation> <!-- <z-navigation></z-navigation> -->
</view> </view>
</template> </template>
<script> <script>

View File

@@ -1,81 +1,132 @@
<template> <template>
<view class="page"> <view class="page">
成员设置
<z-nav-bar :title="`${pageType}班级`"></z-nav-bar> <z-nav-bar title="班级成员设置"></z-nav-bar>
<!-- 公共组件-每个页面必须引入 --> <!-- 公共组件-每个页面必须引入 -->
<public-module></public-module> <public-module></public-module>
<uni-forms :modelValue="form" :rules="rules" ref="form"> <uni-forms :modelValue="form" :rules="rules" ref="form">
<view class="input_box " style=""> <view class="input_box " style="">
<uni-forms-item label="" name="modelId" label-width="0"> <uni-forms-item label="" name="monitor" label-width="0">
<view class=""> <view class="">
<text class="input_tit"><i>*</i>级模型</text> <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>
<view class="in" style="flex: 1; border: none;">
<!-- {{modelLIst}} -->
<uni-data-select style="width: 100%;" v-model="form.modelId" placeholder="请选择班级的模型"
:localdata="modelLIst"></uni-data-select>
</view> </view>
</uni-forms-item> </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>
<view class="input_box">
<uni-forms-item label="" name="title" label-width="0">
<text class="input_tit"><i>*</i>班级名称:</text>
<view class="in">
<input placeholder-style="font-size:26rpx" type="text" v-model="form.title"
placeholder="请输入班级名称" />
</view> </view>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="" name="learner" label-width="0">
<view class="">
<text class="input_tit"><i>*</i>学习委员</text>
</view> </view>
<view class="input_box"> <view class="addBtnBox">
<text class="input_tit">班级封面:</text> <view class="item" v-if="memeberRefsh">
<view class="in" style="border: none;" @click="checkPermision"> <view class="box" @click="showMemberAdd('learner')">
<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" :maxCount="1" width="100" <span v-show="!form.learner"><uni-icons class="addIcon" color="#999" type="plusempty"
height="100" :previewFullImage="true"> size="20"></uni-icons></span>
</u-upload> <text style="width: 100%; display: inline-block;"
<!-- <text style="font-size: 24rpx; color: #999;">可上传4张问题截图</text> --> 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>
<!-- <input type="password" maxlength="8" v-model="confirmPassword" placeholder="请确认密码" /> -->
</view> </view>
<view class="input_box">
<uni-forms-item label="" name="number" label-width="0">
<text class="input_tit"><i>*</i>目标人数:</text>
<view class="in">
<input type="number" @input="relationInput" placeholder-style="font-size:26rpx"
v-model="form.number" placeholder="请输入学员目标人数" />
</view> </view>
<!-- <text v-show="relationError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">请填写订单编号</text> -->
<!-- <text v-show="relationErrorPattern"
style="font-size: 24rpx; color: red; margin-top: 10rpx;">订单编号格式错误</text> -->
</uni-forms-item> </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"><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 class="input_box">
<uni-forms-item label="" name="content" label-width="0">
<text class="input_tit">
<!-- <i>*</i> -->
班级简介:</text>
<view class="in">
<view class="uni-textarea">
<textarea placeholder-style="font-size:26rpx" v-model="form.content" maxlength="600"
placeholder="请输入您的班级简介600字以内" />
</view> </view>
</view> </view>
</uni-forms-item> </uni-forms-item>
</view> </view>
<!-- <view class="input_box">
<uni-forms-item label="" name="contactInformation" label-width="0">
<text class="input_tit"><i>*</i>联系电话:</text>
<view class="in">
<input type="number" placeholder-style="font-size:26rpx" @input="telInput"
v-model="form.contactInformation" placeholder="请输入与您联系的手机号" />
</view>
<text v-show="telError" style="font-size: 24rpx; color: red; margin-top: 10rpx;">手机号格式错误</text>
</uni-forms-item>
</view> -->
</uni-forms> </uni-forms>
<view class="btn_box"><button @click="onSubmit"> </button></view> <view class="btn_box"><button @click="onSubmit"> </button></view>
<z-navigation></z-navigation> <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> </view>
</template> </template>
<script> <script>
@@ -88,34 +139,51 @@
export default { export default {
data() { data() {
return { return {
memeberRefsh:true,
fileList1: [], fileList1: [],
searchValue: '',
searchList: [],
showSearchList: false,
playData: {}, playData: {},
nowSeting: {
name: '',
index: 0
},
MemberAdd: false,
modeType: undefined, // 模型type modeType: undefined, // 模型type
//手机号账号 //手机号账号
form: { form: {
id:undefined, // 班级id "classId": 1,
modelId:undefined, "monitor": undefined, //班长
title: '', // 账号 "dmonitor": undefined, //2班长
content: '', // 描述 "learner": undefined, //学习委员
icon: '', //封面 "scorer": [], //评分员
number: '', // 联系电话 "counter": [] //记分员
}, },
telError: false, telError: false,
// relationError: false, // relationError: false,
// relationErrorPattern: false, // relationErrorPattern: false,
rules: { rules: {
title: { monitor: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '请输入班级名称', errorMessage: '请设置班长人员',
} }
] ]
}, },
number: { dmonitor: {
rules: [{ rules: [{
required: true, required: true,
errorMessage: '请输入学员目标人数', errorMessage: '请设置副班长人员',
}
]
},
learner: {
rules: [{
required: true,
errorMessage: '请设置学习委员人员',
} }
] ]
@@ -130,18 +198,12 @@
//第一次加载 //第一次加载
onLoad(e) { onLoad(e) {
console.log('收到的值', e); console.log('收到的值', e);
// this.pageType = e.type // this.getUserModel()
this.form.type = e.type
this.modeType = e.type
this.getUserModel()
if (e.id) { if (e.id) {
this.form.classId = e.id
this.pageType = '编辑'
this.form.id = e.id
this.getClassInfo() this.getClassInfo()
} else { } else {
this.pageType = '添加'
this.form.id = undefined this.form.id = undefined
} }
}, },
@@ -150,17 +212,29 @@
}, },
computed: { computed: {
...mapState(['userInfo']), ...mapState(['userInfo'])
// getPageTitle(){
// if(this.form.id){
// return "修改班级"
// }else{
// return "添加班级"
// }
// }
}, },
//方法 //方法
methods: { 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() { getClassInfo() {
// console.log('获取课程详情'); // console.log('获取课程详情');
@@ -171,7 +245,7 @@
url: "common/class/getClassInfo", url: "common/class/getClassInfo",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: { data: {
"classId": this.form.id // 班类型 0小班 1联合班 2精英班 "classId": this.form.classId
}, },
header: { //默认 无 说明:请求头 header: { //默认 无 说明:请求头
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -180,8 +254,44 @@
.then(res => { .then(res => {
this.refresh = false this.refresh = false
if (res.code == 0) { if (res.code == 0) {
this.form = res.result.class if (res.result.admins.length > 0) {
this.form.modelId = res.result.classModel.id 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') {
// console.log('this.admins.counter',this.admins.counter);
this.form.scorer.push(item.user)
}
if (item.role == '5') {
// console.log('this.admins.counter',this.admins.counter);
this.form.counter.push(item.user)
}
})
}
if(this.form.scorer.length == 1){
this.form.scorer[1] = undefined
}else if(this.form.scorer.length == 0){
this.form.scorer[0] = undefined
this.form.scorer[1] = undefined
}
if(this.form.counter.length == 1){
this.form.counter[1] = undefined
}else if(this.form.counter.length == 0){
this.form.counter[0] = undefined
this.form.counter[1] = undefined
}
// this.form = res.result.class
// this.form.modelId = res.result.classModel.id
} }
console.log('this.form', this.form); console.log('this.form', this.form);
uni.hideLoading() uni.hideLoading()
@@ -195,36 +305,132 @@
}) })
}); });
}, },
getUserModel() { getSearch() {
console.log('获取用户的可添加模型列表');
$http.request({ $http.request({
url: "common/class/getClassModelByUserid", url: "book/user/getUserList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: { data: {
"userId": this.userInfo.id, // loadAnimate: 'none', // 请求加载动画
'type': this.modeType page: 1,
limit: 5,
key: this.searchValue
}, },
header: { //默认 无 说明:请求头 header: { //默认 无 说明:请求头
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
}) }).then(res => {
.then(res => { console.log(res, '搜索结果')
if(res && res.code == 0){ if (res.code == 0 && res.user.records.length > 0) {
res.classModelList.forEach(item => { this.searchList = res.user.records
item.value = item.id
item.text = item.title
})
console.log('处理后的', res.classModelList);
this.modelLIst = res.classModelList
} }
}).catch(e => { }).catch(e => {
// console.log('表单错误信息:', err); // this.titleList = []
uni.showToast({ this.searchList = []
title: '数据获取失败', console.log(e)
icon: 'error'
})
}) })
}, },
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) { relationInput(e) {
// this.relationError = false // this.relationError = false
// this.relationErrorPattern = false // this.relationErrorPattern = false
@@ -281,26 +487,71 @@
}, },
onSubmit() { onSubmit() {
this.$refs.form.validate().then(res => { this.$refs.form.validate().then(res => {
if (this.fileList1.length > 0) { var newScorer = [...this.form.scorer]
let _list = this.fileList1 var newCounter = [...this.form.counter]
_list = _list.map(item => item.url) console.log('this.form.scorer',this.form.scorer);
// console.log('this.fileList1',_list); if(!this.form.scorer[0] && !this.form.scorer[1]){
this.form.icon = _list.join(',') uni.showToast({
title:'请至少设置一名评分员',
icon:'none'
})
return
}else{
if(this.form.scorer[0].id == this.form.scorer[1].id){
uni.showToast({
title:'两名评分员不能是同一人',
icon:'none'
})
return
} }
var _url = '' this.form.scorer.forEach((item, index) => {
this.form.id ? _url = 'common/class/editClass' : _url = "common/class/addClass" 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({ $http.request({
url: _url, url: _url,
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: { data: {
// ...this.form "classId": this.form.classId,
'id':this.form.id, "monitor": this.form.monitor.id+'', //班长
"modelId": this.form.id ? undefined : this.form.modelId, "dmonitor": this.form.dmonitor.id+'', //2班长
"title": this.form.title, "learner": this.form.learner.id+'', //学习委员
"icon": this.form.icon, "scorer": newScorer.join(','), //评分员
"state": this.form.id ? this.form.state : undefined, "counter": newCounter.join(',') //记分员
"content": this.form.content,
"number": Number(this.form.number)
}, },
header: { //默认 无 说明:请求头 header: { //默认 无 说明:请求头
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -309,9 +560,10 @@
.then(res => { .then(res => {
uni.showToast({ uni.showToast({
title: "操作成功", title: "操作成功",
icon:'success'}); icon: 'success'
});
setTimeout(() => { setTimeout(() => {
this.fileList1 = [] // this.fileList1 = []
// this.$nextTick(() => { // this.$nextTick(() => {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
@@ -354,6 +606,100 @@
margin-bottom: 26rpx !important; 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 { .input_tit {
font-weight: bold; font-weight: bold;
} }