4 changed files with 298 additions and 3 deletions
@ -1,8 +1,9 @@ |
|||
NODE_ENV=development |
|||
# VUE_APP_API_SERVER = http://118.190.150.119:41080/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.144/api |
|||
VUE_APP_API_SERVER = http://192.168.1.144/api |
|||
# VUE_APP_API_SERVER = http://192.168.51.36:8080/api |
|||
# VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api |
|||
|
|||
VUE_APP_NODE_ENV=dev |
|||
#项目根路径 |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
|||
@ -0,0 +1,293 @@ |
|||
<template> |
|||
<div> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
|
|||
<!-- 按钮 --> |
|||
<div class="btn-group"> |
|||
<el-button type="primary" @click="onAddBtnClick">新增</el-button> |
|||
<el-button type="primary" @click="onEditBtnClick">修改</el-button> |
|||
</div> |
|||
|
|||
<!-- 数据列表 --> |
|||
<div> |
|||
<el-table :data="histories" border style="width: 100%"> |
|||
<el-table-column |
|||
prop="versionNo" |
|||
label="版本"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" :width="250"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" size="small" @click="onEditBtnClick(scope.row.id)">编辑</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</div> |
|||
|
|||
<!-- 分页条--> |
|||
<el-pagination |
|||
background |
|||
layout="prev, pager, next" |
|||
@current-change="onCurrentPageChanged" |
|||
:current-page="this.pageArgs.pageNo" |
|||
:page-size="this.pageArgs.pageSize" |
|||
:total="this.pageArgs.total"> |
|||
</el-pagination> |
|||
|
|||
<!-- <Tinymce |
|||
v-model="createOrUpdateForm.richContent" |
|||
:width="450" |
|||
:height="500" |
|||
/>--> |
|||
</el-card> |
|||
|
|||
<!-- 新增/修改 --> |
|||
<el-dialog :visible.sync="publishVersionUpgradeShow" |
|||
v-if="publishVersionUpgradeShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="this.operation === 'create' ? '发布新版本' : '修改'"> |
|||
<el-form :model="createOrUpdateForm" ref="createOrUpdateForm"> |
|||
<el-form-item prop="versionNo" label="版本"> |
|||
<el-input v-model="createOrUpdateForm.versionNo"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item prop="richContent" label="内容"> |
|||
<!-- <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> |
|||
</el-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
import 'quill/dist/quill.snow.css' |
|||
import Quill from 'quill' |
|||
export default { |
|||
|
|||
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: { |
|||
id: null, |
|||
versionNo: null, |
|||
richContent: null, |
|||
}, |
|||
publishVersionUpgradeShow: false, |
|||
operation: 'create', // create edit |
|||
pageArgs: { |
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
total: 0, |
|||
} |
|||
}; |
|||
}, |
|||
|
|||
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() { |
|||
this.$http.get(`/sys/sysVersionUpgrade/page?pageNo=${this.pageArgs.pageNo}&pageSize=${this.pageArgs.pageSize}`) |
|||
.then(({data: result, status: httpStatus}) => { |
|||
if (result.code === 0) { |
|||
this.histories = result.data.list |
|||
this.pageArgs.total = result.data.total |
|||
} else { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: result.msg |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 新增按钮点击 |
|||
onAddBtnClick() { |
|||
this.publishVersionUpgradeShow = true; |
|||
this.operation = 'create'; |
|||
this.$nextTick(()=>{ |
|||
this.initQuill() |
|||
}) |
|||
}, |
|||
|
|||
// 编辑按钮点击 |
|||
async onEditBtnClick(id) { |
|||
this.publishVersionUpgradeShow = true; |
|||
this.operation = 'edit'; |
|||
await this.getDetail(id); |
|||
await this.initQuill(); |
|||
|
|||
}, |
|||
|
|||
onCancelBtnClick() { |
|||
this.$refs['createOrUpdateForm'].resetFields(); |
|||
this.publishVersionUpgradeShow = false; |
|||
this.operation = null; |
|||
this.quillEditor = null; |
|||
}, |
|||
|
|||
/** |
|||
* 翻页 |
|||
*/ |
|||
onCurrentPageChanged(pageNo) { |
|||
this.pageArgs.pageNo = pageNo |
|||
this.loadVersionUpgradeHistories() |
|||
}, |
|||
|
|||
/** |
|||
* 提交 |
|||
*/ |
|||
onSubmitBtnClick() { |
|||
let url = this.operation === 'create' ? `/sys/sysVersionUpgrade/publish` : '/sys/sysVersionUpgrade/update'; |
|||
this.$http.post(url, this.$data.createOrUpdateForm) |
|||
.then(({data: rst, status: httpStatus}) => { |
|||
if (httpStatus !== 200) { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: '请求失败' |
|||
}) |
|||
} else if (rst.code !== 0) { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: rst.msg |
|||
}); |
|||
} else { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '提交成功' |
|||
}); |
|||
|
|||
this.$refs['createOrUpdateForm'].resetFields(); |
|||
this.publishVersionUpgradeShow = false; |
|||
this.loadVersionUpgradeHistories(); |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 加载详情 |
|||
* @param id |
|||
*/ |
|||
getDetail(id) { |
|||
this.$http.get(`/sys/sysVersionUpgrade/detail/${id}`) |
|||
.then(({status: httpStatus, data: epmetRst}) => { |
|||
if (httpStatus !== 200) { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: '请求失败' |
|||
}) |
|||
} else if (epmetRst.code != 0) { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: epmetRst.msg |
|||
}) |
|||
} else { |
|||
this.createOrUpdateForm = epmetRst.data; |
|||
this.quillEditor.root.innerHTML = this.createOrUpdateForm.richContent |
|||
|
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="css"> |
|||
::v-deep .ql-toolbar{ |
|||
margin-top: 36px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue