|
@ -4,65 +4,156 @@
|
|
:width="900"
|
|
:width="900"
|
|
:visible="visible"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
:confirmLoading="confirmLoading"
|
|
|
|
ok-text="保存"
|
|
|
|
cancel-text="关闭"
|
|
|
|
@ok="handleSubmit"
|
|
@cancel="handleCancel"
|
|
@cancel="handleCancel"
|
|
|
|
:maskClosable="false"
|
|
>
|
|
>
|
|
<a-form :form="form">
|
|
<a-form :form="form">
|
|
<a-form-item label="销售咨询" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
|
|
<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
|
|
<a-input
|
|
placeholder="请输入职位名称"
|
|
|
|
v-decorator="['name', {rules: [{required: true, message: '请输入职位名称'}]}]"
|
|
|
|
|
|
placeholder="请输入标题"
|
|
|
|
v-decorator="['articleContentTitle', {rules: [{required: true, message: '请输入标题'}]}]"
|
|
/>
|
|
/>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="上传二维码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-upload
|
|
|
|
name="file"
|
|
|
|
list-type="picture-card"
|
|
|
|
class="avatar-uploader"
|
|
|
|
:show-upload-list="false"
|
|
|
|
action="http://192.168.131.126:8080/api/sysFileInfo/upload"
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
@change="handleChange"
|
|
|
|
|
|
<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
|
|
|
|
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"
|
|
>
|
|
>
|
|
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
|
|
|
<div v-else>
|
|
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
|
|
</div>
|
|
|
|
</a-upload>
|
|
|
|
<div class="ant-upload-text">请上传250*250规格图像</div>
|
|
|
|
|
|
<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>
|
|
<a-form-item label="销售咨询" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-input
|
|
|
|
placeholder="请输入职位名称"
|
|
|
|
v-decorator="['name', {rules: [{required: true, message: '请输入职位名称'}]}]"
|
|
|
|
/>
|
|
|
|
|
|
<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>
|
|
<a-form-item label="销售咨询" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-input
|
|
|
|
placeholder="请输入职位名称"
|
|
|
|
v-decorator="['name', {rules: [{required: true, message: '请输入职位名称'}]}]"
|
|
|
|
/>
|
|
|
|
|
|
<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>
|
|
<a-form-item label="销售咨询" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
|
|
<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
|
|
<a-input
|
|
placeholder="请输入职位名称"
|
|
|
|
v-decorator="['name', {rules: [{required: true, message: '请输入职位名称'}]}]"
|
|
|
|
|
|
placeholder="请输入排序号"
|
|
|
|
v-decorator="['articleContentSort', {rules: [{validator: checkSortIndex}]}]"
|
|
/>
|
|
/>
|
|
</a-form-item>
|
|
</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-form>
|
|
</a-modal>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
function getBase64 (img, callback) {
|
|
|
|
const reader = new FileReader()
|
|
|
|
reader.addEventListener('load', () => callback(reader.result))
|
|
|
|
reader.readAsDataURL(img)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
addArticleContent,
|
|
|
|
updateArticleAllInfo,
|
|
|
|
getSystemDictClassify,
|
|
|
|
getSystemDictSubClassify } from '@/api/modular/system/contentControlApi'
|
|
|
|
import quillEditorComponent from '@/components/quillEditorComponent'
|
|
|
|
import homeApi from '@/api/homeApi'
|
|
|
|
import uploadComponent from '@/components/upLoad'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
|
components: { uploadComponent, quillEditorComponent },
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
imageUrl: '',
|
|
|
|
|
|
typeList: homeApi.systemTypeList,
|
|
|
|
subclassifyList: [],
|
|
|
|
classifyList: [],
|
|
loading: false,
|
|
loading: false,
|
|
labelCol: {
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
xs: { span: 24 },
|
|
@ -74,51 +165,177 @@ export default {
|
|
},
|
|
},
|
|
visible: false,
|
|
visible: false,
|
|
confirmLoading: false,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this)
|
|
|
|
|
|
form: this.$form.createForm(this),
|
|
|
|
articleContentType: '',
|
|
|
|
articleContentClassify: '',
|
|
|
|
articleContentAbstract: '',
|
|
|
|
remarkTxt: '请上传1920×712规格图像'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 初始化方法
|
|
// 初始化方法
|
|
details (record) {
|
|
|
|
|
|
add (record) {
|
|
this.visible = true
|
|
this.visible = true
|
|
// setTimeout(() => {
|
|
|
|
// this.form.setFieldsValue({
|
|
|
|
// message: record.message
|
|
|
|
// })
|
|
|
|
// }, 100)
|
|
|
|
},
|
|
|
|
handleCancel () {
|
|
|
|
this.form.resetFields()
|
|
this.form.resetFields()
|
|
this.visible = false
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs.upLoadRef.initData([])
|
|
|
|
this.$refs.editorRef.initEditorContent('')
|
|
|
|
})
|
|
},
|
|
},
|
|
// 上传图片
|
|
|
|
handleChange (info) {
|
|
|
|
if (info.file.status === 'uploading') {
|
|
|
|
this.loading = true
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (info.file.status === 'done') {
|
|
|
|
// Get this url from response in real world.
|
|
|
|
// 获取图片传参
|
|
|
|
console.log(info.fileList[info.fileList.length - 1].response.data)
|
|
|
|
getBase64(info.file.originFileObj, imageUrl => {
|
|
|
|
this.imageUrl = imageUrl
|
|
|
|
this.loading = false
|
|
|
|
|
|
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)
|
|
})
|
|
})
|
|
|
|
}, 100)
|
|
|
|
},
|
|
|
|
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 })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
beforeUpload (file) {
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
|
if (!isJpgOrPng) {
|
|
|
|
this.$message.error('You can only upload JPG file!')
|
|
|
|
|
|
checkimageUrl (rule, value, callback) {
|
|
|
|
if (value && value.length > 0) {
|
|
|
|
callback()
|
|
|
|
return
|
|
}
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
if (!isLt2M) {
|
|
|
|
this.$message.error('Image must smaller than 2MB!')
|
|
|
|
|
|
var text = '请上传图片'
|
|
|
|
callback(text)
|
|
|
|
},
|
|
|
|
handleSubmit () {
|
|
|
|
const {
|
|
|
|
form: { validateFields }
|
|
|
|
} = this
|
|
|
|
this.confirmLoading = true
|
|
|
|
validateFields((errors, values) => {
|
|
|
|
if (!errors) {
|
|
|
|
values.articleContentSort = parseInt(values.articleContentSort)
|
|
|
|
values.articleContentContent = this.$refs.editorRef.imgUrlDel()
|
|
|
|
if (values.id) {
|
|
|
|
delete values.articleContentId
|
|
|
|
this.editReq(values)
|
|
|
|
} else {
|
|
|
|
delete values.id
|
|
|
|
this.addReq(values)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.confirmLoading = false
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
addReq (values) {
|
|
|
|
addArticleContent(values)
|
|
|
|
.then(res => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.$message.success('新增成功')
|
|
|
|
this.visible = false
|
|
|
|
this.confirmLoading = false
|
|
|
|
this.$emit('ok', values)
|
|
|
|
this.form.resetFields()
|
|
|
|
} else {
|
|
|
|
this.$message.error('新增失败:' + res.msg)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(res => {
|
|
|
|
this.confirmLoading = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
editReq (values) {
|
|
|
|
updateArticleAllInfo(values)
|
|
|
|
.then(res => {
|
|
|
|
if (res.status === 200) {
|
|
|
|
this.$message.success('编辑成功')
|
|
|
|
this.visible = false
|
|
|
|
this.confirmLoading = false
|
|
|
|
this.$emit('ok', values)
|
|
|
|
this.form.resetFields()
|
|
|
|
} else {
|
|
|
|
this.$message.error('编辑失败:' + res.msg)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(res => {
|
|
|
|
this.confirmLoading = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
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)
|
|
}
|
|
}
|
|
console.log(file)
|
|
|
|
return isJpgOrPng && isLt2M
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
.inputCount{
|
|
|
|
position: absolute;
|
|
|
|
right: 30px;
|
|
|
|
bottom: -10px;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
</style>
|