plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/pages/index/components/bus/DemoAddress.tsx

@@ -1,181 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Address, Button, Tag} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
-      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
-      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-          state.formData.district
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      province: '440000',
-      city: '440300',
-      district: '440305',
-    } as any
-  });
-
-  const setValue = () => {
-    state.formData = {
-      province: '500000',
-      city: '500100',
-      district: '500113',
-    };
-  };
-
-  return () => (
-    <DemoRow title="带初始值">
-      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
-      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
-      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-          state.formData.district
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-      <Button label="设置值" onClick={setValue}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="选择省">
-      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
-      <Tag>
-        {[
-          state.formData.province,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      province: '440000',
-      city: '440300',
-    } as any
-  });
-
-  return () => (
-    <DemoRow title="选择市">
-      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-
-export const demo5 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      city: '440300',
-      district: '440305',
-    } as any
-  });
-
-  return () => (
-    <DemoRow title="选择县">
-      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
-      <Tag>
-        {[
-          state.formData.city,
-          state.formData.district,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="选择省市">
-      <Address province v-model={state.formData.province} width={200} placeholder="选择省"/>
-      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      province: '440000',
-      city: '440300',
-      district: '440305',
-    } as any
-  });
-
-  const setValue = () => {
-    state.formData = {
-      province: '500000',
-      city: '500100',
-      district: '500113',
-    };
-  };
-
-  return () => (
-    <DemoRow title="选择市县">
-      <Address province v-model={state.formData.province} width={200} placeholder="选择省" disabled/>
-      <Address city v-model={state.formData.city} parentValue={state.formData.province} width={200} placeholder="选择市"/>
-      <Address district v-model={state.formData.district} parentValue={state.formData.city} width={200} placeholder="选择县"/>
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-          state.formData.district
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-      <Button label="设置值" onClick={setValue}/>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/bus/DemoAddressCascade.tsx

@@ -1,132 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {AddressCascade, Tag} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <AddressCascade
-        width={200}
-        v-model:province={state.formData.province}
-        v-model:city={state.formData.city}
-        v-model:district={state.formData.district}
-      />
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-          state.formData.district
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      province: '620000',
-      city: '620100',
-      district: '620101',
-    } as any
-  });
-
-  return () => (
-    <DemoRow title="带初始值">
-      <AddressCascade
-        width={200}
-        v-model:province={state.formData.province}
-        v-model:city={state.formData.city}
-        v-model:district={state.formData.district}
-      />
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-          state.formData.district
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="选择省">
-      <AddressCascade
-        width={200}
-        v-model:province={state.formData.province}
-        types="p"
-      />
-      <Tag>
-        {[
-          state.formData.province,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="选择省市">
-      <AddressCascade
-        width={200}
-        v-model:province={state.formData.province}
-        v-model:city={state.formData.city}
-        types="pc"
-      />
-      <Tag>
-        {[
-          state.formData.province,
-          state.formData.city,
-        ].filter(Boolean).join(',') || 'EMPTY'}
-      </Tag>
-    </DemoRow>
-  );
-});
-
-export const demo5_1 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="多选：省">
-      <AddressCascade width={200} v-model={state.formData.addressCodes} types="p" multiple/>
-      {JSON.stringify(state.formData.addressCodes)}
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="多选：省市县">
-      <AddressCascade width={200} v-model={state.formData.addressCodes} multiple/>
-      {JSON.stringify(state.formData.addressCodes)}
-    </DemoRow>
-  );
-});

package/src/pages/index/components/bus/DemoFilter.tsx

@@ -1,184 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {FilterFormMultiple, FilterFormSingle, SelectOption} from "../../../../packages";
-import {createFilterOptions, iFilterOption, iFilterQueryParam} from "../../../../packages/components/FilterService/utils/filter.service.utils";
-import {iFilterFormMultipleState} from "../../../../packages/components/FilterFormMultiple";
-import {iFilterFormSingleState} from "../../../../packages/components/FilterFormSingle";
-import {DemoLine} from "../../Demo/DemoLine";
-import {iFilterConfigDate} from "../../../../packages/components/FilterService/filter/filter.date";
-import {iFilterConfigSelect} from "../../../../packages/components/FilterService/filter/filter.select";
-
-export const demo_1 = designPage(() => {
-
-  const filterOptions: iFilterOption[] = createFilterOptions([
-    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
-    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like', },
-    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultSearch: true, defaultValue: ['2023-01-03', '2023-01-13'] },
-    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
-    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
-    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
-    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
-    {
-      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
-        renderOptions: () => <>
-          <SelectOption label="Android" val="android"/>
-          <SelectOption label="IOS" val="ios"/>
-          <SelectOption label="Web" val="web"/>
-          <SelectOption label="SSR" val="ssr"/>
-          <SelectOption label="微前端" val="micro"/>
-        </>
-      } as iFilterConfigSelect
-    },
-    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
-    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
-    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
-  ]);
-
-  const onSearch = (data: iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }) => {
-    console.log(data);
-  };
-
-  return () => (
-    <DemoRow title="单个字段筛选">
-      <DemoLine title="基本用法">
-        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch}/>
-      </DemoLine>
-      <DemoLine title="隐藏字段选择器">
-        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideFieldSelector/>
-      </DemoLine>
-      <DemoLine title="隐藏筛选类型选择器">
-        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideHandlerSelector/>
-      </DemoLine>
-      <DemoLine title="隐藏搜索按钮">
-        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideSearchButton/>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo1 = designPage(() => {
-
-  const filterOptions: iFilterOption[] = createFilterOptions([
-    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
-    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
-    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'] },
-    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
-    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
-    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
-    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
-    {
-      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
-        renderOptions: () => <>
-          <SelectOption label="Android" val="android"/>
-          <SelectOption label="IOS" val="ios"/>
-          <SelectOption label="Web" val="web"/>
-          <SelectOption label="SSR" val="ssr"/>
-          <SelectOption label="微前端" val="micro"/>
-        </>
-      } as iFilterConfigSelect
-    },
-    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
-    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
-    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
-  ]);
-
-  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
-    console.log(data);
-  };
-
-  return () => (
-    <DemoRow title="多字段筛选">
-      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo__1 = designPage(() => {
-
-  const filterOptions: iFilterOption[] = createFilterOptions([
-    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {}, filterConfig: { formItemAttrs: { column: 2 } } },
-    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like', filterConfig: { formItemAttrs: { column: 2 } } },
-    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'] },
-    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
-    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
-    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
-    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
-    {
-      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
-        renderOptions: () => <>
-          <SelectOption label="Android" val="android"/>
-          <SelectOption label="IOS" val="ios"/>
-          <SelectOption label="Web" val="web"/>
-          <SelectOption label="SSR" val="ssr"/>
-          <SelectOption label="微前端" val="micro"/>
-        </>
-      } as iFilterConfigSelect
-    },
-    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
-    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
-    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
-    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
-  ]);
-
-  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
-    console.log(data);
-  };
-
-  return () => (
-    <DemoRow title="多列字段">
-      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch} column={2}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const filterOptions: iFilterOption[] = createFilterOptions([
-    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
-    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
-    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'], filterConfig: { queryFieldMode: 'field' } as iFilterConfigDate },
-  ]);
-
-  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
-    console.log(data);
-  };
-
-  return () => (
-    <DemoRow title="Date FilterConfig field">
-      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const filterOptions: iFilterOption[] = createFilterOptions([
-    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
-    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
-    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'], filterConfig: { queryFieldMode: 'separate' } as iFilterConfigDate },
-  ]);
-
-  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
-    console.log(data);
-  };
-
-  return () => (
-    <DemoRow title="Date FilterConfig separate">
-      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/columns/DemoPlcAddress.tsx

@@ -1,161 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {$message, Button, ButtonGroup, Form, FormItem, Plc, PlcAddress, PlcAddressItem, PlcIndex, PlcInput, PlcNumber, PlcTextarea, Segment, SegmentGroup, Table} from "../../../../packages";
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {DemoRow} from "../../Demo/DemoRow";
-import data50 from '../../../data/data-50.json';
-import {deepcopy} from "plain-utils/object/deepcopy";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5),
-    editNodes: [] as iTableNode[],
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (!tableNode.state.edit) {
-        tableNode.enableEdit();
-        state.editNodes.push(tableNode);
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Form column={1}>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcAddressItem field="province" title="省" province/>
-        <PlcAddressItem field="city" title="市" city parentField="province"/>
-        <PlcAddressItem field="district" title="县" district parentField="city"/>
-        <PlcNumber field="num" title="数字"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    table: Table
-  });
-
-  const state = reactive({
-    data: data50.slice(0, 5) as any[],
-    editNodes: [] as iTableNode[],
-    formEdit: false,
-
-    onDblClickRow(tableNode: iTableNode) {
-      if (state.formEdit) {
-        refs.table!.formEditor.methods.edit({
-          node: tableNode,
-          onConfirm: (node) => {
-            state.data[tableNode.state.index] = deepcopy(node.state.editRow);
-          }
-        });
-      } else {
-        if (!tableNode.state.edit) {
-          tableNode.enableEdit();
-          state.editNodes.push(tableNode);
-        }
-      }
-    },
-    saveEdit: async () => {
-      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
-      if (validates.length > 0) {
-        console.log(validates);
-        const { validateResultData, node: { state: { index } } } = validates[0]!;
-        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
-        return;
-      }
-      // todo 网络保存逻辑
-      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
-      state.editNodes.forEach(tableNode => tableNode.closeEdit());
-      state.editNodes = [];
-    },
-    cancelEdit: () => {
-      state.editNodes.forEach(tableNode => {
-        tableNode.cancelEdit();
-      });
-      state.editNodes = [];
-    },
-  });
-
-  return () => (
-    <DemoRow title={'合并列'}>
-      <Form column={1}>
-        <FormItem label="大小尺寸">
-          <SegmentGroup v-model={state.formEdit}>
-            <Segment label="行内编辑" val={false}/>
-            <Segment label="表单编辑" val={true}/>
-          </SegmentGroup>
-        </FormItem>
-        <FormItem label="导出">
-          <ButtonGroup style={{ margin: '4px 0' }}>
-            <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-            <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-          </ButtonGroup>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        ref={onRef.table}
-      >
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcAddress/>
-        <PlcNumber field="num" title="数字"/>
-        <PlcTextarea field="name" title="长文本"/>
-      </Table>
-    </DemoRow>
-  );
-});