lanan-repair-app/pages-internal/staffManagement/NewstaffManagement.vue

<template>
	<view class="container">
		<VNavigationBar style="position: relative;z-index: 99;" homeHeaderPaddingTop="0" backgroundColor="#fff"
			title-color="#000" title="员工管理"></VNavigationBar>
		<view class="content">
			<view class="top_">
				<view class="search_box">
					<u-search placeholder="请输入员工姓名进行搜索" @search="getindex" :showAction="false" searchIconColor="#427FFE"
						v-model="workName"></u-search>
				</view>


				<view class="tap_list" :class="{ 'acColor': tapIndex == index}" v-for="(item,index) in  tabList"
					:key="index" @click="gettap(index,item.id)">
					<view class=""> {{item.name}}</view>
					<view class="gang" :class="{ 'actColor': tapIndex == index}"></view>

				</view>

			</view>
			<!-- <scroll-view scroll-y="true" class="tap_box" style="height: calc(100vh - 350px)"
				@scrolltolower="loadMoreData" :refresher-triggered="refresherTriggered" refresher-enabled
				@refresherrefresh="handleRefresh"> -->
			<scroll-view scroll-y="true" class="scroll-content" @scrolltolower="loadMoreData"
				:refresher-triggered="refresherTriggered" refresher-enabled @refresherrefresh="handleRefresh">
				<view class="lsit_">

					<view class="list_box" v-for="(item, index) in goodsList" :key="index">
						<view class="checkbox_" @click="setIndex(item.id)">
							<u-icon name="checkmark" color="#2979ff" size="18"
								v-if="workids.includes(item.id)"></u-icon>
						</view>
						<view class="right_box">
							<view class="d_s" @click="toInfo(item)">
								<view class="user_">
									<image :src="item.avatar" mode="" v-if="item.avatar"></image>
									<image src="/static/images/yh.png" v-else mode=""></image>
								</view>
								<view class="name_">{{ item.nickname || item.username }}</view>
								<view class="icon_"><u-text :lines="1" :text="item.roleNames" /></view>
							</view>
							<view class="d_b">
								<view class="">
									<text style="color: #8D90A6;">电话：</text>
									<text>{{ item.mobile || item.username }}</text>
								</view>
								<view class="tel_" @click="gettel(item)">
									<image src="/static/images/ttel.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
			<view style="width: 100%; height: 128rpx; "></view>
		</view>
		<view class="bottom_">
			<view class="bottom_left" @click="getdelete()">删除员工</view>
			<view class="bottom_right" @click="goAdd()">添加员工</view>
		</view>
		<qianziyu-select :show="showSelectStaff" @lower="pageSelect()" @submit="submitStaff"
			@cancel="showSelectStaff =false" @search="searchStaff" popupTitle="选择员工" type="checkbox"
			:dataLists="selectStaffList" name="nickname"></qianziyu-select>
		<!-- <picker @change="bindPickerChange" mode=selector range-key="name" :value="selectRoleIndex" :range="roles">
			<view class="uni-input">{{roles[selectRoleIndex]}} || </view>
		</picker> -->
		<u-picker style="flex:0" :show="showSelectRole" @cancel="showSelectRole = false" @confirm="submit"
			keyName="name" :columns="[roles]"></u-picker>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import config from "@/config";
	import VNavigationBar from "@/components/VNavigationBar.vue";
	import {
		checkPermi
	} from "@/utils/permission.js"

	export default {
		data() {
			return {
				titles: "员工管理",
				keyword: '',
				showSelectStaff: false,
				List: [],
				listIndex: [],
				tapIndex: 0,
				tapList: [],
				show: false,
				status: 'loading',
				msg: '3',
				goodsList: [],
				tabList: [],
				renList: [],
				baseUrl: "http://192.168.1.4:8080/lanan",
				partnerId: '',
				isListing: 1,
				goodsTitle: "",
				selectStaffList: [],
				selectRoleIndex: 0,
				taplist: [{
						Text: '已发布',
						id: 1
					},
					{
						Text: '待上架',
						id: 0
					},
				],
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				isLoading: false,
				refresherTriggered: false,

				realName: "",
				phoneNum: "",
				workName: "",
				workids: [],
				postid: '',
				gwindex: 0,
				gwid: 0,
				roleId: undefined,
				showSelectRole: false,
				addRoleId: undefined,
				education: null,
				educationText: null,
				idCard: null,
				joinDate: null,
				probationPeriod: null,
				socialSecurityBuyDate: null,
				educations: [],
				showEducation: false,
				showJoinedDate: false,
				showFormalDate: false,
				showSafeDate: false,
				files: [],
				showDriveType: false,
				driverLicenseType: [],
				driverLicenseTypeArr: [],
				staffAddList: [],
				driverLicenseTypeArrStr: null,
				queryParams: {
					pageNo: 1,
					pageSize: 20
				},
				total: 0,
				roles: []
			}
		},
		components: {
			// headersVue
			VNavigationBar,
		},
		onLoad() {
			this.getDriveType()
			this.gettab()
		},
		/* onShow() {
			// 页面显示就自动刷新（包括进入页面或从其他页面返回）
			this.pageNum = 1
			this.goodsList = []
			this.getindex()
		}, */
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++
				this.gettab()
			}
		},
		methods: {
			checkPermi,
			gettap(index, id) {
				this.tapIndex = index
				this.roleId = id
				this.goodsList = []
				this.pageNum = 1
				this.getindex()
			},
			setIndex(num) {
				const index = this.workids.indexOf(num); // 查找是否包含此数字
				if (index === -1) {
					this.workids.push(num); // 若不存在，
				} else {
					this.workids.splice(index, 1); // 存在的话，则删除这个数
				}
				console.log(this.workids);
			},

			gettel(num) {
				const value = num.mobile || num.username
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			toInfo(data) {
				uni.navigateTo({
					// url: '/pages/internalManagement/staffManagement/addStaff?id=' + data.id
					url: '/pages-internal/staffManagement/addStaff?id=' + data.id
				})
			},
			searchStaff(e) {
				console.log('搜索的内容', e);
				this.queryParams.username = e
				this.queryParams.pageNo = 1
				this.selectStaffList = []
				this.querySelectStaff()
			},
			async getdelete() {
				if (this.workids == '') {
					uni.showToast({
						title: '请至少选择一名要删除的员工！',
						icon: 'none'
					})
					return
				} else {
					// this.workids = this.workids.join(",")
				}
				let res = await request({
					url: '/admin-api/base/repair-staff/deleteStaff',
					method: 'delete',
					data: this.workids

				})
				if (res.code == 200) {
					uni.showToast({
						title: "操作成功",

					})
					this.pageNum = 1
					this.goodsList = []
					this.getindex()
				}
			},
			// 驾照类型
			getDriveType() {
				return request({
					url: '/admin-api/common/down/getDriverLicenseType',
					method: 'get'
				}).then(res => {
					//提取出数组中的id属性
					this.driverLicenseType = res.data
				})
			},
			goAdd() {
				// uni.navigateTo({
				// 	url: '/pages-internal/staffManagement/addStaff'
				// })
				// 弹窗设置为true
				this.showSelectStaff = true
				this.queryParams.pageNo = 1
				this.selectStaffList = []
				//查询可以选择员工列表
				this.querySelectStaff()
			},
			pageSelect() {
				if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total) {
					uni.showToast({
						title: '没有下一页数据',
						icon: 'none'
					})

				} else {
					this.queryParams.pageNo++
					this.querySelectStaff()
				}
			},
			async querySelectStaff() {
				const res = await request({
					url: `/admin-api/base/repair-staff/listSelectUser`,
					method: 'GET',
					params: this.queryParams
				})
				this.selectStaffList.push(...res.data.list)
				this.total = res.data.total

			},
			goManage(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '/pages/internalManagement/staffManagement/staffManagement'
					})
				}

			},
			async gettab() {
				let res = await request({
					url: '/admin-api/system/role/pageByQuery',
					method: 'get',
					params: {
						servicePackageId: 'weixiu'
					}
				})
				this.tabList = [{
					name: '全部',
					id: undefined
				}]
				this.tabList.push(...res.data)
				this.roleId = this.tabList[0].id
				this.renList = res.data
				this.getindex()
			},
			async getindex() {
				if (this.workName != '') {
					this.pageNum = 1
					this.goodsList = []
				}

				let data = {
					nickname: this.workName,
					roleId: this.roleId,
					pageNo: this.pageNum, //第几页
					pageSize: this.pageSize, //一页多少张
				}
				let res = await request({

					url: '/admin-api/system/role/selectListByRoleIdRepair',
					method: 'get',
					params: data
				})
				if (res.code == 200) {

					if (this.pageNum != 1) {
						this.goodsList = this.goodsList.concat(res.rows)
					} else {
						this.goodsList = res.rows
					}
					this.goodsList.forEach(item => {
						if (item.avatar && !item.avatar.includes(config.imagesUrl)) {
							item.avatar = config.imagesUrl + (item.avatar[0] === '/' ? item.avatar : '/' +
								item.avatar)
						}
					})
					let total = res.total
					this.totalPages = Math.ceil(total / this.pageSize);
				}
				const newUsers = this.goodsList.filter(item => !item.roleName)
				if (newUsers && newUsers.length > 0) {
					const ids = newUsers.map(item => item.id)
					request({
						url: '/admin-api/inspection/util/getRoleNameByIds?ids=' + ids,
						method: 'get'
					}).then(res => {
						this.goodsList.filter(item => !item.roleName).map(item => {
							this.$set(item, "roleName", res.data[item.id])
						})
					})
				}
			},
			loadMoreData() {
				if (this.pageNum >= this.totalPages || this.isLoading) return;
				this.pageNum++;
				this.gettab();
			},
			async refreshList() {
				if (this.isLoading) return;

				this.pageNum = 1;
				this.refresherTriggered = true;

				try {
					await this.getindex();
				} finally {
					// 关闭刷新状态
					this.refresherTriggered = false;
				}
			},
			async handleRefresh() {
				if (this.isLoading) return;

				this.refresherTriggered = true;
				this.pageNum = 1;
				this.isLoading = true;

				try {
					await this.getindex();
				} catch (error) {
					console.error('刷新失败:', error);
				} finally {
					this.refresherTriggered = false;
					this.isLoading = false;
				}
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
			queryRole() {
				request({
					url: `/admin-api/system/role/pageByQuery?servicePackageId=weixiu`,
					method: 'GET'
				}).then(res => {
					this.roles = res.data
				})
			},
			submitStaff(data) {
				console.log('返回的数据', data);
				this.staffAddList = data
				this.queryRole()
				this.showSelectRole = true
			},
			async submit(data) {
				console.log('data', data.value[0].id);
				const res = await request({
					url: `/admin-api/base/repair-staff`,
					method: 'post',
					data: {
						repairStaffs: this.staffAddList,
						roleIds: [data.value[0].id],
					}
				})
				this.showSelectRole = false
				this.showSelectStaff = false
				this.pageNum = 1
				await this.getindex()
			},
		}

	}
</script>

<style scoped lang="scss">
	.icon_ {
		background: #eaf2fe;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
		color: #427FFE;
		font-size: 14px;
		max-width: 200rpx;
		/* 限制最大宽度 */
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	.user_ {
		width: 90rpx;
		/* 固定宽度 */
		height: 90rpx;
		/* 固定高度 */
		border-radius: 4rpx;
		overflow: hidden;
		margin-right: 20rpx;
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	.d_s {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		width: 100%;
		/* 确保宽度占满父容器 */
	}

	.name_ {
		font-size: 32rpx;
		color: #101A3E;
		margin-right: 20rpx;
		flex-shrink: 0;
		/* 禁止挤压 */
	}

	image {
		width: 100%;
		height: 100%;
	}

	.container {
		/* background: #F1F3F6;
		height: 100vh; */

		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.content {
		/* width: 100%;
		box-sizing: border-box; */

		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		// padding-top: 170rpx;
	}

	.scroll-content {
		flex: 1;
		overflow-y: auto;
	}

	.top_ {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		padding-bottom: 0px;
	}

	.tap_box {
		width: 100%;
		white-space: nowrap;
		margin: 5px 0px;
		box-sizing: border-box;
		padding-bottom: 5px;

	}

	.tap_list {
		color: #333333;
		margin: 0px 10px;
		display: inline-block;
		margin-top: 20rpx;
	}

	.acColor {
		font-weight: bold;
		color: #5384fd;
	}

	.right_box {
		width: 88%;
	}

	.gang {
		width: 20px;
		height: 4px;
		margin-top: 5px;
		// background-color: #5384fd;
		border-radius: 30px;
		margin: 5px auto;
	}

	.actColor {
		background-color: #5384fd;
	}

	.search_box {
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin-top: 30rpx;
	}

	.lsit_ {
		background: #F1F3F6;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.list_box {
		width: 100%;
		background: #fff;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
	}

	.checkbox_ {
		width: 48rpx;
		height: 48rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E0E0E0;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	//.d_s{
	//	display: flex;
	//	align-items: center;
	//	margin-bottom: 30rpx;
	//}
	.d_b {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	//.user_{
	//	width: 90rpx;
	//	height: 90rpx;
	//	border-radius: 4rpx;
	//	overflow: hidden;
	//	margin-right: 20rpx;
	//}
	//.icon_{
	//	background: #eaf2fe;
	//	border-radius: 8rpx;
	//	display: flex;
	//	align-items: center;
	//	justify-content: center;
	//	box-sizing: border-box;
	//	padding:5rpx 10rpx;
	//	color: #427FFE;
	//	font-size: 14px;
	//
	//
	//}
	.tel_ {
		width: 36rpx;
		height: 36rpx;
	}

	//.name_{
	//	font-size: 32rpx;
	//	color: #101A3E;
	//	margin-right: 20rpx;
	//}
	.bottom_ {
		width: 100%;
		height: 158rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15px 15px 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_left {
		width: 301rpx;
		height: 78rpx;
		border: 2rpx solid #427FFE;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #427FFE;
		font-size: 28rpx;
		border-radius: 50px;
		margin: 30rpx;

	}

	.bottom_right {
		width: 301rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		background: #427FFE;
		border: 2rpx solid #427FFE;
		border-radius: 50px;
		margin: 30rpx;
	}

	.roleName {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		width: 200rpx;
		/* 根据需要设置宽度 */
	}
</style>