|
@@ -0,0 +1,261 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <!-- 背景图片区域 -->
|
|
|
|
|
+ <img class="img_bg" src="../../static/images/center-bg.png" />
|
|
|
|
|
+
|
|
|
|
|
+ <!-- input组件区域 -->
|
|
|
|
|
+ <HeaderInput placeholder="请输入学生姓名或时间组名称" @changeInputValue="changeInputValue" />
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 学校年级班级区域 -->
|
|
|
|
|
+ <view class="school" v-if="list.length">
|
|
|
|
|
+ <view class="">{{ classInfo }}</view>
|
|
|
|
|
+ <!-- 编辑按钮区域 -->
|
|
|
|
|
+ <view v-if="!showEdit" class="school_edit" @click="handleEdit">
|
|
|
|
|
+ <img class="img" src="@/static/images/edit.png" />
|
|
|
|
|
+ 编辑
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 全选按钮区域 -->
|
|
|
|
|
+ <view v-else class="school_btn">
|
|
|
|
|
+ <view class="cancel" @click="handleCancel">取消</view>
|
|
|
|
|
+
|
|
|
|
|
+ <radio color="#0061FF" style="transform: scale(0.7)" :checked="allChecked" @click="handleAllCheck" />
|
|
|
|
|
+ <view class="all">全选</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 学生列表区域 -->
|
|
|
|
|
+ <view class="list_box" v-if="list.length">
|
|
|
|
|
+ <!-- 每一个学生区域 -->
|
|
|
|
|
+ <view class="item_box" v-for="(item, index) in list" :key="index" @click="handleClickItem(item)">
|
|
|
|
|
+ <view class="box_name">{{ item.name }}({{ item.cardNo }})</view>
|
|
|
|
|
+ <view class="box_time">{{ item.timeGroup }}</view>
|
|
|
|
|
+
|
|
|
|
|
+ <radio v-if="showEdit" color="#0061FF" style="transform: scale(0.7)" :checked="item.isChecked" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 关联时间组按钮区域 -->
|
|
|
|
|
+ <view v-if="showEdit" class="btn_box" @click="handleBind">
|
|
|
|
|
+ <uni-icons color="#fff" type="link" size="28"></uni-icons>
|
|
|
|
|
+ <text class="text">关联时间组</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 没有数据时展示的页面 -->
|
|
|
|
|
+ <NoData v-if="!list.length" style="margin-top: 140rpx" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref } from 'vue'
|
|
|
|
|
+import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
|
+import HeaderInput from '@/components/headerInput.vue'
|
|
|
|
|
+import NoData from '@/components/noData.vue'
|
|
|
|
|
+import { myRequest } from '@/utils/api.js'
|
|
|
|
|
+import { decryptDes } from '@/utils/des.js'
|
|
|
|
|
+
|
|
|
|
|
+// 当前所处班级
|
|
|
|
|
+const classInfo = ref()
|
|
|
|
|
+
|
|
|
|
|
+// 搜索框绑定数据
|
|
|
|
|
+const keyWord = ref('')
|
|
|
|
|
+
|
|
|
|
|
+// 学生列表数据
|
|
|
|
|
+const list = ref([])
|
|
|
|
|
+
|
|
|
|
|
+// 缓存数据
|
|
|
|
|
+const copyList = ref([])
|
|
|
|
|
+
|
|
|
|
|
+// 是否显示编辑radio
|
|
|
|
|
+const showEdit = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+// 是否全选
|
|
|
|
|
+const allChecked = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+onLoad(() => {
|
|
|
|
|
+ getData()
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+// 获取学生列表数据
|
|
|
|
|
+const getData = async () => {
|
|
|
|
|
+ const res = await myRequest({
|
|
|
|
|
+ url: '/wanzai/api/smartUser/queryClassUser',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ userId: uni.getStorageSync('userInfo').id,
|
|
|
|
|
+ keyWord: keyWord.value
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ // console.log(res)
|
|
|
|
|
+ const result = JSON.parse(decryptDes(res.data))
|
|
|
|
|
+ // console.log(result)
|
|
|
|
|
+ list.value = result.userDetails
|
|
|
|
|
+ list.value.forEach((ele) => {
|
|
|
|
|
+ ele.isChecked = false
|
|
|
|
|
+ })
|
|
|
|
|
+ classInfo.value = result.name
|
|
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
|
|
+ title: result.name
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击编辑按钮回调
|
|
|
|
|
+const handleEdit = () => {
|
|
|
|
|
+ showEdit.value = true
|
|
|
|
|
+ copyList.value = JSON.parse(JSON.stringify(list.value))
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击取消按钮回调
|
|
|
|
|
+const handleCancel = () => {
|
|
|
|
|
+ showEdit.value = false
|
|
|
|
|
+ allChecked.value = false
|
|
|
|
|
+ list.value = copyList.value
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击全选按钮回调
|
|
|
|
|
+const handleAllCheck = () => {
|
|
|
|
|
+ if (!allChecked.value) {
|
|
|
|
|
+ list.value.forEach((ele) => {
|
|
|
|
|
+ ele.isChecked = true
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ list.value.forEach((ele) => {
|
|
|
|
|
+ ele.isChecked = false
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ allChecked.value = !allChecked.value
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击每一个学生时的回调
|
|
|
|
|
+const handleClickItem = (item) => {
|
|
|
|
|
+ if (showEdit.value) {
|
|
|
|
|
+ item.isChecked = !item.isChecked
|
|
|
|
|
+
|
|
|
|
|
+ // 判断全选按钮的状态
|
|
|
|
|
+ allChecked.value = list.value.every((ele) => ele.isChecked)
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 点击关联时间组按钮回调
|
|
|
|
|
+const handleBind = () => {
|
|
|
|
|
+ // 判断是否选择了学生
|
|
|
|
|
+ const flag = list.value.find((ele) => ele.isChecked)
|
|
|
|
|
+
|
|
|
|
|
+ if (!flag) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请至少选择一名学生',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ mask: true
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ let arr = []
|
|
|
|
|
+ list.value.forEach((ele) => {
|
|
|
|
|
+ if (ele.isChecked) {
|
|
|
|
|
+ arr.push(ele.id)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/pages/timeGroup/timeGroup?ids=${JSON.stringify(arr)}`
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 输入框组件自定义事件
|
|
|
|
|
+const changeInputValue = (value) => {
|
|
|
|
|
+ keyWord.value = value
|
|
|
|
|
+ getData()
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background-color: #f1f6fe;
|
|
|
|
|
+
|
|
|
|
|
+ // 背景图片区域样式
|
|
|
|
|
+ .img_bg {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -70rpx;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ width: 589rpx;
|
|
|
|
|
+ height: 320rpx;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 学校名称区域样式
|
|
|
|
|
+ .school {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 38rpx;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .school_edit {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-right: 30rpx;
|
|
|
|
|
+ color: #0061ff;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .school_btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .cancel {
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ color: #d43030;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .all {
|
|
|
|
|
+ margin-left: -10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list_box {
|
|
|
|
|
+ padding: 0 30rpx 30rpx;
|
|
|
|
|
+ margin-top: 22rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .item_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 103rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
|
+
|
|
|
|
|
+ .box_name {
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_time {
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 28rpx;
|
|
|
|
|
+ width: 650rpx;
|
|
|
|
|
+ height: 100rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ background-color: #0061ff;
|
|
|
|
|
+
|
|
|
|
|
+ .text {
|
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|