fgm
/
cankao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(translate): 添加移动端翻译组件并优化列表页 

refactor(env): 更新开发环境API地址配置

style(richedit): 调整移动端列表页样式和布局

feat(richedit): 根据用户类型动态显示不同标签页
This commit is contained in:
34701892@qq.com 2025-10-09 20:45:11 +08:00
parent 228a300193
commit c0ed17cc43
5 changed files with 609 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
View File

@ -4,11 +4,11 @@ ENV = development
# 本地环境接口地址
# VITE_API_URL = https://4155gf93ll13.vicp.fun/admin
# VITE_API_URL = http://localhost:13579/admin
# VITE_API_URL = https://cankao.cs.com.cn/admin
VITE_API_URL = http://123.60.153.169:8040/admin
VITE_API_URL = https://cankao.cs.com.cn/admin
# VITE_API_URL = http://123.60.153.169:8040/admin
# VITE_API_URL = /api
#H5的域名，目前是给列表里的复制用
# VITE_API_URL_H5 = https://cankao.cs.com.cn
VITE_API_URL_H5 = http://123.60.153.169:8040
VITE_API_URL_H5 = https://cankao.cs.com.cn
# VITE_API_URL_H5 = http://123.60.153.169:8040

1
src/components/translate/translate.vue
View File

@ -41,6 +41,7 @@
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { getTranslator } from '/@/api/api';
import { isMobileByWidth } from '/@/utils/Utils'
const props = defineProps({
infoData: {

132
src/components/translate/translateMobile.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<el-collapse accordion expand-icon-position="left" style="margin-top: 30px" v-if="dataTranslator.titleEN &&
dataTranslator.titleCN &&
dataTranslator.contentEN &&
dataTranslator.contentCN
">
<el-collapse-item name="1">
<template #title="{ isActive }">
<div :class="['title-wrapper', { 'is-active': isActive }]">
<text style="font-size: 16px; font-weight: bold">翻译</text>
<img src="/@/assets/icon_translate.png" class="icon_translate" />
</div>
</template>
<div style="display: flex;flex-direction: column;">
<div class="translate_wrapper">
<div class="translate_item">
<text>资讯原文</text>
<el-input v-model="dataTranslator.titleEN" placeholder-class="input-placeholder" disabled />
</div>
<div class="demo-panel">
<div v-html="dataTranslator.contentEN"></div>
</div>
</div>
<div class="translate_wrapper" style="margin-top: 20px;">
<div class="translate_item">
<text>参考消息译文</text>
<el-input v-model="dataTranslator.titleCN" placeholder-class="input-placeholder" disabled />
</div>
<div class="demo-panel">
<div class="demo-panel" v-html="dataTranslator.contentCN"></div>
</div>
</div>
<!-- <div class="translate_wrapper">
<div class="translate_item">
<text>资讯原文</text>
<el-input v-model="dataTranslator.titleEN" placeholder-class="input-placeholder" disabled />
</div>
<div class="translate_item">
<text>参考消息译文</text>
<el-input v-model="dataTranslator.titleCN" placeholder-class="input-placeholder" disabled />
</div>
</div>
<el-splitter layout="horizontal">
<el-splitter-panel collapsible>
<div class="demo-panel">
<div v-html="dataTranslator.contentEN"></div>
</div>
</el-splitter-panel>
<el-splitter-panel collapsible>
<div class="demo-panel" v-html="dataTranslator.contentCN"></div>
</el-splitter-panel>
</el-splitter> -->
</div>
</el-collapse-item>
</el-collapse>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { getTranslator } from '/@/api/api';
import { isMobileByWidth } from '/@/utils/Utils'
const props = defineProps({
infoData: {
type: Object,
default: () => { },
},
});
watch(
() => props.infoData,
(newValue) => {
console.log('🚀 ~ newValue:', newValue);
getData();
},
{ deep: true }
);
const dataTranslator = ref({});
async function getData() {
let { code, data } = await getTranslator(props.infoData);
if (code == 200) {
dataTranslator.value = data;
}
}
onBeforeMount(() => { });
</script>
<style scoped lang="scss">
.icon_translate {
width: 18px;
height: 18px;
margin-left: 5px;
}
.title-wrapper {
display: flex;
align-items: center;
}
.demo-panel {
// display: flex;
// align-items: center;
// justify-content: center;
//border: 1px solid #ccc;
// height: 300px;
}
.translate_wrapper {
display: flex;
flex-direction: column;
width: 100%;
.translate_item {
display: flex;
flex-direction: column;
width: 100%;
text {
font-size: 14px;
font-weight: bold;
}
}
}
</style>

7
src/views/pages/richedit/DetailDrawer/index.vue
View File

@ -123,9 +123,12 @@
style="position: absolute; right: 50px; top: 20px; z-index: 9999">
</icon_ai>
<editorBox :ueditorData="form.content" @changeMsg="changeMsg" :readOnly="readOnly"></editorBox>
<translate v-if="form.newsInfoId && !isMobileByWidth()" :infoData="form" :key="form.id">
</translate>
<translateMobile v-else-if="form.newsInfoId && isMobileByWidth()" :infoData="form"
:key="form.id">
</translateMobile>
</div>
<el-collapse accordion expand-icon-position="left"
@ -205,6 +208,8 @@ import translate from '/@/components/translate/translate.vue';
import { Session } from '/@/utils/storage';
import { isMobileByWidth } from '/@/utils/Utils'
import { doNewReturn, doNewCheck } from '/@/api/api';
import translateMobile from '/@/components/translate/translateMobile.vue';
const emit = defineEmits(['doNewsPublishFn', 'handleEditStatus', 'doDeleteNewsFn', 'getData']);

159
src/views/pages/richedit/indexMobile.vue
View File

@ -1,13 +1,8 @@
<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%"
>
<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>
@ -16,32 +11,22 @@
<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"
/>
<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="{
<text :style="{
color: tabIndex == index ? '#409eff' : '#333',
fontWeight: tabIndex == index ? 'bold' : 'normal',
}"
>{{ item.name }}</text
>
}">{{ item.name }}</text>
<div class="tab_line" v-if="tabIndex == index"></div>
</div>
</div>
<SortButton ref="sortRef" @changeSort="changeSort"></SortButton>
<!-- <SortButton ref="sortRef" @changeSort="changeSort"></SortButton> -->
</div>
<div class="r_list" v-loading="loading" ref="listRef">
@ -50,7 +35,8 @@
<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>
<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 ? '已删除' : '未发布' }}
@ -85,54 +71,59 @@
</div>
<div class="option">
<el-button v-if="item.deleted" type="text" style="margin-left: -10px" @click="doRecoverFn(item)">
<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">
<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="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" @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
>
<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 == 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" 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="goDetail(1, item, false)">编辑</el-button>
<el-button v-if="item.status == 3" type="text" @click="doNewCheckFn(item)">复审</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>
<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 == 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 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 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
>
<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)">
@ -154,16 +145,9 @@
</el-icon>
</div>
<keep-alive>
<DetailDrawer
v-model="drawer"
:data="newsData"
:readOnly="readOnly"
:type="newstype"
@handleEditStatus="handleEditStatus"
@doNewsPublishFn="doNewsPublishFn"
@doDeleteNewsFn="doDeleteNewsFn"
@getData="getData"
/>
<DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
@handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
@getData="getData" />
</keep-alive>
</div>
</template>
@ -335,7 +319,7 @@ async function doNewsPublishFn(item, status) {
getData();
}
})
.catch(() => {});
.catch(() => { });
}
/** 管理后台需求文件0519（V1.1） start */
@ -461,13 +445,60 @@ async function doApprovalFn(item, status) {
getData();
}
})
.catch(() => {});
.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(() => {