You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1364 lines
35 KiB
1364 lines
35 KiB
<template>
|
|
<div class="m-select_staff" v-show="!hidden">
|
|
<div id="wrap" class="wrap a-fade-in-up">
|
|
<div class="title">
|
|
<div class="row" v-show="currPanel == 'agency'">
|
|
<div class="title-ico f-fl a-fade-in" @click="cancel">
|
|
<img
|
|
class="title-ico-close"
|
|
src="@/assets/img/project/select-staff/close.png"
|
|
/>
|
|
</div>
|
|
<div class="title-btn a-fade-in f-fr" @click="confirm">确定</div>
|
|
</div>
|
|
|
|
<div class="row" v-show="currPanel == 'staff'">
|
|
<div class="title-ico f-fl a-fade-in-left" @click="shiftAgencyPanel">
|
|
<img
|
|
class="title-ico-back"
|
|
src="@/assets/img/project/select-staff/arrow3-left.png"
|
|
/>
|
|
</div>
|
|
<div class="title-btn a-fade-in f-fr" @click="confirmStaff">选中</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrap2 a-fade-in-right" v-show="currPanel == 'agency'">
|
|
<div class="menu-title" v-if="parentAgencyList.length > 0">
|
|
上级组织
|
|
</div>
|
|
<div
|
|
class="menu"
|
|
@click="shiftStaffPanel(item.agencyId)"
|
|
v-for="item in parentAgencyList"
|
|
:key="item.agencyId"
|
|
>
|
|
<div class="name f-fl">{{ item.agencyName }}</div>
|
|
|
|
<img
|
|
class="ico-go f-fr"
|
|
src="@/assets/img/project/select-staff/arrow-right.png"
|
|
/>
|
|
<div v-if="item.selectedTotal" class="num f-fr">
|
|
(已选{{ item.selectedTotal }}人)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-title">我所在的</div>
|
|
<div class="menu" @click="shiftStaffPanel(agency.agencyId)">
|
|
<div class="name f-fl">{{ agency.agencyName }}</div>
|
|
|
|
<img
|
|
class="ico-go f-fr"
|
|
src="@/assets/img/project/select-staff/arrow-right.png"
|
|
/>
|
|
<div v-if="agency.selectedTotal" class="num f-fr">
|
|
(已选{{ agency.selectedTotal }}人)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-title" v-if="subAgencyList.length > 0">下级组织</div>
|
|
<div
|
|
class="menu"
|
|
:class="'z-retract-' + item.retract"
|
|
v-show="!item.hidden"
|
|
@click="shiftStaffPanel(item.agencyId)"
|
|
v-for="(item, index) in subAgencyList"
|
|
:key="item.agencyId"
|
|
>
|
|
<img
|
|
mode="aspectFit"
|
|
@click.stop="shiftUnfold(index)"
|
|
v-if="item.sonIds.length > 0"
|
|
class="ico-fold f-fl"
|
|
:class="!item.folded ? 'z-unfold' : ''"
|
|
src="@/assets/img/project/select-staff/select.png"
|
|
/>
|
|
<div class="name f-fl">{{ item.agencyName }}</div>
|
|
|
|
<img
|
|
class="ico-go f-fr"
|
|
src="@/assets/img/project/select-staff/arrow-right.png"
|
|
/>
|
|
<div v-if="item.selectedTotal" class="num f-fr">
|
|
(已选{{ item.selectedTotal }}人)
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="agencyLoading" class="m-hint">加载中……</div>
|
|
</div>
|
|
|
|
<div class="wrap2 a-fade-in-right" v-show="currPanel == 'staff'">
|
|
<div v-if="staffLoading" class="m-hint">加载中……</div>
|
|
<div
|
|
v-else-if="
|
|
staffData.agencyStaffList.length == 0 &&
|
|
staffData.gridList.length == 0 &&
|
|
staffData.departmentList.length == 0
|
|
"
|
|
class="m-hint"
|
|
>
|
|
暂无可选人员
|
|
</div>
|
|
|
|
<div v-show="!staffLoading && staffData.agencyStaffList.length != 0">
|
|
<div class="list-title z-retract-1">
|
|
<span>组织工作人员</span>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
class="item z-retract-1"
|
|
:key="'agency' + item.staffId"
|
|
v-for="(item, index) in staffData.agencyStaffList"
|
|
@click="selectAgencyStaff(index)"
|
|
>
|
|
<div class="item-wrap">
|
|
<div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<img
|
|
class="f-fl avatar"
|
|
v-if="item.gender == 1"
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
|
|
/>
|
|
<img
|
|
class="f-fl avatar"
|
|
v-else
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
|
|
/>
|
|
<div class="f-fl name">
|
|
{{ item.staffName }}
|
|
<span v-if="item.roleName" class="z-stress">{{
|
|
item.roleName
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-show="!staffLoading && staffData.departmentList.length != 0"
|
|
class="list"
|
|
>
|
|
<div class="list-title z-retract-1">
|
|
<div
|
|
class="f-fl ico"
|
|
:class="staffData.departmentSelected ? 'z-on' : ''"
|
|
@click.stop="shiftSelectAllDepartment"
|
|
>
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<span>部门</span>
|
|
</div>
|
|
<div
|
|
:key="department.departmentName"
|
|
v-for="(department, departmentIndex) in staffData.departmentList"
|
|
>
|
|
<div
|
|
class="list-title z-retract-2"
|
|
@click="shiftDepartmentUnfold(departmentIndex)"
|
|
>
|
|
<div
|
|
class="f-fl ico"
|
|
:class="department.selected ? 'z-on' : ''"
|
|
@click.stop="shiftSelectDepartment(departmentIndex)"
|
|
>
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<span>{{ department.departmentName }}</span>
|
|
<img
|
|
class="f-fr ico-go"
|
|
:class="!department.folded ? 'z-unfold' : ''"
|
|
src="@/assets/img/project/select-staff/select.png"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="item z-retract-3"
|
|
v-show="!department.folded"
|
|
:key="department.departmentId + item.staffId"
|
|
v-for="(item, index) in department.departmentStaffList"
|
|
@click="selectDepartmentStaff(departmentIndex, index)"
|
|
>
|
|
<div class="item-wrap">
|
|
<div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
|
|
<img
|
|
mode="widthFix"
|
|
src="@/assets/img/project/select-staff/selected2.png"
|
|
/>
|
|
</div>
|
|
|
|
<img
|
|
class="f-fl avatar"
|
|
v-if="item.gender == 1"
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
|
|
/>
|
|
<img
|
|
class="f-fl avatar"
|
|
v-else
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
|
|
/>
|
|
<div class="f-fl name">
|
|
{{ item.staffName }}
|
|
<span v-if="item.roleName" class="z-stress">{{
|
|
item.roleName
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-show="!staffLoading && staffData.gridList.length != 0"
|
|
class="list"
|
|
>
|
|
<div class="list-title z-retract-1">
|
|
<div
|
|
class="f-fl ico"
|
|
:class="staffData.gridSelected ? 'z-on' : ''"
|
|
@click.stop="shiftSelectAllGrid"
|
|
>
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<span>网格</span>
|
|
</div>
|
|
<div
|
|
:key="grid.gridName"
|
|
v-for="(grid, gridIndex) in staffData.gridList"
|
|
>
|
|
<div
|
|
class="list-title z-retract-2"
|
|
@click="shiftGridUnfold(gridIndex)"
|
|
>
|
|
<div
|
|
class="f-fl ico"
|
|
:class="grid.selected ? 'z-on' : ''"
|
|
@click.stop="shiftSelectGrid(gridIndex)"
|
|
>
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<span>{{ grid.gridName }}</span>
|
|
<img
|
|
class="f-fr ico-go"
|
|
:class="!grid.folded ? 'z-unfold' : ''"
|
|
src="@/assets/img/project/select-staff/select.png"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="item z-retract-3"
|
|
v-show="!grid.folded"
|
|
:key="grid.gridId + item.staffId"
|
|
v-for="(item, index) in grid.gridStaffList"
|
|
@click="selectGridStaff(gridIndex, index)"
|
|
>
|
|
<div class="item-wrap">
|
|
<div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
|
|
<img src="@/assets/img/project/select-staff/selected2.png" />
|
|
</div>
|
|
|
|
<img
|
|
class="f-fl avatar"
|
|
v-if="item.gender == 1"
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
|
|
/>
|
|
<img
|
|
class="f-fl avatar"
|
|
v-else
|
|
src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
|
|
/>
|
|
<div class="f-fl name">
|
|
{{ item.staffName }}
|
|
<span v-if="item.roleName" class="z-stress">{{
|
|
item.roleName
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import { mapGetters } from "vuex";
|
|
import deepClone from "@/utils/deepClone.js";
|
|
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
issueId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
projectId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
hidden: false,
|
|
|
|
// 显示组织还是人员 agency staff
|
|
currPanel: "agency",
|
|
|
|
agencyLoading: false,
|
|
|
|
agency: {
|
|
agencyId: "",
|
|
agencyName: "",
|
|
selectedTotal: 0,
|
|
},
|
|
|
|
parentAgencyList: [
|
|
// {
|
|
// agencyId: "2",
|
|
// agencyName: "山东省",
|
|
// selectedTotal: 0,
|
|
// },
|
|
// {
|
|
// agencyId: "3",
|
|
// agencyName: "青岛市",
|
|
// selectedTotal: 0,
|
|
// },
|
|
],
|
|
|
|
subAgencyList: [
|
|
// {
|
|
// agencyId: "4",
|
|
// agencyName: "青岛市",
|
|
// selectedTotal: 0,
|
|
// retract: 0,
|
|
// folded: true,
|
|
// hidden: false,
|
|
// sonIds: [5],
|
|
// desIds: [5, 6, 7, 8],
|
|
// },
|
|
// {
|
|
// agencyId: "5",
|
|
// agencyName: "城阳区",
|
|
// selectedTotal: 2,
|
|
// retract: 1,
|
|
// folded: true,
|
|
// hidden: false,
|
|
// sonIds: [6],
|
|
// desIds: [6, 7, 8],
|
|
// },
|
|
// {
|
|
// agencyId: "6",
|
|
// agencyName: "黑龙江路街道",
|
|
// selectedTotal: 2,
|
|
// retract: 2,
|
|
// folded: true,
|
|
// hidden: false,
|
|
// sonIds: [7, 8],
|
|
// desIds: [7, 8],
|
|
// },
|
|
// {
|
|
// agencyId: "7",
|
|
// agencyName: "桃花源社区",
|
|
// selectedTotal: 2,
|
|
// retract: 3,
|
|
// folded: true,
|
|
// hidden: false,
|
|
// sonIds: [],
|
|
// desIds: [],
|
|
// },
|
|
// {
|
|
// agencyId: "8",
|
|
// agencyName: "巴拉巴拉社区",
|
|
// selectedTotal: 0,
|
|
// retract: 3,
|
|
// folded: true,
|
|
// hidden: false,
|
|
// sonIds: [],
|
|
// desIds: [],
|
|
// },
|
|
],
|
|
|
|
staffLoading: false,
|
|
currAgencyId: "",
|
|
staffData: {
|
|
agencyStaffList: [
|
|
// {
|
|
// staffId: "74758",
|
|
// staffName: "oHdjWbXSau",
|
|
// staffHeadPhoto: "HFp20nYBLh",
|
|
// gender: "pLBQxDJLq3",
|
|
// roleName: "pRNg4BV92E",
|
|
// selected: false,
|
|
// },
|
|
],
|
|
|
|
departmentSelected: false,
|
|
departmentList: [
|
|
// {
|
|
// departmentId: "73782",
|
|
// departmentName: "bluw7HpyhT",
|
|
// selected: false,
|
|
// folded: true,
|
|
// departmentStaffList: [
|
|
// {
|
|
// staffId: "747358",
|
|
// staffName: "oHdjWbXSau",
|
|
// staffHeadPhoto: "HFp20nYBLh",
|
|
// gender: "pLBQxDJLq3",
|
|
// roleName: "pRNg4BV92E",
|
|
// selected: false,
|
|
// },
|
|
// ],
|
|
// },
|
|
],
|
|
|
|
gridSelected: false,
|
|
gridList: [
|
|
// {
|
|
// gridId: "73782",
|
|
// gridName: "bluw7HpyhT",
|
|
// selected: false,
|
|
// folded: true,
|
|
// gridStaffList: [
|
|
// {
|
|
// staffId: "747358",
|
|
// staffName: "oHdjWbXSau",
|
|
// staffHeadPhoto: "HFp20nYBLh",
|
|
// gender: "pLBQxDJLq3",
|
|
// roleName: "pRNg4BV92E",
|
|
// selected: false,
|
|
// },
|
|
// ],
|
|
// },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
async created() {},
|
|
async mounted() {
|
|
this.getAgencyData();
|
|
},
|
|
computed: {
|
|
tableHeight() {
|
|
return this.clientHeight - 460;
|
|
},
|
|
rowHeight() {
|
|
return this.clientHeight - 200 + "px";
|
|
},
|
|
...mapGetters(["clientHeight"]),
|
|
},
|
|
watch: {},
|
|
methods: {
|
|
setData(obj) {
|
|
if (typeof obj == "object" && obj) {
|
|
Object.keys(obj).forEach((k) => {
|
|
this[k] = obj[k];
|
|
});
|
|
}
|
|
},
|
|
|
|
shiftStaffPanel(id) {
|
|
this.setData({
|
|
currPanel: "staff",
|
|
currAgencyId: id,
|
|
});
|
|
|
|
this.iniStaffData();
|
|
},
|
|
|
|
shiftAgencyPanel() {
|
|
this.setData({
|
|
currPanel: "agency",
|
|
staffData: {
|
|
agencyStaffList: [],
|
|
departmentList: [],
|
|
gridList: [],
|
|
gridSelected: false,
|
|
departmentSelected: false,
|
|
},
|
|
});
|
|
},
|
|
|
|
shiftUnfold(index) {
|
|
const { subAgencyList } = this;
|
|
let item = subAgencyList[index];
|
|
item.folded = !item.folded;
|
|
if (item.folded && item.desIds.length > 0) {
|
|
subAgencyList.forEach((sItem) => {
|
|
if (item.desIds.indexOf(sItem.agencyId) !== -1) {
|
|
sItem.hidden = true;
|
|
sItem.folded = true;
|
|
}
|
|
});
|
|
} else if (item.sonIds.length > 0) {
|
|
subAgencyList.forEach((sItem) => {
|
|
if (item.sonIds.indexOf(sItem.agencyId) !== -1) {
|
|
sItem.hidden = false;
|
|
}
|
|
});
|
|
}
|
|
this.setData({ subAgencyList });
|
|
},
|
|
|
|
show() {
|
|
this.setData({
|
|
hidden: false,
|
|
});
|
|
},
|
|
|
|
hide() {
|
|
// this.setData({ hidden: true });
|
|
this.$emit("close");
|
|
},
|
|
|
|
shiftDepartmentUnfold(index) {
|
|
const { staffData } = this;
|
|
let item = staffData.departmentList[index];
|
|
item.folded = !item.folded;
|
|
this.setData({ staffData });
|
|
},
|
|
|
|
shiftGridUnfold(index) {
|
|
const { staffData } = this;
|
|
let item = staffData.gridList[index];
|
|
item.folded = !item.folded;
|
|
this.setData({ staffData });
|
|
},
|
|
|
|
selectAgencyStaff(index) {
|
|
let { staffData } = this;
|
|
let item = staffData.agencyStaffList[index];
|
|
item.selected = !item.selected;
|
|
this.setData({ staffData });
|
|
},
|
|
|
|
selectDepartmentStaff(dindex, index) {
|
|
let { staffData } = this;
|
|
let item = staffData.departmentList[dindex].departmentStaffList[index];
|
|
item.selected = !item.selected;
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
},
|
|
selectGridStaff(dindex, index) {
|
|
let { staffData } = this;
|
|
let item = staffData.gridList[dindex].gridStaffList[index];
|
|
item.selected = !item.selected;
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
},
|
|
|
|
// 重新计算staff所属部门、网格的选中情况
|
|
computeStaffSupSelected() {
|
|
let { staffData } = this;
|
|
staffData.departmentList.forEach((dpt) => {
|
|
dpt.selected = dpt.departmentStaffList.some((staff) => staff.selected);
|
|
});
|
|
staffData.gridList.forEach((dpt) => {
|
|
dpt.selected = dpt.gridStaffList.some((staff) => staff.selected);
|
|
});
|
|
staffData.departmentSelected = staffData.departmentList.every(
|
|
(dpt) => dpt.selected
|
|
);
|
|
staffData.gridSelected = staffData.gridList.every((dpt) => dpt.selected);
|
|
this.setData({ staffData });
|
|
},
|
|
|
|
shiftSelectAllDepartment() {
|
|
const { staffData } = this;
|
|
if (staffData.departmentSelected) {
|
|
staffData.departmentSelected = false;
|
|
staffData.departmentList.forEach((item) => {
|
|
this.selectDepartment(item, false);
|
|
});
|
|
this.setData({ staffData });
|
|
} else {
|
|
staffData.departmentList.forEach((item) => {
|
|
this.selectDepartment(item, true);
|
|
});
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
}
|
|
},
|
|
shiftSelectDepartment(index) {
|
|
const { staffData } = this;
|
|
let dItem = staffData.departmentList[index];
|
|
this.selectDepartment(dItem, !dItem.selected);
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
},
|
|
selectDepartment(dItem, selected = true) {
|
|
if (!selected) {
|
|
dItem.selected = false;
|
|
dItem.departmentStaffList.forEach((item) => {
|
|
item.selected = false;
|
|
});
|
|
return "";
|
|
} else {
|
|
let succ = false;
|
|
dItem.departmentStaffList.forEach((item) => {
|
|
if (item.roleName == "部门领导") {
|
|
item.selected = true;
|
|
succ = true;
|
|
} else {
|
|
item.selected = false;
|
|
}
|
|
});
|
|
if (!succ) {
|
|
return this.$message.error(dItem.departmentName + "下无【部门领导】");
|
|
} else {
|
|
dItem.selected = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
shiftSelectAllGrid() {
|
|
const { staffData } = this;
|
|
if (staffData.gridSelected) {
|
|
staffData.gridSelected = false;
|
|
staffData.gridList.forEach((item) => {
|
|
this.selectGrid(item, false);
|
|
});
|
|
this.setData({ staffData });
|
|
} else {
|
|
staffData.gridList.forEach((item) => {
|
|
this.selectGrid(item, true);
|
|
});
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
}
|
|
},
|
|
shiftSelectGrid(index) {
|
|
const { staffData } = this;
|
|
let dItem = staffData.gridList[index];
|
|
this.selectGrid(dItem, !dItem.selected);
|
|
this.setData({ staffData });
|
|
this.computeStaffSupSelected();
|
|
},
|
|
selectGrid(dItem, selected = true) {
|
|
if (!selected) {
|
|
dItem.selected = false;
|
|
dItem.gridStaffList.forEach((item) => {
|
|
item.selected = false;
|
|
});
|
|
return "";
|
|
} else {
|
|
let succ = false;
|
|
dItem.gridStaffList.forEach((item) => {
|
|
if (item.roleName == "网格长") {
|
|
item.selected = true;
|
|
succ = true;
|
|
} else {
|
|
item.selected = false;
|
|
}
|
|
});
|
|
if (!succ) {
|
|
return this.$message.error(dItem.gridName + "下无【网格长】");
|
|
} else {
|
|
dItem.selected = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
// 输出staffData格式为接口想要的格式
|
|
outputStaffData(staffData, agencyId) {
|
|
let arr = [];
|
|
const addFn = (item, departmentId = "", gridId = "") => {
|
|
if (item.selected) {
|
|
arr.push({
|
|
agencyId,
|
|
staffId: item.staffId,
|
|
departmentId,
|
|
gridId,
|
|
});
|
|
}
|
|
};
|
|
staffData.agencyStaffList.forEach((item) => addFn(item));
|
|
staffData.departmentList.forEach((sitem) => {
|
|
sitem.departmentStaffList.forEach((item) =>
|
|
addFn(item, sitem.departmentId)
|
|
);
|
|
});
|
|
staffData.gridList.forEach((sitem) => {
|
|
sitem.gridStaffList.forEach((item) => addFn(item, "", sitem.gridId));
|
|
});
|
|
return arr;
|
|
},
|
|
|
|
confirmStaff() {
|
|
const { staffData, currAgencyId } = this;
|
|
let { agency, parentAgencyList, subAgencyList } = this;
|
|
[agency, ...parentAgencyList, ...subAgencyList].some((item) => {
|
|
if (item.agencyId == currAgencyId) {
|
|
item.staffData = staffData;
|
|
item.selectedTotal = this.outputStaffData(
|
|
staffData,
|
|
currAgencyId
|
|
).length;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
this.setData({
|
|
agency,
|
|
parentAgencyList,
|
|
subAgencyList,
|
|
});
|
|
this.shiftAgencyPanel();
|
|
},
|
|
|
|
confirm() {
|
|
let ret = [];
|
|
const { agency, parentAgencyList, subAgencyList } = this;
|
|
[agency, ...parentAgencyList, ...subAgencyList].forEach((item) => {
|
|
if (item.staffData) {
|
|
let arr = this.outputStaffData(item.staffData, item.agencyId);
|
|
ret.push(...arr);
|
|
}
|
|
});
|
|
this.hide();
|
|
this.$emit("confirm", ret);
|
|
},
|
|
|
|
cancel() {
|
|
this.hide();
|
|
},
|
|
|
|
iniStaffData() {
|
|
const { currAgencyId } = this;
|
|
if (!currAgencyId) return;
|
|
const { agency, parentAgencyList, subAgencyList } = this;
|
|
let staffData;
|
|
[agency, ...parentAgencyList, ...subAgencyList].some((item) => {
|
|
if (item.agencyId == currAgencyId) {
|
|
if (item.staffData) {
|
|
staffData = deepClone(item.staffData);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
if (!staffData) {
|
|
this.getStaffData();
|
|
} else {
|
|
this.setData({ staffData });
|
|
}
|
|
},
|
|
|
|
// 获取当前组织信息
|
|
async getStaffData() {
|
|
const { issueId, projectId, currAgencyId } = this;
|
|
|
|
this.setData({
|
|
staffLoading: true,
|
|
});
|
|
|
|
const url = projectId
|
|
? "/gov/project/trace/departmentstafflist"
|
|
: "/gov/issue/manage/departmentstafflist";
|
|
|
|
const { data, code, msg } = await requestPost(
|
|
url,
|
|
{
|
|
issueId,
|
|
projectStaffId: projectId,
|
|
agencyId: currAgencyId,
|
|
},
|
|
{
|
|
// isMock: true,
|
|
// isQuiet: true
|
|
}
|
|
);
|
|
|
|
this.setData({
|
|
staffLoading: false,
|
|
});
|
|
|
|
if (msg === "success" && code === 0) {
|
|
const staffFn = (item) => {
|
|
item.selected = false;
|
|
return item;
|
|
};
|
|
const departmentFn = (item) => {
|
|
item.selected = false;
|
|
item.folded = true;
|
|
item.departmentStaffList.forEach(staffFn);
|
|
return item;
|
|
};
|
|
const gridFn = (item) => {
|
|
item.selected = false;
|
|
item.folded = true;
|
|
item.gridStaffList.forEach(staffFn);
|
|
return item;
|
|
};
|
|
let agencyStaffList =
|
|
data == null || !Array.isArray(data.agencyStaffList)
|
|
? []
|
|
: data.agencyStaffList.map(staffFn);
|
|
let departmentList =
|
|
data == null || !Array.isArray(data.departmentList)
|
|
? []
|
|
: data.departmentList.map(departmentFn);
|
|
let gridList =
|
|
data == null || !Array.isArray(data.gridList)
|
|
? []
|
|
: data.gridList.map(gridFn);
|
|
this.setData({
|
|
staffData: {
|
|
agencyStaffList,
|
|
departmentList,
|
|
gridList,
|
|
gridSelected: false,
|
|
departmentSelected: false,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取当前组织信息
|
|
async getAgencyData() {
|
|
const { projectId, issueId } = this;
|
|
|
|
this.setData({
|
|
agencyLoading: true,
|
|
});
|
|
|
|
const url = projectId
|
|
? "/gov/project/trace/processorlist"
|
|
: issueId
|
|
? "/gov/issue/manage/processorlist"
|
|
: "/gov/project/trace/approvalagencylist";
|
|
|
|
const { data, code, msg } = await requestPost(
|
|
url,
|
|
{
|
|
projectStaffId: projectId,
|
|
issueId,
|
|
},
|
|
{
|
|
// isMock: true,
|
|
// isQuiet: true
|
|
}
|
|
);
|
|
|
|
this.setData({
|
|
agencyLoading: false,
|
|
});
|
|
|
|
if (msg === "success" && code === 0) {
|
|
let agency = {
|
|
...data.agencyList,
|
|
selectedTotal: 0,
|
|
};
|
|
let parentAgencyList = data.parentAgencyList.map((item) => {
|
|
return {
|
|
...item,
|
|
selectedTotal: 0,
|
|
};
|
|
});
|
|
|
|
let rootSubAgencyList = [];
|
|
let tempForSort = 0;
|
|
const subFn = (list, retract = 0) => {
|
|
let sonIds = [];
|
|
let desIds = [];
|
|
list.forEach((item) => {
|
|
const { agencyName, agencyId, subAgencyList } = item;
|
|
let ret = {
|
|
agencyId,
|
|
agencyName,
|
|
selectedTotal: 0,
|
|
retract,
|
|
folded: true,
|
|
hidden: retract !== 0,
|
|
sonIds: [],
|
|
desIds: [],
|
|
};
|
|
sonIds.push(agencyId);
|
|
desIds.push(agencyId);
|
|
rootSubAgencyList.push(ret);
|
|
if (Array.isArray(subAgencyList) && subAgencyList.length > 0) {
|
|
let subData = subFn(subAgencyList, retract + 1);
|
|
ret.sonIds = subData.sonIds;
|
|
ret.desIds = subData.desIds;
|
|
|
|
desIds.push(...subData.desIds);
|
|
}
|
|
});
|
|
return { sonIds, desIds };
|
|
};
|
|
subFn(data.subAgencyList);
|
|
|
|
console.log(rootSubAgencyList);
|
|
this.setData({
|
|
agencyLoading: false,
|
|
agency,
|
|
parentAgencyList,
|
|
subAgencyList: rootSubAgencyList,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/c/config.scss";
|
|
@import "@/assets/scss/c/function.scss";
|
|
|
|
.m-hint {
|
|
text-align: center;
|
|
padding: 150px * 0.5 50px * 0.5;
|
|
line-height: 50px * 0.5;
|
|
color: #999;
|
|
text-align: center;
|
|
font-size: 32px * 0.5;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.m-select_staff {
|
|
// @include shield;
|
|
// z-index: 1000;
|
|
position: relative;
|
|
width: 380px;
|
|
height: 60vh;
|
|
overflow: hidden;
|
|
|
|
.wrap {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 10px * 0.5 10px * 0.5 0 0;
|
|
}
|
|
|
|
.wrap2 {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding-top: 10px * 0.5;
|
|
padding-bottom: 120px * 0.5;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.operate {
|
|
position: absolute;
|
|
z-index: 100;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100px * 0.5;
|
|
background-color: #ffffff;
|
|
border-top: 1px * 0.5 solid #eee;
|
|
|
|
.btn {
|
|
float: left;
|
|
width: 50%;
|
|
text-align: center;
|
|
line-height: 100px * 0.5;
|
|
background-color: rgba(230, 0, 0, 1);
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
&.btn-off {
|
|
background-color: #ffffff;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
padding: 20px * 0.5 0;
|
|
width: 710px * 0.5;
|
|
line-height: 60px * 0.5;
|
|
border-bottom: 1px * 0.5 solid #e7eeee;
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(151, 151, 151, 1);
|
|
.row {
|
|
overflow: hidden;
|
|
}
|
|
.title-ico {
|
|
position: relative;
|
|
width: 60px * 0.5;
|
|
height: 60px * 0.5;
|
|
img {
|
|
@include hub;
|
|
&.title-ico-back {
|
|
width: 19px * 0.5;
|
|
height: 34px * 0.5;
|
|
}
|
|
&.title-ico-close {
|
|
width: 35px * 0.5;
|
|
height: 35px * 0.5;
|
|
}
|
|
}
|
|
}
|
|
.title-btn {
|
|
width: 140px * 0.5;
|
|
height: 60px * 0.5;
|
|
line-height: 60px * 0.5;
|
|
background: rgba(230, 0, 0, 1);
|
|
border-radius: 30px * 0.5;
|
|
font-size: 32px * 0.5;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 1);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.back-btn {
|
|
box-sizing: border-box;
|
|
margin: 15px * 0.5 20px * 0.5;
|
|
padding: 10px * 0.5 5px * 0.5;
|
|
width: 200px * 0.5;
|
|
border: 1px * 0.5 solid #e5e5e5;
|
|
line-height: 60px * 0.5;
|
|
border-radius: 10px * 0.5;
|
|
font-size: 20px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #e00;
|
|
text-align: center;
|
|
}
|
|
|
|
.menu-title {
|
|
margin-top: 20px * 0.5;
|
|
padding: 0 20px * 0.5;
|
|
line-height: 50px * 0.5;
|
|
font-size: 28px * 0.5;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
|
|
.menu {
|
|
@include cs;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
padding: 20px * 0.5 10px * 0.5;
|
|
width: 710px * 0.5;
|
|
border-top: 1px * 0.5 solid #fefefe;
|
|
line-height: 40px * 0.5;
|
|
|
|
.ico-radio {
|
|
position: relative;
|
|
display: block;
|
|
width: 50px * 0.5;
|
|
height: 40px * 0.5;
|
|
margin-right: 10px * 0.5;
|
|
transition: all 0.23s ease-in-out;
|
|
|
|
&::before {
|
|
@include hub;
|
|
content: "";
|
|
display: block;
|
|
width: 22px * 0.5;
|
|
height: 22px * 0.5;
|
|
border-radius: 100%;
|
|
border: 3px * 0.5 solid #aaa;
|
|
transition: all 0.23s ease-in-out;
|
|
}
|
|
|
|
&::after {
|
|
@include hub;
|
|
content: "";
|
|
display: block;
|
|
width: 10px * 0.5;
|
|
height: 10px * 0.5;
|
|
border-radius: 100%;
|
|
background-color: #aaa;
|
|
transform: scale(0);
|
|
transition: all 0.23s ease-in-out;
|
|
}
|
|
|
|
&.z-disabled {
|
|
&::before {
|
|
border-color: #e5e5e5;
|
|
}
|
|
&::after {
|
|
background-color: #e5e5e5;
|
|
}
|
|
}
|
|
|
|
&.z-on {
|
|
&::before {
|
|
border-color: #00e;
|
|
}
|
|
&::after {
|
|
background-color: #00e;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ico-fold {
|
|
display: inline-block;
|
|
box-sizing: content-box;
|
|
margin-left: -20px * 0.5;
|
|
padding: 4px * 0.5 10px * 0.5;
|
|
width: 32px * 0.5;
|
|
height: 32px * 0.5;
|
|
vertical-align: bottom;
|
|
transition: all 0.23s ease-in-out;
|
|
cursor: pointer;
|
|
|
|
&.z-unfold {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.name {
|
|
// @include toe;
|
|
width: 400px * 0.5;
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.num {
|
|
font-size: 26px * 0.5;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(230, 0, 0, 1);
|
|
}
|
|
|
|
.ico-go {
|
|
display: block;
|
|
margin: 10px * 0.5 15px * 0.5;
|
|
width: 13px * 0.5;
|
|
height: 24px * 0.5;
|
|
transition: all 0.23s ease-in-out;
|
|
|
|
&.z-unfold {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin-top: 30px * 0.5;
|
|
view {
|
|
.list-title {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-title {
|
|
margin: 5px * 0.5 0;
|
|
padding: 20px * 0.5;
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 32px * 0.5;
|
|
cursor: pointer;
|
|
|
|
.ico {
|
|
position: relative;
|
|
top: -8px * 0.5;
|
|
margin-left: -15px * 0.5;
|
|
margin-right: 2px * 0.5;
|
|
width: 50px * 0.5;
|
|
height: 50px * 0.5;
|
|
cursor: pointer;
|
|
|
|
&::after,
|
|
img {
|
|
position: absolute;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 20px * 0.5;
|
|
height: 20px * 0.5;
|
|
display: block;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
z-index: 1;
|
|
border: 1px solid rgba(153, 153, 153, 1);
|
|
border-radius: 1px;
|
|
}
|
|
img {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: all 0.23s ease-in-out;
|
|
}
|
|
&.z-on {
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
img {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
> img {
|
|
display: inline-block;
|
|
margin: 0 10px * 0.5;
|
|
width: 32px * 0.5;
|
|
height: 32px * 0.5;
|
|
vertical-align: bottom;
|
|
transition: all 0.23s ease-in-out;
|
|
|
|
&.z-unfold {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
.item-wrap {
|
|
box-sizing: border-box;
|
|
padding: 20px * 0.5;
|
|
height: 90px * 0.5;
|
|
line-height: 50px * 0.5;
|
|
overflow: hidden;
|
|
border-bottom: 1px * 0.5 solid #fefefe;
|
|
|
|
.ico {
|
|
position: relative;
|
|
margin-left: -15px * 0.5;
|
|
margin-right: 2px * 0.5;
|
|
width: 50px * 0.5;
|
|
height: 50px * 0.5;
|
|
|
|
&::after,
|
|
img {
|
|
position: absolute;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 20px * 0.5;
|
|
height: 20px * 0.5;
|
|
display: block;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
z-index: 1;
|
|
border: 1px solid rgba(153, 153, 153, 1);
|
|
border-radius: 1px;
|
|
}
|
|
img {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: all 0.23s ease-in-out;
|
|
}
|
|
&.z-on {
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
img {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
position: relative;
|
|
margin-right: 10px * 0.5;
|
|
width: 50px * 0.5;
|
|
height: 50px * 0.5;
|
|
|
|
img {
|
|
width: 50px * 0.5;
|
|
height: 50px * 0.5;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
@include toe;
|
|
width: 70%;
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
|
|
.z-stress {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-sizing: content-box;
|
|
top: -2px;
|
|
padding: 0 4px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
border: 1px * 0.5 solid rgba(187, 19, 19, 1);
|
|
border-radius: 16px;
|
|
font-size: 10px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(187, 19, 19, 1);
|
|
}
|
|
}
|
|
|
|
.else {
|
|
text {
|
|
font-size: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
img {
|
|
display: inline-block;
|
|
margin: 16px * 0.5 12px * 0.5;
|
|
width: 13px * 0.5;
|
|
height: 24px * 0.5;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.z-retract-1 {
|
|
padding-left: 25px * 0.5;
|
|
}
|
|
.z-retract-2 {
|
|
padding-left: 25px * 0.5 * 2;
|
|
}
|
|
.z-retract-3 {
|
|
padding-left: 25px * 0.5 * 3;
|
|
}
|
|
.z-retract-4 {
|
|
padding-left: 25px * 0.5 * 4;
|
|
}
|
|
}
|
|
</style>
|
|
|