cashier_app/pageStaff/index.vue

<template>
	<view class="liststyle">
		<view v-for="item in pageData.list " :key="item.id">
			<view class="">
				<view class="">
					<span style="font-size: 28rpx;color: #333333; ">{{item.name}}&nbsp;</span>
					<span style="font-size: 24rpx;color: #999; ">{{item.code}}</span>
				</view>
				<view class="" style="font-size: 24rpx;color: #666666;">
					{{item.account}}
				</view>
			</view>
			<view class="">
				<view style="display: flex;justify-content: center;align-items: center;">
					<span style="font-size: 28rpx;color: #999999;">是否启用</span>&nbsp;&nbsp;
					<up-switch :activeValue="1" :inactiveValue="0" v-model="item.status" size="18"
						@change="switch2Change($event,item)"></up-switch>
				</view>
				<view class="df">
					<up-button size="small" shape="circle"  style="border-radius: 28rpx  28rpx  28rpx  28rpx;"
						@tap="pageData.show = true;pageData.rolesId=item.id" text="删除"></up-button>&nbsp;&nbsp;
					<up-button type="primary" shape="circle" plain size="small"
						style="border-radius: 28rpx  28rpx  28rpx  28rpx;margin-left: 16rpx;" @tap="toUrl(item)"
						text="编辑"></up-button>
				</view>
			</view>
		</view>
		<view style="background-color: rgba(0,0,0,0);"></view>
	</view>
	<view v-if="pageData.list.length==0" style="text-align: center;">
		<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
		<view style="font-size: 28rpx;color: #999;">暂无员工</view>
	</view>
	<view class="bottomBotton" @tap="toUrl">
		添加员工
	</view>
	<!-- 删除确认框 -->
	<up-modal :show="pageData.show" contentTextAlign="center" showCancelButton @confirm='delTableHandle'
		@cancel='pageData.show=false' content='是否确认删除？'></up-modal>
</template>

<script setup>
	import { reactive, ref, watch, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js';
	import { shopStaffList,shopStaffDel,shopStaffPut } from "@/http/api/staff.js"
	
	let pageData = reactive({
		show: false,
		list: [],
		rolesId: "" // 删除员工id
	})
	onShow(() => {
		getList()
	})
	
	/**
	 * 获取员工列表
	 */
	function getList() {
		shopStaffList({
			page: 1,
			size: 100
		}).then((res) => {
			pageData.list = res.records
		})
	}
	
	/**
	 * 员工状态修改
	 * @param {Object} e
	 * @param {Object} d
	 */
	function switch2Change(e, d) {
		shopStaffPut({
			id: d.id,
			status: e
		}).then(res => {
			setTimeout(() => {
				getList()
			}, 500)
		})
	}
	
	/**
	 * 删除员工
	 */
	function delTableHandle() {
		shopStaffDel({id:pageData.rolesId})
		pageData.show = false
		setTimeout(() => {
			getList()
		}, 500)
	}

	/**
	 * 前往新增/修改
	 * @param {Object} d
	 */
	function toUrl(d) {
		if (d.id) {
			go.to('PAGES_ADD_STAFF', {
				type: 'edit',
				id: d.id
			})
		} else {
			go.to('PAGES_ADD_STAFF', {
				type: 'add',
			})
		}
	}


	
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="less" scoped>



	.liststyle {
		>view {
			// width: 694rpx;
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 0 16rpx;
			margin: 32rpx 16rpx;

			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				
			}

			>view:first-child {
				border-bottom: 2rpx solid #E5E5E5;
			}
		}
	}

	.bottomBotton {
		width: 530rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #318AFE;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.df {
		display: flex;
		justify-content: center;
	}
</style>