refactor(richedit): 优化表单布局和操作按钮逻辑

重构富文本编辑页面,主要变更包括:
1. 简化表单元素布局,减少冗余代码
2. 根据用户类型重新组织操作按钮显示逻辑
3. 调整环境配置文件中的API地址
This commit is contained in:
34701892@qq.com 2025-09-24 21:25:01 +08:00
parent 1e8385e419
commit 2fbc1d841d
2 changed files with 116 additions and 172 deletions

View File

@ -3,9 +3,9 @@ ENV = development
# 本地环境接口地址 # 本地环境接口地址
# VITE_API_URL = https://4155gf93ll13.vicp.fun/admin # VITE_API_URL = https://4155gf93ll13.vicp.fun/admin
VITE_API_URL = http://localhost:13579/admin # VITE_API_URL = http://localhost:13579/admin
# VITE_API_URL = https://cankao.cs.com.cn/admin # VITE_API_URL = https://cankao.cs.com.cn/admin
# VITE_API_URL = http://123.60.153.169:8040/admin VITE_API_URL = http://123.60.153.169:8040/admin
# VITE_API_URL = /api # VITE_API_URL = /api

View File

@ -9,13 +9,8 @@
<div class="colHeader-right"> <div class="colHeader-right">
<el-space :size="12" class="colHeader-right-1"> <el-space :size="12" class="colHeader-right-1">
<el-input <el-input v-model="form.keyword" placeholder="输入标题/内容关键字进行搜索(以空格隔开)" class="input-with-select"
v-model="form.keyword" @keyup.enter="handleSearch" style="width: 455px">
placeholder="输入标题/内容关键字进行搜索(以空格隔开)"
class="input-with-select"
@keyup.enter="handleSearch"
style="width: 455px"
>
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -23,32 +18,15 @@
<div> <div>
<span>行业分类</span> <span>行业分类</span>
<el-tree-select <el-tree-select v-model="form.industry" :data="industryList" multiple
v-model="form.industry" :render-after-expand="false" filterable show-checkbox style="width: 240px"
:data="industryList" @check="handleCheckChange" @clear="handleSearch" node-key="id" collapse-tags
multiple collapse-tags-tooltip clearable :props="defaultProps">
:render-after-expand="false"
filterable
show-checkbox
style="width: 240px"
@check="handleCheckChange"
@clear="handleSearch"
node-key="id"
collapse-tags
collapse-tags-tooltip
clearable
:props="defaultProps"
>
</el-tree-select> </el-tree-select>
</div> </div>
<el-input <el-input v-model="form.tag" placeholder="匹配多个概念标签(以空格隔开)" class="input-with-select"
v-model="form.tag" @keyup.enter="handleSearch" style="width: 280px">
placeholder="匹配多个概念标签(以空格隔开)"
class="input-with-select"
@keyup.enter="handleSearch"
style="width: 280px"
>
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -56,54 +34,27 @@
</el-space> </el-space>
<div class="colHeader-right-2"> <div class="colHeader-right-2">
<el-date-picker <el-date-picker v-model="daterange" type="daterange" range-separator=""
v-model="daterange" value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间"
type="daterange" style="margin-right: 12px" @change="handleSearch" />
range-separator="至"
value-format="YYYY-MM-DD"
start-placeholder="选择报道时间"
end-placeholder="选择报道时间"
style="margin-right: 12px"
@change="handleSearch"
/>
<el-select-v2 <el-select-v2 v-model="form.mediaId" :options="tagSourceList" clearable placeholder="媒体来源"
v-model="form.mediaId" size="large" style="width: 240px" filterable @change="handleSearch" />
:options="tagSourceList"
clearable
placeholder="媒体来源"
size="large"
style="width: 240px"
filterable
@change="handleSearch"
/>
<el-select <el-select clearable v-model="form.deleted" size="large" style="width: 150px; margin-left: 10px"
clearable v-if="Session.get('userInfoLocal').userType == '00'" placeholder="筛选删除状态"
v-model="form.deleted" @change="handleSearch">
size="large"
style="width: 150px; margin-left: 10px"
v-if="Session.get('userInfoLocal').userType == '00'"
placeholder="筛选删除状态"
@change="handleSearch"
>
<el-option :value="1" label="已删除资讯"></el-option> <el-option :value="1" label="已删除资讯"></el-option>
<el-option :value="0" label="未删除资讯"></el-option> <el-option :value="0" label="未删除资讯"></el-option>
</el-select> </el-select>
<div style="margin-left: 12px; display: flex; flex-wrap: nowrap; align-items: center"> <div style="margin-left: 12px; display: flex; flex-wrap: nowrap; align-items: center">
<span>评分范围</span> <span>评分范围</span>
<el-input <el-input type="number" v-model="form.minScore" style="width: 80px" placeholder="最低"
type="number" :min="0" :max="100" @keyup.enter="handleSearch" />
v-model="form.minScore"
style="width: 80px"
placeholder="最低"
:min="0"
:max="100"
@keyup.enter="handleSearch"
/>
<i style="color: #ccc"> - </i> <i style="color: #ccc"> - </i>
<el-input type="number" v-model="form.maxScore" style="width: 140px" placeholder="最高" :min="0" :max="100" @keyup.enter="handleSearch"> <el-input type="number" v-model="form.maxScore" style="width: 140px" placeholder="最高"
:min="0" :max="100" @keyup.enter="handleSearch">
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -116,15 +67,8 @@
</div> </div>
</div> </div>
<tableComponents <tableComponents ref="tableRef" :tableData="tableData" style="margin-top: 20px" @sortChange="sortChange"
ref="tableRef" :tableLoading="tableLoading" @currentChange="currentChange" @sizeChange="sizeChange">
:tableData="tableData"
style="margin-top: 20px"
@sortChange="sortChange"
:tableLoading="tableLoading"
@currentChange="currentChange"
@sizeChange="sizeChange"
>
<el-table-column prop="title" label="标题" align="left" width="380"> <el-table-column prop="title" label="标题" align="left" width="380">
<template v-slot="scope"> <template v-slot="scope">
<span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span> <span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span>
@ -142,16 +86,16 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item :command="null">全部</el-dropdown-item> <el-dropdown-item :command="null">全部</el-dropdown-item>
<el-dropdown-item :command="1" v-if="Session.get('userInfoLocal').userType == '00'">未发布</el-dropdown-item> <el-dropdown-item :command="1"
v-if="Session.get('userInfoLocal').userType == '00'">未发布</el-dropdown-item>
<el-dropdown-item :command="3" v-if="Session.get('userInfoLocal').userType != '01'">审核中</el-dropdown-item> <el-dropdown-item :command="3"
<el-dropdown-item :command="4" v-if="Session.get('userInfoLocal').userType == '02' || Session.get('userInfoLocal').userType == '01'" v-if="Session.get('userInfoLocal').userType != '01'">审核中</el-dropdown-item>
>已二审</el-dropdown-item <el-dropdown-item :command="4"
> v-if="Session.get('userInfoLocal').userType == '02' || Session.get('userInfoLocal').userType == '01'">已二审</el-dropdown-item>
<el-dropdown-item :command="2">已发布</el-dropdown-item> <el-dropdown-item :command="2">已发布</el-dropdown-item>
<el-dropdown-item :command="-1" v-if="Session.get('userInfoLocal').userType == '02' || Session.get('userInfoLocal').userType == '01'" <el-dropdown-item :command="-1"
>退改中</el-dropdown-item v-if="Session.get('userInfoLocal').userType == '02' || Session.get('userInfoLocal').userType == '01'">退改中</el-dropdown-item>
>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -159,7 +103,8 @@
<template v-slot="scope"> <template v-slot="scope">
<!-- 新闻状态 0-草稿 1-未发布 2-已发布 --> <!-- 新闻状态 0-草稿 1-未发布 2-已发布 -->
<div class="r_point" :style="{ color: '#000' }"> <div class="r_point" :style="{ color: '#000' }">
<div class="point" :style="{ backgroundColor: scope.row.status == 2 ? '#52C41A' : '#D9D9D9' }"></div> <div class="point" :style="{ backgroundColor: scope.row.status == 2 ? '#52C41A' : '#D9D9D9' }">
</div>
<text v-if="scope.row.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text> <text v-if="scope.row.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
<text v-if="scope.row.status == 1" style="color: rgba(0, 0, 0, 0.65)">未发布</text> <text v-if="scope.row.status == 1" style="color: rgba(0, 0, 0, 0.65)">未发布</text>
<text v-if="scope.row.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text> <text v-if="scope.row.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text>
@ -203,7 +148,8 @@
<el-table-column prop="score" label="资讯评分" sortable="custom" align="center" width="100"> <el-table-column prop="score" label="资讯评分" sortable="custom" align="center" width="100">
<template v-slot="scope"> <template v-slot="scope">
<div @click="getScoreDetail(scope.row.id)" :class="[{ 'score-active': isAdmin && curScore === scope.row.id }, { 'score-hover': isAdmin }]"> <div @click="getScoreDetail(scope.row.id)"
:class="[{ 'score-active': isAdmin && curScore === scope.row.id }, { 'score-hover': isAdmin }]">
{{ scope.row.score }} {{ scope.row.score }}
</div> </div>
</template> </template>
@ -212,63 +158,69 @@
<el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center"> <el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center">
<template v-slot="scope"> <template v-slot="scope">
<div> <div>
<div>{{ formatTime(scope.row.updateTime) == formatTime(scope.row.createTime) ? scope.row.publishTime : scope.row.updateTime }}</div> <div>{{ formatTime(scope.row.updateTime) == formatTime(scope.row.createTime) ?
scope.row.publishTime : scope.row.updateTime }}</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="250" fixed="right"> <el-table-column label="操作" align="center" width="250" fixed="right">
<template v-slot="scope"> <template v-slot="scope">
<div class="option"> <div class="option">
<el-button v-if="scope.row.deleted" type="text" style="margin-left: 10px" @click="doRecoverFn(scope.row)"> <el-button v-if="scope.row.deleted" type="text" style="margin-left: 10px"
@click="doRecoverFn(scope.row)">
<text>恢复</text> <text>恢复</text>
</el-button> </el-button>
<div v-else style="display: flex; gap: 10px; align-items: center"> <div v-else style="display: flex; gap: 10px; align-items: center">
<el-button v-if="scope.row.status == 0 || scope.row.status == 1" type="text" @click="goDetail(1, scope.row, false)">编辑</el-button> <el-button type="text" :disabled="scope.row.status != 2" class="copyBtn"
@click="copyUrl(scope.row)">复制</el-button>
<!-- 新闻状态 0-草稿 | 1-未发布 | 2-已发布 | 3-送审 | 4-已二审 | -1-退改中 -->
<div v-if="Session.get('userInfoLocal').userType == '00'">
<!-- 普通账号 -->
<el-button
v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == -1"
type="text" @click="goDetail(1, scope.row, false)">编辑</el-button>
<el-button <el-button
v-if="scope.row.status == 3 && Session.get('userInfoLocal').userType == '01'" v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == -1"
type="text" type="text" @click="doApprovalFn(scope.row, scope.row.status)">送审</el-button>
@click="goDetail(1, scope.row, false)" <el-button v-else-if="scope.row.status == 3" type="text"
>编辑</el-button @click="doApprovalFn(scope.row, scope.row.status)">撤审</el-button>
>
<el-button
v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == -1"
type="text" style="color: #ff1818; "
@click="doDeleteNewsFn(scope.row)">删除</el-button>
</div>
<div v-if="Session.get('userInfoLocal').userType == '02'">
<!-- 二审账号 -->
<el-button v-if="scope.row.status == 3" type="text" style="color: #ff1818"
@click="doNewReturnFn(scope.row)">退改</el-button>
<el-button v-if="scope.row.status == 3" type="text"
@click="goDetail(1, scope.row, false)">编辑</el-button>
<el-button v-if="scope.row.status == 3" type="text"
@click="doNewCheckFn(scope.row)">复审</el-button>
</div>
<div v-if="Session.get('userInfoLocal').userType == '01'"> <div v-if="Session.get('userInfoLocal').userType == '01'">
<!-- 审核人员才有发布和撤稿 --> <!-- 终审账号 -->
<el-button type="text" v-if="scope.row.status == 2" @click="doNewsPublishFn(scope.row, 1)">撤稿</el-button> <el-button v-if="scope.row.status == 3 || scope.row.status == 4" type="text"
<el-button type="text" v-else @click="doNewsPublishFn(scope.row, 2)">发布</el-button> @click="goDetail(1, scope.row, false)">编辑</el-button>
</div>
<div v-else-if="Session.get('userInfoLocal').userType == '00'" style="display: flex">
<el-button v-if="scope.row.status == 0 || scope.row.status == 1" type="text" @click="doApprovalFn(scope.row, scope.row.status)"
>送审</el-button
>
<el-button v-else-if="scope.row.status == 3" type="text" @click="doApprovalFn(scope.row, scope.row.status)">撤审</el-button>
</div>
<!-- 二审相关 --> <el-button v-if="scope.row.status == 4" type="text" style="color: #ff1818"
<div> @click="doNewReturnFn(scope.row)">退改</el-button>
<el-button
v-if="scope.row.status == 3 && Session.get('userInfoLocal').userType == '02'" <el-button type="text" v-if="scope.row.status == 2"
type="text" @click="doNewsPublishFn(scope.row, 1)">撤稿</el-button>
style="margin-left: 3px" <el-button type="text" v-else-if="scope.row.status != -1 && scope.row.status == 4"
@click="doNewCheckFn(scope.row)" @click="doNewsPublishFn(scope.row, 2)">发布</el-button>
>复审</el-button
> <el-button v-if="scope.row.status == 3" type="text"
<el-button
v-if="scope.row.status == 3 && (Session.get('userInfoLocal').userType == '02' || Session.get('userInfoLocal').userType == '01')"
type="text"
style="color: #ff1818; margin-left: 5px" style="color: #ff1818; margin-left: 5px"
@click="doNewReturnFn(scope.row)" @click="doNewReturnFn(scope.row)">退改</el-button>
>退改</el-button
>
</div> </div>
<el-button type="text" :disabled="scope.row.status != 2" class="copyBtn" @click="copyUrl(scope.row)">复制</el-button>
<el-button
v-if="scope.row.status == 0 || scope.row.status == 1"
type="text"
style="color: #ff1818; margin-left: 3px"
@click="doDeleteNewsFn(scope.row)"
>删除</el-button
>
<!-- <el-icon size="16" @click="goRecord(scope.row)"> <!-- <el-icon size="16" @click="goRecord(scope.row)">
<Tickets /> <Tickets />
@ -284,16 +236,9 @@
</tableComponents> </tableComponents>
<keep-alive> <keep-alive>
<DetailDrawer <DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype"
v-model="drawer" @handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn"
:data="newsData" @getData="getData" />
:readOnly="readOnly"
:type="newstype"
@handleEditStatus="handleEditStatus"
@doNewsPublishFn="doNewsPublishFn"
@doDeleteNewsFn="doDeleteNewsFn"
@getData="getData"
/>
</keep-alive> </keep-alive>
<el-dialog v-model="isScoreShow" title="资讯评分详情" width="680" center> <el-dialog v-model="isScoreShow" title="资讯评分详情" width="680" center>
@ -304,9 +249,8 @@
<el-row>[{{ scoreDetail.industryLabel.join(',') }}]</el-row> <el-row>[{{ scoreDetail.industryLabel.join(',') }}]</el-row>
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="12">置信度[{{ scoreDetail.industryConfidence.join(',') }}]</el-col> <el-col :span="12">置信度[{{ scoreDetail.industryConfidence.join(',') }}]</el-col>
<el-col :span="12" style="text-align: right" <el-col :span="12" style="text-align: right">分类评分<span style="color: #36a4f8">[{{
>分类评分<span style="color: #36a4f8">[{{ scoreDetail.industryScore.join(',') }}]</span></el-col scoreDetail.industryScore.join(',') }}]</span></el-col>
>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -316,9 +260,8 @@
<el-row>[{{ scoreDetail.conceptLabel.join(',') }}]</el-row> <el-row>[{{ scoreDetail.conceptLabel.join(',') }}]</el-row>
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="12">置信度[{{ scoreDetail.conceptConfidence.join(',') }}]</el-col> <el-col :span="12">置信度[{{ scoreDetail.conceptConfidence.join(',') }}]</el-col>
<el-col :span="12" style="text-align: right" <el-col :span="12" style="text-align: right">概念评分<span style="color: #36a4f8">[{{
>概念评分<span style="color: #36a4f8">[{{ scoreDetail.conceptScore.join(',') }}]</span></el-col scoreDetail.conceptScore.join(',') }}]</span></el-col>
>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -328,21 +271,20 @@
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">媒体影响力</el-col> <el-col :span="12">媒体影响力</el-col>
<el-col :span="12" style="text-align: right" <el-col :span="12" style="text-align: right">评分<span style="color: #36a4f8">{{
>评分<span style="color: #36a4f8">{{ scoreDetail.sourceImpact }}</span></el-col scoreDetail.sourceImpact
> }}</span></el-col>
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">中国股市相关性</el-col> <el-col :span="12">中国股市相关性</el-col>
<el-col :span="12" style="text-align: right" <el-col :span="12" style="text-align: right">置信度<span style="color: #36a4f8">{{
>置信度<span style="color: #36a4f8">{{ scoreDetail.chinaFactor }}</span></el-col scoreDetail.chinaFactor
> }}</span></el-col>
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">资讯质量</el-col> <el-col :span="12">资讯质量</el-col>
<el-col :span="12" style="text-align: right" <el-col :span="12" style="text-align: right">评分<span style="color: #36a4f8">{{
>评分<span style="color: #36a4f8">{{ scoreDetail.publicOpinionScore }}</span></el-col scoreDetail.publicOpinionScore }}</span></el-col>
>
</el-row> </el-row>
<el-row class="score-detail-row rule"> <el-row class="score-detail-row rule">
<el-col :span="24">*计算规则</el-col> <el-col :span="24">*计算规则</el-col>
@ -350,7 +292,9 @@
</el-row> </el-row>
<el-row class="score-detail-row" justify="space-between"> <el-row class="score-detail-row" justify="space-between">
<el-col :span="12">资讯评分</el-col> <el-col :span="12">资讯评分</el-col>
<el-col :span="12" style="color: #36a4f8; text-align: right; font-weight: 700">{{ scoreDetail.newsScore }}</el-col> <el-col :span="12" style="color: #36a4f8; text-align: right; font-weight: 700">{{
scoreDetail.newsScore
}}</el-col>
</el-row> </el-row>
</div> </div>
<template #footer> <template #footer>