front-end/ghsApp/src/admin/staff/list.vue

<template>
	<view class="app-main app-content">

		<view class="input-wrap_box">
		<view>
			<AppSearchModule placeholder="输入首字母搜索" @input="searchFn"/>
		</view>
		</view>

		<view class="app-tabs"> 
			<app-tabs :tabs="tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="50%" :isAdd="false" /> 
		</view>

		<block v-if="tabIndex == 0">
			<div class="list-wrap staff-list">
				<block v-if="!$util.isEmpty(list.data)">
					<div class="list" v-for="(item, index) in list.data" :key="index">
						<div>
							<image :src="item.avatar" mode="aspectFit" style="width:100upx;height:100upx;border-radius: 50%"></image>
						</div>
						<div class="list-det">
							<div class="list-det-left">
								<div>
									<span class="staff-name">{{ item.name }}</span>
									<span>{{ item.mobile }}</span>
								</div>
								<div></div>
								<div class="flex-center">
									<div class="status-list">
										<i class="iconfont icondagou" :class="[item.remind == 1 ? 'app-color-1' : '' ]"></i>
										<span :class="[item.remind == 1 ? 'app-color-1' : 'app-color-3' ]">新订单通知</span>
									</div>

									<div class="status-list">
										<span :class="[item.status == 1 ? 'app-color-1' : 'app-color-3' ]">业绩 ¥{{item.kdAmount}}</span>
									</div>
								</div>
								<view class="super-class" v-if="item.founder == 2">超管</view>
							</div>
							<div class="list-det-right">
								<div v-if="item.founder != 2 && item.id != loginInfo.shopAdminId" @click="delModalFn(item)"> <i class="iconfont iconshanchu1"></i> </div>
								<div @click="pageTo({url: '/admin/staff/detail',query: {id: item.id}})"> <i class="iconfont iconbianji"></i> </div>
							</div>
						</div>
					</div>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
			<!-- 按钮 -->
			<div class="app-footer">
				<div class="admin-button-com middle blue" @click="pageTo({url: '/admin/staff/add'})">添加员工</div>
			</div>
		</block>
		<!-- 角色管理 -->
		<block v-if="tabIndex == 1">
			<!-- 列表 -->
			<div class="list-wrap role-list">
				<block v-if="!$util.isEmpty(list.data)">
					<div class="list" v-for="(item, index) in list.data" :key="index">
						<div class="app-size-32">{{ item.roleName }}（{{ item.num }}）</div>
						<div class="role-option">
							<!--
							<div @click="modifyRoleFn(item)">
								<i class="iconfont iconbianji"></i>
							</div>
							<div @click="delModalFn(item)">
								<i class="iconfont iconshanchu1"></i>
							</div>
							-->
						</div>
					</div>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
			<!-- 按钮 -->
			<!--
			<div class="app-footer">
				<div class="admin-button-com middle blue" @click="addRoleFn">添加角色</div>
			</div>
			-->
		</block>
		<!-- 操作记录 -->
		<block v-if="tabIndex == 2">
			<!-- 列表 -->
			<div class="axis-wrap">
				<block v-if="!$util.isEmpty(list.data)">
					<time-axis>
						<timeaxis-item class="axis-list" bgcolor="none" v-for="(item, index) in list.data" :key="index">
							<template v-slot:content>
								<div class="axis-title">{{ item.content }}</div>
								<div class="axis-det">
									<div>ID：{{ item.id }}</div>
									<div>IP：{{ item.ip }}</div>
									<div>操作者：{{ item.name }}</div>
									<div>操作时间：{{ item.addTime | formatTime }}</div>
								</div>
							</template>
						</timeaxis-item>
					</time-axis>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
				</block>
			</div>
		</block>
		<!-- 角色操作 -->
		<modal-module :show="roleModal" @cancel="modalCancel" @click="roleModalClick" :title="roleModalText" padding="30upx 30upx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line required">
						<div class="line-label">角色名称</div>
						<div class="line-input">
			<input v-model="roleModalVal" type="text" :adjust-position="false" class="inp-input">
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 删除弹窗 -->
		<modal-module :show="delModal" @cancel="modalCancel" @click="delModalClick" :content="delModalText" color="#333" :size="32" padding="30upx 30upx"></modal-module>
	</view>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import AppAvatarModule from '@/components/module/app-avatar'
import TimeAxis from '@/admin/home/components/plugin/time-axis'
import TimeaxisItem from '@/admin/home/components/plugin/timeaxis-item'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import ModalModule from '@/components/plugin/modal'
import AppSearchModule from "@/components/module/app-search";
import { list } from '@/mixins'
import { mapGetters } from "vuex"
import { getStaffList, delStaff, getRoleList, addRole, updateRole, delRole, getLogList } from '@/api/staff'
export default {
	name: 'list',
	components: {
		AppTabs,
		AppAvatarModule,
		TimeAxis,
		TimeaxisItem,
		AppWrapperEmpty,
		ModalModule,
		AppSearchModule
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: '员工列表',
					value: 0
				},
				{
					name: '角色管理',
					value: 2
				}
			],
			// 删除弹窗操作
			delModal: false,
			delModalText: '确定删除该员工吗？',
			operateData: {},
			// 角色弹窗操作
			roleModal: false,
			roleModalText: '添加',
			roleModalVal: '',
			roleOperateData: {}
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this._list().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	computed: {
		...mapGetters({ loginInfo: "getLoginInfo" }),
	},
	onReachBottom() {
		if (!this.list.finished) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad: function() {
	},
	methods: {
		async init() {
			this._list()
		},
		searchFn(){

		},
		_list() {
			let hostFn = this.tabIndex == 0 ? getStaffList : this.tabIndex == 1 ? getRoleList : getLogList
			return hostFn().then(res => {
				this.completes(res)
			})
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.resetList()
				this._list()
			}
		},
		// 关闭弹窗
		modalCancel() {
			this.delModal = false
			this.roleModal = false
		},
		modifyModalFn(item) {
		},
		// 删除弹窗
		delModalFn(item) {
			this.delModalText = this.tabIndex == 0 ? '确定删除该员工吗？' : '确定删除该角色吗？'
			this.operateData = item
			this.delModal = true
		},
		delModalClick(e) {
			let index = e.index
			if (index === 0) {
				this.modalCancel()
			} else {
				let hostFn = this.tabIndex == 0 ? delStaff : delRole
				hostFn({ id: this.operateData.id }).then(res => {
					this.modalCancel()
					this.$msg('删除成功!')
					setTimeout(() => {
						this.resetList()
						this._list()
					}, 1000)
				})
			}
		},
		// 角色操作
		addRoleFn() {
			this.roleModal = true
			this.roleModalText = '添加'
			this.roleModalVal = ''
		},
		modifyRoleFn(item) {
			this.roleModal = true
			this.roleModalText = '修改'
			this.roleModalVal = item.roleName
			this.roleOperateData = item
		},
		roleModalClick(e) {
			let index = e.index
			if (index === 0) {
				this.modalCancel()
			} else {
				let hostFn = this.roleModalText == '添加' ? addRole : updateRole
				let params = {
					roleName: this.roleModalVal
				}
				if (this.roleModalText == '修改') {
					params.id = this.roleOperateData.id
				}
				hostFn(params).then(res => {
					this.modalCancel()
					this.$msg(`${this.roleModalText}成功!`)
					setTimeout(() => {
						this.resetList()
						this._list()
					}, 1000)
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
	.app-content {
		padding-top: 100upx;
		padding-bottom: 20upx;
	}
	.app-tabs {
		position: fixed;
		/* 手机mobile屏幕小于1000px */
		@media screen and (max-width: 1100px) {
			width: 100%;
		}
		/* 收银台cashier屏幕大于1000px */
		@media screen and (min-width:1100px) {
			width: 40%;
		}   
		z-index: 9;
	}
	.input-wrap_box {
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 10;
		/* 手机mobile屏幕小于1000px */
		@media screen and (max-width: 1100px) {
			width: 100%;
		}
		/* 收银台cashier屏幕大于1000px */
		@media screen and (min-width:1100px) {
			width: 40%;
		}   
		height: 100upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		& > view:nth-child(1) {
		flex: 1;
		}
	}
	.list-wrap {
		background-color: #fff;
		margin-top:85upx;
		.list {
			@include disFlex(center, flex-start);
			margin: 0 30upx;
			padding: 30upx 0;
			border-bottom: 2upx solid $borderColor;
		}
	}
	.staff-list {
		padding-bottom:100upx;
		.list-det {
			width: calc(100% - 110upx);
			color: $fontColor3;
			margin-left: 20upx;
			@include disFlex(center, space-between);
			.list-det-left {
				position:relative;
				.staff-name {
					color: #333;
					font-size: 30upx;
					font-weight: 600;
					margin-right: 10upx;
					display: inline-block;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					width:150upx;
				}
				.super-class{
					background-color: #3385FF;
					border:none;
					color:white;
					font-size:20upx;
					border-radius:20upx;
					width:70upx;
					text-align: center;
					padding:6upx 0 6upx 0;
					position:absolute;
					right:-90upx;
					top:9upx;
				}
				.flex-center {
					margin-top: 10upx;
				}
				.status-list {
					margin-left: 25upx;
					&:first-child {
						margin-left: 0;
					}
					.iconfont {
						// color: $fontColor3;
						font-size: 24upx;
						margin-right: 10upx;
					}
				}
			}
			.list-det-right {
				@include disFlex(center, flex-start);
				& > div {
					margin-left: 50upx;
					&:first-child {
						margin-left: 0;
					}
				}
				.iconfont {
					font-size: 36upx;
					color: $fontColor3;
				}
			}
		}
	}
	// 角色管理
	.role-list {
		.list {
			justify-content: space-between;
		}
		.role-option {
			@include disFlex(center, flex-start);
			& > div {
				margin-left: 50upx;
				&:first-child {
					margin-left: 0;
				}
			}
			.iconfont {
				font-size: 36upx;
				color: $fontColor3;
			}
		}
	}
	// 操作记录
	.axis-wrap {
		position: relative;
		padding: 30upx 30upx 30upx 40upx;
		background-color: #fff;
		.axis-list {
			&:last-child .axis-det {
				margin-bottom: 0;
			}
		}
		.axis-title {
			font-size: 30upx;
			font-weight: 600;
			margin-bottom: 14upx;
		}
		.axis-det {
			color: $fontColor2;
			margin-bottom: 40upx;
			& > div {
				margin-top: 6upx;
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 160upx;
			margin-right: 30upx;
		}
	}
</style>