|
|
@@ -14,10 +14,16 @@
|
|
|
<el-form-item label="发布机构">
|
|
|
<el-input v-model="form.issuingAgency" clearable placeholder=""></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="封面图片">
|
|
|
+ <el-upload class="avatar-uploader1" :action="uploadPath"
|
|
|
+ :show-file-list="false" :on-success="handleAvatarSuccess">
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
<div class="quill-editor">
|
|
|
<!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
|
|
|
- <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false"
|
|
|
- :on-success="uploadSuccess">
|
|
|
+ <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false" :on-success="uploadSuccess">
|
|
|
</el-upload>
|
|
|
<!--富文本编辑器组件-->
|
|
|
<quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
|
|
|
@@ -38,182 +44,202 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- addFormData,
|
|
|
- uploadPath
|
|
|
- } from '@/api/officialWebsiteManagement'
|
|
|
- import quillEditor from 'vue-quill-editor';
|
|
|
- const toolbarOptions = [
|
|
|
- ['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]
|
|
|
- }], // 标题
|
|
|
- [{
|
|
|
- 'color': []
|
|
|
- }, {
|
|
|
- 'background': []
|
|
|
- }], // 颜色选择
|
|
|
- [{
|
|
|
- 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
|
|
|
- }], // 字体
|
|
|
- [{
|
|
|
- 'align': []
|
|
|
- }], // 居中
|
|
|
- ['clean'], // 清除样式,
|
|
|
- ['link', 'image'], // 上传图片、上传视频
|
|
|
- ]
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- uploadPath,
|
|
|
- editorOption: {
|
|
|
- modules: {
|
|
|
- toolbar: {
|
|
|
- container: toolbarOptions,
|
|
|
- handlers: {
|
|
|
- image: function(value) {
|
|
|
- if (value) {
|
|
|
- // 调用element的图片上传组件
|
|
|
- document.querySelector('.avatar-uploader input').click()
|
|
|
- } else {
|
|
|
- this.quill.format('image', false)
|
|
|
- }
|
|
|
+import {
|
|
|
+ addFormData,
|
|
|
+ uploadPath
|
|
|
+} from '@/api/officialWebsiteManagement'
|
|
|
+const toolbarOptions = [
|
|
|
+ ['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]
|
|
|
+ }], // 标题
|
|
|
+ [{
|
|
|
+ 'color': []
|
|
|
+ }, {
|
|
|
+ 'background': []
|
|
|
+ }], // 颜色选择
|
|
|
+ [{
|
|
|
+ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
|
|
|
+ }], // 字体
|
|
|
+ [{
|
|
|
+ 'align': []
|
|
|
+ }], // 居中
|
|
|
+ ['clean'], // 清除样式,
|
|
|
+ ['link', 'image'], // 上传图片、上传视频
|
|
|
+]
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: '',
|
|
|
+ uploadPath,
|
|
|
+ editorOption: {
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: toolbarOptions,
|
|
|
+ handlers: {
|
|
|
+ image: function (value) {
|
|
|
+ if (value) {
|
|
|
+ // 调用element的图片上传组件
|
|
|
+ document.querySelector('.avatar-uploader input').click()
|
|
|
+ } else {
|
|
|
+ this.quill.format('image', false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- form: {
|
|
|
- issuingAgency: '畅运通信息部'
|
|
|
- },
|
|
|
- regulations: {},
|
|
|
- version: [],
|
|
|
- count: ""
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 失去焦点
|
|
|
- onEditorBlur(editor) {},
|
|
|
- // 获得焦点
|
|
|
- onEditorFocus(editor) {},
|
|
|
- // 开始
|
|
|
- onEditorReady(editor) {},
|
|
|
- // 值发生变化
|
|
|
- onEditorChange(editor) {
|
|
|
- this.form.releaseContent = editor.html;
|
|
|
- console.log(editor);
|
|
|
- },
|
|
|
- beforeUpload(file) {
|
|
|
- const isIMAGE =''
|
|
|
- file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
|
|
|
- const isLt1M = file.size / 1024 / 1024 < 1
|
|
|
-
|
|
|
- if (!isIMAGE) {
|
|
|
- this.$message.error('上传文件只能是图片格式!')
|
|
|
- }
|
|
|
- if (!isLt1M) {
|
|
|
- this.$message.error('上传文件大小不能超过 1MB!')
|
|
|
}
|
|
|
- return isIMAGE && isLt1M
|
|
|
},
|
|
|
- uploadSuccess(res) {
|
|
|
- debugger
|
|
|
- // 获取富文本组件实例
|
|
|
- let quill = this.$refs.QuillEditor.quill
|
|
|
- // 如果上传成功
|
|
|
- if (res.data.errno = 200 && res.data.url) {
|
|
|
- // 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
- // 插入图片，res为服务器返回的图片链接地址
|
|
|
- quill.insertEmbed(length, 'image', res.data.url)
|
|
|
- // 调整光标到最后
|
|
|
- quill.setSelection(length + 1)
|
|
|
- } else {
|
|
|
- // 提示信息，需引入Message
|
|
|
- this.$message.error('图片插入失败！')
|
|
|
- }
|
|
|
+ form: {
|
|
|
+ issuingAgency: '畅运通信息部'
|
|
|
},
|
|
|
+ regulations: {},
|
|
|
+ version: [],
|
|
|
+ count: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ this.form.cover = res.data.url
|
|
|
+ },
|
|
|
+
|
|
|
+ // 失去焦点
|
|
|
+ onEditorBlur(editor) { },
|
|
|
+ // 获得焦点
|
|
|
+ onEditorFocus(editor) { },
|
|
|
+ // 开始
|
|
|
+ onEditorReady(editor) { },
|
|
|
+ // 值发生变化
|
|
|
+ onEditorChange(editor) {
|
|
|
+ this.form.releaseContent = editor.html;
|
|
|
+ console.log(editor);
|
|
|
+ },
|
|
|
|
|
|
- submit() {
|
|
|
- this.listLoading = true
|
|
|
- this.form.contentType = '资讯'
|
|
|
- addFormData(this.form).then(response => {
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '添加成功！',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- this.listLoading = false
|
|
|
- this.$router.go(-1)
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ uploadSuccess(res) {
|
|
|
+ debugger
|
|
|
+ // 获取富文本组件实例
|
|
|
+ let quill = this.$refs.QuillEditor.quill
|
|
|
+ // 如果上传成功
|
|
|
+ if (res.data.errno = 200 && res.data.url) {
|
|
|
+ // 获取光标所在位置
|
|
|
+ let length = quill.getSelection().index;
|
|
|
+ // 插入图片，res为服务器返回的图片链接地址
|
|
|
+ quill.insertEmbed(length, 'image', res.data.url)
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(length + 1)
|
|
|
+ } else {
|
|
|
+ // 提示信息，需引入Message
|
|
|
+ this.$message.error('图片插入失败！')
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ this.listLoading = true
|
|
|
+ this.form.contentType = '资讯'
|
|
|
+ addFormData(this.form).then(response => {
|
|
|
+ this.$notify({
|
|
|
+ title: '成功',
|
|
|
+ message: '添加成功！',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.listLoading = false
|
|
|
+ this.$router.go(-1)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .center {
|
|
|
- background: #F5F6F7;
|
|
|
- height: calc(100vh - 4.5vh);
|
|
|
- padding-top: 20px;
|
|
|
+.center {
|
|
|
+ background: #F5F6F7;
|
|
|
+ height: calc(100vh - 4.5vh);
|
|
|
+ padding-top: 20px;
|
|
|
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- .main_css {
|
|
|
- width: 96%;
|
|
|
- height: 90vh;
|
|
|
- overflow-y: scroll;
|
|
|
- background: #FFFFFF;
|
|
|
- margin: 20px auto;
|
|
|
- padding-top: 20px;
|
|
|
- }
|
|
|
+.main_css {
|
|
|
+ width: 96%;
|
|
|
+ height: 90vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin: 20px auto;
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
|
|
|
- .formData {
|
|
|
- width: 50%;
|
|
|
- margin: 20px 0 0 140px;
|
|
|
- }
|
|
|
+.formData {
|
|
|
+ width: 50%;
|
|
|
+ margin: 20px 0 0 140px;
|
|
|
+}
|
|
|
|
|
|
- .btn {
|
|
|
- text-align: right;
|
|
|
- position: absolute;
|
|
|
- right: 200px;
|
|
|
- bottom: 100px;
|
|
|
- }
|
|
|
+.btn {
|
|
|
+ text-align: right;
|
|
|
+ position: absolute;
|
|
|
+ right: 200px;
|
|
|
+ bottom: 100px;
|
|
|
+}
|
|
|
|
|
|
- .ql-editor {
|
|
|
- height: 400px !important;
|
|
|
- }
|
|
|
+.ql-editor {
|
|
|
+ height: 400px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
</style>
|
