|
|
@@ -0,0 +1,213 @@
|
|
|
+<script setup name="InheritReportSearch">
|
|
|
+import {ref,reactive} from 'vue'
|
|
|
+import apiReport from '@/api/report'
|
|
|
+import { showToast } from 'vant'
|
|
|
+import moment from 'moment'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const emit = defineEmits(['close','confirm'])
|
|
|
+
|
|
|
+const router=useRouter()
|
|
|
+
|
|
|
+
|
|
|
+const keyword=ref('')
|
|
|
+const selectItem = ref({})
|
|
|
+const listState = reactive({
|
|
|
+ list:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ finished:false,
|
|
|
+ loading:false
|
|
|
+})
|
|
|
+async function getList(){
|
|
|
+ const res=await apiReport.getAuthReportList({
|
|
|
+ CurrentIndex:listState.page,
|
|
|
+ PageSize:listState.pageSize,
|
|
|
+ Keyword:keyword.value
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ listState.loading=false
|
|
|
+ if(!res.Data){
|
|
|
+ listState.finished=true
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ listState.finished=res.Data.Paging.IsEnd
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ listState.list=[...listState.list,...arr]
|
|
|
+ }
|
|
|
+}
|
|
|
+function onLoad(){
|
|
|
+ console.log('onload');
|
|
|
+ listState.page++
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+function handleSearch(){
|
|
|
+ if(!keyword.value){
|
|
|
+ showToast('请输入关键词')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ listState.page=1
|
|
|
+ listState.list=[]
|
|
|
+ listState.finished=false
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function handleCancle() {
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+function handleConfirm() {
|
|
|
+ handleCancle()
|
|
|
+ emit('confirm',selectItem.value)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-search-page">
|
|
|
+ <div class="search-box">
|
|
|
+ <van-search
|
|
|
+ shape="round"
|
|
|
+ placeholder="请输入报告标题"
|
|
|
+ v-model="keyword"
|
|
|
+ @search="handleSearch"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
|
|
|
+ <template v-if="keyword">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ :finished-text="listState.list.length>0?'没有更多了':'暂无报告'"
|
|
|
+ :immediate-check="false"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <ul class="list-wrap">
|
|
|
+ <li
|
|
|
+ v-for="item in listState.list"
|
|
|
+ :key="item.Id"
|
|
|
+ :class="[
|
|
|
+ 'item',
|
|
|
+ {'active': selectItem?.Id===item.Id}
|
|
|
+ ]"
|
|
|
+ @click="selectItem=item"
|
|
|
+ >
|
|
|
+ <h2 :class="['van-ellipsis title',item.Title.startsWith('【')?'inline-title':'']">{{item.Title}}</h2>
|
|
|
+ <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
|
|
|
+ <div class="bot-info">
|
|
|
+ <div>
|
|
|
+ <span style="margin-right:10px">{{moment(item.ModifyTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
|
|
|
+ <span>(第{{item.Stage}}期)</span>
|
|
|
+ </div>
|
|
|
+ <div>{{item.ClassifyNameFirst}}</div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </van-list>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="bot-btns">
|
|
|
+ <van-button class="bot-btn" type="default" @click="handleCancle">取消</van-button>
|
|
|
+ <van-button class="bot-btn" type="primary" @click="handleConfirm">确定</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.list-wrap{
|
|
|
+ padding: 30px 34px;
|
|
|
+ .item{
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ box-shadow: 0px 3px 12px rgba(52, 75, 120, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ .title{
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 44px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .inline-title{
|
|
|
+ margin-left: -14px;
|
|
|
+ }
|
|
|
+ .des{
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: $font-grey;
|
|
|
+ min-height: 60px;
|
|
|
+ }
|
|
|
+ .bot-info{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: $font-grey;
|
|
|
+ font-size: 28px;
|
|
|
+ .active-status{
|
|
|
+ color: $font-success;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ border-color: $theme-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.report-search-page{
|
|
|
+ padding-bottom: 130px;
|
|
|
+ .search-box{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bot-btns{
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ .bot-btn {
|
|
|
+ width: 315px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width:$media-width){
|
|
|
+ .list-wrap{
|
|
|
+ padding: 30px;
|
|
|
+ .item{
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .inline-title{
|
|
|
+ margin-left: -14px;
|
|
|
+ }
|
|
|
+ .des{
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ min-height: 30px;
|
|
|
+ }
|
|
|
+ .bot-info{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .report-search-page{
|
|
|
+ .search-box{
|
|
|
+ top: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
