commit
a042ae5c7a
8 changed files with 278 additions and 65 deletions
@ -1,44 +1,190 @@ |
||||
<template> |
||||
<BasicModal @register="registerModal" title="日志" width="1024px" @ok="onOk"> |
||||
<PageWrapper> |
||||
<a-card title="流程进度" :bordered="true"> |
||||
<a-steps :current="1" progress-dot size="small"> |
||||
<a-step title="申请人提交"> |
||||
<template #description> <div>Jeecg</div> <p>2016-12-12 12:32</p> </template> |
||||
</a-step> |
||||
<a-step title="申请单位提交"> |
||||
<template #description> |
||||
<p>Chad</p> |
||||
</template> |
||||
</a-step> |
||||
<a-step title="科技主管提交" /> |
||||
<a-step title="市科技局提交" /> |
||||
<a-step title="财政主管处理" /> |
||||
</a-steps> |
||||
</a-card> |
||||
</PageWrapper> |
||||
</BasicModal> |
||||
<div> |
||||
<!--引用表格--> |
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
||||
<!--插槽:table标题--> |
||||
<template #tableTitle> |
||||
<a-button type="primary" v-auth="'projectLog:project_log:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
||||
<a-button type="primary" v-auth="'projectLog:project_log:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
||||
<j-upload-button type="primary" v-auth="'projectLog:project_log: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="'projectLog:project_log: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> |
||||
<!-- 表单区域 --> |
||||
<ProjectLogModal @register="registerModal" @success="handleSuccess"></ProjectLogModal> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { defineComponent } from 'vue'; |
||||
import { useAttrs } from '/@/hooks/core/useAttrs'; |
||||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
||||
import PageWrapper from "@/components/Page/src/PageWrapper.vue"; |
||||
<script lang="ts" name="projectLog-projectLog" setup> |
||||
import {ref, reactive, computed, unref} from 'vue'; |
||||
import {BasicTable, useTable, TableAction} from '/@/components/Table'; |
||||
import {useModal} from '/@/components/Modal'; |
||||
import { useListPage } from '/@/hooks/system/useListPage' |
||||
import ProjectLogModal from './components/ProjectLogModal.vue' |
||||
import {columns, searchFormSchema, superQuerySchema} from './ProjectLog.data'; |
||||
import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './ProjectLog.api'; |
||||
import { downloadFile } from '/@/utils/common/renderUtils'; |
||||
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 |
||||
|
||||
export default defineComponent({ |
||||
name: 'ProjectLogModal', |
||||
inheritAttrs: false, |
||||
components: {PageWrapper, BasicModal}, |
||||
setup() { |
||||
const attrs = useAttrs(); |
||||
const [registerModal, { closeModal }] = useModalInner(); |
||||
// 高级查询配置 |
||||
const superQueryConfig = reactive(superQuerySchema); |
||||
|
||||
function onOk() { |
||||
closeModal(); |
||||
/** |
||||
* 高级查询事件 |
||||
*/ |
||||
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: 'projectLog:project_log:edit' |
||||
} |
||||
] |
||||
} |
||||
/** |
||||
* 下拉操作栏 |
||||
*/ |
||||
function getDropDownAction(record){ |
||||
return [ |
||||
{ |
||||
label: '详情', |
||||
onClick: handleDetail.bind(null, record), |
||||
}, { |
||||
label: '删除', |
||||
popConfirm: { |
||||
title: '是否确认删除', |
||||
confirm: handleDelete.bind(null, record), |
||||
placement: 'topLeft', |
||||
}, |
||||
auth: 'projectLog:project_log:delete' |
||||
} |
||||
] |
||||
} |
||||
|
||||
|
||||
return { attrs, registerModal, onOk }; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
:deep(.ant-picker),:deep(.ant-input-number){ |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue