From c5b5706cd645440a877c546978751b63bf40d008 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期五, 20 九月 2024 10:13:11 +0800
Subject: [PATCH] ll
---
h5/pages/staff/meetingSel.vue | 751 ++++++++++++++++++++++++++++-----------------------------
1 files changed, 373 insertions(+), 378 deletions(-)
diff --git a/h5/pages/staff/meetingSel.vue b/h5/pages/staff/meetingSel.vue
index ba35cde..9fb133c 100644
--- a/h5/pages/staff/meetingSel.vue
+++ b/h5/pages/staff/meetingSel.vue
@@ -1,378 +1,373 @@
-<template>
- <view class="main_app" :class="{ popupShow: isShowSelMem }">
- <view class="search_inp df_ac">
- <image
- class="mr12 search"
- src="../../static/ic_search@2x.png"
- mode="widthFix"
- ></image>
- <input
- v-model="param.keyword"
- @blur="initData()"
- type="text"
- placeholder="鎼滅储"
- placeholder-style="color: #999999;"
- />
- </view>
- <view class="member_list">
- <view v-for="(item, index) in memberList" :key="item.id" class="line">
- <image
- v-if="item.avatar"
- :src="item.prefixUrl + item.avatar"
- class="avatar"
- mode=""
- ></image>
- <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
- <view class="content">
- <view class="info">
- <text class="name">{{ item.realname }}</text>
- <text class="tag" v-if="item.status == '1'">鏈変細璁�</text>
- </view>
- <view class="depart">{{ item.departmentName }}</view>
- </view>
- <image
- @click="changeMem(item, index)"
- v-if="item.checked"
- src="@/static/checkbox_sel@2x.png"
- mode="widthFix"
- class="checked"
- ></image>
- <image
- @click="changeMem(item, index)"
- v-if="!item.checked"
- src="@/static/meeting/icon/ic_choose@2x.png"
- mode="widthFix"
- class="checked"
- ></image>
- <text></text>
- </view>
- <view class="empty"></view>
- </view>
- <!-- -->
- <view class="sub_wrap">
- <view class="sel_mem">
- <text>宸查�夋嫨锛�</text>
- <view class="members">
- <text v-for="(item, i) in selList" :key="i"
- >{{ item.realname }}锛�</text
- >
- </view>
- <image
- @click="isShowSelMem = true"
- class="open_icon"
- src="../../static/staff/renyuan_ic_open.png"
- mode=""
- ></image>
- </view>
- <view class="btn" @click="onSubmit"
- >纭({{ selList.length }}/{{ param.limitNum }})</view
- >
- </view>
- <!-- -->
- <u-popup
- catchtouchmove
- :show="isShowSelMem"
- :round="12"
- mode="bottom"
- @close="closeModal"
- >
- <view class="modal">
- <view class="modal_header">
- <text class="status">宸查�夋嫨锛歿{ selList.length }}浜�</text>
- <text class="btn" @click="subSelMem">纭</text>
- </view>
- <view class="modal_mem_list">
- <view class="line" v-for="(item, i) in selList" :key="i">
- <image
- v-if="item.avatar"
- :src="item.prefixUrl + item.avatar"
- class="avatar"
- mode=""
- ></image>
- <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
- <view class="content">
- <view class="info">
- <text class="name">{{ item.realname }}</text>
- </view>
- <view class="depart">{{ item.departmentName }}</view>
- </view>
- <view class="btn" @click="handleRemove(i)">绉婚櫎</view>
- </view>
- </view>
- </view>
- </u-popup>
- </view>
-</template>
-
-<script>
-import { userPagePost } from '@/api'
-import dayjs from 'dayjs'
-export default {
- data() {
- return {
- memberList: [],
- selList: [],
- param: {
- limitNum: ''
- },
- pagination: {
- page: 1,
- capacity: 20
- },
-
- isShowSelMem: false
- }
- },
- onLoad(option) {
- this.param = {
- limitNum: option.limitNum,
- keyword: '',
- startTime: dayjs(Number(option.startTime)).format('YYYY-MM-DD HH:mm:ss'),
- endTime: dayjs(Number(option.endTime)).format('YYYY-MM-DD HH:mm:ss'),
- }
- this.initData()
- },
- mounted() {
- this.$eventBus.$on('meetingPeoDetail', (res) => {
- setTimeout(() => {
- res.forEach(item => {
- this.memberList.forEach(mem => {
- if (item.id == mem.id) {
- mem.checked = true
- }
- })
- })
- this.selList = this.memberList.filter(i => i.checked)
- this.$nextTick(() => {
- this.$forceUpdate()
- })
- }, 1000)
- })
- },
- methods: {
- onSubmit() {
- this.$eventBus.$emit('meetingPeo', this.selList)
- uni.navigateBack()
- },
- changeMem(item, index) {
- const { selList, param } = this
- if (this.selList.length == param.limitNum && !item.checked) return uni.showToast({
- title: `璇ヤ細璁彲瀹圭撼${param.limitNum}浜篳,
- icon: 'none'
- })
- item.checked = !item.checked
- this.selList = this.memberList.filter(i => i.checked)
- // const arr = e.detail.value
- // let arrTemp = arr.map(item => {
- // let obj = {}
- // this.memberList.forEach(ite => {
- // if (item == ite.id) {
- // obj.name = ite.name.split('-')[0]
- // obj.componey = ite.name.split('-')[1] || ''
- // obj.id = ite.id
- // }
- // })
- // return obj
- // })
- // this.selList = arrTemp
- this.$forceUpdate()
- },
- initData() {
- const { param, pagination } = this
- userPagePost({
- model: { ...param },
- ...pagination,
-
- }).then(res => {
- this.memberList = res.data.records || []
- this.memberList.map(i => {
- i.checked = false
- })
- })
- },
- closeModal() {
- this.selList = this.memberList.filter(i => i.checked)
- this.isShowSelMem = false
- },
- subSelMem() {
- const { selList, memberList } = this
- memberList.forEach(ite => {
- ite.checked = false
- selList.forEach(item => {
- if (ite.id === item.id) {
- ite.checked = true
- } else { }
- })
- })
- this.isShowSelMem = false
- this.$forceUpdate()
- },
- handleRemove(i) {
- this.selList.splice(i, 1)
-
- // console.log(this.memberList);
- this.$forceUpdate()
- },
- }
-};
-</script>
-
-<style lang="scss">
-.modal {
- padding: 40rpx 30rpx;
- max-height: 1000rpx;
- .modal_header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-bottom: 20rpx;
- .status {
- font-weight: 600;
- }
- .btn {
- color: $uni-color-primary;
- }
- }
- .modal_mem_list {
- max-height: 860rpx;
- overflow: auto;
- .line {
- display: flex;
- align-items: center;
- border-bottom: 1rpx solid #e5e5e5;
- padding: 30rpx 0;
- .avatar {
- width: 64rpx;
- height: 64rpx;
- border-radius: 50%;
- overflow: hidden;
- margin-right: 20rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: $uni-color-primary;
- color: #fff;
- }
- .content {
- flex: 1;
- .depart {
- font-size: 24rpx;
- color: #666666;
- }
- .info {
- display: flex;
- margin-bottom: 16rpx;
- .name {
- font-size: 30rpx;
- }
- }
- }
- .btn {
- width: 80rpx;
- height: 48rpx;
- line-height: 48rpx;
- text-align: center;
- font-size: 24rpx;
- color: #333333;
- border-radius: 4rpx;
- border: 1rpx solid #999999;
- }
- }
- }
-}
-.sub_wrap {
- position: fixed;
- bottom: 0;
- background-color: #fff;
- left: 0;
- width: 100%;
- box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
- padding: 30rpx 30rpx 64rpx;
- .sel_mem {
- display: flex;
- align-items: center;
- .members {
- width: 500rpx;
- color: $uni-color-primary;
- white-space: nowrap;
- overflow: hidden; //鏂囨湰瓒呭嚭闅愯棌
- text-overflow: ellipsis;
- margin-right: 20rpx;
- }
- .open_icon {
- width: 44rpx;
- height: 44rpx;
- }
- }
- .btn {
- width: 690rpx;
- height: 88rpx;
- line-height: 88rpx;
- background: $uni-color-primary;
- border-radius: 44rpx;
- color: #fff;
- text-align: center;
- margin-top: 22rpx;
- }
-}
-.member_list {
- .line {
- display: flex;
- align-items: center;
- border-bottom: 1rpx solid #e5e5e5;
- padding: 30rpx 0;
- .avatar {
- width: 64rpx;
- height: 64rpx;
- border-radius: 50%;
- overflow: hidden;
- margin-right: 20rpx;
- }
- .content {
- flex: 1;
- .depart {
- font-size: 24rpx;
- color: #666666;
- }
- .info {
- display: flex;
- margin-bottom: 16rpx;
- .name {
- font-size: 30rpx;
- }
- .tag {
- font-size: 24rpx;
- border-radius: 4rpx;
- border: 1rpx solid #f62710;
- color: #f62710;
- padding: 0rpx 6rpx;
- margin-left: 8rpx;
- display: flex;
- align-items: center;
- }
- }
- }
- .checked {
- width: 48rpx;
- }
- }
- .empty {
- width: 100%;
- height: 280rpx;
- }
-}
-.search_inp {
- height: 72rpx;
- background: #f7f7f7;
- border-radius: 4rpx;
- padding-left: 16rpx;
- .search {
- width: 28rpx;
- }
- input {
- flex: 1;
- font-size: 28rpx;
- color: #333333;
- }
-}
-</style>
+<template>
+ <view class="main_app" :class="{ popupShow: isShowSelMem }">
+ <view class="search_inp df_ac">
+ <image class="mr12 search" src="../../static/ic_search@2x.png" mode="widthFix"></image>
+ <input v-model="param.keyword" @blur="initData()" type="text" placeholder="鎼滅储"
+ placeholder-style="color: #999999;" />
+ </view>
+ <view class="member_list">
+ <view v-for="(item, index) in memberList" :key="item.id" class="line">
+ <image v-if="item.avatar" :src="item.prefixUrl + item.avatar" class="avatar" mode=""></image>
+ <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
+ <view class="content">
+ <view class="info">
+ <text class="name">{{ item.realname }}</text>
+ <text class="tag" v-if="item.status == '1'">鏈変細璁�</text>
+ </view>
+ <view class="depart">{{ item.departmentName }}</view>
+ </view>
+ <image @click="changeMem(item, index)" v-if="item.checked" src="@/static/checkbox_sel@2x.png" mode="widthFix"
+ class="checked"></image>
+ <image @click="changeMem(item, index)" v-if="!item.checked" src="@/static/meeting/icon/ic_choose@2x.png"
+ mode="widthFix" class="checked"></image>
+ <text></text>
+ </view>
+ <view class="empty"></view>
+ </view>
+ <!-- -->
+ <view class="sub_wrap">
+ <view class="sel_mem">
+ <text>宸查�夋嫨锛�</text>
+ <view class="members">
+ <text v-for="(item, i) in selList" :key="i">{{ item.realname }}锛�</text>
+ </view>
+ <image @click="openSeleter" class="open_icon" src="../../static/staff/renyuan_ic_open.png" mode=""></image>
+ </view>
+ <view class="btn" @click="onSubmit">纭({{ selList.length }}/{{ param.limitNum }})</view>
+ </view>
+ <!-- -->
+ <u-popup catchtouchmove :show="isShowSelMem" :round="12" mode="bottom" @close="closeModal">
+ <view class="modal">
+ <view class="modal_header">
+ <text class="status">宸查�夋嫨锛歿{ selList.filter(i => i.checkedTemp).length }}浜�</text>
+ <text class="btn" @click="subSelMem">纭</text>
+ </view>
+ <view class="modal_mem_list">
+ <template v-for="(item, i) in selList">
+ <view class="line" v-if="item.checkedTemp">
+ <image v-if="item.avatar" :src="item.prefixUrl + item.avatar" class="avatar" mode=""></image>
+ <view v-else class="avatar">{{ item.realname.slice(0, 1) }}</view>
+ <view class="content">
+ <view class="info">
+ <text class="name">{{ item.realname }}</text>
+ </view>
+ <view class="depart">{{ item.departmentName }}</view>
+ </view>
+ <view class="btn" @click="handleRemove(i)">绉婚櫎</view>
+ </view>
+ </template>
+ </view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import {
+ userPagePost
+ } from '@/api'
+ import dayjs from 'dayjs'
+ export default {
+ data() {
+ return {
+ memberList: [],
+ selList: [],
+ param: {
+ limitNum: ''
+ },
+ pagination: {
+ page: 1,
+ capacity: 20
+ },
+
+ isShowSelMem: false
+ }
+ },
+ onLoad(option) {
+ this.param = {
+ limitNum: option.limitNum,
+ keyword: '',
+ startTime: dayjs(Number(option.startTime)).format('YYYY-MM-DD HH:mm:ss'),
+ endTime: dayjs(Number(option.endTime)).format('YYYY-MM-DD HH:mm:ss'),
+ }
+ this.initData()
+ },
+ mounted() {
+ this.$eventBus.$on('meetingPeoDetail', (res) => {
+ setTimeout(() => {
+ res.forEach(item => {
+ this.memberList.forEach(mem => {
+ if (item.id == mem.id) {
+ mem.checked = true
+ }
+ })
+ })
+ this.selList = this.memberList.filter(i => i.checked)
+ this.$nextTick(() => {
+ this.$forceUpdate()
+ })
+ }, 1000)
+ })
+ },
+ methods: {
+ onSubmit() {
+ this.$eventBus.$emit('meetingPeo', this.selList)
+ uni.navigateBack()
+ },
+ changeMem(item, index) {
+ // const { selList, param } = this
+ // if (this.selList.length == param.limitNum && !item.checked) return uni.showToast({
+ // title: `璇ヤ細璁彲瀹圭撼${param.limitNum}浜篳,
+ // icon: 'none'
+ // })
+ // item.checked = !item.checked
+ // this.selList = this.memberList.filter(i => i.checked)
+ // //
+ item.checked = !item.checked
+ const i = this.selList.findIndex(a => a.id === item.id)
+ if (item.checked && i === -1) {
+ this.selList.push(item)
+ } else {
+ this.selList.splice(i, 1)
+ }
+ this.$forceUpdate()
+ },
+ openSeleter() {
+ this.isShowSelMem = true
+ this.selList.forEach(item => {
+ item.checkedTemp = true
+ })
+ this.$forceUpdate()
+ },
+ initData() {
+ const {
+ param,
+ pagination
+ } = this
+ userPagePost({
+ model: {
+ ...param
+ },
+ ...pagination,
+
+ }).then(res => {
+ this.memberList = res.data.records || []
+ this.memberList.forEach(i => {
+ const index = this.selList.findIndex(ite => ite.id === i.id)
+ i.checked = index > -1
+ })
+ })
+ },
+ closeModal() {
+ this.selList.forEach(item => {
+ item.checkedTemp = true
+ })
+ this.isShowSelMem = false
+ },
+ subSelMem() {
+ const {
+ memberList
+ } = this
+ this.selList = this.selList.filter(i => i.checkedTemp)
+ memberList.forEach(ite => {
+ const index = this.selList.findIndex(i => i.id === ite.id)
+ ite.checked = index > -1
+ })
+ this.isShowSelMem = false
+ this.$forceUpdate()
+ },
+ handleRemove(i) {
+ this.selList[i].checkedTemp = false
+ this.$forceUpdate()
+ },
+ }
+ };
+</script>
+
+<style lang="scss">
+ .modal {
+ padding: 40rpx 30rpx;
+ max-height: 1000rpx;
+
+ .modal_header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 20rpx;
+
+ .status {
+ font-weight: 600;
+ }
+
+ .btn {
+ color: $uni-color-primary;
+ }
+ }
+
+ .modal_mem_list {
+ max-height: 860rpx;
+ overflow: auto;
+
+ .line {
+ display: flex;
+ align-items: center;
+ border-bottom: 1rpx solid #e5e5e5;
+ padding: 30rpx 0;
+
+ .avatar {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 20rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $uni-color-primary;
+ color: #fff;
+ }
+
+ .content {
+ flex: 1;
+
+ .depart {
+ font-size: 24rpx;
+ color: #666666;
+ }
+
+ .info {
+ display: flex;
+ margin-bottom: 16rpx;
+
+ .name {
+ font-size: 30rpx;
+ }
+ }
+ }
+
+ .btn {
+ width: 80rpx;
+ height: 48rpx;
+ line-height: 48rpx;
+ text-align: center;
+ font-size: 24rpx;
+ color: #333333;
+ border-radius: 4rpx;
+ border: 1rpx solid #999999;
+ }
+ }
+ }
+ }
+
+ .sub_wrap {
+ position: fixed;
+ bottom: 0;
+ background-color: #fff;
+ left: 0;
+ width: 100%;
+ box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
+ padding: 30rpx 30rpx 64rpx;
+
+ .sel_mem {
+ display: flex;
+ align-items: center;
+
+ .members {
+ width: 500rpx;
+ color: $uni-color-primary;
+ white-space: nowrap;
+ overflow: hidden; //鏂囨湰瓒呭嚭闅愯棌
+ text-overflow: ellipsis;
+ margin-right: 20rpx;
+ }
+
+ .open_icon {
+ width: 44rpx;
+ height: 44rpx;
+ }
+ }
+
+ .btn {
+ width: 690rpx;
+ height: 88rpx;
+ line-height: 88rpx;
+ background: $uni-color-primary;
+ border-radius: 44rpx;
+ color: #fff;
+ text-align: center;
+ margin-top: 22rpx;
+ }
+ }
+
+ .member_list {
+ .line {
+ display: flex;
+ align-items: center;
+ border-bottom: 1rpx solid #e5e5e5;
+ padding: 30rpx 0;
+
+ .avatar {
+ width: 64rpx;
+ height: 64rpx;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 20rpx;
+ }
+
+ .content {
+ flex: 1;
+
+ .depart {
+ font-size: 24rpx;
+ color: #666666;
+ }
+
+ .info {
+ display: flex;
+ margin-bottom: 16rpx;
+
+ .name {
+ font-size: 30rpx;
+ }
+
+ .tag {
+ font-size: 24rpx;
+ border-radius: 4rpx;
+ border: 1rpx solid #f62710;
+ color: #f62710;
+ padding: 0rpx 6rpx;
+ margin-left: 8rpx;
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+
+ .checked {
+ width: 48rpx;
+ }
+ }
+
+ .empty {
+ width: 100%;
+ height: 280rpx;
+ }
+ }
+
+ .search_inp {
+ height: 72rpx;
+ background: #f7f7f7;
+ border-radius: 4rpx;
+ padding-left: 16rpx;
+
+ .search {
+ width: 28rpx;
+ }
+
+ input {
+ flex: 1;
+ font-size: 28rpx;
+ color: #333333;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3