|
|
@@ -0,0 +1,436 @@
|
|
|
+<template>
|
|
|
+ <div class="team-management-page">
|
|
|
+ <custom-header :name="route.query.add ? '选择团队成员' : '团队管理'"></custom-header>
|
|
|
+ <div class="team-content">
|
|
|
+ <div class="team-title" v-show="!route.query.add">当前团队总人数（25人）</div>
|
|
|
+ <div class="team-list">
|
|
|
+ <div class="list-item" v-for="ele in teamList" :key="ele.receiveUserId">
|
|
|
+ <checkbox v-if="route.query.add" @change="changeCheck" v-model="ele.checked"></checkbox>
|
|
|
+ <farm-info-card class="item-info" @click="handleItem(ele)" :style="{ width: !route.query.add ? '100%' : 'calc(100% - 55px)' }" :data="ele">
|
|
|
+ <template #right v-if="ele.receiveUserId != 1 && !route.query.add">
|
|
|
+ <div @click.stop="handlePermission(ele)">权限设置</div>
|
|
|
+ </template>
|
|
|
+ </farm-info-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="custom-bottom-fixed-btns">
|
|
|
+ <div class="bottom-btn secondary-btn" @click="handleSetAdmin">
|
|
|
+ {{ route.query.add ? "取消选择" : "设置管理员" }}
|
|
|
+ </div>
|
|
|
+ <div class="bottom-btn primary-btn" @click="handleAddTeamMember">
|
|
|
+ {{ route.query.add ? "确认设为" : "新增团队成员" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增团队成员弹窗 -->
|
|
|
+ <popup
|
|
|
+ v-model:show="showAddMemberPopup"
|
|
|
+ closeable
|
|
|
+ round
|
|
|
+ class="add-member-popup"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ @closed="handlePopupClosed"
|
|
|
+ >
|
|
|
+ <div class="popup-content">
|
|
|
+ <div class="popup-title">新增团队成员</div>
|
|
|
+ <el-form ref="formRef" :model="formData" label-position="top" class="member-form" size="large">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号">
|
|
|
+ <el-input v-model="formData.phone" placeholder="请输入手机号" clearable maxlength="11" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色类型">
|
|
|
+ <div class="role-type-grid">
|
|
|
+ <div
|
|
|
+ v-for="role in roleTypes"
|
|
|
+ :key="role.value"
|
|
|
+ class="role-btn"
|
|
|
+ :class="{ active: formData.roleType === role.value }"
|
|
|
+ @click="formData.roleType = role.value"
|
|
|
+ >
|
|
|
+ {{ role.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="popup-footer">
|
|
|
+ <div class="footer-btn share-btn" @click="handleShare">分享微信好友</div>
|
|
|
+ <div class="footer-btn confirm-btn" @click="handleConfirm">确认添加</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
+
|
|
|
+ <!-- 权限设置弹窗 -->
|
|
|
+ <popup
|
|
|
+ v-model:show="showPermissionPopup"
|
|
|
+ closeable
|
|
|
+ round
|
|
|
+ class="add-member-popup"
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ @closed="handlePermissionPopupClosed"
|
|
|
+ >
|
|
|
+ <div class="popup-content">
|
|
|
+ <div class="popup-title">权限设置</div>
|
|
|
+ <div class="role-type-grid permission-list">
|
|
|
+ <div
|
|
|
+ v-for="permission in permissionTypes"
|
|
|
+ :key="permission.value"
|
|
|
+ class="role-btn"
|
|
|
+ :class="{ active: permissionData.selectedPermission === permission.value }"
|
|
|
+ @click="togglePermission(permission.value)"
|
|
|
+ >
|
|
|
+ {{ permission.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popup-footer">
|
|
|
+ <div class="footer-btn cancel-admin-btn" @click="handleCancelAdmin">取消管理员</div>
|
|
|
+ <div class="footer-btn confirm-btn" @click="handleConfirmPermission">确认设置</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ref, reactive, onMounted } from "vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import { Popup, Checkbox } from "vant";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const formRef = ref(null);
|
|
|
+const showAddMemberPopup = ref(false);
|
|
|
+const showPermissionPopup = ref(false);
|
|
|
+const currentPermissionItem = ref(null);
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (route.query.add) {
|
|
|
+ teamList.value = [
|
|
|
+ {
|
|
|
+ farmName: "张张张",
|
|
|
+ checked: false,
|
|
|
+ roleName: "超级管理员",
|
|
|
+ className: "tag-role",
|
|
|
+ address: "广东省广州市从化区从化荔博园",
|
|
|
+ receiveUserId: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ farmName: "张扬",
|
|
|
+ checked: false,
|
|
|
+ roleName: "普通成员",
|
|
|
+ className: "tag-gray",
|
|
|
+ address: "无人机驾驶员、角色222",
|
|
|
+ receiveUserId: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ farmName: "张扬",
|
|
|
+ checked: false,
|
|
|
+ roleName: "普通成员",
|
|
|
+ className: "tag-gray",
|
|
|
+ address: "无人机驾驶员、角色222",
|
|
|
+ receiveUserId: 3,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ teamList.value = [
|
|
|
+ {
|
|
|
+ farmName: "张张张",
|
|
|
+ roleName: "超级管理员",
|
|
|
+ className: "tag-role",
|
|
|
+ address: "广东省广州市从化区从化荔博园",
|
|
|
+ receiveUserId: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ farmName: "张扬",
|
|
|
+ roleName: "项目管理员",
|
|
|
+ address: "无人机驾驶员、角色222",
|
|
|
+ receiveUserId: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ farmName: "张扬",
|
|
|
+ roleName: "普通成员",
|
|
|
+ className: "tag-gray",
|
|
|
+ address: "无人机驾驶员、角色222",
|
|
|
+ receiveUserId: 3,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const filterList = ref([]);
|
|
|
+const changeCheck = () => {
|
|
|
+ filterList.value = teamList.value.filter((item) => item.checked);
|
|
|
+ console.log("filterList",filterList.value);
|
|
|
+};
|
|
|
+
|
|
|
+const teamList = ref([]);
|
|
|
+
|
|
|
+// 角色类型选项
|
|
|
+const roleTypes = ref([
|
|
|
+ { label: "无人机驾驶员", value: "pilot" },
|
|
|
+ { label: "项目管理员", value: "admin" },
|
|
|
+ { label: "普通成员", value: "member" },
|
|
|
+ { label: "其他", value: "other" },
|
|
|
+]);
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = reactive({
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ roleType: "pilot", // 默认选中无人机驾驶员
|
|
|
+});
|
|
|
+
|
|
|
+// 权限类型选项
|
|
|
+const permissionTypes = ref([
|
|
|
+ { label: "转入农事权限", value: "transfer" },
|
|
|
+ { label: "增删成员", value: "member" },
|
|
|
+ { label: "任务接单", value: "task" },
|
|
|
+ { label: "农事规划", value: "plan" },
|
|
|
+]);
|
|
|
+
|
|
|
+// 权限数据
|
|
|
+const permissionData = reactive({
|
|
|
+ selectedPermission: "transfer", // 默认选中转入农事权限
|
|
|
+});
|
|
|
+
|
|
|
+const handlePermission = (item) => {
|
|
|
+ currentPermissionItem.value = item;
|
|
|
+ // TODO: 从item中获取当前用户的权限设置
|
|
|
+ // 这里先使用默认值
|
|
|
+ permissionData.selectedPermission = "transfer";
|
|
|
+ showPermissionPopup.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 切换权限选择（单选）
|
|
|
+const togglePermission = (value) => {
|
|
|
+ permissionData.selectedPermission = value;
|
|
|
+};
|
|
|
+
|
|
|
+// 权限弹窗关闭处理
|
|
|
+const handlePermissionPopupClosed = () => {
|
|
|
+ currentPermissionItem.value = null;
|
|
|
+ permissionData.selectedPermission = "transfer";
|
|
|
+};
|
|
|
+
|
|
|
+// 取消管理员
|
|
|
+const handleCancelAdmin = () => {
|
|
|
+ // TODO: 实现取消管理员功能
|
|
|
+ showPermissionPopup.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 确认权限设置
|
|
|
+const handleConfirmPermission = () => {
|
|
|
+ // TODO: 调用API保存权限设置
|
|
|
+ ElMessage.success("权限设置成功");
|
|
|
+ showPermissionPopup.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 弹窗关闭处理
|
|
|
+const handlePopupClosed = () => {
|
|
|
+ // 重置表单
|
|
|
+ formData.name = "";
|
|
|
+ formData.phone = "";
|
|
|
+ formData.roleType = "pilot";
|
|
|
+};
|
|
|
+
|
|
|
+// 分享微信好友
|
|
|
+const handleShare = () => {
|
|
|
+ ElMessage.info("分享功能待实现");
|
|
|
+ // TODO: 实现分享到微信好友的功能
|
|
|
+};
|
|
|
+
|
|
|
+// 确认添加
|
|
|
+const handleConfirm = () => {
|
|
|
+ // 验证姓名
|
|
|
+ if (!formData.name || !formData.name.trim()) {
|
|
|
+ ElMessage.warning("请输入姓名");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证手机号
|
|
|
+ if (!formData.phone || !formData.phone.trim()) {
|
|
|
+ ElMessage.warning("请输入手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证手机号格式
|
|
|
+ const phonePattern = /^1[3-9]\d{9}$/;
|
|
|
+ if (!phonePattern.test(formData.phone)) {
|
|
|
+ ElMessage.warning("请输入正确的手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证角色类型
|
|
|
+ if (!formData.roleType) {
|
|
|
+ ElMessage.warning("请选择角色类型");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证通过，执行添加操作
|
|
|
+ // TODO: 调用API添加团队成员
|
|
|
+ ElMessage.success("添加成功");
|
|
|
+ showAddMemberPopup.value = false;
|
|
|
+ // 可以在这里刷新团队列表
|
|
|
+};
|
|
|
+
|
|
|
+const handleAddTeamMember = () => {
|
|
|
+ if (route.query.add) {
|
|
|
+ if (filterList.value.length) {
|
|
|
+ showPermissionPopup.value = true;
|
|
|
+ } else {
|
|
|
+ ElMessage.warning("请选择团队成员");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ showAddMemberPopup.value = true;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleSetAdmin = () => {
|
|
|
+ if (route.query.add) {
|
|
|
+ teamList.value = teamList.value.map((item) => {
|
|
|
+ item.checked = false;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ router.push("/project_manager");
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleItem = (item) => {
|
|
|
+ if (route.query.add) {
|
|
|
+ item.checked = !item.checked;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.team-management-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f5f7fb;
|
|
|
+ .team-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .team-title {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .team-list{
|
|
|
+ .list-item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ .item-info{
|
|
|
+ width: calc(100% - 55px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item + .list-item{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.add-member-popup {
|
|
|
+ width: 90%;
|
|
|
+ max-width: 400px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24px 18px 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .van-popup__close-icon {
|
|
|
+ color: #000;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ .popup-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .member-form {
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item {
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .role-type-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px 0;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .role-btn {
|
|
|
+ width: calc(50% - 8px);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.26);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.26);
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #ffffff;
|
|
|
+ border-color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.permission-list{
|
|
|
+ .role-btn{
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-top: 20px;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .footer-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &.share-btn {
|
|
|
+ background: #ff953d;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm-btn {
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cancel-admin-btn {
|
|
|
+ color: #666666;
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi