dgtis-uniapp/pages/oa/out/index.vue

<template>
	<view class='purchase-list'>
		<my-tabs @change="tapChange" :initIndex="initIndex"></my-tabs>
		<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll">
			<view v-if="initIndex === 0">
				<!-- <form-Create></form-Create> -->
				<form-Edit @popupClose="popupClose"></form-Edit>
			</view>
			<view v-if="initIndex === 1">
				<view class="searchBox">
					<uni-search-bar placeholder="请输入搜索内容" @confirm="search" @blur="blur" @cancel="cancel" @clear="clear">
					</uni-search-bar>
				</view>
				<data-List v-for="(item,index) in listData" :key="index" :info="item" @faClick="handdle"></data-List>
				<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
									:direction="direction" @fabClick="fabClick" />
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0">
					<view class="popup-body">
						<view class="popup-close">
							<uni-icons type="closeempty" size="20" @click="popupClose"></uni-icons>
						</view>
						<view class="popup-content">
							<form-Edit :id="id" v-if="status=='暂存'" @popupClose="popupClose"></form-Edit>
							<form-Detail :id="id" v-else @popupClose="popupClose"></form-Detail>
						</view>
					</view>
					
				</uni-popup>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import { getListData } from "@/api/oa/out"
	import myTabs from '../myTabs.vue'
	import dataList from './dataList.vue'
	import formDetail from './detail.vue'
	import formEdit from './edit.vue'
	import myPull from '@/static/js/myPull.js'
	export default {
		components:{myTabs,dataList,formEdit,formDetail},
		data() {
			return {
				id:'',
				status:'',
				initIndex: 0,
				searchStr:'',
				pageNo: 1,
				pageSize: 10,
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			}
		},
		onLoad(){
			this.refresh();
		},
		methods: {
			fabClick() {
				this.initIndex = 0;
							
			},
			search(res) {
				this.searchStr = res.value;
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			},
			clear(res) {
				this.searchStr = '';
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			},
			blur(res) {
				this.searchStr = res.value;
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			},
			cancel(res) {
				this.searchStr = '';
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			},
			popupClose(){
				this.$refs.popup.close();
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			},
			handdle(row) {
				this.$refs.popup.open('bottom');
			    this.id = row.id;
				this.status = row.status;
			},
			fabClick() {
				this.initIndex = 0;
			},
			/**
			 * @name 获取列表
			 */
			getList(page,done){
				if(this.initIndex==1){
					getListData({pageNo:page,pageSize: this.pageSize,str:this.searchStr}).then(response => {
						let dataList = response.data.list;
						let list = []
						dataList.forEach(v => {
							list.push({
								id:v.id,
								oaType:v.applyEmployeeName+'提交的公务外出',
								time:v.createTime,
								title:v.employeeName,
								remarks:v.destination,
								status: v.auditStatusDesc,
								nickname:v.currentAuditEmployeeName
							})
						})
						done(list);
					});
				}
			},
			
			/**
			 * @name 触底加载
			 */
			scrolltolower(event){
				this.getList(this.page,this.__pulldone)
			},
			
			scroll(e){
				// 重新设置pulldown
				this.setPullDown(e.detail.scrollTop<10)
			},
			/**
			 * @name 改变tab
			 * @param val 索引
			 */
			tapChange(val){
				this.initIndex=val;
				this.page = 1;
				this.getList(this.page,this.__pulldone)
			}
		},
		mixins:[myPull({})],
		
	}
</script>
<style lang='scss' scoped>
	.searchBox{
		background-color: #fff;
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0; /* 设置元素距离顶部的位置 */
		width: 100%;
	}
	.popup-body{
		z-index: 99;
	}
	.popup-close{
		cursor: pointer;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		border-bottom: 1px solid #eaecef;
	}
	.popup-content{
		height: 450px;
		overflow-x: auto;
	}
	.purchase-list {
		background-color: #f5f5f5;
		height: 100%;
		overflow: hidden;
		
		.purchase-body{
			height: calc(100% - 88upx);
			overflow: auto
		}
	}
</style>