wangxiang
3 years ago
5 changed files with 194 additions and 151 deletions
@ -1,124 +1,138 @@
@@ -1,124 +1,138 @@
|
||||
<template> |
||||
<BasicModal v-bind="$attrs" |
||||
defaultFullscreen |
||||
@register="registerModal" |
||||
@ok="handleSubmit" |
||||
> |
||||
<div class="pointBody"> |
||||
<div class="leftLayout"> |
||||
<AMapDesigner ref="AMapDesignerEl" |
||||
:options="state.mapData" |
||||
:sidebarControl="false" |
||||
:toolbarControl="false" |
||||
/> |
||||
</div> |
||||
<div class="rightLayout"> |
||||
<vxe-grid ref="VxeGridEl" v-bind="state.gridOptions"/> |
||||
</div> |
||||
</div> |
||||
</BasicModal> |
||||
</template> |
||||
<script lang="tsx" setup> |
||||
import { reactive, nextTick, ref, h } from 'vue'; |
||||
import { reactive, nextTick, ref } from 'vue'; |
||||
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||
import { Form, Select, Row, Col } from 'ant-design-vue'; |
||||
import { AMapDesigner } from '/@/components/AMap'; |
||||
import Sortable from 'sortablejs'; |
||||
import { VxeGridProps } from 'vxe-table'; |
||||
import { MapData, mapPointColumns } from '../amap.data'; |
||||
import { defaultMapData } from '/@/enums/amapEnum'; |
||||
import { cloneDeep } from 'lodash-es'; |
||||
|
||||
/** 类型规范统一声明定义区域 */ |
||||
interface WindowState { |
||||
sortable: Nullable<object>; |
||||
gridOptions: VxeGridProps; |
||||
mapData: MapData; |
||||
} |
||||
|
||||
/** 通用变量统一声明区域 */ |
||||
const VxeGridEl = ref(); |
||||
const mapSettingsState = reactive({ |
||||
sortable: {} |
||||
}); |
||||
const gridOptions = reactive({ |
||||
data: [ |
||||
{ |
||||
id: 10001, |
||||
name: 'Test1' |
||||
}, |
||||
{ |
||||
id: 10002, |
||||
name: 'Test2' |
||||
}, |
||||
{ |
||||
id: 10003, |
||||
name: 'Test3' |
||||
} |
||||
], |
||||
columns: [ |
||||
{ |
||||
width: '50px', |
||||
align: 'center', |
||||
slots: { |
||||
default ({ row }) { |
||||
return ( |
||||
<span class="drag-btn"> |
||||
<i class="vxe-icon--menu"/> |
||||
</span> |
||||
); |
||||
}, |
||||
header ({ row }) { |
||||
return ( |
||||
<vxe-tooltip content="按住后可以上下拖动排序!"> |
||||
<i class="vxe-icon--question"/> |
||||
</vxe-tooltip> |
||||
); |
||||
} |
||||
} |
||||
const AMapDesignerEl = ref(); |
||||
const state = reactive<WindowState>({ |
||||
sortable: null, |
||||
gridOptions: { |
||||
columns: mapPointColumns, |
||||
rowConfig: { |
||||
useKey: true, |
||||
isHover: true, |
||||
keyField: 'id' |
||||
}, |
||||
{ field: 'name', title: '名称' } |
||||
], |
||||
rowConfig: { |
||||
useKey: true, |
||||
isHover: true |
||||
border: true, |
||||
height: 'auto', |
||||
stripe: true |
||||
}, |
||||
border: true, |
||||
height: 'auto', |
||||
stripe: true |
||||
} as VxeGridProps); |
||||
const AForm = Form; |
||||
const AFormItem = Form.Item; |
||||
const ASelect = Select; |
||||
const ARow = Row; |
||||
const ACol = Col; |
||||
mapData: defaultMapData() |
||||
}); |
||||
const emit = defineEmits(['success', 'register']); |
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(data => { |
||||
// 处理设置数据 |
||||
state.mapData = cloneDeep(data.mapData); |
||||
const props: Partial<ModalProps> = { confirmLoading: false }; |
||||
props.title = '标记点配置'; |
||||
|
||||
nextTick(() => { |
||||
mapSettingsState.sortable = Sortable.create(VxeGridEl.value!.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), { |
||||
nextTick(()=> { |
||||
state.sortable = Sortable.create(VxeGridEl.value!.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), { |
||||
handle: '.drag-btn', |
||||
onEnd: ({ newIndex, oldIndex }) => { |
||||
const currRow = gridOptions.data?.splice(oldIndex!, 1)[0]; |
||||
gridOptions.data?.splice(newIndex!, 0, currRow); |
||||
const currRow = state.mapData.mapLogisticPoint?.splice(oldIndex!, 1)[0]; |
||||
state.mapData.mapLogisticPoint?.splice(newIndex!, 0, currRow); |
||||
AMapDesignerEl.value?.drawMapNavigate(state.mapData.mapLogisticPoint); |
||||
}, |
||||
ghostClass: 'ghostGrid' |
||||
}); |
||||
}); |
||||
|
||||
VxeGridEl.value.reloadData(state.mapData.mapLogisticPoint); |
||||
// 尾部:设置处理后的最终配置数据 |
||||
setModalProps(props); |
||||
}); |
||||
|
||||
|
||||
/** 处理弹出框提交 */ |
||||
function handleSubmit() { |
||||
|
||||
try { |
||||
// 处理提交之前逻辑 |
||||
setModalProps({ confirmLoading: true }); |
||||
// 处理重新排序 |
||||
const mapLogisticPoint = state.mapData.mapLogisticPoint.map((item, index)=> ({ sort: index, ...item })); |
||||
// 处理提交完成之后逻辑 |
||||
closeModal(); |
||||
emit('success', mapLogisticPoint); |
||||
} finally { |
||||
setModalProps({ confirmLoading: false }); |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
<template> |
||||
<BasicModal v-bind="$attrs" |
||||
defaultFullscreen |
||||
@register="registerModal" |
||||
@ok="handleSubmit" |
||||
> |
||||
<ARow> |
||||
<ACol :span="12"> |
||||
<AMapDesigner :sidebarControl="false"/> |
||||
</ACol> |
||||
<ACol :span="12"> |
||||
<vxe-grid ref="VxeGridEl" v-bind="gridOptions"/> |
||||
</ACol> |
||||
</ARow> |
||||
</BasicModal> |
||||
</template> |
||||
<style> |
||||
|
||||
.ghostGrid { |
||||
background: white; |
||||
border: 2px solid #67C23A; |
||||
box-sizing: border-box; |
||||
font-size: 0; |
||||
content: ""; |
||||
overflow: hidden; |
||||
padding: 0 !important; |
||||
position: relative; |
||||
outline: none 0; |
||||
height: 100% !important; |
||||
width: 0 !important; |
||||
float: left; |
||||
margin: 0 2px 0 2px; |
||||
<style lang="less" scoped> |
||||
|
||||
// 标记点样式 |
||||
.pointBody { |
||||
// 拖拽轨迹样式 |
||||
:deep(.ghostGrid) { |
||||
background: white; |
||||
border: 2px solid #67C23A; |
||||
box-sizing: border-box; |
||||
font-size: 0; |
||||
content: ""; |
||||
overflow: hidden; |
||||
padding: 0 !important; |
||||
position: relative; |
||||
outline: none 0; |
||||
height: 100% !important; |
||||
width: 0 !important; |
||||
float: left; |
||||
margin: 0 2px 0 2px; |
||||
} |
||||
|
||||
.leftLayout { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 50%; |
||||
bottom: 0; |
||||
|
||||
} |
||||
|
||||
.rightLayout { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
right: 0; |
||||
bottom: 0; |
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
</style> |
||||
|
||||
|
||||
Loading…
Reference in new issue