列表页面 来啦！
温馨提示：
在 列表页面中，使用 若依的分页组件： Pagination，图片预览组件：ImagePreview，标签组件 DictTag ，还有公共方法 parseTime 等等 对若依 respect !
搜索 或 翻页时 通过 router.push 跳转路由，使用 onBeforeRouteUpdate 监听路由变化，然后获取页面数据 getList
注意，搜索条件里没有 pageNum 和 pageSize，把她放在列表页面更好。
只是举个栗子，大家别当真 list.vue：
<template>
<div class="app-container" v-hasPermi="actions['search'].permission">
<!-- 需求管理 -->
<!-- 搜索 -->
<Search ref="searchRef" @search="search" :showSearch="showSearch" :dicts="dicts"/>
<!-- 批量操作 -->
<BatchOperation
:actions="actions"
@create="handleCreate"
>
<template #rightToolbar>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</template>
</BatchOperation>
<el-table :data="list" row-key="demandId" @expand-change="expandChange" :expand-row-keys="expandRowKeys" scrollbar-always-on>
<el-table-column type="expand" fixed="left">
<template #default="{row}">
<el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item label="封面图" :span="2" width="150px" label-align="right">
<ImagePreview :src="row.urlOss.map(z=>z.url).join(',')||defaultThumb" v-if="Array.isArray(row.urlOss)" height="100px"/>
</el-descriptions-item>
<el-descriptions-item label="需求说明" :span="2" width="150px" label-align="right">
<div v-html="row.content" class="ql-snow ql-editor"></div>
</el-descriptions-item>
<el-descriptions-item label="备注" :span="2" width="150px" label-align="right">
{{row.remark}}
</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
<el-table-column label="需求名称" header-align="center" prop="name" width="260" fixed="left" ></el-table-column>
<el-table-column label="审核状态" prop="checkStatus" width="150" align="center">
<template #default="{row}">
<div style="display:flex;justify-content: center;">
<dict-tag :options="dicts.sys_checkStatus" :value="row.checkStatus" />
<span v-if="row.checkStatus == 2">
<el-divider direction="vertical"></el-divider>
<el-popover
placement="top"
width="200"
trigger="hover"
:content="row.checkMessage">
<template #reference>
<el-button link type="danger">原因</el-button>
</template>
</el-popover>
</span>
</div>
</template>
</el-table-column>
<el-table-column label="是否上架" prop="status" width="150" align="center">
<template #default="{row}">
<dict-tag :options="dicts.demand_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="需求预算" prop="budget" width="150" align="center" >
<template #default="{row}">
<span>{{ moneyFormat(row.budget) }}</span>
</template>
</el-table-column>
<el-table-column label="需求类型" prop="category" width="150" align="center">
<template #default="{row}">
<dict-tag :options="dicts.demand_category" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="交易数量" width="150" align="center">
<template #default="{row}">
<span>{{row.total || '--'}}</span>
</template>
</el-table-column>
<el-table-column label="截止时间" header-align="center" prop="deadline" width="120" show-overflow-tooltip>
<template #default="{row}">
<span>{{ row.deadline ? parseTime(row.deadline,'{y}-{m}-{d}') : '长期有效' }}</span>
</template>
</el-table-column>
<el-table-column label="联系人" header-align="center" prop="userName" width="180" show-overflow-tooltip>
<template #default="{row}">
<span>{{ row.customerName}}</span>
<br/>
<span>{{row.userName }}</span>
<el-divider direction="vertical"></el-divider>
<span>{{row.tel}}</span>
</template>
</el-table-column>
<el-table-column label="发布时间" align="center" prop="releaseTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
<template #default="{row}">
<span>{{ parseTime(row.releaseTime,'{y}年{m}月{d}日')}} </span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" show-overflow-tooltip prop="createTime" width="180"></el-table-column>
<el-table-column label="操作" fixed="right" header-align="center" width="150px">
<template #default="{row}">
<BatchOperation
:inColumn="true"
:actions="initAction(false, false, row)"
@check="handleCheck(row)"
@edit="handleEdit(row)"
@delete="handleDelete(row.demandId)"
></BatchOperation>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :hidden="total<=pager.pageSize" :total="total" v-model:page="pager.pageNum" v-model:limit="pager.pageSize" @pagination="pagination"></Pagination>
<!-- 审核 -->
<div v-hasPermi="actions['check'].permission"><Check ref="checkRef" @refresh="getList" /></div>
</div>
</template>
<script setup name="DemandIndex">
import { getPages, remove } from '@/api/demand'
import defaultThumb from '@/assets/images/diagrams/demand-default-thumb.jpg'
import Check from './components/check.vue'
import Search from './components/search.vue'
import initAction from './components/actions'
const { proxy } = getCurrentInstance()
// 字典
const dicts = ref({})
// 使用路由
const router = useRouter()
const route = useRoute()
// 列表相关
const list = ref([]) // 列表数据
const pager = ref({ // 列表数据页码
pageNum: Number(route.query.pageNum) || 1,
pageSize: Number(route.query.pageSize) || 20
})
const total = ref(0) // 列表总条数
// 默认展开行 keys
const expandRowKeys = ref([])
// 搜索相关
const searchRef = ref(null) // ref
const showSearch = ref(true)// 是否显示搜索
// 勾选
const multipleSelection = ref([])
// 非单个禁用
const single = computed(() => multipleSelection.value.length != 1)
// 非多个禁用
const multiple = computed(() => !multipleSelection.value.length)
// 当前选中
const selectedRow = computed(()=>{
if(multipleSelection.value.length == 1){
return list.value.find(z => z.demandId == multipleSelection.value[0])
}
return null
})
// 批量操作按钮
const actions = computed(()=>initAction(single.value, multiple.value, selectedRow.value))
// 审核 ref
const checkRef = ref(null)
// 点击 发布需求
const handleCreate =()=>{
router.push('/demand/create')
}
// 点击 审核
const handleCheck =(row)=>{
const current = row || selectedRow.value
checkRef.value.init(current)
}
// 点击 编辑
const handleEdit =(row)=>{
const current = row || selectedRow.value
router.push('/demand/edit/' + current.demandId)
}
// 展开详情
const expandChange = async (row,expandedRows)=>{
const index = expandedRows.findIndex(z=>z.demandId== row.demandId)
if(index == -1) return
row.urlOss = await proxy.getFileList(row.urlOss)
expandRowKeys.value = expandedRows.map(z=>z.demandId)
}
// 获取列表数据
const getList = () => {
proxy.$modal.loading("加载中...")
const { dateRange, ...search } = searchRef.value.form
const query = { ...pager.value, ...search }
const data = dateRange ? proxy.addDateRange(query, dateRange) : query
getPages(data).then(response => {
list.value = response.data.rows;
total.value = parseInt(response.data.total);
expandRowKeys.value = []
}).finally(() => {
proxy.$modal.closeLoading();
});
}
// 搜索
const search = () => {
pager.value.pageNum = 1
pagination()
}
// 翻页页面
const pagination = () => {
const { params, ...routeQuery } = searchRef.value.form
router.push({
path: route.path,
query: {
...pager.value,
...routeQuery
}
}).then((res1)=>{
// 路由及参数重复
if(res1 && res1.to.fullPath === res1.from.fullPath){
getList()
}
})
}
// 勾选
const handleSelectionChange = (val) => {
multipleSelection.value = val.map(z => z.demandId)
}
// 批量删除
const handleDelete = (id) => {
proxy.$modal.confirm('确定删除？')
.then(() => {
const ids = id || multipleSelection.value
remove(ids).then(res => {
if (res.code == 200) {
proxy.$modal.msgSuccess("操作成功")
getList()
} else {
proxy.$modal.msgError(res.msg || "请求发生错误，请稍后重试")
}
})
})
.catch(() => {
proxy.$modal.msg("已取消")
})
}
// 监听路由变化
onBeforeRouteUpdate((to, from, next) => {
const newVal = to.query
searchRef.value.setQueryData(newVal)
pager.value.pageNum = Number(newVal.pageNum) || 1
pager.value.pageSize = Number(newVal.pageSize) || 20
// 获取列表
getList()
next()
})
onMounted(()=>{
dicts.value = proxy.useDict('sys_checkStatus', 'demand_status','demand_category')
getList()
})
</script>
<style scoped lang="scss">
.input-with-select{
width: 480px;
::v-deep .el-select .el-input {
width: 150px;
}
}
</style>