dy-admin-manager/src/views/contentManager/model/livehelpModel.vue

<template>
  <div class="systemNotifyModel">
    <div class="m-core">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="110px"
        style="width: 100%"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="排序值">
          <el-input
            v-model.trim="form.order"
            placeholder="请输入排序值"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item prop="subType" label="类型">
          <el-select v-model="form.subType" clearable placeholder="帮助类型">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="自动开启时间" prop="actionTime" :rules="[{required: true, message: '请选择自动开启时间范围', trigger: 'change'}]">
          <el-date-picker style="width:400px;"
                        v-model="form.actionTime"
                        :clearable="false"
                        type="datetimerange"
                        range-separator="至"
                        :picker-options="{ firstDayOfWeek: 1 }"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
        </el-form-item> -->

        <el-form-item
          label="内容"
          prop="content"
          v-if="outUrlRadio == 0"
          :rules="[{ required: true, message: '请编辑内容', trigger: 'blur' }]"
        >
          <quill-editor
            class="ql-editor"
            style="margin-top: -17px"
            v-model="form.content"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)"
          ></quill-editor>

          <el-upload
            class="ivu-upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            accept=".jpg, .jpeg, .png, .gif"
            :max-size="2048"
            multiple
            :action="ossUploadUrl"
            :data="dataObj"
            :before-upload="beforeImgUpload"
          >
            <Button icon="ios-cloud-upload-outline"></Button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit('form')" type="primary"
            >立即{{ pageType == "create" ? "创建" : "修改" }}</el-button
          >
          <el-button @click="onReSet('form')">重置</el-button>
          <!-- <el-button @click="onLook">预览</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="插入视频"
      :append-to-body="true"
      width="500px"
      @close="onDialogClose('diologForm')"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" ref="diologForm" :rules="dialogFormRules">
        <el-form-item
          label="封面图地址"
          prop="poster"
          :rules="[
            {
              required: uploadType == 2 ? true : false,
              message: '请上传封面图',
              trigger: 'blur',
            },
          ]"
          label-width="120px"
        >
          <el-upload
            class="avatar-uploader"
            style="line-height: 0; display: inline-block"
            :action="ossUploadUrl"
            :data="dataObj"
            :show-file-list="false"
            v-loading="uploadImgLoading"
            accept=".jpg, .jpeg, .png, .gif"
            :on-success="handleImgSuccess"
            :on-error="handleUploadImgError"
            :before-upload="beforeImgUpload"
          >
            <img v-if="dialogForm.poster" :src="dialogForm.poster" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频类型" label-width="120px">
          <el-radio-group v-model="formRadio">
            <el-radio :label="1">外部链接</el-radio>
            <el-radio :label="2">上传</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="formRadio == 1"
          label="视频地址"
          label-width="120px"
          prop="url"
        >
          <el-input
            v-model="dialogForm.url"
            style="width: 100%"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="formRadio == 2"
          label="上传视频"
          label-width="120px"
          prop="videoUrl"
        >
          <el-upload
            class="upload-demo"
            style="display: inline-block"
            v-loading="uploadLoading"
            :action="ossUploadUrl"
            :data="dataObj"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
            accept=".mp4"
            :file-list="fileList"
            :on-exceed="handleExceed"
          >
            <video
              style="width: 120px; height: 120px"
              v-if="dialogForm.videoUrl"
              type="video/mp4"
              preload="auto"
              :src="dialogForm.videoUrl"
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="imageSize">
            <!-- 广告管理 & 广告类型为 视频 -->
            <span v-if="uploadType == 2 && type == 8"
              >上传视频尺寸建议：1242px * 2208px；</span
            ><br />
            只能上传mp4文件, 且不超过100M
          </p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onVideoComfirm('diologForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      width="375px"
      title="预览"
      :append-to-body="true"
      :visible.sync="lookVisible"
    >
      <div class="sd-container">
        <h2>{{ dataInfo.title }}</h2>
        <div class="titleInfo">
          <p>{{ typeCheck(dataInfo.type) }}</p>
          <p>{{ dataInfo.updateTime }}</p>
        </div>
        <div class="msgWrap quill-editor ql-editor" v-html="dataInfo.content"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "@/api/appTenant";
import { newsQueryId, newsAdd, newsUpdate } from "@/api/contentManager";
import { getToken } from "@/utils/auth";
import { vaildStudentUrl } from "@/utils/validate";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
// 工具栏配置
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"], // 清除文本格式
  ["image", "video"], // 链接、图片、视频
  // ["link", "image", "video"] // 链接、图片、视频
];
// 标题
const titleConfig = {
  "ql-bold": "加粗",
  "ql-color": "颜色",
  "ql-font": "字体",
  "ql-code": "插入代码",
  "ql-italic": "斜体",
  // 'ql-link': '添加链接',
  "ql-background": "背景颜色",
  "ql-size": "字体大小",
  "ql-strike": "删除线",
  "ql-script": "上标/下标",
  "ql-underline": "下划线",
  "ql-blockquote": "引用",
  "ql-header": "标题",
  "ql-indent": "缩进",
  "ql-list": "列表",
  "ql-align": "文本对齐",
  "ql-direction": "文本方向",
  "ql-code-block": "代码块",
  "ql-formula": "公式",
  "ql-image": "图片",
  "ql-video": "视频",
  "ql-clean": "清除字体样式",
  "ql-upload": "文件",
};

// 这里引入修改过的video模块并注册
import Video from "../../quill/video.js";
import dayjs from "dayjs";
Quill.register(Video, true);
export default {
  props: ["options", "typeList"],
  name: "contentOperation",
  components: {
    quillEditor,
  },
  data() {
    let that = this;
    const query = this.options;
    return {
      uploadType: 1, // 上传类型
      uploadStatus: false,
      type: query.type,
      pageType: query.pageType,
      organId: null,
      // headers: {
      //     Authorization: getToken()
      // },
      content: null,
      dialogFormVisible: false,
      formRadio: 1,
      lookVisible: false,
      dataInfo: {
        title: "",
        type: query.type,
        updateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        content: null,
      },
      editorIndex: 0, // 光标位置
      editorOption: {
        placeholder: "请输入内容",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用iview图片上传
                  document.querySelector(".ivu-upload .el-upload").click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: function (value) {
                if (value) {
                  that.dialogFormVisible = true;
                  let editor = that.$refs.myQuillEditor.quill;
                  // 光标所在位置
                  that.editorIndex = editor.getSelection().index;
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      dialogForm: {
        poster: null,
        url: null,
        videoUrl: null,
      },
      uploadLoading: false,
      uploadImgLoading: false,
      fileList: [],
      dialogFormRules: {
        url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
        videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }],
      },
      outUrlRadio: 0, // 是否使用外部连接，默认不使用
      form: {
        title: null,
        order: null,
        linkUrl: null,
        type: query.type,
        status: 0,
        content: null,
        organIdList: [],
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        organIdList: [{ required: true, message: "请选择分部", trigger: "change" }],
      },
      imageSize: null,
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        KSSAccessKeyId: "",
        // dir: "",
        acl: "public-read",
        name: "",
        // bucket_name: props.bucket_name
      },
      // ossUploadUrl: "https://ks3-cn-beijing.ksyuncs.com/" + "news-info",
      ossUploadUrl: `https://gyt.ks3-cn-beijing.ksyuncs.com`,
      bucket_name: "gyt",
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
    this.init();
  },
  methods: {
    init() {
      this.getList();
      this.addQuillTitle();

      // this.form.type
      let tempTitle = {
        1: "468px * 552px；图片不能超过 2M；",
        2: "456px * 288px； 图片不能超过 2M；",
        3: "686px * 140px； 图片不能超过 2M；",
        4: "图片不能超过 2M；",
        5: "图片不能超过 2M；",
        6: "图片不能超过 2M；",
        7: "图片不能超过 2M；",
        8: "1242px * 2208px； 图片不能超过 2M；",
      };
      this.imageSize = tempTitle[this.form.type];

      this.$refs["form"].clearValidate();
    },
    onVideoComfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let dialogForm = this.dialogForm;
          // 编辑器输入视频
          // 获取富文本组件实例
          let quill = this.editor;
          // 插入图片，res为服务器返回的图片链接地址
          const params = {
            poster: dialogForm.poster,
            url: this.formRadio == 1 ? dialogForm.url : dialogForm.videoUrl,
          };
          quill.insertEmbed(this.editorIndex, "video", params);
          // 调整光标到最后
          quill.setSelection(this.editorIndex + 1, { preload: false });

          this.dialogFormVisible = false;
          this.dialogForm = {
            poster: null,
            url: null,
            videoUrl: null,
          };
        } else {
          return false;
        }
      });
    },
    onDialogClose(diologForm) {
      this.dialogForm = {
        poster: null,
        url: null,
        videoUrl: null,
      };
      this.$refs[diologForm].resetFields();
    },
    addQuillTitle() {
      const oToolBar = document.querySelector(".ql-toolbar"),
        aButton = oToolBar.querySelectorAll("button"),
        aSelect = oToolBar.querySelectorAll("select");
      aButton.forEach(function (item) {
        if (item.className === "ql-script") {
          item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
        } else if (item.className === "ql-indent") {
          item.value === "+1" ? (item.title = "向右缩进") : (item.title = "向左缩进");
        } else {
          item.title = titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(function (item) {
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { organIdList, linkUrl, content, ...rest } = this.form;
          if (this.outUrlRadio == 1) {
            content = null;
          } else {
            linkUrl = null;
          }
          let form = {
            ...rest,
            linkUrl,
            content,
            organIdList: organIdList ? organIdList.join(",") : null,
          };
          if (this.pageType == "create") {
            if (form.id) {
              // 判断有没有Id，如果有则删除
              delete form.id;
            }
            // return false
            await newsAdd(form).then((res) => {
              this.messageTips("添加", res);
            });
          } else if (this.pageType == "update") {
            await newsUpdate(form).then((res) => {
              this.messageTips("修改", res);
            });
          }
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          });
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.$listeners.submited();
        this.$listeners.close();
      } else {
        this.$message.error(res.msg);
      }
    },
    handleSuccess(res) {
      // 获取富文本组件实例
      this.uploadImgLoading = false;
      let quill = this.editor;
      // 如果上传成功
      let url = this.ossUploadUrl + "/" + this.dataObj.key;
      if (url) {
        // 获取光标所在位置
        let length = quill.getSelection().index;

        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message.error("图片插入失败");
      }
    },
    onReSet(formName) {
      this.form = {
        title: null,
        order: null,
        linkUrl: null,
        type: this.type,
        status: 1,
        content: null,
        organIdList: [],
      };
      this.$refs[formName].resetFields();
    },
    onLook() {
      // 预览
      let dataInfo = this.dataInfo;
      dataInfo.title = this.form.title;
      dataInfo.content = this.form.content;
      // 处理图片显示问题
      setTimeout(() => {
        let imgNode = document.querySelectorAll(".msgWrap img");
        if (imgNode.length > 0) {
          imgNode.forEach((item) => {
            item.style.width = "100%";
          });
        }

        let videoNode = document.querySelectorAll(".msgWrap .ql-video");
        if (videoNode.length > 0) {
          videoNode.forEach((item) => {
            item.style.width = "100%";
            item.style.height = "195px";
          });
        }
      }, 500);
      this.lookVisible = true;
    },
    async getList() {
      if (this.pageType == "create") {
        return;
      } else {
        await newsQueryId({ id: this.options.id }).then((res) => {
          if (res.code == 200) {
            let result = res.data;
            let organ = result.organIdList ? result.organIdList.split(",") : [];
            // 是否使用外部链接
            if (result.linkUrl) {
              this.outUrlRadio = 1;
            } else {
              this.outUrlRadio = 0;
            }
            this.form = {
              id: result.id,
              title: result.title,
              order: result.order,
              linkUrl: result.linkUrl,
              type: result.type,
              status: result.status,
              organIdList: organ.map((item) => {
                return +item;
              }),
              content: result.content,
              subType: result.subType,
            };
            this.dataInfo.updateTime = result.updateTime;
          }
        });
      }
    },
    handleUploadImgError(file) {
      this.uploadImgLoading = false;
      this.$message.error("上传失败");
    },
    handleImgSuccess(res, file) {
      this.uploadImgLoading = false;
      let url = this.ossUploadUrl + "/" + this.dataObj.key;
      if (url) {
        this.dialogForm.poster = url;
      } else {
        this.$message.error("上传失败");
      }
    },
    async beforeImgUpload(file) {
      const imageType = {
        "image/png": true,
        "image/jpeg": true,
      };
      const isImage = imageType[file.type];
      const isLt2M = file.size / 1024 / 1024 < 2;
      isImage, isLt2M;
      if (!isImage) {
        this.$message.error("只能上传图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      if (isImage && isLt2M) {
        this.uploadImgLoading = true;
      }

      try {
        let fileName = file.name.replaceAll(" ", "_");
        let key = new Date().getTime() + fileName;
        let obj = {
          filename: fileName,
          bucketName: this.bucket_name,
          postData: {
            filename: fileName,
            acl: "public-read",
            key: key,
            unknowValueField: [],
          },
        };

        const res = await policy(obj);
        this.dataObj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          // dir: "",
          acl: "public-read",
          name: fileName,
          // bucket_name: props.bucket_name
        };
      } catch (e) {
        console.log(e);
        return false;
      }
      return isImage && isLt2M;
    },
    typeCheck(type) {
      let params = {
        1: "精彩活动",
        2: "热门资讯",
        4: "专项训练",
        7: "知识库",
        19: "系统通知",
      };
      return params[type] ? params[type] : "管乐迷";
    },
    typeIndex(type) {
      let tempTitle = {
        1: 0,
        2: 1,
        3: 4,
        4: 2,
        5: 3,
        6: 5,
        7: 6,
        8: 7,
        19: 8,
      };
      return tempTitle[type];
    },
    onEditorChange({ quill, html, text }) {
      this.form.content = html;
    },
    async beforeUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 100;

      //   if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG 格式!');
      //   }
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 100MB!");
      }
      this.uploadLoading = true;
      try {
        let fileName = file.name.replaceAll(" ", "_");
        let key = new Date().getTime() + fileName;
        let obj = {
          filename: fileName,
          bucketName: this.bucket_name,
          postData: {
            filename: fileName,
            acl: "public-read",
            key: key,
            unknowValueField: [],
          },
        };

        const res = await policy(obj);
        this.dataObj = {
          policy: res.data.policy,
          signature: res.data.signature,
          key: key,
          KSSAccessKeyId: res.data.kssAccessKeyId,
          // dir: "",
          acl: "public-read",
          name: fileName,
          // bucket_name: props.bucket_name
        };
      } catch (e) {
        console.log(e);
        return false;
      }
      return isLt2M;
    },
    handleUploadError(file) {
      this.uploadLoading = false;
      this.$message.error("上传视频失败");
    },
    handleUploadSuccess(file, fileList) {
      this.uploadLoading = false;
      let url = this.ossUploadUrl + "/" + this.dataObj.key;
      if (url) {
        this.$message.success("上传视频成功");
        this.dialogForm.videoUrl = url;
      } else {
        this.$message.error("上传视频失败");
      }
    },
    handleExceed(files, fileList) {
      this.$message.error("您已上传过视频");
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
};
</script>
<style lang="scss" scoped>
.systemNotifyModel {
  min-width: 100%;
}
.el-input {
  width: 400px;
}
::v-deep .el-select {
  width: 400px !important;
  .el-input {
    width: 400px;
  }
  .el-select-dropdown {
    width: 400px;
  }
}
::v-deep .ql-editor {
  min-height: 300px;
  padding: 0;
}
::v-deep .ql-container .ql-editor {
  max-height: 500px;
  padding: 15px;
}
.el-row {
  margin-top: 40px;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.el-input-group {
  width: 200px;
  margin: 0 20px;
}
::v-deep .el-tree-node__content {
  height: 40px !important;
}
::v-deep .avatar-uploader .el-upload,
::v-deep .upload-demo .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.ivu-upload {
  display: none;
}

.sd-container {
  // padding: 15px;
  h2 {
    height: auto;
    font-weight: 500;
    color: rgba(68, 68, 68, 1);
    line-height: 37px;
    font-size: 26px;
    margin-bottom: 10px;
  }

  .titleInfo {
    height: 15px;
    line-height: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #444;
    margin-bottom: 25px;
  }
  .imgWrap {
    /* width: 100;
    height: 1.45rem; */
    margin-bottom: 0.15rem;
    p {
      font-size: 0.16rem;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(68, 68, 68, 1);
      line-height: 0.28rem;
      text-indent: 0.32rem;
    }
    img {
      width: 100%;
    }
  }
}
.imageSize {
  color: red;
  line-height: 1.5;
}
</style>