2021-10-20 14:32:09 +08:00
|
|
|
<template>
|
|
|
|
<div class="p-4">
|
2022-03-10 09:47:29 +08:00
|
|
|
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
|
|
|
<template #tableTitle>
|
|
|
|
<a-dropdown>
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu @click="handleCreate">
|
|
|
|
<a-menu-item :key="1">一对一示例</a-menu-item>
|
|
|
|
<a-menu-item :key="2">一对多示例</a-menu-item>
|
|
|
|
<a-menu-item :key="3">一对多(JVexTable)</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
<a-button type="primary">新增 <DownOutlined /></a-button>
|
|
|
|
</a-dropdown>
|
2021-10-20 14:32:09 +08:00
|
|
|
</template>
|
2022-03-10 09:47:29 +08:00
|
|
|
<template #ctype="{ text }">
|
|
|
|
{{text===1?'国内订单':text===2?'国际订单':''}}
|
2021-10-20 14:32:09 +08:00
|
|
|
</template>
|
|
|
|
<template #action="{ record }">
|
|
|
|
<TableAction :actions="getAction(record)" :dropDownActions="getDropDownActions(record)"/>
|
|
|
|
</template>
|
|
|
|
</BasicTable>
|
|
|
|
<!-- <TableDrawer @register="registerDrawer" @success="handleSuccess" />-->
|
2022-03-10 09:47:29 +08:00
|
|
|
<TableModal @register="registerModal" @success="handleSuccess"/>
|
|
|
|
<JVxeTableModal @register="registerVexTableModal" @success="handleSuccess"></JVxeTableModal>
|
|
|
|
<OneToOneModal @register="registerOneToOneModal" @success="handleSuccess"></OneToOneModal>
|
2021-10-20 14:32:09 +08:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-03-10 09:47:29 +08:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import {ref} from 'vue';
|
|
|
|
import {BasicTable, useTable, TableAction} from '/@/components/Table';
|
2021-10-20 14:32:09 +08:00
|
|
|
import TableDrawer from './drawer.vue';
|
|
|
|
import TableModal from './modal.vue';
|
|
|
|
import VexTableModal from './VexTableModal.vue';
|
2022-03-10 09:47:29 +08:00
|
|
|
import JVxeTableModal from './jvxetable/JVxeTableModal.vue';
|
2021-10-20 14:32:09 +08:00
|
|
|
import OneToOneModal from './OneToOneModal.vue';
|
2022-03-10 09:47:29 +08:00
|
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
|
|
|
import { useListPage } from '/@/hooks/system/useListPage'
|
|
|
|
|
2021-10-20 14:32:09 +08:00
|
|
|
import {useModal} from "/@/components/Modal";
|
2022-03-10 09:47:29 +08:00
|
|
|
import {columns} from "./data";
|
|
|
|
import {list,deleteOne} from "./api";
|
|
|
|
|
|
|
|
const [registerModal, {openModal}] = useModal();
|
|
|
|
const [registerOneToOneModal, {openModal: openOneToOneModal}] = useModal();
|
|
|
|
const [registerVexTableModal, {openModal: openVexTableModal}] = useModal();
|
|
|
|
|
|
|
|
//定义表格行操作
|
|
|
|
const getAction = (record) => {
|
|
|
|
return [{
|
|
|
|
label: '编辑',
|
|
|
|
onClick: handleEdit.bind(null, record),
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
|
|
|
|
const getDropDownActions = (record) => {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
label: '删除',
|
|
|
|
popConfirm: {
|
|
|
|
title: '是否删除?',
|
|
|
|
confirm: handleDelete.bind(null, record),
|
2021-10-20 14:32:09 +08:00
|
|
|
},
|
2022-03-10 09:47:29 +08:00
|
|
|
},
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
// 列表页面公共参数、方法
|
|
|
|
const { tableContext } = useListPage({
|
|
|
|
tableProps: {
|
|
|
|
api: list,
|
|
|
|
columns: columns,
|
|
|
|
useSearchForm:false,
|
|
|
|
actionColumn: {
|
|
|
|
width: 160,
|
|
|
|
title: '操作',
|
|
|
|
dataIndex: 'action',
|
|
|
|
slots: {customRender: 'action'},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
//注册table数据
|
|
|
|
const [registerTable, {reload},{ rowSelection }] = tableContext;
|
|
|
|
//新增类型
|
|
|
|
const addType = ref(1);
|
|
|
|
//添加事件
|
|
|
|
function handleCreate(e) {
|
|
|
|
addType.value = e.key
|
|
|
|
let type = addType.value;
|
|
|
|
if (type == 1) {
|
|
|
|
openOneToOneModal(true, {
|
|
|
|
isUpdate: false,
|
2021-10-20 14:32:09 +08:00
|
|
|
});
|
2022-03-10 09:47:29 +08:00
|
|
|
}
|
|
|
|
if (type == 2) {
|
|
|
|
openModal(true, {
|
|
|
|
isUpdate: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (type == 3) {
|
|
|
|
openVexTableModal(true, {
|
|
|
|
isUpdate: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2021-10-20 14:32:09 +08:00
|
|
|
|
2022-03-10 09:47:29 +08:00
|
|
|
//编辑事件
|
|
|
|
function handleEdit(record: Recordable) {
|
|
|
|
let type = addType.value;
|
|
|
|
if (type == 1) {
|
|
|
|
openOneToOneModal(true, {
|
|
|
|
record,
|
|
|
|
isUpdate: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (type == 2) {
|
|
|
|
openModal(true, {
|
|
|
|
record,
|
|
|
|
isUpdate: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (type == 3) {
|
|
|
|
openVexTableModal(true, {
|
|
|
|
record,
|
|
|
|
isUpdate: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2021-10-20 14:32:09 +08:00
|
|
|
|
2022-03-10 09:47:29 +08:00
|
|
|
async function handleDelete(record: Recordable) {
|
|
|
|
await deleteOne({id: record.id}, reload);
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleSuccess() {
|
|
|
|
reload()
|
|
|
|
}
|
2021-10-20 14:32:09 +08:00
|
|
|
</script>
|