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

refactor(DetailDrawer): 优化代码格式和按钮布局 

- 统一格式化模板中的代码缩进和换行
- 调整按钮布局和样式
- 修复潜在独家选项的只读状态控制
This commit is contained in:
zzp 2025-11-11 20:35:38 +08:00
parent d2cbae3adc
commit 55b110ddce
1 changed files with 161 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
<template> <template>
<div <div :class="[isMobileByWidth() ? 'drawer-container-mobile' : 'drawer-container', { 'drawer-container-100': isFull }]">
:class="[isMobileByWidth() ? 'drawer-container-mobile' : 'drawer-container', { 'drawer-container-100': isFull }]">
<el-drawer v-model="model" :modal="false" size="100%" :lock-scroll="false" modal-class="modal-class"> <el-drawer v-model="model" :modal="false" size="100%" :lock-scroll="false" modal-class="modal-class">
<template #header> <template #header>
<div class="drawer-header"> <div class="drawer-header">
@ -21,36 +20,48 @@
v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == -1)" v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == -1)"
@click="doDeleteNewsFn(data)">删除</el-button> --> @click="doDeleteNewsFn(data)">删除</el-button> -->
<div v-if="Session.get('userInfoLocal').userType == '00'"> <div v-if="Session.get('userInfoLocal').userType == '00'">
<el-button type="text" v-if="!form.deleted && (data.status == 1 || data.status == -1)" @click="handleEditStatus(!readOnly)">{{
readOnly ? '编辑' : '浏览'
}}</el-button>
<el-button type="text" v-if="!form.deleted && (data.status == 1 || data.status == -1)" <el-button
@click="handleEditStatus(!readOnly)">{{ readOnly ? type="text"
'编辑' : '浏览' }}</el-button> style="color: #ff1818"
<el-button type="text" style="color: #ff1818"
v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == -1)" v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == -1)"
@click="doDeleteNewsFn(data)">删除</el-button> @click="doDeleteNewsFn(data)"
>删除</el-button
>
</div> </div>
<div v-if="Session.get('userInfoLocal').userType == '02'"> <div v-if="Session.get('userInfoLocal').userType == '02'">
<el-button type="text" <el-button
type="text"
v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == 3)" v-if="!form.deleted && (data.status == 0 || data.status == 1 || data.status == 3)"
@click="handleEditStatus(!readOnly)">{{ readOnly ? @click="handleEditStatus(!readOnly)"
'编辑' : '浏览' }}</el-button> >{{ readOnly ? '编辑' : '浏览' }}</el-button
>
<el-button type="text" style="color: #ff1818" <el-button
type="text"
style="color: #ff1818"
v-if="!form.deleted && (data.status == 0 || data.status == 1)" v-if="!form.deleted && (data.status == 0 || data.status == 1)"
@click="doDeleteNewsFn(data)">删除</el-button> @click="doDeleteNewsFn(data)"
>删除</el-button
>
</div> </div>
<div v-if="Session.get('userInfoLocal').userType == '01'"> <div v-if="Session.get('userInfoLocal').userType == '01'">
<el-button type="text" v-if="!form.deleted && (data.status == 4)" <el-button type="text" v-if="!form.deleted && data.status == 4" @click="handleEditStatus(!readOnly)">{{
@click="handleEditStatus(!readOnly)">{{ readOnly ? readOnly ? '编辑' : '浏览'
'编辑' : '浏览' }}</el-button> }}</el-button>
<el-button
<el-button type="text" style="color: #ff1818" type="text"
style="color: #ff1818"
v-if="!form.deleted && (data.status == 0 || data.status == 1)" v-if="!form.deleted && (data.status == 0 || data.status == 1)"
@click="doDeleteNewsFn(data)">删除</el-button> @click="doDeleteNewsFn(data)"
>删除</el-button
>
</div> </div>
<el-button type="text" @click="clickFull" v-if="!isMobileByWidth()"> <el-button type="text" @click="clickFull" v-if="!isMobileByWidth()">
@ -69,47 +80,70 @@
<div class="step_bk"> <div class="step_bk">
<div v-if="readOnly || type === 1"> <div v-if="readOnly || type === 1">
<strong>报道时间：</strong> <strong>报道时间：</strong>
<span style="color: #0888d7">{{ data.publishTime && formatDate(new Date(data.publishTime), <span style="color: #0888d7">{{ data.publishTime && formatDate(new Date(data.publishTime), 'YYYY年mm月dd日 HH:MM') }}</span>
'YYYY年mm月dd日 HH:MM') }}</span>
</div> </div>
<el-form-item label="标题" style="margin-top: 20px" prop="title" label-width="52"> <el-form-item label="标题" style="margin-top: 20px" prop="title" label-width="52">
<div style="display: flex; width: 800px; align-items: center"> <div style="display: flex; width: 800px; align-items: center">
<el-input placeholder="输入文章标题" v-model="form.title" :max="titleTextMax" <el-input
:maxlength="titleTextMax" @input="inputChange" :disabled="readOnly"></el-input> placeholder="输入文章标题"
<text style="margin-left: 10px; color: #b3b3b3"> {{ titleTextNum }}/{{ titleTextMax v-model="form.title"
}}</text> :max="titleTextMax"
:maxlength="titleTextMax"
@input="inputChange"
:disabled="readOnly"
></el-input>
<text style="margin-left: 10px; color: #b3b3b3"> {{ titleTextNum }}/{{ titleTextMax }}</text>
<icon_ai v-if="form.titleTranslated"></icon_ai> <icon_ai v-if="form.titleTranslated"></icon_ai>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="summary" label="摘要" label-width="52"> <el-form-item prop="summary" label="摘要" label-width="52">
<el-input v-model="form.summary" show-word-limit maxlength="300" style="margin-top: 10px" <el-input
:rows="5" type="textarea" placeholder="请输入摘要内容" max="300" :disabled="readOnly" /> v-model="form.summary"
show-word-limit
maxlength="300"
style="margin-top: 10px"
:rows="5"
type="textarea"
placeholder="请输入摘要内容"
max="300"
:disabled="readOnly"
/>
</el-form-item> </el-form-item>
</div> </div>
<div class="step_bk"> <div class="step_bk">
<el-form-item label="媒体来源：" prop="tagSourceSelect"> <el-form-item label="媒体来源：" prop="tagSourceSelect">
<el-select :disabled="readOnly" v-model="form.tagSourceSelect" filterable <el-select :disabled="readOnly" v-model="form.tagSourceSelect" filterable placeholder="选择媒体来源" size="large" style="width: 240px">
placeholder="选择媒体来源" size="large" style="width: 240px"> <el-option v-for="item in tagSourceList" :key="item.id" :label="item.name" :value="item.id" />
<el-option v-for="item in tagSourceList" :key="item.id" :label="item.name"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="概念标签：" prop="tagDiySelect"> <el-form-item label="概念标签：" prop="tagDiySelect">
<el-select :disabled="readOnly" v-model="form.tagDiySelect" filterable multiple <el-select
placeholder="选择概念标签" size="large" style="width: 240px"> :disabled="readOnly"
<el-option v-for="item in tagDiyList" :key="item.id" :label="item.name" v-model="form.tagDiySelect"
:value="item.id" /> filterable
multiple
placeholder="选择概念标签"
size="large"
style="width: 240px"
>
<el-option v-for="item in tagDiyList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="行业分类：" prop="industrySelect"> <el-form-item label="行业分类：" prop="industrySelect">
<el-select :disabled="readOnly" v-model="form.industrySelect" filterable multiple <el-select
placeholder="选择行业分类" size="large" style="width: 240px"> :disabled="readOnly"
<el-option v-for="item in industryList" :key="item.id" :label="item.name" v-model="form.industrySelect"
:value="item.id" /> filterable
multiple
placeholder="选择行业分类"
size="large"
style="width: 240px"
>
<el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -118,7 +152,7 @@
</el-form-item> </el-form-item>
<el-form-item label="潜在独家：" prop="industrySelect"> <el-form-item label="潜在独家：" prop="industrySelect">
<el-radio-group v-model="form.exclusive" size="large" style="width: 240px"> <el-radio-group v-model="form.exclusive" size="large" style="width: 240px" :disabled="readOnly">
<el-radio :label="1">是</el-radio> <el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio> <el-radio :label="0">否</el-radio>
</el-radio-group> </el-radio-group>
@ -126,36 +160,37 @@
</div> </div>
<div class="step_bk" style="position: relative"> <div class="step_bk" style="position: relative">
<icon_ai v-if="form.contentTranslated" <icon_ai v-if="form.contentTranslated" style="position: absolute; right: 50px; top: 20px; z-index: 9999"> </icon_ai>
style="position: absolute; right: 50px; top: 20px; z-index: 9999">
</icon_ai>
<editorBox :ueditorData="form.content" @changeMsg="changeMsg" :readOnly="readOnly"></editorBox> <editorBox :ueditorData="form.content" @changeMsg="changeMsg" :readOnly="readOnly"></editorBox>
<translate v-if="form.newsInfoId && !isMobileByWidth()" :infoData="form" :key="form.id"> <translate v-if="form.newsInfoId && !isMobileByWidth()" :infoData="form" :key="form.id"> </translate>
</translate> <translateMobile v-else-if="form.newsInfoId && isMobileByWidth()" :infoData="form" :key="form.id"> </translateMobile>
<translateMobile v-else-if="form.newsInfoId && isMobileByWidth()" :infoData="form"
:key="form.id">
</translateMobile>
</div> </div>
<el-collapse accordion expand-icon-position="left" <el-collapse accordion expand-icon-position="left" style="margin-top: 10px; padding: 0 30px; border-top: 0">
style="margin-top:10px;padding: 0 30px;border-top: 0;">
<el-collapse-item name="1"> <el-collapse-item name="1">
<template #title="{ isActive }"> <template #title="{ isActive }">
<div :class="['title-wrapper', { 'is-active': isActive }]"> <div :class="['title-wrapper', { 'is-active': isActive }]">
<text style="font-size: 16px; font-weight: bold">编辑审核备注</text> <text style="font-size: 16px; font-weight: bold">编辑审核备注</text>
</div> </div>
</template> </template>
<el-input v-model="form.revision" show-word-limit maxlength="300" style="margin-top: 10px" <el-input
:rows="5" type="textarea" placeholder="请输入编辑审核备注" max="300" :disabled="readOnly" /> v-model="form.revision"
show-word-limit
maxlength="300"
style="margin-top: 10px"
:rows="5"
type="textarea"
placeholder="请输入编辑审核备注"
max="300"
:disabled="readOnly"
/>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
</el-form> </el-form>
<template #footer> <template #footer>
<div v-if="!readOnly" style="padding: 10px;display: flex;float: right;gap:10px;padding-right: 40px;"> <div v-if="!readOnly" style="padding: 10px; display: flex; float: right; gap: 10px; padding-right: 40px">
<el-button @click="submit(1, false)">{{ isMobileByWidth() ? '保存并反馈' : '保存' }}</el-button> <el-button @click="submit(1, false)">{{ isMobileByWidth() ? '保存并反馈' : '保存' }}</el-button>
<!-- <div v-if="Session.get('userInfoLocal').userType == '00'"> <!-- <div v-if="Session.get('userInfoLocal').userType == '00'">
@ -165,36 +200,61 @@
<el-button <el-button
v-if="data?.status == 2 && !form.deleted && Session.get('userInfoLocal').userType == '01'" v-if="data?.status == 2 && !form.deleted && Session.get('userInfoLocal').userType == '01'"
type="primary" style="margin-right: 30px;margin-bottom: 20px;" type="primary"
@click="doNewsPublishFn(data, 1)">撤稿</el-button> style="margin-right: 30px; margin-bottom: 20px"
@click="doNewsPublishFn(data, 1)"
>撤稿</el-button
>
<el-button type="primary" @click="doNewCheckFn(data)" <el-button
v-if="data?.status != 2 && !form.deleted && Session.get('userInfoLocal').userType == '02'">复审</el-button> type="primary"
@click="doNewCheckFn(data)"
v-if="data?.status != 2 && !form.deleted && Session.get('userInfoLocal').userType == '02'"
>复审</el-button
>
<el-button type="primary" @click="submit(0, false)" <el-button
v-if="data?.status != 2 && data?.status != -1 && !form.deleted && Session.get('userInfoLocal').userType != '02' && Session.get('userInfoLocal').userType == '01'"> type="primary"
@click="submit(0, false)"
v-if="
data?.status != 2 &&
data?.status != -1 &&
!form.deleted &&
Session.get('userInfoLocal').userType != '02' &&
Session.get('userInfoLocal').userType == '01'
"
>
<text>发布</text> <text>发布</text>
</el-button> </el-button>
<el-button type="primary" @click="doApprovalFn(0, false)" <el-button
v-if="data?.status != 2 && (data?.status == -1 || data?.status == 1) && !form.deleted && Session.get('userInfoLocal').userType != '02'"> type="primary"
@click="doApprovalFn(0, false)"
v-if="data?.status != 2 && (data?.status == -1 || data?.status == 1) && !form.deleted && Session.get('userInfoLocal').userType != '02'"
>
<text v-if="Session.get('userInfoLocal').userType == '00'">送审</text> <text v-if="Session.get('userInfoLocal').userType == '00'">送审</text>
</el-button> </el-button>
<el-button type="danger" <el-button
type="danger"
v-if="Session.get('userInfoLocal').userType == '02' && (data?.status == 3 || data?.status == 4)" v-if="Session.get('userInfoLocal').userType == '02' && (data?.status == 3 || data?.status == 4)"
@click="doNewReturnFn(data)">退改</el-button> @click="doNewReturnFn(data)"
>退改</el-button
>
<el-button type="danger" v-if="Session.get('userInfoLocal').userType == '01' && (data?.status == 4)" <el-button type="danger" v-if="Session.get('userInfoLocal').userType == '01' && data?.status == 4" @click="doNewReturnFn(data)"
@click="doNewReturnFn(data)">退改</el-button> >退改</el-button
>
</div> </div>
<div v-else> <div v-else>
<el-button <el-button
v-if="data?.status == 2 && !form.deleted && Session.get('userInfoLocal').userType == '01'" v-if="data?.status == 2 && !form.deleted && Session.get('userInfoLocal').userType == '01'"
type="primary" style="margin-right: 30px;margin-bottom: 20px;" type="primary"
@click="doNewsPublishFn(data, 1)">撤稿</el-button> style="margin-right: 30px; margin-bottom: 20px"
@click="doNewsPublishFn(data, 1)"
>撤稿</el-button
>
</div> </div>
</template> </template>
</el-drawer> </el-drawer>
</div> </div>
@ -207,23 +267,32 @@ import { ElMessage, ElStep, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import editorBox from '/@/components/editorBox.vue'; import editorBox from '/@/components/editorBox.vue';
import uploadImage from '/@/components/upload/image.vue'; import uploadImage from '/@/components/upload/image.vue';
import { doNewRevoke, doNewSubmit, getTagSource, getTagConcept, getColumn, doNewsSave, doNewsCreatePublish, getNewsDetail, getColumnVIP, getIndustrySearch } from '/@/api/api'; import {
doNewRevoke,
doNewSubmit,
getTagSource,
getTagConcept,
getColumn,
doNewsSave,
doNewsCreatePublish,
getNewsDetail,
getColumnVIP,
getIndustrySearch,
} from '/@/api/api';
import { FullScreen, Switch } from '@element-plus/icons-vue'; import { FullScreen, Switch } from '@element-plus/icons-vue';
import { formatDate } from '/@/utils/formatTime'; import { formatDate } from '/@/utils/formatTime';
import icon_ai from '/@/components/icon_ai.vue'; import icon_ai from '/@/components/icon_ai.vue';
import translate from '/@/components/translate/translate.vue'; import translate from '/@/components/translate/translate.vue';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import { isMobileByWidth } from '/@/utils/Utils' import { isMobileByWidth } from '/@/utils/Utils';
import { doNewReturn, doNewCheck } from '/@/api/api'; import { doNewReturn, doNewCheck } from '/@/api/api';
import translateMobile from '/@/components/translate/translateMobile.vue'; import translateMobile from '/@/components/translate/translateMobile.vue';
const emit = defineEmits(['doNewsPublishFn', 'handleEditStatus', 'doDeleteNewsFn', 'getData']); const emit = defineEmits(['doNewsPublishFn', 'handleEditStatus', 'doDeleteNewsFn', 'getData']);
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => { }, default: () => {},
}, },
readOnly: { readOnly: {
type: Boolean, type: Boolean,
@ -405,29 +474,27 @@ watch(
// 退改 // 退改
async function doNewReturnFn(item) { async function doNewReturnFn(item) {
// 先保存 // 先保存
await submit(1, false, false) await submit(1, false, false);
let { code, data } = await doNewReturn({ let { code, data } = await doNewReturn({
id: item.id, id: item.id,
}); });
if (code == 200) { if (code == 200) {
ElMessage.success('操作成功'); ElMessage.success('操作成功');
goBack() goBack();
} }
} }
// 复审 // 复审
async function doNewCheckFn(item) { async function doNewCheckFn(item) {
// 先保存 // 先保存
await submit(1, false, false) await submit(1, false, false);
let { code, data } = await doNewCheck({ let { code, data } = await doNewCheck({
id: item.id, id: item.id,
}); });
if (code == 200) { if (code == 200) {
ElMessage.success('操作成功'); ElMessage.success('操作成功');
goBack() goBack();
} }
} }
@ -506,7 +573,7 @@ async function submit(type, doNotBack, isShowTips = true) {
}; };
if (type == 0) { if (type == 0) {
let str = "请确认已审核该篇资讯，发布后前台将展示本资讯" let str = '请确认已审核该篇资讯，发布后前台将展示本资讯';
if (Session.get('userInfoLocal').userType == '00') { if (Session.get('userInfoLocal').userType == '00') {
str = '确认初审完成并提交复核？送审后不支持再次编辑'; str = '确认初审完成并提交复核？送审后不支持再次编辑';
if (props.data.status == 3) { if (props.data.status == 3) {
@ -518,7 +585,6 @@ async function submit(type, doNotBack, isShowTips = true) {
str = '请确认已审核该篇资讯，发布后前台将展示本资讯'; str = '请确认已审核该篇资讯，发布后前台将展示本资讯';
} }
ElMessageBox.confirm(str, '提示', { ElMessageBox.confirm(str, '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -532,9 +598,9 @@ async function submit(type, doNotBack, isShowTips = true) {
goBack(); goBack();
} }
}) })
.catch(() => { }); .catch(() => {});
} else if (type == 1) { } else if (type == 1) {
console.log("🚀 ~ submit ~ isShowTips:", isShowTips) console.log('🚀 ~ submit ~ isShowTips:', isShowTips);
// 保存 // 保存
let { code, data } = await doNewsSave(par); let { code, data } = await doNewsSave(par);
@ -543,7 +609,6 @@ async function submit(type, doNotBack, isShowTips = true) {
ElMessage.success('操作成功'); ElMessage.success('操作成功');
} }
if (doNotBack) { if (doNotBack) {
} else { } else {
goBack(); goBack();
} }
@ -722,22 +787,23 @@ async function doApprovalFn() {
}) })
.then(async () => { .then(async () => {
// 先保存 // 先保存
await submit(1, false, false) await submit(1, false, false);
let { code } = props.data.status == 3 || props.data.status == 4 ? await doNewRevoke({ let { code } =
id: props.data.id, props.data.status == 3 || props.data.status == 4
}) : await doNewSubmit({ ? await doNewRevoke({
id: props.data.id, id: props.data.id,
}); })
: await doNewSubmit({
id: props.data.id,
});
if (code == 200) { if (code == 200) {
ElMessage.success('操作成功'); ElMessage.success('操作成功');
goBack(); goBack();
} }
}) })
.catch(() => { }); .catch(() => {});
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">