|
|
@@ -0,0 +1,1144 @@
|
|
|
+<template>
|
|
|
+ <div class="mainBox">
|
|
|
+ <div class="layerBox">
|
|
|
+ <tableTitle :name="tableDivTitle"/>
|
|
|
+ <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
|
|
|
+ <div class="formDiv">
|
|
|
+ <div v-if="creatNews_user_type==10000">
|
|
|
+ <el-form-item label="站点名称" prop="title" class="custom-align-right">
|
|
|
+ <template #label>
|
|
|
+ <span class="askBox">
|
|
|
+ 站点名称：
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <el-input v-model="form.title" autocomplete="off" placeholder="请输入站点名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
|
|
|
+ <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData" filterable clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="招聘职位名称" prop="linkurl" class="custom-align-right">
|
|
|
+ <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入招聘职位名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作者：" prop="author" class="custom-align-right">
|
|
|
+ <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div>
|
|
|
+ <div v-if="creatNews_user_type==10000">
|
|
|
+
|
|
|
+ <el-form-item label="站点名称:" prop="cat_arr_id" class="custom-align-right">
|
|
|
+ <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称" :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
|
|
|
+ <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData_2" filterable clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form-item label="推荐等级：" class="custom-align-right" >
|
|
|
+ <el-select v-model="form.level" clearable placeholder="请选择推荐等级..">
|
|
|
+ <el-option label="头条" :value="1"></el-option>
|
|
|
+ <el-option label="轮播图" :value="2"></el-option>
|
|
|
+ <el-option label="推荐图" :value="3"></el-option>
|
|
|
+ <el-option label="热点资讯" :value="4"></el-option>
|
|
|
+ <el-option label="资讯推荐" :value="5"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="缩略图：" class="custom-align-right" prop="imgUrl" v-if="form.level==2||form.level==3">
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
|
|
|
+ <!-- 预览图片 -->
|
|
|
+ <img v-if="imgUrl" :src="imgUrl" class="avatar">
|
|
|
+ <!-- 上传图标 -->
|
|
|
+ <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
+ <div>选择图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="缩略图：" class="custom-align-right" v-else>
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
|
|
|
+ <!-- 预览图片 -->
|
|
|
+ <img v-if="imgUrl" :src="imgUrl" class="avatar">
|
|
|
+ <!-- 上传图标 -->
|
|
|
+ <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
+ <div>选择图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="资讯关键词：" prop="keyword" class="custom-align-right">
|
|
|
+ <template #label>
|
|
|
+ <span class="askBox">
|
|
|
+ 资讯关键词：
|
|
|
+ <el-tooltip class="item" effect="dark" content="资讯关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
|
|
|
+ <i class="el-icon-question"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入资讯关键词"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="资讯描述：" prop="introduce" class="custom-align-right">
|
|
|
+ <template #label>
|
|
|
+ <span class="askBox">
|
|
|
+ 资讯描述：
|
|
|
+ <el-tooltip class="item" effect="dark" content="资讯描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
|
|
|
+ <i class="el-icon-question"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <el-input type="textarea" v-model="form.introduce" class="custom-textarea" placeholder="请输入资讯描述"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="QuillTitle">
|
|
|
+ <span>* </span>资讯内容：
|
|
|
+ <div @click="toggleSourceMode" class="QuillModelBtn">
|
|
|
+ {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="" prop="content">
|
|
|
+ <div class="editor-container">
|
|
|
+ <div v-if="showHtml">
|
|
|
+ <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
|
|
|
+ </div>
|
|
|
+ <!-- 多图上传隐藏的input -->
|
|
|
+ <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="作者：" prop="author" class="custom-align-right">
|
|
|
+ <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="浏览量：" class="custom-align-right">
|
|
|
+ <el-input v-model="form.hits" autocomplete="off" placeholder="请输入浏览量"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
|
|
|
+ <el-radio-group v-model="form.is_original" @change="changeIsOriginal">
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="form.is_original==0">
|
|
|
+ <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
|
|
|
+ <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="来源链接：" prop="fromurl" class="custom-align-right">
|
|
|
+ <el-input v-model="form.fromurl" autocomplete="off" placeholder="请输入来源链接"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="disclaimerBox">
|
|
|
+ <div class="disclaimerTitle">
|
|
|
+ <img src="@/assets/public/check.png"/>同意《免责声明》：
|
|
|
+ <!-- <el-checkbox v-model="disclaimer" disabled="disabled"></el-checkbox> -->
|
|
|
+ </div>
|
|
|
+ <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="form.is_original==1">
|
|
|
+ <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
|
|
|
+ <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称" disabled="disabled"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form-item label="资讯状态：" class="custom-align-right" style="width: 100%;">
|
|
|
+ <el-select v-model="form.status" placeholder="请选择..">
|
|
|
+ <el-option label="已发布" :value="1"></el-option>
|
|
|
+ <el-option label="待发布" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="是否开启投票：" prop="is_survey" class="custom-align-right">
|
|
|
+ <el-radio-group v-model="form.is_survey" >
|
|
|
+ <el-radio :label="1">是</el-radio>
|
|
|
+ <el-radio :label="0">否</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="form.is_survey==1">
|
|
|
+ <el-form-item label="问卷标题：" prop="survey_name" class="custom-align-right">
|
|
|
+ <el-input v-model="form.survey_name" autocomplete="off" placeholder="请输入问卷标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选项：" prop="survey_type" class="custom-align-right">
|
|
|
+ <el-radio-group v-model="form.survey_type" >
|
|
|
+ <el-radio :label="0">单选</el-radio>
|
|
|
+ <el-radio :label="1">多选</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" class="custom-align-right">
|
|
|
+ <div v-for="(input, index) in inputList" :key="index">
|
|
|
+ <div class="formLabelFloatBox">
|
|
|
+ <el-input autocomplete="off" v-model="input.value" maxlength="150" :label-width="formLabelWidth" placeholder=""> <template slot="prepend">{{ index+1 }}</template></el-input>
|
|
|
+ <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addInput(index)" class="formLabeladdIcon"></el-button>
|
|
|
+ <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteInput(index)" class="formLabelDelIcon"></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" class="custom-align-right">
|
|
|
+ <el-checkbox v-model="checked">允许用户自己填写</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBtnBox">
|
|
|
+ <el-button type="info" @click="returnPage">返回</el-button>
|
|
|
+ <el-button type="primary" @click="editToServe" v-if="editStatus==true">确定</el-button>
|
|
|
+ <el-button type="primary" @click="addToServe" v-else>发布资讯</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getWebSiteId,getUseType} from '@/utils/auth'
|
|
|
+//表格标题
|
|
|
+import tableTitle from './components/tableTitle';
|
|
|
+//引入公用样式
|
|
|
+import '@/styles/global.less';
|
|
|
+
|
|
|
+import { quillEditor } from 'vue-quill-editor';
|
|
|
+import 'quill/dist/quill.snow.css';
|
|
|
+import ImageResize from 'quill-image-resize-module';
|
|
|
+import Quill from 'quill'; // 引入 Quill
|
|
|
+import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
|
|
|
+
|
|
|
+// 注册 Image Resize 模块
|
|
|
+Quill.register('modules/imageResize', ImageResize);
|
|
|
+
|
|
|
+//解决富文本样式居中不显示
|
|
|
+import 'quill/dist/quill.core.css';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ quillEditor,
|
|
|
+ tableTitle
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+
|
|
|
+ //0.全局操作 start ------------------------------------------------------------>
|
|
|
+ //表单验证
|
|
|
+ const validateEmpty = (rule,value,callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validateArray = (rule,value,callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ //0.全局操作 end ------------------------------------------------------------>
|
|
|
+ return {
|
|
|
+ websiteid:0,
|
|
|
+ creatNews_pid_num:"0",//请求子导航用的pid
|
|
|
+ creatNews_nav_pool_arr:[],//
|
|
|
+ creatNews_add_nav_pool_arr:[],//
|
|
|
+ creatNews_son_website_id_num:"",
|
|
|
+ checked:false,
|
|
|
+ formLabelWidth: '80px',//表单的长度
|
|
|
+ //1.表单项 start ------------------------------------------------------------>
|
|
|
+ editStatus:false,
|
|
|
+ tableDivTitle:"添加资讯",
|
|
|
+ disclaimer:true,//免责声明
|
|
|
+ //提交表单
|
|
|
+
|
|
|
+ creatNews_user_type:0,//判断用户类型'
|
|
|
+
|
|
|
+ form: {
|
|
|
+
|
|
|
+ user_type:"??",//判断用户类型'
|
|
|
+ cat_arr_id:0,//导航池名称
|
|
|
+ nav_add_pool_id:[],//导航池子级
|
|
|
+
|
|
|
+
|
|
|
+ //1.1使用了外链
|
|
|
+ title: '',//资讯标题
|
|
|
+ islink:0,//是否使用外链 0非 1是
|
|
|
+ linkurl:"",//外链地址
|
|
|
+ //1.2没有使用外链
|
|
|
+ cat_arr_id:'',//导航池名称
|
|
|
+ level:"",//推荐等级
|
|
|
+ imgurl:"",//缩略图
|
|
|
+ keyword:"",//关键词
|
|
|
+ introduce:"",//描述
|
|
|
+ content:"",//内容
|
|
|
+ author:"",//作者
|
|
|
+ hits:"",//浏览量
|
|
|
+ is_original:0,//是否为原创 0非 1是
|
|
|
+ copyfrom:"",//来源名称
|
|
|
+ fromurl:"",//来源地址
|
|
|
+ status:0,//状态 0待发布 1已发布 404已删除
|
|
|
+ web_site_id: 0,
|
|
|
+ is_survey:1,//调查问卷：0：否；1：是；
|
|
|
+ survey_name:"",//问卷名称
|
|
|
+ suvey_array:"",//选项名称集合
|
|
|
+ survey_type:0 //0:单选 1：复选
|
|
|
+ },
|
|
|
+ //1.2 表单验证规则
|
|
|
+ formRules: {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //导航池名称不能为空
|
|
|
+ cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
+
|
|
|
+
|
|
|
+ //资讯名称不能为空
|
|
|
+ title:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //如果使用了外链，外链地址不能为空
|
|
|
+ linkurl:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //导航池名称不能为空
|
|
|
+ cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
+ //推荐等级不能为空
|
|
|
+ //level:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //关键词不能为空
|
|
|
+ keyword:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //描述不能为空
|
|
|
+ introduce:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //内容不能为空
|
|
|
+ content:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //作者不能为空
|
|
|
+ author:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //是否原创不能为空
|
|
|
+ is_original:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //来源名称和地址不能为空
|
|
|
+ copyfrom:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //缩略图不能为空
|
|
|
+ imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ level:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //是否开启投票
|
|
|
+ is_survey:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //问卷标题
|
|
|
+ survey_name:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ //选项
|
|
|
+ survey_type:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ },
|
|
|
+ //1.3富文本编辑器配置
|
|
|
+ showHtml: false, //用于保存源码内容
|
|
|
+ editorHtml: '',
|
|
|
+ editorOptions: {
|
|
|
+ placeholder: '请输入内容...',
|
|
|
+ theme: 'snow', // 主题样式
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: [
|
|
|
+ [{ 'font': [] }], // 字体
|
|
|
+ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
|
+ [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
|
|
|
+ ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
|
|
|
+ [{ 'color': [] }, { 'background': [] }], // 文字颜色、背景颜色
|
|
|
+ [{ 'script': 'sub' }, { 'script': 'super' }], // 上标、下标
|
|
|
+ [{ 'list': 'ordered'}, { 'list': 'bullet' }], // 列表
|
|
|
+ [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
|
|
|
+ [{ 'align': [] }], // 对齐方式
|
|
|
+ ['blockquote', 'code-block'], // 引用、代码块
|
|
|
+ ['link', 'image', 'video'], // 链接、图片、视频
|
|
|
+ ['clean'],
|
|
|
+ [{ 'html': true }] // 添加自定义按钮的占位符
|
|
|
+ ],
|
|
|
+ handlers: {
|
|
|
+ image: () => {
|
|
|
+ this.handleImageClick();
|
|
|
+ },
|
|
|
+ showHtml: function() {
|
|
|
+ this.$emit('toggleSourceMode');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imageResize: {
|
|
|
+ displayStyles: {
|
|
|
+ backgroundColor: 'black',
|
|
|
+ border: 'none',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ modules: ['Resize', 'DisplaySize', 'Toolbar'] // 启用不同的调整方式
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.4图片上传
|
|
|
+ imgUrl:"",//在页面上显示缩略图
|
|
|
+ //获取父级导航池
|
|
|
+ parentKey:0,//获取父级导航
|
|
|
+
|
|
|
+ parentData: {
|
|
|
+ checkStrictly: true,
|
|
|
+ lazy: true,
|
|
|
+ async lazyLoad (node, resolve) {
|
|
|
+ const { level, data } = node;
|
|
|
+ if (data && data.children && data.children.length !== 0) {
|
|
|
+ return resolve(node)
|
|
|
+ }
|
|
|
+ console.log(level)
|
|
|
+ let parentId = level == 0 ? 0 : data.value
|
|
|
+ let parames = {
|
|
|
+ 'pid':parentId
|
|
|
+ }
|
|
|
+ self.$store.dispatch('pool/categoryList',parames).then(res=> {
|
|
|
+ if (res.data) {
|
|
|
+ const nodes = res.data.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ label: item.name,
|
|
|
+ leaf: level >= 3,
|
|
|
+ children: []
|
|
|
+ }))
|
|
|
+ resolve(nodes)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ parentKey_2:0,//获取父级导航
|
|
|
+ parentData_2: {
|
|
|
+ checkStrictly: true,
|
|
|
+ lazy: true,
|
|
|
+ async lazyLoad (node, resolve) {
|
|
|
+ const { level, data } = node;
|
|
|
+ if (data && data.children && data.children.length !== 0) {
|
|
|
+ return resolve(node)
|
|
|
+ }
|
|
|
+
|
|
|
+ let parentId;
|
|
|
+
|
|
|
+ if(data!=undefined){
|
|
|
+ parentId = data.value;
|
|
|
+ }else{
|
|
|
+ parentId = self.creatNews_pid_num.toString();
|
|
|
+ }
|
|
|
+
|
|
|
+ let parames = {
|
|
|
+ 'website_id':self.form.web_site_id ?self.form.web_site_id :self.websiteid,
|
|
|
+ 'pid':parentId
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ self.$store.dispatch('pool/get_creatNews_nav_son_actions',parames).then(res=> {
|
|
|
+
|
|
|
+ if (res.data) {
|
|
|
+ const nodes = res.data.map(item => ({
|
|
|
+ value: item.category_id,
|
|
|
+ label: item.name,
|
|
|
+ leaf: level >= 3,
|
|
|
+ children: []
|
|
|
+ }))
|
|
|
+ resolve(nodes)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ inputList: [
|
|
|
+ { value: '' }
|
|
|
+ ]
|
|
|
+ //表单项 end ------------------------------------------------------------>
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //---------------------------
|
|
|
+ addInput(index) {
|
|
|
+ // 在当前索引后插入一个新的输入框对象
|
|
|
+ if(this.inputList.length>10){
|
|
|
+ this.$message.warning('最多只能添加10个文本框');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.inputList.splice(index + 1, 0, { value: '' });
|
|
|
+ },
|
|
|
+ deleteInput(index) {
|
|
|
+ if (this.inputList.length > 1) {
|
|
|
+ // 如果输入框数量大于 1，则删除当前索引对应的输入框对象
|
|
|
+ this.inputList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.$message.warning('至少保留一个输入框');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.提交表单 start ------------------------------------------------------------>
|
|
|
+ //1.1 直接上传图片
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传缩略图大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ this.imgUrl = res.data.imgUrl;//显示缩略图
|
|
|
+ this.form.imgurl = res.data.imgUrl;//提供表单地址
|
|
|
+ console.log(res.data.imgUrl)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //1.2 提交表单
|
|
|
+ addToServe(){
|
|
|
+ if(this.form.is_survey==1){
|
|
|
+ const hasEmptyInput = this.inputList.some(input => input.value === '');
|
|
|
+ if (hasEmptyInput) {
|
|
|
+ // 如果有输入框为空，弹出提示信息
|
|
|
+ this.$message.error('请确保所有输入框都有内容');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const inputLists = this.inputList.map(input => input.value);
|
|
|
+ const allowList = [this.checked?1:0,""];
|
|
|
+ if(this.checked){
|
|
|
+ inputLists.push(allowList);
|
|
|
+ }
|
|
|
+ if(inputLists.length<3){
|
|
|
+ this.$message.error('投票答案必须大于2条');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.suvey_array = JSON.stringify(inputLists);
|
|
|
+ }
|
|
|
+ // console.log('提交的数据:', this.inputList.map(input => input.value));
|
|
|
+ // this.form.suvey_array
|
|
|
+ // return false;
|
|
|
+ //提交之前先判断是否为外链
|
|
|
+ //如果使用了外链，清理掉除了外链以外的内容
|
|
|
+ if(this.form.islink==true){
|
|
|
+ this.form.islink = 1;
|
|
|
+ this.cleatForm(1)
|
|
|
+ }else{
|
|
|
+ this.form.islink = 0;
|
|
|
+ }
|
|
|
+ //如果推荐等级为空，则设置为0
|
|
|
+ if(this.form.level==""){
|
|
|
+ this.form.level = 0;
|
|
|
+ }
|
|
|
+ //先进行验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ //console.log(this.form)
|
|
|
+ this.$store.dispatch('news/addArticle',this.form).then(res=> {
|
|
|
+ if(res.code==200){
|
|
|
+ //汇报结果
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '已成功添加资讯！'
|
|
|
+ });
|
|
|
+ this.cleatForm(2);
|
|
|
+ //返回列表页
|
|
|
+ this.returnPage()
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: "资讯发布失败，请稍后再试！"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.3 清理表单
|
|
|
+ cleatForm(type){
|
|
|
+ if(type==1){
|
|
|
+ //使用了外链，进行部分表单清理
|
|
|
+ //this.form.cat_arr_id = "";
|
|
|
+ this.form.level = "";
|
|
|
+ this.form.imgurl = "";
|
|
|
+ this.form.keyword = "";
|
|
|
+ this.form.introduce = "";
|
|
|
+ this.form.content = "";
|
|
|
+ //this.form.author = "";
|
|
|
+ this.form.hits = "";
|
|
|
+ this.form.is_original = "";
|
|
|
+ this.form.copyfrom = "";
|
|
|
+ this.form.fromurl = "";
|
|
|
+ this.form.status = "";
|
|
|
+ }
|
|
|
+ if(type==2){
|
|
|
+ //完全清理表单
|
|
|
+ this.form.title = "";
|
|
|
+ this.form.islink = "";
|
|
|
+ this.form.linkurl = "";
|
|
|
+ this.form.cat_arr_id = "";
|
|
|
+ this.form.level = "";
|
|
|
+ this.form.imgurl = "";
|
|
|
+ this.form.keyword = "";
|
|
|
+ this.form.introduce = "";
|
|
|
+ this.form.content = "";
|
|
|
+ this.form.author = "";
|
|
|
+ this.form.hits = "";
|
|
|
+ this.form.is_original = "";
|
|
|
+ this.form.copyfrom = "";
|
|
|
+ this.form.fromurl = "";
|
|
|
+ this.form.status = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //提交表单 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //2.跳转操作 start ------------------------------------------------------------>
|
|
|
+ returnPage(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/articleList',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //跳转操作 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //3.回显操作 ------------------------------------------------------------>
|
|
|
+ //3.1回显数据
|
|
|
+ getMainData() {
|
|
|
+ let data = {
|
|
|
+ id: this.$route.query.id
|
|
|
+ };
|
|
|
+ this.$store.dispatch('news/getArticleInfo', data).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.form.title = res.data.title;
|
|
|
+ //判断是否使用了外链
|
|
|
+ if(res.data.islink==1){
|
|
|
+ this.form.islink = true;
|
|
|
+ }else{
|
|
|
+ this.form.islink = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ //不是原创的时候显示来源
|
|
|
+ if(res.data.is_original==1){
|
|
|
+ this.form.is_original = 1;
|
|
|
+ this.form.copyfrom = "本网";
|
|
|
+ }else{
|
|
|
+ this.form.is_original = 0;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.is_original = 0;
|
|
|
+ console.log('is_original:', this.form.is_original); // 确保值已更新
|
|
|
+ });
|
|
|
+ this.form.copyfrom = res.data.copyfrom;
|
|
|
+ this.form.linkurl = res.data.linkurl;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.form.web_site_id=res.data.web_site_id //站点名称
|
|
|
+
|
|
|
+ this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
|
|
|
+
|
|
|
+ this.parentKey += 1; // 触发级联选择器重新加载
|
|
|
+ this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
|
|
|
+
|
|
|
+ this.form.level = res.data.level;
|
|
|
+ this.form.imgurl = res.data.imgurl;
|
|
|
+ this.imgUrl = res.data.imgurl;
|
|
|
+ this.form.keyword = res.data.keyword;
|
|
|
+ this.form.introduce = res.data.introduce;
|
|
|
+ this.form.content = res.data.content;
|
|
|
+ this.form.author = res.data.author;
|
|
|
+ this.form.hits = res.data.hits;
|
|
|
+ this.form.is_original = res.data.is_original;
|
|
|
+ this.form.copyfrom = res.data.copyfrom;
|
|
|
+ this.form.fromurl = res.data.fromurl;
|
|
|
+ this.form.status = res.data.status;
|
|
|
+ this.form.survey_name = res.data.survey_name;
|
|
|
+ this.form.is_survey = res.data.is_survey;
|
|
|
+ this.form.survey_type = res.data.survey_type;
|
|
|
+ this.inputList = [];
|
|
|
+ if(res.data.survey_array.length>0){
|
|
|
+ res.data.survey_array.forEach(item => {
|
|
|
+ if(item.is_other==0){
|
|
|
+ this.inputList.push({"value":item.choice_name});
|
|
|
+ }else{
|
|
|
+ this.checked = true
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.inputList.push({"value":""});
|
|
|
+ }
|
|
|
+ console.log( this.inputList)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async loadCascaderPath(path) {
|
|
|
+ for (let i = 0; i < path.length; i++) {
|
|
|
+ const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
|
|
|
+ const level = i; // 当前层级的索引
|
|
|
+
|
|
|
+ await this.$store.dispatch('pool/categoryList', { pid: parentId })
|
|
|
+ .then((res) => {
|
|
|
+ const nodes = res.data.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ label: item.name,
|
|
|
+ leaf: level >= 3, // 假设4层结构，设置叶子节点标记
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 级联选择器加载数据
|
|
|
+ if (level === path.length - 1) {
|
|
|
+ this.form.cat_arr_id = path; // 确保最后一级路径正确设置
|
|
|
+ this.parentKey += 1; // 强制刷新 cascader
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.3提交修改
|
|
|
+ editToServe(){
|
|
|
+ //提交之前先判断是否为外链
|
|
|
+ //如果使用了外链，清理掉除了外链以外的内容
|
|
|
+ if(this.form.is_survey==1){
|
|
|
+ const hasEmptyInput = this.inputList.some(input => input.value === '');
|
|
|
+ if (hasEmptyInput) {
|
|
|
+ // 如果有输入框为空，弹出提示信息
|
|
|
+ this.$message.error('请确保所有输入框都有内容');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const inputLists = this.inputList.map(input => input.value);
|
|
|
+ const allowList = [this.checked?1:0,""];
|
|
|
+ if(this.checked){
|
|
|
+ inputLists.push(allowList);
|
|
|
+ }
|
|
|
+ if(inputLists.length<3){
|
|
|
+ this.$message.error('投票答案必须大于2条');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.suvey_array = JSON.stringify(inputLists);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.form)
|
|
|
+ if(this.form.islink==1){
|
|
|
+ this.cleatForm(1)
|
|
|
+ }
|
|
|
+ //如果推荐等级为空，则设置为0
|
|
|
+ if(this.form.level==""){
|
|
|
+ this.form.level = 0;
|
|
|
+ }
|
|
|
+ //添加要修改的id
|
|
|
+ this.form.id = this.editId;
|
|
|
+ //先进行验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ //console.log(this.form)
|
|
|
+ this.$store.dispatch('news/updateArticle',this.form).then(res=> {
|
|
|
+ if(res.code!=200){
|
|
|
+ this.$message.error("修改失败，请稍后再试！");
|
|
|
+ }else{
|
|
|
+ //汇报结果
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '已成功编辑资讯！'
|
|
|
+ });
|
|
|
+ this.cleatForm(2);
|
|
|
+ //返回列表页
|
|
|
+ this.returnPage()
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.4 修改是否原创
|
|
|
+ changeIsOriginal(){
|
|
|
+ if(this.form.is_original==1){
|
|
|
+ this.form.copyfrom = "本网";
|
|
|
+ }else{
|
|
|
+ this.form.copyfrom = "";
|
|
|
+ this.form.fromurl = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //跳转操作 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //4.富文本编辑器 start ------------------------------------------------------------>
|
|
|
+ //4.1 编辑器点击上传图片
|
|
|
+ handleImageClick() {
|
|
|
+ this.$refs.multiFileInput.click(); // 打开文件选择框
|
|
|
+ },
|
|
|
+ handleMultipleFiles(event) {
|
|
|
+ const files = event.target.files;
|
|
|
+ if (files.length) {
|
|
|
+ this.uploadMultipleImages(files); // 处理多图片上传
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadMultipleImages(files) {
|
|
|
+ const uploadPromises = [];
|
|
|
+ for (let i = 0; i < files.length; i++) {
|
|
|
+ uploadPromises.push(this.uploadImage(files[i]));
|
|
|
+ }
|
|
|
+
|
|
|
+ Promise.all(uploadPromises).then(urls => {
|
|
|
+ const quillEditor = this.$refs.quillEditor.quill;
|
|
|
+ urls.forEach(url => {
|
|
|
+ const range = quillEditor.getSelection();
|
|
|
+ quillEditor.insertEmbed(range.index, 'image', url); // 在编辑器中插入图片
|
|
|
+ });
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error('图片上传失败，请重试！');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadImage(file) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+ return this.$store.dispatch('pool/uploadFile', formData)
|
|
|
+ .then(res => {
|
|
|
+ if (res && res.data && res.data.imgUrl) {
|
|
|
+ return res.data.imgUrl;
|
|
|
+ } else {
|
|
|
+ throw new Error('图片上传失败');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$message.error('图片上传失败，请重试！');
|
|
|
+ throw error;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //4.2 图片粘贴上传
|
|
|
+ // 处理从网页粘贴的图片 URL
|
|
|
+ handleImageFromWeb(imageUrl) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ console.log('开始下载图片:', imageUrl);
|
|
|
+
|
|
|
+ this.fetchImageAsBlob(imageUrl).then((blob) => {
|
|
|
+ console.log('图片已下载为 Blob:', blob);
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', blob, 'image.jpg');
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile', formData).then((res) => {
|
|
|
+ if (res && res.data && res.data.imgUrl) {
|
|
|
+ console.log('图片上传成功:', res.data.imgUrl);
|
|
|
+ resolve(res.data.imgUrl);
|
|
|
+ } else {
|
|
|
+ console.log('图片上传失败，保留原 URL:', imageUrl);
|
|
|
+ resolve(imageUrl);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('图片上传时出现错误:', error);
|
|
|
+ resolve(imageUrl);
|
|
|
+ });
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('图片下载失败:', error);
|
|
|
+ resolve(imageUrl);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fetchImageAsBlob(url) {
|
|
|
+ return fetch(url)
|
|
|
+ .then(response => {
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error('Failed to fetch image');
|
|
|
+ }
|
|
|
+ return response.blob();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //编辑源码
|
|
|
+ toggleSourceMode() {
|
|
|
+ if (!this.showHtml) {
|
|
|
+ // 切换到源码模式，将编辑器内容同步到 textarea 中
|
|
|
+ this.editorHtml = this.$refs.quillEditor.quill.root.innerHTML;
|
|
|
+ this.showHtml = true; // 显示 textarea
|
|
|
+ } else {
|
|
|
+ // 切换回富文本模式，将 textarea 内容同步回编辑器
|
|
|
+ this.showHtml = false; // 显示 Quill 编辑器
|
|
|
+
|
|
|
+ // Quill 编辑器可能被销毁，所以使用 $nextTick 确保 DOM 渲染完成后再操作编辑器
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.quillEditor) {
|
|
|
+ this.$refs.quillEditor.quill.root.innerHTML = this.editorHtml;
|
|
|
+ } else {
|
|
|
+ console.error('Quill 编辑器实例未找到');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //富文本编辑器 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+
|
|
|
+ get_creatNews_form_id_fun(){//判断用户类型ajax
|
|
|
+
|
|
|
+ this.$store.dispatch('public/getInfo').then(res=> {
|
|
|
+ // console.log("res======",res)
|
|
|
+ this.form.user_type = res.data.type_id;
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // console.log("this.form.user_type==",this.form);
|
|
|
+ // console.log("this.form.user_type==2",this.form.user_type);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ get_creatNews_nav_pool_arr_fun(){//xx
|
|
|
+ this.$store.dispatch('pool/get_creatNews_nav_actions',{page:1,pageSize:666666}).then(res=> {
|
|
|
+
|
|
|
+
|
|
|
+ res.data.rows.forEach(( per_obj ) => {
|
|
|
+
|
|
|
+ let new_per = {
|
|
|
+ label: per_obj.website_name,
|
|
|
+ value: per_obj.id,
|
|
|
+ }
|
|
|
+
|
|
|
+ this.creatNews_nav_pool_arr.push( new_per )
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ creatNews_nav_pool_change_fun(){
|
|
|
+
|
|
|
+ //xx 导航池级
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ this.form.web_site_id = this.form.web_site_id[0]
|
|
|
+
|
|
|
+ that.parentKey_2 += 1;
|
|
|
+
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.creatNews_pid_num),website_id:String(this.form.web_site_id)}).then(res=> {
|
|
|
+
|
|
|
+
|
|
|
+ if(res.data.length==0){//没有导航池子级
|
|
|
+ // alert("没有导航池子级");
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.creatNews_add_nav_pool_arr=res.data;
|
|
|
+
|
|
|
+ this.creatNews_add_nav_pool_arr.forEach(( per_obj ) => {
|
|
|
+ per_obj.label=per_obj.name,
|
|
|
+ per_obj.value=per_obj.id,
|
|
|
+
|
|
|
+ this.creatNews_pid_num=per_obj.category_id
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted(){
|
|
|
+ this.creatNews_user_type = getUseType()
|
|
|
+ this.websiteid= getWebSiteId()
|
|
|
+
|
|
|
+ this.get_creatNews_form_id_fun()//
|
|
|
+ this.get_creatNews_nav_pool_arr_fun()//
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //1.判断是新建还是回显
|
|
|
+ if(this.$route.query.id!=undefined){
|
|
|
+ this.editId = this.$route.query.id;
|
|
|
+ this.editStatus = true;
|
|
|
+ console.log("编辑新闻！")
|
|
|
+ this.getMainData();
|
|
|
+ }else{
|
|
|
+ this.editStatus = false;
|
|
|
+ console.log("添加新闻！")
|
|
|
+ }
|
|
|
+
|
|
|
+ //复制内容到富文本 start ------------------------------------------------------------>
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const quillEditor = this.$refs.quillEditor.quill;
|
|
|
+
|
|
|
+ if (quillEditor) {
|
|
|
+ console.log('Quill 编辑器已初始化');
|
|
|
+
|
|
|
+ // 在粘贴事件触发时，记录所有 img 的 src
|
|
|
+ quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
|
|
+ if (node.tagName === 'IMG') {
|
|
|
+ const imageUrl = node.getAttribute('src');
|
|
|
+ console.log('检测到粘贴的图片 URL:', imageUrl);
|
|
|
+
|
|
|
+ if (imageUrl && !imageUrl.startsWith('data:') && !imageUrl.startsWith('file://')) {
|
|
|
+ // 先处理图片上传
|
|
|
+ this.handleImageFromWeb(imageUrl).then((uploadedImageUrl) => {
|
|
|
+ // 查找编辑器中所有 img 标签并替换 src
|
|
|
+ const imgs = quillEditor.root.querySelectorAll('img');
|
|
|
+ imgs.forEach((img) => {
|
|
|
+ if (img.getAttribute('src') === imageUrl) {
|
|
|
+ img.setAttribute('src', uploadedImageUrl); // 替换 src
|
|
|
+ console.log('图片 src 已替换为:', uploadedImageUrl);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return delta; // 返回原始 delta
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error('Quill 初始化失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ //复制富文本 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ //文本编辑器
|
|
|
+ .QuillTitle {
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ font-weight:bold;
|
|
|
+ padding-left: 30px;
|
|
|
+ span{
|
|
|
+ color: #ff4949
|
|
|
+ }
|
|
|
+ .QuillModelBtn {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .editor-container {
|
|
|
+ height: 420px;
|
|
|
+ padding-bottom:20px;
|
|
|
+ }
|
|
|
+ .my-quill-editor {
|
|
|
+ height: 320px;
|
|
|
+ }
|
|
|
+ .ql-editor {
|
|
|
+ height: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 富文本对齐方式 */
|
|
|
+ .ql-align-center{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .ql-align-right{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .ql-indent-1{
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .ql-indent-2{
|
|
|
+ padding-left: 32px;
|
|
|
+ }
|
|
|
+ .ql-indent-3{
|
|
|
+ padding-left: 48px;
|
|
|
+ }
|
|
|
+ .ql-indent-4{
|
|
|
+ padding-left: 64px;
|
|
|
+ }
|
|
|
+ .ql-indent-5{
|
|
|
+ padding-left: 80px;
|
|
|
+ }
|
|
|
+ .ql-indent-6{
|
|
|
+ padding-left: 96px;
|
|
|
+ }
|
|
|
+ .ql-indent-7{
|
|
|
+ padding-left: 112px;
|
|
|
+ }
|
|
|
+ .ql-indent-8{
|
|
|
+ padding-left: 128px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
+ ::v-deep .custom-form-item > .el-form-item__label {
|
|
|
+ line-height: 140px !important;
|
|
|
+ }
|
|
|
+ ::v-deep .custom-textarea .el-textarea__inner {
|
|
|
+ resize: none; /* 禁止用户拖拽调整大小 */
|
|
|
+ }
|
|
|
+ ::v-deep .custom-align-right .el-form-item__label {
|
|
|
+ text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ }
|
|
|
+ ::v-deep .el-select {
|
|
|
+ width: 100%; /* 禁止用户拖拽调整大小 */
|
|
|
+ }
|
|
|
+ ::v-deep .el-input-group__prepend {
|
|
|
+ color: black !important;
|
|
|
+ }
|
|
|
+ .formLabelFloatBox {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ .formLabeladdIcon {
|
|
|
+ position: absolute;
|
|
|
+ right:45px;
|
|
|
+ top:5px;
|
|
|
+ width:38px;
|
|
|
+ height:24px;
|
|
|
+ }
|
|
|
+ .formLabelDelIcon {
|
|
|
+ position: absolute;
|
|
|
+ right:5px;
|
|
|
+ top:5px;
|
|
|
+ width:38px;
|
|
|
+ height:24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
+</style>
|
15313670163