手动推荐

package.json

@@ -46,7 +46,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.20.0",
+    "vuedraggable": "^2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },

src/views/news/creatNews.vue

@@ -216,6 +216,8 @@
                   <el-radio :label="0">否</el-radio>
                 </el-radio-group>
               </el-form-item>
+
+
               <div v-if="form.is_survey == 1">
                 <el-form-item label="问卷标题：" prop="survey_name" class="custom-align-right">
                   <el-input v-model="form.survey_name" autocomplete="off" placeholder="请输入问卷标题"></el-input>
@@ -244,6 +246,22 @@
                   <el-checkbox v-model="checked">允许用户自己填写</el-checkbox>
                 </el-form-item>
               </div>
+              <el-form-item label="手动推荐：" prop="commend_id" class="custom-align-right">
+                <el-select v-model="form.commend_id" placeholder="请选择手动推荐名称" multiple filterable clearable remote
+                  :remote-method="remoteMethod" :loading="loading">
+                  <el-option v-for="item in commend_article" :key="item.id" :label="item.title" :value="item.id">
+                  </el-option>
+                </el-select>
+
+              </el-form-item>
+              <el-form-item label="" prop="commend_id" class="custom-align-right">
+                <draggable v-model="form.commend_id" @end="onDragEnd">
+                  <el-tag :key="id" v-for="item in form.commend_id" closable :disable-transitions="false"
+                    @close="handleClose(item)"> {{ item }}
+                  </el-tag>
+                </draggable>
+              </el-form-item>
+
               <el-form-item label="创建时间：" class="custom-align-right" v-if="created_at">
                 <el-input v-model="created_at" autocomplete="off" disabled></el-input>
               </el-form-item>
@@ -276,6 +294,7 @@ import 'quill/dist/quill.snow.css';
 import ImageResize from 'quill-image-resize-module';
 import Quill from 'quill';  // 引入 Quill
 import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+import draggable from 'vuedraggable';
 
 
 
@@ -285,6 +304,7 @@ Quill.register('modules/imageResize', ImageResize);
 
 //解决富文本样式居中不显示
 import 'quill/dist/quill.core.css';
+import json from '@/utils/templateJson/index/style1/1';
 
 export default {
   components: {
@@ -292,6 +312,7 @@ export default {
     tableTitle,
     CityCascader,
     tagInput,
+    draggable,
   },
   data() {
 
@@ -345,6 +366,7 @@ export default {
       //提交表单
       creatNews_user_type: 0,//判断用户类型'
       created_at: "",//创建时间
+      commend_article: [],//手动推荐
       form: {
         user_type: "??",//判断用户类型'
         cat_arr_id: [],//导航池名称
@@ -374,6 +396,7 @@ export default {
         survey_name: "",//问卷名称
         suvey_array: "",//选项名称集合 
         survey_type: 0, //0:单选 1：复选
+        commend_id: [],//手动推荐
       },
       //1.2 表单验证规则
       formRules: {
@@ -570,7 +593,49 @@ export default {
 
   },
   methods: {
-
+    // 远程搜索方法
+    remoteMethod(query) {
+      const artical_params = { page: 1, pageSize: 20, id: query }
+      if (query !== '') {
+        this.loading = true;
+        //如果全是数字，就id，其他就是搜title
+        let reg = /^[0-9]+$/;
+        let isNum = reg.test(query);
+        if (isNum) {
+          delete artical_params.title;
+          artical_params.id = query;
+        } else {
+          delete artical_params.id;
+          artical_params.title = query;
+        }
+        this.$store.dispatch('news/getArticleList', artical_params).then(res => {
+          this.loading = false;
+          let data = [];
+          for (let item of res.data.rows) {
+            data.push(item);
+          }
+          this.commend_article = data;
+        }).catch(() => {
+          this.loading = false;
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        });
+      } else {
+        this.commend_article = [];
+      }
+    },
+    handleClose(item) {
+      const index = this.form.commend_id.indexOf(item);
+      if (index > -1) {
+        this.form.commend_id.splice(index, 1);
+      }
+    },
+    onDragEnd() {
+      // 处理拖拽结束事件（如果需要）
+      console.log('拖拽结束', this.commend_article);
+    },
     handleDelete() {
       // 删除图片
       this.imgUrl = ''; // 清空图片 URL
@@ -695,7 +760,9 @@ export default {
         //如果是普通用户 推荐等级设置为0 
         this.form.level = "[0]";
       }
-
+      if (this.form.commend_id != undefined && this.form.commend_id.length > 0) {
+        this.form.commend_id = JSON.stringify(this.form.commend_id); // 提取推荐ID
+      }
       //先进行验证
       console.log(this.form);
 
@@ -861,6 +928,7 @@ export default {
         this.form.fromurl = res.data.fromurl;
         this.form.status = res.data.status;
         this.form.survey_name = res.data.survey_name;
+        this.form.commend_id = JSON.parse(res.data.commend_id);
         if (res.data.is_survey == null) {
           this.form.is_survey = 0;
         } else {
@@ -955,7 +1023,9 @@ export default {
         }
         this.form.city_arr_id = JSON.stringify(this.form.city_arr_id);
       }
-
+      if (this.form.commend_id != undefined && this.form.commend_id.length > 0) {
+        this.form.commend_id = JSON.stringify(this.form.commend_id); // 提取推荐ID
+      }
       //将department_id和city_id转换为字符串  
       // this.form.department_arr_id = JSON.stringify(this.form.department_arr_id);
       // this.form.city_arr_id = JSON.stringify(this.form.city_arr_id);
@@ -1193,15 +1263,34 @@ export default {
       // console.log(str);
       this.form.level = value;
       console.log(this.form.level);
-    }
+    },
+    getNews() {
+      this.$store.dispatch('news/getArticleList', { page: 1, pageSize: 20 }).then(res => {
+
+        let data = [];
+        for (let item of res.data.rows) {
+          data.push(item)
+        }
+        this.commend_article = data;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
   },
   mounted() {
+    console.log("mounted")
+    this.getNews()
+    console.log(this.commend_article, '-------news-------');
     this.creatNews_user_type = getUseType()
     this.websiteid = getWebSiteId()
 
     this.get_creatNews_form_id_fun()
     this.get_creatNews_nav_pool_arr_fun()
 
+
     //1.判断是新建还是回显
     if (this.$route.query.id != undefined) {
       this.editId = this.$route.query.id;