zhdt-miniapp/pages/quick-task/form.vue

<template>
	<view class="form">
		<view class="DrawerPage" :class="modalName=='DrawerModalL'?'show':''">
			<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>
				<view>
					<view class="cu-bar bg-white margin-top-sm solid-bottom">
					    <view class="action">
					        <text class="cuIcon-titles text-green"></text>
					        <text>产品信息</text>
					    </view>
					</view>
				    <view class="cu-form-group">
				        <view class="title">所属区域</view>
				
				        <picker mode="multiSelector" :range="regionArray" @change="RegionChange"
				                :value="regionIndex"
				                @columnchange="columnchange">
				            <view class="picker">
				                {{ queryXzq }}
				            </view>
				        </picker>
				    </view>
					<view class="cu-form-group" @tap="showModal"
					      :data-target="'DrawerModalL'">
					    <view class="title">单位名称</view>
					    <picker disabled="disabled">
					        <view class="picker">
					            {{ companyDetailInfo.bySampleUnitName || "请选择单位" }}
					        </view>
					    </picker>
					</view>
					<view class="cu-form-group" @tap="showModal"
					      :data-target="'SampleModelL'">
					    <view class="title">样品名称</view>
					    <picker disabled="disabled">
					        <view class="picker">
					            {{ sampleDetailInfo.productName || "请选择样品" }}
					        </view>
					    </picker>
					</view>
					<view class="cu-form-group" @tap="showModal"
					      :data-target="'JTJModelL'">
					    <view class="title">胶体金类型</view>
					    <picker disabled="disabled">
					        <view class="picker">
					            {{ JTJDetailInfo.name || "请选择胶体金类型" }}
					        </view>
					    </picker>
					</view>
					
					<view class="padding flex flex-direction padding-bottom-xl fixedFootBtn bg-white padding-top-xs">
					    <button class="cu-btn bg-green lg margin-top-sm shadow-blur" type="" @tap="nextSetp">
					        上报
					    </button>
					</view>
				</view>
			</view>
		</view>
		<view class="DrawerClose" :class="modalName==='DrawerModalL'?'show':''" @tap="hideModal">
		    <text class="cuIcon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow solid-right" :class="modalName==='DrawerModalL'?'show':''">
		    <view class="bg-white padding-bottom" style="min-height: 100vh">
		        <cu-custom class="home-custom" bgColor=".bg-sancolor"
		                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png">
		            <block slot="content">企业列表</block>
		        </cu-custom>
		        <view class="cu-list menu text-left">
		            <view class="cu-bar search bg-white">
		                <view class="search-form round">
		                    <text class="cuIcon-search"></text>
		                    <input type="text" placeholder="输入企业名称搜索" confirm-type="search" v-model="enterprisesName" />
		                </view>
		                <view class="action">
		                    <button class="cu-btn bg-green shadow-blur round" @tap="searchEnterPrise">搜索</button>
		                </view>
		            </view>
		        </view>
		        <view class="cu-list menu bg-white margin-top-sm" v-for="(item,index) in qyList" :key="item.qydm"
		              @tap="choseQy(index)">
		            <view class="cu-item">
		                <view class="action">
		                    <text class="cuIcon-titles text-green"></text>
		                    {{ item.enterprisesName }}
		                </view>
		            </view>
		            <view class="cu-item">
		                所属区域：<!-- {{ item.enterprisesAddress.split(" ")[0].replaceAll(",", "-") }} -->
		            </view>
		        </view>
		        <view class="cu-load bg-green light text-sm" v-show="pageTotal !==0" @tap="getEnterPriseList"
		              :class="pageNum > pageTotal?'over':'more'"></view>
		        <view class="radius shadow-warp bg-white margin-top text-lg" v-show="pageTotal === 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>
		</scroll-view>
		
		<view class="DrawerClose" :class="modalName==='SampleModelL'?'show':''" @tap="hideModal">
		    <text class="cuIcon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow solid-right" :class="modalName==='SampleModelL'?'show':''">
		    <view class="bg-white padding-bottom" style="min-height: 100vh">
		        <cu-custom class="home-custom" bgColor=".bg-sancolor"
		                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png">
		            <block slot="content">样品列表</block>
		        </cu-custom>
		        <view class="cu-list menu bg-white margin-top-sm" v-for="(item,index) in sampleList" :key="item.qydm"
		              @tap="choseSample(index)">
		            <view class="cu-item">
		                <view class="action">
		                    <text class="cuIcon-titles text-green"></text>
		                    {{ item.productName }}
		                </view>
		            </view>
		        </view>
		        <view class="cu-load bg-green light text-sm" v-show="spageTotal !==0" @tap="getSampleList"
		              :class="spageNum > spageTotal?'over':'more'"></view>
		        <view class="radius shadow-warp bg-white margin-top text-lg" v-show="spageTotal === 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>
		</scroll-view>
		
		
		<view class="DrawerClose" :class="modalName==='JTJModelL'?'show':''" @tap="hideModal">
		    <text class="cuIcon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow solid-right" :class="modalName==='JTJModelL'?'show':''">
		    <view class="bg-white padding-bottom" style="min-height: 100vh">
		        <cu-custom class="home-custom" bgColor=".bg-sancolor"
		                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png">
		            <block slot="content">胶体金类型</block>
		        </cu-custom>
				<view class="cu-list menu text-left">
				    <view class="cu-bar search bg-white">
				        <view class="search-form round">
				            <text class="cuIcon-search"></text>
				            <input type="text" placeholder="输入胶体金类型搜索" confirm-type="search" v-model="JTJName" />
				        </view>
				        <view class="action">
				            <button class="cu-btn bg-green shadow-blur round" @tap="searchJTJ">搜索</button>
				        </view>
				    </view>
				</view>
		        <view class="cu-list menu bg-white margin-top-sm" v-for="(item,index) in JTJList" :key="item.qydm"
		              @tap="choseJTJ(index)">
		            <view class="cu-item">
		                <view class="action">
		                    <text class="cuIcon-titles text-green"></text>
		                    {{ item.name }}
		                </view>
		            </view>
		        </view>
		        <view class="cu-load bg-green light text-sm" v-show="jpageTotal !==0" @tap="getJTJList"
		              :class="jpageNum > jpageTotal?'over':'more'"></view>
		        <view class="radius shadow-warp bg-white margin-top text-lg" v-show="jpageTotal === 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>
		</scroll-view>
	</view>
</template>

<script>
	import { _sampleDetail } from "../sample-detail/sample-detail-model.js";
	export default {
	    data() {
	        return {
				regionArray: [],
				regionIndex: [],
				queryXzq: "请选择",
				xzqObjList: [],
				qyList: [],
				companyDetailInfo: {},
				modalName: null,
				enterprisesName: null,
				pageNum: 1,
				pageSize: 10,
				pageTotal: 1,
				
				sampleName: '',
				sampleList: [],
				spageNum: 1,
				spageSize: 10,
				spageTotal: 1,
				sampleDetailInfo: {},
				
				JTJName: '',
				JTJList: [],
				jpageNum: 1,
				jpageSize: 100,
				jpageTotal: 1,
				JTJDetailInfo: {},
			}
		},
		mounted() {
		    this.initRange();
		},
		methods: {
			nextSetp() {
				if(!this.queryXzqdm) {
					this.$msg("请先选择所属区域");
					return false;
				}
				if(!this.companyDetailInfo.qydm) {
					this.$msg("请先选择单位");
					return false;
				}
				if(!this.sampleDetailInfo.productName) {
					this.$msg("请先选择样品");
					return false;
				}
				if(!this.JTJDetailInfo.name) {
					this.$msg("请先选择胶体金类型");
					return false;
				}
				uni.navigateTo({
				  url: "/pages/quick-task/index"
				});
			},
			async initRange() {
			    const { unitId,name } = uni.getStorageSync("userInfo");
          let role = uni.getStorageSync("role");
          let  xzqdm;
          if(role=="f35551e4a06647dea5c2c43aaba22c2a"){
            xzqdm = unitId.substring(4, 13);
          }
          if(role=="a1cbf841b0514b47bbdd3f50c80b729f"){
            xzqdm = unitId

          }

			    let level = 0;
			    if (xzqdm.endsWith("0000000")) { //省
			        level = 3;
			    } else if (xzqdm.endsWith("00000")) { //市
			        level = 2;
			    } else if (xzqdm.endsWith("000")) { //县
			        level = 1;
			    }
          const xzqlist = await this.getSubXzqList(xzqdm);
          if(level!==0){

            xzqlist.unshift({
              xzqdm: "",
              xzqmc: "请选择"
            });

            this.regionArray.splice(0, this.regionArray.length, xzqlist.map(v => v.xzqmc));
            this.xzqObjList.splice(0, this.xzqObjList.length, xzqlist);
            this.regionIndex.splice(0, this.regionIndex.length, 0);

            for (let i = 0; i < level - 1; i++) {
              this.regionArray.push(["请选择"]);
              this.xzqObjList.push({ xzqdm: "", xzqmc: "请选择" });
              this.regionIndex.push(0);
            }
          }else{
            xzqlist.unshift({
              xzqdm: unitId,
              xzqmc: name
            });
            this.regionArray.push([name]);
            this.xzqObjList.push({ xzqdm: unitId, xzqmc: name });
            this.regionIndex.push(0);
          }


			},
			getSubXzqList(xzqdm) {
			    return new Promise(resolve => {
			        _sampleDetail.getSubXzqList(xzqdm, res => {
			            resolve(res);
			        });
			    });
			},
			RegionChange(e) {
			    this.regionIndex = e.detail.value;
			    let xzqdm = "", xzqmc = [];
			    for (let i = 0; i <= this.regionIndex.length - 1; i++) {
			        if (this.regionArray[i][this.regionIndex[i]] !== "请选择") {
			            xzqmc.push(this.regionArray[i][this.regionIndex[i]]);
			            xzqdm = this.xzqObjList[i][this.regionIndex[i]].xzqdm;
			        }
			    }
			    this.queryXzqdm = xzqdm;
			    this.queryXzq = xzqmc.join("/");
			},
			async columnchange(e) {
			    const { column, value } = e.detail;
			    const xzqdm = this.xzqObjList[column][value]["xzqdm"];
			    if (xzqdm) {
			        if (column <= this.regionIndex.length - 2) {
			            const subList = await this.getSubXzqList(xzqdm);
			            subList.unshift({
			                xzqdm: "",
			                xzqmc: "请选择"
			            });
			            this.xzqObjList.splice(column + 1, 1, subList); //逐级push-乡镇
			            this.regionIndex.splice(column + 1, 1, 0);
			            this.regionArray.splice(column + 1, 1, subList.map(v => v.xzqmc));
			            for (let i = column + 2; i < this.regionIndex.length; i++) {
			                this.xzqObjList.splice(i, 1, [{ xzqdm: "", xzqmc: "请选择" }]); //逐级push-乡镇
			                this.regionIndex.splice(i, 1, 0);
			                this.regionArray.splice(i, 1, ["请选择"]);
			            }
			        }
			    } else {
			        for (let i = column + 1; i < this.regionIndex.length; i++) {
			            this.xzqObjList.splice(i, 1, [{ xzqdm: "", xzqmc: "请选择" }]); //逐级push-乡镇
			            this.regionIndex.splice(i, 1, 0);
			            this.regionArray.splice(i, 1, ["请选择"]);
			        }
			    }
			
			},
			showModal(e) {
			    const modalName = e.currentTarget.dataset.target;
			    if (modalName === "DrawerModalL") {
					if(!this.queryXzqdm) {
						this.$msg("请先选择所属区域");
						return false;
					}
			        this.getEnterPriseList();
			    } else if (modalName === "SampleModelL") {
					if(!this.companyDetailInfo.qydm) {
						this.$msg("请先选择单位");
						return false;
					}
					this.getSampleList()
            console.log(this.sampleList)
				} else if (modalName === "JTJModelL") {
					this.getJTJTypeList()
				}
			    this.modalName = modalName;
			},
			choseQy(index) {
			    const {
			        enterprisesName: bySampleUnitName,
			        qydm,
			    } = this.qyList[index];
			    this.companyDetailInfo.bySampleUnitName = bySampleUnitName;
			    this.companyDetailInfo.qydm = qydm;
			    this.modalName = null;
				uni.setStorageSync("enterprisesInfo", {
					enterprisesName: bySampleUnitName,
					qydm
				});
			},
			choseSample(index) {
				this.sampleDetailInfo = {
					...this.sampleList[index]
				}
				this.modalName = null;
				uni.setStorageSync("sampleInfo", this.sampleDetailInfo);
			},
			choseJTJ(index) {
				this.JTJDetailInfo = {
					...this.JTJList[index]
				}
				this.modalName = null;
				uni.setStorageSync("JTJInfo", this.JTJDetailInfo);
			},
			hideModal(e) {
			    this.modalName = null;
			},
			searchEnterPrise() {
			    this.pageNum = 1;
			    this.pageTotal = 1;
			    this.getEnterPriseList();
			},
			searchJTJ() {
				this.jpageNum = 1;
				this.jpageTotal = 1;
				this.getJTJTypeList();
			},
			getEnterPriseList() {
			    const param = {
			        pageNum: this.pageNum,
			        pageSize: this.pageSize,
			        towns: this.queryXzqdm
			    };
			    if (this.enterprisesName) {
			        param.enterprisesName = this.enterprisesName;
			    }
			    _sampleDetail.getEnterPriseList(param, res => {
			        const { data, message, code } = res;
			        if (code === 200) {
			            const { records, total } = data;
			            this.pageTotal = Math.ceil(total / this.pageSize);
			            if (this.pageNum === 1) {
			                this.qyList = records;
			            } else {
			                this.qyList = this.qyList.concat(records);
			            }
			            this.pageNum++;
			        } else {
			            uni.showToast({
			                icon: "none",
			                title: message,
			                duration: 1000
			            });
			        }
			    });
			},
			getSampleList() {
				const param = {
				    pageNum: this.spageNum,
				    pageSize: this.spageSize,
				    qydm: this.companyDetailInfo.qydm
				};
				_sampleDetail.getSampleByCompany(param, res => {
				    const { data, message, code } = res;

				    if (code === 200) {
				        const { records, total } = data;
                console.log(records)
				        this.spageTotal = Math.ceil(total / this.spageSize);
				        if (this.spageNum === 1) {
				            this.sampleList = records;
                    console.log(this.sampleList)
				        } else {
				            this.sampleList = this.sampleList.concat(records);
				        }
				        this.spageNum++;
				    } else {
				        uni.showToast({
				            icon: "none",
				            title: message,
				            duration: 1000
				        });
				    }
				});
			},
			getJTJTypeList() {
				const param = {
					pageNum: this.jpageNum,
					pageSize: this.jpageSize
				}
				_sampleDetail.getJTJTypeList(param, res => {
					const { data, message, code } = res;
					if (code === 200) {
					    const { records, total } = data;
					    this.jpageTotal = Math.ceil(total / this.jpageSize);
					    if (this.jpageNum === 1) {
					        this.JTJList = records;
					    } else {
					        this.JTJList = this.JTJList.concat(records);
					    }
					    this.jpageNum++;
					} else {
					    uni.showToast({
					        icon: "none",
					        title: message,
					        duration: 1000
					    });
					}
				})
			}
		}
	}
</script>

<style>
</style>