添加腾讯地图组件及优化景点管理功能
This commit is contained in:
parent
7ff3303cfd
commit
8a6f93ed1f
@ -40,9 +40,11 @@
|
||||
"nprogress": "0.2.0",
|
||||
"pinia": "2.1.7",
|
||||
"screenfull": "6.0.2",
|
||||
"tlbs-map-vue": "^1.2.1",
|
||||
"vue": "3.4.34",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-jsonp": "^2.0.0",
|
||||
"vue-router": "4.3.2",
|
||||
"vue-types": "5.1.1",
|
||||
"vxe-table": "4.5.22"
|
||||
|
||||
@ -61,3 +61,10 @@ export const delArticle = (id: string | number | Array<string | number>) => {
|
||||
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'
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { number } from 'vue-types';
|
||||
|
||||
export interface ArticleVO {
|
||||
/**
|
||||
* 景点ID/租赁ID/游艇ID
|
||||
@ -5,7 +7,7 @@ export interface ArticleVO {
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
type: string;
|
||||
|
||||
@ -88,17 +90,24 @@ export interface ArticleVO {
|
||||
* 景区等级
|
||||
*/
|
||||
level: number;
|
||||
|
||||
}
|
||||
|
||||
export interface ArticleForm extends BaseEntity {
|
||||
/**
|
||||
* 景点名称 商家名称
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
number?: number | string;
|
||||
/**
|
||||
* 景点ID/租赁ID/游艇ID
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
type?: string;
|
||||
|
||||
@ -181,16 +190,18 @@ export interface ArticleForm extends BaseEntity {
|
||||
* 景区等级
|
||||
*/
|
||||
level?: number;
|
||||
|
||||
/**
|
||||
* 景区/商家图像
|
||||
*/
|
||||
mediaBoList?: any[];
|
||||
}
|
||||
|
||||
export interface ArticleQuery extends PageQuery {
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
type?: string;
|
||||
|
||||
name?: string;
|
||||
/**
|
||||
* 二级类别（未定）
|
||||
*/
|
||||
@ -266,11 +277,8 @@ export interface ArticleQuery extends PageQuery {
|
||||
*/
|
||||
level?: number;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@ import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
import App from './App.vue';
|
||||
import store from './store';
|
||||
import router from './router';
|
||||
|
||||
// 腾讯地图
|
||||
import TlbsMap from 'tlbs-map-vue';
|
||||
// 自定义指令
|
||||
import directive from './directive';
|
||||
|
||||
@ -51,6 +52,7 @@ app.use(store);
|
||||
app.use(i18n);
|
||||
app.use(VXETable);
|
||||
app.use(plugins);
|
||||
app.use(TlbsMap);
|
||||
// 自定义指令
|
||||
directive(app);
|
||||
|
||||
|
||||
13
src/utils/debounce.js
Normal file
13
src/utils/debounce.js
Normal 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);
|
||||
};
|
||||
}
|
||||
@ -5,63 +5,36 @@
|
||||
<div v-show="showSearch" class="mb-[10px]" id="search_div">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
|
||||
<el-form-item label="景点名称" prop="">
|
||||
<el-input class="inputWidth" placeholder="请输入景点名称" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}名称`" prop="name">
|
||||
<el-input class="inputWidth" v-model="queryParams.name" placeholder="请输入景点名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="提示语" prop="">
|
||||
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item label="推荐语" prop="">
|
||||
<el-input class="inputWidth" placeholder="请输入推荐语" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<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 label="景点等级" prop="">
|
||||
<el-form-item label="景点等级" prop="" v-if="queryParams.type == '0'">
|
||||
<el-input class="inputWidth" placeholder="请输入提示语" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<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 label="景点属性" prop="attribute">
|
||||
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}属性`" prop="attribute">
|
||||
<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 label="一级标签" prop="attribute">
|
||||
<el-input class="inputWidth" v-model="queryParams.attribute" placeholder="请输入景点属性" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item label="标签" prop="attribute">
|
||||
<el-input class="inputWidth" v-model="queryParams.tagId" placeholder="请输入景点标签" clearable @keyup.enter="handleQuery" />
|
||||
</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-button type="primary" icon="Search" @click="handleQuery">搜索</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-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="景点ID" align="center" prop="id" v-if="true" />
|
||||
<el-table-column label="开放/营业" align="center" prop="isOpen" />
|
||||
<el-table-column label="景点属性/商家属性" align="center" prop="attribute" />
|
||||
<el-table-column label="状态 0-未发布 1-审核中 2-发布" align="center" prop="status" />
|
||||
<el-table-column label="省code" align="center" prop="province" />
|
||||
<el-table-column label="市/区" align="center" prop="city" />
|
||||
<el-table-column label="个人简介" align="center" prop="remark" />
|
||||
<el-table-column label="会员等级" align="center" prop="memberLevel" />
|
||||
<el-table-column label="ID" align="center" prop="id" fixed v-if="false" width="50px" />
|
||||
<el-table-column label="景点名称" align="center" prop="name" fixed v-if="queryParams.type == '0'" width="180px" />
|
||||
<el-table-column label="商家名称" align="center" prop="name" fixed v-if="queryParams.type != '0'" width="180px" />
|
||||
<el-table-column label="排序" align="center" prop="orderNum" v-if="queryParams.type != '2'" width="60px" />
|
||||
<el-table-column label="等级" align="center" prop="level" v-if="queryParams.type == '0'">
|
||||
<template #default="scope">
|
||||
{{ formatLevel(scope.row.level) }}
|
||||
</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="recommend" />
|
||||
<el-table-column label="介绍" align="center" prop="intro" />
|
||||
<el-table-column label="详细地址" align="center" prop="address" />
|
||||
<el-table-column label="经度" align="center" prop="longitude" />
|
||||
<el-table-column label="纬度" align="center" prop="latitude" />
|
||||
<el-table-column label="排序" align="center" prop="orderNum" />
|
||||
<el-table-column label="景区等级" align="center" prop="level" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column label="推荐语" align="center" prop="recommend" width="180px" />
|
||||
<el-table-column :label="queryParams.type == '0' ? '景点详情' : '详情'" align="center" prop="remark">
|
||||
<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="likeNumber" />
|
||||
<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">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:article:edit']"></el-button>
|
||||
@ -117,35 +124,106 @@
|
||||
@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-item label="开放/营业" prop="isOpen">
|
||||
<el-input v-model="form.isOpen" placeholder="请输入开放/营业" />
|
||||
</el-form-item>
|
||||
<el-form-item label="景点属性/商家属性" prop="attribute">
|
||||
<el-input v-model="form.attribute" placeholder="请输入景点属性/商家属性" />
|
||||
</el-form-item>
|
||||
<el-form-item label="省code" prop="province">
|
||||
<el-input v-model="form.province" placeholder="请输入省code" />
|
||||
</el-form-item>
|
||||
<el-form-item label="市/区" prop="city">
|
||||
<el-input v-model="form.city" placeholder="请输入市/区" />
|
||||
</el-form-item>
|
||||
<el-form-item label="个人简介" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入个人简介" />
|
||||
</el-form-item>
|
||||
<el-form-item label="会员等级" prop="memberLevel">
|
||||
<el-input v-model="form.memberLevel" placeholder="请输入会员等级" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tagId">
|
||||
<el-input v-model="form.tagId" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐语" prop="recommend">
|
||||
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
|
||||
</el-form-item>
|
||||
<el-form-item label="介绍" prop="intro">
|
||||
<el-input v-model="form.intro" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="queryParams.type == '0' ? '景点名称' : '商家名称'" prop="name">
|
||||
<el-input placeholder="请输入名称" v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="queryParams.type == '0'">
|
||||
<el-form-item label="景区等级" prop="level">
|
||||
<el-input-number v-model="form.level" :min="1" :max="5" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="推荐语" prop="recommend">
|
||||
<el-input v-model="form.recommend" placeholder="请输入推荐语" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" :min="1" :max="1000" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否开放" prop="isOpen">
|
||||
<el-radio-group v-model="form.isOpen">
|
||||
<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-input v-model="form.address" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
@ -155,11 +233,8 @@
|
||||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input v-model="form.latitude" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="orderNum">
|
||||
<el-input v-model="form.orderNum" placeholder="请输入排序" />
|
||||
</el-form-item>
|
||||
<el-form-item label="景区等级" prop="level">
|
||||
<el-input v-model="form.level" placeholder="请输入景区等级" />
|
||||
<el-form-item :label="`${queryParams.type == '0' ? '景点' : '商家'}简介`" prop="intro">
|
||||
<editor v-model="form.intro" :min-height="150" :height="200" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -173,9 +248,74 @@
|
||||
</template>
|
||||
|
||||
<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 { 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 autoTableHeight = ref<number>(750);
|
||||
const articleList = ref<ArticleVO[]>([]);
|
||||
@ -186,24 +326,43 @@ const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
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 articleFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
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 = {
|
||||
name: undefined,
|
||||
id: undefined,
|
||||
type: undefined,
|
||||
secondType: undefined,
|
||||
isOpen: undefined,
|
||||
attribute: undefined,
|
||||
attribute: '0',
|
||||
status: undefined,
|
||||
province: undefined,
|
||||
city: undefined,
|
||||
province: '海南省',
|
||||
city: '东方市',
|
||||
remark: undefined,
|
||||
memberLevel: undefined,
|
||||
tagId: undefined,
|
||||
@ -212,14 +371,15 @@ const initFormData: ArticleForm = {
|
||||
address: undefined,
|
||||
longitude: undefined,
|
||||
latitude: undefined,
|
||||
orderNum: undefined,
|
||||
level: undefined
|
||||
orderNum: 0,
|
||||
level: 0,
|
||||
mediaBoList: undefined
|
||||
};
|
||||
const data = reactive<PageData<ArticleForm, ArticleQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
secondType: undefined,
|
||||
isOpen: undefined,
|
||||
@ -238,29 +398,41 @@ const data = reactive<PageData<ArticleForm, ArticleQuery>>({
|
||||
level: undefined,
|
||||
params: {}
|
||||
},
|
||||
form: { ...initFormData },
|
||||
rules: {
|
||||
id: [{ required: true, message: '景点ID/租赁ID/游艇ID不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '类别 景点-0、租赁-1 游艇-2不能为空', trigger: 'change' }],
|
||||
secondType: [{ required: true, message: '二级类别不能为空', trigger: 'change' }],
|
||||
isOpen: [{ required: true, message: '开放/营业不能为空', trigger: 'blur' }],
|
||||
attribute: [{ required: true, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态 0-未发布 1-审核中 2-发布不能为空', trigger: 'change' }],
|
||||
province: [{ required: true, message: '省code不能为空', trigger: 'blur' }],
|
||||
city: [{ required: true, message: '市/区不能为空', trigger: 'blur' }],
|
||||
remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
|
||||
memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
number: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
|
||||
|
||||
isOpen: [{ required: true, message: '请选择开放状态', trigger: 'change' }],
|
||||
attribute: [{ required: false, message: '景点属性/商家属性不能为空', trigger: 'blur' }],
|
||||
// remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
|
||||
// memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
|
||||
tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
|
||||
recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
|
||||
intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
|
||||
longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
|
||||
latitude: [{ 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);
|
||||
// 路由监听================================================
|
||||
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(() => {
|
||||
getList();
|
||||
nextTick(() => {
|
||||
@ -309,12 +481,39 @@ const handleSelectionChange = (selection: ArticleVO[]) => {
|
||||
single.value = selection.length != 1;
|
||||
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 = () => {
|
||||
reset();
|
||||
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 = '修改景点、租赁管理';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
/** 新增景点，商家提交按钮 */
|
||||
const submitForm = () => {
|
||||
articleFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
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) {
|
||||
await updateArticle(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
@ -363,6 +568,41 @@ const handleExport = () => {
|
||||
`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>
|
||||
<style lang="scss" scoped>
|
||||
.el-card :deep(.el-card__body) {
|
||||
@ -373,4 +613,17 @@ const handleExport = () => {
|
||||
margin-top: 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user