363 lines
12 KiB
Vue
363 lines
12 KiB
Vue
<template>
|
||
<div class="layout-pd">
|
||
<el-card v-loading="state.loading" shadow="hover" header="文章详情">
|
||
<el-form ref="articleFormRef" :model="state.data" :rules="state.rules" size="large" label-width="100px" class="mt20 mb20">
|
||
<el-row :gutter="35">
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="封面：" class="coverImg">
|
||
<!-- 上传文件 -->
|
||
<el-upload ref="uploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card" :file-list="state.fileArray"
|
||
:auto-upload="false" :limit="1" :class="{ hide: state.coverHide }" @change="handleUploadChange" accept='image/*'>
|
||
<template #default>
|
||
<el-icon><Plus /></el-icon>
|
||
</template>
|
||
<template #file="{ file }">
|
||
<div>
|
||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||
<span class="el-upload-list__item-actions">
|
||
<span
|
||
class="el-upload-list__item-preview"
|
||
@click="handlePictureCardPreview(file)"
|
||
>
|
||
<el-icon><zoom-in /></el-icon>
|
||
</span>
|
||
<!-- <span
|
||
v-if="!disabled"
|
||
class="el-upload-list__item-delete"
|
||
@click="handleDownload(file)"
|
||
>
|
||
<el-icon><Download /></el-icon>
|
||
</span> -->
|
||
<span
|
||
v-if="!disabled"
|
||
class="el-upload-list__item-delete"
|
||
@click="handleRemove(file)"
|
||
>
|
||
<el-icon><Delete /></el-icon>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="模块名称：" prop="moduleName">
|
||
<el-select size="default" @change="handleChangeModule" v-model="state.data.moduleName" placeholder="请选择模块" clearable>
|
||
<el-option :data-op="item.id" v-for="(item,index) in moduleList" :key="index" :label="item.moduleName" :value="item.moduleName"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="标签名称：" prop="labelName">
|
||
<el-select size="default" v-model="state.data.labelName" placeholder="请选择标签" clearable class="ml10">
|
||
<el-option v-for="(item,index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="标题：" prop="title">
|
||
<el-input v-model="state.data.title" placeholder="请输入标题" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="文章类型：" prop="articletype">
|
||
<el-select size="default" v-model="state.data.articletype" placeholder="请选择文章类型" clearable>
|
||
<el-option label="图文" :value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||
<el-form-item label="是否置顶：" prop="top">
|
||
<el-switch v-model="state.data.top" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item prop="text" label-width="0px">
|
||
<Editor v-model:get-html="state.data.text" style="width: 100%;"/>
|
||
</el-form-item>
|
||
<el-row class="flex mt15">
|
||
<div class="flex-margin" style="width: 100%;display: flex;justify-content: flex-end;">
|
||
<el-button size="larger" type="info" @click="cancel">
|
||
<SvgIcon name="ele-RefreshLeft" />
|
||
取消
|
||
</el-button>
|
||
<el-button size="larger" type="primary" @click="onSubmitForm">
|
||
<SvgIcon name="iconfont icon-shuxing" />
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
<!-- 封面预览弹窗 -->
|
||
<el-dialog v-model="dialogVisible">
|
||
<img width="100%" w-full :src="dialogImageUrl" alt="预览" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="articleDetail">
|
||
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
||
import { articleApi } from '/@/api/article';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { ElMessage, UploadFile, UploadFiles } from 'element-plus';
|
||
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';
|
||
import mittBus from '/@/utils/mitt';
|
||
|
||
// 引入组件
|
||
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
|
||
|
||
// 封面基本路径
|
||
const viteUrl = import.meta.env.VITE_API_URL;
|
||
|
||
// 引入 api 请求接口
|
||
const artApi = articleApi();
|
||
|
||
// 模块列表
|
||
const moduleList = ref([]);
|
||
|
||
// 标签列表
|
||
const labelList = ref([]);
|
||
|
||
// 获取文章id
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const moduleName:any = route.query.moduleName;
|
||
const labelName:any = route.query.labelName;
|
||
const id:any = route.query.id;
|
||
|
||
const state = reactive({
|
||
data: {
|
||
labelName: '',
|
||
moduleName: '',
|
||
title: '',
|
||
articletype: '',
|
||
photo: '',
|
||
text: '',
|
||
top: false,// 是否置顶，这里提交的时候要换成0或1
|
||
},
|
||
loading: false,
|
||
rules: {
|
||
moduleName: { required: true, message: '请选择模块', trigger: 'blur' },
|
||
labelName: { required: true, message: '请输入标签名称', trigger: 'blur' },
|
||
title: { required: true, message: '请输入标题', trigger: 'blur' },
|
||
articletype: { required: true, message: '请选择文章类型', trigger: 'blur' },
|
||
photo: { required: true, message: '请上传图片', trigger: 'blur' },
|
||
top: { required: true, message: '请选择是否置顶', trigger: 'blur' },
|
||
text: { required: true, message: '请输入文章内容', trigger: 'blur' },
|
||
},
|
||
fileArray:[],// 编辑进来时，如果已经上传了图片，则保存图片地址
|
||
coverFile: {},
|
||
coverHide: false
|
||
})
|
||
|
||
// 模块选择
|
||
const handleChangeModule = async(val: any) => {
|
||
try {
|
||
state.data.labelName = '';
|
||
if(!val){labelList.value=[]; return;}
|
||
const op:any = event?.currentTarget;
|
||
let res = await artApi.getLabelList(op.dataset.op);
|
||
if(res?.success){
|
||
labelList.value = res.data;
|
||
}else{
|
||
ElMessage.error('标签列表获取失败！');
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('标签列表获取失败！');
|
||
} finally {
|
||
}
|
||
}
|
||
|
||
// 获取文章详情
|
||
const getArticleDetail = async() => {
|
||
try {
|
||
state.loading = true;
|
||
let res = await artApi.getArticleList({
|
||
moduleName: moduleName,
|
||
labelName: labelName,
|
||
size: 1,
|
||
current: 1
|
||
});
|
||
if(res?.success) {
|
||
state.data = res.data.records[0];
|
||
// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
|
||
// 这个报错没关系的，只是ts的语法检查，不影响运行
|
||
state.data.top = state.data.top === 1;
|
||
state.data.textid = state.data.id;
|
||
if(state.data.photo){
|
||
const never:any = [{name:state.data.title,url:viteUrl+state.data.photo}];
|
||
state.fileArray = never;
|
||
state.coverHide = true;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('获取文章详情失败');
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
}
|
||
|
||
// 获取文章详情-根据id
|
||
const getArticleDetailById = async(id:number) => {
|
||
try {
|
||
state.loading = true;
|
||
let res = await artApi.getArticleDetail(id);
|
||
if(res?.success) {
|
||
state.data = res.data;
|
||
// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
|
||
// 这个报错没关系的，只是ts的语法检查，不影响运行
|
||
state.data.top = state.data.top === 1;
|
||
state.data.moduleName = moduleName;
|
||
state.data.labelName = labelName;
|
||
state.data.textid = state.data.id;
|
||
if(state.data.photo){
|
||
const never:any = [{name:state.data.title,url:viteUrl+state.data.photo}];
|
||
state.fileArray = never;
|
||
state.coverHide = true;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('获取文章详情失败');
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
}
|
||
|
||
// 获取模块列表
|
||
const getModuleList = async() => {
|
||
try {
|
||
let res = await artApi.getModuleList();
|
||
if(res?.success){
|
||
moduleList.value = res.data;
|
||
}else{
|
||
ElMessage.error('模块列表获取失败！');
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('模块列表获取失败！');
|
||
} finally {
|
||
}
|
||
}
|
||
|
||
const articleFormRef = ref();
|
||
|
||
// 保存文章
|
||
const onSubmitForm = () => {
|
||
articleFormRef.value.validate((valid: boolean) => {
|
||
if (valid && state.coverHide){
|
||
const form = {...state.data,top:state.data.top ? 1 : 0};
|
||
if(state.coverFile.type === undefined){
|
||
realSubmit(form);
|
||
}else{
|
||
uploadFile(state.coverFile,form);
|
||
}
|
||
}else{
|
||
ElMessage.error('请完善信息！');
|
||
}
|
||
});
|
||
};
|
||
|
||
// 返回
|
||
const cancel = () =>{
|
||
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
|
||
router.push('/article');
|
||
}
|
||
|
||
// 上传文件
|
||
const uploadFile = async(file: any,form: any) => {
|
||
try {
|
||
state.loading = true;
|
||
const formdata = new FormData();
|
||
formdata.append('file', file);
|
||
console.log(file)
|
||
let res = await artApi.uploadFile(formdata);
|
||
if(res?.success){
|
||
form.photo = res.data.path;
|
||
realSubmit(form);
|
||
}else{
|
||
ElMessage.error('封面上传失败！');
|
||
}
|
||
} catch (error) {
|
||
state.loading = false;
|
||
ElMessage.error('封面上传失败！');
|
||
}
|
||
}
|
||
|
||
// 文章上传-真正的上传操作
|
||
const realSubmit = async(form: any) => {
|
||
try {
|
||
state.loading = true;
|
||
let res = route.path == '/article/add' ? await artApi.saveArticle(form) : await artApi.updateArticle(form);
|
||
if(res?.success){
|
||
ElMessage.success('文章保存成功！');
|
||
cancel();
|
||
}else{
|
||
ElMessage.error('文章保存失败！');
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error('处理失败！');
|
||
} finally {
|
||
state.loading = false;
|
||
}
|
||
}
|
||
|
||
// 封面上传禁用
|
||
const disabled = ref(false);
|
||
// 封面弹窗
|
||
const dialogImageUrl = ref('');
|
||
const dialogVisible = ref(false);
|
||
|
||
const uploadRef = ref();
|
||
|
||
// 封面删除
|
||
const handleRemove = (file: UploadFile) => {
|
||
state.coverFile = {};
|
||
uploadRef.value.clearFiles();
|
||
state.coverHide = false;
|
||
}
|
||
|
||
// 封面预览
|
||
const handlePictureCardPreview = (file: UploadFile) => {
|
||
dialogImageUrl.value = file.url!
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
// 封面下载
|
||
const handleDownload = (file: UploadFile) => {
|
||
console.log(file);
|
||
const fileUrl:any = file.url;
|
||
// window.location.href = fileUrl;
|
||
}
|
||
|
||
// 封面图片更改
|
||
const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
||
if(uploadFile.raw.type.includes('image')){
|
||
const file:any = uploadFile.raw;
|
||
state.coverFile = file;
|
||
state.coverHide = true;
|
||
}else{
|
||
ElMessage.error('请上传图片文件！');
|
||
uploadRef.value.clearFiles();
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
if(moduleName && labelName && route.path == '/article/edit') {
|
||
if(moduleName && moduleName !== '人才模块' && moduleName !== '简历模块'){
|
||
getArticleDetailById(id);
|
||
}else{
|
||
getArticleDetail();
|
||
}
|
||
}
|
||
getModuleList();
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.coverImg :deep(.hide .el-upload--picture-card) {
|
||
display: none;
|
||
}
|
||
</style>
|