邹畅
3 years ago
8 changed files with 1127 additions and 0 deletions
Split View
Diff Options
-
111src/components/Tinymce/components/EditorImage.vue
-
59src/components/Tinymce/dynamicLoadScript.js
-
247src/components/Tinymce/index.vue
-
7src/components/Tinymce/plugins.js
-
6src/components/Tinymce/toolbar.js
-
502src/views/nested/menu1/index.vue
-
81src/views/nested/menu2/index.vue
-
114src/views/user/index.vue
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<div class="upload-container"> |
|||
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true"> |
|||
upload |
|||
</el-button> |
|||
<el-dialog :visible.sync="dialogVisible"> |
|||
<el-upload |
|||
:multiple="true" |
|||
:file-list="fileList" |
|||
:show-file-list="true" |
|||
:on-remove="handleRemove" |
|||
:on-success="handleSuccess" |
|||
:before-upload="beforeUpload" |
|||
class="editor-slide-upload" |
|||
action="https://httpbin.org/post" |
|||
list-type="picture-card" |
|||
> |
|||
<el-button size="small" type="primary"> |
|||
Click upload |
|||
</el-button> |
|||
</el-upload> |
|||
<el-button @click="dialogVisible = false"> |
|||
Cancel |
|||
</el-button> |
|||
<el-button type="primary" @click="handleSubmit"> |
|||
Confirm |
|||
</el-button> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import { getToken } from 'api/qiniu' |
|||
|
|||
export default { |
|||
name: 'EditorSlideUpload', |
|||
props: { |
|||
color: { |
|||
type: String, |
|||
default: '#1890ff' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
listObj: {}, |
|||
fileList: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
checkAllSuccess() { |
|||
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) |
|||
}, |
|||
handleSubmit() { |
|||
const arr = Object.keys(this.listObj).map(v => this.listObj[v]) |
|||
if (!this.checkAllSuccess()) { |
|||
this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!') |
|||
return |
|||
} |
|||
this.$emit('successCBK', arr) |
|||
this.listObj = {} |
|||
this.fileList = [] |
|||
this.dialogVisible = false |
|||
}, |
|||
handleSuccess(response, file) { |
|||
const uid = file.uid |
|||
const objKeyArr = Object.keys(this.listObj) |
|||
for (let i = 0, len = objKeyArr.length; i < len; i++) { |
|||
if (this.listObj[objKeyArr[i]].uid === uid) { |
|||
this.listObj[objKeyArr[i]].url = response.files.file |
|||
this.listObj[objKeyArr[i]].hasSuccess = true |
|||
return |
|||
} |
|||
} |
|||
}, |
|||
handleRemove(file) { |
|||
const uid = file.uid |
|||
const objKeyArr = Object.keys(this.listObj) |
|||
for (let i = 0, len = objKeyArr.length; i < len; i++) { |
|||
if (this.listObj[objKeyArr[i]].uid === uid) { |
|||
delete this.listObj[objKeyArr[i]] |
|||
return |
|||
} |
|||
} |
|||
}, |
|||
beforeUpload(file) { |
|||
const _self = this |
|||
const _URL = window.URL || window.webkitURL |
|||
const fileName = file.uid |
|||
this.listObj[fileName] = {} |
|||
return new Promise((resolve, reject) => { |
|||
const img = new Image() |
|||
img.src = _URL.createObjectURL(file) |
|||
img.onload = function() { |
|||
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height } |
|||
} |
|||
resolve(true) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.editor-slide-upload { |
|||
margin-bottom: 20px; |
|||
::v-deep .el-upload--picture-card { |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
let callbacks = [] |
|||
|
|||
function loadedTinymce() { |
|||
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
|
|||
// check is successfully downloaded script
|
|||
return window.tinymce |
|||
} |
|||
|
|||
const dynamicLoadScript = (src, callback) => { |
|||
const existingScript = document.getElementById(src) |
|||
const cb = callback || function() {} |
|||
|
|||
if (!existingScript) { |
|||
const script = document.createElement('script') |
|||
script.src = src // src url for the third-party library being loaded.
|
|||
script.id = src |
|||
document.body.appendChild(script) |
|||
callbacks.push(cb) |
|||
const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd |
|||
onEnd(script) |
|||
} |
|||
|
|||
if (existingScript && cb) { |
|||
if (loadedTinymce()) { |
|||
cb(null, existingScript) |
|||
} else { |
|||
callbacks.push(cb) |
|||
} |
|||
} |
|||
|
|||
function stdOnEnd(script) { |
|||
script.onload = function() { |
|||
// this.onload = null here is necessary
|
|||
// because even IE9 works not like others
|
|||
this.onerror = this.onload = null |
|||
for (const cb of callbacks) { |
|||
cb(null, script) |
|||
} |
|||
callbacks = null |
|||
} |
|||
script.onerror = function() { |
|||
this.onerror = this.onload = null |
|||
cb(new Error('Failed to load ' + src), script) |
|||
} |
|||
} |
|||
|
|||
function ieOnEnd(script) { |
|||
script.onreadystatechange = function() { |
|||
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return |
|||
this.onreadystatechange = null |
|||
for (const cb of callbacks) { |
|||
cb(null, script) // there is no way to catch loading errors in IE8
|
|||
} |
|||
callbacks = null |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default dynamicLoadScript |
|||
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}"> |
|||
<textarea :id="tinymceId" class="tinymce-textarea" /> |
|||
<div class="editor-custom-btn-container"> |
|||
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* docs: |
|||
* https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce |
|||
*/ |
|||
import editorImage from './components/EditorImage' |
|||
import plugins from './plugins' |
|||
import toolbar from './toolbar' |
|||
import load from './dynamicLoadScript' |
|||
|
|||
// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one |
|||
const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' |
|||
|
|||
export default { |
|||
name: 'Tinymce', |
|||
components: { editorImage }, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: function() { |
|||
return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '') |
|||
} |
|||
}, |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
toolbar: { |
|||
type: Array, |
|||
required: false, |
|||
default() { |
|||
return [] |
|||
} |
|||
}, |
|||
menubar: { |
|||
type: String, |
|||
default: 'file edit insert view format table' |
|||
}, |
|||
height: { |
|||
type: [Number, String], |
|||
required: false, |
|||
default: 360 |
|||
}, |
|||
width: { |
|||
type: [Number, String], |
|||
required: false, |
|||
default: 'auto' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
hasChange: false, |
|||
hasInit: false, |
|||
tinymceId: this.id, |
|||
fullscreen: false, |
|||
languageTypeList: { |
|||
'en': 'en', |
|||
'zh': 'zh_CN', |
|||
'es': 'es_MX', |
|||
'ja': 'ja' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
containerWidth() { |
|||
const width = this.width |
|||
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'` |
|||
return `${width}px` |
|||
} |
|||
return width |
|||
} |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
if (!this.hasChange && this.hasInit) { |
|||
this.$nextTick(() => |
|||
window.tinymce.get(this.tinymceId).setContent(val || '')) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
activated() { |
|||
if (window.tinymce) { |
|||
this.initTinymce() |
|||
} |
|||
}, |
|||
deactivated() { |
|||
this.destroyTinymce() |
|||
}, |
|||
destroyed() { |
|||
this.destroyTinymce() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
// dynamic load tinymce from cdn |
|||
load(tinymceCDN, (err) => { |
|||
if (err) { |
|||
this.$message.error(err.message) |
|||
return |
|||
} |
|||
this.initTinymce() |
|||
}) |
|||
}, |
|||
initTinymce() { |
|||
const _this = this |
|||
window.tinymce.init({ |
|||
selector: `#${this.tinymceId}`, |
|||
language: this.languageTypeList['en'], |
|||
height: this.height, |
|||
body_class: 'panel-body ', |
|||
object_resizing: false, |
|||
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, |
|||
menubar: this.menubar, |
|||
plugins: plugins, |
|||
end_container_on_empty_block: true, |
|||
powerpaste_word_import: 'clean', |
|||
code_dialog_height: 450, |
|||
code_dialog_width: 1000, |
|||
advlist_bullet_styles: 'square', |
|||
advlist_number_styles: 'default', |
|||
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], |
|||
default_link_target: '_blank', |
|||
link_title: false, |
|||
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin |
|||
init_instance_callback: editor => { |
|||
if (_this.value) { |
|||
editor.setContent(_this.value) |
|||
} |
|||
_this.hasInit = true |
|||
editor.on('NodeChange Change KeyUp SetContent', () => { |
|||
this.hasChange = true |
|||
this.$emit('input', editor.getContent()) |
|||
}) |
|||
}, |
|||
setup(editor) { |
|||
editor.on('FullscreenStateChanged', (e) => { |
|||
_this.fullscreen = e.state |
|||
}) |
|||
}, |
|||
// it will try to keep these URLs intact |
|||
// https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/ |
|||
// https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions |
|||
convert_urls: false |
|||
// 整合七牛上传 |
|||
// images_dataimg_filter(img) { |
|||
// setTimeout(() => { |
|||
// const $image = $(img); |
|||
// $image.removeAttr('width'); |
|||
// $image.removeAttr('height'); |
|||
// if ($image[0].height && $image[0].width) { |
|||
// $image.attr('data-wscntype', 'image'); |
|||
// $image.attr('data-wscnh', $image[0].height); |
|||
// $image.attr('data-wscnw', $image[0].width); |
|||
// $image.addClass('wscnph'); |
|||
// } |
|||
// }, 0); |
|||
// return img |
|||
// }, |
|||
// images_upload_handler(blobInfo, success, failure, progress) { |
|||
// progress(0); |
|||
// const token = _this.$store.getters.token; |
|||
// getToken(token).then(response => { |
|||
// const url = response.data.qiniu_url; |
|||
// const formData = new FormData(); |
|||
// formData.append('token', response.data.qiniu_token); |
|||
// formData.append('key', response.data.qiniu_key); |
|||
// formData.append('file', blobInfo.blob(), url); |
|||
// upload(formData).then(() => { |
|||
// success(url); |
|||
// progress(100); |
|||
// }) |
|||
// }).catch(err => { |
|||
// failure('出现未知问题，刷新页面，或者联系程序员') |
|||
// console.log(err); |
|||
// }); |
|||
// }, |
|||
}) |
|||
}, |
|||
destroyTinymce() { |
|||
const tinymce = window.tinymce.get(this.tinymceId) |
|||
if (this.fullscreen) { |
|||
tinymce.execCommand('mceFullScreen') |
|||
} |
|||
|
|||
if (tinymce) { |
|||
tinymce.destroy() |
|||
} |
|||
}, |
|||
setContent(value) { |
|||
window.tinymce.get(this.tinymceId).setContent(value) |
|||
}, |
|||
getContent() { |
|||
window.tinymce.get(this.tinymceId).getContent() |
|||
}, |
|||
imageSuccessCBK(arr) { |
|||
arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tinymce-container { |
|||
position: relative; |
|||
line-height: normal; |
|||
} |
|||
|
|||
.tinymce-container { |
|||
::v-deep { |
|||
.mce-fullscreen { |
|||
z-index: 10000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tinymce-textarea { |
|||
visibility: hidden; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.editor-custom-btn-container { |
|||
position: absolute; |
|||
right: 4px; |
|||
top: 4px; |
|||
/*z-index: 2005;*/ |
|||
} |
|||
|
|||
.fullscreen .editor-custom-btn-container { |
|||
z-index: 10000; |
|||
position: fixed; |
|||
} |
|||
|
|||
.editor-upload-btn { |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,7 @@ |
|||
// Any plugins you want to use has to be imported
|
|||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
|||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
|||
|
|||
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'] |
|||
|
|||
export default plugins |
|||
@ -0,0 +1,6 @@ |
|||
// Here is a list of the toolbar
|
|||
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
|||
|
|||
const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'] |
|||
|
|||
export default toolbar |
|||
@ -0,0 +1,502 @@ |
|||
<template> |
|||
<div style="padding:10px;"> |
|||
<!-- 搜索栏 --> |
|||
<div class="search"> |
|||
<el-form :inline="true" :model="searchForm"> |
|||
<el-form-item label="剧本标题:" style="margin-right:50px;"> |
|||
<el-input |
|||
v-model="searchForm.date" |
|||
style="height:30px;" |
|||
placeholder="请输入剧本标题" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="工作室:" style="margin-right:50px;"> |
|||
<el-input |
|||
v-model="searchForm.name" |
|||
style="height:30px;" |
|||
placeholder="请输入工作室" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="标签:" style="margin-right:50px;"> |
|||
<el-input |
|||
v-model="searchForm.label" |
|||
style="height:30px;" |
|||
placeholder="请输入标签" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="search-button"> |
|||
<el-button |
|||
size="medium" |
|||
type="primary" |
|||
style="height:36px;width:100px;" |
|||
>搜索</el-button> |
|||
<el-button |
|||
size="medium" |
|||
style="margin-left:20px;height:36px;width:100px;" |
|||
>重置</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="add-button"> |
|||
<el-button |
|||
size="medium" |
|||
type="primary" |
|||
style="height:36px;width:100px;" |
|||
@click="handleAdd" |
|||
>新建</el-button> |
|||
</div> |
|||
<!-- 列表 --> |
|||
<div class="content"> |
|||
<el-table ref="singleTable" :data="tableData" border style="width: 100%"> |
|||
<el-table-column align="center" type="index" label="序号" width="50" /> |
|||
<el-table-column align="center" property="date" label="剧本标题" /> |
|||
<el-table-column align="center" property="name" label="工作室" /> |
|||
<el-table-column align="center" property="label" label="标签" /> |
|||
<el-table-column align="center" property="time" label="创建时间" /> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="handleView(scope.row)" |
|||
>查看</el-button> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="handleEdit(scope.row)" |
|||
>编辑</el-button> |
|||
<el-button type="text" size="mini">Tips维护</el-button> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="hanDel(scope.row)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 新增表单 --> |
|||
<el-dialog :title="dialog.title" :visible.sync="dialog.Visible" width="60%"> |
|||
<el-form |
|||
ref="ruleForm" |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
:inline="true" |
|||
label-width="100px" |
|||
class="demo-ruleForm" |
|||
> |
|||
<h3 class="form-title">基本信息</h3> |
|||
<el-form-item label="剧本标题:" prop="name" style="width:45%"> |
|||
<el-input v-model="ruleForm.name" style="width:300px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="工作室:" prop="name" style="width:45%"> |
|||
<el-input v-model="ruleForm.name" style="width:300px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="标签:" prop="name" style="width:100%"> |
|||
<el-input v-model="ruleForm.name" style="width:300px;" /> |
|||
</el-form-item> |
|||
<h3 class="form-title">剧本图片</h3> |
|||
<el-form-item label="封面"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
action="https://jsonplaceholder.typicode.com/posts/" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="imageUrl" :src="ruleForm.imageUrl" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item label="其它图片" style="width:100%"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
action="https://jsonplaceholder.typicode.com/posts/" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="imageUrl" :src="ruleForm.imageUrl" class="avatar"> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<h3 class="form-title">剧本简介</h3> |
|||
<el-form-item label="简介"> |
|||
<!-- <el-input |
|||
v-model="ruleForm.desc" |
|||
style="width:500px" |
|||
rows="10" |
|||
type="textarea" |
|||
/> --> |
|||
<Tinymce ref="editor" v-model="ruleForm.desc" :height="400" /> |
|||
</el-form-item> |
|||
<h3 class="form-title">开本流程</h3> |
|||
<el-table |
|||
:header-cell-style="{background:'#eee',color:'#606266'}" |
|||
:data="ruleForm.tableData" |
|||
border |
|||
style="width: 90%;margin-left:30px;" |
|||
> |
|||
<el-table-column |
|||
align="center" |
|||
type="index" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column align="center" property="date" label="流程标题"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.tableData[scope.$index].date" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="name" label="流程编号"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.tableData[scope.$index].name" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="label" label="简介"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.tableData[scope.$index].label" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="time" label="排序"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.tableData[scope.$index].time" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="Del(scope.$index)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="margin-top:15px;"> |
|||
<el-button |
|||
type="success" |
|||
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99" |
|||
@click="handleAddK" |
|||
>新建</el-button> |
|||
</div> |
|||
<h3 class="form-title">剧本资源</h3> |
|||
<el-form-item label="图片" prop="imgUrls" style="width: 100%;"> |
|||
<el-radio-group v-model="ruleForm.resource" @change="changeImg"> |
|||
<el-radio label="1">本地上传</el-radio> |
|||
<el-radio label="2">网易云地址</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="active == 2" style="width: 100%;" class="urlTable"> |
|||
<el-table |
|||
:data="ruleForm.data" |
|||
border |
|||
style="width: 80%;margin-left:100px;" |
|||
> |
|||
<el-table-column |
|||
align="center" |
|||
type="index" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column align="center" property="date" label="资源标题"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].date" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="name" label="资源URL"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].name" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="Del(scope.$index)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="margin-top:15px;"> |
|||
<el-button |
|||
type="success" |
|||
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99" |
|||
@click="handleAddUrl" |
|||
>新建</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="音频" prop="imgUrls" style="width: 100%;"> |
|||
<el-radio-group v-model="ruleForm.resource" @change="changeImg"> |
|||
<el-radio label="1">本地上传</el-radio> |
|||
<el-radio label="2">网易云地址</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="active == 2" style="width: 100%;" class="urlTable"> |
|||
<el-table |
|||
:data="ruleForm.data" |
|||
border |
|||
style="width: 80%;margin-left:100px;" |
|||
> |
|||
<el-table-column |
|||
align="center" |
|||
type="index" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column align="center" property="date" label="资源标题"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].date" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="name" label="资源URL"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].name" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="Del(scope.$index)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="margin-top:15px;"> |
|||
<el-button |
|||
type="success" |
|||
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99" |
|||
@click="handleAddUrl" |
|||
>新建</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="视频" prop="imgUrls" style="width: 100%;"> |
|||
<el-radio-group v-model="ruleForm.resource" @change="changeImg"> |
|||
<el-radio label="1">本地上传</el-radio> |
|||
<el-radio label="2">网易云地址</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="active == 2" style="width: 100%;" class="urlTable"> |
|||
<el-table |
|||
:data="ruleForm.data" |
|||
border |
|||
style="width: 80%;margin-left:100px;" |
|||
> |
|||
<el-table-column |
|||
align="center" |
|||
type="index" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column align="center" property="date" label="资源标题"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].date" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" property="name" label="资源URL"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="ruleForm.data[scope.$index].name" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="Del(scope.$index)" |
|||
>删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="margin-top:15px;"> |
|||
<el-button |
|||
type="success" |
|||
style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99" |
|||
@click="handleAddUrl" |
|||
>新建</el-button> |
|||
</div> |
|||
</el-form-item> |
|||
<!-- <el-form-item> |
|||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> |
|||
<el-button @click="resetForm('ruleForm')">重置</el-button> |
|||
</el-form-item> --> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialog.Visible = false">取 消</el-button> |
|||
<el-button |
|||
type="primary" |
|||
@click="dialog.Visible = false" |
|||
>确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Tinymce from '@/components/Tinymce' |
|||
export default { |
|||
components: { Tinymce }, |
|||
data() { |
|||
return { |
|||
searchForm: {}, |
|||
tableData: [ |
|||
{ |
|||
date: '标题1', |
|||
name: '工作室1', |
|||
label: '剧情，神秘', |
|||
time: '2021-09-01' |
|||
}, |
|||
{ |
|||
date: '标题2', |
|||
name: '工作室2', |
|||
label: '剧情，神秘', |
|||
time: '2021-09-01' |
|||
}, |
|||
{ |
|||
date: '标题3', |
|||
name: '工作室3', |
|||
label: '剧情，神秘', |
|||
time: '2021-09-01' |
|||
}, |
|||
{ |
|||
date: '标题4', |
|||
name: '工作室4', |
|||
label: '剧情，神秘', |
|||
time: '2021-09-01' |
|||
} |
|||
], |
|||
dialog: { |
|||
title: '新增剧本', |
|||
Visible: false |
|||
}, |
|||
ruleForm: { |
|||
resource: '1', |
|||
tableData: [], |
|||
imgUrls: [], |
|||
data: [] |
|||
}, |
|||
dialogVisible: false, |
|||
active: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
// 新增 |
|||
handleAdd() { |
|||
this.dialog.Visible = true |
|||
this.dialog.title = '新增剧本' |
|||
}, |
|||
// 编辑 |
|||
handleEdit(row) { |
|||
console.log(row) |
|||
this.dialog.Visible = true |
|||
this.dialog.title = '编辑剧本' |
|||
this.ruleForm = row |
|||
}, |
|||
// 查看 |
|||
handleView(row) { |
|||
console.log(row) |
|||
}, |
|||
// 删除 |
|||
hanDle(row) { |
|||
console.log(row) |
|||
}, |
|||
// 图片 |
|||
handleAvatarSuccess(res, file) { |
|||
this.ruleForm.imageUrl = URL.createObjectURL(file.raw) |
|||
}, |
|||
beforeAvatarUpload(file) { |
|||
const isJPG = file.type |
|||
const isLt2M = file.size / 1024 / 1024 < 2 |
|||
if (!isLt2M) { |
|||
this.$message.error('上传头像图片大小不能超过 2MB!') |
|||
} |
|||
return isJPG && isLt2M |
|||
}, |
|||
// 开本流程新增 |
|||
handleAddK() { |
|||
this.ruleForm.tableData.push({ |
|||
date: '', |
|||
name: '', |
|||
label: '', |
|||
time: '' |
|||
}) |
|||
}, |
|||
// 开本流程删除 |
|||
Del(index) { |
|||
this.ruleForm.tableData.splice(index, 1) |
|||
}, |
|||
// 图片预览 |
|||
dialogimg(e) { |
|||
this.dialogVisible = true |
|||
this.dialogImageUrl = this.ruleForm.imgUrls[e] |
|||
}, |
|||
// 图片删除 |
|||
deldialogimg(index) { |
|||
this.ruleForm.imgUrls.splice(index, 1) |
|||
var img = this.ruleForm.imgUrls[index] |
|||
// proUpdate({ wjUrl: img }).then((res) => { |
|||
// if (res.code == 200) { |
|||
// that.back(); |
|||
// } |
|||
// }); |
|||
}, |
|||
changeImg(val) { |
|||
this.active = val |
|||
}, |
|||
handleAddUrl() { |
|||
this.ruleForm.data.push({ |
|||
date: '', |
|||
name: '' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.content { |
|||
background: #fff; |
|||
margin-top: 15px; |
|||
} |
|||
.add-button { |
|||
margin-top: 15px; |
|||
} |
|||
/deep/ .el-input__inner { |
|||
height: 30px; |
|||
} |
|||
.search-button { |
|||
display: flex; |
|||
} |
|||
.form-title { |
|||
margin-left: 30px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #000; |
|||
} |
|||
/deep/ .avatar-uploader .el-upload { |
|||
border: 1px dashed #000; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
/deep/ .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; |
|||
} |
|||
.urlTable /deep/ .el-form-item__content{ |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<!-- 搜索栏 --> |
|||
<div class="search"> |
|||
<el-form :inline="true" :model="searchForm"> |
|||
<el-form-item label="剧本标题:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.date" placeholder="请输入剧本标题" /> |
|||
</el-form-item> |
|||
<el-form-item label="流程标题:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.name" placeholder="请输入工作室" /> |
|||
</el-form-item> |
|||
<el-form-item label="Tips内容:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.label" placeholder="请输入标签" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="search-button"> |
|||
<el-button size="medium" type="primary" style="height:36px;width:100px;">搜索</el-button> |
|||
<el-button size="medium" style="margin-left:20px;height:36px;width:100px;">重置</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="add-button"> |
|||
<el-button size="medium" type="primary" style="height:36px;width:100px;" @click="handleAdd">新建</el-button> |
|||
</div> |
|||
<!-- 列表 --> |
|||
<div class="content"> |
|||
<el-table ref="singleTable" :data="tableData" border style="width: 100%"> |
|||
<el-table-column align="center" type="index" label="序号" width="50" /> |
|||
<el-table-column align="center" property="date" label="剧本标题" /> |
|||
<el-table-column align="center" property="name" label="流程名称" /> |
|||
<el-table-column align="center" property="label" label="Tips内容" /> |
|||
<el-table-column align="center" property="time" label="点赞数量" /> |
|||
<el-table-column align="center" property="time" label="创建时间" /> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="mini">查看</el-button> |
|||
<el-button type="text" size="mini">编辑</el-button> |
|||
<el-button type="text" size="mini">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 新增表单 --> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchForm: {}, |
|||
tableData: [ |
|||
{ |
|||
date: '标题1', |
|||
name: '第一幕', |
|||
label: '剧情，神秘', |
|||
count: '5', |
|||
creator: '管理员', |
|||
time: '2021-09-01' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
// 新增 |
|||
handleAdd() { |
|||
alert(1111) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.content { |
|||
background: #fff; |
|||
margin-top:15px; |
|||
} |
|||
.add-button{ |
|||
margin-top:15px; |
|||
} |
|||
.search-button { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<div style="padding:30px;"> |
|||
<!-- 搜索栏 --> |
|||
<div class="search"> |
|||
<el-form :inline="true" :model="searchForm"> |
|||
<el-form-item label="用户昵称:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.date" placeholder="请输入剧本标题" /> |
|||
</el-form-item> |
|||
<el-form-item label="用户编号:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.name" placeholder="请输入工作室" /> |
|||
</el-form-item> |
|||
<el-form-item label="联系电话:" style="margin-right:50px;"> |
|||
<el-input v-model="searchForm.label" placeholder="请输入标签" /> |
|||
</el-form-item> |
|||
<el-form-item label="注册时间:" style="margin-right:50px;"> |
|||
<el-date-picker |
|||
v-model="searchForm.time" |
|||
type="daterange" |
|||
align="right" |
|||
unlink-panels |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
:picker-options="pickerOptions" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="search-button"> |
|||
<el-button size="medium" type="primary" style="height:36px;width:100px;">搜索</el-button> |
|||
<el-button size="medium" style="margin-left:20px;height:36px;width:100px;">重置</el-button> |
|||
</div> |
|||
</div> |
|||
<!-- 列表 --> |
|||
<div class="content"> |
|||
<el-table ref="singleTable" :data="tableData" border style="width: 100%"> |
|||
<el-table-column align="center" type="index" label="序号" width="50" /> |
|||
<el-table-column align="center" property="date" label="昵称" /> |
|||
<el-table-column align="center" property="name" label="编号" /> |
|||
<el-table-column align="center" property="label" label="联系电话" /> |
|||
<el-table-column align="center" property="time" label="注册时间" /> |
|||
<el-table-column align="center" property="level" label="用户等级" /> |
|||
<el-table-column align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="mini" @click="handleEdit(scope.row)">修改等级</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 新增表单 --> |
|||
<el-dialog title="编辑用户" :visible.sync="dialog.Visible"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="客户昵称"> |
|||
<!-- <el-input v-model="form.date" autocomplete="off" /> --> |
|||
<span>{{ form.date }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="客户等级"> |
|||
<!-- <el-input v-model="form.level" autocomplete="off" /> --> |
|||
<span>{{ form.level }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="修改为"> |
|||
<el-select v-model="form.region" placeholder="请选择客户等级"> |
|||
<el-option label="区域一" value="shanghai" /> |
|||
<el-option label="区域二" value="beijing" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialog.Visible = false">取 消</el-button> |
|||
<el-button type="primary" @click="dialog.Visible = false">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchForm: {}, |
|||
tableData: [ |
|||
{ |
|||
date: '玩家1', |
|||
name: 'A001', |
|||
label: '13333333333', |
|||
time: '2021-09-01 12:00:00', |
|||
level: '一级用户' |
|||
} |
|||
], |
|||
form: {}, |
|||
dialog: { |
|||
Visible: false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 编辑用户等级 |
|||
handleEdit(row) { |
|||
this.dialog.Visible = true |
|||
this.form = row |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.content { |
|||
background: #fff; |
|||
margin-top:15px; |
|||
} |
|||
.add-button{ |
|||
margin-top:15px; |
|||
} |
|||
.search-button { |
|||
display: flex; |
|||
} |
|||
</style> |
|||