123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <template>
- <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
- <BasicTable @register="registerTable">
- <template #toolbar>
- <a-button type="primary" @click="handleEdit({}, false)" v-auth="'00014:add'">
- 新增
- </a-button>
- <ExportTool
- v-auth="'00014:export'"
- ref="exportToolRef"
- type="class"
- @click="handelExportClick"
- />
- </template>
- <template #action="{ record }">
- <div style="display: flex; justify-content: center">
- <TableAction
- :actions="[
- {
- label: '编辑',
- auth: '00014:edit',
- onClick: handleEdit.bind(null, record, true),
- },
- {
- label: '删除',
- color: 'error',
- auth: '00014:delete',
- onClick: handleDelete.bind(null, record),
- },
- ]"
- />
- </div>
- </template>
- </BasicTable>
- <FormEdit @register="registerModal" @success="handleSuccess" />
- </PageWrapper>
- </template>
- <script setup lang="ts">
- import { onMounted, ref } from 'vue';
- import { PageWrapper } from '/@/components/Page';
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import { tableColumns, searchFormSchema } from './data.config';
- import { deleteBaseClass, getBaseClassPage } from '/@/services/apis/BaseClassController';
- import { useModal } from '/@/components/Modal';
- import { useMessage } from '/@/hooks/web/useMessage';
- import FormEdit from './edit.vue';
- import ExportTool from '/@/views/export/template/components/tool.vue';
- const exportToolRef = ref<ElRef>(null);
- const [registerModal, { openModal }] = useModal();
- const [registerTable, { reload, getForm, getSelectRowKeys }] = useTable({
- api: getBaseClassPage,
- title: '班级列表',
- rowKey: 'id',
- columns: tableColumns,
- formConfig: {
- labelWidth: 120,
- schemas: searchFormSchema,
- },
- useSearchForm: true,
- showTableSetting: true,
- bordered: true,
- immediate: true,
- canResize: true,
- actionColumn: {
- width: 120,
- title: '操作',
- dataIndex: 'action',
- slots: { customRender: 'action' },
- fixed: 'right',
- },
- rowSelection: {
- type: 'checkbox',
- },
- });
- const { createConfirm, createMessage } = useMessage();
- const handleDelete = (record: any) => {
- createConfirm({
- iconType: 'warning',
- title: '温馨提醒',
- content: '是否删除该记录?',
- onOk: async () => {
- try {
- await deleteBaseClass([record.id]);
- createMessage.success('删除成功');
- await reload();
- } catch (e) {
- createMessage.error('删除失败');
- }
- },
- okText: '确认',
- cancelText: '取消',
- });
- };
- const handleEdit = (record: any, isUpdate: boolean) => {
- openModal(true, {
- isUpdate: isUpdate,
- baseData: {
- ...record,
- },
- });
- };
- const handleSuccess = async () => {
- await reload();
- };
- onMounted(async () => {});
- const handelExportClick = (type) => {
- const data: Recordable = {
- conditions: [],
- ids: [],
- };
- if (type === 'all') {
- const formData = getForm().getFieldsValue();
- for (const key in formData) {
- data.conditions.push({ keyName: key, keyValue: formData[key], keyType: '1' });
- }
- } else {
- const selectKeys = getSelectRowKeys();
- if (selectKeys.length === 0) {
- createMessage.warning('请选择需要导入的数据');
- return;
- }
- data.ids = selectKeys;
- }
- exportToolRef.value?.open(data);
- };
- </script>
- <style scoped lang="less"></style>
|