distribution-uni/pages/staff/staff.vue

<template>
	<view>
		<uni-card title="员工管理">
			<u-grid :col="4" border>
				<u-grid-item index="add" @tap="onDotClick('add','')">
					<u-icon name="man-add" :size="size"></u-icon>
					<view class="man-add">添加员工</view>
				</u-grid-item>
				<u-grid-item @tap="gotoClockPage">
					<u-icon name="calendar" :size="size"></u-icon>
					<view class="calendar">上班打卡</view>
				</u-grid-item>
				<u-grid-item @tap="gotoPerformancePage">
					<u-icon name="list" :size="size"></u-icon>
					<view class="list">业绩管理</view>
				</u-grid-item>
				<u-grid-item @tap="goGuide">
					<u-icon name="lock" :size="size"></u-icon>
					<view class="lock">打卡规则</view>
				</u-grid-item>
			</u-grid>
		</uni-card>
		<uni-card title="员工列表">
			<uni-list>
				<uni-list-item direction="row" clickable v-for="(item , index) in staffList"
					:key="index">
					<template #body>
						<view class="tag-wrap">
							<view v-if="item.departmentTitle">
								<u-tag :text="item.departmentTitle" size="12" />
							</view>
							<view style="margin-top: 10rpx;">
								<u-tag text="主账号" v-if="item.type==0&&(shopOwnerPhone==item.username)" size="12" />
								<u-tag text="管理员" v-if="item.type==0&&(shopOwnerPhone!=item.username)" size="12" />
								<u-tag text="员工" v-if="item.type==1" size="12" />
							</view>
						</view>
					</template>
					<template #header>
						<view class="avatar-wrap">
							<!-- <u-avatar :src="item.avatar" size="24">
							</u-avatar> -->
							<text class="staff-name">{{ item.nickname }}</text>
						</view>
					</template>
					<template #footer>
						<view @tap="onDotClick('edit',item)"><u-icon name="edit-pen-fill" size="28"></u-icon></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				staffList: [],
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				size: 30,
				type:'',
				shopOwnerPhone:uni.getStorageSync('shopOwnerPhone'),
				username:uni.getStorageSync('username')
			};
		},
		onLoad() {
			this.type = uni.getStorageSync('type')
		},
		onShow() {
			this.getStaffList()
		},
		methods: {
			onDotClick(type,item) {
				
				if(this.type == 0 && this.shopOwnerPhone == this.username){
					uni.navigateTo({
						url: `/package1/staff/addStaff?type=${type}&item=`+ JSON.stringify(item)
					})
				}else{
					this.tui.toast("暂无添加权限")
				}
			},
			getStaffList() {
				this.tui.request('/app/common/user/findAllUserByShopId', 'get', {}, false, false, true).then((res) => {
					if (res.code !== 200) return
					this.staffList = res.result
				})
			},
			gotoPerformancePage() {
				if(this.type == 0 && (uni.getStorageSync('shopOwnerPhone') == uni.getStorageSync('username'))){
					uni.navigateTo({
						url: '/package1/staff/performance'
					})
				}else{
					this.tui.toast("暂无查看权限")
				}
				
			},
			gotoClockPage() {
				this.tui.toast("内测中，暂未开放")
				// uni.navigateTo({
				// 	url: '/package1/staff/clock'
				// })
			},
			goGuide(){
				this.tui.toast("内测中，暂未开放")
				// if(this.type == 0){
				// 	uni.navigateTo({
				// 		url: '/package1/staff/signRule'
				// 	})
				// }else{
				// 	this.tui.toast("暂无编辑权限")
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.staff-name {
		padding: 0 15upx;
	}

	.tag-wrap {
		width: 100rpx;
		flex: 1;
		display: flex;

		view {
			margin: 0 2upx;
		}
	}

	.avatar-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
	}
</style>