Skip to content

E
enterprise-platform
Commit 76ddda51 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

feated:产品列表添加是否上架操作开关；图片上传新增上传类型及富文本框内得图片上传新增图片类型

parent 0f42fe88
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 75 deletions
enterprise-manager-ui/admin/src/components/Editor.vue
View file @ 76ddda51
<template>
<div>
<el-upload
<div>
<el-upload
v-show="isshow"
name="file"
list-type="picture-card"
class="avatar-uploader2"
:data="{filename:'infomation'}"
:data="{ filename: 'infomation' }"
:show-upload-list="false"
:action="uploadFileUrl"
:before-upload="beforeUpload"
......@@ -13,8 +13,7 @@
>
</el-upload>
<div class="editor" ref="editor" :style="styles"></div>
</div>
</div>
</template>
<script>
......@@ -45,11 +44,11 @@ export default {
readOnly: {
type: Boolean,
default: false,
}
},
},
data() {
return {
isshow:false,
isshow: false,
uploadFileUrl: "/enterprise/file/commonupload", // 上传的地址
Quill: null,
currentValue: "",
......@@ -59,32 +58,30 @@ export default {
debug: "warn",
modules: {
// 工具栏配置
toolbar:{
container:[
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"], // 链接、图片、视频
],
handlers: {
"image": function (value) {
image: function (value) {
if (value) {
// 调用element的图片上传组件
document.querySelector('.avatar-uploader2 input').click()
document.querySelector(".avatar-uploader2 input").click();
} else {
this.quill.format('image', false)
this.quill.format("image", false);
}
}
}
}
},
},
},
},
placeholder: "请输入内容",
readOnly: this.readOnly,
......@@ -123,50 +120,53 @@ export default {
this.Quill = null;
},
methods: {
// 上传图片成功
uploadSuccessEdit(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.Quill
// 如果上传成功
if (res.code == 1) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.url)
// quill.insertEmbed(length, 'image','https://02c4e834b47bd7c8.jomoxc.com:9082/fs6ca4aaf6.a.bdydns.com/0/bjh/news/5ed45c62f6d447320a096e85187dcc24.gif?r=BzcbRhcCTngfXBtDNFsvRw0nHEIFTAg0QVYXAGlUJwFALQpBFxdUMgsBTQ5wBCtfC3dbAVcKUTZfDE4IfgN8UVgnDFVWDE8wBlMAMwpYB1wPZgBFHQMlUiNY&xcid=3042c042cee643c3b324dcf1d0aefe2f&max_age=2592000&xcsched=1572413558&xclogid=5361435651673602026&xauzkey=mngx_d1cd221672f72b38bac902fc48026343_1697182784&f_ver=v1&bcecdn_trace_info=FGEFXgoaW3UDT0wOMgF6S0NhHxReGhk0C1taEAAzClgHXA9mAEUdAyVSI1g%3D')
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false
},
handleChange(info) {
console.log(info);
// if (info.file.status === 'done') {
// // Get this url from response in real world.
// if(info.file.response && info.file.response.code == 1){
// let imgurl = `${BASE_URL}/${info.file.response.data}`
// let quill = this.$refs.myTextEditor.quill
// // 获取光标所在位置
// let length = quill.getSelection().index;
// // 插入图片，res为服务器返回的图片链接地址
// quill.insertEmbed(length, 'image', imgurl)
// }
// }
},
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
if (!isJpgOrPng) {
this.$message.error('请上传jpeg、png或gif格式的图片');
}
return isJpgOrPng;
},
// 上传图片成功
uploadSuccessEdit(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.Quill;
// 如果上传成功
if (res.code == 1) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.data.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.url);
// quill.insertEmbed(length, 'image','https://02c4e834b47bd7c8.jomoxc.com:9082/fs6ca4aaf6.a.bdydns.com/0/bjh/news/5ed45c62f6d447320a096e85187dcc24.gif?r=BzcbRhcCTngfXBtDNFsvRw0nHEIFTAg0QVYXAGlUJwFALQpBFxdUMgsBTQ5wBCtfC3dbAVcKUTZfDE4IfgN8UVgnDFVWDE8wBlMAMwpYB1wPZgBFHQMlUiNY&xcid=3042c042cee643c3b324dcf1d0aefe2f&max_age=2592000&xcsched=1572413558&xclogid=5361435651673602026&xauzkey=mngx_d1cd221672f72b38bac902fc48026343_1697182784&f_ver=v1&bcecdn_trace_info=FGEFXgoaW3UDT0wOMgF6S0NhHxReGhk0C1taEAAzClgHXA9mAEUdAyVSI1g%3D')
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
handleChange(info) {
console.log(info);
// if (info.file.status === 'done') {
// // Get this url from response in real world.
// if(info.file.response && info.file.response.code == 1){
// let imgurl = `${BASE_URL}/${info.file.response.data}`
// let quill = this.$refs.myTextEditor.quill
// // 获取光标所在位置
// let length = quill.getSelection().index;
// // 插入图片，res为服务器返回的图片链接地址
// quill.insertEmbed(length, 'image', imgurl)
// }
// }
},
beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/gif" ||
file.type === "image/jpg" ||
file.type === "image/bmp" ||
file.type === "image/webp";
if (!isJpgOrPng) {
this.$message.error("请上传jpeg、png、webp、jpg、bmp或gif格式的图片");
}
return isJpgOrPng;
},
init() {
const editor = this.$refs.editor;
......@@ -195,8 +195,9 @@ export default {
</script>
<style>
.editor, .ql-toolbar {
white-space: pre-wrap!important;
.editor,
.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
.quill-img {
......
enterprise-manager-ui/admin/src/components/ImageUpload.vue
View file @ 76ddda51
......@@ -10,6 +10,7 @@
name="file"
:show-file-list="false"
:headers="headers"
accept=".jpeg,.png,.jpg,.bmp,.gif,.webp"
style="display: inline-block; vertical-align: top"
v-if="!isList"
>
......@@ -50,7 +51,7 @@
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:file-list="imgList"
accept=".jpeg,.png,.jpg,.bmp,.gif"
accept=".jpeg,.png,.jpg,.bmp,.gif,.webp"
:headers="headers"
:limit="limit"
v-else
......
enterprise-manager-ui/admin/src/views/product/list.vue
View file @ 76ddda51
......@@ -105,6 +105,20 @@ export default {
this.ishot = val;
this.onSearch();
},
// 是否上架操作
handleUp(row) {
this.$post("product/save", row)
.then((res) => {
if (res.code == 1) {
this.$message.success(res.msg);
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
});
},
},
data() {
return {
......@@ -169,7 +183,26 @@ export default {
formatter: this.formatterYES,
width: 60,
},
{
label: "是否上架",
formatter: (row) => {
return (
<div>
<el-switch
v-model={row.shelves}
active-color="#13ce66"
onChange={() => {
this.handleUp(row);
}}
active-value={1}
inactive-value={0}
></el-switch>
</div>
);
},
width: 120,
align: "center",
},
{
label: "最近更新时间",
prop: "updateTime",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment