|
|
|
@ -43,8 +43,8 @@ |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<!-- 新增/修改 --> |
|
|
|
<el-dialog :visible.sync="this.publishVersionUpgradeShow" |
|
|
|
v-if="this.publishVersionUpgradeShow" |
|
|
|
<el-dialog :visible.sync="publishVersionUpgradeShow" |
|
|
|
v-if="publishVersionUpgradeShow" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-press-escape="false" |
|
|
|
:title="this.operation === 'create' ? '发布新版本' : '修改'"> |
|
|
|
@ -55,8 +55,25 @@ |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item prop="richContent" label="内容"> |
|
|
|
<el-input v-model="createOrUpdateForm.richContent"> |
|
|
|
</el-input> |
|
|
|
<!-- <el-input v-model="createOrUpdateForm.richContent"> --> |
|
|
|
<!-- <Tinymce v-model="createOrUpdateForm.richContent" :height="300" placeholder="在这里输入文字" /> --> |
|
|
|
|
|
|
|
<!-- :customerId="customerId" --> |
|
|
|
<div id="J_quillEditor"></div> |
|
|
|
<!-- 自定义上传图片功能 (使用element upload组件) --> |
|
|
|
<el-upload |
|
|
|
:headers="$getElUploadHeaders()" |
|
|
|
:action="uploadUrl" |
|
|
|
:show-file-list="false" |
|
|
|
:before-upload="uploadBeforeUploadHandle" |
|
|
|
:on-success="uploadSuccessHandle" |
|
|
|
style="display: none" |
|
|
|
> |
|
|
|
<el-button ref="uploadBtn" type="primary" size="small">{{ |
|
|
|
$t('upload.button') |
|
|
|
}}</el-button> |
|
|
|
</el-upload> |
|
|
|
<!-- </el-input> --> |
|
|
|
</el-form-item> |
|
|
|
<el-button @click="onSubmitBtnClick" type="primary">提交</el-button> |
|
|
|
<el-button @click="onCancelBtnClick" type="primary">取消</el-button> |
|
|
|
@ -67,21 +84,38 @@ |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import Tinymce from '@c/tinymce/index.vue' |
|
|
|
|
|
|
|
import Cookies from 'js-cookie' |
|
|
|
import 'quill/dist/quill.snow.css' |
|
|
|
import Quill from 'quill' |
|
|
|
export default { |
|
|
|
|
|
|
|
components: { |
|
|
|
Tinymce |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
|
|
|
|
activated() { |
|
|
|
this.loadVersionUpgradeHistories(); |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
|
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
quillEditor: null, |
|
|
|
quillEditorToolbarOptions: [ |
|
|
|
['bold', 'italic', 'underline', 'strike'], |
|
|
|
['blockquote', 'code-block', 'image'], |
|
|
|
[{ 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: [] }], |
|
|
|
[{ align: [] }], |
|
|
|
['clean'] |
|
|
|
], |
|
|
|
uploadUrl: '', |
|
|
|
histories: [], |
|
|
|
queryForm: {}, |
|
|
|
createOrUpdateForm: { |
|
|
|
@ -100,11 +134,54 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 图片上传前 |
|
|
|
uploadBeforeUploadHandle(file) { |
|
|
|
if ( |
|
|
|
file.type !== 'image/jpg' && |
|
|
|
file.type !== 'image/jpeg' && |
|
|
|
file.type !== 'image/png' && |
|
|
|
file.type !== 'image/gif' |
|
|
|
) { |
|
|
|
this.$message.error(this.$t('upload.tip', { format: 'jpg、png、gif' })) |
|
|
|
return false |
|
|
|
} |
|
|
|
}, |
|
|
|
// 上传图片成功 |
|
|
|
uploadSuccessHandle(res, file, fileList) { |
|
|
|
if (res.code !== 0) { |
|
|
|
return this.$message.error(res.msg) |
|
|
|
} |
|
|
|
this.quillEditor.insertEmbed( |
|
|
|
this.quillEditor.getSelection().index, |
|
|
|
'image', |
|
|
|
res.data.url |
|
|
|
) |
|
|
|
}, |
|
|
|
// 加载富文本编辑器 |
|
|
|
initQuill() { |
|
|
|
console.log(document.getElementById('J_quillEditor')); |
|
|
|
this.quillEditor = new Quill('#J_quillEditor', { |
|
|
|
modules: { |
|
|
|
toolbar: this.quillEditorToolbarOptions |
|
|
|
}, |
|
|
|
theme: 'snow' |
|
|
|
}) |
|
|
|
// 自定义上传图片功能 (使用element upload组件) |
|
|
|
this.uploadUrl = `${ |
|
|
|
window.SITE_CONFIG['apiURL'] |
|
|
|
}/oss/file/upload?token=${Cookies.get('token')}` |
|
|
|
this.quillEditor.getModule('toolbar').addHandler('image', () => { |
|
|
|
this.$refs.uploadBtn.$el.click() |
|
|
|
}) |
|
|
|
// 监听内容变化，动态赋值 |
|
|
|
this.quillEditor.on('text-change', () => { |
|
|
|
this.createOrUpdateForm.richContent = this.quillEditor.root.innerHTML |
|
|
|
}) |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 加载版本更新历史 |
|
|
|
*/ |
|
|
|
loadVersionUpgradeHistories() { |
|
|
|
debugger |
|
|
|
this.$http.get(`/sys/sysVersionUpgrade/page?pageNo=${this.pageArgs.pageNo}&pageSize=${this.pageArgs.pageSize}`) |
|
|
|
.then(({data: result, status: httpStatus}) => { |
|
|
|
if (result.code === 0) { |
|
|
|
@ -118,24 +195,29 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 新增按钮点击 |
|
|
|
onAddBtnClick() { |
|
|
|
this.publishVersionUpgradeShow = true; |
|
|
|
this.operation = 'create'; |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.initQuill() |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 编辑按钮点击 |
|
|
|
onEditBtnClick(id) { |
|
|
|
async onEditBtnClick(id) { |
|
|
|
this.publishVersionUpgradeShow = true; |
|
|
|
this.operation = 'edit'; |
|
|
|
this.getDetail(id); |
|
|
|
await this.getDetail(id); |
|
|
|
await this.initQuill(); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
onCancelBtnClick() { |
|
|
|
this.$refs['createOrUpdateForm'].resetFields(); |
|
|
|
this.publishVersionUpgradeShow = false; |
|
|
|
this.operation = null; |
|
|
|
this.quillEditor = null; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
@ -183,7 +265,6 @@ export default { |
|
|
|
getDetail(id) { |
|
|
|
this.$http.get(`/sys/sysVersionUpgrade/detail/${id}`) |
|
|
|
.then(({status: httpStatus, data: epmetRst}) => { |
|
|
|
debugger |
|
|
|
if (httpStatus !== 200) { |
|
|
|
this.$message({ |
|
|
|
type: 'error', |
|
|
|
@ -196,6 +277,8 @@ export default { |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.createOrUpdateForm = epmetRst.data; |
|
|
|
this.quillEditor.root.innerHTML = this.createOrUpdateForm.richContent |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -204,8 +287,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="css"> |
|
|
|
.tinymce_view { |
|
|
|
height: 400px; |
|
|
|
overflow: auto; |
|
|
|
::v-deep .ql-toolbar{ |
|
|
|
margin-top: 36px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
