Blame view

src/views/demo/table/EditRowTable.vue 7.53 KB
1
2
<template>
  <div class="p-4">
3
    <BasicTable @register="registerTable" @edit-change="onEditChange">
4
5
6
7
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record, column)" />
        </template>
8
9
10
11
12
13
14
15
16
17
18
19
20
21
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '/@/components/Table';
22
  import { optionsListApi } from '/@/api/demo/select';
23
24

  import { demoListApi } from '/@/api/demo/table';
25
  import { treeOptionsListApi } from '/@/api/demo/tree';
26
27
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';
28
29
30
  const columns: BasicColumn[] = [
    {
31
32
33
34
35
36
      title: '输入框',
      dataIndex: 'name',
      editRow: true,
      editComponentProps: {
        prefix: '$',
      },
37
      width: 150,
38
39
40
41
42
    },
    {
      title: '默认输入状态',
      dataIndex: 'name7',
      editRow: true,
43
      width: 150,
44
45
46
47
48
    },
    {
      title: '输入框校验',
      dataIndex: 'name1',
      editRow: true,
49
      align: 'left',
50
51
      // 默认必填校验
      editRule: true,
52
      width: 150,
53
54
55
56
57
    },
    {
      title: '输入框函数校验',
      dataIndex: 'name2',
      editRow: true,
58
      align: 'right',
59
60
61
62
63
64
65
66
67
      editRule: async (text) => {
        if (text === '2') {
          return '不能输入该值';
        }
        return '';
      },
    },
    {
      title: '数字输入框',
68
      dataIndex: 'id',
69
70
71
      editRow: true,
      editRule: true,
      editComponent: 'InputNumber',
72
      width: 150,
73
74
    },
    {
75
76
77
78
79
80
81
82
83
84
85
86
87
88
      title: '下拉框',
      dataIndex: 'name3',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: 'Option1',
            value: '1',
          },
          {
            label: 'Option2',
            value: '2',
          },
89
90
91
92
          {
            label: 'Option3',
            value: '3',
          },
93
94
95
96
97
98
99
100
101
102
103
        ],
      },
      width: 200,
    },
    {
      title: '远程下拉',
      dataIndex: 'name4',
      editRow: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
104
105
106
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
107
      },
108
109
110
111
      width: 200,
    },
    {
      title: '远程下拉树',
112
      dataIndex: 'name8',
113
114
115
116
117
118
      editRow: true,
      editComponent: 'ApiTreeSelect',
      editRule: false,
      editComponentProps: {
        api: treeOptionsListApi,
        resultField: 'list',
119
120
121
122
      },
      width: 200,
    },
    {
123
124
125
126
127
128
129
130
      title: '日期选择',
      dataIndex: 'date',
      editRow: true,
      editComponent: 'DatePicker',
      editComponentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
131
      width: 150,
132
133
134
135
136
137
138
139
140
141
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      editRow: true,
      editComponent: 'TimePicker',
      editComponentProps: {
        valueFormat: 'HH:mm',
        format: 'HH:mm',
      },
142
      width: 100,
143
144
    },
    {
145
146
147
148
149
150
151
152
      title: '勾选框',
      dataIndex: 'name5',
      editRow: true,

      editComponent: 'Checkbox',
      editValueMap: (value) => {
        return value ? '是' : '否';
      },
153
      width: 100,
154
155
156
157
158
159
160
161
162
    },
    {
      title: '开关',
      dataIndex: 'name6',
      editRow: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value ? '开' : '关';
      },
163
      width: 100,
164
    },
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
    {
      title: '单选框',
      dataIndex: 'radio1',
      editRow: true,
      editComponent: 'RadioGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '单选按钮框',
      dataIndex: 'radio2',
      editRow: true,
      editComponent: 'RadioButtonGroup',
      editComponentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
          },
          {
            label: '选项2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程单选框',
      dataIndex: 'radio3',
      editRow: true,
      editComponent: 'ApiRadioGroup',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
216
217
  ];
  export default defineComponent({
218
    components: { BasicTable, TableAction },
219
    setup() {
220
      const { createMessage: msg } = useMessage();
221
222
223
      const currentEditKeyRef = ref('');
      const [registerTable] = useTable({
        title: '可编辑行示例',
224
225
226
        titleHelpMessage: [
          '本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
        ],
227
228
229
        api: demoListApi,
        columns: columns,
        showIndexColumn: false,
230
231
        showTableSetting: true,
        tableSetting: { fullScreen: true },
232
233
234
235
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
236
          // slots: { customRender: 'action' },
237
238
239
240
241
        },
      });

      function handleEdit(record: EditRecordRow) {
        currentEditKeyRef.value = record.key;
242
        record.onEdit?.(true);
243
244
245
246
      }

      function handleCancel(record: EditRecordRow) {
        currentEditKeyRef.value = '';
247
        record.onEdit?.(false, false);
248
249
      }
250
      async function handleSave(record: EditRecordRow) {
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
        // 校验
        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
        const valid = await record.onValid?.();
        if (valid) {
          try {
            const data = cloneDeep(record.editValueRefs);
            console.log(data);
            //TODO 此处将数据提交给服务器保存
            // ...
            // 保存之后提交编辑状态
            const pass = await record.onEdit?.(false, true);
            if (pass) {
              currentEditKeyRef.value = '';
            }
            msg.success({ content: '数据已保存', key: 'saving' });
          } catch (error) {
            msg.error({ content: '保存失败', key: 'saving' });
          }
        } else {
          msg.error({ content: '请填写正确的数据', key: 'saving' });
271
        }
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          return [
            {
              label: '编辑',
              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
              onClick: handleEdit.bind(null, record),
            },
          ];
        }
        return [
          {
            label: '保存',
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: '取消',
            popConfirm: {
              title: '是否取消编辑',
              confirm: handleCancel.bind(null, record, column),
            },
          },
        ];
      }
299
300
301
302
303
304
305
306
      function onEditChange({ column, value, record }) {
        // 本例
        if (column.dataIndex === 'id') {
          record.editValueRefs.name4.value = `${value}`;
        }
        console.log(column, value, record);
      }
307
308
309
310
      return {
        registerTable,
        handleEdit,
        createActions,
311
        onEditChange,
312
313
314
315
      };
    },
  });
</script>