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> <template>
<div> <div>
<el-upload <el-upload
v-show="isshow" v-show="isshow"
name="file" name="file"
list-type="picture-card" list-type="picture-card"
class="avatar-uploader2" class="avatar-uploader2"
:data="{filename:'infomation'}" :data="{ filename: 'infomation' }"
:show-upload-list="false" :show-upload-list="false"
:action="uploadFileUrl" :action="uploadFileUrl"
:before-upload="beforeUpload" :before-upload="beforeUpload"
...@@ -13,8 +13,7 @@ ...@@ -13,8 +13,7 @@
> >
</el-upload> </el-upload>
<div class="editor" ref="editor" :style="styles"></div> <div class="editor" ref="editor" :style="styles"></div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -45,11 +44,11 @@ export default { ...@@ -45,11 +44,11 @@ export default {
readOnly: { readOnly: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
}, },
data() { data() {
return { return {
isshow:false, isshow: false,
uploadFileUrl: "/enterprise/file/commonupload", // 上传的地址 uploadFileUrl: "/enterprise/file/commonupload", // 上传的地址
Quill: null, Quill: null,
currentValue: "", currentValue: "",
...@@ -59,32 +58,30 @@ export default { ...@@ -59,32 +58,30 @@ export default {
debug: "warn", debug: "warn",
modules: { modules: {
// 工具栏配置 // 工具栏配置
toolbar:{ toolbar: {
container:[ container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块 ["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式 [{ align: [] }], // 对齐方式
["clean"], // 清除文本格式 ["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频 ["link", "image", "video"], // 链接、图片、视频
], ],
handlers: { handlers: {
"image": function (value) { image: function (value) {
if (value) { if (value) {
// 调用element的图片上传组件 // 调用element的图片上传组件
document.querySelector('.avatar-uploader2 input').click() document.querySelector(".avatar-uploader2 input").click();
} else { } else {
this.quill.format('image', false) this.quill.format("image", false);
} }
} },
} },
} },
}, },
placeholder: "请输入内容", placeholder: "请输入内容",
readOnly: this.readOnly, readOnly: this.readOnly,
...@@ -123,50 +120,53 @@ export default { ...@@ -123,50 +120,53 @@ export default {
this.Quill = null; this.Quill = null;
}, },
methods: { methods: {
// 上传图片成功
// 上传图片成功 uploadSuccessEdit(res, file) {
uploadSuccessEdit(res, file) { // res为图片服务器返回的数据
// res为图片服务器返回的数据 // 获取富文本组件实例
// 获取富文本组件实例 let quill = this.Quill;
let quill = this.Quill // 如果上传成功
// 如果上传成功 if (res.code == 1) {
if (res.code == 1) { // 获取光标所在位置
// 获取光标所在位置 let length = quill.getSelection().index;
let length = quill.getSelection().index; // 插入图片 res.data.url为服务器返回的图片地址
// 插入图片 res.data.url为服务器返回的图片地址 quill.insertEmbed(length, "image", res.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.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);
quill.setSelection(length + 1) } else {
} else { this.$message.error("图片插入失败");
this.$message.error('图片插入失败') }
} // loading动画消失
// loading动画消失 this.quillUpdateImg = false;
this.quillUpdateImg = false },
}, handleChange(info) {
handleChange(info) { console.log(info);
console.log(info); // if (info.file.status === 'done') {
// if (info.file.status === 'done') { // // Get this url from response in real world.
// // Get this url from response in real world. // if(info.file.response && info.file.response.code == 1){
// if(info.file.response && info.file.response.code == 1){ // let imgurl = `${BASE_URL}/${info.file.response.data}`
// let imgurl = `${BASE_URL}/${info.file.response.data}` // let quill = this.$refs.myTextEditor.quill
// let quill = this.$refs.myTextEditor.quill // // 获取光标所在位置
// // 获取光标所在位置 // let length = quill.getSelection().index;
// let length = quill.getSelection().index; // // 插入图片，res为服务器返回的图片链接地址
// // 插入图片，res为服务器返回的图片链接地址 // quill.insertEmbed(length, 'image', imgurl)
// quill.insertEmbed(length, 'image', imgurl) // }
// } // }
// } },
}, beforeUpload(file) {
beforeUpload(file) { const isJpgOrPng =
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'; file.type === "image/jpeg" ||
if (!isJpgOrPng) { file.type === "image/png" ||
this.$message.error('请上传jpeg、png或gif格式的图片'); file.type === "image/gif" ||
} file.type === "image/jpg" ||
return isJpgOrPng; file.type === "image/bmp" ||
}, file.type === "image/webp";
if (!isJpgOrPng) {
this.$message.error("请上传jpeg、png、webp、jpg、bmp或gif格式的图片");
}
return isJpgOrPng;
},
init() { init() {
const editor = this.$refs.editor; const editor = this.$refs.editor;
...@@ -195,8 +195,9 @@ export default { ...@@ -195,8 +195,9 @@ export default {
</script> </script>
<style> <style>
.editor, .ql-toolbar { .editor,
white-space: pre-wrap!important; .ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important; line-height: normal !important;
} }
.quill-img { .quill-img {
......
enterprise-manager-ui/admin/src/components/ImageUpload.vue
View file @ 76ddda51
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
name="file" name="file"
:show-file-list="false" :show-file-list="false"
:headers="headers" :headers="headers"
accept=".jpeg,.png,.jpg,.bmp,.gif,.webp"
style="display: inline-block; vertical-align: top" style="display: inline-block; vertical-align: top"
v-if="!isList" v-if="!isList"
> >
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:file-list="imgList" :file-list="imgList"
accept=".jpeg,.png,.jpg,.bmp,.gif" accept=".jpeg,.png,.jpg,.bmp,.gif,.webp"
:headers="headers" :headers="headers"
:limit="limit" :limit="limit"
v-else v-else
......
enterprise-manager-ui/admin/src/views/product/list.vue
View file @ 76ddda51
...@@ -105,6 +105,20 @@ export default { ...@@ -105,6 +105,20 @@ export default {
this.ishot = val; this.ishot = val;
this.onSearch(); 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() { data() {
return { return {
...@@ -169,7 +183,26 @@ export default { ...@@ -169,7 +183,26 @@ export default {
formatter: this.formatterYES, formatter: this.formatterYES,
width: 60, 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: "最近更新时间", label: "最近更新时间",
prop: "updateTime", 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