plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/createUseTableOption/use/setting/use.setting.filter.senior.tsx

@@ -1,310 +0,0 @@
-import React from "react";
-import {eTableOptionSettingView, iTableOptionSettingInnerUser} from "./use.setting.utils";
-import {computed, reactive} from "plain-design-composition";
-import {FilterConfig, iFilterOption, iFilterQuery, iFilterTargetOption} from "../../../PlFilter/FilterConfig";
-import PlButton from "../../../PlButton";
-import PlDropdown from "../../../PlDropdown";
-import {tTableOptionHooks} from "../use.hooks";
-import {tPlc} from "../../../PlTable/plc/utils/plc.type";
-import PlIcon from "../../../PlIcon";
-import PlDropdownMenu from "../../../PlDropdownMenu";
-import PlDropdownOption from "../../../PlDropdownOption";
-import {createFilterOptionByPlc} from "../filter/use.filter.utils";
-import PlFilter from "../../../PlFilter";
-import {tTableOptionMethods} from "../use.methods";
-import './use.setting.filter.senior.scss'
-import PlCheckbox from "../../../PlCheckbox";
-import PlInput from "../../../PlInput";
-import PlTable from "../../../PlTable";
-import {PlcIndex} from "../../../PlcIndex";
-import {Plc} from "../../../Plc";
-import {toArray} from "../../../../utils/toArray";
-import {tTableOptionCache} from "../use.cache";
-import {getPlcKey} from "../../../PlTable/plc/utils/usePropsState";
-import {tTableOptionFilter} from "../use.filter.state";
-
-interface iSeniorFilterData extends iFilterOption {
-    id: string
-}
-
-interface iSeniorFilterTargetData extends Omit<iFilterTargetOption, 'option'> {
-    option: iSeniorFilterData,
-}
-
-interface iSeniorFilterCacheData {
-    data: Omit<iSeniorFilterData, 'filterConfig' | 'plc'>[],
-    expression: null | string,
-    isCustomExpression: boolean,
-}
-
-const ExpressionJoins = ['&&', '||', 'and', 'or', '并且', '或者']
-
-export function useTableOptionSettingSeniorFilter(
-    {
-        useTableOptionSettingInner,
-        hooks,
-        getSourceFlatPlcList,
-        methods,
-        cache,
-        filterState,
-    }: {
-        useTableOptionSettingInner: iTableOptionSettingInnerUser,
-        hooks: tTableOptionHooks,
-        getSourceFlatPlcList: () => tPlc[],
-        methods: tTableOptionMethods,
-        cache: tTableOptionCache,
-        filterState: tTableOptionFilter,
-    }) {
-
-    const DEFAULT_EXPRESSION_JOIN = '或者'
-
-    const utils = {
-        nextId: (() => {
-            let count = 1
-            return () => `F_${count++}`
-        })(),
-        resetOperator: () => {
-            edit.state.expression = edit.defaultExpression.value
-        },
-        copyData: (data: iSeniorFilterData[]) => {
-            return data.map(i => ({...i}))
-        },
-        createState: () => {
-            const state = reactive({
-                data: [] as iSeniorFilterData[],
-                expression: null as null | string,
-                isCustomExpression: false,
-            })
-            const ftoArr = computed(() => state.data.map(i => FilterConfig.getTargetOption(i)).filter(Boolean) as iSeniorFilterTargetData[])
-
-            const defaultExpression = computed(() => state.data.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `))
-            return {
-                state, ftoArr, defaultExpression,
-            }
-        },
-    }
-
-    /**
-     * 查询的时候的数据
-     * @author  韦胜健
-     * @date    2021/7/22 21:05
-     */
-    const query = (() => {
-        const {state, ftoArr, defaultExpression} = utils.createState()
-
-        const apply = () => {
-            state.data = utils.copyData(edit.state.data)
-            state.expression = edit.state.expression
-            state.isCustomExpression = edit.state.isCustomExpression
-            methods.pageMethods.reload()
-        }
-
-        return {
-            state,
-            defaultExpression,
-            apply,
-            ftoArr,
-        }
-    })()
-
-    /**
-     * 编辑的时候的数据
-     * @author  韦胜健
-     * @date    2021/7/22 21:05
-     */
-    const edit = (() => {
-        const {state, ftoArr, defaultExpression} = utils.createState()
-
-        const add = (plc: tPlc) => {
-            const id = utils.nextId()
-
-            if (state.data.length === 0) {
-                state.expression = id
-            } else {
-                state.expression += ` ${DEFAULT_EXPRESSION_JOIN} ${id}`
-            }
-
-            state.data.push({id, ...createFilterOptionByPlc(plc)})
-        }
-
-        const remove = (fto: iFilterTargetOption, index: number) => {
-            const isMatchDefaultOperator = !!state.expression && state.expression.trim() === defaultExpression.value
-            state.data.splice(index, 1)
-            if (isMatchDefaultOperator) {state.expression = defaultExpression.value}
-        }
-
-        const clear = () => {
-            state.data = []
-            state.expression = null
-            query.apply()
-        }
-
-        return {
-            state,
-            ftoArr,
-            defaultExpression,
-            add,
-            remove,
-            clear,
-        }
-    })()
-
-    cache.registry<iSeniorFilterCacheData>({
-        cacheKey: 'filter-state-senior',
-        applyCache: ({plcList, cacheData}) => {
-            query.state.isCustomExpression = !cacheData ? false : cacheData.isCustomExpression
-            query.state.expression = !cacheData ? null : cacheData.expression
-            query.state.data = !cacheData ? [] : cacheData.data.map(item => {
-                const plc = plcList.find(i => i.props.title === item.label && i.props.field === item.field)
-                if (!plc) {return null}
-                return {
-                    ...item,
-                    filterConfig: plc.props.filterConfig,
-                    plc: plc,
-                }
-            }).filter(Boolean) as iSeniorFilterData[]
-        },
-        getCache: () => {
-            return {
-                expression: query.state.expression,
-                data: query.state.data.map(({filterConfig, plc, ...left}) => left),
-                isCustomExpression: query.state.isCustomExpression,
-            }
-        },
-    })
-
-    useTableOptionSettingInner({
-        key: eTableOptionSettingView.seniorFilter,
-        title: '高级筛选',
-        seq: 1,
-        beforeOpen: () => {
-            edit.state.data = utils.copyData(query.state.data)
-            edit.state.expression = query.state.expression
-            edit.state.isCustomExpression = query.state.isCustomExpression
-        },
-        render: () => <>
-            <div className="pl-table-pro-setting-senior-filter">
-                <div className="pl-table-pro-setting-senior-filter-button">
-                    <div>
-                        <PlButton label="应用" onClick={query.apply}/>
-                        <PlDropdown>
-                            {{
-                                reference: ({open}) => (
-                                    <PlButton style={{marginBottom: '16px'}}>
-                                        <span>新增筛选</span>
-                                        <PlIcon icon={'el-icon-arrow-down'} style={{transition: 'transform 200ms linear', transform: `rotateX(${open ? 180 : 0}deg)`,}}/>
-                                    </PlButton>
-                                ),
-                                popper: <PlDropdownMenu>
-                                    {getSourceFlatPlcList().filter(i => !!i.props.field && !!i.props.title).map((plc, index) => (
-                                        <PlDropdownOption label={plc.props.title} key={index} onClick={(e) => {
-                                            e.stopPropagation()
-                                            e.preventDefault()
-                                            edit.add(plc)
-                                        }}/>
-                                    ))}
-                                </PlDropdownMenu>
-                            }}
-                        </PlDropdown>
-                        <PlCheckbox label="自定义查询表达式" v-model={edit.state.isCustomExpression} onChange={utils.resetOperator}/>
-                    </div>
-                    <PlButton label="清空" mode="stroke" status="error" onClick={edit.clear}/>
-                </div>
-                <div className="pl-table-pro-setting-senior-filter-list">
-
-                    <PlTable data={edit.ftoArr.value} showRows={Math.max(5, edit.ftoArr.value.length)}>
-                        <PlcIndex/>
-                        <Plc title="编号" width="80" align="center">
-                            {{normal: ({row}) => row.option.id}}
-                        </Plc>
-                        <Plc title="标题" width="100" align="center">
-                            {{normal: ({row}) => row.option.label}}
-                        </Plc>
-                        <Plc title="查询条件" fit>
-                            {{
-                                normal: ({node}) => (
-                                    <PlFilter
-                                        fto={node.data as any}
-                                        key={node.data.filter.filterName + node.data.handler.handlerName}
-                                        hideSearchButton
-                                        block
-                                    />
-                                )
-                            }}
-                        </Plc>
-                        <Plc width="50">
-                            {{
-                                normal: ({node}) => <PlButton label="删除" mode="text" status="error" onClick={() => edit.remove(node.data as any, node.index)}/>
-                            }}
-                        </Plc>
-                    </PlTable>
-                </div>
-                <div>
-                    <h3>自定义表达式 :</h3>
-                    <PlInput textarea v-model={edit.state.expression} block disabled={!edit.state.isCustomExpression}/>
-                </div>
-            </div>
-        </>
-    })
-
-    hooks.onCollectFilterData.use((prev) => {
-        if (query.ftoArr.value.length === 0) {return prev}
-        let expression = !query.state.isCustomExpression || !query.state.expression ? query.defaultExpression.value : query.state.expression
-        /*处理空格*/
-        expression = expression.replace(/\s*(\|\||&&|或者|并且)\s*/gi, ' $1 ').replace(/\s+/, ' ')
-
-        const queries: iFilterQuery[] = []
-        const id2Senior = query.ftoArr.value.reduce((prev, item) => {
-            prev[item.option.id] = item
-            return prev
-        }, {} as Record<string, iSeniorFilterTargetData | undefined>)
-        expression = expression.replace(/\w+/g, (input) => {
-
-            if (ExpressionJoins.indexOf(input) > -1) {return input}
-
-            const senior = id2Senior[input]
-            if (!senior) {return input}
-
-            let itemQueries = FilterConfig.formatToQuery(senior)
-            if (!itemQueries) {return input}
-
-            if (!Array.isArray(itemQueries)) {
-                itemQueries.id = input
-                queries.push(itemQueries)
-                return input
-            }
-            if (itemQueries.length === 1) {
-                itemQueries[0].id = input
-                queries.push(...itemQueries)
-                return input
-            }
-
-            const itemQueryIds: string[] = []
-            toArray(itemQueries).forEach((i, idx) => {
-                const itemId = `${input}-${idx + 1}`
-                itemQueryIds.push(itemId)
-                queries.push({
-                    ...i,
-                    id: itemId,
-                })
-            })
-
-            return `(${itemQueryIds.join(' 并且 ')})`
-        })
-
-        if (queries.length === 0) {return prev}
-        return [...prev, {queries, expression: expression}]
-    })
-
-    /*只显示激活的筛选条件*/
-    filterState.useState<any>({
-        seq: Infinity,
-        key: 'senior-filter',
-        title: '高级查询',
-        applyCache: () => null,
-        getCache: () => null,
-        getDisplay: () => () => null,
-        clear: () => null,
-        getActiveFilterCount: () => query.state.data.length
-    })
-}

package/src/packages/createUseTableOption/use/setting/use.setting.import.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import {eTableOptionSettingView, iTableOptionSettingInnerUser} from "./use.setting.utils";
-import {tPlc} from "../../../PlTable/plc/utils/plc.type";
-import {PlUpload, UploadFile} from "../../../PlUpload";
-import {reactive} from "plain-design-composition";
-import {defer} from "plain-utils/utils/defer";
-import {tTableOptionMethods} from "../use.methods";
-import {delay} from "plain-utils/utils/delay";
-import {getInitialConfigState} from "../../../initialize";
-
-export function useTableOptionSettingImport(
-    {
-        useTableOptionSettingInner,
-        getSourceFlatPlcList,
-        methods,
-        closeSetting,
-    }: {
-        useTableOptionSettingInner: iTableOptionSettingInnerUser,
-        getSourceFlatPlcList: () => tPlc[],
-        methods: tTableOptionMethods,
-        closeSetting: () => void,
-    }) {
-
-    const state = reactive({
-        uploadFiles: [] as (UploadFile & { isDone?: boolean })[],
-    })
-
-    function fileToBuf(file: File): Promise<Buffer> {
-        const fr = new FileReader();
-        const dfd = defer<Buffer>()
-        fr.readAsArrayBuffer(file);
-        fr.addEventListener("loadend", (e) => {dfd.resolve(e.target!.result as any)}, false);
-        return dfd.promise
-    }
-
-    const readFile = async (file: File): Promise<any[]> => {
-        const ExcelJs = await getInitialConfigState('getExceljs')()
-        const workbook = new ExcelJs.Workbook();
-        await workbook.xlsx.load(await fileToBuf(file))
-        const sheet = workbook.getWorksheet(1)
-        const plcList = getSourceFlatPlcList()
-        let importPlcList: (tPlc | undefined)[] = [undefined]
-        let importData: any[] = []
-        sheet.eachRow((row: any, rowIndex: number) => {
-            if (rowIndex === 1) {
-                row.eachCell((cell: any) => {
-                    const plcTitle = cell.value
-                    const plc = plcList.find(i => i.props.title === plcTitle)
-                    importPlcList.push(plc)
-                })
-            } else {
-                const itemData = {} as any
-                row.eachCell((cell: any, cellIndex: number) => {
-                    const plc = importPlcList[cellIndex]
-                    if (!plc) {return}
-                    itemData[plc.props.field!] = cell.value
-                })
-                importData.push(itemData)
-            }
-        })
-        return importData
-    }
-
-    const onUploadChange = async () => {
-        setTimeout(() => {state.uploadFiles = []})
-        const uploadFiles = state.uploadFiles.filter(i => !i.isDone);
-        const importData = (await Promise.all(uploadFiles.map(async (item) => {
-            item.isDone = true
-            return readFile(item.file!)
-        }))).flat()
-        closeSetting()
-        await delay(400)
-        await methods.editMethods.batchInsert({rows: importData})
-    }
-
-    useTableOptionSettingInner({
-        key: eTableOptionSettingView.import,
-        title: '导入数据',
-        seq: 4,
-        beforeOpen() {
-            state.uploadFiles = []
-        },
-        render: () => <>
-            <PlUpload
-                v-model={state.uploadFiles}
-                onChange={onUploadChange}
-                draggable
-                accept="excel"
-                autoUpload={false}
-            />
-        </>
-    })
-
-}

package/src/packages/createUseTableOption/use/setting/use.setting.scss

@@ -1,113 +0,0 @@
-@include theme {
-  .pl-table-pro-setting {
-    height: 100%;
-    display: flex;
-    align-items: stretch;
-
-    $nav-bg: #fcfcfc;
-
-    .pl-table-pro-setting-nav {
-      background-color: $nav-bg;
-      display: flex;
-      flex-direction: column;
-
-      .pl-table-pro-setting-nav-item:last-child {
-        flex: 1;
-      }
-
-      .pl-table-pro-setting-nav-item {
-        padding: 12px 24px;
-        cursor: pointer;
-        background-color: white;
-        position: relative;
-
-        .pl-table-pro-setting-nav-item-inner {
-          position: relative;
-          z-index: 1;
-        }
-
-        &:hover, &.pl-table-pro-setting-nav-item-active {
-          color: $colorPrimary;
-        }
-
-        &.pl-table-pro-setting-nav-item-active {
-          &:after {
-            position: absolute;
-            content: '';
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: 2px;
-            background-color: $colorPrimary;
-          }
-        }
-
-        &.pl-table-pro-setting-nav-item-prev {
-          &:before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-bottom-right-radius: 4px;
-            background-color: $nav-bg;
-            content: '';
-            border-bottom: solid 1px $ibl;
-            border-right: solid 1px $ibl;
-          }
-        }
-
-        &.pl-table-pro-setting-nav-item-next {
-          &:before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-top-right-radius: 4px;
-            background-color: $nav-bg;
-            content: '';
-            border-top: solid 1px $ibl;
-            border-right: solid 1px $ibl;
-          }
-        }
-
-        &:not(.pl-table-pro-setting-nav-item-prev):not(.pl-table-pro-setting-nav-item-next):not(.pl-table-pro-setting-nav-item-active) {
-          background-color: $nav-bg;
-          border-right: solid 1px $ibl;
-        }
-      }
-    }
-
-    .pl-table-pro-setting-content {
-      flex: 1;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      width: 650px;
-      box-sizing: border-box;
-
-      &.pl-table-pro-setting-content-pending {
-        padding: 16px;
-      }
-
-      &::-webkit-scrollbar {
-        background: white;
-        width: 6px;
-        height: 6px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: rgba(black, 0.25);
-        border-radius: 6px;
-      }
-
-      .pl-table-pro-setting-content-header {
-        text-align: right;
-
-        & > .pl-button + .pl-button {
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-}

package/src/packages/createUseTableOption/use/setting/use.setting.sort.tsx

@@ -1,106 +0,0 @@
-import {reactive} from "plain-design-composition";
-import React from "react";
-import {tPlc} from "../../../PlTable/plc/utils/plc.type";
-import {tTableOptionHooks} from "../use.hooks";
-import {iTableOptionSortData, tTableOptionSort} from "../use.sort.state";
-import {eTableOptionSettingView, iTableOptionSettingInnerUser} from "./use.setting.utils";
-import PlDropdown from "../../../PlDropdown";
-import PlButton from "../../../PlButton";
-import PlIcon from "../../../PlIcon";
-import PlDropdownMenu from "../../../PlDropdownMenu";
-import PlDropdownOption from "../../../PlDropdownOption";
-import PlTable from "../../../PlTable";
-import {PlcIndex} from "../../../PlcIndex";
-import {PlcDraggier} from "../../../PlcDraggier";
-import {Plc} from "../../../Plc";
-import PlToggle from "../../../PlToggle";
-import {deepcopy} from "plain-utils/object/deepcopy";
-
-export function useTableOptionSettingSort(
-    {
-        hooks, sortState, getSourceFlatPlcList, useTableOptionSettingInner,
-    }: {
-        hooks: tTableOptionHooks,
-        sortState: tTableOptionSort,
-        getSourceFlatPlcList: () => tPlc[],
-        useTableOptionSettingInner: iTableOptionSettingInnerUser,
-    }) {
-
-    const state = reactive({
-        sortData: [] as iTableOptionSortData[],
-    })
-
-    const handler = {
-        add: ({title, field}: Omit<iTableOptionSortData, 'seq'>) => {
-            state.sortData = [...state.sortData, {title, field, desc: true, seq: sortState.seqData.value.min}]
-        },
-        remove: (data: Omit<iTableOptionSortData, 'seq'>) => {
-            state.sortData = state.sortData.filter(({title, field}) => title !== data.title && field !== data.field)
-        },
-        clear: () => {
-            state.sortData = []
-            handler.apply()
-        },
-        apply: () => {
-            sortState.setSort(state.sortData || [])
-        },
-    }
-
-    useTableOptionSettingInner({
-        key: eTableOptionSettingView.sort,
-        title: '高级排序',
-        seq: 2,
-        beforeOpen: async () => {
-            state.sortData = deepcopy(sortState.sortStateData.value)
-        },
-        render: () => (
-            <div>
-                <div className="pl-table-pro-setting-content-header">
-                    <PlButton label="清空" onClick={handler.clear} mode="stroke" status="error"/>
-                    <PlDropdown>
-                        {{
-                            reference: ({open}) => (
-                                <PlButton style={{marginBottom: '16px'}}>
-                                    <span>新增排序字段</span>
-                                    <PlIcon icon={'el-icon-arrow-down'} style={{transition: 'transform 200ms linear', transform: `rotateX(${open ? 180 : 0}deg)`,}}/>
-                                </PlButton>
-                            ),
-                            popper: <PlDropdownMenu>
-                                {getSourceFlatPlcList().filter(i => !!i.props.field && !!i.props.title).map((plc, index) => (
-                                    <PlDropdownOption label={plc.props.title} key={index} onClick={(e) => {
-                                        e.stopPropagation()
-                                        e.preventDefault()
-                                        handler.add({field: plc.props.field!, title: plc.props.title!, desc: true})
-                                    }}/>
-                                ))}
-                            </PlDropdownMenu>
-                        }}
-                    </PlDropdown>
-                    <PlButton label="应用" onClick={handler.apply}/>
-                </div>
-                <PlTable v-model-data={state.sortData} showRows={Math.max(state.sortData.length, 5)}>
-                    <PlcIndex/>
-                    <PlcDraggier/>
-                    <Plc title="排序字段" field="title"/>
-                    <Plc title="排序方式" field="desc">
-                        {{
-                            normal: ({row}) => (
-                                <div>
-                                    <PlToggle v-model={row.desc} size="mini"/>
-                                    <span style={{marginLeft: '4px'}}>{row.desc ? '降序' : '升序'}</span>
-                                </div>
-                            )
-                        }}
-                    </Plc>
-                    <Plc align="center">
-                        {{
-                            normal: ({node}) => (
-                                <PlButton label="删除" mode="text" status="error" onClick={() => handler.remove(node.data as any)}/>
-                            )
-                        }}
-                    </Plc>
-                </PlTable>
-            </div>
-        )
-    })
-}