|
@@ -0,0 +1,243 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :title="!dataForm.mainId ? '新增' : '修改'"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="800px"
|
|
|
+ :visible.sync="visible">
|
|
|
+ <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="dataForm.title" placeholder="标题" type="textarea"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="简介" prop="summarys">
|
|
|
+ <el-input v-model="dataForm.summarys" placeholder="简介" type="textarea"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="排序" prop="orderIndex">
|
|
|
+ <el-input v-model="dataForm.orderIndex" placeholder="排序" type="number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="作者" prop="author">
|
|
|
+ <el-input v-model="dataForm.author" placeholder="作者"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="发布时间" prop="pubTime">
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ v-model="dataForm.pubTime"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="发布时间">
|
|
|
+ </el-date-picker>
|
|
|
+ <!--<el-input v-model="dataForm.beginDate" placeholder="开始日期"></el-input>-->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="显示类型" prop="displayType">
|
|
|
+ <!--<el-input v-model="dataForm.displayType" placeholder="显示类型(0车主/1门店/2经销商)"></el-input>-->
|
|
|
+ <el-select v-model="dataForm.displayType" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="是否默认展示" prop="flagDefault">
|
|
|
+ <el-switch
|
|
|
+ v-model="dataForm.flagDefault"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="状态" prop="nstatus">
|
|
|
+ <el-switch
|
|
|
+ v-model="dataForm.nstatus"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item label="备注" prop="description">
|
|
|
+ <el-input v-model="dataForm.description" placeholder="备注"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="文章内容" prop="contentDetail" style="height: 400px;">
|
|
|
+ <!--<el-input v-model="dataForm.contentDetail" placeholder="contentDetail"></el-input>-->
|
|
|
+ <quill-editor
|
|
|
+ v-model="dataForm.contentDetail"
|
|
|
+ class="editor"
|
|
|
+ ref="myTextEditor"
|
|
|
+ :options="editorOption"
|
|
|
+ style="height: 300px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import 'quill/dist/quill.core.css'
|
|
|
+import 'quill/dist/quill.snow.css'
|
|
|
+import 'quill/dist/quill.bubble.css'
|
|
|
+
|
|
|
+import {quillEditor} from 'vue-quill-editor'
|
|
|
+import {quillRedefine} from 'vue-quill-editor-upload'
|
|
|
+
|
|
|
+const token = localStorage.getItem('token') // 要保证取到
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ quillEditor,
|
|
|
+ quillRedefine
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ dataForm: {
|
|
|
+ type: Object,
|
|
|
+ require: false,
|
|
|
+ flagDefault: 0,
|
|
|
+ nstatus: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ editorOption: {
|
|
|
+ modules: {
|
|
|
+ toolbar: [
|
|
|
+ ['bold', 'italic', 'underline', 'strike'],
|
|
|
+ ['blockquote', 'code-block'],
|
|
|
+ [{ header: 1 }, { header: 2 }],
|
|
|
+ [{ list: 'ordered' }, { list: 'bullet' }],
|
|
|
+ [{ script: 'sub' }, { script: 'super' }],
|
|
|
+ [{ indent: '-1' }, { indent: '+1' }],
|
|
|
+ [{ direction: 'rtl' }],
|
|
|
+ [{ size: ['small', false, 'large', 'huge'] }],
|
|
|
+ [{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
|
+ [{ font: [] }],
|
|
|
+ [{ color: [] }, { background: [] }],
|
|
|
+ [{ align: [] }],
|
|
|
+ ['clean'],
|
|
|
+ ['link', 'image', 'video']
|
|
|
+ ],
|
|
|
+ syntax: {
|
|
|
+ // highlight: text => hljs.highlightAuto(text).value
|
|
|
+ highlight: text => this.highlightAuto(text).value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ dataRule: {
|
|
|
+ // 需要验证的字段名,下面的只是栗子,有些不能同时存在一个验证内
|
|
|
+ title: [
|
|
|
+ { required: true, message: '标题不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ orderIndex: [
|
|
|
+ { required: true, message: '排序不可为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ pubTime: [
|
|
|
+ { required: true, message: '发布时间不可为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ displayType: [
|
|
|
+ { required: true, message: '展示类型不可为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ contentDetail: [
|
|
|
+ { required: true, message: '文章内容不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ typeOptions: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '车主'
|
|
|
+ }, {
|
|
|
+ value: '1',
|
|
|
+ label: '门店'
|
|
|
+ }, {
|
|
|
+ value: '2',
|
|
|
+ label: '经销商'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ let that = this
|
|
|
+ that.upLoadUrl = '/api/sys/appconfig/configArticle/uploadFile' + '/?width=300'
|
|
|
+ that.editorOption = quillRedefine({
|
|
|
+ uploadConfig: {
|
|
|
+ action: '/api/sys/appconfig/configArticle/uploadFile',
|
|
|
+ token: token,
|
|
|
+ res: respnse => {
|
|
|
+ const path = respnse.data // 这里return你的图片地址即可
|
|
|
+ return path
|
|
|
+ },
|
|
|
+ name: 'file'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init () {
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ // 表单提交
|
|
|
+ dataFormSubmit () {
|
|
|
+ this.$refs['dataForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`/appconfig/configArticle/${!this.dataForm.mainId ? 'save' : 'update'}`),
|
|
|
+ method: 'post',
|
|
|
+ data: this.$http.adornData(this.dataForm)
|
|
|
+ }).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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|