From 9250a482b49c6a56491defd5bbf649f833cb457c Mon Sep 17 00:00:00 2001
From: deng <dengshaojie666@163.com>
Date: Fri, 28 Jun 2024 02:29:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4common=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/BreadCrumbs.vue     | 109 ++++++++
 .../src/components/common/BreadCrumbs.vue.bak |  77 ++++++
 .../admin/src/components/common/Editor.vue    | 238 ++++++++++++++++++
 .../src/components/common/FileUpload.vue      | 137 ++++++++++
 4 files changed, 561 insertions(+)
 create mode 100644 src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
 create mode 100644 src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
 create mode 100644 src/main/resources/admin/admin/src/components/common/Editor.vue
 create mode 100644 src/main/resources/admin/admin/src/components/common/FileUpload.vue

diff --git a/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
new file mode 100644
index 0000000..91bb61b
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="(●'◡'●)" style="height:50px;backgroundColor:rgba(79, 73, 73, 1);borderRadius:0px;padding:0px 20px 0px 20px;boxShadow:;borderWidth:2px;borderStyle:;borderColor:rgba(193, 180, 180, 0.5);">
+    <transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+import { generateTitle } from '@/utils/i18n'
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+    this.breadcrumbStyleChange()
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let route = this.$route
+      let matched = route.matched.filter(item => item.meta)
+      const first = matched[0]
+      matched = [{ path: '/index' }].concat(matched)
+
+      this.levelList = matched.filter(item => item.meta)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(path)
+    },
+    breadcrumbStyleChange(val) {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
+          el.innerText = "(●'◡'●)"
+          el.style.color = "rgba(235, 90, 170, 1)"
+        })
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
+          el.style.color = "rgba(196, 212, 244, 1)"
+        })
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
+          el.style.color = "rgba(244, 149, 32, 1)"
+        })
+
+        let str = "vertical"
+        if("vertical" === str) {
+          let headHeight = "60px"
+          headHeight = parseInt(headHeight) + 10 + 'px'
+          document.querySelectorAll('.app-breadcrumb').forEach(el=>{
+            el.style.marginTop = headHeight
+          })
+        }
+
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb {
+  display: block;
+  font-size: 14px;
+  line-height: 50px;
+
+  .box {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
new file mode 100644
index 0000000..6c3754f
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/BreadCrumbs.vue.bak
@@ -0,0 +1,77 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+import { generateTitle } from '@/utils/i18n'
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    generateTitle,
+    getBreadcrumb() {
+      // only show routes with meta.title
+console.log(this.$route)      
+      let matched = this.$route.matched.filter(item => item.meta)
+      const first = matched[0]
+      matched = [{ path: '/index' }].concat(matched)
+
+      this.levelList = matched.filter(item => item.meta)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(path)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/main/resources/admin/admin/src/components/common/Editor.vue b/src/main/resources/admin/admin/src/components/common/Editor.vue
new file mode 100644
index 0000000..135ffc4
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/Editor.vue
@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <!-- 图片上传组件辅助-->
+    <el-upload
+      class="avatar-uploader"
+      :action="getActionUrl"
+      name="file"
+      :headers="header"
+      :show-file-list="false"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :before-upload="beforeUpload"
+    ></el-upload>
+
+    <quill-editor
+      class="editor"
+      v-model="value"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @blur="onEditorBlur($event)"
+      @focus="onEditorFocus($event)"
+      @change="onEditorChange($event)"
+    ></quill-editor>
+  </div>
+</template>
+<script>
+// 工具栏配置
+const toolbarOptions = [
+  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+  ["blockquote", "code-block"], // 引用  代码块
+  [{ header: 1 }, { header: 2 }], // 1、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"] // 链接、图片、视频
+];
+
+import { quillEditor } from "vue-quill-editor";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+
+export default {
+  props: {
+    /*编辑器的内容*/
+    value: {
+      type: String
+    },
+    action: {
+      type: String
+    },
+    /*图片大小*/
+    maxSize: {
+      type: Number,
+      default: 4000 //kb
+    }
+  },
+
+  components: {
+    quillEditor
+  },
+
+  data() {
+    return {
+      content: this.value,
+      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+      editorOption: {
+        placeholder: "",
+        theme: "snow", // or 'bubble'
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            // container: "#toolbar",
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  // 触发input框选择图片文件
+                  document.querySelector(".avatar-uploader input").click();
+                } else {
+                  this.quill.format("image", false);
+                }
+              }
+              // link: function(value) {
+              //   if (value) {
+              //     var href = prompt('请输入url');
+              //     this.quill.format("link", href);
+              //   } else {
+              //     this.quill.format("link", false);
+              //   }
+              // },
+            }
+          }
+        }
+      },
+      // serverUrl: `${base.url}sys/storage/uploadSwiper?token=${storage.get('token')}`, // 这里写你要上传的图片服务器地址
+      header: {
+        // token: sessionStorage.token
+       'Token': this.$storage.get("Token")
+      } // 有的图片服务器要求请求头需要有token
+    };
+  },
+  computed: {
+    // 计算属性的 getter
+    getActionUrl: function() {
+      // return this.$base.url + this.action + "?token=" + this.$storage.get("token");
+      return `/${this.$base.name}/` + this.action;
+    }
+  },
+  methods: {
+    onEditorBlur() {
+      //失去焦点事件
+    },
+    onEditorFocus() {
+      //获得焦点事件
+    },
+    onEditorChange() {
+      console.log(this.value);
+      //内容改变事件
+      this.$emit("input", this.value);
+    },
+    // 富文本图片上传前
+    beforeUpload() {
+      // 显示loading动画
+      this.quillUpdateImg = true;
+    },
+
+    uploadSuccess(res, file) {
+      // res为图片服务器返回的数据
+      // 获取富文本组件实例
+      let quill = this.$refs.myQuillEditor.quill;
+      // 如果上传成功
+      if (res.code === 0) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "image", this.$base.url+ "upload/" +res.file);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("图片插入失败");
+      }
+      // loading动画消失
+      this.quillUpdateImg = false;
+    },
+    // 富文本图片上传失败
+    uploadError() {
+      // loading动画消失
+      this.quillUpdateImg = false;
+      this.$message.error("图片插入失败");
+    }
+  }
+};
+</script> 
+
+<style>
+.editor {
+  line-height: normal !important;
+  height: 400px;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: "保存";
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "10px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "标题1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "标题2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "标题3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "标题4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "标题5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "衬线字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "等宽字体";
+}
+</style>
\ No newline at end of file
diff --git a/src/main/resources/admin/admin/src/components/common/FileUpload.vue b/src/main/resources/admin/admin/src/components/common/FileUpload.vue
new file mode 100644
index 0000000..4aa6499
--- /dev/null
+++ b/src/main/resources/admin/admin/src/components/common/FileUpload.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <!-- 上传文件组件 -->
+    <el-upload
+      ref="upload"
+      :action="getActionUrl"
+      list-type="picture-card"
+      :multiple="multiple"
+      :limit="limit"
+      :headers="myHeaders"
+      :file-list="fileList"
+      :on-exceed="handleExceed"
+      :on-preview="handleUploadPreview"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadErr"
+      :before-upload="handleBeforeUpload"
+    >
+      <i class="el-icon-plus"></i>
+      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import storage from "@/utils/storage";
+import base from "@/utils/base";
+export default {
+  data() {
+    return {
+      // 查看大图
+      dialogVisible: false,
+      // 查看大图
+      dialogImageUrl: "",
+      // 组件渲染图片的数组字段，有特殊格式要求
+      fileList: [],
+      fileUrlList: [],
+      myHeaders:{}
+    };
+  },
+  props: ["tip", "action", "limit", "multiple", "fileUrls"],
+  mounted() {
+    this.init();
+    this.myHeaders= {
+      'Token':storage.get("Token")
+    }
+  },
+  watch: {
+    fileUrls: function(val, oldVal) {
+      //   console.log("new: %s, old: %s", val, oldVal);
+      this.init();
+    }
+  },
+  computed: {
+    // 计算属性的 getter
+    getActionUrl: function() {
+      // return base.url + this.action + "?token=" + storage.get("token");
+      return `/${this.$base.name}/` + this.action;
+    }
+  },
+  methods: {
+    // 初始化
+    init() {
+      //   console.log(this.fileUrls);
+      if (this.fileUrls) {
+        this.fileUrlList = this.fileUrls.split(",");
+        let fileArray = [];
+        this.fileUrlList.forEach(function(item, index) {
+          var url = item;
+          var name = index;
+          var file = {
+            name: name,
+            url: url
+          };
+          fileArray.push(file);
+        });
+        this.setFileList(fileArray);
+      }
+    },
+    handleBeforeUpload(file) {
+	
+    },
+    // 上传文件成功后执行
+    handleUploadSuccess(res, file, fileList) {
+      if (res && res.code === 0) {
+        fileList[fileList.length - 1]["url"] =
+          this.$base.url + "upload/" + file.response.file;
+        this.setFileList(fileList);
+        this.$emit("change", this.fileUrlList.join(","));
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // 图片上传失败
+    handleUploadErr(err, file, fileList) {
+      this.$message.error("文件上传失败");
+    },
+    // 移除图片
+    handleRemove(file, fileList) {
+      this.setFileList(fileList);
+      this.$emit("change", this.fileUrlList.join(","));
+    },
+    // 查看大图
+    handleUploadPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 限制图片数量
+    handleExceed(files, fileList) {
+      this.$message.warning(`最多上传${this.limit}张图片`);
+    },
+    // 重新对fileList进行赋值
+    setFileList(fileList) {
+      var fileArray = [];
+      var fileUrlArray = [];
+      // 有些图片不是公开的，所以需要携带token信息做权限校验
+      var token = storage.get("token");
+      fileList.forEach(function(item, index) {
+        var url = item.url.split("?")[0];
+        var name = item.name;
+        var file = {
+          name: name,
+          url: url + "?token=" + token
+        };
+        fileArray.push(file);
+        fileUrlArray.push(url);
+      });
+      this.fileList = fileArray;
+      this.fileUrlList = fileUrlArray;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+</style>