yuanqu_ui/work/components/clock/cardlist.vue

<template>
<view class="cardbox">
		<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<block v-if="type==1">
		<view class="clist flex" v-for="(ite,idx) in datainfo" :key="idx">
			<!-- <image :src="ite.avatar?ite.avatar:headimg" class="clist_head"></image> -->
			<view class="clist_head">
				{{ite.nickName.substring(0, 1)}}
			</view>
			<!-- <image :src="ite.avatar?ite.avatar:headimg" class="clist_head"></image> -->
			<view class="flex1">
				<view class="flex mb14">
					<view class="tit">{{ite.nickName}}</view>
					<!-- <view class="trole">普通用户</view> -->
				</view>
				<view class="txt">所在部门：<block v-if="ite.dept">{{ite.dept.deptName}}</block></view>
				<view class="txt">手机号码：{{ite.phonenumber}}</view>
				<view class="txt">角色：
				<text v-for="(it,ids) in ite.roles">
					{{it.roleName}}<block v-if="ids!=ite.roles.length-1">/</block>
				</text>
				</view>
			</view>
			<view class="clistr" @click="getDetail(ite.userId)">
				<image :src="updataimg"></image>
			</view>
		</view>
		</block>
		<!-- 考勤记录 -->
		<block v-if="type==2">
			<!-- 记录详情 -->
			<view class="cardb" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite)">
				<view class="mb10 flexc">
					<view class="cardb_ta">{{ite.kaTime}}</view>
					<view class="line"></view>
					<view class="cardb_tb">{{weeks[ite.kaWeek]}}</view>
				</view>
				<view class="cardb_b">
					<view>
						<text class="time">{{ite.kaTimeAmIn||'上班'}}</text>
						<block v-if="ite.kaTypeAmIn==2"><text class="cor2">迟到</text>打卡</block>
						<block v-else-if="ite.kaTypeAmIn==3"><text class="cor3">外勤</text>打卡</block>
						<block v-else-if="ite.kaTypeAmIn==4"><text class="cor4">早退</text>打卡</block>
						<text v-else-if="ite.kaTypeAmIn==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
					<view><text class="time">{{ite.kaTimeAmOut||'下班'}}</text>
						<block v-if="ite.kaTypeAmOut==2"><text class="cor2">迟到</text>打卡</block>
						<block v-else-if="ite.kaTypeAmOut==3"><text class="cor3">外勤</text>打卡</block>
						<block v-else-if="ite.kaTypeAmOut==4"><text class="cor4">早退</text>打卡</block>
						<text v-else-if="ite.kaTypeAmOut==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
					<view><text class="time">{{ite.kaTimePmIn||'上班'}}</text>
						<block v-if="ite.kaTypePmIn==2"><text class="cor2">迟到</text>打卡</block>
						<block v-else-if="ite.kaTypePmIn==3"><text class="cor3">外勤</text>打卡</block>
						<block v-else-if="ite.kaTypePmIn==4"><text class="cor4">早退</text>打卡</block>
						<text v-else-if="ite.kaTypePmIn==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text></view>
					<view><text class="time">{{ite.kaTimePmOut||'下班'}}</text>
						<block v-if="ite.kaTypePmOut==2"><text class="cor2">迟到</text>打卡</block>
						<block v-else-if="ite.kaTypePmOut==3"><text class="cor3">外勤</text>打卡</block>
						<block v-else-if="ite.kaTypePmOut==4"><text class="cor4">早退</text>打卡</block>
						<text v-else-if="ite.kaTypePmOut==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
				</view>
			</view>
		</block>
		
		
		<!-- 部门管理 -->
		<view class="cardc" v-if="type=='3'">
			<view v-for="(ite,idx) in datainfo">
				<view class="cardc_ta flexc">
					<view class="flexc flex1">
						<view class="cardc_tb">{{ite.deptName}}</view>
						<view class="cardc_tc" @click="getDetail(ite)">
							<image :src="supdataimg" class="cardc_timg"></image>
						</view>
					</view>
					<view class="cardc_tc" @click.stop="getFold(idx)">
						<image :src="upimg" class="cardc_timga" :style="foldidx==idx?'transform: rotate(0deg);':''"></image>
					</view>
				</view>
				<!-- 下级部门 -->
				<view class="cardc_td" :style="foldidx==idx?'height:auto':''">
					<view   class="cardc_ta flexc nextb" v-for="(it,ix) in ite.children">
						<view class="cardc_tb nexta flex1">{{it.deptName}}</view>
						<view class="cardc_tc" @click="getDetail(it)">
							<image :src="updataimg" class="cardc_timgb"></image>
						</view>
					</view>
				</view>	
			</view>
		</view>
		
		
		<!-- 打卡记录统计 -->
		<block v-if="type=='count'">
		<view class="clist"  v-for="(ite,idx) in datainfo" style="padding-left: 28rpx;padding-right: 28rpx;">
			<view class="clistc flex">
				<view class="flex  flex1">
					<view class="tit">{{ite.name}}</view>
					<!-- <view class="trole">普通用户</view> -->
				</view>
				<view class="clistr" @click="getDetail(ite)">
					<image :src="updataimg"></image>
				</view>
			</view>
				<view class="flexc">
					<view class="cont_tflex flex1" >
						<view class="cont_tftit tc">迟到</view>
						<view class="cont_tftxt tc">{{ite.cd||0}}</view>
					</view>
					<view class="cont_tflex flex1" >
						<view class="cont_tftit tc">早退</view>
						<view class="cont_tftxt tc">{{ite.zt||0}}</view>
					</view>
					<view class="cont_tflex flex1" >
						<view class="cont_tftit tc">外勤</view>
						<view class="cont_tftxt tc">{{ite.wq||0}}</view>
					</view>
					<view class="cont_tflex flex1" >
						<view class="cont_tftit tc">未打卡</view>
						<view class="cont_tftxt tc">{{ite.wdk||0}}</view>
					</view>
				</view>
		</view>
		</block>
		<!-- 考勤规则 -->
		<block v-if="type=='rule'">
		<view class="clist" v-for="(ite,idx) in datainfo" :key="idx" style="padding-left: 20rpx;padding-rignt:20rpx"> 
			<view class="flexc">
				<view class="tit flex1">{{ite.locations}}</view>
				<view class="clistr" @click="getDetail(ite.dutyId)">
					<image :src="updataimg"></image>
				</view>
			</view>
			<view class="flex clista">
				<view class="flex0">考勤规则：</view>
				<view class="flex1 clistat">
					<view>上班时间{{ite.startWorkTime}}</view>
					<!-- <view v-if="ite.kaNum==4">下班时间{{ite.kaTimeAmOut}}</view>
					<view v-if="ite.kaNum==4">上班时间{{ite.kaTimePmIn}}</view> -->
					<view>下班时间{{ite.endWorkTime}}</view>
				</view>
			</view>
		</view>
		</block>
		<!-- 打卡详情 -->
		<block v-if="type==6">
		<view class="cardb"  v-for="(ite,idx) in datainfo" :key="idx">
			<view class="flexc">
				<view class="cardb_ta">{{ite.kaTime}}</view>
				<view class="line"></view>
				<view class="cardb_tb">{{weeks[ite.kaWeek]}}</view>
			</view>
			<view class="flex clista">
				<view class="flex0">打卡时间：</view>
				<view class="flex1 clistat">
					<view>
						<text class="time">{{ite.kaTimeAmIn||'上班'}}</text>
						<block v-if="ite.kaTypeAmIn==2"><text class="cor2">迟到</text></block>
						<block v-else-if="ite.kaTypeAmIn==3"><text class="cor3">外勤</text></block>
						<block v-else-if="ite.kaTypeAmIn==4"><text class="cor4">早退</text></block>
						<text v-else-if="ite.kaTypeAmIn==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
					<view><text class="time">{{ite.kaTimeAmOut||'下班'}}</text>
						<block v-if="ite.kaTypeAmOut==2"><text class="cor2">迟到</text></block>
						<block v-else-if="ite.kaTypeAmOut==3"><text class="cor3">外勤</text></block>
						<block v-else-if="ite.kaTypeAmOut==4"><text class="cor4">早退</text></block>
						<text v-else-if="ite.kaTypeAmOut==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
					<view><text class="time">{{ite.kaTimePmIn||'上班'}}</text>
						<block v-if="ite.kaTypePmIn==2"><text class="cor2">迟到</text></block>
						<block v-else-if="ite.kaTypePmIn==3"><text class="cor3">外勤</text></block>
						<block v-else-if="ite.kaTypePmIn==4"><text class="cor4">早退</text></block>
						<text v-else-if="ite.kaTypePmIn==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text></view>
					<view><text class="time">{{ite.kaTimePmOut||'下班'}}</text>
						<block v-if="ite.kaTypePmOut==2"><text class="cor2">迟到</text></block>
						<block v-else-if="ite.kaTypePmOut==3"><text class="cor3">外勤</text></block>
						<block v-else-if="ite.kaTypePmOut==4"><text class="cor4">早退</text></block>
						<text v-else-if="ite.kaTypePmOut==5" class="cor5">未打卡</text>
						<text v-else class="cor5">未打卡</text>
					</view>
				</view>
			</view>
		</view>
		</block>
		<!-- 角色管理 -->
		<!-- <block v-if="type==7">
			
			<view class=" flexc mb10 rolebox" :class="checkflag?'roleboxtrans':''" v-for="(ite,idx) in datainfo" :key="idx" @click="getChose(idx)">
				<view class="datachek flex0" v-if="checkflag">
					<image :src="choseimg" v-if="ite.check"></image>
					<image :src="chosenimg" v-else></image>
				</view>
			
				<view class="clist  flex"  style="margin-bottom: 0;width: 682rpx;flex: 1 0 auto;">
				<view class="flex1">
					<view class="flex mb16">
						<view class="tit">{{ite.roleName}}</view>
					</view>
					<view class="txt">角色编号：{{ite.roleId}}</view>
					<view class="txt">角色权限：{{ite.roleKey}}</view>
					<view class="txt">状态：{{ite.status == null? '' : ite.status=='0'?'正常':'停用' }}
					</view>
				</view>
				<view class="clistr" @click.stop="getDetail(ite)">
					<image :src="updataimg"></image>
				</view>
			</view>
			</view>
		</block> -->
		<view class="shax">{{wtdt}}</view>
	</block>
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			rolelist:{   //角色
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			checkflag:{
				type:Boolean,
				default () {
					return false
				}
			}
		},
		data(){
			return{
				headimg:require("@/work/static/clock/nhead.png"),
				updataimg:require("@/work/static/clock/upimg.png"),
				noiconpimg:require("@/work/static/clock/noiconp.png"),
				supdataimg:require("@/work/static/clock/updata.png"),
				upimg:require("@/work/static/clock/upe.png"),
				downimg:require("@/work/static/clock/down.png"),
				foldidx:-1,
				list:[{tit:'董事会',children:[{tit:'行政部'},{tit:'行政部1'}]},{tit:'董事会1',children:[{tit:'行政部'},{tit:'行政部1'}]}],
				weeks: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				
			}
		},
		mounted() {
			console.log(this.datainfo)
		},
		methods:{
			getDetail(e){
				this.$emit('getdetail',e)
			},
			getFold(idx){
				if(this.foldidx==idx){
					this.foldidx=-1
				}else{
					this.foldidx=idx
				}
			},
			getChose(idx){
				this.datainfo[idx].check=!this.datainfo[idx].check;
				var newKarr=[]
				var newArr=this.datainfo;
				newArr.forEach((ite,idx)=>{
					if(ite.check){
						newKarr.push(ite.roleId)
					}
				})
				this.$emit("getChose",newKarr)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cardbox{padding:32rpx 34rpx 0;}
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}

.clist{background: #FFFFFF;
box-shadow: 0px 4rpx 6rpx 0px rgba(189,189,189,0.35);margin-bottom: 20rpx;
border-radius: 10rpx;padding: 32rpx 24rpx 20rpx 36rpx;
	.clist_head{width: 56rpx;height: 56rpx;margin-right: 26rpx;flex: 0 0 auto;background: #1678FF;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #FFFFFF;border-radius: 12rpx;}

	.mb16{margin-bottom: 32rpx;}
	.mb14{margin-bottom: 28rpx;}
	.tit{font-size: 30rpx;font-weight: bold;color: #343434;}
	.trole{margin-left: 20rpx;height: 38rpx;background: #E9EFFD;font-size: 30rpx;font-weight: 500;color: #667087;padding: 0 12rpx;line-height: 38rpx;}
	.txt{font-size: 30rpx;color: #343434;line-height: 32rpx;margin-bottom: 16rpx;}

	.clistr{width: 48rpx;height: 48rpx;display: flex;justify-content: center;
	image{width: 8rpx;height: 32rpx;}
	}
}
.clista{padding:20rpx 0 12rpx;
	.clistat{display: flex;flex-wrap: wrap;
		view{width: 50%;}
	}
	view{font-size: 30rpx;color: #343434;line-height: 48rpx;}
}

.cardb{background: #FFFFFF;box-shadow: 0px 4rpx 6rpx 0px rgba(189,189,189,0.35);border-radius: 10rpx;padding:36rpx 30rpx 20rpx;margin-bottom: 20rpx;
	.cardb_ta{font-weight: bold;color: #343434;font-size: 32rpx;}
	.line{margin: 0 22rpx;width: 2rpx;height: 26rpx;background-color: #CDCDCD;}
	.cardb_tb{height: 38rpx;background: #00B034;border-radius: 6rpx;min-width: 98rpx;padding: 0 12rpx;box-sizing: border-box;font-size: 32rpx;color: #FFFFFF;line-height: 38rpx;}
	.cardb_b{display: flex;flex-wrap: wrap;
		view{padding: 10rpx 0;font-size: 30rpx;color: #343434;width: 50%;}
		.cor4{color: $uni-katype4;}
		.cor3{color: $uni-katype3;}
		.cor2{color: $uni-katype2;}
		.cor5{color: $uni-katype5;}
		.cor34{color: #343434;}
		.time{display: inline-block;}
	}
}

.cardc{
	.cardc_ta{background: #FFFFFF;box-shadow: 0px 4rpx 6rpx 0px rgba(189,189,189,0.35);border-radius: 10rpx;padding: 0 24rpx 0 36rpx;min-height: 84rpx;box-sizing: border-box;margin-bottom: 24rpx;
	&.nextb{background: #D6E2F2;}
	.cardc_tb{font-weight: 500;font-size: 34rpx;color: #343434;margin-right: 6rpx;
		&.nexta{padding-left: 20rpx;font-weight: 500;}
	}
	.cardc_tc{width: 48rpx;height: 48rpx;display: flex;justify-content: center;align-items: center;
		.cardc_timg{width: 28rpx;height: 28rpx;}
		.cardc_timga{width: 24rpx;height: 16rpx; transform: rotate(180deg);
			  transition: all .5s;}
		.cardc_timgb{width: 10rpx;height: 38rpx;}
	}
	
	}
	.cardc_td{height: 0rpx;overflow: hidden;}
}




.cont_tflex{padding:20rpx 0 14rpx;justify-content: center;
	.cont_tftit{font-size: 28rpx;color: #666666;margin-bottom: 20rpx;}
	.cont_tftxt{font-size: 34rpx;
	 &.cor1{color:$uni-katype1;}
	 &.cor2{color:$uni-katype2;}
	 &.cor3{color:$uni-katype3;}
	 &.cor4{color:$uni-katype4;}
	 &.cor5{color:$uni-katype5;}
	}
}
.datachek{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 32rpx;position: absolute;left: -60rpx;top:50%;margin-top: -20rpx;
	image{width: 40rpx;height: 40rpx;}
}
.rolebox{transition: all .5s;margin-left: 0rpx;position: relative;}
.roleboxtrans{margin-left: 60rpx;}
// 无数据
.nodata{
	padding-top: 200rpx;display: flex;flex-direction: column;align-items: center;
	image{width: 472rpx;height: 308rpx;margin-bottom: 48rpx;}
	view{font-size: 30rpx;color: #343434;font-weight: bold;}
}
</style>