325 lines
8.3 KiB
Vue
325 lines
8.3 KiB
Vue
<!-- 选择人员组件 非弹窗
|
|
@desc 多选
|
|
-->
|
|
<template>
|
|
<view :style="{ marginTop: tarbarHeight }">
|
|
<view style="padding-bottom: 160rpx">
|
|
<u-collapse>
|
|
<!-- 手风琴headImageUr1 -->
|
|
<u-collapse-item
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
:title="item.o_OrganName"
|
|
class="department"
|
|
:name="index"
|
|
>
|
|
<u-icon
|
|
name="star-fill"
|
|
size="20"
|
|
slot="icon"
|
|
:color="color"
|
|
class="el-icon-star-on star"
|
|
@click.native="selectAll(item, index)"
|
|
:class="{ active: item.active }"
|
|
></u-icon>
|
|
<u-list :height="'auto'">
|
|
<u-list-item
|
|
v-for="(elItem, elIndex) in item.personList"
|
|
:key="elIndex"
|
|
>
|
|
<u-cell
|
|
:title="elItem.p_PersonName + ' ' + elItem.p_Telphone"
|
|
@click="selectPerson(elItem)"
|
|
>
|
|
<base-avatar
|
|
slot="icon"
|
|
shape="square"
|
|
size="35"
|
|
:text="
|
|
elItem.p_PersonName ? elItem.p_PersonName.slice(-2) : ''
|
|
"
|
|
bg-color="#3c9cff"
|
|
color="#ffffff"
|
|
font-size="10"
|
|
:src="elItem.headImageUrl"
|
|
customStyle="margin: -3px 5px -3px 0"
|
|
></base-avatar>
|
|
<u-icon
|
|
name="checkbox-mark"
|
|
slot="right-icon"
|
|
size="20"
|
|
:color="color"
|
|
class="el-icon-star-on star"
|
|
:class="{ active: elItem.active }"
|
|
></u-icon>
|
|
</u-cell>
|
|
</u-list-item>
|
|
</u-list>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
<view class="bottomPage">
|
|
<view style="width: 58%; font-weight: 600"
|
|
>已选 {{ selectedDataList.length }} 人</view
|
|
>
|
|
<u-button
|
|
text="确认"
|
|
type="primary"
|
|
size="normal"
|
|
style="width: 35%"
|
|
@click="personConfirmClick"
|
|
></u-button>
|
|
</view>
|
|
<base-tarbar ref="baseTarbar" :pageTitle="'选择人员'"></base-tarbar>
|
|
<u-loading-page :loading="personLoading"></u-loading-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import baseAvatar from "@/components/baseAvatar/index.vue";
|
|
import { PersonList, GetOrganTree } from "@/api/system/basePerson";
|
|
import baseTarbar from "@/components/baseTarbar/index.vue";
|
|
import config from "@/config";
|
|
import { getUserInfo } from "@/utils/auth";
|
|
export default {
|
|
components: {
|
|
baseAvatar,
|
|
baseTarbar,
|
|
},
|
|
onReady() {
|
|
this.$refs.baseTarbar.currentEnvironment();
|
|
if (this.$refs.baseTarbar.isOther) {
|
|
this.tarbarHeight = "88rpx";
|
|
}
|
|
},
|
|
watch: {
|
|
selectedDataList: {
|
|
deep: true, //深度监听设置为 true
|
|
handler: function (newV, oldV) {
|
|
this.dataList.forEach((el) => {
|
|
let personNum = 0;
|
|
el.personList.forEach((personEl) => {
|
|
if (personEl.active) {
|
|
personNum = personNum + 1;
|
|
}
|
|
});
|
|
if (personNum == 0) {
|
|
el.active = false;
|
|
} else {
|
|
el.active = true;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
dataList: {
|
|
deep: true, //深度监听设置为 true
|
|
handler: function (newV, oldV) {
|
|
let selectedDataList = [];
|
|
newV.forEach((el) => {
|
|
el.personList.forEach((item) => {
|
|
if (item.active) {
|
|
selectedDataList.push(item);
|
|
}
|
|
});
|
|
});
|
|
this.selectedDataList = selectedDataList;
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
dataList: [],
|
|
selectedDataList: [],
|
|
personLoading: false,
|
|
color: "f0f0f0",
|
|
configData: {},
|
|
tarbarHeight:"",
|
|
};
|
|
},
|
|
mounted() {
|
|
this.openDialog();
|
|
},
|
|
methods: {
|
|
// 打开弹窗
|
|
openDialog(selectedDataList = [], type) {
|
|
this.configData = config;
|
|
this.selectedDataList = [];
|
|
this.getMenuData(selectedDataList);
|
|
},
|
|
// 人员确定
|
|
personConfirmClick() {
|
|
this.$store.commit("SET_SELECTSDATA", this.selectedDataList);
|
|
uni.navigateBack({
|
|
delta: 1, //* 返回上一页
|
|
});
|
|
},
|
|
closePersonClick() {
|
|
uni.navigateBack({
|
|
delta: 1, //* 返回上一页
|
|
});
|
|
},
|
|
// 获得组织图
|
|
async getMenuData(selectedDataList) {
|
|
this.personLoading = true;
|
|
setTimeout(() => {
|
|
this.personLoading = false;
|
|
}, 5000);
|
|
let params = {
|
|
CompanyID: getUserInfo().companyID,
|
|
};
|
|
|
|
let res = await GetOrganTree(params);
|
|
let dataList = JSON.parse(res.data[0]);
|
|
|
|
let departmentList = [];
|
|
|
|
function setDepartmentList(data) {
|
|
data.forEach((item) => {
|
|
let arr = {
|
|
o_OrganName: item.label,
|
|
personList: [],
|
|
active: false,
|
|
};
|
|
departmentList.push(arr);
|
|
if (item.children && item.children.length > 0) {
|
|
setDepartmentList(item.children);
|
|
}
|
|
});
|
|
}
|
|
setDepartmentList(dataList);
|
|
this.getPersonList(departmentList, selectedDataList);
|
|
this.personLoading = false
|
|
},
|
|
// 获得人员列表
|
|
async getPersonList(departmentList, selectedDataList) {
|
|
let params = {
|
|
page: "1",
|
|
limit: "999",
|
|
departmentID: "",
|
|
};
|
|
let res = await PersonList(params);
|
|
if (res.code === 1) {
|
|
departmentList.forEach((el) => {
|
|
res.data[1].forEach((item) => {
|
|
if (el.o_OrganName == item.o_OrganName) {
|
|
let personArr = {
|
|
o_OrganName: item.o_OrganName,
|
|
p_PersonName: item.p_PersonName,
|
|
p_PersonID: item.p_PersonID,
|
|
p_Telphone: item.p_Telphone,
|
|
headImageUrl: item.headImageUrl
|
|
? this.configData.baseUrl +
|
|
String(item.headImageUrl).split("/wwwroot")[1]
|
|
: "",
|
|
active: false,
|
|
};
|
|
el.personList.push(personArr);
|
|
}
|
|
});
|
|
});
|
|
this.dataList = departmentList;
|
|
this.dataList.forEach((el) => {
|
|
el.personList.forEach((elItem) => {
|
|
selectedDataList.forEach((item) => {
|
|
if (item.p_PersonID == elItem.p_PersonID) {
|
|
elItem.active = true;
|
|
this.selectedDataList.push(elItem);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
this.personLoading = false;
|
|
}
|
|
},
|
|
selectPerson(val) {
|
|
let personActive = false;
|
|
val.active = !val.active;
|
|
},
|
|
// 全选
|
|
selectAll(item) {
|
|
item.active = !item.active;
|
|
item.personList.forEach((el) => {
|
|
el.active = item.active;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$activeColor: var(--bg-color, "#00aaff");
|
|
|
|
::v-deep .u-collapse-item__content__text {
|
|
padding: 0;
|
|
}
|
|
::v-deep .u-list-item.u-list-item- .u-cell .u-line {
|
|
border-bottom: 0 solid rgb(214, 215, 217) !important;
|
|
}
|
|
.bottomPage {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 20rpx 30rpx 30rpx 30rpx;
|
|
background-color: #fff;
|
|
margin-top: 15rpx;
|
|
display: flex;
|
|
border-top: 8rpx solid #f1f1f1;
|
|
align-items: center;
|
|
}
|
|
.dataBox {
|
|
padding: 10rpx 0;
|
|
border-bottom: 2rpx solid #ccc;
|
|
min-height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.personBox {
|
|
border-radius: 6rpx;
|
|
text-align: center;
|
|
background-color: #f0f0f0;
|
|
color: #817582;
|
|
padding: 20rpx 0;
|
|
cursor: pointer;
|
|
min-width: 200rpx;
|
|
|
|
.name {
|
|
}
|
|
|
|
.phone {
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.personBox {
|
|
margin-right: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.personBox.active {
|
|
color: #fff;
|
|
background-color: #3c9cff;
|
|
}
|
|
|
|
.department {
|
|
.el-icon-star-on {
|
|
color: #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.el-icon-star-on.active {
|
|
color: #3c9cff;
|
|
}
|
|
|
|
.personItem {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
page {
|
|
background: #fff;
|
|
}
|
|
</style> |