+
+
+
+
+
+
diff --git a/ruoyi-ui/src/components/EditorDc/index.js b/ruoyi-ui/src/components/EditorDc/index.js
new file mode 100644
index 000000000..9a3a57c76
--- /dev/null
+++ b/ruoyi-ui/src/components/EditorDc/index.js
@@ -0,0 +1,321 @@
+/**
+ *@description 观察者模式 全局监听富文本编辑器
+ */
+export const QuillWatch = {
+ watcher: {}, // 登记编辑器信息
+ active: null, // 当前触发的编辑器
+ on: function(imageExtendId, ImageExtend) {
+ // 登记注册使用了ImageEXtend的编辑器
+ if (!this.watcher[imageExtendId]) {
+ this.watcher[imageExtendId] = ImageExtend;
+ }
+ },
+ emit: function(activeId, type = 1) {
+ // 事件发射触发
+ this.active = this.watcher[activeId];
+ if (type === 1) {
+ imgHandler();
+ }
+ },
+};
+
+/**
+ * @description 图片功能拓展： 增加上传 拖动 复制
+ */
+export class ImageExtend {
+ /**
+ * @param quill {Quill}富文本实例
+ * @param config {Object} options
+ * config keys: action, headers, editForm start end error size response
+ */
+ constructor(quill, config = {}) {
+ this.id = Math.random();
+ this.quill = quill;
+ this.quill.id = this.id;
+ this.config = config;
+ this.file = ""; // 要上传的图片
+ this.imgURL = ""; // 图片地址
+ quill.root.addEventListener("paste", this.pasteHandle.bind(this), false);
+ quill.root.addEventListener("drop", this.dropHandle.bind(this), false);
+ quill.root.addEventListener(
+ "dropover",
+ function(e) {
+ e.preventDefault();
+ },
+ false
+ );
+ this.cursorIndex = 0;
+ QuillWatch.on(this.id, this);
+ }
+
+ /**
+ * @description 检验图片大小是否超出限制
+ */
+ checkPicSize() {
+ let self = this;
+ if (self.config.size && self.file.size >= self.config.size * 1024 * 1024) {
+ if (self.config.sizeError) {
+ self.config.sizeError();
+ }
+ return false;
+ }
+ return true;
+ }
+
+ /**
+ * @description 粘贴
+ * @param e
+ */
+ pasteHandle(e) {
+ e.preventDefault();
+ QuillWatch.emit(this.quill.id, 0);
+ let clipboardData = e.clipboardData;
+ let i = 0;
+ let items, item, types;
+
+ if (clipboardData) {
+ items = clipboardData.items;
+
+ if (!items) {
+ return;
+ }
+ item = items[0];
+ types = clipboardData.types || [];
+
+ for (; i < types.length; i++) {
+ if (types[i] === "Files") {
+ item = items[i];
+ break;
+ }
+ }
+ if (item && item.kind === "file" && item.type.match(/^image\//i)) {
+ this.file = item.getAsFile();
+ let self = this;
+ // 如果图片限制大小
+ if (!this.checkPicSize()) {
+ return;
+ }
+ if (this.config.action) {
+ this.uploadImg();
+ } else {
+ this.toBase64();
+ }
+ }
+ if (item && item.kind === "string" && ["text/plain", "text/html"].indexOf(item.types)) {
+ //将粘贴的文本内容插入到编辑器中
+ item.getAsString(function(s) {
+ const self = QuillWatch.active;
+ let length = self.quill.getSelection(true).index;
+ self.cursorIndex = length;
+ self.quill.insertText(QuillWatch.active.cursorIndex, s.replace(/\s{2,}/g, "\n"));
+ self.quill.update();
+ setTimeout(() => self.quill.setSelection(self.cursorIndex + s.length, 0), 0);
+ });
+ }
+ }
+ }
+
+ /**
+ * 拖拽
+ * @param e
+ */
+ dropHandle(e) {
+ QuillWatch.emit(this.quill.id, 0);
+ const self = this;
+ e.preventDefault();
+ // 如果图片限制大小
+ if (!self.checkPicSize()) {
+ return;
+ }
+ self.file = e.dataTransfer.files[0]; // 获取到第一个上传的文件对象
+ if (this.config.action) {
+ self.uploadImg();
+ } else {
+ self.toBase64();
+ }
+ }
+
+ /**
+ * @description 将图片转为base4
+ */
+ toBase64() {
+ const self = this;
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ // 返回base64
+ self.imgURL = e.target.result;
+ self.insertImg();
+ };
+ reader.readAsDataURL(self.file);
+ }
+
+ /**
+ * @description 上传图片到服务器
+ */
+ uploadImg() {
+ const self = this;
+ let quillLoading = self.quillLoading;
+ let config = self.config;
+ // 构造表单
+ let formData = new FormData();
+ formData.append(config.name, self.file);
+ // 自定义修改表单
+ if (config.editForm) {
+ config.editForm(formData);
+ }
+ // 创建ajax请求
+ let xhr = new XMLHttpRequest();
+ xhr.open("post", config.action, true);
+ // 如果有设置请求头
+ if (config.headers) {
+ config.headers(xhr);
+ }
+ if (config.change) {
+ config.change(xhr, formData);
+ }
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ //success
+ let res = JSON.parse(xhr.responseText);
+ self.imgURL = config.response(res);
+ QuillWatch.active.uploadSuccess();
+ self.insertImg();
+ if (self.config.success) {
+ self.config.success();
+ }
+ } else {
+ //error
+ if (self.config.error) {
+ self.config.error();
+ }
+ QuillWatch.active.uploadError();
+ }
+ }
+ };
+ // 开始上传数据
+ xhr.upload.onloadstart = function(e) {
+ QuillWatch.active.uploading();
+ // let length = (self.quill.getSelection() || {}).index || self.quill.getLength()
+ // self.quill.insertText(length, '[uploading...]', { 'color': 'red'}, true)
+ if (config.start) {
+ config.start();
+ }
+ };
+ // 上传过程
+ xhr.upload.onprogress = function(e) {
+ let complete = (((e.loaded / e.total) * 100) | 0) + "%";
+ QuillWatch.active.progress(complete);
+ };
+ // 当发生网络异常的时候会触发，如果上传数据的过程还未结束
+ xhr.upload.onerror = function(e) {
+ QuillWatch.active.uploadError();
+ if (config.error) {
+ config.error();
+ }
+ };
+ // 上传数据完成（成功或者失败）时会触发
+ xhr.upload.onloadend = function(e) {
+ if (config.end) {
+ config.end();
+ }
+ };
+ xhr.send(formData);
+ }
+
+ /**
+ * @description 往富文本编辑器插入图片
+ */
+ insertImg() {
+ const self = QuillWatch.active;
+ self.quill.insertEmbed(QuillWatch.active.cursorIndex, "image", self.imgURL);
+ self.quill.update();
+ self.quill.setSelection(self.cursorIndex + 1);
+ }
+
+ /**
+ * @description 显示上传的进度
+ */
+ progress(pro) {
+ pro = "[" + "uploading" + pro + "]";
+ QuillWatch.active.quill.root.innerHTML = QuillWatch.active.quill.root.innerHTML.replace(
+ /\[uploading.*?\]/,
+ pro
+ );
+ }
+
+ /**
+ * 开始上传
+ */
+ uploading() {
+ let length = QuillWatch.active.quill.getSelection(true).index;
+ QuillWatch.active.cursorIndex = length;
+ QuillWatch.active.quill.insertText(QuillWatch.active.cursorIndex, "[uploading...]", { color: "red" }, true);
+ }
+
+ /**
+ * 上传失败
+ */
+ uploadError() {
+ QuillWatch.active.quill.root.innerHTML = QuillWatch.active.quill.root.innerHTML.replace(
+ /\[uploading.*?\]/,
+ "[upload error]"
+ );
+ }
+
+ uploadSuccess() {
+ QuillWatch.active.quill.root.innerHTML = QuillWatch.active.quill.root.innerHTML.replace(/\[uploading.*?\]/, "");
+ }
+}
+
+/**
+ * @description 点击图片上传
+ */
+export function imgHandler() {
+ let fileInput = document.querySelector(".quill-image-input");
+ if (fileInput === null) {
+ fileInput = document.createElement("input");
+ fileInput.setAttribute("type", "file");
+ fileInput.classList.add("quill-image-input");
+ fileInput.style.display = "none";
+ // 监听选择文件
+ fileInput.addEventListener("change", function() {
+ let self = QuillWatch.active;
+ self.file = fileInput.files[0];
+ fileInput.value = "";
+ // 可设置上传图片的格式
+ fileInput.setAttribute("accept", self.config.accept);
+ // 如果图片限制大小
+ if (!self.checkPicSize()) {
+ return;
+ }
+ if (self.config.action) {
+ self.uploadImg();
+ } else {
+ self.toBase64();
+ }
+ });
+ document.body.appendChild(fileInput);
+ }
+ fileInput.click();
+}
+
+/**
+ *@description 全部工具栏
+ */
+export const container = [
+ ["bold", "italic", "underline", "strike"],
+ ["blockquote", "code-block"],
+ [{ 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"],
+ ["link", "image", "video"],
+];
diff --git a/ruoyi-ui/src/components/Verifition/Verify.vue b/ruoyi-ui/src/components/Verifition/Verify.vue
index f4f8f7746..8087e9b73 100644
--- a/ruoyi-ui/src/components/Verifition/Verify.vue
+++ b/ruoyi-ui/src/components/Verifition/Verify.vue
@@ -1,5 +1,5 @@
-
+
请完成安全验证
@@ -230,7 +230,7 @@
text-align: center;
cursor: pointer;
}
- .mask{
+ .mask_verify{
position: fixed;
top: 0;
left:0;
diff --git a/ruoyi-ui/src/views/product/proBanner/index.vue b/ruoyi-ui/src/views/product/proBanner/index.vue
new file mode 100644
index 000000000..3535e6035
--- /dev/null
+++ b/ruoyi-ui/src/views/product/proBanner/index.vue
@@ -0,0 +1,349 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 搜索
+ 重置
+
+
+
+
+
+ 新增
+
+
+
+ 修改
+
+
+
+ 删除
+
+
+
+ 导出
+
+
+
+
+
+
+ ![]()
+
+
+ {{ scope.row.redirectFlag === 0 ? '不可以跳转' : '可以跳转' }}
+
+
+ {{ scope.row.bannerType === 1 ? '应用内跳转' : '外部跳转' }}
+
+
+
+ 修改
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 是
+ 否
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ruoyi-ui/src/views/product/proCategory/index.vue b/ruoyi-ui/src/views/product/proCategory/index.vue
new file mode 100644
index 000000000..c02f3a38c
--- /dev/null
+++ b/ruoyi-ui/src/views/product/proCategory/index.vue
@@ -0,0 +1,291 @@
+
+
+
+
+
+
+ 搜索
+ 重置
+
+
+
+
+
+ 新增
+
+
+
+ 修改
+
+
+
+ 删除
+
+
+
+ 导出
+
+
+
+
+
+
+ ![]()
+
+
+
+ 修改
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ruoyi-ui/src/views/product/proItem/index.vue b/ruoyi-ui/src/views/product/proItem/index.vue
new file mode 100644
index 000000000..165ce48cc
--- /dev/null
+++ b/ruoyi-ui/src/views/product/proItem/index.vue
@@ -0,0 +1,516 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 搜索
+ 重置
+
+
+
+
+
+ 新增
+
+
+
+ 修改
+
+
+
+ 删除
+
+
+
+ 导出
+
+
+
+
+
+
+ ![]()
+
+
+ {{ scope.row.publishFlag === 0 ? '未发布' : '已发布' }}
+
+
+
+ {{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
+
+
+
+
+ 修改
+
+ 编辑规格
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ruoyi-ui/src/views/product/proItemSpecification/index.vue b/ruoyi-ui/src/views/product/proItemSpecification/index.vue
new file mode 100644
index 000000000..16e4b85bc
--- /dev/null
+++ b/ruoyi-ui/src/views/product/proItemSpecification/index.vue
@@ -0,0 +1,342 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ 是
+ 否
+
+
+
+
+
+
+
+
+
+
+
+
+ 搜索
+ 重置
+
+
+
+
+
+ 新增
+
+
+
+ 修改
+
+
+
+ 删除
+
+
+
+ 导出
+
+
+
+
+
+
+ ![]()
+
+
+ {{ scope.row.publishFlag === '0' ? '未上架' : '已上架' }}
+
+
+
+ {{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
+
+
+
+
+ 修改
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+