zhdt-miniapp/pages/zf-task-list/sampleRandom/index.vue

<template>
	<view class="home padding-bottom">
		<cu-custom class="home-custom" bgColor=".bg-sancolor"
				   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png" :isBack="true">
			<block slot="content">企业抽检</block>
		</cu-custom>
		<view class="cu-form-group solid-bottom">
			<view class="title text-xl text-bold">
				<text class="cuIcon cuIcon-titles text-blue"></text>
				抽样主体列表
			</view>
			<view>抽样批次数：
				<text class="text-bold text-lg">{{ batchNumber }}</text>
			</view>
		</view>
		<view class="padding-sm" style="margin-bottom: 130rpx">
			<view class="cu-list menu margin-top-sm taskDetail bg-white"
				  v-for="(item, index) in sampleList" :key="index">
				<view class="cu-item">
					<view class="content text-black text-bold">
						<text class="cuIcon-titles text-green">{{ index + 1 }}.</text>
						{{ item.bySampleUnitName }}
					</view>
					<view class="action">

					</view>
				</view>
				<view class="content padding-sm detail solid-bottom">
					<view class="text-bold text-orange">当前状态：{{ setSampleStatus(item.sampleStatus) }}</view>
					<view>抽检样品：{{ item.mustProductName }}
					</view>
					<view>负责人：{{ item.bySampleContactName }}</view>
					<view>联系电话：{{ item.bySampleContactPhone }}</view>
					<view style="height: auto">企业地址：{{ item.bySampleAddress.replaceAll(",", "").replaceAll(" ", "")
						}}
					</view>
				</view>
				<view class="tools" style="justify-content: space-between">
					<view>
					</view>
					<!--                    <view class="tool" v-if="item.ahTasks.status ==='TASK_RUNNING'"
											  @tap="handleTaskDetail(item)">
											<view class="cu-tag bg-blue light text-df text-bold">去抽样 >></view>
										</view>-->

					<view class="tool" @tap="toFillSample(item)">
						<view class="text-blue text-df text-bold text">
							{{ getBtnName(item.sampleStatus) }}>>
						</view>
					</view>
				</view>
			</view>
			<view class="radius shadow-warp bg-white text-lg" v-if="sampleList.length === 0">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="content">
							<view class="text-sm text-center" style="justify-content: center;">
								<text class="text-cut text-lg">
									<text class="cuIcon-warn text-yellow margin-right-xs text-xl"></text>
									未添加抽检主体数据
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="padding flex flex-direction padding-bottom-xl fixedFootBtn bg-white padding-top">
			<button class="cu-btn bg-blue lg shadow-blur" type="" @tap="showFirstProductChoose"
					:disabled="sampleList.length >= batchNumber">抽取抽检主体
			</button>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName==='productListModal'?'show':''">
			<view class="cu-dialog" @tap.stop.prevent>
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="content text-bold">选择抽检样品</view>
				</view>
				<view class="bg-white">
					<view class="cu-bar search bg-white">
						<view class="search-form radius text-left">
							<text class="cuIcon-search"></text>
							<input type="text" placeholder="输入样品名称搜索" confirm-type="search"
								   v-model="queryProName" />
							<text class="cuIcon cuIcon-close endClass text-xxl text-bold" @tap="resetQymcQuery"
								  v-show="queryProName !== ''"></text>
						</view>
						<view class="action"><!-- 全部的按钮 -->
							<button class="cu-btn bg-green shadow-blur round" @tap="searchProduct">搜索</button>
						</view>
					</view>
					<scroll-view scroll-y class="productScroll padding" @scrolltolower="getProductList">
						<radio-group @change="productNameChange">
							<view class="flex flex-wrap">
								<view class="basis-df padding-xs text-left" v-for="(item,index) in productList"
									  :key="index">
									<checkbox :value="item.productName" class="radio" :id="'productName'+index"
											  :checked="sampleRandom.productName === item.productName"></checkbox>
									<label :for="'productName'+index">{{ item.productName }}</label>
								</view>
							</view>
						</radio-group>
					</scroll-view>

				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName==='SureProductNameModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">抽检企业</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-left padding-right padding-bottom-sm cu-list menu bg-white">
					<view class="cu-form-group">
						<view class="title">抽样样品名称</view>
						<picker :disabled="true" @tap="modalName = 'productListModal'">
							<view class="picker">
								{{ sampleRandom.productName }}
							</view>
						</picker>
					</view>
					<view class="cu-form-group" v-if="!isCounty">
						<view class="title">所属区域</view>
						<picker :range="regionArray" @change="RegionChange"
								:value="selectIndex">
							<view class="picker">
								{{ regionArray[selectIndex] || "请选择区域" }}
							</view>
						</picker>
					</view>
					<view class="cu-form-group solid-bottom">
						<view class="title">抽检主体数量</view>
						<input type="number" v-model.trim="sampleRandom.enterprisesNum"
							   placeholder="请输入抽检主体数量">
					</view>
					<view class="text-right padding-right text-gray padding-top-sm"
						  v-show="lastCmpNum !== null && lastCmpNum >= 0">
						<text>剩余可抽取主体：
							<text class="text-bold text-lg">{{ lastCmpNum }}</text>
							家
						</text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-green lg shadow-blur" type="" @tap="getEnterprisesList"
							:disabled="lastCmpNum == null || lastCmpNum === 0">抽取
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='onSureSampleEnterpriseModel'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">待确认抽检主体</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-left padding-right padding-bottom-sm cu-list menu bg-white">
					<scroll-view class="text-content" scroll-y>
						<view class="cu-item">
							<view class="title text-black text-bold text-lg text-left"
								  v-for="(item,index) in onSureEnterpriseList"
								  :key="index">
								<text class="cuIcon-title text-green margin-right-xs"></text>
								<text>{{ item.enterprisesName }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="cu-bar bg-green light" @tap="createSampleSheetList">
					<view class="action margin-0 flex-sub">确认</view>
				</view>
			</view>
		</view>
	</view>


</template>


<script>
import {
	_sampleRandom
} from "./sample-random-model";
import { _taskList } from "../../task-list/task-list-model";

export default {
	data() {
		return {
			taskId: null,
			sampleCheckId: null,
			batchNumber: 0,
			sampleRandom: {
				productName: "",
				enterprisesNum: ""
			},
			onSureEnterpriseList: [],
			productList: [],
			taskListData: [],
			taskTypeList: [],
			taskDetailList: [],
			taskStatus: [],
			modalName: null,
			xzqdm: null,
			pageTotal: 1,
			totalCount: 0,
			page: 1,
			size: 40,
			samplePage: 1,
			sampleSize: 10,
			samplePageTotal: 1,
			sampleTotalCount: 0,
			sampleList: [],
			zfrSelected: [],
			serviceZfrSelected: [],
			queryProName: "",
			subXzqList: [],
			selectIndex: null,
			lastCmpNum: null,
			sampleStatus: [],
			isCounty:false
		};
	},
	onLoad(param) {
		this.page = 1;
		this.pageTotal = 1;
		this.taskId = param.taskId;
		this.batchNumber = param.batchNumber;
		this.sampleCheckId = param.sampleCheckId;
		this.xzqdm = param.sampleId;
		if (this.xzqdm.endsWith("000") && !this.xzqdm.endsWith("00000")) {
			this.isCounty = true;
		}
		this.getProductList();
		this.getSampleCheckList();
		this.initXzqRange();
		this.getSampleStatus();
	},
	computed: {
		regionArray() {
			return this.subXzqList.map(v => v.xzqmc);
		},
		selectXzqCode() {
			if(this.isCounty){
				return this.xzqdm;
			} else {
				if (this.selectIndex !== null) {
					return this.subXzqList[this.selectIndex].xzqdm;
				}
			}

		}
	},
	methods: {
		showFirstProductChoose() {
			this.sampleRandom.enterprisesNum = null;
			this.sampleRandom.productName = null;
			this.modalName = "productListModal";
		},
		getSampleCheckList() {
			if (this.samplePage === 1 || (this.samplePage <= this.samplePageTotal)) {
				_sampleRandom.getSampleCheckList({
					pageNum: this.samplePage,
					pageSize: this.sampleSize,
					sampleCheckId: this.sampleCheckId
				}, res => {
					const { data, message, code } = res;
					if (code === 200) {
						const { records, total } = data;
						this.sampleTotalCount = total;
						this.samplePageTotal = Math.ceil(total / this.sampleSize);
						if (this.samplePage === 1) {
							this.sampleList = records;
						} else {
							this.sampleList = this.sampleList.concat(records);
						}
						this.samplePage++;
					} else {
						uni.showToast({
							icon: "none",
							title: message,
							duration: 1000
						});
					}
				});
			}
		},

		searchProduct() {
			this.page = 1;
			this.pageTotal = 1;
			this.getProductList();
		},
		resetQymcQuery() {
			this.queryProName = "";
			this.searchProduct();
		},
		getProductList() {
			if (this.page === 1 || (this.page <= this.pageTotal)) {
				_sampleRandom.getProductList({
					pageNum: this.page,
					pageSize: this.size,
					xzqCode: this.xzqdm,
					productName: this.queryProName
				}, res => {
					const { data, message, code } = res;
					if (code === 200) {
						const { list, total } = data;
						this.totalCount = total;
						this.pageTotal = Math.ceil(total / this.size);
						if (this.page === 1) {
							this.productList = list;
						} else {
							this.productList = this.productList.concat(list);
						}
						this.page++;
					} else {
						uni.showToast({
							icon: "none",
							title: message,
							duration: 1000
						});
					}
				});
			}
		},
		getEnterPrisesNum() {
			if (this.selectXzqCode !== "" && this.selectXzqCode !== null && this.sampleRandom.productName) {
				_sampleRandom.getEnterPrisesNum({
					xzqCode: this.selectXzqCode,
					productName: this.sampleRandom.productName
				}, res => {
					this.lastCmpNum = res.data;
				});
			} else {
				this.lastCmpNum = null;
			}

		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
			_sampleRandom.getTaskSampleDetail(e.currentTarget.dataset.taskid, res => {
				this.taskDetailList = res.data.records;
			});
		},
		hideModal(e) {
			this.curTask = null;
			this.modalName = null;
		},
		createSampleSheetList() {
			if (this.onSureEnterpriseList.length <= 0) {
				this.$msg("抽检企业为空");
				return;
			}
			const postData = this.onSureEnterpriseList.map(v => {
				return {
					bySampleAddress: v.enterprisesAddress,
					bySampleContactName: v.fzrName,
					bySampleContactPhone: v.fzrPhone,
					bySampleUnitName: v.enterprisesName,
					mustProductName: this.sampleRandom.productName,
					qydm: v.qydm,
					taskId: this.taskId,
					sampleCheckId: this.sampleCheckId
				};
			});
			_sampleRandom.createSampleSheetList(postData, res => {
				const { code, message } = res;
				if (code === 200) {
					this.$msg("添加成功");
					this.modalName = null;
					this.samplePage = 1;
					this.samplePageTotal = 1;
					this.getSampleCheckList();
				} else {
					this.$msg(message);
				}
			});
		},
		getEnterprisesList() {
			// this.onSureEnterpriseList = true;
			if (!this.isCounty && this.selectIndex === null) {
				this.$msg("请选择抽样区域");
				return;
			}
			const postData = Object.assign({}, this.sampleRandom);
			if (!postData.productName) {
				this.$msg("请选择抽样样品名称");
				return;
			}
			if (parseInt(postData.enterprisesNum) <= 0 || "" + parseInt(postData.enterprisesNum) === "NaN") {
				this.$msg("请输入抽检主体数量");
				return;
			}
			if (parseInt(postData.enterprisesNum) + this.sampleList.length > this.batchNumber) {
				this.$msg("抽取企业总数不可超过抽样批次数");
				return;
			}
			if (parseInt(postData.enterprisesNum) > parseInt(this.lastCmpNum)) {
				this.$msg("抽检主体数量应小于等于剩余主体数量");
				return;
			}
			postData.xzqCode = this.selectXzqCode;
			postData.taskId = this.taskId;
			_sampleRandom.getEnterprisesList(postData, res => {
				if (!res.data || res.data.length === 0) {
					this.$msg("当前地区无可抽取企业");
				} else {
					this.onSureEnterpriseList = res.data;
					this.modalName = "onSureSampleEnterpriseModel";
				}

			});

		},
		setTaskType(taskType) {
			const taskTypeList = this.taskTypeList;
			for (let i = 0; i < taskTypeList.length; i++) {
				if (taskTypeList[i].itemValue === taskType) {
					return taskTypeList[i].itemKey;
				}
			}
		},
		setTaskStatus(value) {
			let taskStatus = this.taskStatus;
			for (let i = 0; i < taskStatus.length; i++) {
				if (taskStatus[i].itemValue === value) {
					return taskStatus[i].itemKey;
				}
			}
		},
		formatDate(dateTime) {
			return dateTime.substring(0, 10);
		},
		productNameChange(e) {
			const productName = e.detail.value;
			if (productName) {
				this.sampleRandom.productName = productName;
				this.getEnterPrisesNum();
				this.modalName = "SureProductNameModal";
			}
		},
		initXzqRange() {
			_sampleRandom.getXzqdmSubLists(this.xzqdm, city_res => {
				const { code, data } = city_res;
				if (code === 200) {
					this.subXzqList = data;
				}
			});
		},
		RegionChange(e) {
			this.selectIndex = e.detail.value;
			this.getEnterPrisesNum();
		},
		getSampleStatus() {
			_taskList.getDictionary("SAMPLE_SHEET_STATUS", res => {
				this.sampleStatus = res.data;
			});
		},
		setSampleStatus(value) {
			console.log("setSampleStatus",value);
			let sampleStatus = this.sampleStatus;
			for (let i = 0; i < sampleStatus.length; i++) {
				if (sampleStatus[i].itemValue === value) {
					return sampleStatus[i].itemKey;
				}
			}
		},
		toFillSample(item) {
			uni.navigateTo({
				url: "/pages/sample-detail/index?id=" + item.id
			});
		},
		getBtnName(status) {
			let name = "查看";
			if (status === "WAIT_SAMPLE") {
				name = "填报抽样单";
			}
			return name;
		}
	}
};
</script>

<style scoped>
.detail view {
	font-size: 31rpx;
	height: 1.8em;
	line-height: 1.8em !important;
	border: none;
}

.taskDetail {
	/*border: 1rpx solid #8799a3;*/
	box-shadow: 0 0 25upx #aaa;
	border-radius: 10rpx;
	overflow: hidden;
}

label {
	padding-left: .5em;
}

.productScroll {
	height: 30em;
	max-height: 60vh;
}

.fixedFootBtn {
	border-top: 1px solid #ddd;
	position: fixed;
	width: 100vw;
	bottom: 0;
	z-index: 1000;
}

.tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30upx;

}

.tool .text {
	font-size: 1.1em !important;
}

</style>