cankao-admin/src/views/pages/richedit/indexMobile.vue

<template>
    <div class="all" ref="mescrollRef" v-infinite-scroll="getDataByScoll" style="overflow-y: auto">
        <div style="display: flex; align-items: center">
            <el-input v-model="form.keyword" placeholder="输入关键字进行搜索（以空格隔开）" class="input-with-select"
                @keyup.enter="handleSearch" style="width: 80%">
                <template #append>
                    <el-button icon="Search" @click="handleSearch" />
                </template>
            </el-input>

            <el-button style="width: 20%" type="text" @click="restData">清空条件</el-button>
        </div>

        <el-date-picker style="margin-top: 20px; width: 100%; max-height: 40px" v-model="daterange" type="daterange"
            range-separator="至" value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
            @change="handleSearch" />

        <div class="filter">
            <div class="r_tabs">
                <div class="tabItem" v-for="(item, index) in tabsList" :key="index" @click="changeTab(index)">
                    <text :style="{
                        color: tabIndex == index ? '#409eff' : '#333',
                        fontWeight: tabIndex == index ? 'bold' : 'normal',
                    }">{{ item.name }}</text>
                    <div class="tab_line" v-if="tabIndex == index"></div>
                </div>
            </div>

            <!-- <SortButton ref="sortRef" @changeSort="changeSort"></SortButton> -->
        </div>

        <div class="r_list" v-loading="loading" ref="listRef">
            <el-card v-for="(item, index) in tableData.data" :key="index" class="card">
                <template #header>
                    <div class="card_header" @click.stop="goDetail(1, item, true)">
                        <text class="card_title" v-html="item.title"></text>
                        <div class="r_point" :style="{ color: '#000' }">
                            <div class="point" :style="{ backgroundColor: item.status == 2 ? '#52C41A' : '#D9D9D9' }">
                            </div>
                            <text v-if="item.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
                            <text v-if="item.status == 1" style="color: rgba(0, 0, 0, 0.65)">
                                {{ item.deleted ? '已删除' : '未发布' }}
                            </text>
                            <text v-if="item.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text>
                            <text v-if="item.status == 3" style="color: rgba(0, 0, 0, 0.65)">审核中</text>
                            <text v-if="item.status == 4" style="color: rgba(0, 0, 0, 0.65)">已二审</text>

                            <text v-if="item.status == -1 && !item.deleted" style="color: red"> 退改中 </text>
                            <text v-if="item.status == -1 && item.deleted"> 已删除 </text>
                        </div>
                    </div>
                </template>
                <div style="display: flex; align-items: center" @click.stop="goDetail(1, item, true)">
                    <div style="display: flex; align-items: center; gap: 5px" v-if="item.submitter">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <text>{{ item.submitter }}</text>
                    </div>

                    <div style="margin-left: 20px" v-if="item.rating != 0 && item.rating != null">
                        <text>编辑评分：</text>
                        <text>{{ item.rating }}</text>
                    </div>
                </div>
                <template #footer>
                    <div style="display: flex; justify-content: space-between; align-items: center; height: 10px">
                        <div>
                            <text>报道时间：</text>
                            <text>{{ item.publishTime }}</text>
                        </div>

                        <div class="option">
                            <el-button v-if="item.deleted" type="text" style="margin-left: -10px"
                                @click="doRecoverFn(item)">
                                <text>恢复</text>
                            </el-button>
                            <div v-else
                                style="display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; white-space: nowrap">
                                <!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
                                <div v-if="Session.get('userInfoLocal').userType == '00'">
                                    <!-- 普通账号 -->
                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
                                        type="text" @click="goDetail(1, item, false)">编辑</el-button>

                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
                                        type="text" @click="doApprovalFn(item, item.status)">送审</el-button>
                                    <el-button v-else-if="item.status == 3" type="text"
                                        @click="doApprovalFn(item, item.status)">撤审</el-button>

                                    <el-button v-if="item.status == 0 || item.status == 1 || item.status == -1"
                                        type="text" style="color: #ff1818" @click="doDeleteNewsFn(item)">删除</el-button>
                                </div>
                                <div v-if="Session.get('userInfoLocal').userType == '02'">
                                    <el-button v-if="item.status == 4" type="text"
                                        @click="doApprovalFn(item, item.status)">撤审</el-button>

                                    <!-- 二审账号 -->
                                    <el-button v-if="item.status == 3" type="text" style="color: #ff1818"
                                        @click="doNewReturnFn(item)">退改</el-button>

                                    <el-button v-if="item.status == 3" type="text"
                                        @click="goDetail(1, item, false)">编辑</el-button>

                                    <el-button v-if="item.status == 3" type="text"
                                        @click="doNewCheckFn(item)">复审</el-button>

                                    <el-button type="text" v-if="item.status == 4"
                                        @click="doNewsPublishFn(item, 2)">发布</el-button>
                                </div>
                                <div v-if="Session.get('userInfoLocal').userType == '01'">
                                    <!-- 终审账号 -->
                                    <el-button v-if="item.status == 3 || item.status == 4" type="text"
                                        @click="goDetail(1, item, false)">编辑</el-button>

                                    <el-button v-if="item.status == 4" type="text" style="color: #ff1818"
                                        @click="doNewReturnFn(item)">退改</el-button>

                                    <el-button type="text" v-if="item.status == 2"
                                        @click="doNewsPublishFn(item, 1)">撤稿</el-button>
                                    <el-button type="text" v-else-if="item.status != -1 && item.status == 4"
                                        @click="doNewsPublishFn(item, 2)">发布</el-button>

                                    <el-button v-if="item.status == 3" type="text"
                                        style="color: #ff1818; margin-left: 5px"
                                        @click="doNewReturnFn(item)">退改</el-button>
                                </div>

                                <!-- <el-icon size="16" @click="goRecord(scope.row)">
								<Tickets />
							</el-icon> -->
                            </div>
                        </div>
                    </div>
                </template>
            </el-card>

            <text class="bottom_load_text" v-if="tableData.data.length < tableData.total">--- 正在加载中 ---</text>
            <text class="bottom_load_text" v-else>--- 已经到底了 ---</text>
        </div>

        <div v-if="isShowBackTop" class="back_top" @click="goTop">
            <el-icon>
                <CaretTop />
            </el-icon>
        </div>
        <keep-alive>
            <DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
                @handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
                @getData="getData" />
        </keep-alive>
    </div>
</template>
<script setup lang="ts" name="loginIndex">
import { onUnmounted, onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElMessageBox } from 'element-plus';
import tableComponents from '/@/components/tableComponents/index.vue';
import { useRoute, useRouter } from 'vue-router';
import icon_table_filter from '/@/assets/icon_table_filter.png';
import DetailDrawer from './DetailDrawer/index.vue';
import SortButton from '/@/components/mobile/SortButton.vue';
import { Session } from '/@/utils/storage';
import { isMobileByWidth } from '/@/utils/Utils';
import { doNewRevoke, doNewSubmit, doNewLog, getNews, doNewsPublish, doNewCheck, doNewReturn } from '/@/api/api';
import preventBack from 'vue-prevent-browser-back'; //组件内单独引入
import router from '/@/router';
import { highlightTitle } from '/@/utils/highlight';

const loading = ref(false);

const tabsList = ref([
    {
        name: '审核中',
        status: 3,
    },
    {
        name: '已发布',
        status: 2,
    },
    {
        name: '全部',
        status: null,
    },
]);

const tabIndex = ref(0);

function changeTab(index) {
    tabIndex.value = index;
    form.value.status = tabsList.value[index].status;
    getData();
}

function changeSort(sort) {
    form.value.orderBy = 'publishTime$' + sort;
    getData();
}

const form = ref({
    // orderBy: 'updateTime$desc',
    orderBy: null,
    // direction: 'desc',
    keyword: '',
    minScore: '',
    maxScore: '',
    industry: [],
});

const tableData = reactive({
    data: [],
    total: 0,
    page: 1,
    size: 10,
});

function getDataByScoll() {
    if (tableData.data.length < tableData.total) {
        tableData.page++;
        getData();
    }
}

const tableLoading = ref(false);
const daterange = ref('');
// 获取列表
async function getData() {
    // return
    if (form.value.minScore && form.value.maxScore && Number(form.value.maxScore) < Number(form.value.minScore)) {
        ElMessage.error('最高分不能小于最低分');
        return;
    }

    let _sdate = '';
    let _edate = '';
    if (daterange.value) {
        _sdate = daterange.value[0];
        _edate = daterange.value[1];
    }
    console.log('🚀 ~ getData ~ _edate:', _edate);

    const industry = form.value.industry?.length > 0 ? encodeURIComponent(JSON.stringify(form.value.industry)) : '';

    try {
        loading.value = true;
        let { code, data, total } = await getNews({
            ...form.value,
            industry,
            // page: tableData.page,
            current: tableData.page,
            size: tableData.size,
            dateline_from: _sdate || undefined,
            dateline_to: _edate || undefined,
            range: Session.get('userInfoLocal').userType == '01' ? 'review' : Session.get('userInfoLocal').userType == '02' ? 'secondReview' : 'all',
        });
        loading.value = false;
        if (code == 200) {
            tableData.total = total;

            if (tableData.page == 1) {
                tableData.data = data;
            } else {
                tableData.data.push(...data);
            }

            tableData.data.forEach((item, index) => {
                item.columns.forEach((childItem, childIndex) => {
                    if (childIndex < 2) {
                        if (!item.columnsMin) {
                            item.columnsMin = [];
                        }
                        item.columnsMin.push(childItem);
                    }
                });
                item.title = highlightTitle(item.title, form.value.keyword);
            });
        }
    } catch (error) {
        loading.value = false;
    }
}

function handleSearch() {
    tableData.page = 1;
    getData();
}

/**
 * 上下架
 * @param item
 * @param status   1：下架 2：上架
 */
async function doNewsPublishFn(item, status) {
    let str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
    if (status == 1) {
        str = '请确认要下架该篇资讯？撤稿后前台将不可见本文章';
    } else {
        str = '请确认已审核该篇资讯，发布后前台将展示本资讯';
    }
    ElMessageBox.confirm(str, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            let { code } =
                status == 1
                    ? await doNewRevoke({
                        id: item.id,
                        status: status,
                    })
                    : await doNewsPublish({
                        id: item.id,
                        status: status,
                    });
            if (code == 200) {
                ElMessage.success('操作成功');
                drawer.value = false;
                getData();
            }
        })
        .catch(() => { });
}

/**  管理后台需求文件0519（V1.1） start */
const drawer = ref(false);
const newsData = ref<any>();
const readOnly = ref(false);
const newstype = ref(0);
/**  管理后台需求文件0519（V1.1） end */

/**
 * 进入详情页
 * @param type 0：创建 1：编辑
 */
function goDetail(type, item, readonly) {
    readOnly.value = readonly;
    newsData.value = item;
    newstype.value = type;
    drawer.value = true;

    // router.push({
    //     path: '/detailMobile',
    //     query: {
    //         type,
    //         item,
    //         readonly,
    //     }
    // })
}

const sortRef = ref(null);

function restData() {
    form.value.keyword = null;
    form.value.industry = null;
    form.value.tag = null;
    daterange.value = null;
    form.value.minScore = null;
    form.value.maxScore = null;
    form.value.mediaId = null;
    form.value.deleted = null;

    form.value.status = null;
    form.value.rating = null;
    form.value.orderBy = null;

    sortRef.value.clearSort();

    tableData.page = 1;
    getData();
}

function handleEditStatus(val: boolean) {
    readOnly.value = val;
}

const mescrollRef = ref();
function goTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth',
    });
    mescrollRef.value.scrollTo({
        top: 0,
        behavior: 'smooth',
    });
}

const isShowBackTop = ref(false);
function handleScroll() {
    if (mescrollRef.value.scrollTop > 300) {
        isShowBackTop.value = true;
    } else {
        isShowBackTop.value = false;
    }
}

// 复审
async function doNewCheckFn(item) {
    let { code, data } = await doNewCheck({
        id: item.id,
    });
    if (code == 200) {
        ElMessage.success('操作成功');
        getData();
    }
}

// 退改
async function doNewReturnFn(item) {
    let { code, data } = await doNewReturn({
        id: item.id,
    });
    if (code == 200) {
        ElMessage.success('操作成功');
        getData();
    }
}

async function doApprovalFn(item, status) {
    let str = '确认初审完成并提交复核？送审后不支持再次编辑';
    if (status == 3 || status == 4) {
        str = '确认撤销该篇资讯审核？';
    } else {
        str = '确认初审完成并提交复核？送审后不支持再次编辑';
    }
    ElMessageBox.confirm(str, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            let { code } =
                status == 3 || status == 4
                    ? await doNewRevoke({
                        id: item.id,
                    })
                    : await doNewSubmit({
                        id: item.id,
                    });
            if (code == 200) {
                ElMessage.success('操作成功');
                drawer.value = false;
                getData();
            }
        })
        .catch(() => { });
}

onMounted(() => {

    if (Session.get('userInfoLocal').userType == '02') {
        tabsList.value = [
            {
                name: '审核中',
                status: 3,
            },
            {
                name: '已二审',
                status: 4,
            },
            {
                name: '已发布',
                status: 2,
            },
            {
                name: '退改中',
                status: -1,
            },
            {
                name: '全部',
                status: null,
            },
        ]
    } else if (Session.get('userInfoLocal').userType == '01') {
        tabsList.value = [
            {
                name: '已二审',
                status: 4,
            },
            {
                name: '已发布',
                status: 2,
            },
            {
                name: '退改中',
                status: -1,
            },
            {
                name: '全部',
                status: null,
            },
        ]
    }

    changeTab(0);
    mescrollRef.value.addEventListener('scroll', handleScroll);
    // getData();


});

onUnmounted(() => {
    mescrollRef.value.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped lang="scss">
.all {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    height: 100vh;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge 旧版本 */
}

/* 隐藏容器的滚动条 */
.all::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge, Opera */
}

.filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 0 5px;
}

.r_tabs {
    display: flex;
    gap: 30px;
    margin-top: 10px;

    .tabItem {
        font-size: 16px;
        color: #333;
        // font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .tab_line {
        width: 20px;
        height: 5px;
        background-color: #409eff;
        border-radius: 20px;
        margin-top: 5px;
    }
}

.r_list {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 15px;
}

.card_header {
    display: flex;
    justify-content: space-between;

    .card_title {
        font-size: 15px;
        font-weight: bold;
        width: 73%;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;

        height: 43px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
        -webkit-line-clamp: 2;
        /*要显示的行数*/
        /* autoprefixer: off */
        -webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
    }

    .r_point {
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: 400;
    }

    .point {
        width: 8px;
        height: 8px;
        border-radius: 100px;
    }
}

.card {
    box-shadow: 0 0 5px rgba($color: #474747, $alpha: 0.1);
    border-radius: 5px;
}

.option {
    display: flex;

    button {
        padding: 0 0px 0 0px;
    }
}

:deep(.highlight) {
    color: #ff0000;
    font-weight: bold;
}

.bottom_load_text {
    font-size: 14px;
    color: #ccc;
    width: 90vw;
    height: 30px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.back_top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba($color: #363636, $alpha: 0.2);
}
</style>