501 lines
13 KiB
Vue
501 lines
13 KiB
Vue
<template>
|
||
<!-- 青岛 -->
|
||
<div class="details-pageconetent">
|
||
<home-header></home-header>
|
||
<div class="top">
|
||
<div class="top-title">
|
||
全部：
|
||
<div
|
||
v-for="item in titleName"
|
||
:key="item.index"
|
||
class="tabAll"
|
||
@click="changeCards(item.index)"
|
||
:class="{ sel: item.index === number }"
|
||
>
|
||
<span>
|
||
{{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="resultListSearchInput-father" v-if="number === 0">
|
||
<div class="resultListSearchInput-son">
|
||
模糊搜索
|
||
<a-input-search
|
||
v-model:value="searchValue"
|
||
placeholder="请输入关键词"
|
||
enter-button="搜索"
|
||
size="large"
|
||
@search="getIntegrationList"
|
||
@change="onSearch"
|
||
class="resultListSearchInput"
|
||
/>
|
||
<i class="searchImg" aria-hidden="true"></i>
|
||
<button class="button-reset" @click="resetAction()">重置</button>
|
||
|
||
<div class="hengxian"></div>
|
||
</div>
|
||
</div>
|
||
<div v-if="number === 0" class="checkResult">检测结果: <span>{{resourceTotal}}</span>个</div>
|
||
<div v-loading="loadingData">
|
||
<searchResultList
|
||
v-if="number === 1"
|
||
v-show="resourceList.data && resourceList.data.length > 0"
|
||
:resourceList="resourceList"
|
||
:resourceTotal="resourceTotal"
|
||
@saveSearchCodition="saveSearchCodition"
|
||
ref="searchResultListDom"
|
||
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
|
||
/>
|
||
<CanAssignCase
|
||
v-else
|
||
v-show="resourceList.data && resourceList.data.length > 0"
|
||
:resourceList="resourceList"
|
||
@saveSearchCodition="saveSearchCodition"
|
||
:resourceTotal="resourceTotal"
|
||
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
|
||
/>
|
||
|
||
<div class="pagination">
|
||
|
||
<a-pagination
|
||
v-if="resourceList.data && resourceList.data.length > 0"
|
||
v-model:current="currentPage"
|
||
v-model:pageSize="currentPageSize"
|
||
show-size-changer
|
||
show-less-items
|
||
show-quick-jumper
|
||
|
||
:total="resourceTotal"
|
||
:page-size-options="pageSizeOptions"
|
||
@change="pageChange"
|
||
@showSizeChange="onShowSizeChange"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="resourceList.data && resourceList.data.length <= 0"
|
||
style="margin-top: 2rem"
|
||
>
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<home-footer></home-footer>
|
||
</template>
|
||
<script>
|
||
import HomeFooter from '@/views/newHome/components/Footer'
|
||
import mybus from '@/myplugins/mybus'
|
||
import {
|
||
defineComponent,
|
||
reactive,
|
||
ref,
|
||
toRefs,
|
||
onMounted,
|
||
nextTick,
|
||
} from 'vue'
|
||
import { getIntegrationServicesList } from '@/api/home.js'
|
||
import { useRouter } from 'vue-router'
|
||
import HomeHeader from '@/views/home/components/header'
|
||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||
import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
|
||
import { message } from 'ant-design-vue'
|
||
|
||
export default defineComponent({
|
||
beforeRouteLeave(to, from, next) {
|
||
console.log('to---integrationServices--beforeRouteLeave------->', to)
|
||
console.log('from---integrationServices--beforeRouteLeave------->', from)
|
||
console.log('next---integrationServices--beforeRouteLeave------->', next)
|
||
if (
|
||
to.name !== 'packagingDetails' &&
|
||
to.name !== 'integrationServicesDetails'
|
||
) {
|
||
localStorage.removeItem('integrationServices')
|
||
}
|
||
next()
|
||
},
|
||
setup() {
|
||
// 分页
|
||
const loading = ref(true)
|
||
const currentPage = ref(1)
|
||
const currentPageSize = ref(10)
|
||
const pageSizeOptions = ref(['2', '5', '10', '20', '50'])
|
||
const router = useRouter()
|
||
const select = router.currentRoute.value.query.select
|
||
const returnType = router.currentRoute.value.query.returnType
|
||
const searchValue = ref('')
|
||
const Cardsname = ref(select)
|
||
const resourceList = reactive({ data: [] })
|
||
const resourceTotal = ref(0)
|
||
const loadingData = ref(false)
|
||
// 选项卡
|
||
const titleName = ref([
|
||
{
|
||
name: '赋能场景',
|
||
index: 0,
|
||
},
|
||
{
|
||
name: '打包模式',
|
||
index: 1,
|
||
},
|
||
])
|
||
let number = ref(0)
|
||
// 查询参数
|
||
const paramsGetResources = {
|
||
page: currentPage.value,
|
||
limit: currentPageSize.value,
|
||
type: titleName.value[number.value].name,
|
||
name: searchValue.value,
|
||
orderField: 'create_date',
|
||
orderType: 'DESC', // ASC 升序 DESC 降序
|
||
}
|
||
const searchResultListDom = ref(null)
|
||
const storageSearchInfo = JSON.parse(
|
||
localStorage.getItem('integrationServices')
|
||
)
|
||
// 读取本地存储：表单赋值
|
||
const handleSetSearchData = () => {
|
||
if (storageSearchInfo) {
|
||
number.value = storageSearchInfo.type == '打包模式' ? 1 : 0
|
||
// 搜索名称
|
||
searchValue.value = storageSearchInfo.name
|
||
currentPage.value = storageSearchInfo.page
|
||
currentPageSize.value = storageSearchInfo.limit
|
||
paramsGetResources.limit = storageSearchInfo.limit
|
||
paramsGetResources.page = storageSearchInfo.page
|
||
paramsGetResources.type = storageSearchInfo.type
|
||
// 延迟使用，因为还没有返回跟挂载
|
||
nextTick(() => {
|
||
searchResultListDom.value &&
|
||
searchResultListDom.value.changeCondition &&
|
||
searchResultListDom.value.changeCondition(
|
||
{
|
||
value: storageSearchInfo.orderField,
|
||
orderType: storageSearchInfo.orderType,
|
||
},
|
||
true
|
||
)
|
||
})
|
||
getIntegrationList()
|
||
}
|
||
}
|
||
|
||
const changeCards = (val) => {
|
||
// 打包模式
|
||
number.value = val
|
||
paramsGetResources.type = titleName.value[number.value].name
|
||
resetAction()
|
||
}
|
||
|
||
// 查询
|
||
const onSearch = () => {
|
||
currentPage.value = 1
|
||
getIntegrationList()
|
||
}
|
||
// 重置数据
|
||
const resetAction = () => {
|
||
// 重置模糊查字段
|
||
searchValue.value = ''
|
||
// 分页
|
||
currentPage.value = 1
|
||
currentPageSize.value = 10
|
||
// 重置查询条件
|
||
paramsGetResources.page = 1
|
||
paramsGetResources.limit = 10
|
||
paramsGetResources.orderField = 'create_date'
|
||
paramsGetResources.orderType = 'DESC'
|
||
|
||
mybus.emit('resetAction', {
|
||
type: titleName.value[number.value].name,
|
||
})
|
||
getIntegrationList()
|
||
}
|
||
|
||
// 获取融合服务列表
|
||
const getIntegrationList = () => {
|
||
loadingData.value = true
|
||
paramsGetResources.name = searchValue.value
|
||
console.log(
|
||
'paramsGetResources------参数下发------>',
|
||
paramsGetResources
|
||
)
|
||
getIntegrationServicesList(paramsGetResources).then(
|
||
(res) => {
|
||
loadingData.value = false
|
||
if (res.data.code !== 0) {
|
||
return message.error(res.data.msg)
|
||
}
|
||
resourceList.data = res.data.data.list || []
|
||
resourceTotal.value = res.data.data.total || 0
|
||
},
|
||
(err) => {
|
||
loadingData.value = false
|
||
message.error(err)
|
||
}
|
||
)
|
||
}
|
||
|
||
mybus.on('paramsGetResources', (ids) => {
|
||
if (ids && ids.length > 0) {
|
||
paramsGetResources.deptIds = ids
|
||
} else {
|
||
delete paramsGetResources.deptIds
|
||
}
|
||
getIntegrationList()
|
||
})
|
||
|
||
mybus.on('changePage', (page) => {
|
||
paramsGetResources.page = page
|
||
getIntegrationList()
|
||
})
|
||
|
||
mybus.on('changeSelcted', () => {
|
||
getIntegrationList()
|
||
})
|
||
|
||
mybus.on('refresh', () => {
|
||
paramsGetResources.page = 1
|
||
currentPage.value = 1
|
||
getIntegrationList()
|
||
})
|
||
mybus.on('changeCondition', (condition) => {
|
||
paramsGetResources.orderField = condition.orderField
|
||
paramsGetResources.orderType = condition.orderType
|
||
getIntegrationList()
|
||
})
|
||
|
||
const pageChange = (val) => {
|
||
currentPage.value = val
|
||
paramsGetResources.page = val
|
||
getIntegrationList() //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
|
||
}
|
||
|
||
// 分页
|
||
const onShowSizeChange = (current, pageSize) => {
|
||
currentPage.value = current
|
||
currentPageSize.value = pageSize
|
||
paramsGetResources.page = current
|
||
paramsGetResources.limit = pageSize
|
||
getIntegrationList()
|
||
}
|
||
|
||
// 存储查询条件到本地
|
||
const saveSearchCodition = (n) => {
|
||
console.log(
|
||
'融合服务-----存储查询条件到本地------->',
|
||
paramsGetResources
|
||
)
|
||
localStorage.setItem(
|
||
'integrationServices',
|
||
JSON.stringify(paramsGetResources)
|
||
)
|
||
}
|
||
|
||
onMounted(() => {
|
||
if(returnType=='典型赋能场景'){
|
||
changeCards(0)
|
||
}else if(returnType=='打包模式'){
|
||
changeCards(1)
|
||
}else{
|
||
if (storageSearchInfo) {
|
||
handleSetSearchData()
|
||
} else {
|
||
getIntegrationList()
|
||
}
|
||
}
|
||
// if (storageSearchInfo) {
|
||
// handleSetSearchData()
|
||
// } else {
|
||
// getIntegrationList()
|
||
// }
|
||
})
|
||
|
||
return {
|
||
searchValue,
|
||
currentPage,
|
||
resourceList,
|
||
resourceTotal,
|
||
pageChange,
|
||
Cardsname,
|
||
getIntegrationList,
|
||
resetAction,
|
||
onSearch,
|
||
currentPageSize,
|
||
pageSizeOptions,
|
||
loading,
|
||
titleName,
|
||
changeCards,
|
||
returnType,
|
||
number,
|
||
loadingData,
|
||
onShowSizeChange,
|
||
saveSearchCodition,
|
||
searchResultListDom,
|
||
}
|
||
},
|
||
components: {
|
||
HomeHeader,
|
||
HomeFooter,
|
||
searchResultList,
|
||
CanAssignCase,
|
||
},
|
||
beforeUnmount() {
|
||
mybus.off('paramsGetResources')
|
||
mybus.off('changeCondition')
|
||
mybus.off('refresh')
|
||
mybus.off('changePage')
|
||
},
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.checkResult{
|
||
margin-left: 0.2rem;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #212121;
|
||
margin-top: 10px;
|
||
|
||
span {
|
||
font-size: 18px;
|
||
color: #0087ff;
|
||
}
|
||
|
||
}
|
||
.resultListSearchInput-father {
|
||
background: #f3f5f9;
|
||
padding: 0rem 0.2rem;
|
||
|
||
.resultListSearchInput-son {
|
||
background: #fff;
|
||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||
|
||
.hengxian {
|
||
width: 100%;
|
||
height: 0.01rem;
|
||
background: rgba(150, 144, 144, 0.3);
|
||
margin-top: 0.2rem;
|
||
}
|
||
.searchImg{
|
||
width: 17px;
|
||
height: 17px;
|
||
background: url('~@/assets/home/searchInner.png');
|
||
position: absolute;
|
||
top: 119px;
|
||
left: 500px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.resultListSearchInput {
|
||
margin-left: 0.1rem;
|
||
|
||
:deep(.ant-input) {
|
||
width: 4rem;
|
||
height: 0.32rem;
|
||
background: #fff;
|
||
border-radius: 0.02rem;
|
||
}
|
||
|
||
:deep(.ant-input-search-button) {
|
||
width: 0.8rem;
|
||
height: 0.32rem;
|
||
background: #0558e1;
|
||
border-radius: 0.02rem !important;
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
line-height: 0.32rem;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
:deep(.ant-input-group-addon) {
|
||
left: 0 !important;
|
||
}
|
||
}
|
||
|
||
.button-reset {
|
||
border: 0;
|
||
outline: none;
|
||
width: 0.8rem;
|
||
height: 0.32rem;
|
||
//background: #e1edfa;
|
||
background: #0558e1;
|
||
border-radius: 0.02rem;
|
||
font-size: 0.14rem;
|
||
font-weight: 400;
|
||
//color: #0087ff;
|
||
color: #fff;
|
||
line-height: 0.32rem;
|
||
margin-left: 2.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.details-pageconetent {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 0.67rem;
|
||
position: relative;
|
||
background: rgba(245, 243, 243, 0.3);
|
||
|
||
.details-pageconetent-left {
|
||
max-height: 6.9rem;
|
||
position: absolute;
|
||
width: 2.5rem;
|
||
top: 0.17rem;
|
||
left: 2.5rem;
|
||
margin-right: 0.17rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
.top {
|
||
min-height: 7.2rem;
|
||
position: relative;
|
||
width: 11.5rem;
|
||
display: flex;
|
||
padding-top: 0.2rem;
|
||
flex-direction: column;
|
||
font-size: 0.16rem;
|
||
justify-content: left;
|
||
background: #f3f5f9;
|
||
|
||
.pagination {
|
||
background: #f3f5f9;
|
||
padding-bottom: 0.6rem;
|
||
}
|
||
|
||
.top-title {
|
||
padding: 0.2rem;
|
||
display: flex;
|
||
font-size: 18px;
|
||
|
||
.tabAll {
|
||
font-size: 18px;
|
||
color: #000000;
|
||
margin-right: 35px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tabAll:nth-child(1) {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.sel {
|
||
font-weight: 600;
|
||
color: #0087ff;
|
||
border-bottom: 0.02rem solid #0087ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-card-grid) {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|