feat: ✨ 新增可编辑表格

packages/gbeata/docs/api/index.ts

@@ -0,0 +1,213 @@
+/**
+ * 此文件为模拟模拟接口的文件，不要复制，仅供参考
+ */
+import { AnyKeyProps, Record } from 'multiway';
+
+export const professionOptions = [
+  { label: '近卫干员', value: '近卫' },
+  { label: '狙击干员', value: '狙击' },
+  { label: '术师重装', value: '术师' },
+  { label: '医疗干员', value: '医疗' },
+  { label: '重装干员', value: '重装' },
+  { label: '辅助干员', value: '辅助' },
+  { label: '特种干员', value: '特种' },
+  { label: '先锋干员', value: '先锋' },
+];
+
+/**
+ * 模拟数据
+ */
+let data: Array<Record> = [];
+
+// 没有数据，加载数据
+const loadData = () => {
+  if (!data.length) {
+    let local = localStorage.getItem('CHARA_DATA_1015');
+    // 本地有数据用本地
+    if (local) {
+      data = JSON.parse(local);
+    } else {
+      // fetch('https://sunflower-assets.oss-cn-hangzhou.aliyuncs.com/data/data.json')
+      let myHeaders = new Headers();
+      myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://www.apifox.cn)');
+      myHeaders.append('Accept', '*/*');
+      myHeaders.append('Host', 'mock.apifox.cn');
+      myHeaders.append('Connection', 'keep-alive');
+
+      let requestOptions = {
+        method: 'GET',
+        headers: myHeaders,
+        redirect: 'follow',
+      };
+
+      fetch(
+        'https://mock.apifox.cn/m1/1983926-0-default/api/list',
+        requestOptions,
+      )
+        //   .then(response => response.text())
+        //   .then(result => console.log(result))
+        //   .catch(error => console.log('error', error))
+        // fetch('https://mock.apifox.cn/m1/1983926-0-default/api/list')
+        .then((res) => {
+          return res.json();
+        })
+        .then((json) => {
+          data = json;
+          localStorage.setItem('CHARA_DATA_1015', JSON.stringify(data));
+        });
+    }
+  }
+};
+
+loadData();
+
+/**
+ * 模拟列表请求接口，实际过程中请使用 axios 接口
+ * @param params 查询参数
+ * */
+export const listApi = (params: AnyKeyProps): Promise<any> => {
+  console.info('列表请求数据', params);
+  const searchParams = {
+    ...params.search,
+    ...params.filters,
+  };
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 筛选
+      let content = data.filter((item) => {
+        let result = true;
+        for (let key in searchParams) {
+          // 查询值
+          let value = searchParams[key];
+          if (
+            item.hasOwnProperty(key) &&
+            item[key] !== undefined &&
+            value !== null
+          ) {
+            if (
+              (Array.isArray(value) && !value.includes(item[key])) ||
+              (typeof value === 'number' && Number(item[key]) === value) ||
+              (typeof value === 'string' &&
+                !(item[key] + '').includes(value + ''))
+            ) {
+              result = false;
+            }
+          }
+        }
+        return result;
+      });
+      // 排序
+      const sorts = params.sorts || [];
+      sorts.forEach((option: AnyKeyProps) => {
+        const { key, order } = option;
+        content.sort((a, b) =>
+          order === 'descend' ? a[key] - b[key] : b[key] - a[key],
+        );
+      });
+      // 总数
+      const totalCount = content.length;
+      // 分页
+      const page = params.pagination;
+      content = content.slice(
+        page.pageSize * (page.current - 1),
+        page.pageSize * page.current,
+      );
+      resolve({
+        content,
+        totalCount,
+      });
+    }, 300);
+  });
+};
+
+/**
+ * 测试接口，实际过程推荐使用 axios 接口
+ * */
+export const emptyApi = (params?: any): Promise<any> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ msg: '请求成功' });
+    }, 300);
+  });
+};
+
+/**
+ * 模拟新增
+ * @param params 保存参数
+ */
+export const addApi = (params: AnyKeyProps): Promise<any> => {
+  return new Promise((resolve) => {
+    data.unshift({
+      id: Date.now(),
+      sort_id: Date.now(),
+      ...params,
+    });
+    resolve({
+      msg: '请求成功',
+      data: Date.now(),
+    });
+  });
+};
+
+/**
+ * 模拟修改
+ * @param params 保存参数
+ */
+export const updateApi = (params: AnyKeyProps): Promise<any> => {
+  return new Promise((resolve) => {
+    let index: number = data.findIndex((row) => row.sort_id === params.sort_id);
+    if (index >= 0 && data[index]) {
+      data[index] = {
+        ...data[index],
+        ...params,
+      };
+    }
+    resolve({
+      msg: '请求成功',
+      data: data[index],
+    });
+  });
+};
+
+/**
+ * 模拟详情
+ */
+export const detailApi = (id: string | number): Promise<any> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        msg: '请求成功',
+        data: data.find((row) => row.sort_id === id),
+      });
+    }, 500);
+  });
+};
+
+/**
+ * 模拟删除
+ * @param params 删除的 id
+ */
+export const deleteApi = (params: AnyKeyProps): Promise<any> => {
+  return new Promise((resolve) => {
+    data = data.filter((row) => {
+      return !params.includes(row.sort_id);
+    });
+    resolve({
+      msg: '删除成功',
+      data: null,
+    });
+  });
+};
+
+/**
+ * 模拟失败
+ * @param params 保存参数
+ */
+export const errorApi = (params: AnyKeyProps): Promise<any> => {
+  return new Promise((_, reject) => {
+    reject({
+      msg: '请求失败',
+      data: Date.now(),
+    });
+  });
+};

packages/gbeata/docs/components/AySearchTableEditDemo.tsx

@@ -0,0 +1,116 @@
+import { Button } from 'antd';
+import { AnyKeyProps, GButton, GSearchTable, GSearchTableField } from 'gbeata';
+import React, { useRef } from 'react';
+import { professionOptions } from '../api';
+
+const fields: Array<GSearchTableField> = [
+  {
+    title: '英文名',
+    key: 'en',
+    width: 100,
+    editable: true,
+    renderType: 'editable-cell-input',
+  },
+  {
+    title: '复杂的姓名编辑',
+    key: 'cn',
+    width: 300,
+    editable: true,
+    renderType: 'editable-cell-input',
+    // 未编辑时的样式
+    editableCellStyle: {
+      width: 200,
+      display: 'inline-block',
+    },
+    // 前置元素
+    before: ({ record, field, refreshRow }: AnyKeyProps) => {
+      return (
+        <Button
+          style={{ marginRight: 8 }}
+          onClick={() => {
+            record.color = record.color === 'red' ? 'blue' : 'red';
+            // 覆盖 record 后，调用此方法可刷新数据
+            refreshRow();
+          }}
+        >
+          换色
+        </Button>
+      );
+    },
+    // 后置元素
+    after: ({ record }: AnyKeyProps) => {
+      return (
+        <div style={{ color: record.color || '#ccc' }}>
+          可以换色：{record.cn}
+        </div>
+      );
+    },
+    contentProps: {
+      allowClear: true,
+    },
+    formItemProps: {
+      // 编辑中的样式
+      style: {
+        display: 'inline-block',
+        width: 100,
+        marginBottom: 0,
+      },
+      rules: [{ required: true, message: '请输入姓名' }],
+    },
+  },
+  {
+    title: '职业',
+    key: 'class',
+    type: 'select',
+    options: professionOptions,
+    width: 200,
+    editable: true,
+    renderType: 'editable-cell-select',
+    contentProps: {
+      allowClear: true,
+    },
+    formItemProps: {
+      rules: [{ required: true, message: '请选择职业' }],
+    },
+  },
+];
+
+const data = [
+  {
+    cn: '阿米娅',
+    en: 'Multiway',
+    class: '术师',
+    sort_id: 55,
+  },
+  {
+    cn: '能天使',
+    en: 'Exusiai',
+    class: '狙击',
+    sort_id: 73,
+  },
+];
+
+export default function Demo() {
+  const tableRef = useRef<any>(null);
+
+  const handleLog = () => {
+    alert('请在 console 查看打印的数据');
+    console.log(tableRef.current.getTableData());
+  };
+
+  return (
+    <GSearchTable
+      ref={tableRef}
+      searchVisible={false}
+      fields={fields}
+      data={data}
+      editMode="col"
+      rowKey="sort_id"
+      title="可编辑单元格"
+    >
+      <GButton type="primary" onClick={handleLog}>
+        打印表格数据
+      </GButton>
+    </GSearchTable>
+  );
+}