Commit 92ac8b8b by Lyan

页面入口

parent dbabf8ee
<template>
<div class="mod-config">
<div class="title">{{title}}</div>
<div class="form-list">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
<div class="base-info">基本信息</div>
<el-form-item label="原始标题:" prop="titleOld">
<el-input v-model="dataForm.titleOld" placeholder="请输入原始标题"></el-input>
</el-form-item>
<el-form-item label="显示标题:" prop="title">
<el-input v-model="dataForm.title" placeholder="请输入显示标题"></el-input>
</el-form-item>
<el-form-item label="显示最新要闻:" prop="ishead">
<el-radio v-model="dataForm.ishead" label="1"></el-radio>
<el-radio v-model="dataForm.ishead" label="2"></el-radio>
</el-form-item>
<el-form-item label="跳转至:" prop="directpath">
<el-input v-model="dataForm.directpath" placeholder="请输入跳转地址"></el-input>
</el-form-item>
<el-form-item label="栏目:" prop="titleOld">
<el-select v-model="dataForm.classid" @change="getClassList([dataForm.classid])" style='width:121px!important'>
<el-option
v-for="item in classidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<el-select v-model="dataForm.cclassid" style='width:121px!important'>
<el-option
v-for="item in cclassidList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label='级别:' prop='levels'>
<el-select v-model="dataForm.levels" placeholder="请输入级别">
<el-option
v-for="item in piclevelList"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="展示时间:" prop="showtime">
<el-date-picker
v-model="dataForm.showtime"
value-format='yyyy-MM-dd'
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="关键字:" prop="keyword">
<el-input v-model="dataForm.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item label="稿源:" prop="source">
<el-input v-model="dataForm.source" placeholder="请输入稿源"></el-input>
</el-form-item>
<el-form-item label="作者:" prop="author">
<el-input v-model="dataForm.author" placeholder="请输入作者"></el-input>
</el-form-item>
<el-form-item label="上传图片:" prop="pic">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="Upload"
:before-upload="beforeAvatarUpload">
<img v-if="dialogVisible" :src="imgUrlStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="简介:" prop="brief">
<el-input type="textarea" v-model="dataForm.brief" placeholder="请输入简介"></el-input>
</el-form-item>
<el-form-item label="文章内容:" prop="content" >
<Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue"></Ueditor>
<!-- <el-input v-model="dataForm.content" placeholder="请输入内容"></el-input> -->
</el-form-item>
</el-form>
</div>
<div class="sub-btn">
<span slot='footer' class='dialog-footer'>
<el-button @click='clearInp()'>重置</el-button>
<el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
</span>
</div>
</div>
</template>
<script>
import Ueditor from '../temps/ueditor'
export default {
components: {
Ueditor
},
data () {
return {
defaultProps: {
children: 'children',
label: 'label'
},
dataForm: {
id: 0,
title: '',
titleOld: '',
keyword: '',
brief: '',
author: '',
source: '',
levels: '',
directpath: '',
pic: '',
content: '',
ishead: '1',
showtime: '',
classid: '',
cclassid: '',
cclassname: ''
},
cclassidStr: undefined,
dataRule: {
title: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
titleOld: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
keyword: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
brief: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
author: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
source: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
levels: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
directpath: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
pic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
// content: [
// { required: true, message: '不能为空', trigger: 'blur' }
// ],
classid: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
ishead: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
showtime: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
imgUrl: new FormData(),
imgUrlStr: '',
dialogVisible: false,
ueditor: {
value: '',
config: {}
},
piclevelList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
id: [],
classidList: [],
cclassidList: [],
title: ''
}
},
watch: {
areaId: {
handler (newVal, oldVal) {
if (this.$refs.cascader) {
var children = this.$refs.cascader.getCheckedNodes()
if (children[0].children.length < 1) {
this.$refs.cascader.dropDownVisible = false
}
}
}
}
},
activated () {
if (this.$route.query.id) {
this.init(this.$route.query.id)
}
this.title = !this.$route.query.id ? '添加文章' : '修改文章'
},
created () {
this.getClassList([])
},
methods: {
init (id) {
this.dataForm.id = id || 0
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(`/office/rules/info/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.title = data.news.title
this.dataForm.titleOld = data.news.titleOld
this.dataForm.keyword = data.news.keyword
this.dataForm.brief = data.news.brief
this.dataForm.author = data.news.author
this.dataForm.source = data.news.source
this.dataForm.levels = data.news.levels
this.dataForm.directpath = data.news.directpath
this.dataForm.pic = data.news.pic
this.dataForm.content = data.news.content
let classArr = []
if (data.news.cclassid === '' || data.news.cclassid === null) {
classArr.push(data.news.classid)
} else {
classArr.push(data.news.classid)
classArr.push(data.news.cclassid)
}
this.cclassidArr = classArr
this.dataForm.ishead = data.news.ishead
this.dataForm.showtime = data.news.showtime
this.imgUrlStr = data.news.pic
this.dialogVisible = true
}
})
}
})
},
// 表单提交
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl(`/office/rules/${!this.dataForm.id ? 'save' : 'update'}`),
method: 'post',
data: this.$http.adornData({
'id': this.dataForm.id || undefined,
'title': this.dataForm.title,
'titleOld': this.dataForm.titleOld,
'keyword': this.dataForm.keyword,
'brief': this.dataForm.brief,
'author': this.dataForm.author,
'source': this.dataForm.source,
'levels': this.dataForm.levels,
'directpath': this.dataForm.directpath,
'pic': this.dataForm.pic,
'content': this.$refs.ue.getUEContent(),
'classid': this.dataForm.classid,
'cclassid': this.dataForm.cclassid,
'ishead': this.dataForm.ishead,
'showtime': this.dataForm.showtime
})
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
})
},
// 获取栏目列表
getClassList (id) {
this.$http({
url: this.$http.adornUrl(`/office/newsclass/getNewsClassList`),
method: 'post',
data: id
}).then(({data}) => {
if (data && data.code === 0) {
if (id.length === 0) {
this.classidList = data.data
} else {
this.dataForm.cclassid = ''
this.cclassidList = data.data[0].child
}
} else {
this.$message.error(data.msg)
}
})
},
// 上传之前校验
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
if (!isPNG) {
this.$message.error('上传图片只能是 JPG, PNG 格式!')
}
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
if (file) {
var windowURL = window.URL || window.webkitURL
this.imgUrlStr = windowURL.createObjectURL(file)
this.dialogVisible = true
this.imgUrl.append('file', file)
console.log(this.imgUrl.get('file'))
}
},
Upload () {
this.$http({
url: this.$http.adornUrl('/office/file/uploadFile'),
method: 'post',
data: this.imgUrl,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
console.log(res)
this.dataForm.pic = res.data.data
}).catch(err => {
console.log(err)
})
},
// 选择栏目
handleChange (value) {
if (value.length === 1) {
this.classid = value[0]
} else if (value.length === 2) {
this.dataForm.classid = value[0]
this.dataForm.cclassid = value[1]
}
},
clearInp () {
this.$refs['dataForm'].resetFields()
this.imgUrlStr = ''
this.dialogVisible = false
this.$refs.ue.setClearUEContent('')
}
}
}
</script>
<style scoped>
.form-list{
padding-left: 4%!important;
}
.el-form-item__content{
width: 50%;
}
.el-select,.el-input{
width: 241px!important;
}
.edui-editor{
width: 100%;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment