wangxiang
3 years ago
5 changed files with 194 additions and 151 deletions
@ -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> |
<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 { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||||
import { Form, Select, Row, Col } from 'ant-design-vue'; |
|
||||||
import { AMapDesigner } from '/@/components/AMap'; |
import { AMapDesigner } from '/@/components/AMap'; |
||||||
import Sortable from 'sortablejs'; |
import Sortable from 'sortablejs'; |
||||||
import { VxeGridProps } from 'vxe-table'; |
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 VxeGridEl = ref(); |
||||||
const mapSettingsState = reactive({ |
const AMapDesignerEl = ref(); |
||||||
sortable: {} |
const state = reactive<WindowState>({ |
||||||
}); |
sortable: null, |
||||||
const gridOptions = reactive({ |
gridOptions: { |
||||||
data: [ |
columns: mapPointColumns, |
||||||
{ |
rowConfig: { |
||||||
id: 10001, |
useKey: true, |
||||||
name: 'Test1' |
isHover: true, |
||||||
}, |
keyField: 'id' |
||||||
{ |
|
||||||
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> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
}, |
||||||
{ field: 'name', title: '名称' } |
border: true, |
||||||
], |
height: 'auto', |
||||||
rowConfig: { |
stripe: true |
||||||
useKey: true, |
|
||||||
isHover: true |
|
||||||
}, |
}, |
||||||
border: true, |
mapData: defaultMapData() |
||||||
height: 'auto', |
}); |
||||||
stripe: true |
|
||||||
} as VxeGridProps); |
|
||||||
const AForm = Form; |
|
||||||
const AFormItem = Form.Item; |
|
||||||
const ASelect = Select; |
|
||||||
const ARow = Row; |
|
||||||
const ACol = Col; |
|
||||||
const emit = defineEmits(['success', 'register']); |
const emit = defineEmits(['success', 'register']); |
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(data => { |
const [registerModal, { setModalProps, closeModal }] = useModalInner(data => { |
||||||
|
// 处理设置数据 |
||||||
|
state.mapData = cloneDeep(data.mapData); |
||||||
const props: Partial<ModalProps> = { confirmLoading: false }; |
const props: Partial<ModalProps> = { confirmLoading: false }; |
||||||
props.title = '标记点配置'; |
props.title = '标记点配置'; |
||||||
|
nextTick(()=> { |
||||||
nextTick(() => { |
state.sortable = Sortable.create(VxeGridEl.value!.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), { |
||||||
mapSettingsState.sortable = Sortable.create(VxeGridEl.value!.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), { |
|
||||||
handle: '.drag-btn', |
handle: '.drag-btn', |
||||||
onEnd: ({ newIndex, oldIndex }) => { |
onEnd: ({ newIndex, oldIndex }) => { |
||||||
const currRow = gridOptions.data?.splice(oldIndex!, 1)[0]; |
const currRow = state.mapData.mapLogisticPoint?.splice(oldIndex!, 1)[0]; |
||||||
gridOptions.data?.splice(newIndex!, 0, currRow); |
state.mapData.mapLogisticPoint?.splice(newIndex!, 0, currRow); |
||||||
|
AMapDesignerEl.value?.drawMapNavigate(state.mapData.mapLogisticPoint); |
||||||
}, |
}, |
||||||
ghostClass: 'ghostGrid' |
ghostClass: 'ghostGrid' |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
|
VxeGridEl.value.reloadData(state.mapData.mapLogisticPoint); |
||||||
// 尾部:设置处理后的最终配置数据 |
// 尾部:设置处理后的最终配置数据 |
||||||
setModalProps(props); |
setModalProps(props); |
||||||
}); |
}); |
||||||
|
|
||||||
|
/** 处理弹出框提交 */ |
||||||
function handleSubmit() { |
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> |
</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 { |
<style lang="less" scoped> |
||||||
background: white; |
|
||||||
border: 2px solid #67C23A; |
// 标记点样式 |
||||||
box-sizing: border-box; |
.pointBody { |
||||||
font-size: 0; |
// 拖拽轨迹样式 |
||||||
content: ""; |
:deep(.ghostGrid) { |
||||||
overflow: hidden; |
background: white; |
||||||
padding: 0 !important; |
border: 2px solid #67C23A; |
||||||
position: relative; |
box-sizing: border-box; |
||||||
outline: none 0; |
font-size: 0; |
||||||
height: 100% !important; |
content: ""; |
||||||
width: 0 !important; |
overflow: hidden; |
||||||
float: left; |
padding: 0 !important; |
||||||
margin: 0 2px 0 2px; |
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> |
</style> |
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue