xingyuv
2 years ago
21 changed files with 147 additions and 106 deletions
@ -0,0 +1,40 @@
|
||||
<template> |
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="IP 查询" @ok="handleSubmit"> |
||||
<BasicForm @register="registerForm" /> |
||||
</BasicModal> |
||||
</template> |
||||
<script lang="ts" setup name="PostModal"> |
||||
import { BasicModal, useModalInner } from '@/components/Modal' |
||||
import { BasicForm, useForm } from '@/components/Form' |
||||
import { formSchema } from './area.data' |
||||
import { getAreaByIp } from '@/api/system/area' |
||||
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
||||
labelWidth: 100, |
||||
baseColProps: { span: 24 }, |
||||
schemas: formSchema, |
||||
showActionButtonGroup: false, |
||||
actionColOptions: { span: 23 } |
||||
}) |
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async () => { |
||||
resetFields() |
||||
setModalProps({ confirmLoading: false }) |
||||
}) |
||||
|
||||
async function handleSubmit() { |
||||
try { |
||||
const values = await validate() |
||||
setModalProps({ confirmLoading: true }) |
||||
const res = getAreaByIp(values.ip) |
||||
if (res) { |
||||
values.result = res |
||||
setFieldsValue({ ...values }) |
||||
} |
||||
// closeModal() |
||||
// emit('success') |
||||
} finally { |
||||
setModalProps({ confirmLoading: false }) |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,28 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table' |
||||
|
||||
export const columns: BasicColumn[] = [ |
||||
{ |
||||
title: '编号', |
||||
dataIndex: 'id', |
||||
width: 100 |
||||
}, |
||||
{ |
||||
title: '名字', |
||||
dataIndex: 'name', |
||||
width: 180 |
||||
} |
||||
] |
||||
|
||||
export const formSchema: FormSchema[] = [ |
||||
{ |
||||
label: 'IP', |
||||
field: 'IP', |
||||
required: true, |
||||
component: 'Input' |
||||
}, |
||||
{ |
||||
label: '地址', |
||||
field: 'result', |
||||
component: 'Input' |
||||
} |
||||
] |
||||
@ -1,3 +1,46 @@
|
||||
<template> |
||||
<div>开发中</div> |
||||
<div> |
||||
<BasicTable @register="registerTable"> |
||||
<template #toolbar> |
||||
<a-button type="primary" @click="handleCreate"> IP 查询 </a-button> |
||||
</template> |
||||
</BasicTable> |
||||
<AreaModal @register="registerModal" @success="reload()" /> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup name="Area"> |
||||
import { useModal } from '@/components/Modal' |
||||
import AreaModal from './AreaModal.vue' |
||||
import { BasicTable, useTable } from '@/components/Table' |
||||
import { getAreaTree } from '@/api/system/area' |
||||
import { columns } from './area.data' |
||||
import { handleTree } from '@/utils/tree' |
||||
|
||||
const [registerModal, { openModal }] = useModal() |
||||
|
||||
const [registerTable, { reload }] = useTable({ |
||||
title: '岗位列表', |
||||
api: getList, |
||||
columns, |
||||
rowKey: 'id', |
||||
isTreeTable: true, |
||||
pagination: false, |
||||
striped: false, |
||||
useSearchForm: false, |
||||
showTableSetting: true, |
||||
bordered: true, |
||||
showIndexColumn: false, |
||||
canResize: false |
||||
}) |
||||
|
||||
async function getList() { |
||||
const res = await getAreaTree() |
||||
return handleTree(res, 'id') |
||||
} |
||||
|
||||
function handleCreate() { |
||||
openModal(true, { |
||||
isUpdate: false |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
Reference in new issue