jp-railway/pages/oawork/business/select.vue

<template>
	<view>
		<u-navbar title="选择人员">
			<view class="slot-wrap" @click="submit()">
				发布
			</view>
		</u-navbar>
		<view class="mui-content">
			<view class="vongi-bread">
				<template v-for="(item,index) in navList">
					<a :class="navCanClick(item,index)?'color4fc5f7':''" @click="reloadItem(item,index)" :key="index"
						v-text="item.name"></a>
						<u-icon name="arrow-right" :key="index" v-if="index!=navList.length-1"></u-icon>
					
				</template>
			</view>

			<view class="mui-table-view">
				<view v-for="(item,index) in arrangeShiftCompanyList" :key="index"
					class="mui-table-view-cell ">
					<view class="mui-ellipsis">
						{{item.name}}
					</view>

					<a href="" class=" mui-ellipsis-a " @click="reloadNext(item)">
						<img src="@/assets/img/oawork/select.png">
						下级</a>
					<!--灰色状态-->
					<!--<a href="" class="color999 iconfont icon-xiaji">下级</a>-->
				</view>
			</view>

			<view class="vongi-fplist" :style="'margin-bottom:'+(clientHeight+100)+'px'">
				<view class="mui-content-padded">
					人员列表
				</view>
				<view class="mui-input-group" style="background-color: #fff;     padding-bottom: 90px;">

					<view class="mui-input-row " v-for="(item,index) in arrangeShiftPersonList" :key="index"
						@click="checkboxBtn(item)">
						<label :class="{
							selectcheckboxBtn:selectId.indexOf(item.personId)!=-1
						}">{{item.auditorName}}</label>
						<!-- mui-checkbox
						<input name="checkbox1" :value="item.id" v-model="selectId" type="checkbox"> -->
					</view>

					<view class="mui-input-row " v-if="!arrangeShiftPersonList.length">
						--无--
						<!-- mui-checkbox
						<input name="checkbox1" :value="item.id" v-model="selectId" type="checkbox"> -->
					</view>
				</view>
				<view class=" vongi-footer " >
					
					<view class="margin10">已选择人员：<span style="float: right;">已选{{selectPerson.length}}人</span></view>
					<view class="vongi-yjbtn flew" :style="'height:'+clientHeight+'px'">
						<span style="height: 24px;" v-for="(item,i) in selectPerson" :key="i">{{item.auditorName}}
							<a class="iconfont icon-guanbi1" v-show="item.status==0"
								@click="checkboxBtn(item)">
								<u-icon name="close"></u-icon>
								</a></span>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clientHeight: 37,
				companyId: '',
				arrangeShiftCompanyList: [

				],
				arrangeShiftPersonList: [],
				nowLevel: 0,
				navList: [{
					name: '地方铁路地方铁路公司',
					id: ''
				},{
					name: '项目部门',
					id: ''
				},{
					name: 'xxxx小组',
					id: ''
				}],
				selectId: [],
				selectPerson: [],
				selectIdOld: [],
				selectPersonOld: [],
				selectObj: {},
			}
		},
		onReady() {
			this.getArrangeShiftCompanyList();
		},

		methods: {
			submit() {},
			checkboxBtn(obj) {

				//selectId.push(item.id)
				//(this.selectId)
				//(this.selectPerson)
				if (this.selectId.includes(obj.personId)) {

					var i = -1;
					var person = {};
					for (var j in this.selectPerson) {
						if (this.selectPerson[j].personId == obj.personId) {
							i = j
							person = this.selectPerson[j];
						}
					}
					if (i != -1) {
						if (person.status != 0) {
							mui.toast("已审批人员不可调整")
							return;
						}
						this.selectPerson.splice(i, 1);
						this.selectId.splice(i, 1);
					}

				} else {
					if (this.selectType == 'single' && this.selectPerson.length > 0) {
						mui.toast("单人审批只能选择一人")
						return;
					}

					this.selectPerson.push(obj);
					this.selectId.push(obj.personId)
				}

				this.setHeight()


			},
			setHeight() {
				//spanLast
				this.$nextTick(() => {
					var top = document.getElementById("spanLast").scrollHeight;
					if (top < 500) {
						this.clientHeight = top;
					} else {
						this.clientHeight = 500;
					}
					//(top)
				})
			},
			reloadItem(item, index) {
				if (index == this.nowLevel) {
					return false;
				}
				this.navList = this.navList.slice(0, index + 1);
				this.nowLevel = index;
				this.companyId = item.id;
				this.getArrangeShiftCompanyList();
			},
			//加载下级
			reloadNext(item) {
				this.navList.push(item)
				this.nowLevel++;
				this.companyId = item.id;
				this.getArrangeShiftCompanyList();
			},
			//判断面包屑是否可点击
			navCanClick(item, index) {
				if (index == this.nowLevel) {
					return false;
				} else {
					return true;
				}
			},
			back() {
				this.selectId = this.selectIdOld;
				this.selectPerson = this.selectPersonOld;
				this.$emit("confirm", {
					status: 0
				})
			},
			ok() {
				if (this.selectPerson.length || this.selectType == "view") {
					var k = 0;
					for (var i in this.selectPerson) {
						var obj = this.selectPerson[i];
						if (obj.status == 0) {
							k++;
						}
					}
					if (k == 0 && this.selectType != "view") {
						mui.toast("请保留最少一人审批");
						return
					}
					if (this.selectType == 'single' && this.selectPerson.length > 1) {
						mui.toast("单人审批只能选择一人")
						return;
					}
					this.selectIdOld = this.selectId;
					this.selectPersonOld = this.selectPerson;
					if (this.selectType == "view") {
						this.selectObj.examineStep.stepType = "2"
						this.selectObj.examineStep.examineType = "view"
					} else {
						this.selectObj.examineStep.examineType = this.selectType
						this.selectObj.examineStep.stepType = "1"
					}
					this.selectObj.stepPersonList = this.selectPerson

					this.$emit("confirm", {
						status: 1,
						selectObj: this.selectObj
					})
				} else {
					mui.toast("请保留最少一人审批");
				}
			},

			getArrangeShiftCompanyList() {


				var response = {
					"personList": [{
							"id": 19640,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "杨洋LA",
							"phone": "19945188896",
							"idCard": null,
							"openId": "oHjCawo-Twp2YRfuIT2Z9X4ayAtQ",
							"faceEnabled": null,
							"faceBound": null,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "9e304351-a0d2-4b9a-9a94-141edcbaeb74",
							"createTime": "2022-12-08 14:01",
							"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"updateTime": "2023-01-05 12:14",
							"faceImageUrl": "http://oss.xiaoxinda.com/smart/person/2022/12/8/9edfdd0f-e3a1-4a2c-9771-8e4f750d6bc8/1.jpg",
							"popedom": "ad5601de-fe86-4c4d-a354-1eae0cb30530",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": false,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						},
						{
							"id": 19728,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "高进权",
							"phone": "15671357878",
							"idCard": null,
							"openId": "oN5ep6FvodStV8A2gXSQAUum8LKM",
							"faceEnabled": null,
							"faceBound": false,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
							"createTime": "2022-12-15 11:05",
							"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"updateTime": "2023-01-05 12:40",
							"faceImageUrl": "http://oss.xiaoxinda.com/smart/person/2022/12/24/d0751ba1-48f2-4515-ba23-19efb297f9e1/1.jpg",
							"popedom": "3a85ff78-7f9d-47dd-af10-6f39b466812b",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": false,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						},
						{
							"id": 19729,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "郑开鑫",
							"phone": "17602144315",
							"idCard": null,
							"openId": "oN5ep6Os2nExGLOW5k1cZHGwVFHE",
							"faceEnabled": null,
							"faceBound": true,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
							"createTime": "2022-12-15 11:06",
							"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"updateTime": "2023-01-05 13:00",
							"faceImageUrl": "http://oss.xiaoxinda.com/smart/person/2022/12/21/ae5ec908-8757-4d00-bcb9-eff6f901fec8/1.jpg",
							"popedom": "b73f2316-90ba-4357-982d-d06763f5af41",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": false,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						},
						{
							"id": 19730,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "陈文",
							"phone": "18986656325",
							"idCard": null,
							"openId": "oN5ep6AHmKcgbiOKH0mtilwK77po",
							"faceEnabled": null,
							"faceBound": false,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
							"createTime": "2022-12-15 11:06",
							"updateBy": null,
							"updateTime": "2022-12-29 00:00",
							"faceImageUrl": "http://oss.xiaoxinda.com/smart/person/2022/12/22/a3ce263c-4886-4124-aefb-a8f226455b22/1.jpg",
							"popedom": "6da4d6d3-06fc-4f1e-9bc2-c623fc8ef630",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": false,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						},
						{
							"id": 19731,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "舒展",
							"phone": "13437120102",
							"idCard": null,
							"openId": "oHjCawgwCGen5k1-hAsimdEX5lZo",
							"faceEnabled": null,
							"faceBound": null,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
							"createTime": "2022-12-15 11:07",
							"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"updateTime": "2023-01-30 09:07",
							"faceImageUrl": null,
							"popedom": "ffe91fed-46e3-4547-a593-0979b58f1228",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": false,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						},
						{
							"id": 19733,
							"companyId": "b1855f3b-c26b-4345-9920-4dc6b1527548",
							"companyName": null,
							"name": "杨所",
							"phone": "15207211859",
							"idCard": null,
							"openId": "oN5ep6J256zHjlbVU6HXEfQLkhvs",
							"faceEnabled": null,
							"faceBound": null,
							"cardEnabled": null,
							"appEnabled": null,
							"passwordEnabled": null,
							"guestEnabled": null,
							"position1": null,
							"position2": null,
							"position3": null,
							"position4": null,
							"position5": null,
							"delFlag": false,
							"createBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"createTime": "2022-12-22 16:08",
							"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
							"updateTime": "2023-04-10 11:37",
							"faceImageUrl": "http://oss.xiaoxinda.com/smart/person/2022/12/26/fb90da2c-89df-48a6-b1ca-6d2d9c9f2d94/1.jpg",
							"popedom": "f2b89b01-92e8-431a-bab1-f2feb9026d82",
							"popedomName": null,
							"lastTemperatureLog": null,
							"isNormal": null,
							"personCompany": null,
							"wechatNoticeEnabled": true,
							"allowViewLocal": false,
							"companyType": null,
							"healthErtificateUrl": null,
							"isSync": null,
							"sex": null,
							"parkId": null,
							"parkName": null,
							"healthyCode": null,
							"updateHealthyTime": null,
							"healthyReason": null,
							"companyStructName": null,
							"roleName": null,
							"personRoleId": null,
							"workStatus": "1",
							"checkinInfoId": null,
							"contractType": null,
							"hkPersonId": null,
							"isTemporary": false,
							"temporaryEffectiveDate": null,
							"workStatusN": "工作"
						}
					],
					"companyInfoList": [{
						"id": "b1855f3b-c26b-4345-9920-4dc6b1527548",
						"logo": null,
						"level": 2,
						"sortNo": 20,
						"name": "测试组",
						"fullName": null,
						"remark": null,
						"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
						"createTime": "2022-12-15 11:04",
						"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
						"updateTime": "2022-12-25 12:31",
						"delFlag": false,
						"parentId": "78486e1d-4100-45e9-8073-5d7a9814391b",
						"code": "78486e1d-4100-45e9-8073-5d7a9814391b,b1855f3b-c26b-4345-9920-4dc6b1527548",
						"parentName": "目录",
						"type": "1",
						"typeName": null,
						"wallUrl": null,
						"sceneId": "1",
						"regionId": "1",
						"sceneName": null,
						"regionName": null,
						"relationCompanyId": null,
						"enableRegister": null,
						"unitType": "1",
						"hasNext": null,
						"isMobilePayment": null,
						"healthyReportNoticeEnable": null,
						"healthyReportNoticeTime": null,
						"healthyReportSubmitTime": null,
						"source": null,
						"provinceCode": null,
						"addressDetail": null,
						"screenRefreshInterval": null,
						"wechatMesssageUrl": "ga-oa/#/"
					},{
						"id": "b1855f3b-c26b-4345-9920-4dc6b1527548",
						"logo": null,
						"level": 2,
						"sortNo": 20,
						"name": "测试组",
						"fullName": null,
						"remark": null,
						"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
						"createTime": "2022-12-15 11:04",
						"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
						"updateTime": "2022-12-25 12:31",
						"delFlag": false,
						"parentId": "78486e1d-4100-45e9-8073-5d7a9814391b",
						"code": "78486e1d-4100-45e9-8073-5d7a9814391b,b1855f3b-c26b-4345-9920-4dc6b1527548",
						"parentName": "目录",
						"type": "1",
						"typeName": null,
						"wallUrl": null,
						"sceneId": "1",
						"regionId": "1",
						"sceneName": null,
						"regionName": null,
						"relationCompanyId": null,
						"enableRegister": null,
						"unitType": "1",
						"hasNext": null,
						"isMobilePayment": null,
						"healthyReportNoticeEnable": null,
						"healthyReportNoticeTime": null,
						"healthyReportSubmitTime": null,
						"source": null,
						"provinceCode": null,
						"addressDetail": null,
						"screenRefreshInterval": null,
						"wechatMesssageUrl": "ga-oa/#/"
					},{
						"id": "b1855f3b-c26b-4345-9920-4dc6b1527548",
						"logo": null,
						"level": 2,
						"sortNo": 20,
						"name": "测试组",
						"fullName": null,
						"remark": null,
						"createBy": "31ea2b4f-20a1-4be5-901f-7a927c729d1a",
						"createTime": "2022-12-15 11:04",
						"updateBy": "72dc480e-6816-4be3-918d-da2436f39627",
						"updateTime": "2022-12-25 12:31",
						"delFlag": false,
						"parentId": "78486e1d-4100-45e9-8073-5d7a9814391b",
						"code": "78486e1d-4100-45e9-8073-5d7a9814391b,b1855f3b-c26b-4345-9920-4dc6b1527548",
						"parentName": "目录",
						"type": "1",
						"typeName": null,
						"wallUrl": null,
						"sceneId": "1",
						"regionId": "1",
						"sceneName": null,
						"regionName": null,
						"relationCompanyId": null,
						"enableRegister": null,
						"unitType": "1",
						"hasNext": null,
						"isMobilePayment": null,
						"healthyReportNoticeEnable": null,
						"healthyReportNoticeTime": null,
						"healthyReportSubmitTime": null,
						"source": null,
						"provinceCode": null,
						"addressDetail": null,
						"screenRefreshInterval": null,
						"wechatMesssageUrl": "ga-oa/#/"
					}]
				}
				this.arrangeShiftCompanyList = response.companyInfoList;
				var list = [];
				for (var i in response.personList) {
					var obj = response.personList[i];

					list.push({
						personId: obj.id,
						auditorImage: obj.faceImageUrl,
						auditorName: obj.name,
						status: 0,
					})
				}
				this.arrangeShiftPersonList = list;

				return
				this.isLoading = true;

				API.findDepartmentAndPerson(this.companyId).then(response => {


					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			}, //下拉事件
			init(selectObj) {
				document.body.scrollTop = 0;
				document.documentElement.scrollTop = 0;
				//this.initbl=false
				this.selectObj = selectObj
				if (this.selectObj) {
					this.selectType = this.selectObj.examineStep.examineType;

					this.selectId = [];
					this.selectPerson = [];

					var list = this.selectObj.stepPersonList;
					for (var i in list) {
						var obj = list[i]
						this.selectId.push(obj.personId)
						this.selectPerson.push(obj)
					}

					this.setHeight()
					//(this.selectPerson)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.slot-wrap {
		//background-color: rgba(204, 204, 204, 1);
		background-color: #03a9f4;
		width: 104rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 8px;

		color: #fff;
		text-align: center;
		position: absolute;
		top: 50%;
		right: 32rpx;
		transform: translateY(-50%);
	}
	.vongi-bread{
		font-size: 14px;
 padding: 10px;
		    display: -webkit-box;
		    overflow-x: scroll;
		   
			.color4fc5f7{
				    color: #3385FF/*蓝*/;
			}
			a{
				    padding: 0 5px;
				    display: block;
			}
	}
	.mui-table-view{
		background-color: rgba(255, 255, 255, 1);
		.mui-table-view-cell {
			display: flex;
			     padding: 11px 15px;
			    justify-content: space-between;
				.mui-ellipsis{
					    flex: 1;
					    border-right: 1px solid #BBBBBB;
					    padding-right: 15px;
					    margin-right: 15px;
				}
				.mui-ellipsis-a{
					    color: #3385FF;
						img{
							width: 24rpx;
							height: 24rpx;
						}
				}
		}

	}
	.vongi-fplist{
		.mui-content-padded{
			font-size: 14px;
			padding: 10px;
		}
		.mui-input-group{
			background-color: rgba(255, 255, 255, 1);
			.mui-input-row{
				padding: 10px;
			}
		}
		
	}
	.vongi-footer{
		    position: fixed;
		    bottom: 0;
		    width: 100%;
		    padding: 10px 0;
			background-color: #f3f4f4;
			.margin10,.vongi-yjbtn{
				 padding: 0px 20px;
				background-color: rgba(255, 255, 255, 1);
			}
			.vongi-yjbtn{
				    display: flex;
				    flex-wrap: wrap;
				  
				    height: 112px;
				    overflow-y: scroll;
					    width: 100%;
				span{
					color: #3385FF;
					    border: 1px solid #3385FF;
					    border-radius: 18px;
					    padding: 2px 10px;
					       display: flex;
					       align-items: center;
					    margin: 5px;
				}
				a{
					    font-size: 14px;
					    margin-left: 5px;
					    color: #3385FF;
				}
			}
	}
	.selectcheckboxBtn{
		    color: #3385FF;
	}
</style>