10 changed files with 228 additions and 472 deletions
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<el-row style="flex-wrap: nowrap"> |
|||
<el-input v-model="value" :placeholder="placeholder" /> |
|||
<el-button @click="visibleClick">选择</el-button> |
|||
</el-row> |
|||
<el-dialog v-model="state.visible" title="详细地址" width="800px"> |
|||
<div class="map-container"> |
|||
<el-input id="tipInput" v-model="state.tipInput" /> |
|||
<div id="container" style="width: 100%; height: 400px"></div> |
|||
<div id="panel"></div> |
|||
</div> |
|||
<template #footer> |
|||
<el-button @click="selectClick" type="primary">确定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { reactive, watch, ref, onMounted, nextTick } from 'vue' |
|||
import { loadScript } from '@/utils/DesignForm' |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
modelValue?: string |
|||
disabled?: boolean |
|||
placeholder?: string |
|||
}>(), |
|||
{} |
|||
) |
|||
|
|||
const emits = defineEmits<{ |
|||
(e: 'update:modelValue', value: string): void |
|||
}>() |
|||
const value = ref(props.modelValue) |
|||
watch( |
|||
() => props.modelValue, |
|||
() => { |
|||
value.value = props.modelValue |
|||
} |
|||
) |
|||
const state = reactive({ |
|||
visible: false, |
|||
tipInput: '' |
|||
}) |
|||
const selectClick = () => { |
|||
state.visible = false |
|||
value.value = state.tipInput |
|||
emits('update:modelValue', value.value) |
|||
} |
|||
const visibleClick = () => { |
|||
state.visible = true |
|||
// 初始地址 |
|||
nextTick(() => { |
|||
const map = initMap() |
|||
mapSearch(map) |
|||
}) |
|||
} |
|||
const center = ref([113.264499, 23.130061]) |
|||
// 地图选择 |
|||
const initMap = () => { |
|||
const map = new AMap.Map('container', { |
|||
resizeEnable: true, |
|||
center: center.value, |
|||
zoom: 11, |
|||
viewMode: '3D' // 使用3D视图 |
|||
}) |
|||
//实时路况图层 |
|||
const marker = new AMap.Marker({ |
|||
position: map.getCenter(), |
|||
//icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', |
|||
// 设置是否可以拖拽 |
|||
draggable: true, |
|||
cursor: 'move' |
|||
// content: 'markerContent', |
|||
}) |
|||
const { lat, lng } = map.getCenter() |
|||
getDetailAddress(lng, lat, marker) |
|||
map.add(marker) //添加到地图 |
|||
map.on('click', (e: any) => { |
|||
const lnglat = e.lnglat |
|||
const lat = lnglat.lat |
|||
const lng = lnglat.lng |
|||
map.setCenter([lng, lat]) //设置地图中心点 |
|||
marker.setPosition([lng, lat]) //更新点标记位置 |
|||
getDetailAddress(lng, lat, marker) |
|||
}) |
|||
return map |
|||
} |
|||
const mapSearch = (map: any) => { |
|||
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () { |
|||
const auto = new AMap.AutoComplete({ |
|||
input: 'tipInput' |
|||
}) |
|||
const placeSearch = new AMap.PlaceSearch({ |
|||
pageSize: 5, // 单页显示结果条数 |
|||
pageIndex: 1, // 页码 |
|||
city: '', // 兴趣点城市 |
|||
citylimit: false, //是否强制限制在设置的城市内搜索 |
|||
map: map, // 展现结果的地图实例 |
|||
panel: 'panel', // 结果列表将在此容器中进行展示。 |
|||
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 |
|||
}) |
|||
auto.on('select', (evt: any) => { |
|||
placeSearch.setCity(evt.poi.adcode) |
|||
placeSearch.search(evt.poi.name) //关键字查询查询 |
|||
/*placeSearch.search(evt.poi.name, function (status, result) { |
|||
//关键字查询查询 |
|||
// 查询成功时，result即对应匹配的POI信息 |
|||
console.log("搜索结果", result); |
|||
});*/ |
|||
state.tipInput = evt.poi.name // 更新输入框的值 |
|||
}) //注册监听，当选中某条记录时会触发 |
|||
/* |
|||
// 搜索结果地图上的icon层 |
|||
placeSearch.on('markerClick',()=>{ |
|||
console.log('placeSearch.onmarkerClick') |
|||
})*/ |
|||
// 搜索列表点击事件 |
|||
placeSearch.on('listElementClick', (evt: any) => { |
|||
state.tipInput = evt.data.name |
|||
}) |
|||
}) |
|||
} |
|||
const getDetailAddress = (lng: number, lat: number, marker: any) => { |
|||
// 根据经纬度获取详细地址 |
|||
AMap.plugin('AMap.Geocoder', () => { |
|||
const geocoder = new AMap.Geocoder() |
|||
geocoder.getAddress([lng, lat], (status: string, result: any) => { |
|||
if (status === 'complete' && result.info === 'OK') { |
|||
const detailAddress = result.regeocode.formattedAddress |
|||
state.tipInput = detailAddress |
|||
marker.setLabel({ |
|||
direction: 'center', |
|||
offset: new AMap.Pixel(0, -25), //设置文本标注偏移量 |
|||
content: `<div class='info'>${detailAddress}</div>` //设置文本标注内容 |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
onMounted(() => { |
|||
console.log('onMountedonMounted') |
|||
loadScript( |
|||
'https://webapi.amap.com/maps?v=2.0&key=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF&plugin=AMap.PlaceSearch' |
|||
).then(() => {}) |
|||
}) |
|||
</script> |
|||
<style lang="scss"> |
|||
.map-container { |
|||
position: relative; |
|||
} |
|||
.amap-sug-result { |
|||
z-index: 2500; |
|||
} |
|||
#panel { |
|||
z-index: 2500; |
|||
position: absolute; |
|||
background-color: white; |
|||
max-height: 90%; |
|||
overflow-y: auto; |
|||
top: 10px; |
|||
right: 10px; |
|||
width: 280px; |
|||
.amap_lib_placeSearch { |
|||
border: 1px solid #ebedf0; |
|||
border-radius: 2px; |
|||
padding: 5px 10px 2px; |
|||
.poibox { |
|||
border-bottom: 1px solid #e8e8e8; |
|||
cursor: pointer; |
|||
padding: 10px 5px; |
|||
position: relative; |
|||
min-height: 35px; |
|||
} |
|||
.amap_lib_placeSearch_pic { |
|||
width: 46px; |
|||
height: 46px; |
|||
float: left; |
|||
margin: 4px 10px 0 0; |
|||
img { |
|||
width: 46px; |
|||
height: 46px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,463 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
defineOptions({ |
|||
name: "cmenu", |
|||
inheritAttrs: false, |
|||
}); |
|||
|
|||
import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types"; |
|||
import { |
|||
listMenus, |
|||
getMenuForm, |
|||
listMenuOptions, |
|||
addMenu, |
|||
deleteMenu, |
|||
updateMenu, |
|||
} from "@/api/menu"; |
|||
|
|||
import { MenuTypeEnum } from "@/enums/MenuTypeEnum"; |
|||
|
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import IconSelect from "@/components/IconSelect/index.vue"; |
|||
|
|||
const queryFormRef = ref(ElForm); |
|||
const menuFormRef = ref(ElForm); |
|||
|
|||
const loading = ref(false); |
|||
const dialog = reactive<DialogOption>({ |
|||
visible: false, |
|||
}); |
|||
|
|||
const queryParams = reactive<MenuQuery>({}); |
|||
const menuList = ref<MenuVO[]>([]); |
|||
|
|||
const menuOptions = ref<OptionType[]>([]); |
|||
|
|||
const formData = reactive<MenuForm>({ |
|||
parentId: 0, |
|||
visible: 1, |
|||
sort: 1, |
|||
type: MenuTypeEnum.MENU, |
|||
outside:1 |
|||
}); |
|||
|
|||
const rules = reactive({ |
|||
parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }], |
|||
name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }], |
|||
type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }], |
|||
path: [{ required: true, message: "请输入路由路径", trigger: "blur" }], |
|||
component: [ |
|||
{ required: true, message: "请输入组件完整路径", trigger: "blur" }, |
|||
], |
|||
}); |
|||
|
|||
// 选择表格的行菜单ID |
|||
const selectedRowMenuId = ref<number | undefined>(); |
|||
|
|||
const menuCacheData = reactive({ |
|||
type: "", |
|||
path: "", |
|||
}); |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function handleQuery() { |
|||
// 重置父组件 |
|||
loading.value = true; |
|||
listMenus(queryParams) |
|||
.then(({ data }) => { |
|||
menuList.value = data; |
|||
}) |
|||
.then(() => { |
|||
loading.value = false; |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 查询重置 |
|||
*/ |
|||
function resetQuery() { |
|||
queryFormRef.value.resetFields(); |
|||
handleQuery(); |
|||
} |
|||
|
|||
/** |
|||
* 行点击事件 |
|||
* |
|||
* @param row |
|||
*/ |
|||
function onRowClick(row: MenuVO) { |
|||
selectedRowMenuId.value = row.id; |
|||
} |
|||
|
|||
/** |
|||
* 打开表单弹窗 |
|||
* |
|||
* @param parentId 父菜单ID |
|||
* @param menuId 菜单ID |
|||
*/ |
|||
function openDialog(parentId?: number, menuId?: number) { |
|||
listMenuOptions() |
|||
.then(({ data }) => { |
|||
menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }]; |
|||
}) |
|||
.then(() => { |
|||
dialog.visible = true; |
|||
if (menuId) { |
|||
dialog.title = "编辑菜单"; |
|||
getMenuForm({id:menuId.toString()}).then(({ data }) => { |
|||
Object.assign(formData, data); |
|||
menuCacheData.type = data.type; |
|||
menuCacheData.path = data.path ?? ""; |
|||
}); |
|||
} else { |
|||
dialog.title = "新增菜单"; |
|||
formData.parentId = parentId; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 菜单类型 change |
|||
*/ |
|||
function onMenuTypeChange() { |
|||
// 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径 |
|||
if (formData.type !== menuCacheData.type) { |
|||
formData.path = ""; |
|||
} else { |
|||
formData.path = menuCacheData.path; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 菜单提交 |
|||
*/ |
|||
function submitForm() { |
|||
menuFormRef.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
const menuId = formData.id; |
|||
if (menuId) { |
|||
updateMenu(formData).then(() => { |
|||
ElMessage.success("修改成功"); |
|||
closeDialog(); |
|||
handleQuery(); |
|||
}); |
|||
} else { |
|||
addMenu(formData).then(() => { |
|||
ElMessage.success("新增成功"); |
|||
closeDialog(); |
|||
handleQuery(); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 删除菜单 |
|||
*/ |
|||
function handleDelete(menuId: number) { |
|||
if (!menuId) { |
|||
ElMessage.warning("请勾选删除项"); |
|||
return false; |
|||
} |
|||
|
|||
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
deleteMenu({id:menuId.toString()}).then(() => { |
|||
ElMessage.success("删除成功"); |
|||
handleQuery(); |
|||
}); |
|||
}) |
|||
.catch(() => ElMessage.info("已取消删除")); |
|||
} |
|||
|
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
function closeDialog() { |
|||
dialog.visible = false; |
|||
resetForm(); |
|||
} |
|||
|
|||
/** |
|||
* 重置表单 |
|||
*/ |
|||
function resetForm() { |
|||
menuFormRef.value.resetFields(); |
|||
menuFormRef.value.clearValidate(); |
|||
|
|||
formData.id = undefined; |
|||
formData.parentId = 0; |
|||
formData.visible = 1; |
|||
formData.sort = 1; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
handleQuery(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="search"> |
|||
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> |
|||
<el-form-item label="关键字" prop="keywords"> |
|||
<el-input |
|||
v-model="queryParams.keywords" |
|||
placeholder="菜单名称" |
|||
clearable |
|||
@keyup.enter="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleQuery" |
|||
><template #icon><i-ep-search /></template>搜索</el-button |
|||
> |
|||
<el-button @click="resetQuery"> |
|||
<template #icon><i-ep-refresh /></template> |
|||
重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<el-card shadow="never"> |
|||
<template #header> |
|||
<el-button type="success" @click="openDialog(0)" v-hasPerm="['121646328009732096']"> |
|||
<template #icon><i-ep-plus /></template> |
|||
新增</el-button |
|||
> |
|||
</template> |
|||
|
|||
<el-table |
|||
v-loading="loading" |
|||
:data="menuList" |
|||
highlight-current-row |
|||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" |
|||
row-key="id" |
|||
default-expand-all |
|||
border |
|||
@row-click="onRowClick" |
|||
> |
|||
<el-table-column label="菜单名称" min-width="200"> |
|||
<template #default="scope"> |
|||
<svg-icon |
|||
:icon-class=" |
|||
scope.row.type === MenuTypeEnum.BUTTON |
|||
? 'button' |
|||
: scope.row.icon |
|||
" |
|||
/> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="菜单类型" align="center" width="100"> |
|||
<template #default="scope"> |
|||
<el-tag |
|||
v-if="scope.row.class === MenuTypeEnum.CATALOG" |
|||
type="warning" |
|||
>目录</el-tag |
|||
> |
|||
<el-tag v-if="scope.row.class === MenuTypeEnum.MENU" type="success" |
|||
>菜单</el-tag |
|||
> |
|||
<el-tag v-if="scope.row.class === MenuTypeEnum.BUTTON" type="danger" |
|||
>按钮</el-tag |
|||
> |
|||
<el-tag v-if="scope.row.class === MenuTypeEnum.EXTLINK" type="info" |
|||
>外链</el-tag |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
label="权限标识" |
|||
align="center" |
|||
width="200" |
|||
prop="permcode" |
|||
/> |
|||
|
|||
<el-table-column label="状态" align="center" width="100"> |
|||
<template #default="scope"> |
|||
<el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag> |
|||
<el-tag v-else type="info">隐藏</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="排序" align="center" width="50" prop="sort" /> |
|||
|
|||
<el-table-column fixed="right" align="center" label="操作" width="220"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
v-if="scope.row.class == 'CATALOG' || scope.row.class == 'MENU'" |
|||
v-hasPerm="['121646328009732096']" |
|||
type="primary" |
|||
link |
|||
size="small" |
|||
@click.stop="openDialog(scope.row.id)" |
|||
> |
|||
<i-ep-plus />新增 |
|||
</el-button> |
|||
|
|||
<el-button |
|||
v-hasPerm="['122274485305880576']" |
|||
type="primary" |
|||
link |
|||
size="small" |
|||
@click.stop="openDialog(undefined, scope.row.id)" |
|||
> |
|||
<i-ep-edit />编辑 |
|||
</el-button> |
|||
<el-button |
|||
v-hasPerm="['122274565337395200']" |
|||
type="primary" |
|||
link |
|||
size="small" |
|||
@click.stop="handleDelete(scope.row.id)" |
|||
><i-ep-delete /> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
|
|||
<el-dialog |
|||
v-model="dialog.visible" |
|||
:title="dialog.title" |
|||
destroy-on-close |
|||
append-to-body |
|||
width="750px" |
|||
@close="closeDialog" |
|||
> |
|||
<el-form |
|||
ref="menuFormRef" |
|||
:model="formData" |
|||
:rules="rules" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label="父级菜单" prop="parentId"> |
|||
<el-tree-select |
|||
v-model="formData.parentId" |
|||
placeholder="选择上级菜单" |
|||
:data="menuOptions" |
|||
filterable |
|||
check-strictly |
|||
:render-after-expand="false" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="菜单名称" prop="name"> |
|||
<el-input v-model="formData.name" placeholder="请输入菜单名称" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="菜单类型" prop="type"> |
|||
<el-radio-group v-model="formData.type" @change="onMenuTypeChange"> |
|||
<el-radio label="CATALOG">目录</el-radio> |
|||
<el-radio label="MENU">菜单</el-radio> |
|||
<el-radio label="BUTTON">按钮</el-radio> |
|||
<el-radio label="EXTLINK">外链</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
v-if="formData.type == 'EXTLINK'" |
|||
label="外链地址" |
|||
prop="path" |
|||
> |
|||
<el-input v-model="formData.path" placeholder="请输入外链完整路径" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
v-if="formData.type == 'CATALOG' || formData.type == 'MENU'" |
|||
label="路由路径" |
|||
prop="path" |
|||
> |
|||
<el-input |
|||
v-if="formData.type == 'CATALOG'" |
|||
v-model="formData.path" |
|||
placeholder="/system (目录以/开头)" |
|||
/> |
|||
<el-input v-else v-model="formData.path" placeholder="user" /> |
|||
</el-form-item> |
|||
|
|||
<!-- 组件页面完整路径 --> |
|||
<el-form-item |
|||
v-if="formData.type == MenuTypeEnum.MENU" |
|||
label="页面路径" |
|||
prop="component" |
|||
> |
|||
<el-input |
|||
v-model="formData.component" |
|||
placeholder="system/user/index" |
|||
style="width: 95%" |
|||
> |
|||
<template v-if="formData.parentId != 0" #prepend |
|||
>src/views/</template |
|||
> |
|||
<template v-if="formData.parentId != 0" #append>.vue</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<!-- 权限标识 --> |
|||
<!-- <el-form-item |
|||
v-if="formData.type == 'BUTTON'" |
|||
label="权限标识" |
|||
prop="perm" |
|||
> |
|||
<el-input v-model="formData.perm" placeholder="sys:user:add" /> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item |
|||
v-if="formData.type !== 'BUTTON'" |
|||
label="图标" |
|||
prop="icon" |
|||
> |
|||
<!-- 图标选择器 --> |
|||
<icon-select v-model="formData.icon" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
v-if="formData.type == MenuTypeEnum.CATALOG" |
|||
label="跳转路由" |
|||
> |
|||
<el-input v-model="formData.redirect" placeholder="跳转路由" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="formData.type !== 'BUTTON'" label="状态"> |
|||
<el-radio-group v-model="formData.visible"> |
|||
<el-radio :label="1">显示</el-radio> |
|||
<el-radio :label="0">隐藏</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="可见范围"> |
|||
<el-radio-group v-model="formData.outside"> |
|||
<el-radio :label="1">内部使用</el-radio> |
|||
<el-radio :label="2">外部使用</el-radio> |
|||
<el-radio :label="3">内外使用</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="排序" prop="sort"> |
|||
<el-input-number |
|||
v-model="formData.sort" |
|||
style="width: 100px" |
|||
controls-position="right" |
|||
:min="0" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="closeDialog">取 消</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue