|
|
@@ -0,0 +1,748 @@
|
|
|
+<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 label="所属分部"
|
|
|
+ prop="organIdList">
|
|
|
+ <select-all v-model.trim="form.organIdList"
|
|
|
+ style="width: 400px !important"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择分部"
|
|
|
+ multiple
|
|
|
+ clearable>
|
|
|
+ <el-option v-for="(item,index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </select-all>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="是否使用外链">
|
|
|
+ <el-radio-group v-model="outUrlRadio">
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="外链地址"
|
|
|
+ prop="linkUrl"
|
|
|
+ v-if="outUrlRadio == 1"
|
|
|
+ :rules='[{ required: true, message: "请输入外链地址", trigger: "blur" }]'>
|
|
|
+ <el-input v-model.trim="form.linkUrl" placeholder="请输入外链地址"></el-input>
|
|
|
+ </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"
|
|
|
+ :headers="headers"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ accept=".jpg, .jpeg, .png, .gif"
|
|
|
+ :max-size="2048"
|
|
|
+ multiple
|
|
|
+ action="/api-web/uploadFile">
|
|
|
+ <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="/api-web/uploadFile"
|
|
|
+ :headers="headers"
|
|
|
+ :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="/api-web/uploadFile"
|
|
|
+ :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 { 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'],
|
|
|
+ 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,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ // 获取富文本组件实例
|
|
|
+ let quill = this.editor;
|
|
|
+ // 如果上传成功
|
|
|
+ if (res.code) {
|
|
|
+ // 获取光标所在位置
|
|
|
+ let length = quill.getSelection().index;
|
|
|
+ // 插入图片，res为服务器返回的图片链接地址
|
|
|
+ quill.insertEmbed(length, "image", res.data.url);
|
|
|
+ // 调整光标到最后
|
|
|
+ quill.setSelection(length + 1);
|
|
|
+ } else {
|
|
|
+ // 提示信息，需引入Message
|
|
|
+ this.$message.error("图片插入失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReSet (formName) {
|
|
|
+ const query = this.$route.query
|
|
|
+ this.form = {
|
|
|
+ title: null,
|
|
|
+ order: null,
|
|
|
+ linkUrl: null,
|
|
|
+ type: query.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
|
|
|
+ };
|
|
|
+ this.dataInfo.updateTime = result.updateTime
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleUploadImgError (file) {
|
|
|
+ this.uploadImgLoading = false
|
|
|
+ this.$message.error('上传失败')
|
|
|
+ },
|
|
|
+ handleImgSuccess (res, file) {
|
|
|
+ this.uploadImgLoading = false
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.dialogForm.poster = res.data.url
|
|
|
+ } else {
|
|
|
+ this.$message.error('上传失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeImgUpload (file) {
|
|
|
+ const imageType = {
|
|
|
+ "image/png": true,
|
|
|
+ "image/jpeg": true,
|
|
|
+ "image/gif": true
|
|
|
+ };
|
|
|
+ const isImage = imageType[file.type];
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error("只能上传图片格式!");
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error("上传图片大小不能超过 2MB!");
|
|
|
+ }
|
|
|
+ if (isImage && isLt2M) {
|
|
|
+ this.uploadImgLoading = true
|
|
|
+ }
|
|
|
+ return isImage && isLt2M;
|
|
|
+ },
|
|
|
+ typeCheck (type) {
|
|
|
+ let params = {
|
|
|
+ 1: '精彩活动',
|
|
|
+ 2: '热门资讯',
|
|
|
+ 4: '专项训练',
|
|
|
+ 7: '知识库',
|
|
|
+ 9: '系统通知',
|
|
|
+ }
|
|
|
+ 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,
|
|
|
+ 9: 8
|
|
|
+ };
|
|
|
+ return tempTitle[type];
|
|
|
+ },
|
|
|
+ onEditorChange ({ quill, html, text }) {
|
|
|
+ this.form.content = html;
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ return isLt2M;
|
|
|
+ },
|
|
|
+ handleUploadError (file) {
|
|
|
+ this.uploadLoading = false
|
|
|
+ this.$message.error('上传视频失败')
|
|
|
+ },
|
|
|
+ handleUploadSuccess (file, fileList) {
|
|
|
+ this.uploadLoading = false
|
|
|
+ if (file.code == 200) {
|
|
|
+ this.$message.success('上传视频成功')
|
|
|
+ this.dialogForm.videoUrl = file.data.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;
|
|
|
+}
|
|
|
+/deep/.ql-editor {
|
|
|
+ min-height: 300px;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+/deep/.ql-container .ql-editor {
|
|
|
+ max-height: 500px;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+.el-button--primary {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+/deep/.el-tree-node__content {
|
|
|
+ height: 40px !important;
|
|
|
+}
|
|
|
+/deep/.avatar-uploader .el-upload,
|
|
|
+/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>
|
