申请发票 合同选择改为我的合同和下属合同

components/transfer/transfer.vue

@@ -2,7 +2,7 @@
 	<view class="slot-content">
 		<uv-popup mode="bottom" border-radius="38" ref="showRef">
 			<view class="popup-title">
-				<text class="">选择目标员工</text>
+				<text>选择目标员工</text>
 				<view class="close" @click="selectShowClose3">
 					<uv-icon name="close" color="#909399" size="22"></uv-icon>
 				</view>

pages/components/pages/invoice/add.vue

@@ -126,23 +126,28 @@
 		<uv-popup mode="bottom" round="38" ref="selectShowRef">
 			<view class="popup-content">
 				<view class="popup-title">
-					<view class="" style="width: 45px;">
+					<text>选择合同</text>
-					</view>
+					<view class="close" @click="selectShowClose">
-					<text class="">选择合同</text>
+						<uv-icon name="close" color="#909399" size="22"></uv-icon>
-					<view class="" @click="selectShowClose" style="width: 45px;">
-						<uv-icon name="close" color="#909399" size="30"></uv-icon>
 					</view>
 				</view>
-				<scroll-view scroll-y style="height: 760rpx;width: 100%;" @scrolltolower="reachBottom">
+				<view class="customer-params">
+					<view class="search">
+						<uv-input placeholder="请输入内容" border="surround" v-model="customerParams.contractName" clearable
+							@clear="clearSearchContract"></uv-input>
+						<button class="search-btn" @click="searchContract">搜索</button>
+					</view>
+					<uv-tabs ref="uvTabsRef" :current="tabCurrent" :list="tabList" @click="tabListClick"></uv-tabs>
+				</view>
+				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="reachBottom">
 					<view class="list">
 						<block v-if="customerList.length > 0">
-							<view class="mb-4">
+							<view class="item" v-for="(item,index) in customerList" :key="index" @click="onItem(item,index)">
-								<view class="item flex" v-for="(item,index) in customerList" :key="index" @click="onItem(item,index)">
+								<view class="top-view">
-									<view class="title">{{item.contractName}}</view>
+									<view class="contract-no">{{item.contractNo}}</view>
-									<view class="check-icon">
+									<uv-icon v-if="item.checked" name="checkmark" color="#09b4f1" size="28"></uv-icon>
-										<uv-icon v-if="item.checked" name="checkmark" color="#09b4f1" size="28"></uv-icon>
-									</view>
 								</view>
+								<view class="contract-name">{{item.contractName}}</view>
 							</view>
 						</block>
 						<uv-empty text="暂无数据" v-else mode="list"></uv-empty>
@@ -159,7 +164,9 @@
 	import {
 		ref,
 		unref,
-		computed
+		computed,
+		reactive,
+		nextTick
 	} from 'vue'
 	import {
 		onLoad,
@@ -189,21 +196,12 @@
 	} from '@/utils/util'
 	const title = ref('申请发票')
 	const labelPosition = ref('left')
-	const listStatus3 = ref('loadmore')
 	const customerList = ref([])
-	const accountName = ref('')
 	const page = ref(1)
-	const page3 = ref(1)
 	const pageSize = ref(10)
-	const lastPage = ref(false)
-	const lastPage3 = ref(false)
-	const selectList = ref([])
-	const businessData = ref({})
 	const type = ref('add')
 	const contractId = ref(0)
 	const customerId = ref(0)
-	const nextTime = ref('')
-	const returnTime = ref(formatDateTime(new Date()))
 	const content = ref('')
 	const customerName = ref('')
 	const form = ref({
@@ -227,7 +225,6 @@
 		contractInstanceId: undefined, // 关联合同审批单编号
 		fileItems: []
 	})
-	const timeText = ref('')
 	const errorType = ref('message')
 	const rules = ref({
 		contractName: [{
@@ -261,11 +258,7 @@
 			trigger: ['change', 'blur']
 		}],
 	})
-	const customerContacts = ref([])
 	const userList = ref([])
-	const username = ref('')
-	const keyword3 = ref('')
-	const businessList = ref([])
 	const isCheck = ref(false)
 	const form2 = ref({
 		id: 0,
@@ -311,8 +304,13 @@
 	}
 
 	const selectShowRef = ref()
+	const uvTabsRef = ref()
 	const selectShow = () => {
 		unref(selectShowRef).open()
+
+		nextTick(() => {
+			uvTabsRef.value.init()
+		})
 	}
 	const selectShowClose = () => {
 		unref(selectShowRef).close()
@@ -344,8 +342,32 @@
 	}
 
 	//获取合同
+	const tabCurrent = ref(0)
+	const customerParams = reactive({
+		contractName: '', //合同名称
+		relation: 'my',
+	})
+	const tabList = ref([{
+		name: '我的合同',
+		value: 'my'
+	}, {
+		name: '下属合同',
+		value: 'sub'
+	}])
+	const tabListClick = (e) => {
+		tabCurrent.value = e.index
+		customerParams.relation = e.value
+		getCustomerList()
+	}
+	const searchContract = () => {
+		getCustomerList()
+	}
+	const clearSearchContract = () => {
+		customerParams.contractName = ''
+		getCustomerList()
+	}
 	const getCustomerList = async () => {
-		await getListByDeptId().then(res => {
+		await getListByDeptId(customerParams).then(res => {
 			customerList.value = res
 		})
 	}
@@ -362,7 +384,9 @@
 		form.value.contractId = val.id
 		form.value.contractName = val.contractName
 		form.value.contractInstanceId = val.processInstanceId
-		selectShowClose()
+		setTimeout(() => {
+			selectShowClose()
+		}, 400)
 	}
 
 	const selectShowRef5 = ref()
@@ -596,35 +620,68 @@
 	.popup-content {
 		width: 750rpx;
 
+		.customer-params {
+			padding-bottom: 10rpx;
+
+			.search {
+				display: flex;
+				align-items: center;
+				padding: 8rpx 24rpx 10rpx 24rpx;
+
+				.search-btn {
+					color: #fff;
+					font-size: 28rpx;
+					width: 120rpx;
+					height: 74rpx;
+					line-height: 74rpx;
+					text-align: center;
+					background-color: #09b4f1;
+					margin-left: 14rpx;
+				}
+			}
+		}
+
 		.popup-title {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
+			justify-content: center;
 			position: relative;
 			font-size: 35rpx;
 			font-weight: 600;
 			text-align: center;
-			height: 50px;
+			height: 46px;
-			padding-right: 25rpx;
+			margin-top: 14rpx;
+			box-sizing: border-box;
+
+			.close {
+				position: absolute;
+				right: 40rpx;
+			}
 		}
 
 		.list {
-			margin-bottom: 45rpx;
 
 			.item {
-				padding: 0 25rpx;
+				padding: 14rpx 26rpx;
-				justify-content: space-between;
-				height: 45px;
 
-				.title {
+				.top-view {
-					flex: 1;
+					display: flex;
-					font-size: 28rpx;
+					align-items: center;
-					font-weight: 600;
 				}
 
-				.check-icon {
+				.contract-no {
-					text-align: center;
+					font-size: 28rpx;
-					width: 100rpx;
+					color: #000;
+					font-weight: bold;
+				}
+
+				.contract-name {
+					font-size: 28rpx;
+					color: #333;
+					margin-top: 2rpx;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
 				}
 			}
 		}