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-16 15:38:26 +08:00
parent 7ff3303cfd
commit 8a6f93ed1f
6 changed files with 420 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -40,9 +40,11 @@
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.1.7", "pinia": "2.1.7",
"screenfull": "6.0.2", "screenfull": "6.0.2",
"tlbs-map-vue": "^1.2.1",
"vue": "3.4.34", "vue": "3.4.34",
"vue-cropper": "1.1.1", "vue-cropper": "1.1.1",
"vue-i18n": "9.10.2", "vue-i18n": "9.10.2",
"vue-jsonp": "^2.0.0",
"vue-router": "4.3.2", "vue-router": "4.3.2",
"vue-types": "5.1.1", "vue-types": "5.1.1",
"vxe-table": "4.5.22" "vxe-table": "4.5.22"

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

@ -61,3 +61,10 @@ export const delArticle = (id: string | number | Array<string | number>) => {
method: 'delete' method: 'delete'
}); });
}; };
export const geocoder = (address: string) => {
return request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + address + '&key=6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO',
method: 'get'
});
};

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

@ -1,3 +1,5 @@
import { number } from 'vue-types';
export interface ArticleVO { export interface ArticleVO {
/** /**
* 景点ID/租赁ID/游艇ID * 景点ID/租赁ID/游艇ID
@ -5,7 +7,7 @@ export interface ArticleVO {
id: string | number; id: string | number;
/** /**
* *
*/ */
type: string; type: string;
@ -88,17 +90,24 @@ export interface ArticleVO {
* 景区等级 * 景区等级
*/ */
level: number; level: number;
} }
export interface ArticleForm extends BaseEntity { export interface ArticleForm extends BaseEntity {
/**
* 景点名称 商家名称
*/
name: string;
/**
* 联系电话
*/
number?: number | string;
/** /**
* 景点ID/租赁ID/游艇ID * 景点ID/租赁ID/游艇ID
*/ */
id?: string | number; id?: string | number;
/** /**
* *
*/ */
type?: string; type?: string;
@ -181,16 +190,18 @@ export interface ArticleForm extends BaseEntity {
* 景区等级 * 景区等级
*/ */
level?: number; level?: number;
/**
* 景区/商家图像
*/
mediaBoList?: any[];
} }
export interface ArticleQuery extends PageQuery { export interface ArticleQuery extends PageQuery {
/** /**
* *
*/ */
type?: string; type?: string;
name?: string;
/** /**
* 二级类别（未定） * 二级类别（未定）
*/ */
@ -266,11 +277,8 @@ export interface ArticleQuery extends PageQuery {
*/ */
level?: number; level?: number;
/** /**
* 日期范围参数 * 日期范围参数
*/ */
params?: any; params?: any;
} }

4
src/main.ts
View File

@ -8,7 +8,8 @@ import 'element-plus/theme-chalk/dark/css-vars.css';
import App from './App.vue'; import App from './App.vue';
import store from './store'; import store from './store';
import router from './router'; import router from './router';
// 腾讯地图
import TlbsMap from 'tlbs-map-vue';
// 自定义指令 // 自定义指令
import directive from './directive'; import directive from './directive';
@ -51,6 +52,7 @@ app.use(store);
app.use(i18n); app.use(i18n);
app.use(VXETable); app.use(VXETable);
app.use(plugins); app.use(plugins);
app.use(TlbsMap);
// 自定义指令 // 自定义指令
directive(app); directive(app);

13
src/utils/debounce.js Normal file
View File

@ -0,0 +1,13 @@
// debounce.js
export function debounce(func, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
};
}

493
src/views/manage/scenic/index.vue
View File

@ -5,63 +5,36 @@
<div v-show="showSearch" class="mb-[10px]" id="search_div"> <div v-show="showSearch" class="mb-[10px]" id="search_div">
<el-card shadow="hover"> <el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px"> <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
<el-form-item label="景点名称" prop=""> <el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}名称`" prop="name">
<el-input class="inputWidth" placeholder="请输入景点名称" clearable @keyup.enter="handleQuery" /> <el-input class="inputWidth" v-model="queryParams.name" placeholder="请输入景点名称" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="提示语" prop=""> <el-form-item label="推荐语" prop="">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" /> <el-input class="inputWidth" placeholder="请输入推荐语" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="发布状态" prop=""> <el-form-item label="发布状态" prop="">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" /> <el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable class="inputWidth">
<el-option label="已发布" value="1"></el-option>
<el-option label="未发布" value="0"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="景点等级" prop=""> <el-form-item label="景点等级" prop="" v-if="queryParams.type == '0'">
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" /> <el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="是否开放" prop="isOpen"> <el-form-item label="是否开放" prop="isOpen">
<el-input class="inputWidth" v-model="queryParams.isOpen" placeholder="请输入开放/营业" clearable @keyup.enter="handleQuery" /> <el-select v-model="queryParams.isOpen" placeholder="请选择开放状态" clearable class="inputWidth">
<el-option label="已开放" value="1"></el-option>
<el-option label="未开放" value="0"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="景点属性" prop="attribute"> <el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}属性`" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" /> <el-select v-model="queryParams.attribute" placeholder="请选择属性" clearable class="inputWidth">
<el-option label="标志性景点" value="1"></el-option>
<el-option label="非标志性景点" value="0"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="一级标签" prop="attribute"> <el-form-item label="标签" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" /> <el-input class="inputWidth" v-model="queryParams.tagId" placeholder="请输入景点标签" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="二级标签" prop="attribute">
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="省code" prop="province">
<el-input v-model="queryParams.province" placeholder="请输入省code" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="市/区" prop="city">
<el-input v-model="queryParams.city" placeholder="请输入市/区" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="会员等级" prop="memberLevel">
<el-input v-model="queryParams.memberLevel" placeholder="请输入会员等级" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="标签" prop="tagId">
<el-input v-model="queryParams.tagId" placeholder="请输入标签" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="推荐语" prop="recommend">
<el-input v-model="queryParams.recommend" placeholder="请输入推荐语" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="介绍" prop="intro">
<el-input v-model="queryParams.intro" placeholder="请输入介绍" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="queryParams.address" placeholder="请输入详细地址" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="经度" prop="longitude">
<el-input v-model="queryParams.longitude" placeholder="请输入经度" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="queryParams.latitude" placeholder="请输入纬度" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="排序" prop="orderNum">
<el-input v-model="queryParams.orderNum" placeholder="请输入排序" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<!-- <el-form-item label="景区等级" prop="level">
<el-input class="inputWidth" v-model="queryParams.level" placeholder="请输入景区等级" clearable @keyup.enter="handleQuery" />
</el-form-item> -->
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@ -80,23 +53,57 @@
<el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border> <el-table :height="autoTableHeight" v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="景点ID" align="center" prop="id" v-if="true" /> <el-table-column label="ID" align="center" prop="id" fixed v-if="false" width="50px" />
<el-table-column label="开放/营业" align="center" prop="isOpen" /> <el-table-column label="景点名称" align="center" prop="name" fixed v-if="queryParams.type == '0'" width="180px" />
<el-table-column label="景点属性/商家属性" align="center" prop="attribute" /> <el-table-column label="商家名称" align="center" prop="name" fixed v-if="queryParams.type != '0'" width="180px" />
<el-table-column label="状态 0-未发布 1-审核中 2-发布" align="center" prop="status" /> <el-table-column label="排序" align="center" prop="orderNum" v-if="queryParams.type != '2'" width="60px" />
<el-table-column label="省code" align="center" prop="province" /> <el-table-column label="等级" align="center" prop="level" v-if="queryParams.type == '0'">
<el-table-column label="市/区" align="center" prop="city" /> <template #default="scope">
<el-table-column label="个人简介" align="center" prop="remark" /> {{ formatLevel(scope.row.level) }}
<el-table-column label="会员等级" align="center" prop="memberLevel" /> </template>
</el-table-column>
<el-table-column :label="queryParams.type == '0' ? '景点icon' : '商家icon'" align="center" prop="icon" />
<el-table-column label="是否营业" align="center" prop="isOpen">
<template #default="scope">
<span>{{ scope.row.isOpen == 0 ? '否' : '是' }}</span>
</template>
</el-table-column>
<el-table-column :label="queryParams.type == '0' ? '景点属性' : '商家属性'" align="center" prop="attribute" width="120px">
<template #default="scope">
{{
scope.row.attribute == '1'
? `${queryParams.type == '0' ? '标志性景点' : '标志性商家'}`
: `${queryParams.type == '0' ? '非标志性景点' : '非标志性商家'}`
}}
</template>
</el-table-column>
<el-table-column label="地理坐标" align="center" prop="" width="200px">
<template #default="scope">
{{ scope.row.longitude + ',' + scope.row.latitude }}
</template>
</el-table-column>
<el-table-column label="地址信息" align="center" prop="address" width="180px" />
<el-table-column label="联系电话" align="center" prop="number" width="120px" />
<el-table-column label="标签" align="center" prop="tagId" /> <el-table-column label="标签" align="center" prop="tagId" />
<el-table-column label="推荐语" align="center" prop="recommend" /> <el-table-column label="推荐语" align="center" prop="recommend" width="180px" />
<el-table-column label="介绍" align="center" prop="intro" /> <el-table-column :label="queryParams.type == '0' ? '景点详情' : '详情'" align="center" prop="remark">
<el-table-column label="详细地址" align="center" prop="address" /> <template #default="scope">
<el-table-column label="经度" align="center" prop="longitude" /> <el-button link type="primary" @click="handleDetail(scope.row)">查看</el-button>
<el-table-column label="纬度" align="center" prop="latitude" /> </template>
<el-table-column label="排序" align="center" prop="orderNum" /> </el-table-column>
<el-table-column label="景区等级" align="center" prop="level" /> <el-table-column label="喜欢数量" align="center" prop="likeNumber" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="收藏数量" align="center" prop="collectNumber" />
<el-table-column label="相关笔记" align="center" prop="noteNumber" />
<el-table-column label="笔记评论数" align="center" prop="commentNumber" width="90px" />
<el-table-column label="笔记点赞数" align="center" prop="likeNoteNumber" width="90px" />
<!-- 0-未发布 1-审核中 2-发布 -->
<el-table-column label="发布状态" align="center" prop="status">
<template #default="scope">
<span>{{ scope.row.status == 0 ? '未发布' : scope.row.status == 1 ? '审核中' : '已发布' }}</span>
</template>
</el-table-column>
<!-- <el-table-column label="介绍" align="center" prop="intro" /> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120px">
<template #default="scope"> <template #default="scope">
<el-tooltip content="修改" placement="top"> <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
@ -117,35 +124,106 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改景点、租赁管理对话框 --> <!-- 添加或修改景点、租赁管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
<el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="articleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="开放/营业" prop="isOpen"> <el-row :gutter="10">
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" /> <el-col :span="12">
</el-form-item> <el-form-item :label="queryParams.type == '0' ? '景点名称' : '商家名称'" prop="name">
<el-form-item label="景点属性/商家属性" prop="attribute"> <el-input placeholder="请输入名称" v-model="form.name" />
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="省code" prop="province"> <el-col :span="12" v-if="queryParams.type == '0'">
<el-input v-model="form.province" placeholder="请输入省code" /> <el-form-item label="景区等级" prop="level">
</el-form-item> <el-input-number v-model="form.level" :min="1" :max="5" />
<el-form-item label="市/区" prop="city"> </el-form-item>
<el-input v-model="form.city" placeholder="请输入市/区" /> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item label="个人简介" prop="remark"> <el-form-item label="推荐语" prop="recommend">
<el-input v-model="form.remark" placeholder="请输入个人简介" /> <el-input v-model="form.recommend" placeholder="请输入推荐语" />
</el-form-item> </el-form-item>
<el-form-item label="会员等级" prop="memberLevel"> </el-col>
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" /> <el-col :span="12">
</el-form-item> <el-form-item label="排序" prop="orderNum">
<el-form-item label="标签" prop="tagId"> <el-input-number v-model="form.orderNum" :min="1" :max="1000" />
<el-input v-model="form.tagId" placeholder="请输入标签" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="推荐语" prop="recommend"> </el-row>
<el-input v-model="form.recommend" placeholder="请输入推荐语" /> <el-row :gutter="10">
</el-form-item> <el-col :span="12">
<el-form-item label="介绍" prop="intro"> <el-form-item label="是否开放" prop="isOpen">
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" /> <el-radio-group v-model="form.isOpen">
</el-form-item> <el-radio value="1" size="large">开放中</el-radio>
<el-radio value="0" size="large">未开放</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item :label="queryParams.type == '0' ? '景点属性' : '商家属性'" prop="attribute">
<el-checkbox v-model="form.attribute" :label="queryParams.type == '0' ? '标志性景点' : '标志性商家'" value="1" />
</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-option v-for="dict in sys_user_tagOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="联系电话" prop="number">
<el-input v-model="form.number" placeholder="请输入电话" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="地理位置" prop="introduce">
<el-input v-model="searchLocation" type="text" placeholder="请输入地址信息" @keyup.enter="debouncedSearch" />
</el-form-item>
<tlbs-map
style="margin-left: 80px"
ref="map"
api-key="
6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO"
:center="center"
:zoom="zoom"
:control="control"
@click="onClick"
>
<tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
</tlbs-map>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}照片/视频`" prop="">
<el-upload
class="upload-demo el-upload"
drag
:headers="upload.headers"
:action="uploadImgUrl"
v-model:file-list="fileList_1"
multiple
:on-success="(res, file) => returnContractSuccess('oss_1', res, file)"
:on-preview="handlePictureCardPreview"
:on-remove="
(res, file) => {
handleRemove(res, file, 'oss_1');
}
"
list-type="picture-card"
>
<el-icon class="el-icon--upload" :class="{}">
<Plus />
</el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="详细地址" prop="address"> <el-form-item label="详细地址" prop="address">
<el-input v-model="form.address" placeholder="请输入详细地址" /> <el-input v-model="form.address" placeholder="请输入详细地址" />
</el-form-item> </el-form-item>
@ -155,11 +233,8 @@
<el-form-item label="纬度" prop="latitude"> <el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" /> <el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="orderNum"> <el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}简介`" prop="intro">
<el-input v-model="form.orderNum" placeholder="请输入排序" /> <editor v-model="form.intro" :min-height="150" :height="200" />
</el-form-item>
<el-form-item label="景区等级" prop="level">
<el-input v-model="form.level" placeholder="请输入景区等级" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -173,9 +248,74 @@
</template> </template>
<script setup name="Article" lang="ts"> <script setup name="Article" lang="ts">
import { listArticle, getArticle, delArticle, addArticle, updateArticle } from '@/api/manage/article'; import { listArticle, getArticle, delArticle, addArticle, updateArticle, geocoder } from '@/api/manage/article';
import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types'; import { ArticleVO, ArticleQuery, ArticleForm } from '@/api/manage/article/types';
import { useRouter } from 'vue-router';
import { getToken } from '@/utils/auth';
import { debounce } from '@/utils/debounce.js';
import { jsonp } from 'vue-jsonp';
import type { UploadProps, UploadUserFile } from 'element-plus';
const map = ref(null);
const center = ref({ lat: 39.145902, lng: 117.17546 });
const zoom = ref(20);
const onClick = (e: Event) => {
console.log(e);
};
const control = reactive({
scale: {},
zoom: {
position: 'topLeft'
}
});
const searchLocation = ref(''); // 搜索地点
const geometries = ref([{ styleId: 'marker', position: { lat: 39.145902, lng: 117.17546 } }]);
const styles = reactive({
marker: {
width: 20,
height: 30,
anchor: { x: 10, y: 30 }
}
});
const options = reactive({
minZoom: 5,
maxZoom: 20
});
//输入位置，搜索位置
const performSearch = async (text) => {
// 这里简单模拟延迟，模拟真实的异步请求耗时
// await new Promise((resolve) => setTimeout(resolve, 500));
// 假设这里根据输入的文本去查找匹配的数据，实际中替换成真实逻辑
if (text === '') {
console.log('搜索内容为空');
} else {
console.log('搜索内容为：', text);
// 调用腾讯地图API进行搜索，并展示在地图上
// geocoder(text).then((result) => {
// console.log(result);
// });
jsonp('https://apis.map.qq.com/ws/geocoder/v1', {
address: text,
key: '6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO',
output: 'jsonp'
}).then((data) => {
console.log(data);
center.value.lat = data.result.location.lat;
center.value.lng = data.result.location.lng;
geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
console.log(map.value);
});
}
};
const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒
// 监听输入框内容变化，调用防抖后的搜索函数
watch(searchLocation, (newValue) => {
debouncedSearch(newValue);
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + '/resource/oss/upload'); // 上传的图片服务器地址
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const autoTableHeight = ref<number>(750); const autoTableHeight = ref<number>(750);
const articleList = ref<ArticleVO[]>([]); const articleList = ref<ArticleVO[]>([]);
@ -186,24 +326,43 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true); const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const total = ref(0); const total = ref(0);
const sys_user_tagOptions = ref([
{ label: '标签1', value: 1 },
{ label: '标签2', value: 2 },
{ label: '标签3', value: 3 }
]);
const fileList_1 = ref<UploadUserFile[]>([]);
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const articleFormRef = ref<ElFormInstance>(); const articleFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false, visible: false,
title: '' title: ''
}); });
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const upload = reactive({
// 是否显示弹出层（用户导入）
returnContractShow: false,
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {
Clientid: import.meta.env.VITE_APP_CLIENT_ID,
Authorization: 'Bearer ' + getToken()
}
});
const initFormData: ArticleForm = { const initFormData: ArticleForm = {
name: undefined,
id: undefined, id: undefined,
type: undefined, type: undefined,
secondType: undefined, secondType: undefined,
isOpen: undefined, isOpen: undefined,
attribute: undefined, attribute: '0',
status: undefined, status: undefined,
province: undefined, province: '海南省',
city: undefined, city: '东方市',
remark: undefined, remark: undefined,
memberLevel: undefined, memberLevel: undefined,
tagId: undefined, tagId: undefined,
@ -212,14 +371,15 @@ const initFormData: ArticleForm = {
address: undefined, address: undefined,
longitude: undefined, longitude: undefined,
latitude: undefined, latitude: undefined,
orderNum: undefined, orderNum: 0,
level: undefined level: 0,
mediaBoList: undefined
}; };
const data = reactive<PageData<ArticleForm, ArticleQuery>>({ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
form: { ...initFormData },
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
name: undefined,
type: undefined, type: undefined,
secondType: undefined, secondType: undefined,
isOpen: undefined, isOpen: undefined,
@ -238,29 +398,41 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
level: undefined, level: undefined,
params: {} params: {}
}, },
form: { ...initFormData },
rules: { rules: {
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }], id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }], name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }], number: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }], isOpen: [{ required: true, message: '请选择开放状态', trigger: 'change' }],
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }], attribute: [{ required: false, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }], // remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }], // memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }], tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }], recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }], address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }], longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }], latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }], orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }] level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }],
intro: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
} }
}); });
const { queryParams, form, rules } = toRefs(data); const { queryParams, form, rules } = toRefs(data);
// 路由监听================================================
let router = useRouter();
watch(
() => router.currentRoute.value,
() => {
let query = router.currentRoute.value.query;
if (query) {
queryParams.value.type = query.type as string;
}
console.log('路由信息：', router.currentRoute.value);
},
{ immediate: true }
);
onMounted(() => { onMounted(() => {
getList(); getList();
nextTick(() => { nextTick(() => {
@ -309,12 +481,39 @@ const handleSelectionChange = (selection: ArticleVO[]) => {
single.value = selection.length != 1; single.value = selection.length != 1;
multiple.value = !selection.length; multiple.value = !selection.length;
}; };
/**
* 等级格式化
*/
const formatLevel = (level: number | string) => {
switch (level) {
case 1:
return 'A';
break;
case 2:
return 'AA';
break;
case 3:
return 'AAA';
break;
case 4:
return 'AAAA';
break;
case 5:
return 'AAAAA';
break;
default:
break;
}
};
/** 新增按钮操作 */ /** 新增按钮操作 */
const handleAdd = () => { const handleAdd = () => {
reset(); reset();
dialog.visible = true; dialog.visible = true;
dialog.title = '添加景点、租赁管理'; if (queryParams.value.type == '0') {
dialog.title = '添加景点';
} else {
dialog.title = '添加商家';
}
}; };
/** 修改按钮操作 */ /** 修改按钮操作 */
@ -327,11 +526,17 @@ const handleUpdate = async (row?: ArticleVO) => {
dialog.title = '修改景点、租赁管理'; dialog.title = '修改景点、租赁管理';
}; };
/** 提交按钮 */ /** 新增景点，商家提交按钮 */
const submitForm = () => { const submitForm = () => {
articleFormRef.value?.validate(async (valid: boolean) => { articleFormRef.value?.validate(async (valid: boolean) => {
if (valid) { if (valid) {
buttonLoading.value = true; buttonLoading.value = true;
if (!form.value.attribute) {
form.value.attribute = '0';
} else if (form.value.attribute == true) {
form.value.attribute = '1';
}
form.value.type = queryParams.value.type;
if (form.value.id) { if (form.value.id) {
await updateArticle(form.value).finally(() => (buttonLoading.value = false)); await updateArticle(form.value).finally(() => (buttonLoading.value = false));
} else { } else {
@ -363,6 +568,41 @@ const handleExport = () => {
`article_${new Date().getTime()}.xlsx` `article_${new Date().getTime()}.xlsx`
); );
}; };
// 图像上传成功回调
const returnContractSuccess = (type: string, response: any, uploadFile: UploadFile) => {
// console.log(type, response, uploadFile);
if (response.code == 200) {
proxy?.$modal.msgSuccess('上传成功');
let typeFlag = false;
let obj = {
mediaType: type,
mediaOssId: response.data.ossId
};
form.mediaBoList.push(obj);
}
};
/**
*
* @param uploadFile 预览文件
*/
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!;
dialogVisible.value = true;
};
/**
*
* @param uploadFile 删除文件
* @param uploadFiles
* @param type
*/
const handleRemove = (uploadFile, uploadFiles, type) => {
console.log(uploadFile, uploadFiles, type);
form.mediaBoList.forEach((item, index) => {
if (type == item.mediaType) {
form.mediaBoList.splice(index, 1);
}
});
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-card :deep(.el-card__body) { .el-card :deep(.el-card__body) {
@ -373,4 +613,17 @@ const handleExport = () => {
margin-top: 10px !important; margin-top: 10px !important;
padding-bottom: 10px !important; padding-bottom: 10px !important;
} }
.el-upload {
:deep(.el-upload-dragger) {
padding: 0;
height: 100%;
i {
top: 30%;
left: 50%;
position: absolute;
transform: translateX(-50%);
font-size: 45px;
}
}
}
</style> </style>