fix
This commit is contained in:
parent
268c131aa7
commit
b5a2504dbd
@ -18,6 +18,24 @@ export const departmentV2AllPosition = (data) => {
|
||||
})
|
||||
}
|
||||
|
||||
export const departmentV2TreeAll = (data) => {
|
||||
return request({
|
||||
url: '/department/v2/tree/all',
|
||||
baseURL:import.meta.env.VITE_EPR_BASEURL,
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export const userV2List = (data) => {
|
||||
return request({
|
||||
url: '/user/v2/list',
|
||||
baseURL:import.meta.env.VITE_EPR_BASEURL,
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export const groupCreateDept = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/group/create-dept',
|
||||
|
||||
@ -46,6 +46,14 @@
|
||||
"enablePullDownRefresh":false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chooseMembers/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh":false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chooseGroupAdmin/index",
|
||||
"type": "page",
|
||||
|
||||
692
src/pages/chooseMembers/index.vue
Normal file
692
src/pages/chooseMembers/index.vue
Normal file
@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<div class="outer-layer">
|
||||
<div>
|
||||
<tm-navbar :hideBack="false" hideHome title="选择部门"> </tm-navbar>
|
||||
</div>
|
||||
<div class="root">
|
||||
<div
|
||||
class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx] pb-[20rpx] overflow-y-auto"
|
||||
>
|
||||
<div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
|
||||
<tm-input
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
searchBgColor="#F9F9FD"
|
||||
focusColor="#F9F9FD"
|
||||
v-model="searchVal"
|
||||
></tm-input>
|
||||
<div
|
||||
v-if="crumbs.length"
|
||||
class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
|
||||
ref="crumbsContainer"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in crumbs"
|
||||
class="flex items-center text-[28rpx] leading-[48rpx] whitespace-nowrap"
|
||||
:class="[
|
||||
index === crumbsIndex ? 'text-[#747474]' : 'text-[#46299D]',
|
||||
index === 0 ? '' : 'ml-[12rpx]',
|
||||
]"
|
||||
@click="handleCrumbsClick(index)"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
v-if="index !== crumbs.length - 1"
|
||||
class="ml-[20rpx] flex items-center mb-[2rpx]"
|
||||
>
|
||||
<tm-icon
|
||||
name="tmicon-angle-right"
|
||||
:font-size="20"
|
||||
:color="index !== crumbs.length - 1 ? '#7A58DE' : '#C1B4EA'"
|
||||
></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
|
||||
@click="()=>allCheck(allCheckStatus)"
|
||||
>
|
||||
<div>
|
||||
<checkBox
|
||||
:disabled="currentCrumbs?.sons?.length === 0"
|
||||
:modelValue="allCheckStatus"
|
||||
></checkBox>
|
||||
</div>
|
||||
<div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
|
||||
全选
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentCrumbs?.sons?.length"
|
||||
v-for="item in currentCrumbs?.sons"
|
||||
class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
|
||||
>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div
|
||||
class="flex items-center"
|
||||
>
|
||||
<div>
|
||||
<checkBox
|
||||
:disabled="!item?.sons?.length"
|
||||
v-model="item.checkStatus"
|
||||
@change="(val) => checkItemChange(item, val)"
|
||||
></checkBox>
|
||||
</div>
|
||||
<div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
|
||||
{{ item.name }} （{{ getDepTotalMembers(item) }}）
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.sons?.length" class="flex items-center mr-[32rpx]">
|
||||
<div class="vDivider mr-[32rpx]"></div>
|
||||
<div @click="() => toNextLevel(item)" class="flex items-center">
|
||||
<div class="mr-[12rpx]">
|
||||
<tm-image
|
||||
:width="26"
|
||||
:height="26"
|
||||
:src="item.checkStatus !== 'checked' ? downDep : downDepDis"
|
||||
></tm-image>
|
||||
</div>
|
||||
<div
|
||||
class="text-[28rpx] leading-[54rpx] font-bold"
|
||||
:class="
|
||||
item.checkStatus !== 'checked'
|
||||
? 'text-[#46299D]'
|
||||
: 'text-[#C1B4EA]'
|
||||
"
|
||||
>
|
||||
下级
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentMembers.length"
|
||||
v-for="item in currentMembers"
|
||||
class="pl-[32rpx] pr-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
|
||||
>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div
|
||||
class="flex items-center"
|
||||
>
|
||||
<div>
|
||||
<checkBox
|
||||
:modelValue="membersCheckedKeys.filter(v=>v.ID === item.ID).length>0?'checked':'noChecked'"
|
||||
@change="(val) => checkMember(item, val)"
|
||||
></checkBox>
|
||||
</div>
|
||||
<div class="ml-[20rpx] flex items-center">
|
||||
<div class="userAvatar flex items-center justify-center">
|
||||
{{ item.nickName.slice(-2) }}
|
||||
</div>
|
||||
<div class="ml-[20rpx] flex flex-col items-center">
|
||||
<div class="text-[28rpx] font-bold" >{{ item.nickName }}</div>
|
||||
<div class="text-[20rpx] text-[#747474]" >{{ item.jobNum }}</div>
|
||||
</div>
|
||||
<tm-popover position="tc">
|
||||
<div class="ml-[20rpx] flex h-[68rpx] flex-wrap line-clamp-2 max-w-[342rpx]">
|
||||
<div
|
||||
v-for="post in item.positions"
|
||||
class="postTag truncate mb-[4rpx] mr-[14rpx] max-w-[164rpx]"
|
||||
>
|
||||
{{ post.name }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-slot:label>
|
||||
<div class="max-h-[250rpx] overflow-y-auto pt-[10rpx] pl-[18rpx] pr-[18rpx] pb-[12rpx]">
|
||||
<div
|
||||
v-for="post in item.positions"
|
||||
class="postTag truncate mb-[10rpx] "
|
||||
>
|
||||
{{ post.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tm-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="h-[162rpx] pl-[32rpx] pr-[32rpx] bg-[#FFFFFF]">
|
||||
<div class="mt-[14rpx] flex justify-between">
|
||||
<div class="flex flex-col">
|
||||
<div @click="openDrawer" class="flex items-center text-[28rpx] leading-[60rpx] text-[#000000] font-bold">
|
||||
<div>已选择：</div>
|
||||
<div>{{ totalMembers }}人</div>
|
||||
<div class="ml-[28rpx]">
|
||||
<tm-icon :fontSize="24" color="#46299D" name="tmicon-angle-up"></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[24rpx] leading-[24rpx] text-[#7A58DE] w-[280rpx] truncate ">
|
||||
<span v-for="item in allCheckedList" >
|
||||
{{ item.name }}({{ item.staffNum }})
|
||||
</span>
|
||||
<span v-for="(item,index) in membersCheckedKeys" >
|
||||
{{ item.nickName }}
|
||||
{{ index!== membersCheckedKeys.length-1?',':"" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnBox">
|
||||
<tm-button
|
||||
@click="handleConfirm"
|
||||
color="#46299D"
|
||||
:disabled="!allCheckedList.length"
|
||||
disabledColor="#E6E6E6"
|
||||
:margin="[0]"
|
||||
:shadow="0"
|
||||
:width="264"
|
||||
:height="76"
|
||||
size="large"
|
||||
label="确定"
|
||||
>
|
||||
</tm-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-drawer
|
||||
placement="bottom"
|
||||
v-model:show="showWin"
|
||||
:height="800"
|
||||
:hideHeader="true"
|
||||
:round="5"
|
||||
>
|
||||
<div class="flex flex-col w-full h-full pt-[36rpx] pl-[32rpx] pr-[32rpx] leading-[60rpx]" >
|
||||
<div class="text-[32rpx] font-bold flex items-center justify-between" >
|
||||
<div class="flex items-center ml-[10rpx]">
|
||||
<div>已选择部门数：</div>
|
||||
<div>{{ allCheckedList.length }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-[#7A58DE] mr-[10rpx]"
|
||||
@click="()=>showWin = false"
|
||||
>
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 pb-[20rpx] overflow-y-auto pt-[30rpx]" >
|
||||
<div
|
||||
v-for="(item,index) in allCheckedList"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div v-if="index ===0" class="divider" ></div>
|
||||
<div
|
||||
class="flex items-center justify-between mt-[36rpx] font-bold text-[#000000] leading-[54rpx] mb-[34rpx]"
|
||||
>
|
||||
<div class="text-[28rpx] ml-[10rpx]">{{ item.name }}（{{ item.staffNum }}）</div>
|
||||
<div class="diyBtn">
|
||||
<tm-button @click="()=>deleteNode(item)" :disabled="userDepIds.includes(item.ID)" :margin="[10]" :shadow="0" text size="small" :width="106" :height="50" outlined label="移除"></tm-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider" ></div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item,index) in membersCheckedKeys"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div v-if="index ===0 && allCheckedList.length==0" class="divider" ></div>
|
||||
<div
|
||||
class="flex items-center justify-between mt-[36rpx] font-bold text-[#000000] leading-[54rpx] mb-[34rpx]"
|
||||
>
|
||||
<div class="text-[28rpx] ml-[10rpx] flex">
|
||||
<div>
|
||||
{{ item.nickName }}({{ item.jobNum }})
|
||||
</div>
|
||||
<div class="ml-[20rpx] flex h-[68rpx] flex-wrap line-clamp-2 max-w-[342rpx]">
|
||||
<div
|
||||
v-for="post in item.positions"
|
||||
class="postTag truncate mb-[4rpx] mr-[14rpx] max-w-[164rpx]"
|
||||
>
|
||||
{{ post.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diyBtn">
|
||||
<tm-button @click="()=>deleteMember(item)" :margin="[10]" :shadow="0" text size="small" :width="106" :height="50" outlined label="移除"></tm-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider" ></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tm-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch, computed, onMounted,nextTick } from "vue";
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { useChatList } from "@/store/chatList/index.js";
|
||||
import { useAuth } from "@/store/auth";
|
||||
import { useTalkStore, useUserStore } from "@/store";
|
||||
import { useGroupTypeStore } from "@/store/groupType";
|
||||
import downDep from "@/static/image/chatList/downDep.png";
|
||||
import downDepDis from "@/static/image/chatList/downDepDis.png";
|
||||
import checkBox from "@/components/checkBox/index.vue";
|
||||
import lodash from 'lodash'
|
||||
|
||||
const {
|
||||
groupActiveIndex,
|
||||
getDepsTreeMy,
|
||||
depTreeMyList,
|
||||
crumbs,
|
||||
crumbsIndex,
|
||||
depCheckedKeys,
|
||||
getDepMembers,
|
||||
membersCheckedKeys,
|
||||
allChooseMembers,
|
||||
} = useGroupTypeStore();
|
||||
const userStore = useUserStore()
|
||||
|
||||
const searchVal = ref("");
|
||||
const crumbsContainer = ref(null);
|
||||
const showWin = ref(false);
|
||||
const currentMembers = ref([])
|
||||
|
||||
const getAllCheckedNodes = (node, checkedNodes = []) => {
|
||||
if (node.checkStatus === 'checked') {
|
||||
checkedNodes.push(node);
|
||||
}
|
||||
if (node.sons && Array.isArray(node.sons)) {
|
||||
node.sons.forEach(son => getAllCheckedNodes(son, checkedNodes));
|
||||
}
|
||||
return checkedNodes;
|
||||
};
|
||||
|
||||
const userDepIds = computed(() => {
|
||||
return userStore.deps.map(v=>v.dept_id);
|
||||
});
|
||||
|
||||
const calculateTotalStaffNum = (node) => {
|
||||
let total = node.staffNum || 0;
|
||||
if (node.sons && Array.isArray(node.sons)) {
|
||||
node.sons.forEach(son => {
|
||||
total += calculateTotalStaffNum(son);
|
||||
});
|
||||
}
|
||||
return total;
|
||||
};
|
||||
|
||||
const allCheckedList = computed(() => {
|
||||
const checkedNodes = [];
|
||||
depTreeMyList.value.forEach(node => getAllCheckedNodes(node, checkedNodes));
|
||||
console.log("checkedNodes", checkedNodes);
|
||||
|
||||
return checkedNodes;
|
||||
})
|
||||
|
||||
const currentCrumbs = computed(() => {
|
||||
if (crumbs.value[crumbsIndex.value] ) {
|
||||
if (searchVal.value && searchVal.value !== "") {
|
||||
let filterSons = crumbs.value[crumbsIndex.value].sons.filter((item) =>
|
||||
item.name.includes(searchVal.value)
|
||||
);
|
||||
return {
|
||||
...crumbs.value[crumbsIndex.value],
|
||||
sons: filterSons,
|
||||
};
|
||||
}
|
||||
console.log("allCheckedList", crumbs.value[crumbsIndex.value]);
|
||||
return crumbs.value[crumbsIndex.value];
|
||||
}
|
||||
return {}
|
||||
});
|
||||
|
||||
const getCurrentMembers = async (depItem) => {
|
||||
const res = await getDepMembers({
|
||||
departmentId:depItem.ID,
|
||||
status:'notactive'
|
||||
})
|
||||
if (res.status === 0) {
|
||||
currentMembers.value = res.data.data.length?res.data.data.map(v=>{
|
||||
return {
|
||||
...v,
|
||||
isMember:true,
|
||||
}
|
||||
}):[]
|
||||
}else{
|
||||
currentMembers.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const checkMember = (item, val) => {
|
||||
if (val === 'checked') {
|
||||
membersCheckedKeys.value.push(item)
|
||||
}else {
|
||||
membersCheckedKeys.value = membersCheckedKeys.value.filter(v=>v.ID !==item.ID)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => currentCrumbs.value, (newValue, oldValue) => {
|
||||
getCurrentMembers(newValue)
|
||||
})
|
||||
|
||||
const allCheckStatus = computed(() => {
|
||||
if (!currentCrumbs.value.sons) {
|
||||
return "noChecked";
|
||||
}
|
||||
const allChecked = currentCrumbs.value.sons.every((son) => son.checkStatus === "checked");
|
||||
const someChecked =currentCrumbs.value.sons.some(
|
||||
(son) =>
|
||||
son.checkStatus === "checked" || son.checkStatus === "halfChecked"
|
||||
);
|
||||
if (allChecked) {
|
||||
return "checked";
|
||||
} else if (someChecked) {
|
||||
return "halfChecked";
|
||||
} else {
|
||||
return "noChecked";
|
||||
}
|
||||
})
|
||||
|
||||
const findNodeById = (node, targetId) => {
|
||||
if (node.ID === targetId) {
|
||||
return node;
|
||||
}
|
||||
if (node.sons && Array.isArray(node.sons)) {
|
||||
for (const son of node.sons) {
|
||||
const found = findNodeById(son, targetId);
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const findParentNode = (node, targetId) => {
|
||||
if (!node.sons || !Array.isArray(node.sons)) return null;
|
||||
for (const son of node.sons) {
|
||||
if (son.ID === targetId) {
|
||||
return node;
|
||||
}
|
||||
const parent = findParentNode(son, targetId);
|
||||
if (parent) {
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 检查并更新父节点的状态
|
||||
const updateParentStatus = (node) => {
|
||||
const parent = findParentNode(depTreeMyList.value[0], node.ID);
|
||||
if (!parent) return;
|
||||
if (parent.checkStatus !== "checked"){
|
||||
const allChecked =
|
||||
parent.sons &&
|
||||
Array.isArray(parent.sons) &&
|
||||
parent.sons.every((son) => son.checkStatus === "checked");
|
||||
const someChecked =
|
||||
parent.sons &&
|
||||
Array.isArray(parent.sons) &&
|
||||
parent.sons.some(
|
||||
(son) =>
|
||||
son.checkStatus === "checked" || son.checkStatus === "halfChecked"
|
||||
);
|
||||
|
||||
if (allChecked) {
|
||||
parent.checkStatus = "halfChecked";
|
||||
} else if (someChecked) {
|
||||
parent.checkStatus = "halfChecked";
|
||||
} else {
|
||||
parent.checkStatus = "noChecked";
|
||||
}
|
||||
}
|
||||
|
||||
updateParentStatus(parent);
|
||||
};
|
||||
//根据子节点状态更新当前节点状态
|
||||
const updateNodeStatus = (node) => {
|
||||
if (!node.sons || !Array.isArray(node.sons)) return;
|
||||
const allChecked = node.sons.every(son => son.checkStatus === 'checked');
|
||||
const someChecked = node.sons.some(son => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked');
|
||||
|
||||
if (allChecked) {
|
||||
node.checkStatus = 'halfChecked';
|
||||
} else if (someChecked) {
|
||||
node.checkStatus = 'halfChecked';
|
||||
} else {
|
||||
node.checkStatus = 'noChecked';
|
||||
}
|
||||
};
|
||||
|
||||
// 更新当前节点及其所有子节点的状态
|
||||
const updateCheckStatus = (node, status) => {
|
||||
node.checkStatus = status;
|
||||
if (node.sons && Array.isArray(node.sons) && node.sons.length > 0) {
|
||||
node.sons.forEach((son) => updateCheckStatus(son, status));
|
||||
}
|
||||
};
|
||||
|
||||
const checkItemChange = (item, val) => {
|
||||
// 更新当前节点及其子节点的状态
|
||||
updateCheckStatus(item, val);
|
||||
|
||||
// 更新父节点的状态
|
||||
updateParentStatus(item);
|
||||
};
|
||||
|
||||
const deleteNode = (item) => {
|
||||
const treeNode = findNodeById(depTreeMyList.value[0], item.ID);
|
||||
if (!treeNode) return;
|
||||
treeNode.checkStatus = "noChecked";
|
||||
updateNodeStatus(treeNode);
|
||||
updateParentStatus(treeNode);
|
||||
};
|
||||
|
||||
const deleteMember = (item) => {
|
||||
membersCheckedKeys.value = membersCheckedKeys.value.filter(v=>v.ID !== item.ID)
|
||||
}
|
||||
|
||||
const toNextLevel = async (item) => {
|
||||
if (item.checkStatus !== "checked") {
|
||||
crumbs.value.push(item);
|
||||
crumbsIndex.value++;
|
||||
await nextTick();
|
||||
if (crumbsContainer.value) {
|
||||
crumbsContainer.value.scrollLeft = crumbsContainer.value.scrollWidth;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCrumbsClick = (index) => {
|
||||
crumbsIndex.value = index;
|
||||
crumbs.value = crumbs.value.slice(0, index + 1);
|
||||
};
|
||||
|
||||
const allCheck = (status) => {
|
||||
let statusT = 'noChecked';
|
||||
if (status === "checked") {
|
||||
statusT = "noChecked";
|
||||
} else {
|
||||
statusT = "checked";
|
||||
}
|
||||
currentCrumbs.value.sons.forEach((item) => {
|
||||
const itemT = findNodeById(depTreeMyList.value[0], item.ID)
|
||||
if (!itemT) return;
|
||||
checkItemChange(itemT, statusT);
|
||||
});
|
||||
};
|
||||
|
||||
const openDrawer = () => {
|
||||
showWin.value = true;
|
||||
if (allCheckedList.length>0) {
|
||||
}
|
||||
};
|
||||
|
||||
// watch(() => depTreeMyList.value, (newValue, oldValue) => {
|
||||
// console.log("depTreeMyList", newValue);
|
||||
|
||||
// }, { deep: true });
|
||||
|
||||
// watch(() => searchVal.value, (newValue, oldValue) => {
|
||||
// console.log("searchVal", newValue);
|
||||
// });
|
||||
|
||||
|
||||
const getDepTotalMembers = (item) => {
|
||||
const rootNode = depTreeMyList.value[0];
|
||||
const targetNode = findNodeById(rootNode, item.ID);
|
||||
if (targetNode) {
|
||||
return calculateTotalStaffNum(targetNode);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
const totalMembers = computed(() => {
|
||||
const depMembers = allCheckedList.value.reduce((sum, item) => sum + item.staffNum, 0);
|
||||
const memberCount = membersCheckedKeys.value.length;
|
||||
return depMembers + memberCount;
|
||||
})
|
||||
|
||||
const handleConfirm = async () => {
|
||||
uni.showLoading()
|
||||
const listT = membersCheckedKeys.value.map(v=>v)
|
||||
const res = await getDepMembers({
|
||||
departmentIds:allCheckedList.value.map(v=>v.ID),
|
||||
status:'notactive',
|
||||
})
|
||||
if (res.status == 0 && res.data?.data?.length) {
|
||||
res.data?.data.forEach(v=>{
|
||||
listT.push(v)
|
||||
})
|
||||
}
|
||||
allChooseMembers.value = listT
|
||||
uni.hideLoading()
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
const initCheckedKeys = () => {
|
||||
depCheckedKeys.value.forEach((item) => {
|
||||
const node = findNodeById(depTreeMyList.value[0], item.ID);
|
||||
if (node) {
|
||||
node.checkStatus = "checked";
|
||||
updateParentStatus(node);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
crumbsIndex.value = 0;
|
||||
await getDepsTreeMy();
|
||||
crumbs.value = depTreeMyList.value.length ? [depTreeMyList.value[0]] : [];
|
||||
initCheckedKeys();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
uni-page-body,
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
.outer-layer {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background-image: url("@/static/image/clockIn/z3280@3x.png");
|
||||
background-size: cover;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.root {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-top: 18rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background-color: #707070;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.vDivider {
|
||||
width: 1rpx;
|
||||
height: 48rpx;
|
||||
background-color: #b4b4b4;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.groupCard {
|
||||
height: 272rpx;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 12rpx;
|
||||
&.firstPanel {
|
||||
background-image: url("@/static/image/chatList/zu6033@2x.png");
|
||||
}
|
||||
&.secondPanel {
|
||||
background-image: url("@/static/image/chatList/zu6031@2x.png");
|
||||
margin-top: 28rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
&.thirdPanel {
|
||||
background-image: url("@/static/image/chatList/zu6032@2x.png");
|
||||
}
|
||||
&.activePanel {
|
||||
box-shadow: 0 0 0 3rpx #46299d;
|
||||
}
|
||||
}
|
||||
.btnBox {
|
||||
:deep(uni-button[disabled="true"]) {
|
||||
color: #bebebe !important;
|
||||
}
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, and Opera */
|
||||
}
|
||||
.diyBtn {
|
||||
:deep(uni-button) {
|
||||
color: #191919 !important;
|
||||
border: 1rpx solid #D6D6D8 !important;
|
||||
background-color: #FFFFFF !important;
|
||||
&[disabled="true"] {
|
||||
color: #BEBEBE !important;
|
||||
border: 1rpx solid #E6E6E6 !important;
|
||||
background-color: #E6E6E6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.userAvatar{
|
||||
background: linear-gradient(#674BBC, #46299D);
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.postTag{
|
||||
background-color: #EEE9F8;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-size: 20rpx;
|
||||
padding: 0 12rpx 0 12rpx;
|
||||
color: #46299D;
|
||||
}
|
||||
</style>
|
||||
@ -47,7 +47,7 @@
|
||||
群类型
|
||||
</div>
|
||||
<div @click="chooseGroupType" class="left-box" >
|
||||
<div class="text-[#B4B4B4] text-[28rpx]" >
|
||||
<div class="text-[#B4B4B4] text-[28rpx] font-bold" >
|
||||
<span v-if="groupActiveIndex ===-1">请选择群类型</span>
|
||||
<span v-else-if="groupActiveIndex ===0">普通群</span>
|
||||
<span v-else-if="groupActiveIndex ===1">部门群</span>
|
||||
@ -76,6 +76,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="groupActiveIndex===0" class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]" >
|
||||
<div class="flex items-center justify-between" >
|
||||
<div class="input-item">
|
||||
群成员
|
||||
</div>
|
||||
<div @click="chooseMembers" class="left-box" >
|
||||
<div class="ml-[32rpx] flex items-center" >
|
||||
<div v-if="!groupAdmins.length" class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]">全部({{ 0 }})</div>
|
||||
<tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="groupAdmins.length" class="mt-[32rpx]" >
|
||||
<div
|
||||
v-for="(item,index) in groupAdmins"
|
||||
class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
|
||||
:class="[
|
||||
index !==0 ? 'mt-[10rpx]':'',
|
||||
depsNoExpanded&&index>4 ? 'hidden':''
|
||||
]"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center" >
|
||||
<div v-if="groupAdmins.length>5" @click="depsNoExpanded = !depsNoExpanded" class="w-[100rpx]">
|
||||
{{ depsNoExpanded? '展开':'收起' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="groupActiveIndex===1" class="input-group w-full flex flex-col mt-[20rpx] leading-[40rpx]" >
|
||||
<div class="flex items-center justify-between" >
|
||||
<div class="input-item">
|
||||
@ -179,6 +211,12 @@ const chooseGroupAdmin = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const chooseMembers = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chooseMembers/index'
|
||||
})
|
||||
}
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (groupActiveIndex.value === 0) {
|
||||
|
||||
@ -276,7 +314,7 @@ page {
|
||||
margin-left: 84rpx;
|
||||
line-height: 40rpx;
|
||||
width: 404rpx;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
.left-box {
|
||||
display: flex;
|
||||
|
||||
@ -5,7 +5,7 @@ import { userInfoApi } from "@/api/user";
|
||||
import {ref} from 'vue'
|
||||
export const useAuth = createGlobalState(() => {
|
||||
// const token = useStorage('token', '', uniStorage)
|
||||
const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d8529c7c268c1251c3477bff5c051043bf9804c4f7096c5178cc01261bbedf04108b969333baf0bd5226c426de3591fc50b70691f2a5e275fa67ea3a7301df448929c13e4b71bf2182b6bfc270e21c142aa693844a0a175637f907e4438786a6e5e50')
|
||||
const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d8529c7c268c1251c3477bff5c051043bf9803f725aa97cbe369f1902315052eb4ee0e925840addd5e7796254066f2f9eb3f99f69f3d0db26bd940f47a18fa7b6182c6c7de87ee1a00936b7c90024c6085c65ffc3b8d20562eea48ff0b303a7795c67')
|
||||
const refreshToken = useStorage('refreshToken', '', uniStorage)
|
||||
const userInfo = useStorage('userInfo', {}, uniStorage)
|
||||
const leaderList = useStorage('leaderList', [], uniStorage)
|
||||
|
||||
@ -5,7 +5,7 @@ import lodash from 'lodash'
|
||||
import {ref} from 'vue'
|
||||
import {createGlobalState,useStorage} from '@vueuse/core'
|
||||
import {uniStorage} from "@/utils/uniStorage.js"
|
||||
import {departmentV2TreeMy,departmentV2AllPosition,groupCreateDept} from '@/api/deps/index.js'
|
||||
import {departmentV2TreeMy,departmentV2AllPosition,groupCreateDept,departmentV2TreeAll,userV2List} from '@/api/deps/index.js'
|
||||
|
||||
export const useGroupTypeStore = createGlobalState(() => {
|
||||
const groupName = ref('')
|
||||
@ -16,11 +16,11 @@ export const useGroupTypeStore = createGlobalState(() => {
|
||||
const crumbsIndex = ref(0)
|
||||
const depCheckedKeys = ref([]) // 选中的部门keys
|
||||
const groupAdmins = ref([]) // 选中的管理员
|
||||
|
||||
// const halfCheckedKeys = ref([])
|
||||
const membersCheckedKeys = ref([]) // 选中的人员keys
|
||||
const allChooseMembers = ref([])
|
||||
|
||||
const getDepsTreeMy= async()=>{
|
||||
const res = await departmentV2TreeMy()
|
||||
const res = await departmentV2TreeAll()
|
||||
if(res.status===0){
|
||||
depTreeMyList.value = res.data.nodes
|
||||
}
|
||||
@ -33,6 +33,11 @@ export const useGroupTypeStore = createGlobalState(() => {
|
||||
}
|
||||
}
|
||||
|
||||
const getDepMembers= async(param)=>{
|
||||
const res = await userV2List(param)
|
||||
return res;
|
||||
}
|
||||
|
||||
const resetGroupInfo = () => {
|
||||
groupName.value = '';
|
||||
groupActiveIndex.value = -1;
|
||||
@ -77,5 +82,8 @@ export const useGroupTypeStore = createGlobalState(() => {
|
||||
groupAdmins,
|
||||
resetGroupInfo,
|
||||
createDepGroup,
|
||||
getDepMembers,
|
||||
membersCheckedKeys,
|
||||
allChooseMembers,
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user