zhc077
1 month ago
parent
b1a2dee3a0
commit
2cc5fc767f
3 changed files with 492 additions and 87 deletions
@ -0,0 +1,395 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!--引用表格--> |
||||||
|
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
||||||
|
<!--插槽:table标题--> |
||||||
|
<template #tableTitle> |
||||||
|
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 |
||||||
|
</a-button> |
||||||
|
<!-- <a-button type="primary" v-auth="'cooperationdepart:cooperation_depart:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
||||||
|
<j-upload-button type="primary" v-auth="'cooperationdepart:cooperation_depart:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
||||||
|
<a-dropdown v-if="selectedRowKeys.length > 0"> |
||||||
|
<template #overlay> |
||||||
|
<a-menu> |
||||||
|
<a-menu-item key="1" @click="batchHandleDelete"> |
||||||
|
<Icon icon="ant-design:delete-outlined"></Icon> |
||||||
|
删除 |
||||||
|
</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
</template> |
||||||
|
<a-button v-auth="'cooperationdepart:cooperation_depart:deleteBatch'">批量操作 |
||||||
|
<Icon icon="mdi:chevron-down"></Icon> |
||||||
|
</a-button> |
||||||
|
</a-dropdown>--> |
||||||
|
<!-- 高级查询 --> |
||||||
|
<!-- <super-query :config="superQueryConfig" @search="handleSuperQuery" />--> |
||||||
|
</template> |
||||||
|
<!--操作栏--> |
||||||
|
<template #action="{ record }"> |
||||||
|
<TableAction :actions="getTableAction(record)" |
||||||
|
:dropDownActions="getDropDownAction(record)"/> |
||||||
|
</template> |
||||||
|
<!--字段回显插槽--> |
||||||
|
<template v-slot:bodyCell="{ column, record, index, text }"> |
||||||
|
</template> |
||||||
|
</BasicTable> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<CooperationDepartModal @register="registerModal" |
||||||
|
@success="handleSuccess"></CooperationDepartModal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" name="cooperationdepart-cooperationDepart" setup> |
||||||
|
import {reactive, ref} from 'vue'; |
||||||
|
import {BasicTable, TableAction} from '/@/components/Table'; |
||||||
|
import {useModal} from '/@/components/Modal'; |
||||||
|
import {useListPage} from '/@/hooks/system/useListPage' |
||||||
|
import CooperationDepartModal from '/@/views/cooperationDepart/components/CooperationDepartModal.vue' |
||||||
|
import {columns, searchFormSchema, superQuerySchema} from '/@/views/cooperationDepart/CooperationDepart.data'; |
||||||
|
import {batchDelete, deleteOne, getExportUrl, getImportUrl, list} from '/@/views/cooperationDepart/CooperationDepart.api'; |
||||||
|
import {useUserStore} from '/@/store/modules/user'; |
||||||
|
|
||||||
|
const queryParam = reactive<any>({}); |
||||||
|
const checkedKeys = ref<Array<string | number>>([]); |
||||||
|
const userStore = useUserStore(); |
||||||
|
//注册model |
||||||
|
const [registerModal, {openModal}] = useModal(); |
||||||
|
//注册table数据 |
||||||
|
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({ |
||||||
|
tableProps: { |
||||||
|
title: '合作单位', |
||||||
|
api: list, |
||||||
|
columns, |
||||||
|
canResize: false, |
||||||
|
formConfig: { |
||||||
|
//labelWidth: 120, |
||||||
|
schemas: searchFormSchema, |
||||||
|
autoSubmitOnEnter: true, |
||||||
|
showAdvancedButton: true, |
||||||
|
fieldMapToNumber: [], |
||||||
|
fieldMapToTime: [], |
||||||
|
}, |
||||||
|
actionColumn: { |
||||||
|
width: 120, |
||||||
|
fixed: 'right' |
||||||
|
}, |
||||||
|
beforeFetch: (params) => { |
||||||
|
return Object.assign(params, queryParam); |
||||||
|
}, |
||||||
|
}, |
||||||
|
exportConfig: { |
||||||
|
name: "合作单位", |
||||||
|
url: getExportUrl, |
||||||
|
params: queryParam, |
||||||
|
}, |
||||||
|
importConfig: { |
||||||
|
url: getImportUrl, |
||||||
|
success: handleSuccess |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext |
||||||
|
|
||||||
|
// 高级查询配置 |
||||||
|
const superQueryConfig = reactive(superQuerySchema); |
||||||
|
|
||||||
|
/** |
||||||
|
* 高级查询事件 |
||||||
|
*/ |
||||||
|
function handleSuperQuery(params) { |
||||||
|
Object.keys(params).map((k) => { |
||||||
|
queryParam[k] = params[k]; |
||||||
|
}); |
||||||
|
reload(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 新增事件 |
||||||
|
*/ |
||||||
|
function handleAdd() { |
||||||
|
openModal(true, { |
||||||
|
isUpdate: false, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 编辑事件 |
||||||
|
*/ |
||||||
|
function handleEdit(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 详情 |
||||||
|
*/ |
||||||
|
function handleDetail(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 删除事件 |
||||||
|
*/ |
||||||
|
async function handleDelete(record) { |
||||||
|
await deleteOne({id: record.id}, handleSuccess); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 批量删除事件 |
||||||
|
*/ |
||||||
|
async function batchHandleDelete() { |
||||||
|
await batchDelete({ids: selectedRowKeys.value}, handleSuccess); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 成功回调 |
||||||
|
*/ |
||||||
|
function handleSuccess() { |
||||||
|
(selectedRowKeys.value = []) && reload(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 操作栏 |
||||||
|
*/ |
||||||
|
function getTableAction(record) { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '编辑', |
||||||
|
onClick: handleEdit.bind(null, record), |
||||||
|
// auth: 'cooperationdepart:cooperation_depart:edit' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 下拉操作栏 |
||||||
|
*/ |
||||||
|
function getDropDownAction(record) { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, { |
||||||
|
label: '删除', |
||||||
|
popConfirm: { |
||||||
|
title: '是否确认删除', |
||||||
|
confirm: handleDelete.bind(null, record), |
||||||
|
placement: 'topLeft', |
||||||
|
}, |
||||||
|
// auth: 'cooperationdepart:cooperation_depart:delete' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
:deep(.ant-picker), :deep(.ant-input-number) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<!-- |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!–引用表格–> |
||||||
|
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
||||||
|
<!–插槽:table标题–> |
||||||
|
<template #tableTitle> |
||||||
|
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
||||||
|
</template> |
||||||
|
<!–操作栏–> |
||||||
|
<template #action="{ record }"> |
||||||
|
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
||||||
|
</template> |
||||||
|
<!–字段回显插槽–> |
||||||
|
<template v-slot:bodyCell="{ column, record, index, text }"></template> |
||||||
|
</BasicTable> |
||||||
|
<!– 表单区域 –> |
||||||
|
<CooperationDepartModal @register="registerModal" @success="handleSuccess"></CooperationDepartModal> |
||||||
|
</div> |
||||||
|
<!– <div type="primary" class="button-container"> |
||||||
|
<a-button @click="goBack">返回 </a-button> |
||||||
|
</div>–> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" name="cooperationdepart-cooperationDepart" setup> |
||||||
|
import {reactive, ref} from 'vue'; |
||||||
|
import {BasicTable, TableAction} from '/@/components/Table'; |
||||||
|
import {useModal} from '/@/components/Modal'; |
||||||
|
import {useListPage} from '/@/hooks/system/useListPage' |
||||||
|
import CooperationDepartModal from '/@/views/cooperationDepart/components/CooperationDepartModal.vue' |
||||||
|
import {columns,searchFormSchema,superQuerySchema} from '/@/views/cooperationDepart/CooperationDepart.data'; |
||||||
|
import { |
||||||
|
batchDelete, |
||||||
|
deleteOne, |
||||||
|
getExportUrl, |
||||||
|
getImportUrl, |
||||||
|
list |
||||||
|
} from '@/views/cooperationDepart/CooperationDepart.api'; |
||||||
|
import {useUserStore} from '/@/store/modules/user'; |
||||||
|
|
||||||
|
const queryParam = reactive<any>({}); |
||||||
|
const checkedKeys = ref<Array<string | number>>([]); |
||||||
|
const userStore = useUserStore(); |
||||||
|
// import { useRouter } from 'vue-router'; |
||||||
|
//注册model |
||||||
|
const [registerModal, {openModal}] = useModal(); |
||||||
|
//注册table数据 |
||||||
|
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({ |
||||||
|
tableProps: { |
||||||
|
title: '合作单位', |
||||||
|
api: list, |
||||||
|
columns, |
||||||
|
canResize: false, |
||||||
|
formConfig: { |
||||||
|
//labelWidth: 120, |
||||||
|
schemas: searchFormSchema, |
||||||
|
autoSubmitOnEnter: true, |
||||||
|
showAdvancedButton: true, |
||||||
|
fieldMapToNumber: [], |
||||||
|
fieldMapToTime: [], |
||||||
|
}, |
||||||
|
actionColumn: { |
||||||
|
width: 120, |
||||||
|
fixed: 'right' |
||||||
|
}, |
||||||
|
beforeFetch: (params) => { |
||||||
|
return Object.assign(params, queryParam); |
||||||
|
}, |
||||||
|
}, |
||||||
|
exportConfig: { |
||||||
|
name: "合作单位", |
||||||
|
url: getExportUrl, |
||||||
|
params: queryParam, |
||||||
|
}, |
||||||
|
importConfig: { |
||||||
|
url: getImportUrl, |
||||||
|
success: handleSuccess |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext |
||||||
|
|
||||||
|
// 高级查询配置 |
||||||
|
const superQueryConfig = reactive(superQuerySchema); |
||||||
|
|
||||||
|
// const { back } = useRouter(); |
||||||
|
/** |
||||||
|
* 高级查询事件 |
||||||
|
*/ |
||||||
|
function handleSuperQuery(params) { |
||||||
|
Object.keys(params).map((k) => { |
||||||
|
queryParam[k] = params[k]; |
||||||
|
}); |
||||||
|
reload(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 新增事件 |
||||||
|
*/ |
||||||
|
function handleAdd() { |
||||||
|
openModal(true, { |
||||||
|
isUpdate: false, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 编辑事件 |
||||||
|
*/ |
||||||
|
function handleEdit(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 详情 |
||||||
|
*/ |
||||||
|
function handleDetail(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 删除事件 |
||||||
|
*/ |
||||||
|
async function handleDelete(record) { |
||||||
|
await deleteOne({id: record.id}, handleSuccess); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 批量删除事件 |
||||||
|
*/ |
||||||
|
async function batchHandleDelete() { |
||||||
|
await batchDelete({ids: selectedRowKeys.value}, handleSuccess); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 成功回调 |
||||||
|
*/ |
||||||
|
function handleSuccess() { |
||||||
|
(selectedRowKeys.value = []) && reload(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 操作栏 |
||||||
|
*/ |
||||||
|
function getTableAction(record) { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '编辑', |
||||||
|
onClick: handleEdit.bind(null, record), |
||||||
|
// auth: 'cooperationdepart:cooperation_depart:edit' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 下拉操作栏 |
||||||
|
*/ |
||||||
|
function getDropDownAction(record) { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, { |
||||||
|
label: '删除', |
||||||
|
popConfirm: { |
||||||
|
title: '是否确认删除', |
||||||
|
confirm: handleDelete.bind(null, record), |
||||||
|
placement: 'topLeft', |
||||||
|
}, |
||||||
|
// auth: 'cooperationdepart:cooperation_depart:delete' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
// function goBack(){ |
||||||
|
// back(); |
||||||
|
// }; |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
:deep(.ant-picker), :deep(.ant-input-number) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
--> |
||||||
Loading…
Reference in new issue