zheng_xie_ui/work/pages/case/lmtapeople.vue

<template>
	<view class="lmtabox">
		<!-- 上面 -->
		<view class="lmtatop">
			<!-- 搜索 -->
			<view class="search searchbg flex0">
				<image :src="searchimg"></image>
				<input placeholder="输入委员姓名进行查询" v-model="title" @confirm="getConfirm"/>
			</view>
			<view class="flex1 table">
				<zb-table
				  :show-header="true"
				  :columns="columns"
				  :stripe="false"
				 
				  :fit="false"
				  :checkList="checkList"
				  @rowClick="rowClick"
				  @toggleRowSelection="toggleRowSelection"
				  @toggleAllSelection="toggleAllSelection"
				  :border="border"
				  @edit="buttonEdit"
				  @dele="dele"
				  :data="tableData"></zb-table>
			</view>	
		</view>
		<!-- 弹窗 -->
		<view class="lmtac">
			<view class="flex1 table">
				<view class="tab_head">
					<view class="w60 tr">姓名</view>
					<view class="tr" style="flex: 1;">职务</view>
					<view class="w70 tr">领衔/附议</view>
					<!-- <view class="w50 tr">附议</view> -->
					<view class="w50 tr">操作</view>
				</view>
				<view class="tab_list">
					<view v-for="(ite,idx) in checkList" :key="idx" class="tablist">
						<view class="w60 tr">{{ite.name}}</view>
						<view class="tr" style="flex: 1;">{{ite.unit}}</view>
						<view class="tr w70" @click="getLxFn(ite)" >
							<uni-data-checkbox v-model="ite.type" :localdata="sfList" />
							<!-- <image :src="checkimg" class="staimg" v-if="ite.lx"></image>
							<image :src="ncheckimg" class="staimg" v-else></image> -->
						</view>
						<view class="w50 tr" @click="getDelFn(ite,idx)">
							<image :src="delimg" class="staimg"></image>
						</view>
					</view>
				</view>
			</view>	
			<view class="btns" @click="getSure">确定</view>
		</view>
	</view>
</template>

<script>
	import {getInfoListFn} from "@/api/mine/case.js"
	import zbTable from "@/work/components/zb-table/zb-tablesearch.vue"
	export default {
		components:{zbTable},
		data() {
			return {
				searchimg: require("@/work/static/images/hsearch.png"),
				checkimg: require("@/work/static/images/check.png"),
				ncheckimg: require("@/work/static/images/ncheck.png"),
				delimg: require("@/work/static/images/del.png"),
				searchVal: '',
				border: false,
				sfList:[{text: '领衔',value: '1'},{text: '附议',value: '2'}],
				tatype:'',
				columns: [
				    { type:'selection', width:120,align:'center',},
				    { name: 'name', label: '姓名',width:130,align:'center', },
				    { name: 'unit', label: '职务',align:'center'},
				],
				tableData:[],
				checkList:[],
				selectList:[],
				title:'',
			} 
		},
		onLoad(e) {
			this.init()
			if(e.data){
				var newobj=JSON.parse(decodeURIComponent(e.data));
				this.checkList=newobj.list;
			}
		},
		methods: {
			getLxFn(ite){
				var indexNum = (this.tableData || []).findIndex((item) => item.userId === ite.userId);
				if(indexNum!=-1){
					this.tableData[indexNum].type=ite.type	
				}
			},
			rowClick(){
				
			},
			getDelFn(ite,idx){
				this.checkList.splice(idx,1);
				var newArr=this.tableData
				var indexNum = (this.tableData || []).findIndex((item) => item.userId === ite.userId);
				if(indexNum!=-1){
					newArr[indexNum].checked=false;
					this.tableData=[];
					this.tableData=JSON.parse(JSON.stringify(newArr));
				}
			},
			toggleRowSelection(e,data,item){
				this.checkList=JSON.parse(JSON.stringify(data))
			},
			getConfirm(){
				this.init()
			},
			toggleAllSelection(e){
			},
			init(){
				this.tableData=[]
				var params={
					name:this.title
				}
				getInfoListFn(params).then(res=>{
					if(res.code==200){
						var tableData=res.rows;
						
						var newArr=this.checkList;
						if(newArr&&newArr.length){
							newArr.forEach(ite=>{
								var indexNum = (tableData || []).findIndex((item) => item.userId === ite.userId);
								if(indexNum!=-1){
									tableData[indexNum].checked=true
									tableData[indexNum].type=ite.type
								}
							})
						}
						this.tableData=tableData;
					}
				})
			},
			getSure(){
				var list=this.checkList;
				var newArr = [];
				var a='';
				for(var i=0;i<list.length;i++){
					if (!list[i].type) {
						this.$toast("请选择"+list[i].name+"领衔/附议")
						return
					}
					newArr.push(list[i].name)
				}
				
				var obj={
					proposalUserList:this.checkList,
					namelist:newArr
				}
				uni.$emit("refreshtary",obj)
				uni.navigateBack({
					delta: 1 //返回层数，2则上上页
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.lmtac /deep/ .uni-data-checklist{display: flex;align-items: center;justify-content: flex-end;}
.lmtac /deep/ .uni-data-checklist .checklist-box{margin-right: 0;}	
.lmtabox{display: flex;flex-direction: column;height: 100vh;
	.lmtatop{background: #ffffff;flex: 1;padding: 34rpx 24rpx 0;display: flex;flex-direction: column;overflow: auto;box-sizing: border-box;
		.table{flex: 1;height: calc(100% - 110rpx);}
	}
	.lmtac{margin-top: 24rpx;padding:30rpx 24rpx 58rpx;background-color: #ffffff;max-height: 512rpx;box-sizing: border-box;display: flex;flex-direction: column;
		.btns{width: 100%;height: 80rpx;margin-top: 30rpx;
background: #1D64E2;font-weight: bold;font-size: 30rpx;
color: #FFFFFF;display: flex;align-items: center;justify-content: center;
border-radius: 40rpx;}
		// 表格
		.table{flex: 1;overflow: hidden;display: flex;flex-direction: column;
			.tr{flex: 0 0 auto;font-size: 28rpx;font-weight: bold;color: #222327;text-align: center;min-height: 80rpx;padding: 8rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;
				&.w60{width: 120rpx;}
				&.w50{width: 100rpx;}
				&.w70{width: 140rpx;}
			}
			.tab_head{display: flex;align-items: center;}
			.tab_list{display: flex;flex-direction: column;flex: 1;overflow: auto;}
			.tablist{
				display: flex;
				.tr{font-weight: 500;min-height: 64rpx;}
			}
			.staimg{width: 28rpx;height: 28rpx;}
		}
	}
	
	
	.scroll-view{width: 100%;}
}
</style>