plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/normal/DemoCascade.tsx

@@ -0,0 +1,880 @@
+import {designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Alert, Cascade, Plc, PlcTree, Segment, SegmentGroup} from "../../../../packages";
+import treeData from '../../../data/tree.data.json';
+import addressData from '../../../data/address.json';
+import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
+
+export const demo1 = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "浙江省 1", },
+      { "id": "1-1", "name": "杭州市 1-1", },
+      { "id": "1-1-1", "name": "西湖区 1-1-1" }
+    ] as any
+  });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      <p>{JSON.stringify(state.value)}</p>
+    </DemoRow>
+  );
+});
+
+
+export const demoMultiple = designPage(() => {
+  const state = reactive({
+    value: [] as any[]
+  });
+
+  return () => (
+    <DemoRow title="多选">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      <p>{JSON.stringify(state.value)}</p>
+    </DemoRow>
+  );
+});
+
+
+export const demoInput = designPage(() => {
+  const state = reactive({
+    value: [] as any[]
+  });
+
+  return () => (
+    <DemoRow title="设置输入框属性">
+      <Cascade
+        v-model={state.value}
+        width={300}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        inputAttrs={{ tagsWrap: true, }}
+      />
+      <Cascade
+        v-model={state.value}
+        width={300}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        inputAttrs={{ tagsWrap: true, }}
+      />
+      <Cascade
+        v-model={state.value}
+        width={300}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        inputAttrs={{ tagsWrap: true, }}
+      />
+      <Cascade
+        v-model={state.value}
+        width={300}
+        multiple
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        inputAttrs={{ tagsWrap: true, }}
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+export const demo3 = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "浙江省 1", },
+      { "id": "1-1", "name": "杭州市 1-1", },
+      { "id": "1-1-1", "name": "西湖区 1-1-1" }
+    ] as any
+  });
+
+  return () => (
+    <DemoRow title="单选绑定值最后一个选中的节点">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        singleValueType="last"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        singleValueType="last"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        singleValueType="last"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        singleValueType="last"
+        checkLast={false}
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+
+export const demoCheckAny = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "浙江省 1", },
+      { "id": "1-1", "name": "杭州市 1-1", },
+      { "id": "1-1-1", "name": "西湖区 1-1-1" }
+    ] as any
+  });
+
+  return () => (
+    <DemoRow title="选择任意节点">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        singleValueType="all"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        singleValueType="all"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        singleValueType="all"
+        checkLast={false}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        singleValueType="all"
+        checkLast={false}
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+export const demoLazy = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "广东省", },
+      { "id": "2", "name": "佛山市", },
+      { "id": "4", "name": "禅城区" }
+    ] as any
+  });
+
+  const lazyDemo = {
+    treeData: [],
+    isLeaf: (treeNode: iTreeNode) => {
+      return treeNode.level >= 3;
+    },
+    getChildrenData: async (treeNode: iTreeNode | null) => {
+      if (!treeNode) {
+        console.log('getChildrenData:root');
+        return lazyDemo.getCitiesByParentId(null);
+      } else {
+        console.log('getChildrenData', treeNode.data);
+        return lazyDemo.getCitiesByParentId(treeNode.data.id);
+      }
+    },
+    getCitiesByParentId(parentId: string | null) {
+      return new Promise<any[]>((resolve) => {
+        // 这个是模拟在数据库表中的数据
+        const data = [
+          { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
+          { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
+          { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
+          { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
+          { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },
+
+          { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
+          { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
+          { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
+          { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },
+
+          { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
+        ];
+
+        // 模拟请求，请求时间大概在1s-2s之间
+        setTimeout(() => {
+          resolve(data.filter(item => item.parentId === parentId));
+        }, Math.random() * 1000 + 1000);
+      });
+    },
+  };
+
+  return () => (
+    <DemoRow title="懒加载">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        lazy
+        data={lazyDemo.treeData}
+        isLeaf={lazyDemo.isLeaf}
+        getChildrenData={lazyDemo.getChildrenData}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        lazy
+        data={lazyDemo.treeData}
+        isLeaf={lazyDemo.isLeaf}
+        getChildrenData={lazyDemo.getChildrenData}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        lazy
+        data={lazyDemo.treeData}
+        isLeaf={lazyDemo.isLeaf}
+        getChildrenData={lazyDemo.getChildrenData}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        lazy
+        data={lazyDemo.treeData}
+        isLeaf={lazyDemo.isLeaf}
+        getChildrenData={lazyDemo.getChildrenData}
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+export const demoMultipleStrictly = designPage(() => {
+  const state = reactive({
+    value: [] as any
+  });
+
+  return () => (
+    <DemoRow title="多选（互不关联）">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        multiple
+        checkStrictly
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        multiple
+        checkStrictly
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        multiple
+        checkStrictly
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        multiple
+        checkStrictly
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+export const demoCheckAble = designPage(() => {
+  const state = reactive({
+    value: [] as any
+  });
+
+  const isCheckAble = (nodeData: any) => {
+    return nodeData.id.endsWith('1');
+  };
+
+  return () => (
+    <DemoRow title="可选禁用控制">
+      <Alert style={{ marginBottom: '16px' }}>只有id以1结尾的才可以选中</Alert>
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        multiple
+        isCheckAble={isCheckAble}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        multiple
+        isCheckAble={isCheckAble}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        multiple
+        isCheckAble={isCheckAble}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        multiple
+        isCheckAble={isCheckAble}
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+export const demoSlots = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "浙江省 1", },
+      { "id": "1-1", "name": "杭州市 1-1", },
+      { "id": "1-1-1", "name": "西湖区 1-1-1" }
+    ] as any
+  });
+
+  const buildIndex = (treeNode: iTreeNode) => {
+    return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
+  };
+
+  return () => (
+    <DemoRow title="作用域插槽">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+      >
+        {{
+          default: ({ treeNode }: { treeNode: iTreeNode }) => (
+            <div style={{ display: 'inline' }}>{treeNode.data.name} {"-->>"} {treeNode.data.id}</div>
+          )
+        }}
+      </Cascade>
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+      >
+        {{
+          default: ({ treeNode }: { treeNode: iTreeNode }) => (
+            <div style={{ display: 'inline' }}>{treeNode.data.name} {"-->>"} {treeNode.data.id}</div>
+          )
+        }}
+      </Cascade>
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+      >
+        {{
+          default: ({ treeNode }: { treeNode: iTreeNode }) => (
+            <div>{treeNode.data.name} {"-->>"} {treeNode.data.id}</div>
+          )
+        }}
+      </Cascade>
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        {{
+          tree: (attrs: any) => (
+            <PlcTree
+              {...attrs}
+              v-slots={{
+                content: ({ treeNode, tableNode }) => <>{buildIndex(treeNode)}{tableNode.data.name}</>
+              }}
+            />
+          ),
+          default: () => <>
+            <Plc title={'编号'} field={'id'}/>
+            <Plc title={'名称'} field={'name'}/>
+            <Plc title={'编号'} field={'id'}/>
+            <Plc title={'名称'} field={'name'}/>
+          </>
+        }}
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+export const demoFilter = designPage(() => {
+  const state = reactive({
+    value: [
+      { "id": "1", "name": "浙江省 1", },
+      { "id": "1-1", "name": "杭州市 1-1", },
+      { "id": "1-1-1", "name": "西湖区 1-1-1" }
+    ] as any
+  });
+
+  return () => (
+    <DemoRow title="禁用搜索">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="级联选择面板"
+        disableFilter
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        disableFilter
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        panel="tree"
+        placeholder="树选择面板"
+        disableFilter
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        disableFilter
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+export const demoVirtual = designPage(() => {
+  const state = reactive({
+    value: [] as any
+  });
+
+  return () => (
+    <DemoRow title="虚拟滚动">
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        placeholder="级联选择面板"
+        virtual
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        virtual
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        panel="tree"
+        placeholder="树选择面板"
+        virtual
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        virtual
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});
+
+
+export const demoSize = designPage(() => {
+  const state = reactive({
+    value: [] as any,
+    size: 'normal' as any
+  });
+  const flatPanelPlaceholder = ['选择省', '选择市', '选择区/县'];
+  return () => (
+    <DemoRow title="大小尺寸">
+
+      <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
+        <Segment label="Mini" val="mini"/>
+        <Segment label="Small" val="small"/>
+        <Segment label="Normal" val="normal"/>
+        <Segment label="Large" val="large"/>
+      </SegmentGroup>
+
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        placeholder="级联选择面板"
+        size={state.size}
+        virtual
+        panelWidth={150}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        placeholder="平铺选择面板"
+        panelType="flat"
+        size={state.size}
+        virtual
+        panelWidth={150}
+        flatPanelPlaceholder={flatPanelPlaceholder}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        panel="tree"
+        placeholder="树选择面板"
+        size={state.size}
+        virtual
+        panelWidth={150}
+      />
+      <Cascade
+        v-model={state.value}
+        width={200}
+        data={addressData}
+        keyField="id"
+        labelField="name"
+        childrenField="children"
+        size={state.size}
+        virtual
+        panel="table"
+        placeholder="表格选择面板"
+        plcTreeTitle="地址名称"
+      >
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'名称'} field={'name'}/>
+      </Cascade>
+      {/*<p>{JSON.stringify(state.value)}</p>*/}
+    </DemoRow>
+  );
+});