Blame view

src/views/demo/table/EditRowTable.vue 6.52 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
    },
  ];
  export default defineComponent({
167
    components: { BasicTable, TableAction },
168
    setup() {
169
      const { createMessage: msg } = useMessage();
170
171
172
      const currentEditKeyRef = ref('');
      const [registerTable] = useTable({
        title: '可编辑行示例',
173
174
175
        titleHelpMessage: [
          '本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
        ],
176
177
178
        api: demoListApi,
        columns: columns,
        showIndexColumn: false,
179
180
        showTableSetting: true,
        tableSetting: { fullScreen: true },
181
182
183
184
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
185
          // slots: { customRender: 'action' },
186
187
188
189
190
        },
      });

      function handleEdit(record: EditRecordRow) {
        currentEditKeyRef.value = record.key;
191
        record.onEdit?.(true);
192
193
194
195
      }

      function handleCancel(record: EditRecordRow) {
        currentEditKeyRef.value = '';
196
        record.onEdit?.(false, false);
197
198
      }
199
      async function handleSave(record: EditRecordRow) {
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
        // 校验
        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' });
220
        }
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
      }

      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),
            },
          },
        ];
      }
248
249
250
251
252
253
254
255
      function onEditChange({ column, value, record }) {
        // 本例
        if (column.dataIndex === 'id') {
          record.editValueRefs.name4.value = `${value}`;
        }
        console.log(column, value, record);
      }
256
257
258
259
      return {
        registerTable,
        handleEdit,
        createActions,
260
        onEditChange,
261
262
263
264
      };
    },
  });
</script>