integrated_traffic_uniapp/pages/application/driving-inspections/dirving-inspections-list.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
			<block slot="backText">返回</block>
			<block slot="content">行车三检</block>
		</cu-custom>
		<view class="top-fixed">
		  <view>
			<view class="cu-bar search bg-white">
				<view class="search-form radius" style="margin-left: 0;">
					<text class="cuIcon-search"></text>
					<input v-model="KEYWORDS" placeholder="请输入"></input>

				</view>
				<button class="cu-btn bg-green shadow-blur radius" @click="search()">搜索</button>
				<button class="cu-btn bg-blue shadow-blur radius" @click="reset()" style="margin-left: 10px">重置</button>
			</view>
			<view class="line"></view>
		  </view>
		</view>
		<block >
			<scroll-view class="dy-scroll-nobg"  scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
				<view v-if="list.length>0" >
					<view class="dy-card" v-for="item in list" :key="item.LISTMANAGER_ID" @click="$noMultipleClicks(goToList,{listId:item.WAYBILLREGISTRATION_ID,WAYBILLSTATUS:item.WAYBILLSTATUS})">
						<view class="dy-card-title">
							<text><text style="margin-right: 10upx;color: #07BB07;">★</text>{{item.WAYBILLNUMBER}}</text>
							<text class="cuIcon-right f30 text-gray"></text>
						</view>
						<view class="dy-card-content">
							<view class="dy-sub-stitle">
								<text class="text-grey">运输车辆：{{item.TRANSPORTVEHICLE}}</text>
								<text class="text-grey">承运日期：{{item.SHIPPINGDATE}}</text>

							</view>
							<view class="dy-sub-stitle">
								<text class="text-grey">委托方：{{item.CLIENT_NAME}}</text>
								<text class="text-grey">确认方：{{item.CONFIRMER_NAME}}</text>
							</view>
							<view class="dy-sub-stitle">
								<text class="text-grey">起运地：{{item.ORIGIN_NAME}}</text>
								<text class="text-grey">目的地：{{item.DESTINATION_NAME}}</text>
							</view>
							<view class="text-grey">
								<text>运单状态:
									<div  class="cu-tag bg-yellow radius" v-if="item.WAYBILLSTATUS == 0">出车前</div>
									<div class="cu-tag bg-green radius" v-else-if="item.WAYBILLSTATUS == 1" >行车中</div>
									<div class="cu-tag bg-blue radius" v-else-if="item.WAYBILLSTATUS == 2">收车后</div>
									<div class="cu-tag bg-blue radius" v-else-if="item.WAYBILLSTATUS == 3">待承诺</div>
								</text>

							</view>
						</view>
					</view>
				</view>
				<view v-else-if="dataFlag=='noData'" class="dy-null">
					<view class="dy-null-img">
						<image :src="background[dataFlag].url" mode=""></image>
					</view>
					<view class="dy-null-title">
						{{background[dataFlag].msg}}
					</view>
				</view>
			<!-- <view class="cu-tabbar-height"></view> -->
			</scroll-view>
		</block>


    <yk-authpup ref="authpup" type="top" @changeAuth="$noMultipleClicks(scan)" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import {
		basePath,loginUser,loginSession
	} from '@/common/tool.js';
  import tkiTree from "@/components/select-tree/select-tree.vue"
  import ykAuthpup from "@/components/yk-authpup/yk-authpup"
	export default {
    components: {
      tkiTree,ykAuthpup
    },
		data() {
			return {
        permissionID:'',
        treeShow:false,
				noClick:true,
				initflag:false,
				sTop:0,
				totalHeight:0,
				KEYWORDS : '',
				loading: false,
				list: [],
                list1: [],
				totalList:[],
				treeNode: [], //部门下拉数据
				DEPT: '',
				DEPTNAME: '',
				page: 1,
				rows: 1000,
				totalCount:0,
				isEnd: false,
				total:0,
				dataFlag:'noData',
				isIndex:0,
				loginUserId:'',
				noExamine:false,// 是否禁止检查非本人清单
				FKEY:'examine'
			}
		},
		onLoad:async function() {
			let that = this;
			this.loginUserId = loginUser.USER_ID;
			  this.background = require('@/common/background.json');
			  await this.getFunc();
			this.getData();
			// setTimeout(function() {
			// 	that.loading = true
			// }, 500)
			loginSession();
		},

		onReady() {
			let that=this;
			let CustomBar = this.CustomBar;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
						that._data.sTop=data.height  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						that.totalHeight = data.height+CustomBar
					}).exec()
				}
			})
		},
    async onShow() {
			var _this = this;
			if(_this.initflag){
				_this.initflag = false;
				_this.list = [];
				_this.list1 = [];
        await this.getFunc();
			}
		this.getData()

	},

		methods: {

      search (){
        var _this = this;
        _this.list = [];
        _this.list1 = [];
        this.getData()
      },
      reset (){
        this.KEYWORDS = '';
        this.DEPT = '';
        this.DEPTNAME = '';
        this.list = [];
        this.list1 = [];
        this.getData()
      },
			getData(){
				var _this=this;
				console.info(_this.isEnd);
				if (_this.isEnd){
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				uni.request({

					url: basePath + '/app/waybillregistration/listForSecurityWaybillre',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						USER_NAME: loginUser.NAME,
						CHECK_DEPARTMENT_ID: loginUser.DEPARTMENT_ID,
						IS_MAIN:loginUser.ISMAIN,
						CORPINFO_ID:loginUser.CORPINFO_ID,
						USER_ID:loginUser.USER_ID,
						ISSUPERVISE:loginUser.ISSUPERVISE,
						KEYWORDS : _this.KEYWORDS, //关键字模糊查询
					},
					success: (res) => {
						if("success" == res.data.result){
							this.list = res.data.varList
							uni.hideLoading();
              				this.getDept()
						}else{
							uni.showToast({
								icon:'none',
								title: '系统异常',
								duration: 2000
							});
						}
					}
				})
			},

      openAuth(permissionID){
        this.permissionID = permissionID;
        setTimeout(()=>{
          this.$refs['authpup'].open();
        },200)
      },

			scan(){
				let _this=this;
				uni.scanCode({
					success: function (res) {
						let flag=false;
						let listId =  res.result;
						for(var i=0;i<_this.totalList.length;i++){
							if(_this.totalList[i].WAYBILLREGISTRATION_ID==listId){
								flag=true;
								_this.goToList({listId:_this.totalList[i].WAYBILLREGISTRATION_ID,listName:_this.totalList[i].NAME,userid:_this.totalList[i].USER_ID});
								break;
							}
						}
						if(!flag){
							uni.showToast({
								title: "无法检查该清单",
								duration: 2000
							});
						}
					}
				});
			},
      getDept() {
        var _this = this;
        uni.request({
          url: basePath + '/app/sys/listTree', //部门下拉接口
          method: 'POST',
          dataType: 'json',
          header: {
            'Content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            DEPARTMENT_ID:loginUser.DEPARTMENT_ID,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
          },
          success: (res) => {
            if ("success" == res.data.result) {
              _this.treeNode = eval(res.data.zTreeNodes);
            } else {
              uni.showToast({
                title: res.data.message,
                duration: 2000
              });
            }
          }
        });
      },
      // 确定回调事件
      depttreeConfirm(e) {
        this.DEPT = e[0].id;
        this.DEPTNAME = e[0].name;
        this.uindex = -1;
        this.treeShow = false
        this.$forceUpdate(); //强制刷新
        this.list = [];
        this.list1 = [];
        this.getData();
      },
      showDeptTree() {
        this.treeShow = true
        this.$refs.tkiTree._show();
      },
      // 取消回调事件
      depttreeCancel(e) {
        this.treeShow = false
      },
			// 滑动到底方法
			scrolltolower(){
				var _this = this;
				_this.getData();
			},
			getFunc(){
        return new Promise((resolve, reject) => {
          var _this = this;
          uni.showLoading({
            title: '加载中'
          })
          uni.request({
            url: basePath + '/app/corpfunc/findByKey',
            method: 'POST',
            dataType: 'json',
            header: {
              'Content-type': 'application/x-www-form-urlencoded'
            },
            data: {
              FKEY: _this.FKEY,
              CORPINFO_ID: loginUser.CORPINFO_ID,
              USER_ID: loginUser.USER_ID,
            },
            success: (res) => {
              if ("success" == res.data.result) {
                uni.hideLoading();
                if (res.data.pd != null && res.data.pd.CORPFUNC_ID) {
                  _this.noExamine = true;
                }
                resolve()
              } else {
                uni.showToast({
                  icon: 'none',
                  title: '系统异常',
                  duration: 2000
                });
                reject()
              }
            }
          })
        })
			},
			//跳转事件
			goToList(e) {
				var _this = this;
				if(e.WAYBILLSTATUS != '2'){
					uni.navigateTo({
						url: '/pages/application/driving-inspections/driving-item-list?listId='+e.listId
					});
				}else{
					uni.navigateTo({
						url: '/pages/application/driving-inspections/driving-item-detail?listId='+e.listId
					});
				}
			}

		}
	}
</script>

<style>
	.dy-list {
		background: #fff;
		margin-top: 2upx;
	}
	.dy-card{
		background-color: #fff;
		border-radius: 10upx;
		margin:30upx
	}
	.dy-stitle{
		margin: 16upx 0;
	}
	.dy-sub-stitle{
		margin: 16upx 0;
		display: flex;
		justify-content: space-between;
	}
	.dy-card-title{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		min-height: 80upx;
		line-height: 80upx;
		padding: 0 30upx;
	}
	.dy-card-content{
		padding: 0upx 30upx 30upx;

	}
</style>