Browse Source

edit img

master
chutingting 1 year ago
parent
commit
f60b33dae9
13 changed files with 280 additions and 238 deletions
  1. +2
    -2
      src/api/car.js
  2. +2
    -2
      src/api/common.js
  3. +230
    -208
      src/components/ueditor/index.vue
  4. +4
    -4
      src/utils/request.js
  5. +6
    -6
      src/views/aigc/introduce.vue
  6. +27
    -8
      src/views/car/video.vue
  7. +2
    -2
      src/views/homePage/carHot.vue
  8. +2
    -1
      src/views/homePage/link.vue
  9. +1
    -1
      src/views/homePage/yyzHot.vue
  10. +1
    -1
      src/views/news/car.vue
  11. +1
    -1
      src/views/news/hot.vue
  12. +1
    -1
      src/views/news/yyz/depth.vue
  13. +1
    -1
      src/views/news/yyz/info.vue

+ 2
- 2
src/api/car.js View File

@@ -15,9 +15,9 @@ export function saveLunbo(data) {
})
}

export function delLunbo(id) {
export function deleteVideo(id) {
return request({
url: '/index/delLunbo',
url: '/index/deleteVideo',
method: 'post',
data: { id }
})


+ 2
- 2
src/api/common.js View File

@@ -10,8 +10,8 @@ export function upload(data) {
data: formData,
timeout: 1000 * 60 * 2, // 超时时间两分钟
params: {
width: data.width || 200,
hight: data.height || 200
width: data.width === 'auto' ? undefined : data.width || 200,
hight: data.height === 'auto' ? undefined : data.height || 200
}
})
}


+ 230
- 208
src/components/ueditor/index.vue View File

@@ -1,208 +1,230 @@
<template>
<div>
<VueUeditorWrap
class="ueditor"
@beforeInit="addCustomButtom"
:id="setSessionid()"
@ready="readyCustom"
v-model="content"
:config="config"
></VueUeditorWrap>
</div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
components: {
VueUeditorWrap
},
props: {
btnShow: {
type: Boolean,
default: false
},
comeContent: {
type: String,
default: ''
},
zIndex: {
type: Number,
default: 999
},
isDisabled: {
type: Number,
default: 0
}
},
data() {
return {
content: '',
editor: null,
config: {
toolbars: [
[
'source', // 源代码
'undo', // 撤销
'redo', // 重做
'bold', // 加粗
'indent', // 首行缩进
// 'snapscreen', //截 图
'italic', // 斜体
'underline', // 下划线
'strikethrough', // 删除线
'subscript', // 下标
'fontborder', // 字符边框
'superscript', // 上标
'formatmatch', // 格式刷
'blockquote', // 引用
// 'pasteplain', // 纯文本粘贴模式
'selectall', // 全选
// 'preview', // 预览
'horizontal', // 分隔线
'removeformat', // 清除格式
// 'time', // 时间
// 'date', // 日期
'unlink', // 取消链接
/* 'insertrow', // 前插入行
'insertcol', // 前插入列
'mergeright', // 右合并单元格
'mergedown', // 下合并单元格
'deleterow', // 删除行
'deletecol', // 删除列
'splittorows', // 拆分成行
'splittocols', // 拆分成列
'splittocells', // 完全拆分单元格
'deletecaption', // 删除表格标题
'inserttitle', // 插入标题
'mergecells', // 合并多个单元格
'deletetable', // 删除表格
'cleardoc', // 清空文档
'insertparagraphbeforetable', //" 表格前插入行"
'insertcode', // 代码语言 */
'fontfamily', // 字体
'fontsize', // 字号
'paragraph', // 段落格式
// 'edittable', // 表格属性
// 'edittd', // 单元格属性
'link', // 超链接
// 'emotion', // 表情
'spechars', // 特殊字符
// 'searchreplace', // 查询替换
'justifyleft', // 居左对齐
'justifyright', // 居右对齐
'justifycenter', // 居中对齐
'justifyjustify', // 两端对齐
'forecolor', // 字体颜色
'backcolor', // 背景色
'lineheight' // 行间距
/* 'insertorderedlist', // 有序列表
'insertunorderedlist', // 无序列表
'directionalityltr', // 从左向右输入
'directionalityrtl', // 从右向左输入
'rowspacingtop', // 段前距
'rowspacingbottom', // 段后距
'pagebreak', // 分页
'imagenone', // 默认
'imageleft', // 左浮动
'imageright', // 右浮动
'imagecenter', // 居中
'wordimage', // 图片转存
'edittip ', // 编辑提示
'customstyle', // 自定义标题
'touppercase', // 字母大写
'tolowercase', // 字母小写
'inserttable' // 插入表格 */
]
],
zIndex: this.zIndex,
autoHeightEnabled: false, // 编译器不自动被内容撑高
autoFloatEnabled: false,
initialFrameHeight: 300, // 初始容器高度
initialFrameWith: '100%',
postParams: this.postParams,
// serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址
UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径
}
}
},
watch: {
content(val) {
this.$emit('editorChange', val)
},
comeContent: {
handler(newVal, oldVal) {
this.content = newVal
},
immediate: true,
deep: true
}
},
mounted() {

},
methods: {
readyCustom(editor) {
this.editor = editor
console.log(this.isDisabled)
if (this.isDisabled) this.editor.options.readonly = true
},
addCustomButtom(editorId) {
this.editorId = editorId
this.divID = 'key' + editorId
var _ = this
window.UE.registerUI(
'test-button',
function(editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
_.editorHandler = editor
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '上传图片',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
// cssRules: `background-image: url("${UploadImg}") !important;background-size: cover;`,
// 点击时执行的命令
onclick: function(res) {
// 点击新图标时,触发到点击input按钮的事件
editor.execCommand(uiName)
document.getElementById('key' + editorId).click()
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function() { })

// 因为你是添加 button,所以需要返回这个 button
return btn
}
// 0 /* 指定添加到工具栏上的哪个位置,默认时追加到最后 */
// editorId /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */
)
},
setSessionid(num) {
var len = num || 32
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = chars.length
var pwd = ''
for (var i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
}
}
</script>

<style lang="scss" scoped>
::v-deep.ueditor{
.edui-editor{
width: 100% !important;
}
}
</style>
<template>
<div>
<VueUeditorWrap
class="ueditor"
@beforeInit="addCustomButtom"
:id="setSessionid()"
@ready="readyCustom"
v-model="content"
:config="config"
></VueUeditorWrap>
<el-dialog v-if="uploadDiolagVisible" :visible.sync="uploadDiolagVisible" append-to-body title="图片上传">
<el-form>
<el-form-item label="上传图片">
<uploadFile :url.sync="imgUrl" type="image" width="auto" height="auto"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveImg()">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import uploadFile from '@/components/uploadFile'
export default {
components: {
VueUeditorWrap,
uploadFile
},
props: {
btnShow: {
type: Boolean,
default: false
},
comeContent: {
type: String,
default: ''
},
zIndex: {
type: Number,
default: 999
},
isDisabled: {
type: Number,
default: 0
}
},
data() {
return {
content: '',
editor: null,
config: {
toolbars: [
[
'source', // 源代码
'undo', // 撤销
'redo', // 重做
'bold', // 加粗
'indent', // 首行缩进
// 'snapscreen', //截 图
'italic', // 斜体
'underline', // 下划线
'strikethrough', // 删除线
'subscript', // 下标
'fontborder', // 字符边框
'superscript', // 上标
'formatmatch', // 格式刷
'blockquote', // 引用
// 'pasteplain', // 纯文本粘贴模式
'selectall', // 全选
// 'preview', // 预览
'horizontal', // 分隔线
'removeformat', // 清除格式
// 'time', // 时间
// 'date', // 日期
'unlink', // 取消链接
/* 'insertrow', // 前插入行
'insertcol', // 前插入列
'mergeright', // 右合并单元格
'mergedown', // 下合并单元格
'deleterow', // 删除行
'deletecol', // 删除列
'splittorows', // 拆分成行
'splittocols', // 拆分成列
'splittocells', // 完全拆分单元格
'deletecaption', // 删除表格标题
'inserttitle', // 插入标题
'mergecells', // 合并多个单元格
'deletetable', // 删除表格
'cleardoc', // 清空文档
'insertparagraphbeforetable', //" 表格前插入行"
'insertcode', // 代码语言 */
'fontfamily', // 字体
'fontsize', // 字号
'paragraph', // 段落格式
// 'edittable', // 表格属性
// 'edittd', // 单元格属性
'link', // 超链接
// 'emotion', // 表情
'spechars', // 特殊字符
// 'searchreplace', // 查询替换
'justifyleft', // 居左对齐
'justifyright', // 居右对齐
'justifycenter', // 居中对齐
'justifyjustify', // 两端对齐
'forecolor', // 字体颜色
'backcolor', // 背景色
'lineheight' // 行间距
/* 'insertorderedlist', // 有序列表
'insertunorderedlist', // 无序列表
'directionalityltr', // 从左向右输入
'directionalityrtl', // 从右向左输入
'rowspacingtop', // 段前距
'rowspacingbottom', // 段后距
'pagebreak', // 分页
'imagenone', // 默认
'imageleft', // 左浮动
'imageright', // 右浮动
'imagecenter', // 居中
'wordimage', // 图片转存
'edittip ', // 编辑提示
'customstyle', // 自定义标题
'touppercase', // 字母大写
'tolowercase', // 字母小写
'inserttable' // 插入表格 */
]
],
zIndex: this.zIndex,
autoHeightEnabled: false, // 编译器不自动被内容撑高
autoFloatEnabled: false,
initialFrameHeight: 300, // 初始容器高度
initialFrameWith: '100%',
postParams: this.postParams,
// serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址
UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径
},
imgUrl: '',
uploadDiolagVisible: false
}
},
watch: {
content(val) {
this.$emit('editorChange', val)
},
comeContent: {
handler(newVal, oldVal) {
this.content = newVal
},
immediate: true,
deep: true
}
},
mounted() {
},
methods: {
readyCustom(editor) {
this.editor = editor
console.log(this.isDisabled)
if (this.isDisabled) this.editor.options.readonly = true
},
saveImg() {
let imageHtml = '<p><img src=\"' + this.imgUrl + '\"/></p>'
this.editor.execCommand('inserthtml', imageHtml)
this.uploadDiolagVisible = false
},
addCustomButtom(editorId) {
let _this = this
window.UE.registerUI('test-button', function(editor, uiName) {
// 注册按钮执行时的 command 命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: () => {
_this.imgUrl = ''
_this.uploadDiolagVisible = true
_this.editor = editor
}
})
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '图片上传',
// 需要添加的额外样式,可指定 icon 图标,图标路径参考常见问题 2
cssRules: 'background-position: -380px 0;',
// 点击时执行的命令
onclick: function() {
// 这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName)
}
})
// 当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName)
if (state === -1) {
btn.setDisabled(true)
btn.setChecked(false)
} else {
btn.setDisabled(false)
btn.setChecked(state)
}
})
// 因为你是添加 button,所以需要返回这个 button
return btn
} /* 指定这个 UI 是哪个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮 */)
},
setSessionid(num) {
var len = num || 32
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = chars.length
var pwd = ''
for (var i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.ueditor{
.edui-editor{
width: 100% !important;
}
}
</style>

+ 4
- 4
src/utils/request.js View File

@@ -59,10 +59,10 @@ service.interceptors.response.use(
title: res.message,
duration: 5000
})
// if (res.code === 701) {
// Router.push(`/login`)
// return
// }
if (res.code === 701) {
Router.push(`/login`)
return
}
return Promise.reject(res.message || 'Error')
},
error => {


+ 6
- 6
src/views/aigc/introduce.vue View File

@@ -6,9 +6,9 @@
<template>
<div class="app-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="图片" prop="image">
<!-- <el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
</el-form-item>
</el-form-item> -->
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
@@ -36,12 +36,12 @@
<script>
import { shuzirenremark } from '@/api/aigc'
import { saveGuangGao } from '@/api/homePage'
import uploadFile from '@/components/uploadFile'
// import uploadFile from '@/components/uploadFile'

export default {
components: {
uploadFile
},
// components: {
// uploadFile
// },
data() {
return {
ruleForm: {


+ 27
- 8
src/views/car/video.vue View File

@@ -33,6 +33,15 @@
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
<el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
</div>
<el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
@@ -64,7 +73,7 @@
</div>
</template>
<script>
import { videoSave } from '@/api/car'
import { videoSave, deleteVideo } from '@/api/car'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import uploadFile from '@/components/uploadFile'
@@ -77,6 +86,7 @@ export default {
dialogVisible: false,
id: '',
ruleForm: {
id: '',
image: '',
serialNumber: '',
link: '',
@@ -104,13 +114,11 @@ export default {
},
methods: {
openSave(item) {
if (item) {
this.ruleForm.id = item.id
this.ruleForm.image = item.image
this.ruleForm.serialNumber = item.serialNumber
this.ruleForm.link = item.link
this.ruleForm.title = item.title
}
this.ruleForm.id = item?.id || ''
this.ruleForm.image = item?.image || ''
this.ruleForm.serialNumber = item?.serialNumber || ''
this.ruleForm.link = item?.link || ''
this.ruleForm.title = item?.title || ''
this.dialogVisible = true
},
close(tag) {
@@ -141,6 +149,17 @@ export default {
},
resetForm(formName) {
this.$refs[formName].resetFields()
},
/* 删除 */
del(scope) {
deleteVideo(scope.row.id).then(res => {
this.$message({
message: '删除成功!',
type: 'success'
})
this.crud.toQuery()
scope._self.$refs[`del-${scope.$index}`].doClose()
})
}
}
}


+ 2
- 2
src/views/homePage/carHot.vue View File

@@ -20,7 +20,7 @@
<el-table-column :show-overflow-tooltip="true" prop="newsTitle" label="标题" />
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`" v-if="scope.row.isDel">
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"
@@ -103,7 +103,7 @@ export default {
let data = {
pageNum: this.pageNum,
pageSize: this.pageSize,
type: 3,
type: 2,
status: 2,
videHas: 1
}


+ 2
- 1
src/views/homePage/link.vue View File

@@ -7,7 +7,8 @@
<div class="app-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="图片" prop="image">
<uploadFile :url.sync="ruleForm.image" type="image" />
<uploadFile :url.sync="ruleForm.image" type="image" width="1920" height="800"/>
<p style="color: #909399;">*请上传1920*800的图片</p>
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="ruleForm.link"></el-input>


+ 1
- 1
src/views/homePage/yyzHot.vue View File

@@ -20,7 +20,7 @@
<el-table-column :show-overflow-tooltip="true" prop="newsTitle" label="标题" />
<el-table-column label="操作" width="230" align="center" fixed="right">
<template slot-scope="scope" class="btn">
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`" v-if="scope.row.isDel">
<el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
<p>是否确认删除该数据?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini"


+ 1
- 1
src/views/news/car.vue View File

@@ -90,7 +90,7 @@
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-dialog v-if="dialogVisible" title="汽车资讯视频" :visible.sync="dialogVisible" append-to-body width="60%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>


+ 1
- 1
src/views/news/hot.vue View File

@@ -90,7 +90,7 @@
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-dialog v-if="dialogVisible" title="热点新闻" :visible.sync="dialogVisible" append-to-body width="60%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>


+ 1
- 1
src/views/news/yyz/depth.vue View File

@@ -95,7 +95,7 @@
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-dialog v-if="dialogVisible" title="元宇宙" :visible.sync="dialogVisible" append-to-body width="60%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>


+ 1
- 1
src/views/news/yyz/info.vue View File

@@ -95,7 +95,7 @@
<pagination />

<!-- 新增修改弹窗 -->
<el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
<el-dialog v-if="dialogVisible" title="元宇宙" :visible.sync="dialogVisible" append-to-body width="60%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>


Loading…
Cancel
Save