添加标签筛选及笔记详情查看功能

src/api/manage/article/index.ts

@@ -68,3 +68,16 @@ export const geocoder = (address: string) => {
     method: 'get'
   });
 };
+
+/**
+ *
+ * @param query 根据标签查询相关笔记
+ * @returns
+ */
+export const listByTagIdNotebook = (query: any): AxiosPromise<ArticleVO[]> => {
+  return request({
+    url: '/manage/notebook/listByTagId',
+    method: 'get',
+    params: query
+  });
+};

src/api/manage/article/types.ts

@@ -5,7 +5,7 @@ export interface ArticleVO {
    * 景点ID/租赁ID/游艇ID
    */
   id: string | number;
-
+  tagId_copy: string[] | number[];
   /**
    *
    */
@@ -94,7 +94,8 @@ export interface ArticleVO {
 
 export interface ArticleForm extends BaseEntity {
   icon?: string;
-  regionCode?: string;
+  region?: string;
+  tagId_copy: string[] | number[];
   /**
    * 景点名称 商家名称
    */
@@ -202,6 +203,7 @@ export interface ArticleQuery extends PageQuery {
    */
   type?: string;
   name?: string;
+  tagId_copy: string[] | number[];
   /**
    * 二级类别（未定）
    */

src/components/noteList/index.vue

@@ -1,21 +1,38 @@
 <!-- 笔记列表 -->
 <template>
   <div>
-    <el-table :height="props.autoTableHeight" v-loading="loading" :data="props.tableList" @selection-change="handleSelectionChange" border>
+    <el-table :height="props.autoTableHeight" v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" border>
       <el-table-column type="selection" width="55" align="center" v-if="props.parentName != 'dyUser'" />
-      <el-table-column label="ID" align="center" prop="id" v-if="props.parentName != 'dyUser'" />
+      <!-- <el-table-column label="ID" align="center" prop="id" v-if="props.parentName != 'dyUser'" /> -->
-      <el-table-column label="笔记标题" align="center" prop="" />
+      <el-table-column label="笔记标题" align="center" prop="title" width="180px" />
       <el-table-column label="笔记封面" align="center" prop="" />
       <el-table-column label="笔记类别" align="center" prop="" />
-      <el-table-column label="标记地点" align="center" prop="" />
+      <el-table-column label="标记地点" align="center" prop="location" />
-      <el-table-column label="标签" align="center" prop="" />
+      <el-table-column label="标签" align="center" prop="">
-      <el-table-column label="笔记详情" align="center" prop="" />
+        <template #default="scope">
-      <el-table-column label="笔记评论数" align="center" prop="" />
+          <span>{{ formatTag(scope.row.tagId.toString()) }}</span>
-      <el-table-column label="笔记点赞数" align="center" prop="" />
+        </template>
-      <el-table-column label="发布状态" align="center" prop="" />
+      </el-table-column>
-      <el-table-column label="操作人" align="center" prop="" />
+      <el-table-column label="笔记详情" align="center" prop="">
-      <el-table-column label="操作时间" align="center" prop="" />
+        <template #default="scope">
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="props.parentName != 'dyUser'">
+          <el-button link type="primary" @click="handleDetail(scope.row)">查看详情</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="笔记评论数" align="center" prop="commentCount" width="100px" />
+      <el-table-column label="笔记点赞数" align="center" prop="agreeCount" width="100px" />
+      <el-table-column label="发布状态" align="center" prop="">
+        <template #default="scope">
+          <span>{{ scope.row.status == 0 ? '未发布' : scope.row.status == 1 ? '审核中' : scope.row.status == 2 ? '已发布' : '草稿' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" align="center" prop="updateByName" />
+      <el-table-column label="操作时间" align="center" prop="updateTime" width="180px" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        v-if="props.parentName != 'dyUser' && props.parentName != 'scenic'"
+      >
         <template #default="scope">
           <el-tooltip content="编辑" placement="top">
             <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
@@ -29,17 +46,27 @@
         </template>
       </el-table-column>
     </el-table>
+    <pagination
+      v-show="total > 0"
+      id="table_page"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getTableList"
+    />
   </div>
 </template>
 
 <script setup lang="ts" name="noteList">
 import { ref, reactive, onMounted, nextTick } from 'vue';
+import { string } from 'vue-types';
+import { listByTagIdNotebook } from '@/api/manage/article';
 
 //导入父组件传递的值
 const props = defineProps({
-  tableList: {
+  noteBookTagIds: {
-    type: Array,
+    type: string,
-    default: () => []
+    default: () => ''
   },
   autoTableHeight: {
     type: Number,
@@ -48,10 +75,44 @@ const props = defineProps({
   parentName: {
     type: String,
     default: () => ''
+  },
+  sys_user_tagOptions: {
+    type: Array,
+    default: () => []
   }
 });
+const total = ref(0);
 const loading = ref(false);
+const tableList = ref([]);
 
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  tagIds: null
+});
+
+// 获取笔记列表
+const getTableList = async () => {
+  loading.value = true;
+  let res = await listByTagIdNotebook(queryParams).finally(() => (loading.value = false));
+  tableList.value = res.rows;
+  total.value = res.total;
+};
+// 监听父组件传递的tagIds,当tagIds发生变化时，重新获取数据
+watch(
+  () => props.noteBookTagIds,
+  (newVal, oldVal) => {
+    console.log(newVal);
+    queryParams.tagIds = newVal;
+    if (newVal) {
+      //获取数据
+      nextTick(() => {
+        getTableList();
+      });
+    }
+  },
+  { immediate: true }
+);
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: any) => {
   // ids.value = selection.map((item) => item.id);
@@ -67,6 +128,19 @@ const handleUpdate = async (row?: any) => {
 const handleDelete = (row: any) => {
   emit('handleDelete', row);
 };
+/**
+ * 标签格式化
+ */
+const formatTag = (tagId: string | null) => {
+  let tagString = '';
+  for (let i = 0; i < props.sys_user_tagOptions.length; i++) {
+    const element = props.sys_user_tagOptions[i];
+    if (tagId?.includes(element.id)) {
+      tagString += ',' + element.title;
+    }
+  }
+  return tagString.substring(1);
+};
 // 导入父组件定义的函数
 const emit = defineEmits(['hideDialog', 'handleUpdate', 'handleDelete']);
 </script>

src/views/manage/scenic/index.vue

@@ -37,8 +37,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="标签" prop="tagId">
-              <!-- <el-input class="inputWidth" v-model="queryParams.tagId" placeholder="请输入景点标签" clearable @keyup.enter="handleQuery" /> -->
+              <el-select class="inputWidth" multiple v-model="queryParams.tagId" placeholder="请选择标签" clearable>
-              <el-select class="inputWidth" v-model="queryParams.tagId" placeholder="请选择标签" clearable>
                 <el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="dict.id" />
               </el-select>
             </el-form-item>
@@ -109,8 +108,16 @@
           <el-button link type="primary" @click="handleNote(scope.row)">11{{ scope.row.noteNumber }}</el-button>
         </template>
       </el-table-column>
-      <el-table-column label="笔记评论数" align="center" prop="notebookCommentCount" width="90px" />
+      <el-table-column label="笔记评论数" align="center" prop="notebookCommentCount" width="90px">
-      <el-table-column label="笔记点赞数" align="center" prop="notebookAgreeCount" width="90px" />
+        <template #default="scope">
+          <el-button link type="primary" @click="handleNote(scope.row)">11{{ scope.row.noteNumber }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="笔记点赞数" align="center" prop="notebookAgreeCount" width="90px">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleNote(scope.row)">11{{ scope.row.noteNumber }}</el-button>
+        </template>
+      </el-table-column>
       <!--  0-未发布 1-审核中 2-发布 -->
       <el-table-column label="发布状态" align="center" prop="status">
         <template #default="scope">
@@ -216,8 +223,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="标签" prop="tagId">
+            <el-form-item label="标签" prop="tagId_copy">
-              <el-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable>
+              <el-select class="inputWidth" v-model="form.tagId_copy" multiple filterable placeholder="请选择标签" clearable>
                 <el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="String(dict.id)" />
               </el-select>
             </el-form-item>
@@ -365,7 +372,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="标签" prop="tagId">
-              <el-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable>
+              <el-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable disabled>
                 <el-option v-for="dict in sys_user_tagOptions" :key="dict.id" :label="dict.title" :value="String(dict.id)" />
               </el-select>
             </el-form-item>
@@ -411,8 +418,15 @@
       </template>
     </el-dialog>
     <!-- 相关笔记 -->
-    <el-dialog title="相关笔记" v-model="noteBookVisible" width="900px" append-to-body>
+    <el-dialog title="相关笔记" v-model="noteBookVisible" width="1200px" append-to-body>
-      <noteList :autoTableHeight="300" :tableList="noteList" :type="queryParams.type" :id="form.id"></noteList>
+      <noteList
+        :autoTableHeight="300"
+        :sys_user_tagOptions="sys_user_tagOptions"
+        :noteBookTagIds="noteBookTagIds"
+        parentName="scenic"
+        :type="queryParams.type"
+        :id="form.id"
+      ></noteList>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="cancel('noteBookVisible')">关 闭</el-button>
@@ -425,7 +439,7 @@
 <script setup name="Article" lang="ts">
 import { listTag } from '@/api/manage/tag';
 
-import { listArticle, getArticle, delArticle, addArticle, updateArticle, geocoder } from '@/api/manage/article';
+import { listArticle, getArticle, delArticle, addArticle, updateArticle, listByTagIdNotebook } from '@/api/manage/article';
 import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
 import { useRouter } from 'vue-router';
 import { getToken } from '@/utils/auth';
@@ -454,7 +468,7 @@ const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
-const noteList = ref([]); // 相关笔记列表
+const noteLists = ref([]); // 相关笔记列表
 const previewRef = ref(null);
 const previewVisible = ref(false); //预览弹层
 const dialogImageUrl = ref('');
@@ -489,10 +503,11 @@ const initFormData: ArticleForm = {
   status: undefined,
   province: '',
   city: '',
-  regionCode: '',
+  region: '',
   remark: undefined,
   memberLevel: undefined,
   tagId: undefined,
+  tagId_copy: [],
   recommend: undefined,
   intro: undefined,
   address: undefined,
@@ -528,6 +543,7 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
     city: undefined,
     memberLevel: undefined,
     tagId: undefined,
+    tagId_copy: [],
     recommend: undefined,
     intro: undefined,
     address: undefined,
@@ -547,7 +563,7 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
     attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
     // remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
     // memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
-    tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
+    tagId_copy: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
     recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
     address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
     longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
@@ -637,7 +653,7 @@ const performSearch = async (text) => {
           data.result.address_components.street_number;
         form.value.latitude = data.result.location.lat;
         form.value.longitude = data.result.location.lng;
-        form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
+        form.value.region = data.result.ad_info.adcode; //行政区划编码
 
         // form.value.province = data.result.address_components.province;
         // form.value.city = data.result.address_components.city;
@@ -668,7 +684,7 @@ const onClick = (e: any) => {
         form.value.longitude = data.result.location.lng;
         // form.value.province = data.result.address_component.province;
         // form.value.city = data.result.address_component.city;
-        form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
+        form.value.region = data.result.ad_info.adcode; //行政区划编码
         center.value.lat = data.result.location.lat;
         center.value.lng = data.result.location.lng;
         searchLocation.value = data.result.formatted_addresses.recommend;
@@ -682,6 +698,9 @@ const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜
 /** 查询景点、租赁管理列表 */
 const getList = async () => {
   loading.value = true;
+  if (queryParams.value.tagId && queryParams.value.tagId.length > 0) {
+    queryParams.value.tagId = queryParams.value.tagId.toString();
+  }
   const res = await listArticle(queryParams.value).finally(() => (loading.value = false));
   articleList.value = res.rows;
   total.value = res.total;
@@ -697,6 +716,7 @@ const cancel = (type: string) => {
   }
   dialog.visible = false;
   noteBookVisible.value = false;
+  noteBookTagIds.value = null; // 清空标签
 };
 
 /** 表单重置 */
@@ -755,13 +775,15 @@ const formatLevel = (level: number | string) => {
 /**
  * 标签格式化
  */
-const formatTag = (tagId: string) => {
+const formatTag = (tagId: string | null) => {
+  let tagString = '';
   for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
     const element = sys_user_tagOptions.value[i];
-    if (element.id == tagId) {
+    if (tagId?.includes(element.id)) {
-      return element.title;
+      tagString += ',' + element.title;
     }
   }
+  return tagString.substring(1);
 };
 /** 新增按钮操作 */
 const handleAdd = () => {
@@ -775,10 +797,14 @@ const handleAdd = () => {
 };
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: ArticleVO) => {
+const handleUpdate = async (row?: any) => {
   reset();
   const _id = row?.id || ids.value[0];
   const res = await getArticle(_id);
+  res.data.tagId_copy = res.data.tagId?.split(',');
+  if (res.data.region == null) {
+    res.data.region = res.data.city;
+  }
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = queryParams.value.type == '0' ? '修改景点' : '修改商家';
@@ -801,17 +827,23 @@ const handleDetail = async (row?: ArticleVO) => {
  * @param row 相关笔记
  */
 const noteBookVisible = ref(false);
+const noteBookTagIds = ref(null); //相关笔记的标签id
 const handleNote = async (row?: ArticleVO) => {
   console.log(row);
+  noteBookTagIds.value = null;
+  noteBookTagIds.value = row?.tagId;
   noteBookVisible.value = true;
+  console.log(row.tagId);
 };
 /** 新增景点，商家提交按钮 */
 const submitForm = async (type: string) => {
   form.value.type = queryParams.value.type;
+  form.value.tagId = form.value.tagId_copy?.join(',');
   if (type == 'draft') {
     // 存草稿，不验证必填项
     form.value.status = '3'; //草稿状态为3
     buttonLoading.value = true;
+
     if (form.value.id) {
       await updateArticle(form.value).finally(() => (buttonLoading.value = false));
     } else {