| 提交 | 用户 | age | ||
| ec4248 | 1 | <template> |
| S | 2 | <div class="p-4 flex flex-col"> |
| 3 | <Drawer @register="registerDrawer" @success="handleSuccess" /> | |
| 4 | <div class="mb-4"> | |
| 5 | <a-button class="mr-2" @click="reloadTable"> 还原 </a-button> | |
| 6 | <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button> | |
| 7 | <!-- <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>--> | |
| 8 | <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button> | |
| 9 | <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button> | |
| 10 | <a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button> | |
| 11 | <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button> | |
| 12 | </div> | |
| 13 | <div class="mb-4"> | |
| 14 | <a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button> | |
| 15 | <a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button> | |
| 16 | <a-button class="mr-2" @click="setSelectedRowKeyList"> 设置选中行 </a-button> | |
| 17 | <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button> | |
| 18 | <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button> | |
| 19 | </div> | |
| 20 | <BasicTable | |
| 21 | @register="registerTable" | |
| 22 | @row-click="handleRowClick" | |
| 23 | @edit-end="handleEditEnd" | |
| 24 | @edit-cancel="handleEditCancel" | |
| 25 | :beforeEditSubmit="beforeEditSubmit" | |
| 26 | > | |
| 27 | <template #bodyCell="{ column, record }"> | |
| 28 | <template v-if="column.key === 'tags'" > | |
| 29 | <div @click="handleCellClick"> | |
| 30 | <span class="mr-1" v-for="tag in record.tags"> | |
| 31 | <Tag | |
| 32 | :key="tag" | |
| 33 | :color="tag.color" | |
| 34 | > | |
| 35 | {{ tag.name }} | |
| 36 | </Tag> | |
| 37 | </span> | |
| 38 | ||
| 39 | <!-- <Dropdown--> | |
| 40 | <!-- :dropMenuList="getDropMenuList"--> | |
| 41 | <!-- :trigger="['click']"--> | |
| 42 | <!-- placement="bottomCenter"--> | |
| 43 | <!-- overlayClassName="multiple-tabs__dropdown"--> | |
| 44 | <!-- >--> | |
| 45 | <!-- <Icon icon="ion:chevron-down"/>--> | |
| 46 | <!-- </Dropdown>--> | |
| 47 | </div> | |
| 48 | </template> | |
| 49 | <template v-else-if="column.key === 'action'"> | |
| 50 | <TableAction | |
| 51 | :actions="[ | |
| 52 | { | |
| 53 | label: '删除', | |
| 54 | icon: 'ic:outline-delete-outline', | |
| 55 | onClick: handleDelete.bind(null, record), | |
| 56 | }, | |
| 57 | ]" | |
| 58 | :dropDownActions="[ | |
| 59 | { | |
| 60 | label: '启用', | |
| 61 | popConfirm: { | |
| 62 | title: '是否启用？', | |
| 63 | confirm: handleOpen.bind(null, record), | |
| 64 | }, | |
| 65 | }, | |
| 66 | ]" | |
| 67 | /> | |
| 68 | </template> | |
| 69 | </template> | |
| 70 | </BasicTable> | |
| 71 | </div> | |
| 72 | </template> | |
| 73 | <script lang="ts" setup> | |
| 74 | import { ref,} from 'vue'; | |
| 75 | import { | |
| 76 | BasicTable, | |
| 77 | ColumnChangeParam, | |
| 78 | TableAction, | |
| 79 | useTable | |
| 80 | } from '@/components/Table'; | |
| 81 | import {getEditCellColumns,getFormConfig} from './tableData'; | |
| 82 | import { useMessage } from '@/hooks/web/useMessage'; | |
| 83 | import { Tag } from 'ant-design-vue'; | |
| 84 | import {cluesListApi} from "@/api/clues/table"; | |
| 0884a2 | 85 | // import {useModal} from "@/components/Modal"; |
| ec4248 | 86 | import Drawer from "./Drawer.vue"; |
| S | 87 | import {useDrawer} from "@/components/Drawer"; |
| 88 | // import Icon from "@/components/Icon/Icon.vue"; | |
| 89 | // import {Dropdown, type DropMenu} from "@/components/Dropdown"; | |
| 0884a2 | 90 | // const [register, { openModal: openModal }] = useModal(); |
| S | 91 | // const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal(); |
| ec4248 | 92 | const [registerDrawer, { openDrawer }] = useDrawer(); |
| S | 93 | |
| 94 | const { createMessage } = useMessage(); | |
| 95 | ||
| 96 | function handleDelete(record: Recordable) { | |
| 97 | console.log('点击了删除', record); | |
| 98 | } | |
| 99 | function handleOpen(record: Recordable) { | |
| 100 | console.log('点击了启用', record); | |
| 101 | } | |
| 102 | ||
| 103 | // const openModal = (value: string) => { | |
| 104 | // console.log(`openModal ${value}`); | |
| 105 | // }; | |
| 0884a2 | 106 | |
| ec4248 | 107 | |
| S | 108 | function handleSuccess() { |
| 109 | Logger.log('打开drawer成功') | |
| 110 | } | |
| 111 | ||
| 112 | // const getDropMenuList = computed(() => { | |
| 113 | // const dropMenuList: DropMenu[] = [ | |
| 114 | // { | |
| 115 | // text: '导入客户', | |
| 116 | // event: 'refresh', | |
| 117 | // onClick: (e) => { | |
| 118 | // console.log('click'); | |
| 119 | // }, | |
| 120 | // }, | |
| 121 | // { | |
| 122 | // text: '导入阿里客户', | |
| 123 | // event: 'drop', | |
| 124 | // onClick: (e) => { | |
| 125 | // console.log('click2'); | |
| 126 | // }, | |
| 127 | // }, | |
| 128 | // ]; | |
| 129 | // | |
| 130 | // return dropMenuList; | |
| 131 | // }); | |
| 132 | ||
| 133 | ||
| 134 | function onChange() { | |
| 135 | console.log('onChange', arguments); | |
| 136 | } | |
| 137 | const [ | |
| 138 | registerTable, | |
| 139 | { | |
| 140 | setLoading, | |
| 141 | setProps, | |
| 142 | getColumns, | |
| 143 | getDataSource, | |
| 144 | getRawDataSource, | |
| 145 | reload, | |
| 146 | getPaginationRef, | |
| 147 | setPagination, | |
| 148 | getSelectRows, | |
| 149 | getSelectRowKeys, | |
| 150 | setSelectedRowKeys, | |
| 151 | clearSelectedRowKeys, | |
| 152 | }, | |
| 153 | ] = useTable({ | |
| 154 | canResize: true, | |
| 155 | title: 'useTable示例', | |
| 156 | titleHelpMessage: '使用useTable调用表格内方法', | |
| 157 | api: cluesListApi, | |
| 158 | // beforeFetch: (params) => { | |
| 159 | // console.log('beforeFetch', params); | |
| 160 | // params.pageNo = params.page; | |
| 161 | // // return Promise.resolve(params); | |
| 162 | // }, | |
| 163 | columns: getEditCellColumns(), | |
| 164 | // defSort: { | |
| 165 | // pageNo: 1, | |
| 166 | // pageSize: 20, | |
| 167 | // field: 'name', | |
| 168 | // order: 'ascend', | |
| 169 | // }, | |
| 170 | rowKey: 'id', | |
| 171 | showTableSetting: true, | |
| 172 | showIndexColumn: false, // 是否显示序号列 | |
| 173 | useSearchForm: true, // 使用搜索表单 | |
| 174 | clickToRowSelect: false, | |
| 175 | formConfig: getFormConfig(), // 搜索表单配置 | |
| 176 | tableSetting: { | |
| 177 | // 是否显示刷新按钮 | |
| 178 | redo: true, | |
| 179 | // 是否显示尺寸调整按钮 | |
| 180 | size: true, | |
| 181 | // 是否显示字段调整按钮 | |
| 182 | setting: true, | |
| 183 | // 是否显示全屏按钮 | |
| 184 | fullScreen: true | |
| 185 | }, | |
| 186 | pagination: { | |
| 187 | // pageSize: 20, | |
| 188 | pageSizeOptions: ['10', '20', '50', '100'], | |
| 189 | defaultPageSize: 20, | |
| 190 | // showSizeChanger: true, | |
| 191 | }, | |
| 192 | onChange, | |
| 193 | rowSelection: { | |
| 194 | type: 'checkbox', | |
| 195 | }, | |
| 196 | onColumnsChange: (data: ColumnChangeParam[]) => { | |
| 197 | console.log('ColumnsChanged', data); | |
| 198 | }, | |
| 199 | showSelectionBar: true, // 显示多选状态栏 | |
| 200 | actionColumn: { | |
| 201 | width: 120, | |
| 202 | title: '操作', | |
| 203 | dataIndex: 'action', | |
| 204 | fixed: 'right', | |
| 205 | }, | |
| 206 | }); | |
| 207 | ||
| 208 | function changeLoading() { | |
| 209 | setLoading(true); | |
| 210 | setTimeout(() => { | |
| 211 | setLoading(false); | |
| 212 | }, 1000); | |
| 213 | } | |
| 214 | // function changeColumns() { | |
| 215 | // setProps({ | |
| 216 | // columns: getBasicShortColumns(), | |
| 217 | // rowSelection: { | |
| 218 | // type: 'checkbox', | |
| 219 | // }, | |
| 220 | // showIndexColumn: true, | |
| 221 | // }); | |
| 222 | // } | |
| 223 | function reloadTable() { | |
| 224 | setProps({ | |
| 225 | columns: getEditCellColumns(), | |
| 226 | rowSelection: { | |
| 227 | type: 'checkbox', | |
| 228 | }, | |
| 229 | showIndexColumn: true, | |
| 230 | }); | |
| 231 | reload({ | |
| 232 | page: 1, | |
| 233 | }); | |
| 234 | } | |
| 235 | function getColumn() { | |
| 236 | createMessage.info('请在控制台查看！'); | |
| 237 | console.log(getColumns()); | |
| 238 | } | |
| 239 | ||
| 240 | function getTableData() { | |
| 241 | createMessage.info('请在控制台查看！'); | |
| 242 | console.log(getDataSource()); | |
| 243 | } | |
| 244 | ||
| 245 | function getTableRawData() { | |
| 246 | createMessage.info('请在控制台查看！'); | |
| 247 | console.log(getRawDataSource()); | |
| 248 | } | |
| 249 | ||
| 250 | function getPagination() { | |
| 251 | createMessage.info('请在控制台查看！'); | |
| 252 | console.log(getPaginationRef()); | |
| 253 | } | |
| 254 | ||
| 255 | function setPaginationInfo() { | |
| 256 | setPagination({ | |
| 257 | current: 2, | |
| 258 | }); | |
| 259 | reload(); | |
| 260 | } | |
| 261 | function getSelectRowList() { | |
| 262 | createMessage.info('请在控制台查看！'); | |
| 263 | console.log(getSelectRows()); | |
| 264 | } | |
| 265 | function getSelectRowKeyList() { | |
| 266 | createMessage.info('请在控制台查看！'); | |
| 267 | console.log(getSelectRowKeys()); | |
| 268 | } | |
| 269 | function setSelectedRowKeyList() { | |
| 270 | setSelectedRowKeys(['0', '1', '2']); | |
| 271 | } | |
| 272 | function clearSelect() { | |
| 273 | clearSelectedRowKeys(); | |
| 274 | } | |
| 275 | ||
| 276 | ||
| 277 | const canResize = ref(false); | |
| 278 | const loading = ref(false); | |
| 279 | const striped = ref(true); | |
| 280 | const border = ref(true); | |
| 281 | const pagination = ref<any>(false); | |
| 282 | ||
| 283 | ||
| 284 | ||
| 285 | ||
| 286 | function handleEditEnd({ record, index, key, value }: Recordable) { | |
| 287 | console.log(record, index, key, value); | |
| 288 | return false; | |
| 289 | } | |
| 290 | async function beforeEditSubmit({ record, index, key, value }) { | |
| 291 | console.log('单元格数据正在准备提交', { record, index, key, value }); | |
| 292 | return await feakSave({ id: record.id, key, value }); | |
| 293 | } | |
| 294 | ||
| 295 | function handleEditCancel() { | |
| 296 | console.log('cancel'); | |
| 297 | } | |
| 298 | function handleRowClick(e) { | |
| 299 | Logger.log('handleRowClick',e) | |
| 300 | openDrawer(true, { | |
| 301 | isUpdate: false, | |
| 302 | }); | |
| 303 | } | |
| 304 | ||
| 305 | function handleCellClick() { | |
| 306 | console.log('handleCellClick..'); | |
| 307 | } | |
| 308 | // 模拟将指定数据保存 | |
| 309 | function feakSave({ value, key, id }) { | |
| 310 | createMessage.loading({ | |
| 311 | content: `正在模拟保存${key}`, | |
| 312 | key: '_save_fake_data', | |
| 313 | duration: 0, | |
| 314 | }); | |
| 315 | return new Promise((resolve) => { | |
| 316 | setTimeout(() => { | |
| 317 | if (value === '') { | |
| 318 | createMessage.error({ | |
| 319 | content: '保存失败：不能为空', | |
| 320 | key: '_save_fake_data', | |
| 321 | duration: 2, | |
| 322 | }); | |
| 323 | resolve(false); | |
| 324 | } else { | |
| 325 | createMessage.success({ | |
| 326 | content: `记录${id}的${key}已保存`, | |
| 327 | key: '_save_fake_data', | |
| 328 | duration: 2, | |
| 329 | }); | |
| 330 | resolve(true); | |
| 331 | } | |
| 332 | }, 2000); | |
| 333 | }); | |
| 334 | } | |
| 335 | </script> | |
