feat:增加项目审核状态

This commit is contained in:
lixg
2022-11-22 20:43:02 +08:00
parent ed3d2f4627
commit 66fc7c8c13
10 changed files with 600 additions and 540 deletions

View File

@@ -74,16 +74,16 @@
class="treeMain"
:style="{ height: screenHeight - 400 + 'px' }"
dropdownClassName="changetreedropdownboe"
defaultExpandAll
default-expand-all
:dropdown-style="{
maxHeight: '600px',
}"
placeholder="BOE组织树"
allow-clear
tree-default-expand-all
:tree-data="treeData"
@select="departmentSelect"
v-model:selectedKeys="selectedKeys"
v-model:expandedKeys="openKeys"
>
<template #suffixIcon></template>
</a-tree>
@@ -101,6 +101,7 @@
columnWidth: 20,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
type: 'radio',
}"
/>
<div class="pa">
@@ -127,70 +128,22 @@
<div class="right">
<div class="onerow">
<div class="onleft">
<div class="already">已选</div>
<!-- <div class="count">6</div>
<div class="peo"></div> -->
</div>
<div class="clbox" @click="deleteAll">
<div class="colose"></div>
<span class="allclear">全部清除</span>
</div>
</div>
<div class="line"></div>
<div class="tit">快速选人</div>
<div style="position: relative; min-height: 180px">
<div style="height: 160px" class="selectedsBox" id="selectedsBox">
<div class="selecteds" id="selecteds">
<!-- 遍历生成 -->
<div
style="
display: flex;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
"
>
<div class="already">当前归属</div>
<div class="chose" v-for="item in choosepeople" :key="item.key">
<div>{{ item.name }}</div>
<div class="ch" @click="deleteChoosePeople(item)"></div>
</div>
</div>
</div>
<div
class="chose"
style="
display: flex;
justify-content: flex-end;
margin-right: 20px;
font-size: 12px;
font-weight: 500;
color: #409eff;
line-height: 22px;
"
v-if="showMore"
@click="morePeopleShow"
>
<div>
查看更多
<img
style="width: 10px; height: 12px; margin-top: -2px"
src="../../assets/images/projectadd/go.png"
/>
</div>
</div>
<div
class="chose"
style="
display: flex;
justify-content: flex-end;
margin-right: 20px;
font-size: 12px;
font-weight: 500;
color: #409eff;
line-height: 22px;
"
v-if="showHidden"
@click="morePeopleHidden"
>
<div>
收起
<img
style="width: 10px; height: 12px; margin-top: -2px"
src="../../assets/images/projectadd/pickUp.png"
/>
</div>
<div class="clbox">
<span class="allclear">转移归属权</span>
</div>
</div>
</div>
@@ -238,6 +191,7 @@
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
// import { message } from "ant-design-vue";
import * as api from "../../api/index1";
export default {
name: "ProjOwnerShip",
props: {
@@ -271,120 +225,148 @@ export default {
nameadd: "",
nameaddd: "",
com: "",
openKeys: [2, 13, 32],
//组织树
treeData: [
{
key: 1,
title: "京东方",
value: "京东方",
children: [
{
key: 2,
title: "产研部",
value: "产研部",
children: [
{
key: 3,
title: "产品部",
value: "产品部",
},
{
key: 4,
title: "研究部",
value: "研究部",
},
{
key: 5,
title: "研究部2",
value: "研究部2",
},
{
key: 6,
title: "研究3",
value: "研究3",
},
{
key: 7,
title: "研究4",
value: "研究4",
},
{
key: 8,
title: "研究部5",
value: "研究部5",
},
{
key: 9,
title: "研究部6",
value: "研究部6",
},
{
key: 10,
title: "研究部7",
value: "研究部7",
},
{
key: 11,
title: "研究部8",
value: "研究部8",
},
{
key: 12,
title: "研究部9",
value: "研究部9",
},
],
},
{
key: 13,
title: "二级标题",
value: "二级标题",
children: [
{
key: 14,
title: "三级标题",
value: "三级标题",
children: [
{
key: 15,
title: "四级标题",
value: "四级标题",
children: [
{
key: 16,
title: "五级标题",
value: "五级标题",
children: [
{
key: 17,
title: "六级标题",
value: "六级标题",
children: [
{
key: 18,
title: "七级标题",
value: "七级标题",
children: [
{
key: 19,
title: "八级标题",
value: "八级标题",
children: [
{
key: 20,
title: "九级标题",
value: "九级标题",
children: [
{
key: 21,
title: "十级标题",
value: "十级标题",
children: [
{
key: 22,
title: "十一级标题",
value: "十一级标题",
children: [
{
key: 23,
title: "十二级标题",
value: "十二级标题",
children: [
{
key: 24,
title:
"十三级标题十三级标题十三级标题十三级标题",
value: "十三级标题",
children: [
{
key: 25,
title:
"十四级标题",
value:
"十四级标题",
children: [
{
key: 26,
title:
"十五级标题",
value:
"十五级标题",
children: [
{
key: 27,
title:
"十六级标题",
value:
@@ -392,6 +374,7 @@ export default {
children:
[
{
key: 28,
title:
"十七级标题",
value:
@@ -399,6 +382,7 @@ export default {
children:
[
{
key: 29,
title:
"十八级标题",
value:
@@ -406,6 +390,7 @@ export default {
children:
[
{
key: 30,
title:
"十九级标题",
value:
@@ -413,6 +398,7 @@ export default {
children:
[
{
key: 31,
title:
"二十级标题二十级标题",
value:
@@ -455,14 +441,17 @@ export default {
],
},
{
key: 32,
title: "人力资源部",
value: "人力资源部",
children: [
{
key: 33,
title: "人事部",
value: "人事部",
},
{
key: 34,
title: "行政部",
value: "行政部",
},
@@ -602,6 +591,26 @@ export default {
selectedRowKeys: [], //表格选中的key
//快速选人-------------------------------------
});
//获取组织树
const getOrgTree = () => {
let obj = {
keyword: "",
pageNo: 1,
pageSize: 10,
};
api
.getOrgTree(obj)
.then((res) => {
if (res.status === 200) {
console.log("获取组织树成功", res);
}
})
.catch((err) => {
console.log("获取组织树失败", err);
});
};
const closeDrawer = () => {
state.activeKey = "1";
ctx.emit("update:ProjOwnervisible", false);
@@ -625,6 +634,8 @@ export default {
window.addEventListener("resize", getClientHeight, false);
// window.addEventListener("resize", getClientHeightSelecteds, false);
// judgeUrl();
getOrgTree();
});
onUnmounted(() => {
window.removeEventListener("resize", getClientHeight, false);
@@ -665,31 +676,50 @@ export default {
//根据右侧快速选人高度,判断是否显示更多
const selectedsHeight = () => {
let resize = elementResizeDetectorMaker();
resize.listenTo(document.getElementById('ProjOwnership').querySelector("#selecteds"), function (ele) {
console.log("ele", ele.offsetHeight);
if (ele.offsetHeight > 160 && !state.showHidden) {
state.showMore = true;
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.overflow = "hidden";
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.height = "160px";
} else if (ele.offsetHeight < 160) {
state.showMore = false;
state.showHidden = false;
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.overflow = "hidden";
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.height = "160px";
resize.listenTo(
document.getElementById("ProjOwnership").querySelector("#selecteds"),
function (ele) {
console.log("ele", ele.offsetHeight);
if (ele.offsetHeight > 160 && !state.showHidden) {
state.showMore = true;
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.overflow = "hidden";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.height = "160px";
} else if (ele.offsetHeight < 160) {
state.showMore = false;
state.showHidden = false;
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.overflow = "hidden";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.height = "160px";
}
}
});
);
};
const morePeopleShow = () => {
state.showMore = false;
state.showHidden = true;
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.overflow = "";
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.height = "";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.overflow = "";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.height = "";
};
const morePeopleHidden = () => {
state.showMore = true;
state.showHidden = false;
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.overflow = "hidden";
document.getElementById('ProjOwnership').querySelector("#selectedsBox").style.height = "160px";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.overflow = "hidden";
document
.getElementById("ProjOwnership")
.querySelector("#selectedsBox").style.height = "160px";
};
// 结束 快速选人------------------------------------------------------------------
@@ -704,6 +734,10 @@ export default {
state.selectedRowKeys = []; //表格选中的key
//快速选人-------------------------------------
};
const expandTree = (e) => {
console.log("展开", e);
};
return {
...toRefs(state),
afterVisibleChange,
@@ -717,6 +751,7 @@ export default {
morePeopleHidden,
deleteAll,
expandTree,
};
},
};
@@ -1164,7 +1199,7 @@ export default {
}
}
.right {
width: 320px;
width: 340px;
flex-shrink: 0;
overflow-y: auto;
.onerow {
@@ -1176,11 +1211,15 @@ export default {
.onleft {
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-left: 32px;
.already {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 32px;
white-space: nowrap;
// margin-bottom: 20px;
}
@@ -1194,9 +1233,35 @@ export default {
font-size: 16px;
font-weight: 500;
}
.chose {
// width: 64px;
padding-left: 10px;
padding-right: 10px;
height: 24px;
// margin-top: 25px;
// margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
flex-shrink: 0;
.ch {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
}
}
}
.clbox {
margin-left: 30px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
@@ -1248,30 +1313,6 @@ export default {
margin-left: 32px;
min-height: 100px;
// overflow: hidden;
.chose {
// width: 64px;
padding-left: 10px;
padding-right: 10px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.ch {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
}
}
}
}
}