|
|
@ -0,0 +1,289 @@
|
|
|
<template>
|
|
|
<a-modal
|
|
|
title="内容管理"
|
|
|
:width="900"
|
|
|
:visible="visible"
|
|
|
:confirmLoading="confirmLoading"
|
|
|
:footer="null"
|
|
|
@cancel="handleCancel"
|
|
|
>
|
|
|
<a-form :form="form">
|
|
|
<a-form-item
|
|
|
style="display: none;"
|
|
|
>
|
|
|
<a-input v-decorator="['id']" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
<a-input
|
|
|
placeholder="请输入标题"
|
|
|
v-decorator="['articleContentTitle', {rules: [{required: true, message: '请输入标题'}]}]"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
label="封面"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol"
|
|
|
has-feedback
|
|
|
:required="true"
|
|
|
>
|
|
|
<div>
|
|
|
<upload-component
|
|
|
ref="upLoadRef"
|
|
|
:remarkTxt="remarkTxt"
|
|
|
@uploadSuccess="uploadSuccess"
|
|
|
v-decorator="[
|
|
|
'articleContentCover',
|
|
|
{
|
|
|
trigger: 'change',
|
|
|
rules: [{ validator: checkimageUrl }]
|
|
|
},
|
|
|
]"
|
|
|
></upload-component>
|
|
|
</div>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="内容类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
<a-select
|
|
|
style="width: 100%"
|
|
|
placeholder="请选择内容类型"
|
|
|
v-decorator="['articleContentType', {rules: [{ required: true, message: '请选择内容类型' }]}]"
|
|
|
@change="articleContentTypeChange"
|
|
|
>
|
|
|
<a-select-option
|
|
|
v-for="(item,index) in typeList"
|
|
|
:key="index"
|
|
|
:value="item.code"
|
|
|
>{{ item.name }}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
<a-select
|
|
|
style="width: 100%"
|
|
|
placeholder="请选择分类"
|
|
|
v-decorator="['articleContentClassify', {rules: [{ required: true, message: '请选择分类' }]}]"
|
|
|
@change="articleContentClassifyChange"
|
|
|
>
|
|
|
<a-select-option
|
|
|
v-for="(item,index) in classifyList"
|
|
|
:key="index"
|
|
|
:value="item.articleContentClassify"
|
|
|
>{{ item.articleContentClassify }}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="子分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
<a-select
|
|
|
style="width: 100%"
|
|
|
placeholder="请选择子分类"
|
|
|
v-decorator="['articleContentSubclassify', {rules: [{ required: true, message: '请选择子分类' }]}]"
|
|
|
>
|
|
|
<a-select-option
|
|
|
v-for="(item,index) in subclassifyList"
|
|
|
:key="index"
|
|
|
:value="item.articleContentSubclassify"
|
|
|
>{{ item.articleContentSubclassify }}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
label="摘要"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol"
|
|
|
has-feedback
|
|
|
>
|
|
|
<a-textarea :rows="4" :maxLength="100" placeholder="请输入摘要" @input="abstractInput" v-decorator="['articleContentAbstract', {rules: [{required: true, message: '请输入摘要！'}]}]">
|
|
|
</a-textarea>
|
|
|
<div class="inputCount">({{ articleContentAbstract.length }}/100)</div>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol"
|
|
|
label="内容"
|
|
|
:hasFeedback="true"
|
|
|
:required="true"
|
|
|
>
|
|
|
<quill-editor-component
|
|
|
ref="editorRef"
|
|
|
@contentGet="contentGet"
|
|
|
v-decorator="[
|
|
|
'articleContentContent',
|
|
|
{
|
|
|
trigger: 'change',
|
|
|
rules: [{ required: true, message: '请输入文章内容' }]
|
|
|
},
|
|
|
]"
|
|
|
></quill-editor-component>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol"
|
|
|
label="排序"
|
|
|
:hasFeedback="true"
|
|
|
:required="true"
|
|
|
>
|
|
|
<a-input
|
|
|
placeholder="请输入排序号"
|
|
|
v-decorator="['articleContentSort', {rules: [{validator: checkSortIndex}]}]"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
|
|
|
<a-radio-group name="articleContentIsLine" v-decorator="['articleContentIsLine',{ initialValue: 1 }]">
|
|
|
<a-radio :value="1">上线</a-radio>
|
|
|
<a-radio :value="0">下线</a-radio>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
findArticleContentById,
|
|
|
getSystemDictClassify,
|
|
|
getSystemDictSubClassify } from '@/api/modular/system/contentControlApi'
|
|
|
import quillEditorComponent from '@/components/quillEditorComponent'
|
|
|
import homeApi from '@/api/homeApi'
|
|
|
import uploadComponent from '@/components/upLoad'
|
|
|
|
|
|
export default {
|
|
|
components: { uploadComponent, quillEditorComponent },
|
|
|
data () {
|
|
|
return {
|
|
|
typeList: homeApi.systemTypeList,
|
|
|
subclassifyList: [],
|
|
|
classifyList: [],
|
|
|
loading: false,
|
|
|
labelCol: {
|
|
|
xs: { span: 24 },
|
|
|
sm: { span: 5 }
|
|
|
},
|
|
|
wrapperCol: {
|
|
|
xs: { span: 24 },
|
|
|
sm: { span: 15 }
|
|
|
},
|
|
|
visible: false,
|
|
|
confirmLoading: false,
|
|
|
form: this.$form.createForm(this),
|
|
|
articleContentType: '',
|
|
|
articleContentClassify: '',
|
|
|
articleContentAbstract: '',
|
|
|
remarkTxt: '请上传1920×712规格图像'
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化方法
|
|
|
show (record) {
|
|
|
findArticleContentById({ id: record.id, systemDictType: '', articleContentTitle: '', pageNo: 1, pageSize: 1 }).then((res) => {
|
|
|
this.formLoading = false
|
|
|
if (res.status === 200) {
|
|
|
if (res.data.rows.length) {
|
|
|
this.edit(res.data.rows[0])
|
|
|
} else {
|
|
|
this.$message.error('该文章不存在')
|
|
|
this.handleCancel()
|
|
|
}
|
|
|
} else {
|
|
|
this.$message.error('获取文章列表数据失败')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
edit (record) {
|
|
|
this.visible = true
|
|
|
setTimeout(() => {
|
|
|
this.form.resetFields()
|
|
|
this.form.setFieldsValue(record)
|
|
|
this.form.setFieldsValue({ 'id': record.articleContentId })
|
|
|
this.$nextTick(() => {
|
|
|
this.abstractInput()
|
|
|
this.$refs.upLoadRef.initData([record.articleContentCover])
|
|
|
this.$refs.editorRef.initEditorContent(record.articleContentContent)
|
|
|
})
|
|
|
}, 1)
|
|
|
},
|
|
|
articleContentTypeChange () {
|
|
|
this.$nextTick(() => {
|
|
|
this.articleContentType = this.form.getFieldValue('articleContentType')
|
|
|
this.form.setFieldsValue({ 'articleContentClassify': '' })
|
|
|
this.form.setFieldsValue({ 'articleContentSubclassify': '' })
|
|
|
this.getSystemDictClassify()
|
|
|
})
|
|
|
},
|
|
|
articleContentClassifyChange () {
|
|
|
this.$nextTick(() => {
|
|
|
this.articleContentClassify = this.form.getFieldValue('articleContentClassify')
|
|
|
this.form.setFieldsValue({ 'articleContentSubclassify': '' })
|
|
|
this.getSystemDictSubClassify()
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 获取选择器下拉框数据(分类)
|
|
|
*/
|
|
|
getSystemDictClassify () {
|
|
|
getSystemDictClassify({ 'articleContentType': this.articleContentType }).then((res) => {
|
|
|
this.formLoading = false
|
|
|
if (res.status === 200) {
|
|
|
this.classifyList = res.data
|
|
|
} else {
|
|
|
this.$message.error('获取文章列表数据失败')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 获取选择器下拉框数据(子分类)
|
|
|
*/
|
|
|
getSystemDictSubClassify () {
|
|
|
getSystemDictSubClassify({ 'articleContentType': this.articleContentType, 'articleContentClassify': this.articleContentClassify }).then((res) => {
|
|
|
this.formLoading = false
|
|
|
if (res.status === 200) {
|
|
|
this.subclassifyList = res.data
|
|
|
} else {
|
|
|
this.$message.error('获取文章列表数据失败')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
abstractInput () {
|
|
|
this.$nextTick(() => {
|
|
|
this.articleContentAbstract = this.form.getFieldValue('articleContentAbstract')
|
|
|
})
|
|
|
},
|
|
|
contentGet (content) {
|
|
|
this.form.setFieldsValue({ 'articleContentContent': content })
|
|
|
},
|
|
|
uploadSuccess (avg) {
|
|
|
if (avg.fileList[0]) {
|
|
|
this.form.resetFields('articleContentCover')
|
|
|
this.form.setFieldsValue({ 'articleContentCover': avg.fileList[0].uri })
|
|
|
}
|
|
|
},
|
|
|
checkimageUrl (rule, value, callback) {
|
|
|
if (value && value.length > 0) {
|
|
|
callback()
|
|
|
return
|
|
|
}
|
|
|
var text = '请上传图片'
|
|
|
callback(text)
|
|
|
},
|
|
|
handleCancel () {
|
|
|
this.form.resetFields()
|
|
|
this.visible = false
|
|
|
},
|
|
|
checkSortIndex (rule, value, callback) {
|
|
|
var text = '请输入排序号！'
|
|
|
if (!value) {
|
|
|
callback(text)
|
|
|
} else if (/(^[1-9]\d*$)/.test(value)) {
|
|
|
callback()
|
|
|
} else {
|
|
|
text = '请输入数字'
|
|
|
callback(text)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.inputCount{
|
|
|
position: absolute;
|
|
|
right: 30px;
|
|
|
bottom: -10px;
|
|
|
color: #999;
|
|
|
}
|
|
|
</style>
|
