员工添加编辑员工列表

pages/employees/add.vue

@@ -24,7 +24,7 @@
 					<input type="text" v-model="job" placeholder="职业"/>
 				</view>
 				<view class="info-inputs">
-					<picker :range="section" range-key="name" @change="pickerChange">
+					<picker :range="section" range-key="name" :value="sectionIndex" @change="pickerChange">
 						<view class="picker-text">
 							{{section[sectionIndex].name}}
 							<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
@@ -33,6 +33,15 @@
 				</view>
 			</view>
 		</view>
+		<view class="jurisdiction switch">
+			<view class="item">
+				<label>
+					<view class="item-title">设为推荐</view>
+					<view class="item-info">设为推荐员工将在企业自媒体中优先展示</view>
+					<switch class="item-switch" :checked="isPosition" color="#e93340" @change="switchChange" />
+				</label>
+			</view>
+		</view>
 		<!-- 权限设置 -->
 		<view class="title">权限设置</view>
 		<view class="jurisdiction">
@@ -41,24 +50,25 @@
 					<label>
 						<view class="item-title">{{item.title}}</view>
 						<view class="item-info">{{item.description}}</view>
-						<checkbox class="item-checkbox" color="#c82626" :value="item.permission_id" />
+						<checkbox class="item-checkbox" :checked="item.check" color="#e93340" :value="item.permission_id" />
 					</label>
 				</view>
 			</checkbox-group>
 		</view>
 		<!-- 按钮 -->
 		<view class="add-btns">
-			<button size="default" @click="onAddEmployees">确认添加</button>
+			<button size="default" @click="onAddEmployees">{{type === 'PUT' ? '修改': '添加'}}</button>
 		</view>
 	</view>
 </template>
 
 <script>
-	import { employeesConfig, addEmployees } from '@/apis/interfaces/employees'
+	import { employeesConfig, addEmployees, employeesInfo, employeesPut } from '@/apis/interfaces/employees'
 	import { uploads } from '@/apis/interfaces/uploading'
 	export default {
 		data() {
 			return {
+				type		 : '',
 				loging		 : true,
 				section		 : [],
 				permissions	 : [],
@@ -70,17 +80,53 @@
 				},
 				name		 : '',
 				phone		 : '',
-				job			 : ''
+				job			 : '',
+				isPosition	 : false
 			};
 		},
 		created() {
+			if(this.$Route.query.type === 'PUT'){
+				this.type = 'PUT'
+				uni.setNavigationBarTitle({
+					title: '编辑员工'
+				})
+			}
 			employeesConfig().then(res => {
 				this.section 	 = res.store
-				this.permissions = res.permissions
-				this.loging  	 = false
+				if(this.$Route.query.type === 'PUT'){
+					employeesInfo(this.$Route.query.id || 4).then(res => {
+						let permissionIds = []
+						for(let val of res.permission){
+							if(val.check){
+								permissionIds.push(val.permission_id)
+							}
+						}
+						this.permissions  = res.permission
+						this.sectionIndex = this.section.findIndex(val => val.store_id == res.store.store_id)
+						this.permissionIds= permissionIds
+						this.name  		  = res.name
+						this.phone 		  = res.mobile
+						this.job   		  = res.job
+						this.cover		  = res.cover
+						this.isPosition	  = res.is_position
+						this.loging 	  = false
+					}).catch(err => {
+						uni.showToast({
+							title: err.message,
+							icon : 'none'
+						})
+					})
+				}else{
+					this.permissions = res.permissions
+					this.loging = false
+				}
 			})
 		},
 		methods:{
+			// 设为推荐
+			switchChange(e){
+				this.isPosition = e.detail.value
+			},
 			// 选择部门
 			pickerChange(e){
 				this.sectionIndex = e.detail.value
@@ -112,16 +158,19 @@
 			},
 			// 添加员工
 			onAddEmployees(){
-				addEmployees({
+				let data = {
 					name		: this.name,
 					mobileNo	: this.phone,
 					job			: this.job,
 					cover		: this.cover.path,
-					position	: 1,
+					position	: this.isPosition ? 1: 0,
 					order		: 0,
 					store_id	: this.section[this.sectionIndex].store_id,
 					permission	: this.permissionIds
-				}).then(res => {
+				}
+				let submitAdd = this.type == 'PUT' ? employeesPut(this.$Route.query.id, data) : addEmployees(data)
+				
+				submitAdd.then(res => {
 					uni.showModal({
 						title		: '提示',
 						content		: res,
@@ -151,6 +200,9 @@
 		}
 		.jurisdiction{
 			background: white;
+			&.switch{
+				margin-top: $margin;
+			}
 			.item{
 				position: relative;
 				padding: $padding 150rpx $padding $padding;
@@ -171,7 +223,13 @@
 					right: $padding;
 					top: 50%;
 					height: 40rpx;
-					width: 40rpx;
+					margin-top: -27rpx;
+				}
+				.item-switch{
+					position: absolute;
+					right: $padding;
+					top: 50%;
+					height: 40rpx;
 					margin-top: -27rpx;
 				}
 				.item-title{

pages/employees/list.vue

@@ -1,37 +1,65 @@
 <template>
 	<view class="ios-bottom">
-		<uni-collapse>
+		<uni-collapse v-if="lists.length > 0">
 			<block v-for="(listItem, listIndex) in lists" :key="listIndex">
 				<uni-collapse-item :show-animation="true" :open="listIndex === 0">
 					<template v-slot:title>
 						<view class="collapse-title">{{listItem.name}}</view>
 					</template>
-					<view class="employees-item" v-for="(item, index) in listItem.data" :key="index">
-						<view class="cover">
-							<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
-							<block v-else>
-								<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
-							</block>
+					<block v-if="listItem.data.length > 0">
+						<view class="employees-border" v-for="(item, index) in listItem.data" :key="index">
+							<uni-swipe-action>
+								<uni-swipe-action-item :rightOptions="options" @click="onEmployees($event, listIndex, index)">
+									<view class="employees-item">
+										<view class="cover">
+											<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
+											<block v-else>
+												<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
+											</block>
+										</view>
+										<view class="content">
+											<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
+											<view class="job nowrap">
+												<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
+											</view>
+										</view>
+									</view>
+								</uni-swipe-action-item>
+							</uni-swipe-action>
 						</view>
-						<view class="content">
-							<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
-							<view class="job nowrap">
-								<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
-							</view>
-						</view>
-					</view>
+					</block>
+					<block v-else>
+						<view class="employees-null">店铺暂无员工</view>
+					</block>
 				</uni-collapse-item>
 			</block>
 		</uni-collapse>
+		<view v-else class="list-null">
+			<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
+			<view class="sub-title">暂未添加员工</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import { employees } from '@/apis/interfaces/employees'
+	import { employees, employeesDelete } from '@/apis/interfaces/employees'
 	export default {
 		data() {
 			return {
-				lists: []
+				lists	: [],
+				options	: [{
+					text	: '编辑',
+					type	: 'PUT',
+					style	: {
+						backgroundColor: '#3688ee'
+					}
+				},{
+					text	: '删除',
+					type	: 'DELETE',
+					style	: {
+						backgroundColor: '#e93340'
+					}
+				}]
 			};
 		},
 		onShow(){
@@ -39,7 +67,58 @@
 				this.lists = res
 			})
 		},
+		methods:{
+			// 编辑，删除
+			onEmployees(e, upIndex, index){
+				let type = e.content.type,
+					val  = this.lists[upIndex].data[index]
+				if(type == 'PUT'){
+					this.$Router.push({name: 'addEmployees', params: {type: 'PUT', id: val.employee_id}})
+					return
+				}
+				uni.showModal({
+					title		: '提示',
+					content		: '删除后无法恢复，确定删除员工[' + val.name + ']吗？', 
+					cancelText	: '取消',
+					cancelColor	: '#555',
+					confirmText	: '确认',
+					confirmColor: '#e93340',
+					success		: res => {
+						if(res.confirm) {
+							employeesDelete(val.employee_id).then(res => {
+								uni.showToast({
+									title: res,
+									icon : 'none'
+								})
+								this.lists[upIndex].data.splice(index, 1)
+							}).catch(err => {
+								uni.showToast({
+									title: err.message,
+									icon : 'none'
+								})
+							})
+						}
+					}
+				})
+			}
+		},
 		onNavigationBarButtonTap() {
+			if(this.lists.length <= 0){
+				uni.showModal({
+					title		: '提示',
+					content		: '暂未创建门店，无法添加员工',
+					cancelText	: '稍后创建',
+					cancelColor	: '#555',
+					confirmText	: '立即创建',
+					confirmColor: '#e93340',
+					success		: res => {
+						if(res.confirm) {
+							this.$Router.push({name: 'shopCreate'})
+						}
+					}
+				})
+				return
+			}
 			this.$Router.push({name: 'addEmployees'})
 		}
 	};
@@ -65,21 +144,19 @@
 			height: 1rpx;
 			background: $border-color;
 		}
-		&:last-child::before {
-			display: none;
-		}
 		.cover {
 			position: absolute;
 			top: $padding - 10;
 			left: $padding;
 			background: $text-price;
 			color: white;
-			height: 78rpx;
-			width: 78rpx;
-			line-height: 78rpx;
+			height: 88rpx;
+			width: 88rpx;
+			line-height: 88rpx;
 			text-align: center;
 			border-radius: 50%;
 			overflow: hidden;
+			font-size: $title-size-lg;
 			.cover-img {
 				width: 100%;
 				height: 100%;
@@ -89,11 +166,12 @@
 			}
 		}
 		.content {
-			height: 78rpx;
-			padding-left: 98rpx;
+			height: 88rpx;
+			padding-left: 108rpx;
 			.nickname{
 				line-height: 40rpx;
 				font-size: $title-size;
+				padding-bottom: 10rpx;
 				text{
 					font-size: $title-size-sm;
 					color: $text-gray-m;
@@ -116,4 +194,28 @@
 			}
 		}
 	}
+	// 空提示
+	.list-null{
+		width: 100vw;
+		height: 100vh;
+		box-sizing: border-box;
+		text-align: center;
+		background: white;
+		padding-bottom: 20vh;
+		@extend .vertical;
+		.sub-title{
+			color: $text-gray;
+			font-size: $title-size-m;
+		}
+		.icon{
+			width: 288rpx;
+		}
+	}
+	.employees-null{
+		text-align: center;
+		line-height: 10vh;
+		padding-bottom: $padding;
+		font-size: $title-size-m;
+		color: $text-gray;
+	}
 </style>