9 changed files with 527 additions and 84 deletions
@ -1,8 +1,9 @@ |
|||||
NODE_ENV=development |
NODE_ENV=development |
||||
# VUE_APP_API_SERVER = http://118.190.150.119:41080/api |
# 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.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_API_SERVER = https://epmet-dev.elinkservice.cn/api |
||||
|
|
||||
VUE_APP_NODE_ENV=dev |
VUE_APP_NODE_ENV=dev |
||||
#项目根路径 |
#项目根路径 |
||||
VUE_APP_PUBLIC_PATH=epmet-oper |
VUE_APP_PUBLIC_PATH=epmet-oper |
||||
|
|||||
@ -0,0 +1,275 @@ |
|||||
|
<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="80"> |
||||
|
<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