ybxf-security-uniapp/pagesA/fire/inspection_active/index.vue

<template>
	<view class="content uni-container">
		<view class="content-item">
			<!-- <lunc-calendar ref="calendar" :showLunar="true" :showMonthBg="true" :showShrink="true" :signList="signList"
				@dayChange="dayChange" weekType="星期" @monthChange="monthChange" @shrinkClick="shrinkClick">
			</lunc-calendar> -->
			<u-list v-if="tableDatas.length>0 && isLoaded">
				<!-- 	<u-list-item v-for="(item, index) in tableData.daySign" :key="index" @click.native="onClick(item)" link>
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%"> 
						<uni-col :span="12"><text class="text-df  ">{{ item.title }}</text></uni-col>
						<uni-col :span="12">
							<text class="justify-end flex">{{item.date}}</text>
						</uni-col>
					</uni-row>
				</u-list-item> -->
				<!-- 	<uni-card v-for="(item, index) in tableData.daySign" :key="index" @click="onClick(item)">
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24"><text class="text-df  ">{{ item.title }}</text></uni-col>
					</uni-row>
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24">任务说明：
						 <rich-text :nodes="item.taskContent?item.taskContent:''"
								class="conts"></rich-text>
						</uni-col>
					</uni-row> 
				</uni-card> -->
				<uni-card v-for="(item, index) in tableDatas" :key="index">
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24"><text class="text-df name-align-daily"
								style="font-weight:600">任务名称:</text><text>{{ item.taskName }}</text></uni-col>
						<uni-col :span="24" style="display: flex;"><text style="font-weight:600" class="name-align-daily">任务说明:</text><rich-text
								:nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
						</uni-col>
						<uni-col :span="24"><text style="font-weight:600" class="name-align-daily">任务发布者:</text><text>{{item.senderName}}</text>
						</uni-col>
					</uni-row>
					<!-- <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
					<uni-col :span="24">任务说明:{{item.taskContent}}
					</uni-col>
				 </uni-row> -->
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24">
							<view class="flex btn-box" style="width: 80%;float: right;">
								<u-button shape="circle" size="small" color="#F7C41E" text="查看详情"
									@click="addClickDetail(item.broadId)"></u-button>
								<u-button shape="circle" size="small" color="#4CB2B6" text="去完成"
									@click="addClickModify(item)"></u-button>
								<u-button shape="circle" size="small" color="#4CB2B6" text="转发任务"
									@click="forward(item)"></u-button>
							</view>
						</uni-col>
					</uni-row>
				</uni-card>
			</u-list>
			<view v-else-if="tableDatas.length==0 && isLoaded" style="text-align: center;">
				<view class="text-gray" style="padding-top: 20px;">
					<img :src="tan90" alt="暂无数据" />
				</view>
			</view>
			<!-- <view class="button" @click="addSign">新增标记</view>
			<view class="button" @click="deleteSign">修改标记</view> -->
		</view>
		<!-- 单位进来转发任务显示人员 -->
		<u-popup :show="checkboxShow2" :round="10" @close="checkboxShow2=false" style="position: relative;"
			mode="center">
			<view style="width: 90vw;padding: 10px;">
				<text class="text-xl">检查人员</text>
				<view class="" class="person-forward">
					<u-checkbox-group v-model="item.checkboxValue1" v-for="(item, index) in personInfo" :key="index"
						placement="column" @change="checkboxChange2(item.id,$event)">
						<u-checkbox :customStyle="{marginBottom: '8px'}" :label="item.nickname" :name="item.id">
						</u-checkbox>
					</u-checkbox-group>

				</view>
				<view class="flex flex-direction-row " style="margin: 30rpx 0;">
					<u-button shape="circle" type="primary" color="#4CB2B6" text="确定" @click="checkboxConfirm2"
						customStyle="margin-right:20px;padding:0 30px">
					</u-button>
					<u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle" @click="checkboxCancel2"
						customStyle="padding:0 30px">
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import luncCalendar from "@/components/calendar/calendar.vue"
	import {
		getCheckActiveList,
		getCheckActivePendList, // 主动检查提交历史列表
		draftTask, //获取草稿箱任务列表
		taskList, //获取除草稿箱以外的列表  //获取当前日期的任务列表
		saveCheckRelease, //发布任务
		deleteTask, //删除任务
		addCheckActiveCompany, //获取单位
		checkSubmitForwardTask, //确认转发任务
		checkGetPerson, //单位转发任务获取人员
		verifytask //审核
	} from "@/api/check_active";
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		components: {
			luncCalendar
		},
		data() {
			return {
				tan90: `${baseUrlImg}/tan90.png`,
				isLoaded: false,
				tableData: [],
				is_loading: false,
				ids: '', //当前点击转发任务的id
				FormDataTask: {
					"broadId": 0,
					"deptId": [],
					"id": 0,
					"orgId": [],
					"sender": this.$store.state.user.id,
					"receiver": [],
					"status": 0,
					"taskContent": "",
					"taskName": "",
					"taskStatus": 0,
					"taskType": "1" //任务类型 1对应主动检查
				},
				checkboxShow2: false, //待完成转发弹窗
				personInfo: [], //转发任务的人员信息
				loading: false,
				tableDatas: [], //任务数据
				formData: {
					pageNo: 1,
					pageSize: 10,
					receivDate: '',
					receiver: this.$store.state.user.id,
					taskType: "3"
				}
			}
		},
		onShow() {
			this.tableDatas = []
			// this.tableD
			const date = new Date()
			this.formData.receivDate = uni.$u.timeFormat(date, 'yyyy-mm-dd')
			this.getData(this.formData.pageNo)
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			// dayChange(dayInfo) { // 点击日期 
			// 	// this.is_loading=true
			// 	this.tableData = JSON.parse(JSON.stringify(dayInfo))
			// 	this.formData.receivDate = this.tableData.date
			// 	// console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
			// 	// console.log(this.formData.receivDate,);
			// 	this.getData(this.formData.pageNo)
			// 	// uni.navigateTo({
			// 	// 	url: '/pagesA/fire/check_active/check_implement/check_implement',
			// 	// })
			// },

			getData(pageNo) {
				this.loading = true
				this.pageNo = pageNo
				taskList(JSON.stringify(this.formData)).then(response => {
					this.isLoaded = true
					this.tableDatas = [...this.tableDatas, ...response.data.list]
					this.loading = false
					// this.tableDatas = response.data.list
				})
			},
			monthChange(monthInfo) { // 切换月份
			},
			shrinkClick(type) {
			},
			addSign() { // 添加标记
				let addList = [{
					date: "2023-2-28",
					title: "休息"
				}, {
					date: "2023-2-25",
					title: "上班"
				}];
				// 调用 addSignList 方法，传入需要添加的标记数组
				this.$refs.calendar.addSignList(addList);
			},
			deleteSign() { // 删除标记
				let deleteList = [{
					date: "2023-2-28",
					title: "休息"
				}];
				// 调用 deleteSignList 方法，传入需要删除的标记数组
				this.$refs.calendar.deleteSignList(deleteList);
			},
			// ================================================================
			//查看详情
			addClickDetail(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/check_active/check_list/check_list?id=${val.id}&current=${this.current}`,
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				})
			},
			//去完成
			addClickModify(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/check_active/check_implement/check_implement?broadId=${val.broadId}`,
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				})
			},
			//转发
			forward(val) { //展示转发的弹出层
				this.ids = val.id //当前点击任务的id
				this.checkboxShow2 = true
				this.FormDataTask.broadId = val.broadId
				this.FormDataTask.id = this.ids
				this.FormDataTask.taskName = val.taskName
				this.FormDataTask.taskStatus = val.taskStatus
				this.FormDataTask.taskContent = val.taskContent
				this.FormDataTask.orgId.push(val.orgId)
				checkGetPerson({
					orgId: val.orgId
				}).then(response => {
					this.personInfo = response.data
				})
			},
			//popup检查单位确定============
			checkboxConfirm2() {
				checkSubmitForwardTask(JSON.stringify(this.FormDataTask)).then(response => {
					if (response.data) {
						this.$modal.msg('转发成功')
						this.checkboxShow2 = false
					} else {
						this.$modal.msgError(response.msg)
					}
				})
			},
			//popup取消
			checkboxCancel2() {
				this.checkboxShow2 = false
			},
			// =====================================================
			onClick(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: '/pagesA/fire/inspection_active/inspection_details/inspection_details?id=' + val.id,
				})
			}
		},
		// 触底的事件
		onReachBottom() {
			// 判断是否还有下一页数据
			if (this.formData.pageNo * this.formData.pageSize >= this.total) return;
			// if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 	title: `数据加载完毕`
			// })
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return;
			this.formData.pageNo += 1;
			this.getData(this.formData.pageNo);
		}

	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	.uni-container {
		height: 100%;
		background-color: #f5f7f9;
	}

	::v-deep .u-list {
		height: auto !important;
	}

	::v-deep .u-list-item {
		background: #fff !important;
		margin: 0px !important;
		padding: 0px !important;
		border-radius: 12px !important;
		box-shadow: 0px 0px 3px 0px #FFFFFF !important;
	}

	.btn-box button {
		margin: 0rpx 6rpx;
	}

	//转发任务

	/deep/.u-checkbox__icon-wrap--square[data-v-532d01c7],
	/deep/.u-checkbox__icon-wrap--square.data-v-532d01c7,
	/deep/.u-checkbox__icon-wrap--square {
		//转发复选框的颜色
		border-color: #4CB2B6 !important;
	}

	/deep/.u-button[data-v-3bf2dba7],
	/deep/.u-button.data-v-3bf2dba7,
	/deep/.u-button {
		//按钮大小
		width: 33% !important;
	}

	/deep/ .u-checkbox-group {
		width: 33%;
		// justify-content: flex-end;
	}

	.person-forward {
		padding-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.conts {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}
	.content-item{
		width: 100%;
	}
</style>