企业团队添加成员、部门弹窗

pages/self/enterpriseTeam.vue

@@ -35,7 +35,7 @@
 				<button class="btn">待审核</button>
 				<button class="btn">删除</button>
 			</view>
-			<button class="add-btn">+ 添加团队成员</button>
+			<button class="add-btn" @click="handleOpenAddMember">+ 添加团队成员</button>
 		</view>
 		<!-- 部门管理 -->
 		<view v-if="tabActive === 2" class="list-panel">
@@ -55,8 +55,44 @@
 				<view class="text">后勤部</view>
 				<button class="btn">删除</button>
 			</view>
-			<button class="add-btn">+ 添加新部门</button>
+			<button class="add-btn" @click="handleOpenAddDepartment">+ 添加新部门</button>
 		</view>
+		<!-- 添加成员弹窗 -->
+		<uni-popup ref="memberDialog" type="dialog">
+			<uni-popup-dialog ref="inputClose" type="info" title="添加成员" @confirm="dialogInputConfirm">
+				<view class="popup-form">
+					<view class="popup-form-item">
+						<view class="label">姓名</view>
+						<input class="input" type="text" placeholder="请输入" maxlength="20"/>
+					</view>
+					<view class="popup-form-item">
+						<view class="label">手机号</view>
+						<input class="input" type="text" placeholder="请输入" maxlength="11"/>
+					</view>
+					<view class="popup-form-item">
+						<view class="label">部门</view>
+						<picker class="picker" @change="bindPickerChange" :value="index" :range="array">
+							<input class="input" type="text" placeholder="请选择" maxlength="11" :value="test" disabled/>
+						</picker>
+					</view>
+					<view class="popup-form-item">
+						<view class="label">职务</view>
+						<input class="input" type="text" placeholder="请输入" maxlength="11"/>
+					</view>
+				</view>
+			</uni-popup-dialog>
+		</uni-popup>
+		<!-- 添加部门弹窗 -->
+		<uni-popup ref="departmentDialog" type="dialog">
+			<uni-popup-dialog ref="inputClose" type="info" title="添加部门" @confirm="dialogInputConfirm">
+				<view class="popup-form">
+					<view class="popup-form-item">
+						<view class="label">部门名称</view>
+						<input class="input" type="text" placeholder="请输入" maxlength="20"/>
+					</view>
+				</view>
+			</uni-popup-dialog>
+		</uni-popup>
 	</view>
 </template>
 
@@ -71,8 +107,24 @@
 				}, {
 					label: '部门管理',
 					value: 2
-				}]
+				}],
+				array: ['总经办','财务部','行政部'],
+				test: ''
 			};
+		},
+		methods:{
+			handleOpenAddMember(){
+				this.$refs.memberDialog.open()
+			},
+			handleOpenAddDepartment(){
+				this.$refs.departmentDialog.open()
+			},
+			bindPickerChange(e){
+				this.test = this.array[e.detail.value]
+			},
+			dialogInputConfirm(){
+				
+			}
 		}
 	}
 </script>
@@ -222,4 +274,35 @@
 			}
 		}
 	}
+
+	.popup-form{
+		width: 100%;
+		font-size: 27.47rpx;
+		&-item{
+			display: flex;
+			align-items: center;
+			height: 82.42rpx;
+			position: relative;
+			&+&::before{
+				content: '';
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				height: 1rpx;
+				background: #e0e0e0;
+			}
+		}
+		.label{
+			white-space: nowrap;
+			margin-right: 13.74rpx;
+		}
+		.input{
+			flex: 1;
+			text-align: right;
+		}
+		.picker{
+			flex: 1;
+		}
+	}
 </style>