renren_security框架中使用檔案上傳和富文字編輯器的一個示例
阿新 • • 發佈:2020-12-04
pigeonauctiondetails-add-or-update.vue
<template> <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> <el-form-item label="工棚編碼" prop="popCoding"> <el-input v-model="dataForm.popCoding" placeholder="工棚編碼"></el-input> </el-form-item> <!--<el-form-item label="圖片" prop="url"> <el-input v-model="dataForm.url" placeholder="圖片"></el-input> </el-form-item>--> <el-form-item label="圖片" prop="url"> <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <!--<el-form-item label="拍賣活動id" prop="auctionId"> <el-input v-model="dataForm.auctionId" placeholder="拍賣活動id"></el-input> </el-form-item>--> <el-form-item label="拍賣活動" prop="auctionId"> <el-select v-model="dataForm.auctionId" placeholder="請選擇拍賣活動"> <el-option v-for="item in pigeonAuctionIdList" :key="item.id" :label="item.title" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="鴿子名稱" prop="pigeonName"> <el-input v-model="dataForm.pigeonName" placeholder="鴿子名稱"></el-input> </el-form-item> <el-form-item label="眼砂" prop="eyeSand"> <el-input v-model="dataForm.eyeSand" placeholder="眼砂"></el-input> </el-form-item> <el-form-item label="足環" prop="footRing"> <el-input v-model="dataForm.footRing" placeholder="足環"></el-input> </el-form-item> <el-form-item label="血統" prop="lineage"> <el-input v-model="dataForm.lineage" placeholder="血統"></el-input> </el-form-item> <!--<el-form-item label="性別" prop="sex"> <el-input v-model="dataForm.sex" placeholder="性別 1-雄鴿;2-雌鴿;9:未鑑別"></el-input> </el-form-item>--> <el-form-item label="性別" prop="sex"> <el-select v-model="dataForm.sex" placeholder="請選擇性別"> <el-option label="雄鴿" value="1"></el-option> <el-option label="雌鴿" value="2"></el-option> <el-option label="未鑑別" value="9"></el-option> </el-select> </el-form-item> <el-form-item label="年代" prop="years"> <el-input v-model="dataForm.years" placeholder="年代"></el-input> </el-form-item> <el-form-item label="羽色" prop="feather"> <el-input v-model="dataForm.feather" placeholder="羽色"></el-input> </el-form-item> <el-form-item label="作育者" prop="breeder"> <el-input v-model="dataForm.breeder" placeholder="作育者"></el-input> </el-form-item> <el-form-item prop="content" :label="$t('news.content')"> <!-- 富文字編輯器, 容器 --> <div id="J_quillEditor"></div> <!-- 自定義上傳圖片功能 (使用element upload元件) --> <el-upload :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-form-item> <!--<el-form-item label="拍賣狀態" prop="status"> <el-input v-model="dataForm.status" placeholder="拍賣狀態 0-未開始;1-進行中;3-已結束"></el-input> </el-form-item>--> <el-form-item label="拍賣狀態" prop="status"> <el-select v-model="dataForm.status" placeholder="拍賣狀態"> <el-option label="未開始" value="0"></el-option> <el-option label="進行中" value="1"></el-option> <el-option label="已結束" value="3"></el-option> </el-select> </el-form-item> </el-form> <template slot="footer"> <el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> </template> </el-dialog> </template> <script> import debounce from 'lodash/debounce' import Cookies from "js-cookie"; import Quill from "quill"; import 'quill/dist/quill.snow.css' export default { data () { return { visible: false, imageUrl: '', uploadUrl: '', 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'] ], dataForm: { id: '', popCoding: '', url: '', auctionId: '', pigeonName: '', eyeSand: '', footRing: '', lineage: '', sex: '', years: '', feather: '', breeder: '', content: '', status: '', createdBy: '', createdTime: '', updatedBy: '', updatedTime: '', }, pigeonAuctionIdList: [] } }, computed: { dataRule () { var validateContent = (rule, value, callback) => { if (this.quillEditor.getLength() <= 1) { return callback(new Error(this.$t('validate.required'))) } callback() } return { } } }, watch: { visible: function (nval) { if (!nval) { this.imageUrl = '' } } }, methods: { init () { // 查詢拍賣 this.$http.get('/auction/pigeonauction/selectAll').then(({ data: res }) => { if (res.code !== 0) { return this.$message.error(res.msg) } // console.log(res) this.pigeonAuctionIdList = res.data }).catch(() => {}) // 上傳圖片 this.uploadUrl = `${window.SITE_CONFIG.apiURL}/sys/oss/upload?token=${Cookies.get('token')}` this.dataForm.url = this.uploadUrl this.visible = true this.$nextTick(() => { // 富文字編輯器 if (this.quillEditor) { this.quillEditor.deleteText(0, this.quillEditor.getLength()) } else { this.quillEditorHandle() } this.$refs.dataForm.resetFields() if (this.dataForm.id) { this.getInfo() } }) }, // 富文字編輯器 quillEditorHandle () { this.quillEditor = new Quill('#J_quillEditor', { modules: { toolbar: this.quillEditorToolbarOptions }, theme: 'snow' }) // 自定義上傳圖片功能 (使用element upload元件) this.uploadUrl = `${window.SITE_CONFIG.apiURL}/sys/oss/upload?token=${Cookies.get('token')}` this.quillEditor.getModule('toolbar').addHandler('image', () => { this.$refs.uploadBtn.$el.click() }) // 監聽內容變化,動態賦值 this.quillEditor.on('text-change', () => { // 此處繫結資料!!!!! this.dataForm.content = this.quillEditor.root.innerHTML }) }, // 上傳圖片之前 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.src) }, handleAvatarSuccess (res) { this.dataForm.url = res.data.src this.imageUrl = res.data.src }, beforeAvatarUpload (file) { const isJPG = file.type === 'image/jpeg' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上傳頭像圖片只能是 JPG 格式!') } if (!isLt2M) { this.$message.error('上傳頭像圖片大小不能超過 2MB!') } return isJPG && isLt2M }, // 獲取資訊 getInfo () { this.$http.get('/auctiondetails/pigeonauctiondetails/' + this.dataForm.id).then(({ data: res }) => { if (res.code !== 0) { return this.$message.error(res.msg) } this.dataForm = res.data // 修改時回顯!!!!!! this.quillEditor.root.innerHTML = this.dataForm.content this.dataForm = { ...this.dataForm, ...res.data } }).catch(() => {}) }, // 表單提交 dataFormSubmitHandle: debounce(function () { this.$refs['dataForm'].validate((valid) => { if (!valid) { return false } this.$http[!this.dataForm.id ? 'post' : 'put']('/auctiondetails/pigeonauctiondetails/', this.dataForm).then(({ data: res }) => { if (res.code !== 0) { return this.$message.error(res.msg) } this.$message({ message: this.$t('prompt.success'), type: 'success', duration: 500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) }).catch(() => {}) }) }, 1000, { 'leading': true, 'trailing': false }) } } </script> <style> .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>
pigeonauctiondetails.vue
<template> <el-card shadow="never" class="aui-card--fill"> <div class="mod-auctiondetails__pigeonauctiondetails"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-select v-model="dataForm.auctionId" placeholder="請選擇拍賣活動" clearable> <el-option v-for="item in pigeonAuctionList" :key="item.id" :label="item.title" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item> <el-input v-model="dataForm.pigeonName" placeholder="請輸入鴿子名稱" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">{{ $t('query') }}</el-button> </el-form-item> <el-form-item> <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button> </el-form-item> <el-form-item> <el-button v-if="$hasPermission('auctiondetails:pigeonauctiondetails:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> </el-form-item> <el-form-item> <el-button v-if="$hasPermission('auctiondetails:pigeonauctiondetails:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> </el-form-item> </el-form> <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column prop="popCoding" label="工棚編碼" header-align="center" align="center"></el-table-column> // 顯示圖片 <el-table-column prop="url" label="圖片" header-align="center" align="center"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger="hover"> <img slot="reference" :src="scope.row.url" width="80" height="80" alt=""/> <img :src="scope.row.url" :alt="scope.row.url" style="max-height: 450px; max-width:450px"/> </el-popover> </template> </el-table-column> <!--<el-table-column prop="auctionId" label="拍賣活動id" header-align="center" align="center"></el-table-column>--> <el-table-column prop="auctionName" label="拍賣活動" header-align="center" align="center"></el-table-column> <el-table-column prop="pigeonName" label="鴿子名稱" header-align="center" align="center"></el-table-column> <el-table-column prop="eyeSand" label="眼砂" header-align="center" align="center"></el-table-column> <el-table-column prop="footRing" label="足環" header-align="center" align="center"></el-table-column> <el-table-column prop="lineage" label="血統" header-align="center" align="center"></el-table-column> <el-table-column prop="sex" label="性別" header-align="center" align="center" :formatter="showSex"></el-table-column> <el-table-column prop="years" label="年代" header-align="center" align="center"></el-table-column> <el-table-column prop="feather" label="羽色" header-align="center" align="center"></el-table-column> <el-table-column prop="breeder" label="作育者" header-align="center" align="center"></el-table-column> <el-table-column prop="content" label="內容" header-align="center" align="center"> <template slot-scope="scope"> <p v-html='scope.row.content'></p> </template> </el-table-column> <el-table-column prop="status" label="拍賣狀態" header-align="center" align="center" :formatter="showStatus"></el-table-column> <!--<el-table-column prop="createdBy" label="建立人" header-align="center" align="center"></el-table-column>--> <el-table-column prop="createdTime" label="建立時間" header-align="center" align="center"></el-table-column> <!--<el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>--> <el-table-column prop="updatedTime" label="更新時間" header-align="center" align="center"></el-table-column> <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> <template slot-scope="scope"> <el-button v-if="$hasPermission('auctiondetails:pigeonauctiondetails:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button v-if="$hasPermission('auctiondetails:pigeonauctiondetails:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> </template> </el-table-column> </el-table> <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination> <!-- 彈窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> </el-card> </template> <script> import mixinViewModule from '@/mixins/view-module' import AddOrUpdate from './pigeonauctiondetails-add-or-update' export default { mixins: [mixinViewModule], data () { return { mixinViewModuleOptions: { getDataListURL: '/auctiondetails/pigeonauctiondetails/page', getDataListIsPage: true, exportURL: '/auctiondetails/pigeonauctiondetails/export', deleteURL: '/auctiondetails/pigeonauctiondetails', deleteIsBatch: true }, dataForm: { }, pigeonAuctionList: [] } }, created() { this.init() }, methods: { init() { // 查詢拍賣 this.$http.get('/auction/pigeonauction/selectAll').then(({ data: res }) => { if (res.code !== 0) { return this.$message.error(res.msg) } // console.log(res) this.pigeonAuctionList = res.data }).catch(() => {}) }, showSex(row, column) { // console.log(row) if (row.sex === '1') { return '雄鴿' } else if (row.sex === '2') { return '雌鴿' } else if (row.sex === '9') { return '未鑑別' } }, showStatus(row, column) { // console.log(row) if (row.status === '0') { return '未開始' } else if (row.status === '1') { return '進行中' } else if (row.status === '3') { return '已結束' } } }, watch: { }, components: { AddOrUpdate } } </script>