wuyajie/daoyou_manage_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/manage/article/index.ts
View File

@ -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
});
};

6
src/api/manage/article/types.ts
View File

@ -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[];
/**
* 二级类别（未定）
*/

104
src/components/noteList/index.vue
View File

@ -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="笔记标题" align="center" prop="" />
<!-- <el-table-column label="ID" align="center" prop="id" v-if="props.parentName != 'dyUser'" /> -->
<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="" />
<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="" />
<el-table-column label="操作人" align="center" prop="" />
<el-table-column label="操作时间" align="center" prop="" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="props.parentName != 'dyUser'">
<el-table-column label="标记地点" align="center" prop="location" />
<el-table-column label="标签" align="center" prop="">
<template #default="scope">
<span>{{ formatTag(scope.row.tagId.toString()) }}</span>
</template>
</el-table-column>
<el-table-column label="笔记详情" align="center" prop="">
<template #default="scope">
<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: {
type: Array,
default: () => []
noteBookTagIds: {
type: string,
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>

70
src/views/manage/scenic/index.vue
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 {