<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-tables.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); this.tableData[indexNum].type=ite.type }, getDelFn(ite,idx){ this.checkList.splice(idx,1); // var indexNum = (this.tableData || []).findIndex((item) => item.userId === ite.userId); // console.log(indexNum) // this.tableData[indexNum].checked=false; }, toggleRowSelection(e,data){ this.checkList=JSON.parse(JSON.stringify(data)) }, getConfirm(){ this.init() }, toggleAllSelection(e){ }, init(){ var params={ name:this.title } getInfoListFn(params).then(res=>{ if(res.code==200){ this.tableData=res.rows; var newArr=this.checkList; if(newArr&&newArr.length){ newArr.forEach(ite=>{ var indexNum = (this.tableData || []).findIndex((item) => item.userId === ite.userId); this.tableData[indexNum].checked=true this.tableData[indexNum].type=ite.type }) } } }) }, 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>