You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
14 KiB
353 lines
14 KiB
<template>
|
|
<div class="container">
|
|
<div class="title">{{ showAdd ? '添加' : '修改' }}详情</div>
|
|
<el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
|
|
<el-form-item label="标题：" prop="title">
|
|
<el-input v-model="formLabelAlign.title" placeholder="标题" />
|
|
</el-form-item>
|
|
<div class="flex justify-between">
|
|
<el-form-item label="作者：" prop="author">
|
|
<el-input v-model="formLabelAlign.input" class="w-230" placeholder="作者" />
|
|
</el-form-item>
|
|
<el-form-item label="责编：" prop="editor">
|
|
<el-input v-model="formLabelAlign.editor" class="w-230" placeholder="责编" />
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="新闻类型：" prop="showType">
|
|
<el-radio-group v-model="formLabelAlign.showType" @change="changeShowType">
|
|
<el-radio :label="0" :disabled="formLabelAlign.showType !== 0">普通新闻</el-radio>
|
|
<el-radio :label="1" :disabled="formLabelAlign.showType !== 1">图片新闻</el-radio>
|
|
<el-radio :label="2" :disabled="formLabelAlign.showType !== 2">视频新闻</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="跳转路径：" prop="jumpUrl">
|
|
<el-input v-model="formLabelAlign.jumpUrl" placeholder="跳转路径" />
|
|
<el-upload
|
|
class="upload-demo mt-4"
|
|
:action="`${BASE_API}/file/upload`"
|
|
:on-success="handleJumpUrlSuccess"
|
|
:show-file-list="false"
|
|
>
|
|
<el-button size="small" type="primary" class="mr-4">点击上传</el-button>
|
|
<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="标题图片/视频：" prop="titleUrl" :rules="[
|
|
{ required: formLabelAlign.showType === 0 ? false : true, message: formLabelAlign.showType === 1 ? '请上传标题图片' : '请上传标题视频' },
|
|
]">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:action="`${BASE_API}/file/upload`"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
>
|
|
<img v-if="formLabelAlign.showType === 1 && formLabelAlign.titleUrl" :src="formLabelAlign.titleUrl" class="avatar-img">
|
|
<video v-else-if="formLabelAlign.showType === 2 && formLabelAlign.titleUrl" controls="controls" class="avatar-img" :src="formLabelAlign.titleUrl"></video>
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<div class="flex justify-between">
|
|
<el-form-item label="发表时间：" prop="publishTime">
|
|
<el-date-picker
|
|
v-model="formLabelAlign.publishTime"
|
|
type="date"
|
|
class="w-230"
|
|
placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="来源：" prop="source">
|
|
<el-input v-model="formLabelAlign.source" class="w-230" placeholder="来源" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<el-form-item label="页面显示位置：" prop="showPage">
|
|
<el-cascader
|
|
v-if="code !== '0204'"
|
|
v-model="formLabelAlign.showPage"
|
|
:props="props"
|
|
:disabled="true"
|
|
class="w-230"
|
|
:options="tabList">
|
|
</el-cascader>
|
|
<el-cascader
|
|
v-else
|
|
v-model="formLabelAlign.showPage"
|
|
class="w-230"
|
|
:options="tabList"
|
|
:props="props"
|
|
@change="handleChange">
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="提交状态：" prop="submitStatus">
|
|
<el-radio-group v-model="formLabelAlign.submitStatus" @change="changeSubmitStatus">
|
|
<el-radio :label="0">保存</el-radio>
|
|
<el-radio :label="1">发布</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="正文：" prop="content" :rules="[
|
|
{ required: formLabelAlign.jumpUrl ? false : true, message: '请输入正文' },
|
|
]">
|
|
<editor ref="editor" :content="formLabelAlign.content" />
|
|
</el-form-item>
|
|
<el-form-item label="相关新闻：" prop="relationContentIds">
|
|
<add-content-relation ref="distribution" @setRelationValue="setRelationValue"></add-content-relation>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submit(formLabelAlign)" :loading="loading">确定</el-button>
|
|
<el-button @click="$emit('close')">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Editor from '../Detail/editor.vue';
|
|
import AddContentRelation from './addContentRelation.vue';
|
|
import {BASE_API} from '../../config';
|
|
import {tabList} from '../../filters/code';
|
|
import {
|
|
ADD_DETAIL,
|
|
UPDATE_DETAIL,
|
|
QUERY_DETAIL
|
|
} from '@/api/contentIntro';
|
|
import Alert from "@/utils/alert";
|
|
|
|
export default {
|
|
name: "detailsOfDistribution",
|
|
components: {
|
|
Editor,
|
|
AddContentRelation
|
|
},
|
|
props: ['currList', 'showAdd'],
|
|
data() {
|
|
return {
|
|
labelPosition: 'right',
|
|
formLabelAlign: {
|
|
title: '',
|
|
author: '',
|
|
editor: '',
|
|
showType: 0,
|
|
jumpUrl: '',
|
|
titleUrl: '',
|
|
submitStatus: 1,
|
|
source: '',
|
|
publishTime: '',
|
|
content: '',
|
|
showPage: ['02','0203'],
|
|
relationContentIds: []
|
|
},
|
|
fileList: [],
|
|
code: '',
|
|
BASE_API,
|
|
tabList,
|
|
props: {
|
|
value: 'code',
|
|
label: 'title',
|
|
children: 'children'
|
|
},
|
|
loading: false,
|
|
rules: {
|
|
title: [
|
|
{ type: 'string', required: true, message: '请输入标题', trigger: 'blur' }
|
|
],
|
|
}
|
|
}
|
|
},
|
|
|
|
async mounted() {
|
|
if(this.currList && this.currList && !this.showAdd){
|
|
await this.getDetail()
|
|
for(let key in this.currList){
|
|
if(key !== 'showPage')
|
|
this.formLabelAlign[key] = this.currList[key]
|
|
}
|
|
const { showPage } = this.currList
|
|
this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2))
|
|
this.formLabelAlign.showPage.splice(1, 1, showPage)
|
|
}
|
|
const code = localStorage.getItem('code')
|
|
this.code = code
|
|
if(code === '0204' || code === '0209' || code === '0210'){
|
|
this.formLabelAlign.showType = 1
|
|
}
|
|
if(code === '0207'){
|
|
this.formLabelAlign.showType = 2
|
|
}
|
|
if(!this.formLabelAlign.publishTime){
|
|
this.formLabelAlign.publishTime = new Date()
|
|
}
|
|
if(!code) return
|
|
this.formLabelAlign.showPage.splice(0, 1, code.slice(0, 2))
|
|
this.formLabelAlign.showPage.splice(1, 1, code)
|
|
if(code === '0204'){
|
|
this.formLabelAlign.showPage = ['02', '0203']
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 上传预览图
|
|
* @param {*} res
|
|
* @param {*} file
|
|
*/
|
|
handleAvatarSuccess(res) {
|
|
if (res.data && res.data.path) {
|
|
this.formLabelAlign.titleUrl = res.data.path;
|
|
}
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
// const isJPG = file.type === 'image/jpeg';
|
|
// if (!isJPG) {
|
|
// ElMessage.error('上传头像图片只能是 JPG 格式!');
|
|
// }
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
ElMessage.error('上传头像图片大小不能超过 2MB!');
|
|
}
|
|
return isLt2M;
|
|
},
|
|
|
|
// 上传跳转路径
|
|
handleJumpUrlSuccess(res) {
|
|
if (res.data && res.data.path) {
|
|
this.formLabelAlign.jumpUrl = res.data.path;
|
|
}
|
|
},
|
|
|
|
// 位置选择
|
|
handleChange(value) {
|
|
this.formLabelAlign.showPage = value
|
|
},
|
|
|
|
// 修改标题路径显示类型
|
|
changeShowType(value){
|
|
this.formLabelAlign.showType = value;
|
|
},
|
|
|
|
// 修改提交状态
|
|
changeSubmitStatus(value){
|
|
this.formLabelAlign.submitStatus = value;
|
|
},
|
|
|
|
// 添加关联新闻
|
|
setRelationValue(relationContentIds){
|
|
this.formLabelAlign.relationContentIds = relationContentIds
|
|
},
|
|
|
|
submit(formName) {
|
|
const child = this.$refs['editor']
|
|
this.formLabelAlign.content = child.getValue();
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
if(this.showAdd){
|
|
this.addCarousel(formName)
|
|
}else{
|
|
this.updateCarousel(formName)
|
|
}
|
|
} else {
|
|
console.log('error submit!!');
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 添加详情
|
|
*/
|
|
async addCarousel(formName){
|
|
try {
|
|
this.loading = true;
|
|
const params = formName;
|
|
params.showPage = formName.showPage[1],
|
|
await ADD_DETAIL(params).then((res) => {
|
|
this.loading = false;
|
|
if(res.code === 200){
|
|
Alert.success('添加成功');
|
|
this.$emit('close', true)
|
|
}else{
|
|
Alert.fail(res.msg || '添加失败');
|
|
}
|
|
})
|
|
} catch (error) {
|
|
this.loading = false;
|
|
console.error('error: ', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 修改详情
|
|
*/
|
|
async updateCarousel(formName){
|
|
try {
|
|
this.loading = true;
|
|
const params = formName;
|
|
params.showPage = formName.showPage[1],
|
|
await UPDATE_DETAIL(params).then((res) => {
|
|
this.loading = false;
|
|
if(res.code === 200){
|
|
Alert.success('修改成功');
|
|
this.$emit('close', true)
|
|
}else{
|
|
Alert.fail(res.msg || '修改失败');
|
|
}
|
|
})
|
|
} catch (error) {
|
|
this.loading = false;
|
|
console.error('error: ', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 单个内容详情
|
|
*/
|
|
async getDetail(){
|
|
try {
|
|
const { introId } = this.currList
|
|
const params = {
|
|
introId,
|
|
};
|
|
await QUERY_DETAIL(params).then(res => {
|
|
if(res.code === 200){
|
|
this.formLabelAlign.content = res.data.content
|
|
}else{
|
|
Alert.fail(res.msg || '详情获取失败');
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title{
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
display: inline-block;
|
|
border: 1px dashed #d9d9d9;
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 150px;
|
|
height: 150px;
|
|
line-height: 150px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-img{
|
|
width: 150px;
|
|
}
|
|
|
|
.w-230{
|
|
width: 230px;
|
|
}
|
|
</style>
|
|
|