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

This commit is contained in:
2024-12-17 19:41:34 +08:00
parent 99a7a6c2cd
commit f80bb62e6f
4 changed files with 157 additions and 36 deletions
+51 -19
View File
@@ -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" v-model="queryParams.tagId" placeholder="请选择标签" clearable>
<el-select class="inputWidth" multiple 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="notebookAgreeCount" width="90px" />
<el-table-column label="笔记评论数" align="center" prop="notebookCommentCount" 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-select class="inputWidth" v-model="form.tagId" placeholder="请选择标签" clearable>
<el-form-item label="标签" prop="tagId_copy">
<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>
<noteList :autoTableHeight="300" :tableList="noteList" :type="queryParams.type" :id="form.id"></noteList>
<el-dialog title="相关笔记" v-model="noteBookVisible" width="1200px" append-to-body>
<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) {
return element.title;
if (tagId?.includes(element.id)) {
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 {