2025-2-24-admin_home

src/views/news/NewList - 副本.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">资讯题目：</div>
+              <el-input placeholder="请输入资讯题目" autocomplete="off" v-model="getApiData.title"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">导航池名称：</div>
+              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.category_name"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">作者：</div>
+              <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.author"/>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="layerBoxLineTwo">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">引用外链：</div>
+              <el-select v-model="getApiData.islink" placeholder="请选择..">
+                <el-option label="否" value="0"></el-option>
+                <el-option label="是" value="1"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">资讯状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择..">
+                <el-option label="待发布" value="0"></el-option>
+                <el-option label="已发布" value="1"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="goCreat">发布资讯</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="title" label="资讯题目" width=""></el-table-column>
+            <el-table-column prop="category_name" label="导航池名称" width=""></el-table-column>
+            <el-table-column prop="islink" label="是否引用外链" width=""></el-table-column>
+            <el-table-column prop="fromurl" label="来源" width=""></el-table-column>
+            <el-table-column prop="author" label="作者" width=""></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+            <el-table-column prop="status" label="状态" width="">
+              <template slot-scope="scope">
+                <span v-if="scope.row.status==404">404</span>
+                <el-switch
+                  v-else
+                  v-model="scope.row.status"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="upRow(scope.row.id,scope.row.status)"
+                ></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"资讯列表",
+      tableData:[],//内容
+      editId:0,//要修改的网站id
+      getApiData:{
+        title:"",//标题
+        category_name:"",//导航池id
+        author:"",//作者
+        islink:"",//是否使用外链
+        status:"",//资讯状态
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      allCount:0,//总条数
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(type){
+      if(type=="search"){
+        this.getApiData.page = 1;
+      }
+      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
+
+        //格式化：islink=0为不使用外面 islink=1为使用外链
+        //status=1为显示 status=2为不显示
+        let data = [];
+        for(let item of res.data.rows){
+          // if(item.status==0){item.status="隐藏"}
+          // if(item.status==1){item.status="显示"}
+          // if(item.status==404){item.status="已删除"}
+          if(item.islink==0){item.islink="否"}
+          if(item.islink==1){item.islink="是"}
+          data.push(item)
+        }
+        this.tableData = res.data.rows; //给与内容
+        this.allCount = res.data.count; //给与总条数
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+
+
+    
+    //1.2 删除内容
+    deleteRow(id){
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('news/delArticle',{id:id}).then(res=> {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.3 修改网站状态
+    upRow(id,status){
+      let data = {
+        id:id,
+        status:status
+      }
+      this.$store.dispatch('news/upArticleStatus',data).then(res=> {
+        if(res.code==200){
+          this.$message({
+            type: 'success',
+            message: '资讯状态已修改!'
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList(){
+      this.tableData = [];
+      this.getApiData.title = "";
+      this.getApiData.category_name = "";
+      this.getApiData.author = "";
+      this.getApiData.islink = "";
+      this.getApiData.status = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.添加新闻 start ------------------------------------------------------------>
+    //跳转到资讯发布页面
+    goCreat(){
+      this.$router.push({
+        path: '/creatNews',
+      });
+    },
+    goEdit(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/creatNews',
+        query: data
+      });
+    }
+    //添加新闻 end ------------------------------------------------------------>
+  },
+  mounted(){
+    //1.获得初始数据
+    this.getData();
+ 
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/news/creatNews_3.vue

@@ -0,0 +1,1046 @@
+<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">
+          <el-form-item label="资讯题目：" prop="title" 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.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+
+          <div v-if="form.islink==true"> 
+            <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="form.islink==false">
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <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="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>   -->
+
+
+                  <!-- {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}} -->
+                  
+                   <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_2" filterable clearable></el-cascader>
+                               <!-- <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" @change="creatNews_nav_son_pool_change_fun()" filterable clearable></el-cascader> -->
+                  </el-form-item>  
+                  
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" 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">
+                <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="linkurl" class="custom-align-right">
+                <el-input v-model="form.linkurl" 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>
+            <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>
+          </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 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);
+
+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.全局操作xx end ------------------------------------------------------------>
+    return {
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:"11",//请求子导航用的pid
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型xx'
+         
+      //xx
+      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
+
+      },
+      //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}],
+
+        //推荐等级不能为空
+        //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}]
+      },
+      //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,//获取父级导航 xx
+
+      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)
+            }
+          })
+        }
+      },
+       
+      
+      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)
+          }
+          console.log(level)
+
+          console.log("111222333===========")
+          console.log(self.creatNews_pid_num)
+          console.log("data==",data)
+          console.log("111222333===========")
+          let parentId;
+         
+          if(data){
+            parentId = level == data.value;
+             
+
+          }else{ 
+            parentId = level == self.creatNews_pid_num.toString();
+          }
+          
+          let parames = {
+            'website_id':self.form.web_site_id,
+            'pid':parentId
+          }
+                              //  pool/get_creatNews_nav_son_actions
+      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+
+
+
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+
+      creatNews_nav_son_pool_change_fun(){//第2个change xx
+            console.log("this.cat_arr_id====",this.form.cat_arr_id)
+            console.log("this.creatNews_add_nav_pool_arr==",this.creatNews_add_nav_pool_arr)
+            
+
+        },
+
+
+
+    //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.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('news/addArticle',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).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;
+        }else{
+          this.form.is_original = 0;
+          this.$nextTick(() => {
+            this.form.is_original = 0;
+            console.log('is_original:', this.form.is_original); // 确保值已更新
+          });
+          // <el-radio v-model="form.is_original" label="1">是</el-radio>
+          // <el-radio v-model="form.is_original" label="0">不是</el-radio>
+          this.form.linkurl = res.data.linkurl;
+        }
+        
+
+
+        // 回显导航池
+        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;
+      }).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.islink==1){
+        this.cleatForm(1)
+      }
+      //添加要修改的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=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 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
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).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=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  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 )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  导航池级
+              
+            // console.log("this.form.cat_arr_id",this.form.cat_arr_id)
+
+            // const website_id_num = this.form.web_site_id[0]
+            this.form.web_site_id = this.form.web_site_id[0]
+            console.log("选中值：web_site_id====",this.form.web_site_id)
+            console.log("选中值：creatNews_pid==", this.creatNews_pid_num) 
+
+
+            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=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"11",website_id:"2"}).then(res=> {
+                   console.log("change==1=========",res.data)
+                  // console.log("son=========",res.data.length)
+                   
+                  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_add_nav_pool_arr.push( new_per ) 
+                              this.creatNews_pid_num=per_obj.category_id
+                              
+                  })
+ 
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // 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: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //导航池子级=发生变化
+      // creatNews_nav_add_pool_change_fun(){ 
+      //       // this.form.nav_add_pool_id
+
+      //       console.log("this.form.nav_add_pool_idthis.form.nav_add_pool_id==",this.form.nav_add_pool_id[0])
+      //       console.log("creatNews_son_website_id_num==",this.creatNews_son_website_id_num)
+            
+             
+             
+      //       // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.form.nav_add_pool_id[0]),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+      //       this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+      //             console.log("son======222",res.data)
+
+                   
+                   
+      //             if(res.data.length==0){//没有导航池子级
+      //                   return
+      //             }
+
+
+      //             res.data.forEach(( per_obj ) => { 
+
+      //                         let new_per = {
+      //                               label: per_obj.name,
+
+      //                               value: per_obj.id,
+      //                               website_id: per_obj.website_id,
+      //                         }
+
+      //                         this.creatNews_add_nav_pool_arr.push( new_per ) 
+      //             })
+ 
+      //            console.log("this.creatNews_add_nav_pool_arr") 
+
+
+
+      //       }).catch(() => {
+      //         this.$message({
+      //           type: 'info',
+      //           message: '网络错误，请重试！'
+      //         });
+      //       })
+
+
+      // },
+
+
+  },
+
+  created(){
+        
+      
+  },
+   
+   
+  mounted(){
+
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
+    //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;
+  }
+  //执行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穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/creatNews_d2.vue

@@ -0,0 +1,1050 @@
+<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">
+          <el-form-item label="资讯题目：" prop="title" 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.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+
+          <div v-if="form.islink==true"> 
+            <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="form.islink==false">
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <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="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>   -->
+
+
+                  <!-- {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}} -->
+                  
+                   <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-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" @change="creatNews_nav_son_pool_change_fun()" filterable clearable></el-cascader> -->
+                  </el-form-item>  
+                  
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" 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">
+                <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="linkurl" class="custom-align-right">
+                <el-input v-model="form.linkurl" 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>
+            <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>
+          </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 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);
+
+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.全局操作xx end ------------------------------------------------------------>
+    return {
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:"0",//请求子导航用的pid
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型xx'
+         
+      //xx
+      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: ""
+
+      },
+      //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}],
+
+        //推荐等级不能为空
+        //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}]
+      },
+      //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,//获取父级导航 xx
+
+      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,//获取父级导航 xx
+      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)
+          }
+          console.log(level)
+
+          console.log("111222333===========")
+          console.log(self.creatNews_pid_num)
+          console.log("data==",data)
+          console.log("111222333===========")
+          let parentId;
+         
+          if(data!=undefined){
+            parentId = data.value;
+          }else{ 
+            parentId = self.creatNews_pid_num.toString();
+          }
+          
+          let parames = {
+            'website_id':self.form.web_site_id,
+            '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)
+            }
+          })
+        }
+      },
+
+
+
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+
+      creatNews_nav_son_pool_change_fun(){//第2个change xx
+            console.log("this.cat_arr_id====",this.form.cat_arr_id)
+            console.log("this.creatNews_add_nav_pool_arr==",this.creatNews_add_nav_pool_arr)
+            
+
+        },
+
+
+
+    //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.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('news/addArticle',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).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;
+        }else{
+          this.form.is_original = 0;
+          this.$nextTick(() => {
+            this.form.is_original = 0;
+            console.log('is_original:', this.form.is_original); // 确保值已更新
+          });
+          // <el-radio v-model="form.is_original" label="1">是</el-radio>
+          // <el-radio v-model="form.is_original" label="0">不是</el-radio>
+          this.form.linkurl = res.data.linkurl;
+        }
+        
+
+
+        // 回显导航池
+        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;
+      }).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.islink==1){
+        this.cleatForm(1)
+      }
+      //添加要修改的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=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 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
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).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=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  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 )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  导航池级
+            let that = this;
+              
+            // console.log("this.form.cat_arr_id",this.form.cat_arr_id)
+
+            // const website_id_num = this.form.web_site_id[0]
+            this.form.web_site_id = this.form.web_site_id[0]
+            console.log("选中值：web_site_id====",this.form.web_site_id)
+            console.log("选中值：creatNews_pid==", this.creatNews_pid_num) 
+            console.log(112233)
+            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=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"11",website_id:"2"}).then(res=> {
+                   console.log("change==1=========",res.data)
+                  // console.log("son=========",res.data.length)
+                   
+                  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_add_nav_pool_arr.push( new_per ) 
+                    this.creatNews_pid_num=per_obj.category_id      
+                  })
+
+
+                  
+ 
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // 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: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //导航池子级=发生变化
+      // creatNews_nav_add_pool_change_fun(){ 
+      //       // this.form.nav_add_pool_id
+
+      //       console.log("this.form.nav_add_pool_idthis.form.nav_add_pool_id==",this.form.nav_add_pool_id[0])
+      //       console.log("creatNews_son_website_id_num==",this.creatNews_son_website_id_num)
+            
+             
+             
+      //       // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.form.nav_add_pool_id[0]),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+      //       this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+      //             console.log("son======222",res.data)
+
+                   
+                   
+      //             if(res.data.length==0){//没有导航池子级
+      //                   return
+      //             }
+
+
+      //             res.data.forEach(( per_obj ) => { 
+
+      //                         let new_per = {
+      //                               label: per_obj.name,
+
+      //                               value: per_obj.id,
+      //                               website_id: per_obj.website_id,
+      //                         }
+
+      //                         this.creatNews_add_nav_pool_arr.push( new_per ) 
+      //             })
+ 
+      //            console.log("this.creatNews_add_nav_pool_arr") 
+
+
+
+      //       }).catch(() => {
+      //         this.$message({
+      //           type: 'info',
+      //           message: '网络错误，请重试！'
+      //         });
+      //       })
+
+
+      // },
+
+
+  },
+
+  created(){
+        
+      
+  },
+   
+   
+  mounted(){
+
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
+    //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;
+  }
+  //执行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穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/creatNews_f.vue

@@ -0,0 +1,826 @@
+<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">
+          <el-form-item label="资讯题目：" prop="title" 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.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+          <div v-if="form.islink==true"> 
+            <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="form.islink==false">
+            <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="推荐等级：" 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>
+          </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 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 {
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus:false,
+      tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      form: {
+        //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已删除
+      },
+      //1.2 表单验证规则
+      formRules: {
+        //资讯名称不能为空
+        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}]
+      },
+      //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)
+            }
+          })
+        }
+      },
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+    //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.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.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); // 加载路径数据
+        //回显推荐等级
+        if(res.data.level==0){
+          this.form.level = "";
+        }else{
+          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;
+      }).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(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      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 ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //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穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/creatNews_l.vue

@@ -0,0 +1,1070 @@
+<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">
+          <el-form-item label="资讯题目：" prop="title" 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.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+
+          <div v-if="form.islink==true"> 
+            <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="form.islink==false">
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <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="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>   -->
+
+
+                  <!-- {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}} -->
+                  
+                   <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航2" :props="parentData_2" filterable clearable></el-cascader>
+                        <!-- <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" @change="creatNews_nav_son_pool_change_fun()" filterable clearable></el-cascader> -->
+                  </el-form-item>  
+                  
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" 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">
+                <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="linkurl" class="custom-align-right">
+                <el-input v-model="form.linkurl" 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>
+            <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>
+          </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 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);
+
+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.全局操作xx end ------------------------------------------------------------>
+    return {
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:"0",//请求子导航用的pid
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型'
+         
+      //xx
+      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
+
+      },
+      //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}],
+
+        //推荐等级不能为空
+        //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}]
+      },
+      //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,//获取父级导航 xx
+
+      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)
+          }
+        
+
+      //     console.log("111222333===========")
+      //     console.log(self.creatNews_pid_num)
+      //     console.log("data==",data)
+      //     console.log("111222333===========")
+          let parentId;
+         
+          if(data!=undefined){
+            parentId = data.value;
+          }else{ 
+            parentId = self.creatNews_pid_num.toString();
+          }
+          
+          let parames = {
+            'website_id':self.form.web_site_id,
+            'pid':parentId
+            // 'pid':["11","55"]
+          }
+          console.log("======================::::",parames)
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions',parames).then(res=> {
+            console.log("parentId==:",res)
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.category_id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+
+
+
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+
+      creatNews_nav_son_pool_change_fun(){//第2个change 
+            console.log("this.cat_arr_id====",this.form.cat_arr_id)
+            console.log("this.creatNews_add_nav_pool_arr==",this.creatNews_add_nav_pool_arr)
+            
+
+        },
+
+
+
+    //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.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('news/addArticle',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).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;
+        }else{
+          this.form.is_original = 0;
+          this.$nextTick(() => {
+            this.form.is_original = 0;
+            console.log('is_original:', this.form.is_original); // 确保值已更新
+          });
+          // <el-radio v-model="form.is_original" label="1">是</el-radio>
+          // <el-radio v-model="form.is_original" label="0">不是</el-radio>
+          this.form.linkurl = res.data.linkurl;
+        }
+
+       
+
+        this.form.web_site_id=res.data.web_site_id    //站点名称
+
+      //   this.creatNews_pid_num = ["11","35"] //res.data.cat_arr_id //导航池名称：
+      //   this.form.cat_arr_id = [11,35] 
+      //   console.log("回显==res.data==", this.form.web_site_id)
+
+      //   const the_reback_arr = (res.data.cat_arr_id.replace("[","").replace("]","")).split(',') 
+ 
+      //   console.log("the_reback_arr===",the_reback_arr)
+
+
+      //  this.form.cat_arr_id=the_reback_arr
+
+
+
+      //   console.log("form.web_site_id=",this.form.web_site_id)
+
+        // 回显导航池xx
+        this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
+        console.log("====::::",this.form.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;
+
+      }).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.islink==1){
+        this.cleatForm(1)
+      }
+      //添加要修改的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=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加资讯！'
+            });
+            this.cleatForm(2);
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 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
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).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=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  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 )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  导航池级
+            let that = this;
+              
+            // console.log("this.form.cat_arr_id",this.form.cat_arr_id)
+
+            // const website_id_num = this.form.web_site_id[0]
+            this.form.web_site_id = this.form.web_site_id[0]
+            console.log("选中值：web_site_id====",this.form.web_site_id)
+            console.log("选中值：creatNews_pid==", this.creatNews_pid_num) 
+            console.log(112233)
+            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=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"11",website_id:"2"}).then(res=> {
+                   console.log("change==1=========",res.data)
+                  // console.log("son=========",res.data.length)
+                   
+                  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_add_nav_pool_arr.push( new_per ) 
+                    this.creatNews_pid_num=per_obj.category_id      
+                  })
+
+
+                  
+ 
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // 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: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //导航池子级=发生变化
+      // creatNews_nav_add_pool_change_fun(){ 
+      //       // this.form.nav_add_pool_id
+
+      //       console.log("this.form.nav_add_pool_idthis.form.nav_add_pool_id==",this.form.nav_add_pool_id[0])
+      //       console.log("creatNews_son_website_id_num==",this.creatNews_son_website_id_num)
+            
+             
+             
+      //       // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.form.nav_add_pool_id[0]),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+      //       this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+      //             console.log("son======222",res.data)
+
+                   
+                   
+      //             if(res.data.length==0){//没有导航池子级
+      //                   return
+      //             }
+
+
+      //             res.data.forEach(( per_obj ) => { 
+
+      //                         let new_per = {
+      //                               label: per_obj.name,
+
+      //                               value: per_obj.id,
+      //                               website_id: per_obj.website_id,
+      //                         }
+
+      //                         this.creatNews_add_nav_pool_arr.push( new_per ) 
+      //             })
+ 
+      //            console.log("this.creatNews_add_nav_pool_arr") 
+
+
+
+      //       }).catch(() => {
+      //         this.$message({
+      //           type: 'info',
+      //           message: '网络错误，请重试！'
+      //         });
+      //       })
+
+
+      // },
+
+
+  },
+
+  created(){
+        
+      
+  },
+   
+   
+  mounted(){
+
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
+    //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;
+  }
+  //执行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穿透scope选择器 end------------------------------------------------------------>*/
+</style>