南宁网宿科技
174 lines
4.1 KiB
Vue
174 lines
4.1 KiB
Vue
<!-- 用户编辑弹窗 -->
|
|
<template>
|
|
<a-drawer
|
|
width="60%"
|
|
:visible="visible"
|
|
:confirm-loading="loading"
|
|
:title="'文章预览'"
|
|
:body-style="{ paddingBottom: '8px' }"
|
|
@update:visible="updateVisible"
|
|
:footer="null"
|
|
>
|
|
<a-form
|
|
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
|
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
|
>
|
|
<div class="base-form" style="margin-bottom: 20px">
|
|
<div class="card-head">
|
|
<h2>{{ record.title }}</h2>
|
|
</div>
|
|
<div class="card-desc">
|
|
<a-descriptions :column="4" :labelStyle="{ color: '#999999' }">
|
|
<a-descriptions-item label="作者">
|
|
<a-tooltip :title="`${record.nickname}`">
|
|
<a-avatar :src="record.userAvatar" size="small" />
|
|
{{ record.nickname }}
|
|
</a-tooltip>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="文章ID">
|
|
<span>{{ record.articleId }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="来源">
|
|
<span>{{ record.source }}</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="发布时间">
|
|
<span>{{ timeAgo(record.createTime) }}</span>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="content">
|
|
<!-- 编辑器 -->
|
|
<tinymce-editor
|
|
v-model:value="record.content"
|
|
:disabled="disabled"
|
|
:init="config"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { timeAgo } from 'ele-admin-pro';
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import { assignObject } from 'ele-admin-pro';
|
|
import type { Article } from '@/api/cms/article/model';
|
|
import { FILE_SERVER } from '@/config/setting';
|
|
import TinymceEditor from '@/components/TinymceEditor/index.vue';
|
|
import { getArticle } from "@/api/cms/article";
|
|
|
|
const useForm = Form.useForm;
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 修改回显的数据
|
|
data?: Article | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
// 文章信息
|
|
const record = reactive<Article>({
|
|
// 文章id
|
|
articleId: 0,
|
|
// 文章标题
|
|
title: '',
|
|
// 文章类型
|
|
categoryId: 0,
|
|
// 封面图
|
|
avatar: '',
|
|
// 文章内容
|
|
content: '',
|
|
// 虚拟阅读量
|
|
virtualViews: '',
|
|
// 实际阅读量
|
|
actualViews: '',
|
|
// 文章来源
|
|
source: '',
|
|
// 用户ID
|
|
userId: '',
|
|
nickname: '',
|
|
userAvatar: '',
|
|
// 所属门店ID
|
|
shopId: '',
|
|
// 排序
|
|
sortNumber: 100,
|
|
// 备注
|
|
comments: '',
|
|
// 状态
|
|
status: 0,
|
|
// 创建时间
|
|
createTime: '',
|
|
// 更新时间
|
|
updateTime: ''
|
|
});
|
|
|
|
// 请求状态
|
|
const loading = ref(true);
|
|
const { resetFields } = useForm(record);
|
|
const disabled = ref(true);
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
/* 打开外部链接 */
|
|
const openUrl = (record) => {
|
|
window.open(record.panel);
|
|
};
|
|
|
|
const config = ref({
|
|
toolbar: false,
|
|
menubar: false,
|
|
height: 620,
|
|
darkTheme: true,
|
|
inline: true
|
|
// quickbars_insert_toolbar: false
|
|
});
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
if (props.data) {
|
|
loading.value = false;
|
|
getArticle(Number(props.data.articleId)).then((data) => {
|
|
assignObject(record, data);
|
|
});
|
|
}
|
|
} else {
|
|
resetFields();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="less">
|
|
.tab-pane {
|
|
min-height: 100px;
|
|
}
|
|
.card-head {
|
|
display: flex;
|
|
height: 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.base-form {
|
|
.card-desc {
|
|
color: #e3e3e3;
|
|
}
|
|
.content {
|
|
margin-top: 20px;
|
|
line-height: 2em;
|
|
font-size: 17px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
</style>
|