| | |
| | | <template> |
| | | <div class="p-4 flex flex-col"> |
| | | <Drawer @register="registerDrawer" @success="handleSuccess"/> |
| | | <Drawer :destroyOnClose="true" @register="registerDrawer" @success="handleSuccess"/> |
| | | <!-- <div class="mb-4">--> |
| | | <!-- <a-button class="mr-2" @click="reloadTable"> 还原 </a-button>--> |
| | | <!-- <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>--> |
| | |
| | | @edit-end="handleEditEnd" |
| | | @edit-cancel="handleEditCancel" |
| | | :beforeEditSubmit="beforeEditSubmit" |
| | | :searchInfo="searchInfo" |
| | | > |
| | | <template #bodyCell="{ column, record }"> |
| | | <template v-if="column.key === 'tags'"> |
| | |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import {ref,} from 'vue'; |
| | | import {reactive, ref,} from 'vue'; |
| | | import { |
| | | BasicTable, |
| | | ColumnChangeParam, |
| | | TableAction, |
| | | useTable |
| | | } from '@/components/Table'; |
| | | import {getEditCellColumns, getFormConfig} from './tableData'; |
| | | import {getEditCellColumns} from './tableData'; |
| | | import {useMessage} from '@/hooks/web/useMessage'; |
| | | import {Tag} from 'ant-design-vue'; |
| | | import {cluesListApi} from "@/api/clues/table"; |
| | | import {cluesListApi} from "@/api/clues/list"; |
| | | // import {useModal} from "@/components/Modal"; |
| | | import Drawer from "./Drawer.vue"; |
| | | import {useDrawer} from "@/components/Drawer"; |
| | |
| | | // import {Dropdown, type DropMenu} from "@/components/Dropdown"; |
| | | // const [register, { openModal: openModal }] = useModal(); |
| | | // const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal(); |
| | | |
| | | import {useCluesRowStore} from "@/store/modules/cluesRowData"; |
| | | |
| | | const [registerDrawer, {openDrawer}] = useDrawer(); |
| | | |
| | | const {createMessage} = useMessage(); |
| | |
| | | // |
| | | // return dropMenuList; |
| | | // }); |
| | | |
| | | const searchInfo = reactive<Recordable>({}); |
| | | |
| | | function onChange() { |
| | | console.log('onChange', arguments); |
| | |
| | | // title: 'useTable示例', |
| | | // titleHelpMessage: '使用useTable调用表格内方法', |
| | | api: cluesListApi, |
| | | // beforeFetch: (params) => { |
| | | // console.log('beforeFetch', params); |
| | | // params.pageNo = params.page; |
| | | // // return Promise.resolve(params); |
| | | // }, |
| | | beforeFetch: (params) => { |
| | | Logger.log('beforeFetch', params); |
| | | // params.pageNo = params.page; |
| | | params.type = 'all'; |
| | | // params.searchTxt = { |
| | | // cluesName: '', |
| | | // isRead: 1, |
| | | // } |
| | | // delete params.page; |
| | | // return Promise.resolve(params); |
| | | }, |
| | | fetchSetting: { |
| | | pageField: 'pageNo', |
| | | }, |
| | | afterFetch: () => { |
| | | const result = getRawDataSource(); |
| | | Logger.log('afterFetch', result); |
| | | // setTimeout(() => { |
| | | // setPagination({ |
| | | // total: 100, |
| | | // }); |
| | | // }, 1000); |
| | | return result.data.data; |
| | | |
| | | }, |
| | | columns: getEditCellColumns(), |
| | | // defSort: { |
| | | // pageNo: 1, |
| | |
| | | showIndexColumn: false, // 是否显示序号列 |
| | | useSearchForm: true, // 使用搜索表单 |
| | | clickToRowSelect: false, |
| | | formConfig: getFormConfig(), // 搜索表单配置 |
| | | formConfig: { |
| | | labelWidth: 100, |
| | | layout: 'horizontal', |
| | | rowProps: { |
| | | justify: 'end', |
| | | }, |
| | | showResetButton: false, |
| | | showSubmitButton: false, |
| | | autoSubmitOnEnter: true, |
| | | schemas: [ |
| | | { |
| | | field: `searchTxt.cluesName`, |
| | | label: `搜索`, |
| | | component: 'Input', |
| | | colProps: { |
| | | xl: 12, |
| | | xxl: 8, |
| | | }, |
| | | // componentProps: { |
| | | // onSearch: (value) => { |
| | | // console.log(value); |
| | | // }, |
| | | // }, |
| | | }, |
| | | ], |
| | | }, // 搜索表单配置 |
| | | handleSearchInfoFn(info) { |
| | | console.log('handleSearchInfoFn', info); |
| | | return info; |
| | | }, |
| | | tableSetting: { |
| | | // 是否显示刷新按钮 |
| | | redo: true, |
| | |
| | | fullScreen: true |
| | | }, |
| | | pagination: { |
| | | total: 0, |
| | | // pageSize: 20, |
| | | pageSizeOptions: ['10', '20', '50', '100'], |
| | | defaultPageSize: 20, |
| | |
| | | function handleRowClick(data) { |
| | | Logger.log('handleRowClick', data); |
| | | openDrawer(true, { |
| | | isUpdate: false, |
| | | isUpdate: true, |
| | | clue: data |
| | | }); |
| | | const cluesRowStore= useCluesRowStore(); |
| | | cluesRowStore.setRowData(data); |
| | | } |
| | | |
| | | function handleCellClick() { |