plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/pages/index/components/AutoTable/AutoTableDefaultSearch.tsx

@@ -1,73 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    fill: true,
-    // showRows: 1,
-    // loadOnStart: false,
-    // filterFormColumn: 2,
-    /*permit: {
-      show: {
-        // insert: false,
-        // update: false,
-        // delete: false,
-        // other: false,
-        codes: {
-          'outer-update': false,
-        }
-      },
-      disabled: {
-        insert: true,
-      },
-    },*/
-  });
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput title="文本"
-                field="normalText"
-                required
-                width={150}
-                fixed="left"
-                filterConfig={filterConfig}
-                defaultSearch
-                defaultSearchValue="da"
-                v-slots={{
-                  normal: ({ row }) => (
-                    <span>[{row.normalText}]</span>
-                  )
-                }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-      <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableFiles.tsx

@@ -1,26 +0,0 @@
-import {designPage} from 'plain-design-composition';
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/upload',
-    fill: true,
-    permit: {
-      show: {
-        insert: false,
-        update: false,
-      },
-    }
-  });
-
-  return () => <>
-    <AutoTable option={option}>
-      <Plc title="文件名称" field="name" width={200}/>
-      <PlcDate title="上传时间" field="createdAt" width={200}/>
-      <Plc title="文件地址" field="path"/>
-    </AutoTable>
-  </>;
-
-});

package/src/pages/index/components/AutoTable/AutoTableFill.tsx

@@ -1,51 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    fill: true,
-    // showRowsMode: 'auto',
-  });
-
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日"/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput
-        title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
-        v-slots={{
-          normal: ({ row }) => (
-            <span>[{row.normalText}]</span>
-          )
-        }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableGroupUsage.tsx

@@ -1,71 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcGroup, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    fill: true,
-    // showRows: 1,
-    // loadOnStart: false,
-    // filterFormColumn: 2,
-    /*permit: {
-      show: {
-        // insert: false,
-        // update: false,
-        // delete: false,
-        // other: false,
-        codes: {
-          'outer-update': false,
-        }
-      },
-      disabled: {
-        insert: true,
-      },
-    },*/
-  });
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <PlcInput
-        title="文本" field="normalText" required width={150} fixed="left" filterConfig={filterConfig}
-        v-slots={{
-          normal: ({ row }) => (
-            <span>[{row.normalText}]</span>
-          )
-        }}
-      />
-      <PlcGroup title="时间">
-        <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-        <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      </PlcGroup>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-      <PlcGroup title="数值">
-        <PlcNumber title="计数" field="count" required/>
-        <PlcNumber title="数字" field="numberVal"/>
-      </PlcGroup>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-      <PlcInput title="邮箱(校验测试)" field="email" validateType="email"/>
-    </AutoTable>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableObjectPicker.tsx

@@ -1,181 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$configuration, _Object, AutoTable, Button, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcObject, PlcOv} from "../../../../packages";
-import {PlainObject} from "plain-utils/utils/event";
-import {useTableOption} from "../../../module/useTableOption";
-import {deepcopy} from "plain-utils/object/deepcopy";
-
-export const demo1 = designPage(() => {
-
-  const object = $configuration.use('object')!;
-
-  const option = useTableOption({
-    url: '/demo',
-    /*permit: {
-      show: {
-        insert: true,
-        update: true,
-      }
-    },*/
-    render: () => <>
-      <Plc title="编号id" field="id" width={350} hideInForm/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="日期" field="dateVal"/>
-      <PlcNumber title="计数count" field="count" required/>
-      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
-    </>
-  });
-
-  const state = reactive({
-    single: undefined as undefined | PlainObject,
-    multiple: undefined as undefined | PlainObject[],
-  });
-
-  const single = async () => {
-    const selected = await object({ option, selected: state.single, map: { objText: 'normalText', objId: 'id' } });
-    console.log(deepcopy(selected));
-    state.single = selected;
-  };
-
-  const multiple = async () => {
-    const selected = await object({ option, selected: state.multiple, multiple: true });
-    console.log(deepcopy(selected));
-    state.multiple = selected;
-  };
-
-  return () => (
-    <DemoRow title="对象选择服务">
-      <Button onClick={single}>
-        <span>单选</span>
-        {!!state.single && <span>{state.single.objText}</span>}
-      </Button>
-      <Button onClick={multiple}>
-        <span>多选</span>
-        {!!state.multiple && state.multiple.map(i => i.normalText).join(',')}
-      </Button>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const option = useTableOption({
-    url: '/demo',
-    render: () => <>
-      <Plc title="编号id" field="id" width={350} hideInForm/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="日期" field="dateVal"/>
-      <PlcNumber title="计数count" field="count" required/>
-      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
-    </>
-  });
-
-  return () => (
-    <DemoRow title="对象选择框">
-      <_Object
-        v-model={state.formData.parentName}
-        width="200"
-        option={option}
-        row={state.formData}
-        labelField="normalText"
-        map={{ parentId: 'id', parentName: 'normalText' }}
-      />
-      <_Object
-        v-model={state.formData.parentName}
-        width="200"
-        option={option}
-        row={state.formData}
-        labelField="normalText"
-        map={{ parentId: 'id', parentName: 'normalText' }}
-      />
-      <div>
-        {JSON.stringify(state.formData)}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    formData: {
-      list: undefined as undefined | PlainObject[]
-    },
-  });
-
-  const option = useTableOption({
-    url: '/demo',
-    render: () => <>
-      <Plc title="编号id" field="id" width={350} hideInForm/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false}/>
-      <PlcDate title="日期" field="dateVal"/>
-      <PlcNumber title="计数count" field="count" required/>
-      <PlcInput title="文本normalText" field="normalText" required fixed="left"/>
-    </>
-  });
-
-  return () => (
-    <DemoRow title="对象选择框：多选">
-      <_Object
-        v-model={state.formData.list}
-        width="200"
-        option={option}
-        labelField="normalText"
-        multiple
-      />
-      <_Object
-        v-model={state.formData.list}
-        width="200"
-        option={option}
-        labelField="normalText"
-        multiple
-      />
-      <div>
-        {state.formData.list?.map(item => (
-          <p key={item.id}><h3>{item.normalText} {'=>'} </h3>{JSON.stringify(item)}</p>
-        ))}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-  });
-
-  const parentOption = useTableOption({
-    url: '/demo',
-    render: () => <>
-      <Plc title="编号id" field="id"/>
-      <PlcInput title="文本normalText" field="normalText" fixed="left"/>
-    </>
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <AutoTable option={option}>
-        <Plc title="编号" field="id" hideInForm/>
-        <PlcObject title="父对象" field="parentName" width={150} option={parentOption} map={{ parentId: 'id', parentName: 'normalText' }} labelField="normalText"/>
-        <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-        <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-        <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-        <PlcOv title="选项值" field="ovVal" ov="promotion"/>
-        <PlcAddress provinceField="provinceVal" cityField="cityVal" districtField="districtVal"/>
-        <PlcNumber title="计数" field="count" required/>
-        <PlcInput title="文本" field="normalText" required width={150} fixed="left"/>
-        <PlcNumber title="数字" field="numberVal"/>
-      </AutoTable>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableOvList.tsx

@@ -1,80 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$configuration, AutoTable, Ov, PlcDate, PlcInput} from "../../../../packages";
-import {useTableOption} from "../../../module/useTableOption";
-
-export const demo_1 = designPage(() => {
-
-  const ov = $configuration.use('ov')!;
-
-  return () => (
-    <DemoRow title="格式化">
-      <ul>
-        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'limit_time_discount')}</li>
-        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'luck_draw')}</li>
-        <li>{ov.getNameByTypeAndCodeComputed('promotion', 'full_discount')}</li>
-        <li>{ov.getNameByTypeAndCodeComputed('acct_type', 'ov_supplier')}</li>
-        <li>{ov.getNameByTypeAndCodeComputed('acct_type', 'ov_trade')}</li>
-      </ul>
-    </DemoRow>
-  );
-});
-
-export const demo_2 = designPage(() => {
-
-  const state = reactive({
-    val: undefined,
-  });
-
-  return () => <>
-    <DemoRow title="数据绑定">
-      <Ov v-model={state.val} ov="promotion" width="200"/>
-      <Ov v-model={state.val} ov="promotion" width="200"/>
-    </DemoRow>
-  </>;
-});
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    formData: {} as any
-  });
-
-  return () => (
-    <DemoRow title="多选">
-      <Ov width="200" ov="prod_type" multiple v-model={state.formData.ovVal}/>
-      {JSON.stringify(state.formData.ovVal)}
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({
-    val: 'full_discount',
-  });
-
-  return () => <>
-    <DemoRow title="有初始值">
-      <Ov v-model={state.val} ov="promotion" width="200"/>
-    </DemoRow>
-  </>;
-});
-
-export const demo4 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/ov',
-  });
-
-  return () => <>
-    <div style={{ height: '100%', boxSizing: 'border-box', backgroundColor: 'white' }}>
-      <AutoTable option={option}>
-        <PlcInput title="显示值" field="name"/>
-        <PlcInput title="代码" field="code"/>
-        <PlcInput title="类型" field="type"/>
-        <PlcDate title="创建时间" field="createdAt" hideInForm width={180} editable={false} datetime/>
-        <PlcInput title="说明" field="comment"/>
-      </AutoTable>
-    </div>
-  </>;
-});

package/src/pages/index/components/AutoTable/AutoTableProductList.tsx

@@ -1,98 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {$configuration, $file, AutoTable, Button, Dropdown, DropdownOption, Icon, PlcImage, PlcInput, PlcOv, PlcTextarea} from "../../../../packages";
-import {iOvMeta} from "../../../../packages/components/$ov/ov.utils";
-
-export const demo1 = designPage(() => {
-
-  const ov = $configuration.use('ov')!;
-
-  const state = reactive({
-    imgTypes: null as null | iOvMeta[]
-  });
-
-  ov.getOvByTypes('prod_img_type').then(val => state.imgTypes = val);
-
-  const prodOption = useTableOption({
-    // url: '/prod',
-    url: 'http://1.116.13.72:7001/prod',
-    showRows: 5,
-    bodyRowHeight: 80,
-  });
-
-  const imgOption = useTableOption({
-    url: '/upload',
-    showRows: 5,
-    bodyRowHeight: 80,
-    parentOption: prodOption,
-    parentMap: { headId: 'id' },
-    permit: {
-      show: {
-        update: false,
-        codes: {
-          'inner-copy': false,
-          'outer-insert': false,
-        },
-      }
-    },
-    buttons: [
-      {
-        label: '新建',
-        code: 'upload',
-        type: 'insert',
-        seq: 0,
-        position: 'outer',
-        disabled: () => !prodOption.state.getTable()?.current.getNode()?.data,
-        render: () => (
-          <Dropdown
-            key="upload"
-            v-slots={{
-              default: () => (
-                <Button loading={state.imgTypes == null} label="新建">
-                  <span>新建</span>
-                  <Icon icon="pi-down"/>
-                </Button>
-              ),
-              popper: () => <>
-                {(state.imgTypes || []).map((i, index) => (
-                  <DropdownOption key={index} label={i.name} onClick={() => newImageRecord(i.code)}/>
-                ))}
-              </>
-            }}
-          />
-        )
-      }
-    ],
-  });
-
-  const newImageRecord = async (type: string) => {
-    const imageFiles = await $file.chooseImage(true);
-    const data = (await prodOption.methods.utils.getCurrentNode()).data;
-    await new Promise<void>((resolve, reject) => {
-      $file.upload({
-        action: 'http://1.116.13.72:7001/saveFiles',
-        file: imageFiles,
-        filename: 'file',
-        data: { headId: data.id, attr1: type },
-        onSuccess: () => resolve(),
-        onError: () => reject(),
-      });
-    });
-    await imgOption.methods.pageMethods.reload();
-  };
-
-  return () => (
-    <div>
-      <AutoTable option={prodOption}>
-        <PlcImage title="产品图片" field="imgPath" imgKeyField="imgId"/>
-        <PlcInput title="产品名称" field="name" defaultSearch/>
-        <PlcOv title="产品类型" field="type" ov="prod_type"/>
-      </AutoTable>
-      <AutoTable option={imgOption}>
-        <PlcImage title="图片" field="path"/>
-        <PlcTextarea title="地址" field="path"/>
-        <PlcOv title="图片类型" field="attr1" ov="prod_img_type" defaultSearch/>
-      </AutoTable>
-    </div>
-  );
-});

package/src/pages/index/components/AutoTable/AutoTableRowFormatter.tsx

@@ -1,58 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {useTableOption} from "../../../module/useTableOption";
-import {AutoTable, Plc, PlcDate, PlcInput, PlcNumber, PlcSelect, SelectOption} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const option = useTableOption({
-    url: '/demo',
-    fill: true,
-  });
-
-  option.hooks.onFormatRow.use(row => {
-    row.formatField = `_${row.id}`;
-  });
-
-  const onClick = () => {
-    console.log('click');
-  };
-
-  const selectOptions = [
-    { label: '消费者', status: 'consumer' },
-    { label: '潜在客户', status: 'potential' },
-    { label: '门店', status: 'store' },
-  ];
-
-  const filterConfig = {
-    // formItemAttrs: { column: 2 }
-  };
-
-  return () => (
-    <AutoTable option={option}>
-      <Plc title="编号" field="id" link onClick={onClick} hideInForm filterConfig={filterConfig}/>
-      <Plc title="扩展字段" field="formatField" overflowTooltip hideInForm filterConfig={filterConfig}/>
-      <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
-      <PlcDate title="日期" field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
-      <PlcNumber title="计数" field="count" required/>
-      <PlcInput title="文本"
-                field="normalText"
-                required
-                width={150}
-                fixed="left"
-                filterConfig={filterConfig}
-                v-slots={{
-                  normal: ({ row }) => (
-                    <span>[{row.normalText}]</span>
-                  )
-                }}
-      />
-      <PlcNumber title="数字" field="numberVal"/>
-      <PlcSelect title="下拉选择" field="selectVal">
-        {selectOptions.map((item) => (
-          <SelectOption label={item.label} val={item.status} key={item.status}/>
-        ))}
-      </PlcSelect>
-    </AutoTable>
-  );
-});