hi-ucs/front/src/views/personalCenter/components/MyBrowse.vue

448 lines
18 KiB
Vue

<template>
<div class="title">我的浏览</div>
<div class="sousuokuang">
<a-input-search
v-model:value="name"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@change="onSearch"
@search="getList"
/>
<a-button
type="primary"
style="width: 80px; height: 36px; margin-left: 10px"
@click="clean"
>
重置
</a-button>
</div>
<div class="tab">
<span>筛选</span>
<div
:class="tabIndex == index ? 'tabclass' : ' '"
@click="changeTab(index)"
v-for="(item, index) in tabList"
:key="index"
>
{{ item }}
</div>
</div>
<a-list
class="demo-loadmore-list"
:loading="initLoading"
item-layout="horizontal"
:data-source="list"
:key="showKey"
>
<template #renderItem="{ item }">
<a-list-item>
<a-skeleton avatar :title="false" :loading="!!item.loading" active>
<a-list-item-meta
:description="item.description || '--'"
style="position: relative"
>
<template #title>
<span
@click="showItem(item.resourceId, item.type, item.delFlag)"
style="cursor: pointer"
class="name"
>
{{ item.name }}
</span>
<span class="time">浏览时间:{{ item.createDate }}</span>
<svg
t="1652233950228"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5970"
data-spm-anchor-id="a313x.7781069.0.i8"
width="50"
height="50"
v-if="item.delFlag == 4 || item.delFlag == 5"
style="position: absolute; top: 0; left: 100px"
>
<path
d="M955.22053 256C813.82053 11.2 500.72053-72.6 255.92053 68.8S-72.67947 523.2 68.72053 768 523.22053 1096.6 768.02053 955.2c244.7-141.2 328.6-454.1 187.4-698.8 0-0.1-0.1-0.3-0.2-0.4zM762.02053 944.7c-239 138.1-544.8 56.2-682.9-182.8S22.92053 217.1 261.92053 79.1s544.8-56.2 682.9 182.8c137.9 239 56.1 544.6-182.8 682.8z"
fill="#515151"
opacity=".5"
p-id="5971"
></path>
<path
d="M898.12053 289.2C775.02053 76 502.42053 2.9 289.22053 126 76.02053 249.1 3.02053 521.6 126.02053 734.8 249.12053 948 521.62053 1021.1 734.82053 898 947.92053 774.9 1021.02053 502.4 898.12053 289.2zM731.62053 892.8C521.32053 1014.3 252.42053 942.2 131.02053 731.9 9.52053 521.6 81.62053 252.7 291.92053 131.3 502.12053 9.9 771.02053 81.8 892.42053 292c121.5 210.3 49.5 479.3-160.8 600.8z"
fill="#515151"
opacity=".5"
p-id="5972"
></path>
<path
d="M323.62053 176.8c3.6-2 6 0.8 8.8 2.8 6 4.4 12.4 8.8 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.4 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.6 0.6-2zM200.72053 289.2c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 13.6-5.6 20.8 4.8 6 10 11.6 14.8 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.4-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.4-1.2 0-1.6 0.8-2.4l0.2 0.4z m276.6-159.6c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.8-1.2-0.4-1.6 0.4-2.4l0.2 0.4z m141.9 29.6c3.6-2 6 0.8 8.8 2.8l18.8 12.8c7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-3.6 14-5.6 20.8 4.8 6 10 12 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4-7.7 0.4-15.2 0.8-22.4 0.8-4.4 6.8-8.4 13.2-12.8 20-1.6 2.4-4 5.1-7.2 4-2.4-1.9-3.9-4.7-4.4-7.7l-7.2-20.5c-8.4-2-16.8-4.4-25.2-6.4-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 4-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.5-1.2 0.2-1.6 0.6-2zM150.02053 430c3.6-2 6 0.8 8.8 2.8 6.4 4.4 12.4 8.4 18.8 12.8 7.2-2.4 14.4-5.1 21.6-7.7 3.6-1.2 6-2.8 8.8 0.4 2.4 2.8 0.4 6.4-0.4 8.8-2 6.8-4 14-5.6 20.8 4.8 6 10 11.6 15.2 17.6 2.4 2.8 4.4 5.6 2.8 8.4-1.2 2.8-5.6 2.4-7.7 2.4l-22.4 0.8c-4.4 6.8-8.8 13.6-12.8 20-1.6 2.4-4 5.1-7.2 4-2.2-2-3.8-4.7-4.4-7.7l-7.2-20.5-25.2-6.4c-2.3-1.2-3.6-3.8-3.2-6.4 1.3-1.8 2.9-3.3 4.8-4.4 3.6-3.2 7.7-6.8 11.6-10 1.9-1.3 3.6-2.7 5.1-4.4-0.4-6.8-1.2-13.6-1.6-20.5-0.7-2.9-0.9-5.9-0.4-8.8-0.7-0.8-0.3-1.5 0.6-2z m558.9 414.4c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.1 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-1.1 0.8-1.1 1.6-1.1h0.1z m-158.8 50c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.1-3.7-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2-1 4.2-1.7 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.4-0.8 0.8-0.8 1.7-0.7z m276.5-159.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8s-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.2 4.4-0.7 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0-0.8 0.8-1.2 1.6-1.2l0.1 0.1z m45.6-137.6c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-1.6-14-3.6-20.8-5.6l-7.7-22c-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.2-0.7 0.6-0.7 1.4-0.7h0.3zM402.72053 868c3.6-2.4 2.4-5.6 2-8.8l-1.6-22.4 17.2-14.8c2.8-2.4 5.1-4 4-7.7-1.2-3.2-5.6-3.6-7.7-4-6.8-2-14-3.6-20.8-5.6-2.8-7.2-5.1-14.4-7.7-21.6-1.2-3.6-2.8-6.4-5.6-6.8-2.8-0.4-4.8 3.6-5.6 5.1l-12 19.2-24 1.2c-2.8 0-6.8 0.8-6.8 4.4 0.5 3 2 5.7 4.4 7.7 4.8 5.6 9.2 11.2 14 16.4l-7.2 25.2c-0.3 2.7 1.4 5.2 4 6 2.2-0.3 4.3-0.9 6.4-1.6l14.4-4.8c2.1-0.8 4.2-1.5 6.4-2 5.6 4 11.2 7.7 16.8 11.6 2.2 2.1 4.8 3.6 7.7 4.4 0.5-0.8 1-1.1 1.7-1.1z"
fill="#515151"
opacity=".5"
p-id="5973"
></path>
<path
d="M386.42053 590.4l-43.8-75.9L207.02053 592.7l10.2 17.7L334.02053 543l23.4 40.4-90.5 52.2-13.5-23.4-18.7 10.8 53.1 92c9.1 15.8 21.2 19.5 36.4 10.7l98.8-57c6.2-3.6 11-9.3 13.4-16.1-1.4-15.9-6.2-31.2-14.2-45l-21.4 4.8c6.7 10.3 11 21.9 12.8 34-1 3.3-3.2 6-6.1 7.8l-88.3 51c-6.2 3.6-11.1 2.1-14.8-4.3l-27.3-47.4 109.3-63.1z m2.9-103.2l10.4 18.1 65.6-37.9 79.9 138.4 18.6-10.8-55.9-96.9c18.8-0.9 43.2-0.6 73 0.7l1.5-23.1c-29.8-0.3-58.4 0.4-86 2.6l-12.5-21.6 74.9-43.2-10.4-18.1-159.1 91.8zM669.52053 329l38.2 66.2 61.4-35.4-38.1-66.1-61.5 35.3z m72.4 24.2l-26.3 15.2-19-33 26.3-15.2 19 33zM599.02053 356.7l7.9 13.7-23.3 13.5 9.8 17 21.8-12.6c7.5 18.7 6.6 39.6-2.5 57.6l20.7 4.4c10.3-23.1 10.3-49.4 0-72.5l18.8-10.9c6 9.2 10.7 19.2 14.2 29.7 0.3 5-2.6 9.7-7.2 11.7-2.9 1.2-6.4 2.8-10.9 4.9l14.1 14.1c3.7-1.3 7.3-2.9 10.7-4.8 8.6-3.9 14.4-12.2 15.2-21.6-5.4-22.1-14.6-43-27.4-61.8l-36.1 20.8-7.9-13.7-17.9 10.5z m29.9 108.1l10 17.4 53.2-30.7c-7.8 23.7-20.6 45.4-37.5 63.6l20.6 11.1c18.6-24.2 30-53.1 33-83.4l29.8 51.5 18.4-10.7-29.8-51.5c27.4 11.5 57.2 16.3 86.9 14.1l3.5-23.5c-24.7 5.1-50.1 5-74.8-0.1l53.5-30.9-10-17.3-69.3 40-7.3-12.6-18.4 10.7L698.02053 425l-69.1 39.8z"
fill="#515151"
opacity=".5"
p-id="5974"
></path>
</svg>
</template>
<template #avatar>
<a-checkbox
:checked="item.checked"
@click.stop="checkedItem(item)"
@change="checkedItem(item)"
></a-checkbox>
</template>
</a-list-item-meta>
</a-skeleton>
</a-list-item>
</template>
</a-list>
<a-pagination
v-model:current="pageNum"
v-model:page-size="pageSize"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
@showSizeChange="onShowSizeChange"
@change="pageChange"
:key="showKey"
>
<template #buildOptionText="props">
<span>{{ props.value }}条/页</span>
</template>
</a-pagination>
<div class="bottom">
<div class="left">
<a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">
全选
</a-checkbox>
<a-popconfirm
:title="'是否批量删除已选中的' + checkedList.length + '条数据?'"
ok-text=""
cancel-text=""
@confirm="delList"
@cancel="cancel"
>
<a-button
type="primary"
style="width: 70px; height: 32px; margin-left: 10px"
>
删除
</a-button>
</a-popconfirm>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import mybus from '@/myplugins/mybus'
import { getBsList, BsDel, getTopCategory } from '@/api/personalCenter'
const router = useRouter()
// 分页
const pageNum = ref('1')
const pageSize = ref('5')
const pageSizeOptions = ref(['5', '10', '20'])
const total = ref(0)
// 多选框
const checkedList = ref([])
const checkAll = ref(false)
const initLoading = ref(true)
const showKey = ref(0)
// 筛选条件
const name = ref('')
const type = ref('')
const list = ref([])
const tabList = ref([])
// 初始化
onMounted(() => {
getList()
getCategory()
})
// 获取一级编目
const getCategory = () => {
getTopCategory().then((res) => {
console.log('编目一级=============>', res.data)
res.data.data.forEach((val) => {
// tabList.value.push(val.name)
if (val.name == '应用资源' || val.name == '组件服务') {
tabList.value.push(val.name)
}
})
})
}
// 全选按钮
const onCheckAllChange = () => {
console.log(checkedList)
if (checkAll.value) {
// checkedList.value = []
list.value.forEach((val) => {
if (checkedList.value.indexOf(val.id) != -1) {
checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
}
val.checked = true
checkedList.value.push(val.id)
dataResourceId.value.push(val.id)
arr.value.push(val.name)
})
console.log(checkAll.value)
} else {
list.value.forEach((val) => {
val.checked = false
if (checkedList.value.indexOf(val.id) != -1) {
checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
}
})
// checkedList.value = []
dataResourceId.value = []
arr.value = []
console.log(checkAll.value)
}
}
// 重置
const clean = () => {
name.value = ''
type.value = ''
pageNum.value = '1'
pageSize.value = '5'
showKey.value++
checkAll.value = false
getList()
}
// 获取信息
const getList = () => {
console.log(name.value)
getBsList({
limit: pageSize.value,
page: pageNum.value,
}).then((res) => {
checkAll.value = true
console.log('申购车列表================>', res)
initLoading.value = false
list.value = []
total.value = res.data.data.total
res.data.data.list.forEach((val) => {
const obj = {
loading: false,
name: val.resourceDTO.name,
id: val.id,
checked: false,
type: val.resourceDTO.type,
resourceId: val.resourceId,
createDate: val.createDate,
description: val.resourceDTO.description,
delFlag: val.resourceDTO.delFlag,
}
if (checkedList.value.indexOf(val.id) == -1) {
checkAll.value = false
} else {
obj.checked = true
}
list.value.push(obj)
})
})
}
const onShowSizeChange = (current, pageSize) => {
console.log(current, pageSize)
// pageNum.value = current
// pageSize.value = pageSize
// getList()
}
// 切换页数
const pageChange = (val) => {
pageNum.value = val
pageNum.value = val
// checkedList.value = []
getList()
}
// 搜索框
const onSearch = () => {
console.log('search======================>', name.value)
}
//申请id
const dataResourceId = ref([])
const arr = ref([])
// 点击多选框
const checkedItem = (item) => {
checkAll.value = true
list.value.forEach((val) => {
if (val.id === item.id) {
console.log(val)
val.checked = !val.checked
if (val.checked) {
checkedList.value.push(val.id)
dataResourceId.value.push(val.id)
arr.value.push(val.name)
} else {
checkedList.value.splice(checkedList.value.indexOf(val.id), 1)
dataResourceId.value.splice(checkedList.value.indexOf(val.id), 1)
arr.value.splice(arr.value.indexOf(val.name), 1)
}
}
console.log(checkedList.value, val.id)
if (checkedList.value.indexOf(val.id) == -1) {
checkAll.value = false
console.log('不存在', checkAll.value)
}
})
showKey.value++
}
// 切换筛选条件
const tabIndex = ref(-1)
const changeTab = (index) => {
console.log('tabIndex', tabIndex.value, index, tabList)
if (tabIndex.value == index) {
tabIndex.value = -1
type.value = ''
} else {
tabIndex.value = index
type.value = tabList.value[index]
}
getList()
}
// 删除按钮
const delList = () => {
if (checkedList.value.length == 0) {
message.error('请先选择需要操作的数据!')
} else {
BsDel(checkedList.value).then((res) => {
console.log('checkedList.value', checkedList.value)
if (res.data.msg === 'success') {
message.success('删除成功')
console.log('删除申购车列表================>', res)
checkAll.value = false
checkedList.value = []
dataResourceId.value = []
pageNum.value = '1'
showKey.value++
mybus.emit('getSgcNum')
getList()
}
})
}
}
const cancel = (e) => {
console.log(e)
}
// 详情
const showItem = (id, type, delFlag) => {
if (delFlag == 0) {
console.log('进入详情')
mybus.emit('tabsChange', { flag: id })
router.push({
path: '/details',
query: {
id: id,
},
})
}
}
</script>
<style lang="less" scoped>
.ant-list {
height: 540px;
overflow-y: scroll;
.ant-list-item-meta {
align-items: center;
:deep(.ant-list-item-meta-avatar) {
padding-left: 20px;
margin-right: 30px;
}
.time {
margin-left: 30px;
font-size: 12px;
color: #ccc;
}
:deep(.ant-list-item-meta-description) {
max-height: 44px;
overflow: hidden;
margin-right: 10px;
}
}
:deep(.ant-list-item-meta-title) {
display: flex;
justify-content: space-between;
span {
margin-right: 0.3rem;
}
}
}
.ant-list::-webkit-scrollbar {
width: 0 !important;
}
.bottom {
margin: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.left span {
margin-left: 10px;
}
}
.title {
font-size: 20px;
color: #000000;
font-family: 'Alibaba PuHuiTi';
font-weight: 500;
margin-top: 20px;
margin-left: 20px;
}
.sousuokuang {
margin: 10px 0px 21px 20px;
.ant-input-search {
max-width: 490px;
}
:deep(.ant-input) {
width: 400px;
height: 36px;
font-size: 14px;
color: #b2b2b2;
background: #f5f5f5;
}
:deep(.ant-input-group-addon) {
display: inline-block;
margin-left: 10px;
.ant-input-search-button {
width: 80px;
height: 36px;
border-radius: 4px;
font-size: 14px;
}
}
}
.tab {
margin-top: 10px;
margin-left: 20px;
margin-bottom: 10px;
display: flex;
font-size: 14px;
color: #999999;
div {
width: 70px;
height: 24px;
border: 1px solid #cccccc;
border-radius: 12px;
margin-left: 10px;
text-align: center;
color: #666666;
cursor: pointer;
}
.tabclass {
border: 1px solid #0087ff;
color: #0087ff;
}
}
.name:hover {
color: #0087ff;
}
</style>