tabs 切换刷新问题

[xhlsmile]

我有一个列表页面, 每次切换tabs 再回来, 就会刷新是为什么?

[zds-s]

其他列表没有？

[xhlsmile]

没有, 就一个有

[xhlsmile]

@Death-Satan 可能是哪里的问题?

[zds-s]

不刷新有问题，刷新没问题

[xhlsmile]

我的意思是, 列表会重载, 我的筛选也会没有, 这个是正常的?

[zds-s]

又不是 iframe 。你确定其他列表都不重新请求接口吗

[zds-s]

https://developer.aliyun.com/article/806007

https://learnku.com/articles/61934

[xhlsmile]

https://github.com/mineadmin/MineAdmin-Vue/assets/46104510/d3a64d29-a288-4e72-85bb-9b07f2f908d9

[zds-s]

@kanyxmo 看看这个

[zds-s]

默认是不会刷新的。看看你的商品列表 index.vue js部分

[zds-s]

加一下排版

[xhlsmile]

`

const crudRef = ref(); const categories = ref([]) const homePageList = ref([]) const categoryCascader = ref([])

onMounted(() => { category.tree().then(res => { categories.value = res.data categoryCascader.value = res.data categories.value.unshift({ label: '所有类目', value: 'all' }) }) // commonApi.getDict('dashboard').then(res => homePageList.value = res.data ) })

const switchDept = (id) => { crudRef.value.requestParams = id[0] === 'all' ? { category_id: undefined } : { category_id: id[0] } crudRef.value.requestData() }

// let sku = [];

const crud = ref({ id: 'product_index_self', pk: 'id', api: product.getPageList, recycleApi: product.getRecyclePageList, searchColNumber: 4, showIndex: false, pageLayout: 'fixed', rowSelection: { showCheckedAll: true }, operationColumn: true, operationWidth: 200, add: { show: true, api: product.save, auth: ['products:save'], realApi: product.realDeletes, realAuth: ['products:save'] }, edit: { show: true, api: product.update, auth: ['products:update'], }, delete: { show: true, api: product.deletes, auth: ['products:delete'], realApi: product.realDeletes, realAuth: ['products:realDeletes'] }, recovery: { show: true, api: product.recoverys, auth: ['products:recovery']}, formOption: { tagId: 'product_index', tagName: "商品", viewType: 'tag', layout: [ ] }, // showExpandRow:true, // isDbClickEdit: false, });

// const visible = ref(false); // const position = ref('right');

// 列表字段 const specialType = [ { label: '特殊', value: 1 }, { label: '普通', value: 0 }, ]

const columns = reactive([ { title: '名称', dataIndex: 'name', search: true, addDefaultValue: (record) => { record.package_length = 5 record.package_width = 5 record.package_height = 5 record.weight = 5 return record.name }, },{ dataIndex: 'image', title: '图片', formType: 'upload', editDisplay: false, addDisplay: false, fileType: 'image', multiple: true, returnType: 'url', }, { title: '标题', dataIndex: 'title', search: false, hide: false, commonRules: [{ required: true, message: '标题必填' }], }, { title: '编码', dataIndex: 'code', search: true, hide:false }, { title: '类目ID', dataIndex: 'category_id', search: true, hide:true, editDisplay: true, addDisplay: true, }, { title: '类目', dataIndex: 'category_id', search: false, hide:false, formType: 'cascader', multiple: false, expandTrigger:"hover", options: categoryCascader, dict:{ translation: true, },

commonRules: [{ required: true, message: '类别必选' }],

}, { title: '品牌', dataIndex: 'brand', hide:true, addDefaultValue: "0" }, { title: '单价', formType: 'input-number', dataIndex: 'unit_price', addDefaultValue: "9.9" }, { title: '采购链接', dataIndex: 'purchase_link', formType: 'textarea' }, { title: '备注', dataIndex: 'remark', editDisplay:false, hide:true, }, { title: '特殊', dataIndex: 'special', formType: 'radio', addDefaultValue: 0, dict: { data: specialType, translation: true, tagColors: { 1: 'red', 0: 'green' } }, }, { formType: 'grid-tailwind', colNumber: 4, cols: [ { formList: [ { title: '长(cm)', dataIndex: 'package_length', formType: 'input-number', min: 1, mode: 'button', addDefaultValue: "5" } ] },{ formList: [ { title: '宽(cm)', dataIndex: 'package_width', formType: 'input-number', min: 1, mode: 'button', append: 'cm', addDefaultValue: 5 } ] }, { formList: [ { title: '高(cm)', dataIndex: 'package_height', formType: 'input-number', min: 1, mode: 'button', addDefaultValue: 5 } ] }, { formList: [ { title: '重量(g)', dataIndex: 'weight', formType: 'input-number', min: 1, mode: 'button', addDefaultValue: 30 } ] } ] }, { formType: 'card', title: '特殊信息', hideLabel: true, hide: true, customClass: ['mb-5'], formList: [ { dataIndex: 'images', title: '商品图片', formType: 'upload', fileType: 'image', multiple: true, returnType: 'url', hide: true }, { title: '描述', dataIndex: 'description', hide: true, maxLength: 5000, showWordLimit: true, formType: 'editor', height: 260, rules: { required: true, message: "请输入简易描述" } } ,{ formType: 'grid-tailwind', colNumber: 4, cols: [ { formList: [ { title: '视频', dataIndex: 'video', limit: 2, multiple: true, showWordLimit: true, formType: 'upload', fileType: 'image', accept: '.mp4' } ] },{ formList: [ { title: '尺寸图片', dataIndex: 'size_image', multiple: false, showWordLimit: true, formType: 'upload', fileType: 'image', returnType: 'url' } ] } ] } ] }, { formType: 'card', title: 'SKU', hideLabel: true, hide: true, dataIndex: 'sku', orientation: 'right', formList: [ { title: "sku", dataIndex: "sku", formType: "sku", hide: true, }, ] },

{ title: '创建时间', dataIndex: 'created_at', addDisplay:false, editDisplay:false, }, { title: '更新时间', dataIndex: 'created_at', addDisplay:false, editDisplay:false, hide:true, }, ]);

`

[zds-s]

onMounted(() => {
category.tree().then(res => {
categories.value = res.data
categoryCascader.value = res.data
categories.value.unshift({ label: '所有类目', value: 'all' })
})

这个去掉再刷新一下试试

[xhlsmile]

不行

[zds-s]

等 @kanyxmo 来看看吧

[kanyxmo]

name的值与路由的地址不一致，所以页面未缓存
<script> export default { name: 'product:index' } </script>

[xhlsmile]

name的值与路由的地址不一致，所以页面未缓存
<script> export default { name: 'product:index' } </script>

是的是的, 现在好啦, 非常感谢👍🏻

[xhlsmile]

  `<script setup>

import { ref, reactive } from 'vue' import shopeeAccounts from '@/api/shopee/shopeeAccounts' import { Message } from '@arco-design/web-vue' import ShopeeAccounts from "@/api/shopee/shopeeAccounts";

const crudRef = ref()

const options = reactive({ id: 'shopee_accounts', rowSelection: { showCheckedAll: true }, expandSearch: false, pk: 'id', operationColumn: true, operationWidth: 160, formOption: { viewType: 'drawer', width: 700, placement: 'left', }, api: shopeeAccounts.getList, recycleApi: shopeeAccounts.getRecycleList, add: { show: true, api: shopeeAccounts.save, auth: ['shopeeAccount:save'] }, edit: { show: true, api: shopeeAccounts.update, auth: ['shopeeAccount:update'] }, delete: { show: true, api: shopeeAccounts.deletes, auth: ['shopeeAccount:delete'], realApi: shopeeAccounts.realDeletes, realAuth: ['shopeeAccount:realDeletes'] }, recovery: { show: true, api: shopeeAccounts.recoverys, auth: ['shopeeAccount:recovery'] }, import: { show: true, url: 'shopee/accounts/import', templateUrl: 'shopee/accounts/downloadTemplate', auth: ['shopeeAccount:import'] }, export: { show: true, url: 'shopee/accounts/export', auth: ['shopeeAccount:export'] } })

const getShopAuthUrl = () => { ShopeeAccounts.shopAuth().then(res => { window.open(res.data.url) }) }

const refreshAccessToken = () => { ShopeeAccounts.refreshAccessToken().then(res => { Message.success(res.message ?? res.data[0]) }) }

const refreshAccessTokenShopLevel = () => { ShopeeAccounts.refreshAccessTokenShopLevel().then(res => { Message.success(res.message ?? res.data[0]) }) }

const searchForm = ref({}) const emit = defineEmits(['search']) const handlerSearch = (value, key) => { emit('search', searchForm.value) }

const numberOperation = (newValue, id, numberName) => { shopeeAccounts.numberOperation({ id, numberName, numberValue: newValue }).then( res => { res.success && Message.success(res.message) }).catch( e => { console.log(e) } ) }

const switchStatus = (statusValue, id, statusName) => { shopeeAccounts.changeStatus({ id, statusName, statusValue }).then( res => { res.success && Message.success(res.message) }).catch( e => { console.log(e) } ) }

const statusDict = { data: [ {label: '是', value: 1}, {label: '否', value: 0}, ], translation: true, tagColors: { 0: 'red', 1: 'green' } }

const cbscDict = { data: [ {label: 'CNSC', value: 'CNSC'}, {label: 'KRSC', value: 'KRSC'}, {label: 'UNUPGRADED', value: 'UNUPGRADED'}, ], translation: true, tagColors: { 'CNSC': 'orangered', 'KRSC': 'orangered', 'UNUPGRADED': 'orangered', } }

const stateDict = { data: [ {label: '正常', value: 'NORMAL'}, {label: '禁止', value: 'BANNED'}, {label: '冻结', value: 'FROZEN'}, ], translation: true, tagColors: { 'BANNED': 'red', 'FROZEN': 'orangered', 'NORMAL': 'green', } }

const columns = reactive([ { title: "主键", dataIndex: "id", formType: "input", addDisplay: false, editDisplay: false, hide: true, commonRules: { required: true, message: "请输入主键" } }, { title: "店铺头像", dataIndex: "image", formType: "upload", width: 75, commonRules: { required: true, message: "请输入店铺头像" }, type: "image", multiple: false, rounded: true, labelWidth: '86px' }, { title: "店铺名称", dataIndex: "name", formType: "input", search: true, commonRules: { required: true, message: "请输入店铺名称" } }, { title: "账号", dataIndex: "account", formType: "input", search: true, commonRules: { required: true, message: "请输入账号" } }, { title: "Token", dataIndex: "access_token", formType: "input", search: false, hide:true, commonRules: { required: true, message: "请输入accessToken" } }, { title: "刷新Token", dataIndex: "refresh_token", formType: "input", search: false, hide:true, commonRules: { required: true, message: "请输入refreshToken" } }, { title: "地区", dataIndex: "region", formType: "select", dict: { data: [ {label: '巴西', value: 'BR'}, {label: '菲律宾', value: 'PH'}, {label: '墨西哥', value: 'MX'}, {label: '马来西亚', value: 'MY'}, ], translation: true, }, search: true, commonRules: { required: true, message: "请输入地区" } }, { title: "状态", dataIndex: "status", formType: "radio", dict: stateDict, search: true, commonRules: { required: true, message: "请选择状态" } }, { title: "跨境店铺", dataIndex: "is_cb", formType: "radio", search: true, dict: statusDict, commonRules: { required: true, message: "请输入是否为跨境" } }, { title: "cnsc店铺", dataIndex: "is_cnsc", formType: "radio", search: true, dict: statusDict, commonRules: { required: true, message: "请输入是否为全球店铺" } }, { title: "cbsc店铺", dataIndex: "shop_cbsc", formType: "radio", search: true, dict: cbscDict, commonRules: { required: true, message: "请输入是否为全球店铺" } }, { title: "3pf店铺", dataIndex: "is_3pf", formType: "radio", search: true, dict: statusDict, commonRules: { required: true, message: "请输入是否为全球店铺" } }, { title: "SIP店铺", dataIndex: "is_sip", formType: "radio", search: true, dict: statusDict, commonRules: { required: true, message: "请输入是否为SIP店铺" } }, { title: "授权时间", dataIndex: "auth_time", formType: "date", search: false, hide:true, commonRules: { required: true, message: "请输入商店被授权给合作伙伴时的时间戳" }, showTime: true }, { title: "到期日期", dataIndex: "expire_time", formType: "date", search: false, hide:true, commonRules: { required: true, message: "请输入店授权的到期日期" }, showTime: true }, { title: "店铺ID", dataIndex: "shop_id", formType: "input", search: false, hide:true, commonRules: { required: true, message: "请输入shop_id" } }, { title: "创建者", dataIndex: "created_by", formType: "input", addDisplay: false, editDisplay: false, hide: true }, { title: "更新者", dataIndex: "updated_by", formType: "input", addDisplay: false, editDisplay: false, hide: true }, { title: "创建时间", dataIndex: "created_at", formType: "date", addDisplay: false, editDisplay: false, hide: true, showTime: true }, { title: "更新时间", dataIndex: "updated_at", formType: "date", addDisplay: false, editDisplay: false, hide: true, showTime: true }, { title: "删除时间", dataIndex: "deleted_at", formType: "date", addDisplay: false, editDisplay: false, hide: true, showTime: true }, { title: "备注", dataIndex: "remark", formType: "input", addDisplay: false, editDisplay: false, hide: true } ])

` 能不能再看下这个, name一样的, 但是还刷新? @kanyxmo

[kanyxmo]

1. name保持唯一，也就是路由保持唯一
2. 页面底部要加那一行

如果还未缓存，请重启前端再试。如果还不行，我也没办法了