parent
c1b1a1e6a8
commit
5d997905c9
13 changed files with 1182 additions and 172 deletions
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 579 KiB |
|
After Width: | Height: | Size: 486 KiB |
@ -0,0 +1,991 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<p class="page-name mb">文章详情</p> |
||||||
|
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
||||||
|
<el-form-item class="lg" prop="articleTemplate" label="独立文章模板"> |
||||||
|
<el-popover placement="top-start" trigger="hover" content="默认使用栏目中设置的文章样式，如果需要为该篇文章指定专门的模板样式，可以设置此项"> |
||||||
|
<img slot="reference" class="info" src="@/assets/images/ques.png" alt=""> |
||||||
|
</el-popover> |
||||||
|
<div style="width: 940px;text-align: right;"> |
||||||
|
<el-switch v-model="form.templateStatus" :active-value="1" :inactive-value="0"> |
||||||
|
</el-switch> |
||||||
|
</div> |
||||||
|
<ul v-if="form.templateStatus" class="styles"> |
||||||
|
<template v-for="(item, i) in detailStyle"> |
||||||
|
<li v-if="item.id !== column.detailStyle" :key="i" @click="styleChange(item.id)"> |
||||||
|
<div class="review"> |
||||||
|
<img :class="{ 'is-link': item.id == 24 }" :src="require('@/assets/images/style/' + item.id + '.png')" |
||||||
|
alt=""> |
||||||
|
</div> |
||||||
|
<el-radio v-model="form.articleTemplate" :label="item.id">{{ item.style }}</el-radio> |
||||||
|
</li> |
||||||
|
</template> |
||||||
|
</ul> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="name" label="名称"> |
||||||
|
<el-input id="articleTitle" style="width: 940px" placeholder="请输入名称" v-model="form.name" clearable |
||||||
|
maxlength="100" @change="nameChange"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<div class="item-line"> |
||||||
|
<el-form-item label="分类"> |
||||||
|
<el-select style="width: 234px;" v-model="getModelData" clearable> |
||||||
|
<template v-for="item in classifications"> |
||||||
|
<el-option v-if="item.categoryId" :key="item.categoryId" :label="item.name" :value="item.categoryId"> |
||||||
|
</el-option> |
||||||
|
</template> |
||||||
|
</el-select> |
||||||
|
<el-button class="set-btn" type="primary" @click="setClass">设置</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="author" label="类型"> |
||||||
|
<el-select style="width: 234px;" v-model="form.categoryId" multiple> |
||||||
|
<template v-for="item in categories"> |
||||||
|
<el-option v-if="item.categoryId" :key="item.categoryId" :label="item.name" :value="item.categoryId"> |
||||||
|
</el-option> |
||||||
|
</template> |
||||||
|
</el-select> |
||||||
|
<el-button class="set-btn" type="primary" @click="setLabel">设置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<el-form-item prop="subjectSpecialtyList" label="适用学科专业"> |
||||||
|
<div class="subject-wrap"> |
||||||
|
<div class="subject"> |
||||||
|
<div v-for="(item, i) in form.subjectSpecialtyList" :key="i" class="subject-line"> |
||||||
|
<el-form-item label="学科类别"> |
||||||
|
<el-select v-model="item.subjectCategoryId" @change="getProfessionalClass(item)"> |
||||||
|
<el-option v-for="(item, i) in subjectList" :key="i" :label="item.disciplineName" |
||||||
|
:value="item.disciplineId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="专业类"> |
||||||
|
<el-select v-model="item.professionalCategoryId" :disabled="item.subjectCategoryId ? false : true" |
||||||
|
@change="getProfessional(item)"> |
||||||
|
<el-option v-for="(item, i) in item.professionalClassList" :key="i" |
||||||
|
:label="item.professionalClassName" :value="item.professionalClassId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="专业"> |
||||||
|
<el-select v-model="item.majorId" :disabled="item.professionalCategoryId ? false : true"> |
||||||
|
<el-option v-for="(item, i) in item.professionalList" :key="i" :label="item.professionalName" |
||||||
|
:value="item.majorId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<i v-if="i" class="del el-icon-delete" @click="form.subjectSpecialtyList.splice(i, 1)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="subject-plus" @click="addSubject"> |
||||||
|
<i class="el-icon-circle-plus-outline"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<template v-if="form.articleTemplate === 78"> |
||||||
|
<div class="item-line"> |
||||||
|
<el-form-item label="匹配课程" prop="matchedCourses"> |
||||||
|
<el-input placeholder="请输入匹配课程" v-model="form.matchedCourses" maxlength="30"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="预计课时" prop="estimatedHours"> |
||||||
|
<el-select v-model="form.estimatedHours" clearable placeholder="请选择预计课时"> |
||||||
|
<el-option label="32课时" value="32课时"></el-option> |
||||||
|
<el-option label="64课时" value="64课时"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<el-form-item label="适用场景" prop="applicableScenarios"> |
||||||
|
<el-input style="width: 940px;" placeholder="请输入适用场景" v-model="form.applicableScenarios" |
||||||
|
maxlength="50"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</template> |
||||||
|
<el-form-item prop="coverImageUrl" label="封面图"> |
||||||
|
<el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg,.gif" :on-change="file => changeFile(file, 0)" |
||||||
|
:show-file-list="false" :action="this.api.upload" :auto-upload="false"> |
||||||
|
<img v-if="form.coverImageUrl" :src="form.coverImageUrl" class="avatar"> |
||||||
|
<div class="uploader-default" v-else> |
||||||
|
<img class="plus" src="@/assets/images/plus.png" alt=""> |
||||||
|
<p>点击上传</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<div class="item-line"> |
||||||
|
<el-form-item label="来源" prop="source" style="margin-right: 40px;"> |
||||||
|
<el-input placeholder="请输入来源" v-model="form.source" maxlength="50"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="按钮跳转链接"> |
||||||
|
<el-input class="m-r-10" style="width: 150px;" placeholder="请设置按钮名称" v-model="form.jumpButtonName" |
||||||
|
maxlength="10"></el-input> |
||||||
|
<el-input placeholder="请设置跳转链接" v-model="form.jumpLinkUrl"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<el-form-item label="简介" prop="introduction"> |
||||||
|
<el-input style="width: 940px;" v-model="form.introduction" type="textarea" maxlength="200"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="detailedDescription" label="详情"> |
||||||
|
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.detailedDescription" |
||||||
|
:init="editorConfig" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="btns"> |
||||||
|
<el-button type="primary" @click="submit(1)">发布</el-button> |
||||||
|
<el-button v-if="$route.query.id" @click="preview">预览</el-button> |
||||||
|
<el-button @click="submit(0)">保存草稿</el-button> |
||||||
|
<el-button @click="back">取消</el-button> |
||||||
|
</div> |
||||||
|
<!-- 剪裁组件弹窗 --> |
||||||
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
||||||
|
<Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="true" :fixedNumber.sync="fixedNumber" |
||||||
|
@upload="customUpload" /> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog title="分类设置" :visible.sync="classVisible" width="500px" :close-on-click-modal="false" class="manage-dia" |
||||||
|
:before-close="closeClass"> |
||||||
|
<div class="plus"> |
||||||
|
<i class="el-icon-circle-plus-outline" @click="addClass"></i> |
||||||
|
</div> |
||||||
|
<el-table :data="classifications" ref="table" header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="name" label="分类名称" align="center" min-width="130"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-if="scope.row.edit" placeholder="请输入分类名称" v-model="scope.row.name" clearable |
||||||
|
maxlength="30"></el-input> |
||||||
|
<span v-else>{{ scope.row.name }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" min-width="60"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitClass(scope.row)"></i> |
||||||
|
<i v-else class="el-icon-edit edit" @click="editClass(scope.row)"></i> |
||||||
|
<i class="el-icon-delete del" @click="delClass(scope.row, scope.$index)"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer"> |
||||||
|
<el-button @click="closeClass">返回</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog title="类型设置" :visible.sync="labelVisible" width="500px" :close-on-click-modal="false" class="manage-dia" |
||||||
|
:before-close="closeLabel"> |
||||||
|
<div class="plus"> |
||||||
|
<i class="el-icon-circle-plus-outline" @click="addLabel"></i> |
||||||
|
</div> |
||||||
|
<el-table :data="categories" ref="table" header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="name" label="类型" align="center" min-width="130"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-if="scope.row.edit" placeholder="请输入类型" v-model="scope.row.name" clearable |
||||||
|
maxlength="30"></el-input> |
||||||
|
<span v-else>{{ scope.row.name }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" min-width="60"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitLabel(scope.row)"></i> |
||||||
|
<i v-else class="el-icon-edit edit" @click="editLabel(scope.row)"></i> |
||||||
|
<i class="el-icon-delete del" @click="delLabel(scope.row, scope.$index)"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer"> |
||||||
|
<el-button @click="closeLabel">返回</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import Util from '@/libs/util' |
||||||
|
import { mapState } from 'vuex' |
||||||
|
import Editor from '@tinymce/tinymce-vue' |
||||||
|
import editorConfig from './editor' |
||||||
|
import Cropper from '@/components/img-upload/Cropper' |
||||||
|
import Axios from 'axios' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
site: this.$store.state.content.site, |
||||||
|
userId: this.$store.state.user.userId, |
||||||
|
headers: { |
||||||
|
token: Util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
nameRepeat: false, |
||||||
|
categories: [], |
||||||
|
detailStyle: [ |
||||||
|
{ |
||||||
|
id: 78, |
||||||
|
style: '产品详情' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 72, |
||||||
|
style: '富文本' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 24, |
||||||
|
style: '链接' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 79, |
||||||
|
style: '课程详情' |
||||||
|
}, |
||||||
|
], |
||||||
|
subjectList: [], //专业学科 |
||||||
|
form: { |
||||||
|
siteId: this.$store.state.content.site.id, |
||||||
|
id: this.$route.query.id || '', |
||||||
|
founderId: this.$store.state.user.userId, |
||||||
|
templateStatus: 0, |
||||||
|
articleTemplate: '', |
||||||
|
applicableScenarios: '', |
||||||
|
categoryId: '', |
||||||
|
classificationTagId: '', |
||||||
|
estimatedHours: '', |
||||||
|
introduction: '', |
||||||
|
jumpButtonName: '', |
||||||
|
jumpLinkUrl: '', |
||||||
|
matchedCourses: '', |
||||||
|
name: '', |
||||||
|
columnId: +this.$route.query.columnId, |
||||||
|
publishStatus: 0, |
||||||
|
detailedDescription: '', |
||||||
|
source: '平台官方', |
||||||
|
coverImageUrl: '', |
||||||
|
subjectSpecialtyList: [ |
||||||
|
{ |
||||||
|
professionalClassList: [], |
||||||
|
professionalList: [], |
||||||
|
subjectCategoryId: 1, |
||||||
|
professionalCategoryId: 1, |
||||||
|
majorId: 1, |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
name: [ |
||||||
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
||||||
|
], |
||||||
|
subjectSpecialtyList: [ |
||||||
|
{ required: true, message: '请选择学科专业', trigger: 'change' } |
||||||
|
], |
||||||
|
source: [ |
||||||
|
{ required: true, message: '请输入来源', trigger: 'blur' } |
||||||
|
], |
||||||
|
coverImageUrl: [ |
||||||
|
{ required: true, message: '请上传封面图', trigger: 'change' } |
||||||
|
], |
||||||
|
detailedDescription: [ |
||||||
|
{ required: true, message: '请输入正文', trigger: 'blur' } |
||||||
|
], |
||||||
|
}, |
||||||
|
columnInfo: {}, |
||||||
|
editorConfig, |
||||||
|
submiting: false, // 新增编辑防抖标识 |
||||||
|
pass: false, |
||||||
|
uploading: 0, |
||||||
|
updateTime: 0, |
||||||
|
cropperModel: false, |
||||||
|
isUpload: false, |
||||||
|
fixedNumber: [1.76, 1], |
||||||
|
file: {}, // 当前被选择的图片文件 |
||||||
|
isBanner: 0, |
||||||
|
classifications: [], |
||||||
|
classVisible: false, |
||||||
|
categories: [], |
||||||
|
labelVisible: false, |
||||||
|
originalName: '', |
||||||
|
originColumnId: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('user', [ |
||||||
|
'userName' |
||||||
|
]), |
||||||
|
...mapState('content', [ |
||||||
|
'column' |
||||||
|
]), |
||||||
|
getModelData: { |
||||||
|
get () { |
||||||
|
const data = this.classifications.find(item => item.id === this.form.classificationTagId) |
||||||
|
return data ? data.id : '' |
||||||
|
}, |
||||||
|
set (newVal) { |
||||||
|
this.form.classificationTagId = newVal |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Editor, |
||||||
|
Cropper |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||||
|
form: { |
||||||
|
handler (val) { |
||||||
|
this.updateTime++ |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
// 页面离开的时候如果没有保存则提示 |
||||||
|
beforeRouteLeave (to, from, next) { |
||||||
|
if (this.submiting) { |
||||||
|
next() |
||||||
|
} else if (!this.pass) { |
||||||
|
// 更改了信息才需要提示 |
||||||
|
if (this.updateTime > 1) { |
||||||
|
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.submit(this.form.publishStatus, next) |
||||||
|
}).catch(() => { |
||||||
|
next() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
next() |
||||||
|
} |
||||||
|
} else { |
||||||
|
next() |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$store.commit('user/setCrumbs', [ |
||||||
|
{ |
||||||
|
name: '站点管理', |
||||||
|
route: '/site' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '内容管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '文章管理', |
||||||
|
route: '/article' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.$route.query.columnName, |
||||||
|
route: '/article' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.$route.query.id ? '编辑' : '新增' |
||||||
|
} |
||||||
|
]) |
||||||
|
this.form.id ? this.getData() : this.getColumn() |
||||||
|
this.getSubject() |
||||||
|
this.getLabel() |
||||||
|
// this.getTemplate() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取文章详情 |
||||||
|
getData () { |
||||||
|
this.$post(`${this.api.productDetailsFind}?id=${this.form.id}`).then(({ data }) => { |
||||||
|
data.categoryId = data.categoryId ? data.categoryId.split(',').map(e => +e) : [] |
||||||
|
this.originalName = data.name |
||||||
|
let lableData = [] |
||||||
|
data.categoryId.forEach(item => { |
||||||
|
this.categories.forEach(options => { |
||||||
|
if (item == options.id) { |
||||||
|
lableData.push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
data.categoryId = lableData |
||||||
|
this.form = data |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 获取栏目详情 |
||||||
|
getColumn () { |
||||||
|
this.$post(`${this.api.findColumn}?id=${this.$route.query.columnId}`).then(({ data }) => { |
||||||
|
this.columnInfo = data |
||||||
|
const { form } = this |
||||||
|
// 如果独立文章模板未启用，并且该栏目的类型为常规/子级优先，则把栏目所选的详情样式赋值到文章模板；如果栏目类型为长页或者链接，则文章模板默认为产品详情（78） |
||||||
|
if (!form.templateStatus) { |
||||||
|
form.articleTemplate = (data.typeId === 1 || data.typeId === 4) ? data.detailStyleId : 78 |
||||||
|
} |
||||||
|
|
||||||
|
this.getClassification() |
||||||
|
this.$nextTick(() => { |
||||||
|
this.updateTime = 0 |
||||||
|
}) |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 独立文章模板选择回调 |
||||||
|
styleChange (id) { |
||||||
|
this.form.articleTemplate = id |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
// 添加学科 |
||||||
|
addSubject () { |
||||||
|
const e = { |
||||||
|
professionalClassList: [], |
||||||
|
professionalList: [], |
||||||
|
subjectCategoryId: 1, |
||||||
|
professionalCategoryId: 1, |
||||||
|
majorId: 1, |
||||||
|
} |
||||||
|
this.form.subjectSpecialtyList.push(e) |
||||||
|
this.getProfessionalClassData(e) |
||||||
|
}, |
||||||
|
// 获取学科类别 |
||||||
|
async getSubject () { |
||||||
|
const { list } = await this.$get(this.api.courseDiscipline) |
||||||
|
this.subjectList = list |
||||||
|
this.form.subjectSpecialtyList.forEach(e => { |
||||||
|
e.subjectCategoryId === 1 && this.getProfessionalClass(e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 清除学科类别 |
||||||
|
clearClass (item) { |
||||||
|
item.professionalCategoryId = item.subjectCategoryId === 1 ? 1 : '' |
||||||
|
item.majorId = item.subjectCategoryId === 1 ? 1 : '' |
||||||
|
}, |
||||||
|
// 获取专业类 |
||||||
|
getProfessionalClass (item) { |
||||||
|
this.clearClass(item) |
||||||
|
this.getProfessionalClassData(item) |
||||||
|
}, |
||||||
|
async getProfessionalClassData (item) { |
||||||
|
const { list } = await this.$get(this.api.courseProfessionalClass, { |
||||||
|
disciplineId: item.subjectCategoryId |
||||||
|
}) |
||||||
|
item.professionalClassList = list |
||||||
|
this.form.subjectSpecialtyList.forEach(e => { |
||||||
|
e.professionalCategoryId === 1 && this.getProfessional(e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 清除专业类 |
||||||
|
clearProfess (item) { |
||||||
|
item.majorId = item.professionalCategoryId === 1 ? 1 : '' |
||||||
|
}, |
||||||
|
// 获取专业 |
||||||
|
getProfessional (item) { |
||||||
|
this.clearProfess(item) |
||||||
|
this.getProfessionalData(item) |
||||||
|
}, |
||||||
|
async getProfessionalData (item) { |
||||||
|
const { list } = await this.$get(this.api.courseProfessional, { |
||||||
|
professionalClassId: item.professionalCategoryId |
||||||
|
}) |
||||||
|
item.professionalList = list |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取所有模板 |
||||||
|
getTemplate () { |
||||||
|
this.$post(this.api.individualTemplateDetailsStyle).then(({ data }) => { |
||||||
|
const result = [] |
||||||
|
data.map(e => { |
||||||
|
result.find(n => n.style === e.style) || result.push(e) |
||||||
|
}) |
||||||
|
this.detailStyle = result |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 获取所属分类 |
||||||
|
getClassification () { |
||||||
|
this.$post(`${this.api.categoryList}?siteId=${this.site.id}&type=0`).then(({ data }) => { |
||||||
|
this.classifications = data |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 显示所属分类弹框 |
||||||
|
setClass () { |
||||||
|
this.classVisible = true |
||||||
|
}, |
||||||
|
// 新增所属分类 |
||||||
|
addClass () { |
||||||
|
this.classifications.push({ |
||||||
|
edit: true, |
||||||
|
categoryId: '', |
||||||
|
name: '' |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 编辑所属分类 |
||||||
|
editClass (row) { |
||||||
|
this.$set(row, 'edit', 1) |
||||||
|
}, |
||||||
|
// 删除所属分类 |
||||||
|
delClass (row, i) { |
||||||
|
if (row.categoryId) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.$post(this.api.categoryDel, [row.categoryId]).then(res => { |
||||||
|
Util.successMsg('删除成功') |
||||||
|
this.getClassification() |
||||||
|
}).catch(res => { }) |
||||||
|
}).catch(() => { }) |
||||||
|
} else { |
||||||
|
this.classifications.splice(i, 1) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 提交所属分类 |
||||||
|
submitClass (row, showMsg = 1) { |
||||||
|
if (!row.name) return Util.errorMsg('请输入分类') |
||||||
|
// this.$post(`${this.api.checkClassif}?name=${row.name}&siteId=${this.site.id}&classificationTagId=${row.id}`).then(res => { |
||||||
|
this.$post(this.api.categorySave, { |
||||||
|
type: 0, |
||||||
|
name: row.name, |
||||||
|
categoryId: row.categoryId, |
||||||
|
siteId: this.site.id, |
||||||
|
editorId: this.userId, |
||||||
|
founderId: this.userId |
||||||
|
}).then(res => { |
||||||
|
showMsg && Util.successMsg((row.categoryId ? '修改' : '新增') + '成功') |
||||||
|
this.getClassification() |
||||||
|
}).catch(res => { }) |
||||||
|
// }).catch(res => { }) |
||||||
|
}, |
||||||
|
// 关闭所属分类 |
||||||
|
closeClass () { |
||||||
|
const list = this.classifications |
||||||
|
if (list.find(e => e.edit && e.name)) { |
||||||
|
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
list.map(e => { |
||||||
|
e.edit && e.name && this.submitClass(e, 0) |
||||||
|
}) |
||||||
|
this.classVisible = false |
||||||
|
}).catch(() => { |
||||||
|
this.classVisible = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.classVisible = false |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
// 获取类型 |
||||||
|
getLabel () { |
||||||
|
this.$post(`${this.api.categoryList}?siteId=${this.site.id}&type=1`).then(({ data }) => { |
||||||
|
this.categories = data |
||||||
|
}).catch(err => { }) |
||||||
|
}, |
||||||
|
// 显示标签弹框 |
||||||
|
setLabel () { |
||||||
|
this.labelVisible = true |
||||||
|
}, |
||||||
|
// 新增标签 |
||||||
|
addLabel () { |
||||||
|
this.categories.push({ |
||||||
|
edit: true, |
||||||
|
id: '', |
||||||
|
name: '' |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 编辑标签 |
||||||
|
editLabel (row) { |
||||||
|
this.$set(row, 'edit', 1) |
||||||
|
}, |
||||||
|
// 删除标签 |
||||||
|
delLabel (row, i) { |
||||||
|
if (row.categoryId) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.$post(this.api.categoryDel, [row.categoryId]).then(res => { |
||||||
|
Util.successMsg('删除成功') |
||||||
|
this.getLabel() |
||||||
|
}).catch(res => { }) |
||||||
|
}).catch(() => { }) |
||||||
|
} else { |
||||||
|
this.categories.splice(i, 1) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 提交标签 |
||||||
|
submitLabel (row, showMsg = 1) { |
||||||
|
if (!row.name) return Util.errorMsg('请输入类型') |
||||||
|
// this.$post(`${this.api.checkLabel}?name=${row.name}&siteId=${this.site.id}&labelId=${row.id}`).then(res => { |
||||||
|
this.$post(this.api.categorySave, { |
||||||
|
type: 1, |
||||||
|
name: row.name, |
||||||
|
categoryId: row.categoryId, |
||||||
|
siteId: this.site.id, |
||||||
|
editorId: this.userId, |
||||||
|
founderId: this.userId |
||||||
|
}).then(res => { |
||||||
|
showMsg && Util.successMsg((row.categoryId ? '修改' : '新增') + '成功') |
||||||
|
this.getLabel() |
||||||
|
}).catch(res => { }) |
||||||
|
// }).catch(res => { }) |
||||||
|
}, |
||||||
|
// 关闭所属分类 |
||||||
|
closeLabel () { |
||||||
|
const list = this.categories |
||||||
|
if (list.find(e => e.edit && e.name)) { |
||||||
|
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
list.map(e => { |
||||||
|
e.edit && e.name && this.submitLabel(e, 0) |
||||||
|
}) |
||||||
|
this.labelVisible = false |
||||||
|
}).catch(() => { |
||||||
|
this.labelVisible = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.labelVisible = false |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 文章名称判重 |
||||||
|
nameChange () { |
||||||
|
const { name, id } = this.form |
||||||
|
if (name && name !== this.originalName) { |
||||||
|
this.$post(this.api.productDetailsCheck, { |
||||||
|
siteId: this.site.id, |
||||||
|
name, |
||||||
|
id: id || '' |
||||||
|
}).then(res => { |
||||||
|
this.nameRepeat = false |
||||||
|
}).catch(res => { |
||||||
|
this.nameRepeat = true |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.nameRepeat = false |
||||||
|
} |
||||||
|
}, |
||||||
|
// 图片裁剪上传事件 |
||||||
|
customUpload (data) { |
||||||
|
const formData = new FormData() |
||||||
|
formData.append('file', data, this.file.name) |
||||||
|
formData.append('quote', this.form.name) |
||||||
|
formData.append('site', this.site.siteName) |
||||||
|
formData.append('uploader', this.userName) |
||||||
|
this.imgUpload(formData) |
||||||
|
}, |
||||||
|
// 压缩图片 |
||||||
|
compress (img) { |
||||||
|
const canvas = document.createElement('canvas') |
||||||
|
const ctx = canvas.getContext('2d') |
||||||
|
// let initSize = img.src.length; |
||||||
|
const width = img.width |
||||||
|
const height = img.height |
||||||
|
canvas.width = width |
||||||
|
canvas.height = height |
||||||
|
// 铺底色 |
||||||
|
ctx.fillStyle = '#fff' |
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
||||||
|
ctx.drawImage(img, 0, 0, width, height) |
||||||
|
// 进行压缩 |
||||||
|
const ndata = canvas.toDataURL('image/jpeg', 0.8) |
||||||
|
return ndata |
||||||
|
}, |
||||||
|
// base64转成bolb对象 |
||||||
|
dataURItoBlob (base64Data) { |
||||||
|
let byteString |
||||||
|
if (base64Data.split(',')[0].indexOf('base64') >= 0) { |
||||||
|
byteString = atob(base64Data.split(',')[1]) |
||||||
|
} else { |
||||||
|
byteString = unescape(base64Data.split(',')[1]) |
||||||
|
} |
||||||
|
const mimeString = base64Data |
||||||
|
.split(',')[0] |
||||||
|
.split(':')[1] |
||||||
|
.split(';')[0] |
||||||
|
const ia = new Uint8Array(byteString.length) |
||||||
|
for (let i = 0; i < byteString.length; i++) { |
||||||
|
ia[i] = byteString.charCodeAt(i) |
||||||
|
} |
||||||
|
return new Blob([ia], { |
||||||
|
type: mimeString |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 图片上传到服务器 |
||||||
|
imgUpload (formData) { |
||||||
|
this.isUpload = true |
||||||
|
Axios({ |
||||||
|
method: 'post', |
||||||
|
url: this.api.upload, |
||||||
|
data: formData, |
||||||
|
headers: { |
||||||
|
'Content-Type': 'multipart/form-data', |
||||||
|
token: Util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
}).then(({ data }) => { |
||||||
|
if (data.code === 401) { |
||||||
|
Util.errorMsg(data.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.$store.dispatch('user/logout') |
||||||
|
}, 1000) |
||||||
|
return false |
||||||
|
} |
||||||
|
let url = this.form.coverImageUrl |
||||||
|
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => { }).catch(e => { }) // 删除替换掉的图片 |
||||||
|
this.form.coverImageUrl = data.url |
||||||
|
}).catch(res => { }) |
||||||
|
this.$refs.cropper.isDisabled = false |
||||||
|
this.isUpload = false |
||||||
|
this.cropperModel = false |
||||||
|
}, |
||||||
|
// 图片改变钩子 |
||||||
|
changeFile (file, isBanner) { |
||||||
|
this.isBanner = isBanner |
||||||
|
const { size, name } = file |
||||||
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
||||||
|
if (!Util.isImg(ext)) { |
||||||
|
this.$message.error('请上传图片！') |
||||||
|
return false |
||||||
|
} |
||||||
|
// if (size / 1024 / 1024 > 5) { |
||||||
|
// this.$message.error('请上传5M以内的图片！') |
||||||
|
// return false |
||||||
|
// } |
||||||
|
this.file = file |
||||||
|
this.cropperModel = true |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.cropper.updateImg({ |
||||||
|
url: window.URL.createObjectURL(file.raw), |
||||||
|
size: file.size |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 预览 |
||||||
|
preview () { |
||||||
|
window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/article?articleId=${this.form.id}&siteId=${this.form.siteId}&id=${this.form.columnId}`) |
||||||
|
}, |
||||||
|
// 返回 |
||||||
|
back () { |
||||||
|
this.pass = true |
||||||
|
const { updateTime } = this |
||||||
|
// 更改了信息才需要提示 |
||||||
|
if (updateTime > 1) { |
||||||
|
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.submit(this.form.publishStatus) |
||||||
|
}).catch(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$router.back() |
||||||
|
} |
||||||
|
}, |
||||||
|
// 更新附件的状态为发布 |
||||||
|
updateFile (files, form, quoteId) { |
||||||
|
files.map(e => { |
||||||
|
this.$post(this.api.updateFile, { |
||||||
|
id: e, |
||||||
|
publishStatus: form.publishStatus, |
||||||
|
quote: form.name, |
||||||
|
quoteId |
||||||
|
}).then(res => { }).catch(err => { }) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 提交 |
||||||
|
submit (publishStatus, next) { |
||||||
|
if (this.submiting) return false |
||||||
|
const form = JSON.parse(JSON.stringify(this.form)) |
||||||
|
if (!form.name) return Util.errorMsg('请填写名称') |
||||||
|
if (this.nameRepeat) return Util.errorMsg('该名称已重复!') |
||||||
|
// 如果是发布 |
||||||
|
if (publishStatus) { |
||||||
|
if (!form.coverImageUrl) return Util.errorMsg('请上传封面') |
||||||
|
if (!form.coverImageUrl) return Util.errorMsg('请上传封面') |
||||||
|
if (!form.source) return Util.errorMsg('请输入来源') |
||||||
|
} |
||||||
|
if (this.uploading) return Util.errorMsg('文件正在上传，请上传完成后再发布') |
||||||
|
const { coverImageUrl } = form |
||||||
|
const fileId = [] |
||||||
|
// 获取几个附件的id，url后面的数字串即是附件id |
||||||
|
if (coverImageUrl) fileId.push(coverImageUrl.substr(coverImageUrl.lastIndexOf('/') + 1)) |
||||||
|
form.categoryId = form.categoryId.join(',') |
||||||
|
form.subjectSpecialtyList.map(e => { |
||||||
|
delete e.professionalClassList |
||||||
|
delete e.professionalList |
||||||
|
}) |
||||||
|
|
||||||
|
form.publishStatus = publishStatus |
||||||
|
this.submiting = true |
||||||
|
form.editorId = +this.$store.state.user.userId |
||||||
|
this.$post(this.api.productDetailsSave, form).then(res => { |
||||||
|
this.updateFile(fileId, form, form.id || res.data) |
||||||
|
Util.successMsg(form.id ? '修改成功' : '创建成功') |
||||||
|
next ? next() : this.$router.back() |
||||||
|
}).catch(err => { |
||||||
|
this.submiting = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$upload-width: 220px; |
||||||
|
$upload-height: 102px; |
||||||
|
$upload-lg-height: 102px; |
||||||
|
|
||||||
|
/deep/ .avatar-uploader { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
border: 1px solid #dcdee0; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
display: flex; |
||||||
|
height: $upload-height; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
background: #fafafa; |
||||||
|
|
||||||
|
p { |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.avatar-uploader-lg { |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
max-width: 820px; |
||||||
|
height: $upload-lg-height; |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
display: block; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-lg { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload__tip { |
||||||
|
margin-top: 0; |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 12px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.styles { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
width: 955px; |
||||||
|
// height: 320px; |
||||||
|
margin-top: 20px; |
||||||
|
overflow: auto; |
||||||
|
|
||||||
|
li { |
||||||
|
margin: 0 20px 10px 0; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover .review { |
||||||
|
border-color: #2962ff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.review { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 170px; |
||||||
|
height: 112px; |
||||||
|
margin-bottom: 10px; |
||||||
|
border: 1px solid #dcdee0; |
||||||
|
border-radius: 2px; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
|
||||||
|
.is-link { |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
left: -32px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.plus { |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 18px; |
||||||
|
color: #2962ff; |
||||||
|
text-align: right; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.set-btn { |
||||||
|
margin-left: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.manage-dia { |
||||||
|
|
||||||
|
.edit, |
||||||
|
.del { |
||||||
|
font-size: 14px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.edit { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.subject-wrap { |
||||||
|
width: 940px; |
||||||
|
|
||||||
|
.subject { |
||||||
|
padding: 10px; |
||||||
|
border: 1px dashed #ccc; |
||||||
|
|
||||||
|
.subject-line { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
padding-right: 50px; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-select { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.del { |
||||||
|
position: absolute; |
||||||
|
top: 11px; |
||||||
|
right: 20px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.subject-plus { |
||||||
|
margin-top: 5px; |
||||||
|
text-align: center; |
||||||
|
font-size: 18px; |
||||||
|
color: #5481ff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue