|
@@ -1,437 +0,0 @@
|
|
|
-<script setup>
|
|
|
- import { Search, Plus } from '@element-plus/icons-vue'
|
|
|
- import BulkOperations from './components/bulkOperations.vue'
|
|
|
- import { apiReportPush } from '@/api/report'
|
|
|
- import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { tr } from 'element-plus/es/locale/index.mjs';
|
|
|
-
|
|
|
- const filterState = reactive({
|
|
|
- keyword: '',
|
|
|
- classifyIds: [], // 改为数组,减少转换逻辑
|
|
|
- ChartPermissionIds: [],
|
|
|
- publishTime: [],
|
|
|
- updateTime: [],
|
|
|
- sortType: '',
|
|
|
- sortVal: ''
|
|
|
- })
|
|
|
-
|
|
|
- // 表格数据
|
|
|
- const currentPageData = ref([])
|
|
|
- const page = ref(1)
|
|
|
- const pageSize = ref(10)
|
|
|
- const tableLoading = ref(false)
|
|
|
- const totals = ref(0)
|
|
|
- const selectedRows = ref([]); // 存储选中的行
|
|
|
- const selectAll = ref(false) // 全选状态
|
|
|
- const isSelectAll = ref(false);
|
|
|
- const tableRef = ref(null); // 表格引用
|
|
|
- const showBulkOperations = ref(false); // 批量操作弹窗
|
|
|
- const selectReportNum = ref(0); // 当前报告篇数(因为有全选所以不能用.length)
|
|
|
- const uncheckData = ref([]) // 取消选中的数据
|
|
|
- const isHandleSelect = ref(false) // 标记是否手动处理的选中
|
|
|
- const allHandUncheckData = ref([]) // 全部取消选中数据
|
|
|
- const allHandUncheckDataId = ref([])
|
|
|
-
|
|
|
- // 表格列配置
|
|
|
- const tableColOpt = ref([
|
|
|
- { label: '报告标题', key: 'Title'},
|
|
|
- { label: '类型', key: 'ClassifyNameFirst' },
|
|
|
- { label: '作者', key: 'Author', width: '150px'},
|
|
|
- { label: '摘要', key: 'Abstract' },
|
|
|
- { label: '发布/审批时间', key: 'PublishTime', sort: true, width: '200px' },
|
|
|
- { label: '推送时间', key: 'PushTime', sort: true, width: '200px' },
|
|
|
- { label: '状态', key: 'State', width: '100px'},
|
|
|
- ])
|
|
|
-
|
|
|
- function getTitleTime(e) {
|
|
|
- if (e.PublishTime) {
|
|
|
- return dayjs(e.PublishTime).format('MMDD')
|
|
|
- }
|
|
|
- return dayjs(e.ModifyTime).format('MMDD')
|
|
|
- }
|
|
|
-
|
|
|
- // 获取列表数据
|
|
|
- async function getReportList() {
|
|
|
- tableLoading.value = true
|
|
|
- try {
|
|
|
- const res = await apiReportPush.reportPushList({
|
|
|
- PageSize: pageSize.value,
|
|
|
- CurrentIndex: page.value,
|
|
|
- ClassifyIds: filterState.classifyIds ? filterState.classifyIds.join(',') : '',
|
|
|
- ChartPermissionIds: filterState.ChartPermissionIds.join(','),
|
|
|
- PublishStartDate: filterState.publishTime?.[0] || '',
|
|
|
- PublishEndDate: filterState.publishTime?.[1] || '',
|
|
|
- PushStartDate: filterState.updateTime?.[0] || '',
|
|
|
- PushEndDate: filterState.updateTime?.[1] || '',
|
|
|
- KeyWord: filterState.keyword,
|
|
|
- SortParam: filterState.sortType,
|
|
|
- SortType: filterState.sortVal,
|
|
|
- })
|
|
|
- if (res.Ret === 200) {
|
|
|
- isHandleSelect.value = false // 标记手动处理选中
|
|
|
- allHandUncheckData.value = [...allHandUncheckData._value, ...uncheckData._value] // 在数据更新前缓存全部取消选中数据
|
|
|
- // 数组去重
|
|
|
- allHandUncheckData.value = [...new Set(allHandUncheckData._value)]
|
|
|
- currentPageData.value = res.Data.List || []
|
|
|
- totals.value = res.Data.Paging.Totals
|
|
|
- handleCurrentChange() // 在每次数据更新后,更新表格当前选中数据
|
|
|
- } else {
|
|
|
- ElMessage.error('获取报告列表失败')
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error('发生错误: ' + error.message)
|
|
|
- } finally {
|
|
|
- tableLoading.value = false
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 获取列表数据
|
|
|
- getReportList()
|
|
|
-
|
|
|
- function handlePageChange(e) {
|
|
|
- page.value = e
|
|
|
- getReportList()
|
|
|
- }
|
|
|
- function handleTableSort(e) {
|
|
|
- const { order, prop } = e // 直接使用,无需额外注释
|
|
|
- filterState.sortType = prop
|
|
|
- filterState.sortVal = order === 'descending' ? 'desc' : order === 'ascending' ? 'asc' : ''
|
|
|
- handleFilterList()
|
|
|
- }
|
|
|
- function handleFilterList() {
|
|
|
- page.value = 1
|
|
|
- getReportList()
|
|
|
- }
|
|
|
-
|
|
|
- // 手动选择行的时候添加标记
|
|
|
- function handleSelect(selection) {
|
|
|
- isHandleSelect.value = true
|
|
|
- }
|
|
|
-
|
|
|
- // 处理多选变更
|
|
|
- function handleSelectionChange(val) {
|
|
|
- selectedRows.value = val
|
|
|
- // console.log(isHandleSelect._value);
|
|
|
- if (isSelectAll._value) {
|
|
|
- allHandUncheckData.value = allHandUncheckData._value.filter( item => val.findIndex(element => element.ReportId === item.ReportId) === -1) // 从所有取消选中数据中过滤出当前页数据中重新选中的数据
|
|
|
- // selectReportNum.value = totals._value // 更新当前报告篇数
|
|
|
- selectReportNum.value = totals._value - allHandUncheckData._value.length // 更新当前报告篇数
|
|
|
- if (isHandleSelect._value) {
|
|
|
- uncheckData.value = currentPageData._value.filter( item => val.findIndex(element => element.ReportId === item.ReportId) === -1) // 获取当前页数据中,未选中的数据
|
|
|
- selectReportNum.value = selectReportNum._value - uncheckData._value.length // 更新当前报告篇数
|
|
|
- // 判断当前选中数据是否为全部数据,如果为全部数据,则更新全选按钮状态
|
|
|
- if (selectReportNum.value < totals._value) {
|
|
|
- selectAll.value = false
|
|
|
- } else {
|
|
|
- selectAll.value = true
|
|
|
- isSelectAll.value = true // 更新全选按钮状态;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- selectReportNum.value = val.length // 更新当前报告篇数
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 点击全选按钮
|
|
|
- function clickCheckbox() {
|
|
|
- isSelectAll.value = !isSelectAll.value;
|
|
|
- handleCurrentChange('allCheck') // 点击全选按钮之后,更新表格当前选中数据
|
|
|
- }
|
|
|
-
|
|
|
- // 更改当前选中数据状态
|
|
|
- function handleCurrentChange(val) {
|
|
|
- if (isSelectAll.value) { // 如果全选按钮为选中状态,则把当前页数据全部选中
|
|
|
- const rows = currentPageData.value // 注意:这里只是当前组件中的数据,对于后端分页来说,你可能需要不同的逻辑
|
|
|
- rows.forEach(row => {
|
|
|
- // console.log(11);
|
|
|
- const index = selectedRows.value.findIndex(element => element.ReportId === row.ReportId) // 判断当前表格选中数据中是否包含该行数据
|
|
|
- const indexed = allHandUncheckData.value.findIndex(element => element.ReportId === row.ReportId) // 判断当前表格数据是否包含手动未选中的数据
|
|
|
- if (index === -1 && indexed === -1) { // 如果当前表格选中数据中不包含该行数据,则添加到表格选中数据中
|
|
|
- tableRef.value.toggleRowSelection(row, isSelectAll.value); // 选中当前页数据
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- if (val === 'allCheck') {
|
|
|
- tableRef.value.clearSelection() // 如果全选按钮为非选中状态,则清空表格选中数据
|
|
|
- allHandUncheckData.value = [] // 清空手动未选中的数据
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 批量操作
|
|
|
- function bulkOperations() {
|
|
|
- console.log(selectAll);
|
|
|
- // 反选的数据
|
|
|
-
|
|
|
- allHandUncheckDataId.value = [...allHandUncheckData._value, ...uncheckData._value].map(item => item.ReportPushStatusId) // 获取当前表格选中数据中,手动未选中的数据
|
|
|
- selectedRows.value.length > 0 ? showBulkOperations.value = true : ElMessage.warning('请选择报告');
|
|
|
- }
|
|
|
-
|
|
|
- // 撤销
|
|
|
- async function handleReportCancelPublish(e){
|
|
|
- await ElMessageBox.confirm('是否确认撤销改报告','提示')
|
|
|
- const res=await apiReportPush.reportPushCancel({
|
|
|
- ReportPushStatusId:e.ReportPushStatusId
|
|
|
- })
|
|
|
- if(res.Ret===200){
|
|
|
- ElMessage.success('撤销成功')
|
|
|
- handleFilterList()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 推送
|
|
|
- async function handleReportPublish(e){
|
|
|
- const res=await apiReportPush.reportPush({
|
|
|
- ReportPushStatusId:e.ReportPushStatusId
|
|
|
- })
|
|
|
- if(res.Ret===200){
|
|
|
- ElMessage.success('推送APP成功')
|
|
|
- handleFilterList()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- function getClassifyName(e){
|
|
|
- if (!e) {
|
|
|
- return ''; // 如果传入的e为空或undefined,直接返回空字符串
|
|
|
- }
|
|
|
- if(e.ClassifyNameThird){
|
|
|
- return `${e.ClassifyNameFirst}/${e.ClassifyNameSecond}/${e.ClassifyNameThird}`
|
|
|
- }else if(e.ClassifyNameSecond){
|
|
|
- return `${e.ClassifyNameFirst}/${e.ClassifyNameSecond}`
|
|
|
- }else{
|
|
|
- return e.ClassifyNameFirst
|
|
|
- }
|
|
|
- return ''
|
|
|
- }
|
|
|
-
|
|
|
- function success(res) {
|
|
|
- // tableRef.value.clearSelection() // 如果批量推送完成清空表格选中数据
|
|
|
- // selectedRows.value.forEach(row => {
|
|
|
- // tableRef.value.toggleRowSelection(row, isSelectAll.value); // 选中当前页数据
|
|
|
- // });
|
|
|
- handleFilterList()
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="report-pdf-list-page">
|
|
|
- <!-- 查询标题 -->
|
|
|
- <div class="top-right">
|
|
|
- <el-input
|
|
|
- placeholder="报告标题"
|
|
|
- v-model="filterState.keyword"
|
|
|
- :prefix-icon="Search"
|
|
|
- clearable
|
|
|
- style=""
|
|
|
- @input="handleFilterList"
|
|
|
- />
|
|
|
- <div class="select">
|
|
|
- <el-checkbox v-model="selectAll" @change="clickCheckbox" label="列表全选" size="large" />
|
|
|
- <div class="select-title">已选择 {{ selectReportNum }} 篇报告</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex filter-wrap">
|
|
|
- <!-- 分类 -->
|
|
|
- <select-report-classify
|
|
|
- v-model="filterState.classifyIds"
|
|
|
- clearable
|
|
|
- :props="{
|
|
|
- emitPath: false,
|
|
|
- multiple: true,
|
|
|
- }"
|
|
|
- @change="handleFilterList"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 状态 -->
|
|
|
- <!-- <el-select
|
|
|
- placeholder="状态"
|
|
|
- v-model="filterState.status"
|
|
|
- style="width: 165px"
|
|
|
- clearable
|
|
|
- @change="handleFilterList"
|
|
|
- >
|
|
|
- <el-option label="已发布" :value="1"></el-option>
|
|
|
- <el-option label="未发布" :value="2"></el-option>
|
|
|
- </el-select> -->
|
|
|
- <select-permission
|
|
|
- v-model="filterState.ChartPermissionIds"
|
|
|
- :props="{
|
|
|
- emitPath: false,
|
|
|
- multiple: true,
|
|
|
- }"
|
|
|
- clearable
|
|
|
- @change="handleFilterList"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 发布时间 -->
|
|
|
- <div style="width: 235px">
|
|
|
- <el-date-picker
|
|
|
- style="width: 235px"
|
|
|
- v-model="filterState.publishTime"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="发布时间"
|
|
|
- end-placeholder="发布时间"
|
|
|
- clearable
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- @change="handleFilterList"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 更新时间 -->
|
|
|
- <div style="width: 235px">
|
|
|
- <el-date-picker
|
|
|
- style="width: 235px"
|
|
|
- v-model="filterState.updateTime"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="推送时间"
|
|
|
- end-placeholder="推送时间"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- clearable
|
|
|
- @change="handleFilterList"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 批量操作 -->
|
|
|
- <el-button type="primary" @click="bulkOperations" :filterState="filterState">批量操作</el-button>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="list-wrap">
|
|
|
- <el-table
|
|
|
- :data="currentPageData"
|
|
|
- size="default"
|
|
|
- border
|
|
|
- highlight-current-row
|
|
|
- element-loading-text="数据加载中..."
|
|
|
- v-loading="tableLoading"
|
|
|
- @sort-change="handleTableSort"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- @select="handleSelect"
|
|
|
- :row-key="(row) => row.ReportId"
|
|
|
- ref="tableRef"
|
|
|
- >
|
|
|
- <!-- 多选列 -->
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- width="55"
|
|
|
- :reserve-selection="true"
|
|
|
- ></el-table-column>
|
|
|
- <!-- 数据列 -->
|
|
|
- <el-table-column
|
|
|
- v-for="column in tableColOpt"
|
|
|
- :key="column.key"
|
|
|
- :prop="column.key"
|
|
|
- :label="column.label"
|
|
|
- :sortable="column.sort ? 'custom' : false"
|
|
|
- :width="column.width"
|
|
|
- >
|
|
|
- <template v-if="column.headerTips" #header>
|
|
|
- <span>{{ column.label }}</span>
|
|
|
- <el-tooltip
|
|
|
- class="box-item"
|
|
|
- effect="dark"
|
|
|
- raw-content
|
|
|
- :content="column.headerTips"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <el-icon style="position: relative; top: 2px"
|
|
|
- ><i-ep-QuestionFilled
|
|
|
- /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- <template #default="{ row }">
|
|
|
- <span v-if="column.key === 'Title'"
|
|
|
- >{{ row.Title }}({{ getTitleTime(row) }})</span
|
|
|
- >
|
|
|
- <span v-else-if="column.key === 'ClassifyNameFirst'">{{getClassifyName(row)}}</span>
|
|
|
- <span v-else-if="column.key === 'State'">{{
|
|
|
- row.State === 1 ? "已推送" : "未推送"
|
|
|
- }}</span>
|
|
|
- <span v-else-if="column.key === 'PublishTime'">{{
|
|
|
- formatTime(row.PublishTime)
|
|
|
- }}</span>
|
|
|
- <span v-else-if="column.key === 'Abstract'">{{ row.Abstract === '' ? '/' : row.Abstract }} </span>
|
|
|
-
|
|
|
- <span v-else-if="column.key === 'ModifyTime'">{{
|
|
|
- formatTime(row.ModifyTime)
|
|
|
- }}</span>
|
|
|
- <span v-else>{{ row[column.key] }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <!-- 操作列 -->
|
|
|
- <el-table-column label="操作" width="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button
|
|
|
- v-permission="'reportPush:pushCancel'"
|
|
|
- type="danger"
|
|
|
- link
|
|
|
- v-if="row.State === 1"
|
|
|
- @click="handleReportCancelPublish(row)"
|
|
|
- >撤销</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-permission="'reportPush:push'"
|
|
|
- type="primary"
|
|
|
- link
|
|
|
- v-if="row.State === 0"
|
|
|
- @click="handleReportPublish(row)"
|
|
|
- >推送APP</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 分页 -->
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="total,prev,pager,next,jumper"
|
|
|
- :current-page="page"
|
|
|
- :page-size="pageSize"
|
|
|
- :total="totals"
|
|
|
- @current-change="handlePageChange"
|
|
|
- style="margin-top: 30px; justify-content: flex-end"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 批量操作弹窗 -->
|
|
|
- <BulkOperations
|
|
|
- v-model:show="showBulkOperations"
|
|
|
- :selectedRows="selectedRows"
|
|
|
- :allHandUncheckDataId="allHandUncheckDataId"
|
|
|
- :filterState="filterState"
|
|
|
- :isSelectedAll ="isSelectAll"
|
|
|
- @success="success"
|
|
|
- />
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.list-wrap {
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.report-pdf-list-page {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- .filter-wrap {
|
|
|
- // margin-top: 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
- .top-right {
|
|
|
- width: 400px;
|
|
|
- float: right;
|
|
|
- .select {
|
|
|
- margin-top: 30px;
|
|
|
- width: 400px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .select-title {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|