canrd-outside / order-erp-front · Commits

Commit de7279399d443926ddce90395bb19cd471d48e80

Authored by Wit〆苗大
Committed by GitHub
1 parent a89e497e

fix(table): 彻底修复column.slots已废弃的antd报错, 所有用到的demo页修改为antd 3.x v-slot:headerCell … 

…和 v-slot:bodyCell 写法 (#2030)

Co-authored-by: 苗大 <v.caoshm@yoozoo.com>
Inline Side-by-side
Showing 13 changed files with 228 additions and 198 deletions
src/views/demo/page/form/high/PersonTable.vue
  View file @de72793
1 1 <template>
2 2 <div>
3 3 <BasicTable @register="registerTable" @edit-change="handleEditChange">
4   - <template #action="{ record, column }">
5   - <TableAction :actions="createActions(record, column)" />
  4 + <template #bodyCell="{ column, record }">
  5 + <template v-if="column.key === 'action'">
  6 + <TableAction :actions="createActions(record, column)" />
  7 + </template>
6 8 </template>
7 9 </BasicTable>
8 10 <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
... ... @@ -65,7 +67,7 @@
65 67 width: 160,
66 68 title: '操作',
67 69 dataIndex: 'action',
68   - slots: { customRender: 'action' },
  70 + // slots: { customRender: 'action' },
69 71 },
70 72 pagination: false,
71 73 });
... ...
src/views/demo/system/account/index.vue
  View file @de72793
... ... @@ -5,31 +5,33 @@
5 5 <template #toolbar>
6 6 <a-button type="primary" @click="handleCreate">新增账号</a-button>
7 7 </template>
8   - <template #action="{ record }">
9   - <TableAction
10   - :actions="[
11   - {
12   - icon: 'clarity:info-standard-line',
13   - tooltip: '查看用户详情',
14   - onClick: handleView.bind(null, record),
15   - },
16   - {
17   - icon: 'clarity:note-edit-line',
18   - tooltip: '编辑用户资料',
19   - onClick: handleEdit.bind(null, record),
20   - },
21   - {
22   - icon: 'ant-design:delete-outlined',
23   - color: 'error',
24   - tooltip: '删除此账号',
25   - popConfirm: {
26   - title: '是否确认删除',
27   - placement: 'left',
28   - confirm: handleDelete.bind(null, record),
  8 + <template #bodyCell="{ column, record }">
  9 + <template v-if="column.key === 'action'">
  10 + <TableAction
  11 + :actions="[
  12 + {
  13 + icon: 'clarity:info-standard-line',
  14 + tooltip: '查看用户详情',
  15 + onClick: handleView.bind(null, record),
29 16 },
30   - },
31   - ]"
32   - />
  17 + {
  18 + icon: 'clarity:note-edit-line',
  19 + tooltip: '编辑用户资料',
  20 + onClick: handleEdit.bind(null, record),
  21 + },
  22 + {
  23 + icon: 'ant-design:delete-outlined',
  24 + color: 'error',
  25 + tooltip: '删除此账号',
  26 + popConfirm: {
  27 + title: '是否确认删除',
  28 + placement: 'left',
  29 + confirm: handleDelete.bind(null, record),
  30 + },
  31 + },
  32 + ]"
  33 + />
  34 + </template>
33 35 </template>
34 36 </BasicTable>
35 37 <AccountModal @register="registerModal" @success="handleSuccess" />
... ... @@ -77,7 +79,7 @@
77 79 width: 120,
78 80 title: '操作',
79 81 dataIndex: 'action',
80   - slots: { customRender: 'action' },
  82 + // slots: { customRender: 'action' },
81 83 },
82 84 });
83 85  
... ...
src/views/demo/system/dept/index.vue
  View file @de72793
... ... @@ -4,24 +4,26 @@
4 4 <template #toolbar>
5 5 <a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
6 6 </template>
7   - <template #action="{ record }">
8   - <TableAction
9   - :actions="[
10   - {
11   - icon: 'clarity:note-edit-line',
12   - onClick: handleEdit.bind(null, record),
13   - },
14   - {
15   - icon: 'ant-design:delete-outlined',
16   - color: 'error',
17   - popConfirm: {
18   - title: '是否确认删除',
19   - placement: 'left',
20   - confirm: handleDelete.bind(null, record),
  7 + <template #bodyCell="{ column, record }">
  8 + <template v-if="column.key === 'action'">
  9 + <TableAction
  10 + :actions="[
  11 + {
  12 + icon: 'clarity:note-edit-line',
  13 + onClick: handleEdit.bind(null, record),
21 14 },
22   - },
23   - ]"
24   - />
  15 + {
  16 + icon: 'ant-design:delete-outlined',
  17 + color: 'error',
  18 + popConfirm: {
  19 + title: '是否确认删除',
  20 + placement: 'left',
  21 + confirm: handleDelete.bind(null, record),
  22 + },
  23 + },
  24 + ]"
  25 + />
  26 + </template>
25 27 </template>
26 28 </BasicTable>
27 29 <DeptModal @register="registerModal" @success="handleSuccess" />
... ... @@ -62,7 +64,7 @@
62 64 width: 80,
63 65 title: '操作',
64 66 dataIndex: 'action',
65   - slots: { customRender: 'action' },
  67 + // slots: { customRender: 'action' },
66 68 fixed: undefined,
67 69 },
68 70 });
... ...
src/views/demo/system/menu/index.vue
  View file @de72793
... ... @@ -4,24 +4,26 @@
4 4 <template #toolbar>
5 5 <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
6 6 </template>
7   - <template #action="{ record }">
8   - <TableAction
9   - :actions="[
10   - {
11   - icon: 'clarity:note-edit-line',
12   - onClick: handleEdit.bind(null, record),
13   - },
14   - {
15   - icon: 'ant-design:delete-outlined',
16   - color: 'error',
17   - popConfirm: {
18   - title: '是否确认删除',
19   - placement: 'left',
20   - confirm: handleDelete.bind(null, record),
  7 + <template #bodyCell="{ column, record }">
  8 + <template v-if="column.key === 'action'">
  9 + <TableAction
  10 + :actions="[
  11 + {
  12 + icon: 'clarity:note-edit-line',
  13 + onClick: handleEdit.bind(null, record),
21 14 },
22   - },
23   - ]"
24   - />
  15 + {
  16 + icon: 'ant-design:delete-outlined',
  17 + color: 'error',
  18 + popConfirm: {
  19 + title: '是否确认删除',
  20 + placement: 'left',
  21 + confirm: handleDelete.bind(null, record),
  22 + },
  23 + },
  24 + ]"
  25 + />
  26 + </template>
25 27 </template>
26 28 </BasicTable>
27 29 <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
... ... @@ -63,7 +65,7 @@
63 65 width: 80,
64 66 title: '操作',
65 67 dataIndex: 'action',
66   - slots: { customRender: 'action' },
  68 + // slots: { customRender: 'action' },
67 69 fixed: undefined,
68 70 },
69 71 });
... ...
src/views/demo/system/role/index.vue
  View file @de72793
... ... @@ -4,24 +4,26 @@
4 4 <template #toolbar>
5 5 <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
6 6 </template>
7   - <template #action="{ record }">
8   - <TableAction
9   - :actions="[
10   - {
11   - icon: 'clarity:note-edit-line',
12   - onClick: handleEdit.bind(null, record),
13   - },
14   - {
15   - icon: 'ant-design:delete-outlined',
16   - color: 'error',
17   - popConfirm: {
18   - title: '是否确认删除',
19   - placement: 'left',
20   - confirm: handleDelete.bind(null, record),
  7 + <template #bodyCell="{ column, record }">
  8 + <template v-if="column.key === 'action'">
  9 + <TableAction
  10 + :actions="[
  11 + {
  12 + icon: 'clarity:note-edit-line',
  13 + onClick: handleEdit.bind(null, record),
21 14 },
22   - },
23   - ]"
24   - />
  15 + {
  16 + icon: 'ant-design:delete-outlined',
  17 + color: 'error',
  18 + popConfirm: {
  19 + title: '是否确认删除',
  20 + placement: 'left',
  21 + confirm: handleDelete.bind(null, record),
  22 + },
  23 + },
  24 + ]"
  25 + />
  26 + </template>
25 27 </template>
26 28 </BasicTable>
27 29 <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
... ... @@ -59,7 +61,7 @@
59 61 width: 80,
60 62 title: '操作',
61 63 dataIndex: 'action',
62   - slots: { customRender: 'action' },
  64 + // slots: { customRender: 'action' },
63 65 fixed: undefined,
64 66 },
65 67 });
... ...
src/views/demo/table/AuthColumn.vue
  View file @de72793
1 1 <template>
2 2 <div class="p-4">
3 3 <BasicTable @register="registerTable">
4   - <template #action="{ record }">
5   - <TableAction
6   - :actions="[
7   - {
8   - label: '编辑',
9   - onClick: handleEdit.bind(null, record),
10   - auth: 'other', // 根据权限控制是否显示: 无权限，不显示
11   - },
12   - {
13   - label: '删除',
14   - icon: 'ic:outline-delete-outline',
15   - onClick: handleDelete.bind(null, record),
16   - auth: 'super', // 根据权限控制是否显示: 有权限，会显示
17   - },
18   - ]"
19   - :dropDownActions="[
20   - {
21   - label: '启用',
22   - popConfirm: {
23   - title: '是否启用？',
24   - confirm: handleOpen.bind(null, record),
  4 + <template #bodyCell="{ column, record }">
  5 + <template v-if="column.key === 'action'">
  6 + <TableAction
  7 + :actions="[
  8 + {
  9 + label: '编辑',
  10 + onClick: handleEdit.bind(null, record),
  11 + auth: 'other', // 根据权限控制是否显示: 无权限，不显示
25 12 },
26   - ifShow: (_action) => {
27   - return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
  13 + {
  14 + label: '删除',
  15 + icon: 'ic:outline-delete-outline',
  16 + onClick: handleDelete.bind(null, record),
  17 + auth: 'super', // 根据权限控制是否显示: 有权限，会显示
28 18 },
29   - },
30   - {
31   - label: '禁用',
32   - popConfirm: {
33   - title: '是否禁用？',
34   - confirm: handleOpen.bind(null, record),
  19 + ]"
  20 + :dropDownActions="[
  21 + {
  22 + label: '启用',
  23 + popConfirm: {
  24 + title: '是否启用？',
  25 + confirm: handleOpen.bind(null, record),
  26 + },
  27 + ifShow: (_action) => {
  28 + return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
  29 + },
35 30 },
36   - ifShow: () => {
37   - return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
  31 + {
  32 + label: '禁用',
  33 + popConfirm: {
  34 + title: '是否禁用？',
  35 + confirm: handleOpen.bind(null, record),
  36 + },
  37 + ifShow: () => {
  38 + return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
  39 + },
38 40 },
39   - },
40   - {
41   - label: '同时控制',
42   - popConfirm: {
43   - title: '是否动态显示？',
44   - confirm: handleOpen.bind(null, record),
  41 + {
  42 + label: '同时控制',
  43 + popConfirm: {
  44 + title: '是否动态显示？',
  45 + confirm: handleOpen.bind(null, record),
  46 + },
  47 + auth: 'super', // 同时根据权限和业务控制是否显示
  48 + ifShow: () => {
  49 + return true;
  50 + },
45 51 },
46   - auth: 'super', // 同时根据权限和业务控制是否显示
47   - ifShow: () => {
48   - return true;
49   - },
50   - },
51   - ]"
52   - />
  52 + ]"
  53 + />
  54 + </template>
53 55 </template>
54 56 </BasicTable>
55 57 </div>
... ... @@ -104,7 +106,7 @@
104 106 width: 250,
105 107 title: 'Action',
106 108 dataIndex: 'action',
107   - slots: { customRender: 'action' },
  109 + // slots: { customRender: 'action' },
108 110 },
109 111 });
110 112 function handleEdit(record: Recordable) {
... ...
src/views/demo/table/CustomerCell.vue
  View file @de72793
... ... @@ -3,20 +3,22 @@
3 3 <BasicTable @register="registerTable">
4 4 <template #bodyCell="{ column, record, text }">
5 5 <template v-if="column.key === 'id'"> ID: {{ record.id }} </template>
6   - <template v-if="column.key === 'no'">
  6 + <template v-else-if="column.key === 'no'">
7 7 <Tag color="green">
8 8 {{ record.no }}
9 9 </Tag>
10 10 </template>
11   - <template v-if="column.key === 'avatar'">
  11 + <template v-else-if="column.key === 'avatar'">
12 12 <Avatar :size="60" :src="record.avatar" />
13 13 </template>
14   - <template v-if="column.key === 'imgArr'">
  14 + <template v-else-if="column.key === 'imgArr'">
15 15 <TableImg :size="60" :simpleShow="true" :imgList="text" />
16 16 </template>
17   - <template v-if="column.key === 'imgs'"> <TableImg :size="60" :imgList="text" /> </template>
  17 + <template v-else-if="column.key === 'imgs'">
  18 + <TableImg :size="60" :imgList="text" />
  19 + </template>
18 20  
19   - <template v-if="column.key === 'category'">
  21 + <template v-else-if="column.key === 'category'">
20 22 <Tag color="green">
21 23 {{ record.no }}
22 24 </Tag>
... ...
src/views/demo/table/EditRowTable.vue
  View file @de72793
1 1 <template>
2 2 <div class="p-4">
3 3 <BasicTable @register="registerTable" @edit-change="onEditChange">
4   - <template #action="{ record, column }">
5   - <TableAction :actions="createActions(record, column)" />
  4 + <template #bodyCell="{ column, record }">
  5 + <template v-if="column.key === 'action'">
  6 + <TableAction :actions="createActions(record, column)" />
  7 + </template>
6 8 </template>
7 9 </BasicTable>
8 10 </div>
... ... @@ -180,7 +182,7 @@
180 182 width: 160,
181 183 title: 'Action',
182 184 dataIndex: 'action',
183   - slots: { customRender: 'action' },
  185 + // slots: { customRender: 'action' },
184 186 },
185 187 });
186 188  
... ...
src/views/demo/table/ExpandTable.vue
  View file @de72793
... ... @@ -4,29 +4,31 @@
4 4 content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡，以便配合Table组件的expandRowByClick"
5 5 >
6 6 <BasicTable @register="registerTable">
7   - <template #expandedRowRender="{ record }">
8   - <span>No: {{ record.no }} </span>
9   - </template>
10   - <template #action="{ record }">
11   - <TableAction
12   - stopButtonPropagation
13   - :actions="[
14   - {
15   - label: '删除',
16   - icon: 'ic:outline-delete-outline',
17   - onClick: handleDelete.bind(null, record),
18   - },
19   - ]"
20   - :dropDownActions="[
21   - {
22   - label: '启用',
23   - popConfirm: {
24   - title: '是否启用？',
25   - confirm: handleOpen.bind(null, record),
  7 + <template #bodyCell="{ column, record }">
  8 + <template v-if="column.key === 'no'">
  9 + <span>No: {{ record.no }} </span>
  10 + </template>
  11 + <template v-else-if="column.key === 'action'">
  12 + <TableAction
  13 + stopButtonPropagation
  14 + :actions="[
  15 + {
  16 + label: '删除',
  17 + icon: 'ic:outline-delete-outline',
  18 + onClick: handleDelete.bind(null, record),
  19 + },
  20 + ]"
  21 + :dropDownActions="[
  22 + {
  23 + label: '启用',
  24 + popConfirm: {
  25 + title: '是否启用？',
  26 + confirm: handleOpen.bind(null, record),
  27 + },
26 28 },
27   - },
28   - ]"
29   - />
  29 + ]"
  30 + />
  31 + </template>
30 32 </template>
31 33 </BasicTable>
32 34 </PageWrapper>
... ... @@ -53,6 +55,7 @@
53 55 actionColumn: {
54 56 width: 160,
55 57 title: 'Action',
  58 + dataIndex: 'action',
56 59 // slots: { customRender: 'action' },
57 60 },
58 61 });
... ...
src/views/demo/table/FixedColumn.vue
  View file @de72793
1 1 <template>
2 2 <div class="p-4">
3 3 <BasicTable @register="registerTable">
4   - <template #action="{ record }">
5   - <TableAction
6   - :actions="[
7   - {
8   - label: '删除',
9   - icon: 'ic:outline-delete-outline',
10   - onClick: handleDelete.bind(null, record),
11   - },
12   - ]"
13   - :dropDownActions="[
14   - {
15   - label: '启用',
16   - popConfirm: {
17   - title: '是否启用？',
18   - confirm: handleOpen.bind(null, record),
  4 + <template #bodyCell="{ column, record }">
  5 + <template v-if="column.key === 'action'">
  6 + <TableAction
  7 + :actions="[
  8 + {
  9 + label: '删除',
  10 + icon: 'ic:outline-delete-outline',
  11 + onClick: handleDelete.bind(null, record),
19 12 },
20   - },
21   - ]"
22   - />
  13 + ]"
  14 + :dropDownActions="[
  15 + {
  16 + label: '启用',
  17 + popConfirm: {
  18 + title: '是否启用？',
  19 + confirm: handleOpen.bind(null, record),
  20 + },
  21 + },
  22 + ]"
  23 + />
  24 + </template>
23 25 </template>
24 26 </BasicTable>
25 27 </div>
... ...
src/views/demo/table/FixedHeight.vue
  View file @de72793
1 1 <template>
2 2 <div class="p-4">
3 3 <BasicTable @register="registerTable">
4   - <template #customTitle>
5   - <span>
6   - 姓名
7   - <BasicHelp class="ml-2" text="姓名" />
8   - </span>
9   - </template>
10   - <template #customAddress>
11   - 地址
12   - <FormOutlined class="ml-2" />
  4 + <template #headerCell="{ column }">
  5 + <template v-if="column.key === 'name'">
  6 + <span>
  7 + 姓名
  8 + <BasicHelp class="ml-2" text="headerHelpMessage方式2" />
  9 + </span>
  10 + </template>
  11 + <template v-else-if="column.key === 'address'">
  12 + 地址
  13 + <FormOutlined class="ml-2" />
  14 + </template>
  15 + <template v-else>
  16 + <HeaderCell :column="column" />
  17 + </template>
13 18 </template>
14 19 </BasicTable>
15 20 </div>
... ... @@ -21,9 +26,10 @@
21 26 import { FormOutlined } from '@ant-design/icons-vue';
22 27 import { demoListApi } from '/@/api/demo/table';
23 28 import { BasicHelp } from '/@/components/Basic';
  29 + import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
24 30  
25 31 export default defineComponent({
26   - components: { BasicTable, FormOutlined, BasicHelp },
  32 + components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
27 33 setup() {
28 34 const [registerTable] = useTable({
29 35 title: '定高/头部自定义',
... ...
src/views/demo/table/tableData.tsx
  View file @de72793
... ... @@ -117,6 +117,7 @@ export function getCustomHeaderColumns(): BasicColumn[] {
117 117 {
118 118 title: 'ID',
119 119 dataIndex: 'id',
  120 + helpMessage: 'headerHelpMessage方式1',
120 121 width: 200,
121 122 },
122 123 {
... ... @@ -256,7 +257,7 @@ export function getFormConfig(): Partial&lt;FormProps&gt; {
256 257 };
257 258 }
258 259 export function getBasicData() {
259   - const data: any = (() => {
  260 + return (() => {
260 261 const arr: any = [];
261 262 for (let index = 0; index < 40; index++) {
262 263 arr.push({
... ... @@ -271,11 +272,10 @@ export function getBasicData() {
271 272 }
272 273 return arr;
273 274 })();
274   - return data;
275 275 }
276 276  
277 277 export function getTreeTableData() {
278   - const data: any = (() => {
  278 + return (() => {
279 279 const arr: any = [];
280 280 for (let index = 0; index < 40; index++) {
281 281 arr.push({
... ... @@ -301,6 +301,4 @@ export function getTreeTableData() {
301 301 }
302 302 return arr;
303 303 })();
304   -
305   - return data;
306 304 }
... ...
src/views/sys/error-log/index.vue
  View file @de72793
1 1 <template>
2 2 <div class="p-4">
3 3 <template v-for="src in imgList" :key="src">
4   - <img :src="src" v-show="false" />
  4 + <img :src="src" v-show="false" alt="" />
5 5 </template>
6 6 <DetailModal :info="rowInfo" @register="registerModal" />
7 7 <BasicTable @register="register" class="error-handle-table">
... ... @@ -16,12 +16,17 @@
16 16 {{ t('sys.errorLog.fireAjaxError') }}
17 17 </a-button>
18 18 </template>
19   - <template #action="{ record }">
20   - <TableAction
21   - :actions="[
22   - { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
23   - ]"
24   - />
  19 + <template #bodyCell="{ column, record }">
  20 + <template v-if="column.key === 'action'">
  21 + <TableAction
  22 + :actions="[
  23 + {
  24 + label: t('sys.errorLog.tableActionDesc'),
  25 + onClick: handleDetail.bind(null, record),
  26 + },
  27 + ]"
  28 + />
  29 + </template>
25 30 </template>
26 31 </BasicTable>
27 32 </div>
... ... @@ -52,7 +57,7 @@
52 57 width: 80,
53 58 title: 'Action',
54 59 dataIndex: 'action',
55   - slots: { customRender: 'action' },
  60 + // slots: { customRender: 'action' },
56 61 },
57 62 });
58 63 const [registerModal, { openModal }] = useModal();
... ...