You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
313 lines
8.3 KiB
Vue
313 lines
8.3 KiB
Vue
<template>
|
|
<view :style="{marginTop:barHeight+'px'}">
|
|
<Top text="合同查询" />
|
|
<scroll-view scroll-y style="background-color: #F2F3F5;"
|
|
:style="{height:`calc(${pageHeight+'px'} - 30rpx - 100rpx)`,paddingBottom:'30rpx'}"
|
|
@scrolltolower="onScrollToLower">
|
|
<view id="contain" ref="containRef">
|
|
<Card class="searchForm" :hideTitle="true">
|
|
<form @submit="getList" @reset="searchFormReset">
|
|
<FormItem :title="'合同编号'" v-if="!moreFormItem">
|
|
<SearchInput v-model="searchForm.contractCode" @search="getList" />
|
|
</FormItem>
|
|
<FormItem :title="'合同编号'" width="180rpx" v-if="moreFormItem">
|
|
<input class="uni-input" v-model="searchForm.contractCode" />
|
|
</FormItem>
|
|
<!-- <transition name="moreFormItem"> -->
|
|
<view class="moreFormItem" :class="{ open: moreFormItem }">
|
|
<view v-show="moreFormItem">
|
|
<FormItem :title="'客户合同编号'" width="201rpx">
|
|
<input class="uni-input" v-model="searchForm.customerContractCode" />
|
|
</FormItem>
|
|
<FormItem :title="'合同名称'" width="180rpx">
|
|
<input class="uni-input" v-model="searchForm.contractName" />
|
|
</FormItem>
|
|
<FormItem :title="'业务方向'" width="180rpx">
|
|
<Picker key="label" :data="business_direction" :value="searchForm.businessDirection"
|
|
@change="e=>searchForm.businessDirection =e" />
|
|
</FormItem>
|
|
<FormItem :title="'合同状态'" width="180rpx">
|
|
<Picker key="label" :data="contract_status" :value="searchForm.contractStatus"
|
|
@change="e=>searchForm.contractStatus =e" />
|
|
</FormItem>
|
|
</view>
|
|
</view>
|
|
<!-- </transition> -->
|
|
<view style="text-align: center;">
|
|
<button style="height:60rpx;width: 150rpx;line-height: 60rpx;display: inline-block;font-size: 28rpx;"
|
|
v-if="moreFormItem" form-type="submit" type="primary">搜索</button>
|
|
<button
|
|
style="height:60rpx;width: 150rpx;line-height: 60rpx;display: inline-block;margin-left: 20rpx;font-size: 28rpx;"
|
|
v-if="moreFormItem" form-type="reset" plain="true" type="primary">重置</button>
|
|
</view>
|
|
<view class="toggle" @tap="toggleForm">
|
|
<view class="icon" :style="{transform: `rotate(${moreFormItem ? 180 : 0}deg)`}"></view>
|
|
</view>
|
|
</form>
|
|
</Card>
|
|
<Picker key="label" :data="business_direction" :value="searchForm.businessDirection"
|
|
@change="e=>searchForm.businessDirection =e" />
|
|
<Card class="table" :hideTitle="true">
|
|
<uni-collapse>
|
|
<uni-collapse-item v-for="i in list">
|
|
<template v-slot:title>
|
|
<view class="list-item-title">
|
|
<view class="leftText">
|
|
{{i.contractName}}
|
|
</view>
|
|
<view class="rightText">
|
|
<DictTag :options="contract_category" :value="i.contractCategory" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view style="padding:20rpx 0 " @tap="itemOperation(i)">
|
|
<view class="is-open-text">有无合同：{{i.contractFlag}}
|
|
</view>
|
|
<view class="is-open-text">合同编号：{{i.contractCode}}
|
|
</view>
|
|
<view class="is-open-text">业务方向：
|
|
<DictTag :options="business_direction" :value="i.businessDirection" type="text" />
|
|
</view>
|
|
<view class="is-open-text">部门：{{i.deptName}}</view>
|
|
<view class="is-open-text">合同签订日期：{{i.contractDate}}
|
|
</view>
|
|
<view class="is-open-text">合同总价：{{i.totalPrice}}
|
|
</view>
|
|
<view class="is-open-text">
|
|
甲方公司：{{i.oneCustomerName}}
|
|
</view>
|
|
<view class="is-open-text">
|
|
乙方公司：{{i.twoCustomerName}}
|
|
</view>
|
|
<view class="is-open-text">合同状态：
|
|
<DictTag :options="contract_status" :value="i.contractStatus" type="text" />
|
|
</view>
|
|
<view class="is-open-text">流程状态：{{i.flowStatus}}
|
|
</view>
|
|
<view class="is-open-text">
|
|
内部合同号：{{i.internalContractCode}}</view>
|
|
<view class="is-open-text">
|
|
外部合同号：{{i.externalContractCode}}</view>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</Card>
|
|
</view>
|
|
</scroll-view>
|
|
<view v-if="infoShow">
|
|
<Info :data="infoData" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
toRefs,
|
|
onMounted,
|
|
nextTick,
|
|
} from 'vue';
|
|
import {
|
|
useDict
|
|
} from '@/utils/dict.js'
|
|
import {
|
|
listContractInfo
|
|
} from '@/api/contractInfo';
|
|
import {
|
|
getHeight
|
|
} from '@/utils/index.js'
|
|
import Info from './info.vue'
|
|
|
|
const {
|
|
contract_category,
|
|
business_direction,
|
|
active_flag,
|
|
contract_flag,
|
|
contract_type,
|
|
contract_status
|
|
} = toRefs(
|
|
useDict(['contract_category', 'business_direction', 'active_flag', 'contract_flag', 'contract_type',
|
|
'contract_status'
|
|
])
|
|
);
|
|
const infoShow = ref(false)
|
|
const infoData = ref({})
|
|
const containRef = ref(null)
|
|
const moreFormItem = ref(false)
|
|
const toggleForm = () => {
|
|
moreFormItem.value = !moreFormItem.value
|
|
}
|
|
const searchForm = ref({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
})
|
|
const list = ref([])
|
|
const total = ref(0)
|
|
|
|
const checkFull = () => {
|
|
let res = false
|
|
return new Promise(resolve => {
|
|
uni.createSelectorQuery()
|
|
.select('#contain')
|
|
.boundingClientRect(rect => {
|
|
resolve(rect?.height < pageHeight.value)
|
|
})
|
|
.exec()
|
|
})
|
|
}
|
|
const search = async () => {
|
|
const res = await listContractInfo(searchForm.value);
|
|
list.value = list.value.concat(res.rows);
|
|
total.value = res.total;
|
|
await nextTick()
|
|
if (await checkFull()) {
|
|
if (searchForm.value.pageNum * searchForm.value.pageSize < total.value) {
|
|
searchForm.value.pageNum += 1
|
|
search()
|
|
}
|
|
}
|
|
}
|
|
const getList = () => {
|
|
searchForm.value.pageNum = 1
|
|
list.value = []
|
|
search()
|
|
}
|
|
const searchFormReset = () => {
|
|
searchForm.value = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
}
|
|
const onScrollToLower = () => {
|
|
if (searchForm.value.pageNum * searchForm.value.pageSize < total.value) {
|
|
searchForm.value.pageNum += 1
|
|
search()
|
|
}
|
|
}
|
|
const itemOperation = (e) => {
|
|
infoShow.value = true
|
|
if (e.contractStatus !== '1') {
|
|
infoData.value = {
|
|
type: 1,
|
|
id: e.contractId
|
|
}
|
|
}
|
|
if (e.contractStatus === '1') {
|
|
infoData.value = {
|
|
type: 2,
|
|
id: e.contractId
|
|
}
|
|
}
|
|
}
|
|
const pageHeight = ref(0)
|
|
const barHeight = ref(0)
|
|
const sys = uni.getSystemInfoSync()
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
if ((process.env.UNI_PLATFORM === 'app-plus' || process.env.UNI_PLATFORM === 'app')) {
|
|
const statusBarHeight = plus.navigator.getStatusbarHeight()
|
|
barHeight.value = statusBarHeight
|
|
pageHeight.value = sys.windowHeight - statusBarHeight
|
|
} else {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
const statusBarHeight = systemInfo.statusBarHeight || 0
|
|
barHeight.value = statusBarHeight || 0
|
|
pageHeight.value = sys.windowHeight - statusBarHeight
|
|
}
|
|
search()
|
|
}, 100)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/uni.scss";
|
|
|
|
.searchForm {
|
|
margin-top: 30rpx;
|
|
padding-top: 0 !important;
|
|
display: inline-block;
|
|
|
|
:deep(.content) {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.toggle {
|
|
width: 100%;
|
|
height: 30rpx;
|
|
text-align: center;
|
|
padding: 10rpx 0;
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
background-image: url(#{$img-url}/icon/toggle.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
transition: transform 0.3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin-top: 30rpx;
|
|
padding-top: 0 !important;
|
|
display: inline-block;
|
|
|
|
:deep(.content) {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
.list-item-title {
|
|
padding: 30rpx 0;
|
|
display: flex;
|
|
|
|
.leftText {
|
|
display: inline-block;
|
|
}
|
|
|
|
.rightText {
|
|
margin-left: auto;
|
|
}
|
|
|
|
}
|
|
|
|
.is-open-text {
|
|
padding-right: 20rpx;
|
|
display: inline-block;
|
|
min-width: calc(45% - 20rpx);
|
|
color: #999
|
|
}
|
|
|
|
|
|
.moreFormItem-enter-active,
|
|
.moreFormItem-leave-active {
|
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.moreFormItem-enter-from,
|
|
.moreFormItem-leave-to {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.moreFormItem-enter-to,
|
|
.moreFormItem-leave-from {
|
|
max-height: 500rpx;
|
|
opacity: 1;
|
|
}
|
|
|
|
.moreFormItem {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.moreFormItem.open {
|
|
max-height: 600rpx; // 不要用 200 / 400 这种边界值
|
|
opacity: 1;
|
|
}
|
|
</style> |