wangxiang
3 years ago
5 changed files with 269 additions and 6 deletions
@ -0,0 +1,58 @@
@@ -0,0 +1,58 @@
|
||||
<template> |
||||
<BasicModal v-bind="$attrs" |
||||
defaultFullscreen |
||||
@register="registerModal" |
||||
@ok="handleSubmit" |
||||
> |
||||
<ARow> |
||||
<ACol :span="12"> |
||||
<AMap :sidebarControl="false"/> |
||||
</ACol> |
||||
<ACol :span="12"> |
||||
<BasicTable @register="registerTable"/> |
||||
</ACol> |
||||
</ARow> |
||||
</BasicModal> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { reactive } from 'vue'; |
||||
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||
import { BasicTable, useTable } from '/@/components/Table'; |
||||
import { Form, Select, Row, Col } from 'ant-design-vue'; |
||||
import { AMap } from '/@/components/AMap'; |
||||
import { formMapDataSettingsColumns } from '/@/components/AMap/src/map.data'; |
||||
|
||||
const AForm = Form; |
||||
const AFormItem = Form.Item; |
||||
const ASelect = Select; |
||||
const ARow = Row; |
||||
const ACol = Col; |
||||
|
||||
const [ registerTable, { reload, getDataSource, setProps }] = useTable({ |
||||
title: '地图标记点数据', |
||||
columns: formMapDataSettingsColumns, |
||||
pagination: false, |
||||
dataSource: [{ |
||||
markId: '001', |
||||
markName: '标记点1' |
||||
},{ |
||||
markId: '002', |
||||
markName: '标记点2' |
||||
}], |
||||
striped: false, |
||||
useSearchForm: false, |
||||
showTableSetting: false, |
||||
bordered: true, |
||||
showIndexColumn: false, |
||||
canResize: false |
||||
}); |
||||
|
||||
const emit = defineEmits(['success', 'register']); |
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => { |
||||
const props: Partial<ModalProps> = { confirmLoading: false }; |
||||
props.title = '地图标记点数据设置弹出框'; |
||||
// 尾部:设置处理后的最终配置数据 |
||||
setModalProps(props); |
||||
}); |
||||
|
||||
</script> |
||||
@ -0,0 +1,105 @@
@@ -0,0 +1,105 @@
|
||||
<template> |
||||
<BasicModal v-bind="$attrs" |
||||
:width="920" |
||||
@register="registerModal" |
||||
@ok="handleSubmit" |
||||
> |
||||
|
||||
<AForm :labelCol="{ style: { width: '80px' } }" |
||||
:wrapperCol="{ style: { width: '100%', 'margin-right': '10px' } }" |
||||
:model="mutualState.modelRef" |
||||
> |
||||
<AFormItem label="收样员"> |
||||
<ASelect v-model:value="mutualState.modelRef.smallHospitalId" |
||||
:options="[ |
||||
{ value: '001', label: '收样员:小狗' }, |
||||
{ value: '002', label: '收样员:小明' }, |
||||
{ value: '003', label: '收样员:小红' } |
||||
]" |
||||
/> |
||||
</AFormItem> |
||||
</AForm> |
||||
<BasicTable @register="registerTable"/> |
||||
</BasicModal> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
import { reactive } from 'vue'; |
||||
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||
import { BasicTable, useTable, EditRecordRow, BasicColumn, ActionItem, TableAction } from '/@/components/Table'; |
||||
import { formTaskColumns, formMutualTaskColumns, largeHospitalMapList, smallHospitalMapList, formMutualTaskSettingColumns } from './map.data'; |
||||
import { Form, Select } from 'ant-design-vue'; |
||||
|
||||
const AForm = Form; |
||||
const AFormItem = Form.Item; |
||||
const ASelect = Select; |
||||
|
||||
/** 类型规范统一声明定义区域 */ |
||||
interface WindowState { |
||||
currentEditKeyRef: string; |
||||
formData: Recordable; |
||||
modelRef: Recordable; |
||||
} |
||||
|
||||
/** 通用变量统一声明区域 */ |
||||
const mutualState = reactive<WindowState>({ |
||||
currentEditKeyRef: '', |
||||
formData: {}, |
||||
modelRef: { |
||||
smallHospitalId: '' |
||||
} |
||||
}); |
||||
const emit = defineEmits(['success', 'register']); |
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => { |
||||
const props: Partial<ModalProps> = { confirmLoading: false }; |
||||
props.title = '交接任务弹出框'; |
||||
// 尾部:设置处理后的最终配置数据 |
||||
setModalProps(props); |
||||
}); |
||||
const [registerTable, { reload, getDataSource }] = useTable({ |
||||
title: '交接任务表格', |
||||
columns: formMutualTaskSettingColumns, |
||||
pagination: { |
||||
pageSize: 3, |
||||
showSizeChanger: false |
||||
}, |
||||
striped: false, |
||||
useSearchForm: false, |
||||
showTableSetting: false, |
||||
bordered: true, |
||||
showIndexColumn: false, |
||||
canResize: false, |
||||
actionColumn: { |
||||
width: 160, |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
slots: { customRender: 'action' }, |
||||
} |
||||
}); |
||||
|
||||
/** 处理弹出框提交 */ |
||||
async function handleSubmit() { |
||||
console.log(getDataSource()); |
||||
/*try { |
||||
// 提取验证数据 |
||||
const formData = await formElRef.value.validate(); |
||||
console.log(formData); |
||||
// 处理提交之前逻辑 |
||||
setModalProps({ confirmLoading: true }); |
||||
// 采用tag标签区分操作 |
||||
switch (state.tag) { |
||||
case 'add': |
||||
//await addConfig(formData); |
||||
break; |
||||
case 'edit': |
||||
//await editConfig(formData); |
||||
break; |
||||
} |
||||
// 处理提交完成之后逻辑 |
||||
closeModal(); |
||||
emit('success'); |
||||
} finally { |
||||
setModalProps({ confirmLoading: false }); |
||||
}*/ |
||||
} |
||||
|
||||
</script> |
||||
Loading…
Reference in new issue