kz-ui-base 1.0.2 → 1.0.4

package/common/src/components/custom/Editor/index.vue

@@ -1,267 +0,0 @@
-<template>
-  <div>
-    <div class="editor" ref="editor" :style="styles"></div>
-    <Material ref="material" visible="true" v-model="imageList" :visible.sync="imageChoice.visible" :max="5"
-              clear="clear"/>
-  </div>
-</template>
-
-<script>
-import Quill from "~../../quill";
-import Material from "../Material";
-import "~../../quill/dist/quill.core.css";
-import "~../../quill/dist/quill.snow.css";
-import "~../../quill/dist/quill.bubble.css";
-import {getToken} from "../../../utils/auth";
-
-export default {
-  name: "Editor",
-  components: {Material},
-  props: {
-    /* 编辑器的内容 */
-    value: {
-      type: String,
-      default: "",
-    },
-    /* 高度 */
-    height: {
-      type: Number,
-      default: null,
-    },
-    /* 最小高度 */
-    minHeight: {
-      type: Number,
-      default: null,
-    },
-    /* 只读 */
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      headers: {
-        Authorization: "Bearer " + getToken()
-      },
-      imageChoice: {
-        focus: false,
-        visible: false
-      },
-      imageList: [],
-      Quill: null,
-      currentValue: "",
-      options: {
-        theme: "snow",
-        bounds: document.body,
-        debug: "warn",
-        modules: {
-          // 工具栏配置
-          toolbar: [
-            ["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"]                                 // 链接、图片
-          ],
-        },
-        placeholder: "请输入内容",
-        readOnly: this.readOnly,
-      },
-    };
-  },
-  computed: {
-    styles() {
-      let style = {};
-      if (this.minHeight) {
-        style.minHeight = `${this.minHeight}px`;
-      }
-      if (this.height) {
-        style.height = `${this.height}px`;
-      }
-      return style;
-    },
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val !== this.currentValue) {
-          this.currentValue = val === null ? "" : val;
-          if (this.Quill) {
-            this.Quill.pasteHTML(this.currentValue);
-          }
-        }
-      },
-      immediate: true,
-    },
-    imageList(val, oldVal) {
-      this.handleSuccess();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  beforeDestroy() {
-    this.Quill = null;
-  },
-  methods: {
-    init() {
-      const editor = this.$refs.editor;
-      this.Quill = new Quill(editor, this.options);
-      // 素材模块接管上传事件
-      let toolbar = this.Quill.getModule("toolbar");
-      toolbar.addHandler("image", (value) => {
-        this.uploadType = "image";
-        if (value) {
-          this.imageChoice.visible = true;
-        } else {
-          this.quill.format("image", false);
-        }
-      });
-      toolbar.addHandler("video", (value) => {
-        this.uploadType = "video";
-        if (value) {
-          this.imageChoice.visible = true;
-        } else {
-          this.quill.format("video", false);
-        }
-      });
-      this.Quill.pasteHTML(this.currentValue);
-      this.Quill.on("text-change", (delta, oldDelta, source) => {
-        const html = this.$refs.editor.children[0].innerHTML;
-        const text = this.Quill.getText();
-        const quill = this.Quill;
-        this.currentValue = html;
-        this.$emit("input", html);
-        this.$emit("on-change", {html, text, quill});
-      });
-      this.Quill.on("text-change", (delta, oldDelta, source) => {
-        this.$emit("on-text-change", delta, oldDelta, source);
-      });
-      this.Quill.on("selection-change", (range, oldRange, source) => {
-        this.$emit("on-selection-change", range, oldRange, source);
-      });
-      this.Quill.on("editor-change", (eventName, ...args) => {
-        this.$emit("on-editor-change", eventName, ...args);
-      });
-    },
-    handleSuccess() {
-      if (this.imageList.length > 0) {
-        // 获取富文本组件实例
-        let quill = this.Quill;
-        // 如果上传成功
-        for (let i = 0; i < this.imageList.length; i++) {
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          // 插入图片  res.url为服务器返回的图片地址
-          quill.insertEmbed(length, "image", this.imageList[i].materialOriginalUrl);
-          // 调整光标到最后
-          quill.setSelection(length + 1);
-        }
-        //重置imageList参数
-        this.imageList = []
-      }
-    }
-  }
-};
-</script>
-
-<style>
-.editor, .ql-toolbar {
-  white-space: pre-wrap !important;
-  line-height: normal !important;
-}
-
-.quill-img {
-  display: none;
-}
-
-.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>

package/common/src/components/custom/FileBox/index.vue

@@ -1,293 +0,0 @@
-<template>
-  <div class="ImageBox">
-    <div
-      :class="imageChoice.focus ? 'choice-box choice-box-focus' : 'choice-box'"
-      @mouseenter="imageChoice.focus = true"
-      @mouseleave="imageChoice.focus = false"
-      @click="imageChoiceClick"
-      v-show="!(max === 1 && imageList.length === 1)"
-    >
-      <i class="el-icon-plus choice-icon" />
-    </div>
-    <div
-      class="main-box"
-      v-if="max === 1"
-      v-show="max === 1 && imageList.length > 0"
-    >
-      <div
-        :class="
-          item.hiddenVisible
-            ? 'image-box image-box-only-one-focus'
-            : 'image-box'
-        "
-        v-for="item in imageList"
-        :key="item.materialId"
-        @mouseenter="item.hiddenVisible = true"
-        @mouseleave="item.hiddenVisible = false"
-      >
-        <el-image
-          class="image-view"
-          :src="getImageIcon(item.materialUrl)"
-          fit="contain"
-          @click="imageChoiceClick"
-        />
-        <svg-icon
-          slot="prefix"
-          icon-class="xy-cancel"
-          class="image-cancel image-cancel-focus"
-          v-if="item.hiddenVisible"
-          @click="imageCancel(item)"
-        />
-        <!--<div class="image-text">
-          <span class="image-input"
-                :title="item.materialUrl">
-            {{item.materialUrl}}
-          </span>
-        </div>-->
-      </div>
-    </div>
-    <el-scrollbar
-      :style="'height:100px;'"
-      :native="false"
-      :noresize="false"
-      tag="section"
-      v-show="imageList.length > 0"
-      v-if="max !== 1"
-    >
-      <draggable
-        :list="imageList"
-        v-bind="$attrs"
-        class="main-box"
-        animation="300"
-      >
-        <div
-          :class="
-            item.hiddenVisible ? 'image-box image-box-focus' : 'image-box'
-          "
-          v-for="item in imageList"
-          :key="item.materialId"
-          @mouseenter="item.hiddenVisible = true"
-          @mouseleave="item.hiddenVisible = false"
-        >
-          <el-image
-            class="image-view"
-            :src="getImageIcon(item.materialUrl)"
-            fit="contain"
-          />
-          <svg-icon
-            slot="prefix"
-            icon-class="xy-cancel"
-            class="image-cancel image-cancel-focus"
-            v-if="item.hiddenVisible"
-            @click="imageCancel(item)"
-          />
-          <!--<div class="image-text">
-            <span class="image-input"
-                  :title="item.materialUrl">
-              {{item.materialUrl}}
-            </span>
-          </div>-->
-        </div>
-      </draggable>
-    </el-scrollbar>
-    <Material
-      visible="true"
-      v-model="imageList"
-      :visible.sync="imageChoice.visible"
-      :max="max"
-      :clear="clear"
-    />
-  </div>
-</template>
-
-<script>
-import Material from "../Material";
-import draggable from "~../../vuedraggable";
-import { getImageIcon } from "../Material/fileNameHelper";
-
-export default {
-  name: "FileBox",
-  components: { Material, draggable },
-  model: {
-    prop: "list",
-    event: "change",
-  },
-  props: {
-    /** 传入list参数 */
-    list: {
-      type: String,
-      default: null,
-    },
-    /** 传入fileName参数 */
-    fileName: {
-      type: String,
-      default: null,
-    },
-    /** 图片上传最大数量参数 默认为 1 */
-    width: {
-      type: String,
-      default: "450px",
-    },
-    /** 图片上传最大数量参数 默认为 1 */
-    max: {
-      type: Number,
-      default: 999,
-    },
-    /** 传入list是否转空参数 默认为 false */
-    clear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      imageChoice: {
-        focus: false,
-        visible: false,
-      },
-      imageList: [],
-    };
-  },
-  watch: {
-    imageList(val, oldVal) {
-      //普通的watch监听
-      this.changeList();
-    },
-    list(val, oldVal) {
-      this.init();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    getImageIcon: getImageIcon,
-    /** 初始化方法 */
-    init() {
-      this.imageList = [];
-      if (this.list !== null && this.list !== "" && this.list !== " ") {
-        const newList = JSON.parse(this.list);
-        if (Array.isArray(newList)) {
-          this.imageList = newList;
-        } else {
-          this.imageList.push(newList);
-        }
-        var file = "";
-        for (var item of this.imageList) {
-          file += item.materialUrl + ",";
-        }
-        this.fileName = file.substr(0, file.length - 1);
-      }
-    },
-    imageCancel(item) {
-      for (let i = 0; i < this.imageList.length; i++) {
-        if (this.imageList[i].materialId === item.materialId) {
-          this.imageList.splice(i, 1);
-        }
-      }
-    },
-    changeList() {
-      if (this.max === 1) {
-        if (this.imageList.length > 0) {
-          this.fileName = this.imageList[0].materialUrl;
-          this.$emit("update:fileName", this.fileName);
-          this.$emit("change", JSON.stringify(this.imageList[0]));
-        }
-      } else if (this.max > 1) {
-        if (this.imageList.length > 0) {
-          var file = "";
-          for (var item of this.imageList) {
-            file += item.materialUrl + " |";
-          }
-          this.fileName = file.substr(0, file.length - 1);
-
-          this.$emit("update:fileName", this.fileName);
-          this.$emit("change", JSON.stringify(this.imageList));
-        }
-      } else {
-        this.$emit("change", null);
-      }
-    },
-    imageChoiceClick() {
-      this.imageChoice.visible = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.main-box {
-  display: inline-flex;
-  .image-box {
-    width: 80px;
-    height: 80px;
-    border: 1px solid #e3e3e3;
-    margin: 6px 5px;
-    display: inline-flex;
-    position: relative;
-    .image-view {
-      width: 80px;
-      height: 80px;
-      padding: 4px;
-    }
-
-    .image-cancel {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      top: -8px;
-      right: -8px;
-    }
-
-    .image-cancel-focus {
-      cursor: pointer;
-    }
-  }
-}
-
-.choice-box {
-  width: 80px;
-  height: 80px;
-  border: 1px dashed #e3e3e3;
-  margin: 6px 5px;
-  display: inline-flex;
-  .choice-icon {
-    text-align: center;
-    line-height: 80px;
-    width: 80px;
-    height: 80px;
-  }
-}
-
-.choice-box-focus {
-  cursor: pointer;
-  border-color: #387ed6;
-}
-
-.image-box-focus {
-  cursor: move;
-}
-
-.image-box-only-one-focus {
-  cursor: pointer;
-}
-
-.image-input {
-  width: 82px;
-  height: 20px;
-  vertical-align: bottom;
-}
-.ImageBox {
-}
-</style>
-
-<style scoped>
-.ImageBox > .el-scrollbar .el-scrollbar__wrap {
-  overflow-x: hidden;
-}
-
-.ImageBox > .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
-  white-space: nowrap;
-  display: inline-block;
-}
-</style>