299 lines
8.9 KiB
Vue
299 lines
8.9 KiB
Vue
<template>
|
||
<div v-loading="loading" class="add-block">
|
||
<baseTitle title="文章信息录入"></baseTitle>
|
||
<el-form :model="formData" ref="fundForm" :rules="rules" style="margin-left: 5px;margin-bottom: -18px">
|
||
<el-row gutter="30">
|
||
<el-col :span="6" style="margin-left: 10px">
|
||
<el-form-item label="文章标题" prop="articleTitle">
|
||
<el-input v-model="formData.articleTitle" placeholder="请输入文章标题" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="文章类型" prop="articleType">
|
||
<el-select v-model="formData.articleType" placeholder="请选择文章类型" clearable filterable>
|
||
<el-option
|
||
v-for="item in cacheStore.getDict('article_type')"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="发文单位" prop="remarks">
|
||
<el-input v-model="formData.remarks" placeholder="请输入发文单位" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" style="margin-left: 10px">
|
||
<el-form-item label="文章内容" prop="articleContent">
|
||
<!-- link-->
|
||
<Tinymce v-model:value="formData.articleContent"
|
||
imageUrl="/workflow/process/file/upload" :height="500" v-if="showTinymce"
|
||
:toolbar="['undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image axupimgs']"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" style="margin-bottom: -10px">
|
||
<el-form-item label="附件上传" prop="" style="margin-left: 20px;">
|
||
<file-upload @getFile="getFiles"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" style="margin-left:90px;">
|
||
|
||
<!-- <el-form-item label="公告附件列表" prop=""-->
|
||
<!-- style="display: flex;flex-direction: column;justify-content: flex-start;">-->
|
||
<!-- <template #label>-->
|
||
<!-- <div style="width: 100%;display: flex;align-items: center;justify-content: flex-start">-->
|
||
<!-- <el-icon size="16">-->
|
||
<!-- <Paperclip/>-->
|
||
<!-- </el-icon>-->
|
||
<!-- 公告附件列表-->
|
||
<!-- </div>-->
|
||
<!-- </template>-->
|
||
<el-col :span="24" style="margin-left: -15px">
|
||
<div style="display: flex;flex-direction: column">
|
||
<div v-for="(item,index) in formData.fileList" style="display: flex;align-items: center;margin-bottom: 5px">
|
||
附件{{ index + 1 }}： <a :href="item.url" style="color: #409eff;" class="a-style" target="_blank">{{ item.originalFileName }}</a>
|
||
<el-icon size="18" style="margin:0 20px;cursor: pointer" color="#409eff" @click="handleDelete(item,index)">
|
||
<CircleClose/>
|
||
</el-icon>
|
||
<el-button type="primary" link @click="handleDownload(item)" style="font-size: 16px;margin-left: 10px">下载</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- </el-form-item>-->
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="oper-page-btn">
|
||
<el-button color="#DED0B2" v-if="routerName === 'Article/add'" @click="handleSubmit(fundForm)">提交</el-button>
|
||
<el-button color="#DED0B2" v-else @click="handleResubmit">提交</el-button>
|
||
<el-button @click="handleBack">返回</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import {ElMessageBox, ElNotification} from "element-plus";
|
||
import {addArticle, editArticle, getArticleDetail} from "@/api/article";
|
||
import {useTagsView} from '@/stores/tagsview.js'
|
||
import {useCacheStore} from "@/stores/cache.js";
|
||
import {deleteFile, downloadFile} from "../../api/project-demand";
|
||
import FileUpload from "../../components/FileUpload.vue";
|
||
import Tinymce from "../../components/Tinymce.vue";
|
||
|
||
const cacheStore = useCacheStore();
|
||
const tagsViewStore = useTagsView()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const loading = ref(false)
|
||
const showTinymce = ref(true)
|
||
const fundForm = ref()
|
||
const formData = ref({
|
||
fileList:[]
|
||
})
|
||
const routerName = ref(router.currentRoute.value.name)
|
||
const rules = reactive({
|
||
articleTitle: [{required: true, message: '请输入文章标题', trigger: ['blur', 'change']}],
|
||
articleType: [{required: true, message: '请输入文章类型', trigger: ['blur', 'change']}],
|
||
articleContent: [{required: true, message: '请输入文章内容', trigger: ['blur', 'change']}],
|
||
})
|
||
const handleDelete = (row,index) => {
|
||
ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的文件吗?`, '系统提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteFile(row.fileId).then(res => {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: res.code === 1000 ? 'success' : 'error'
|
||
})
|
||
if (res.code === 1000) {
|
||
formData.value.fileList.splice(index, 1)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
const handleBack = () => {
|
||
history.back()
|
||
}
|
||
const getFiles = (val) => {
|
||
console.log("🚀 ~ file:val ", val)
|
||
val.originalFileName=val.originalFilename
|
||
let file = compositeParam(val)
|
||
formData.value.fileList.push(file)
|
||
}
|
||
const handleDownload = (row) => {
|
||
downloadFile(row.fileId).then(res => {
|
||
const blob = new Blob([res])
|
||
let a = document.createElement('a')
|
||
a.href = URL.createObjectURL(blob)
|
||
a.download = row.originalFileName
|
||
a.click()
|
||
})
|
||
}
|
||
const submitParam = (item) => {
|
||
console.log("🚀 ~ file:item.fileList ", item.fileList)
|
||
item.fileList= item.fileList.map((it)=>{
|
||
return {
|
||
...it,
|
||
articleId:item.articleId
|
||
}
|
||
})
|
||
return {
|
||
articleContent: item.articleContent,
|
||
articleTitle: item.articleTitle,
|
||
articleType: item.articleType,
|
||
remarks: item.remarks,
|
||
articleId: item.articleId,
|
||
fileList: item.fileList
|
||
}
|
||
}
|
||
const compositeParam = (item) => {
|
||
return {
|
||
fileId: item.id,
|
||
size: item.size,
|
||
originalFileName: item.originalFilename,
|
||
fileType: item.fileType,
|
||
url: item.url,
|
||
newFile: true,
|
||
tag: 'article'
|
||
}
|
||
}
|
||
const handleSubmit = async (instance) => {
|
||
if (!instance) return
|
||
instance.validate(async (valid) => {
|
||
if (!valid) {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: '请完善数据,再提交!',
|
||
type: 'error'
|
||
})
|
||
return;
|
||
}
|
||
const {msg, code} = await addArticle(submitParam(formData.value))
|
||
ElNotification({
|
||
title: '提示',
|
||
message: msg,
|
||
type: code === 1000 ? 'success' : 'error'
|
||
})
|
||
if (code === 1000) {
|
||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||
await router.push({
|
||
name: 'Manage'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const handleResubmit = () => {
|
||
if (!route.query.id) return
|
||
let params = {
|
||
articleId: route.query.id,
|
||
...submitParam(formData.value)
|
||
}
|
||
console.log('params', params)
|
||
editArticle(params).then(res => {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: res.code === 1000 ? 'success' : 'error'
|
||
})
|
||
if (res.code === 1000) {
|
||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||
router.push({
|
||
name: 'Manage'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const getDetailInfo = async () => {
|
||
loading.value = true
|
||
getArticleDetail(route.query.id).then(res => {
|
||
if (res.code === 1000) {
|
||
formData.value = res.data
|
||
loading.value = false
|
||
showTinymce.value = false
|
||
nextTick(() => {
|
||
showTinymce.value = true
|
||
})
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
onMounted(async () => {
|
||
if (route.query.id) {
|
||
await getDetailInfo()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.a-style:hover{
|
||
text-decoration: underline !important;
|
||
}
|
||
.company-select {
|
||
:deep(.el-form-item__content .el-select__wrapper ) {
|
||
width: 750px;
|
||
}
|
||
|
||
.company-style {
|
||
//width: 98%;
|
||
min-height: 30px;
|
||
max-height: 60px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-line-clamp: 2;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.company {
|
||
color: #fff;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
:deep(.el-table--fit ) {
|
||
height: 300px !important;
|
||
}
|
||
|
||
.add-block {
|
||
padding: 0 30px;
|
||
}
|
||
|
||
:deep(.el-input-number) {
|
||
width: 88.5%;
|
||
|
||
.el-input__wrapper {
|
||
padding: 1px 11px !important;
|
||
}
|
||
|
||
.el-input__inner {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
:deep(.el-table__header) {
|
||
.is-leaf:first-child {
|
||
.cell {
|
||
margin-left: -20px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-table__body) {
|
||
.el-table__cell:first-child {
|
||
.cell {
|
||
margin-left: -10px !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|