hi-ucs/front/src/views/home/integrationServices.vue

501 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>