@kengic/vue 0.30.1-beta.96 → 0.31.0

package/page/KgPageDda/components/KgPageDda.Create.Submit.tsx

@@ -1,362 +0,0 @@
-import { Icon } from '@iconify/vue';
-import { KgUtil } from '@kengic/core.core';
-import { Button, Input, Table, Transfer } from 'ant-design-vue';
-import { ColumnsType } from 'ant-design-vue/es/table';
-import { TransferItem } from 'ant-design-vue/es/transfer';
-import { compact, without } from 'lodash-es';
-import { defineComponent, ExtractPropTypes, ref, watch } from 'vue';
-import { ResultSetMetadataColumn, VarSubmitDetail } from '../../../api/WMS/models';
-import { pinia, useKg } from '../../../config';
-import { KG } from '../../../model';
-import { useKgPageDdaCreateStore } from './KgPageDda.Create.store';
-
-export const getProps = () => ({}) as any;
-
-export type IKgPageDdaCreateSubmitProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 创建:提交字段
-export default defineComponent({
-    name: 'KgPageDdaCreateSubmit',
-    props: getProps(),
-    setup(props, { expose }) {
-        const kg = useKg();
-        const store = useKgPageDdaCreateStore(pinia);
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        /** 所有的行. */
-        const datas = ref<Array<ResultSetMetadataColumn>>([]);
-        /** 已选的行. */
-        const targetKeys = ref<Array<string>>([]);
-        /** 右侧表格的行. */
-        const rightDatas = ref<Array<ResultSetMetadataColumn>>([]);
-        //endregion
-
-        //region WATCH
-        //----------------------------------------------------------------------------------------------------
-        watch(
-            () => store.getResultSetMetadataColumns,
-            (columns) => {
-                datas.value = columns;
-            },
-            { immediate: true },
-        );
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        // 左侧表格的列
-        const leftColumns: () => ColumnsType<ResultSetMetadataColumn> = () => {
-            return [
-                {
-                    dataIndex: 'index',
-                    title: '#',
-                    width: 40,
-                    fixed: 'left',
-                    align: 'center',
-                    className: 'ant-table-cell--index',
-                    customRender: ({ index }) => index + 1,
-                },
-                {
-                    dataIndex: 'columnLabel',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-name'),
-                    width: 'auto',
-                    customRender: ({ value }) => value,
-                },
-                {
-                    dataIndex: 'columnType',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-type'),
-                    width: 'auto',
-                    customRender: ({ value }) => value,
-                },
-                {
-                    dataIndex: 'columnDesc',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-desc'),
-                    width: 'auto',
-                    customRender: ({ value }) => value,
-                },
-            ];
-        };
-
-        // 右侧表格的列
-        const rightColumns: () => ColumnsType<ResultSetMetadataColumn> = () => {
-            return compact([
-                {
-                    dataIndex: 'index',
-                    title: '#',
-                    width: 40,
-                    fixed: 'left',
-                    align: 'center',
-                    className: 'ant-table-cell--index',
-                    customRender: ({ index, record }) => {
-                        // 如果该行是「用于添加的行」, 则本列显示为一个按钮, 点击按钮可以添加新行,
-                        if (record.id === KG.__KG__CREATE_ROW_ID__) {
-                            return (
-                                <>
-                                    <Button
-                                        class="btn-insert-row"
-                                        onClick={onCreateCustomRow}
-                                    >
-                                        <Icon icon="ant-design:plus-outlined" />
-                                    </Button>
-                                    <span>&nbsp;</span>
-                                </>
-                            );
-                        }
-
-                        // 如果该行是「用户添加的行」, 则本列显示为一个按钮, 点击按钮可以删除该行,
-                        if (record.id?.startsWith(KG.__KG__CUSTOM_ROW_ID__)) {
-                            return (
-                                <>
-                                    <Button
-                                        class="btn-delete-custom-row"
-                                        danger={true}
-                                        onClick={() => onDeleteCustomRow(record)}
-                                    >
-                                        <Icon icon="ant-design:delete-outlined" />
-                                    </Button>
-                                    <span>{index + 1}</span>
-                                </>
-                            );
-                        }
-
-                        return index + 1;
-                    },
-                },
-                {
-                    dataIndex: 'handler',
-                    width: 32,
-                    fixed: 'left',
-                    align: 'center',
-                    className: 'handler',
-                    customCell: () => {
-                        return { draggable: true };
-                    },
-                    customRender: ({ record }) => {
-                        if (record.id === KG.__KG__CREATE_ROW_ID__) {
-                            return null;
-                        }
-
-                        return <Icon icon="ant-design:holder-outlined" />;
-                    },
-                },
-                {
-                    dataIndex: 'columnLabel',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-name'),
-                    width: 'auto',
-                    className: 'column-name',
-                    customRender: ({ value, record }) => {
-                        if (record.id?.startsWith(KG.__KG__CUSTOM_ROW_ID__)) {
-                            return (
-                                <Input
-                                    value={record.columnLabel ?? ''}
-                                    onUpdate:value={(value) => {
-                                        record.columnLabel = value;
-                                    }}
-                                />
-                            );
-                        }
-
-                        return value;
-                    },
-                },
-                {
-                    dataIndex: 'columnType',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-type'),
-                    width: 'auto',
-                    customRender: ({ value }) => value,
-                },
-                {
-                    dataIndex: 'columnDesc',
-                    title: kg.t('kg.KgPageDdaCreateSubmit.column-desc'),
-                    width: 'auto',
-                    className: 'column-desc',
-                    customRender: ({ value, record }) => {
-                        if (record.id?.startsWith(KG.__KG__CUSTOM_ROW_ID__)) {
-                            return (
-                                <Input
-                                    value={record.columnDesc ?? ''}
-                                    onUpdate:value={(value) => {
-                                        record.columnDesc = value;
-                                    }}
-                                />
-                            );
-                        }
-
-                        return value;
-                    },
-                },
-            ]);
-        };
-
-        /**
-         * 添加自定义的行.
-         */
-        function onCreateCustomRow() {
-            // 该行的 id 使用特殊的前缀 __KG__CUSTOM_ROW_ID__, 并加上时间戳,
-            const id = `${KG.__KG__CUSTOM_ROW_ID__}${Date.now()}`;
-
-            datas.value = [...datas.value, { id: id }];
-            targetKeys.value = [...targetKeys.value, id];
-        }
-
-        /**
-         * 删除自定义的行.
-         */
-        function onDeleteCustomRow(row: ResultSetMetadataColumn) {
-            datas.value = without(datas.value, datas.value.find((i) => i.id === row.id)!);
-            targetKeys.value = without(targetKeys.value, row.id!);
-        }
-
-        function getRowSelection({ disabled, selectedKeys, onItemSelectAll, onItemSelect }: Record<string, any>) {
-            return {
-                getCheckboxProps: (item: Record<string, string | boolean>) => {
-                    return {
-                        disabled: disabled || item.disabled || (typeof item.id === 'string' && item.id.startsWith(KG.__KG__CUSTOM_ROW_ID__)),
-                    };
-                },
-                onSelectAll(selected: boolean, selectedRows: Record<string, string | boolean>[]) {
-                    const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key);
-                    onItemSelectAll(treeSelectedKeys, selected);
-                },
-                onSelect(recored: Record<string, string>, selected: boolean) {
-                    onItemSelect(recored.key, selected);
-                },
-                selectedRowKeys: selectedKeys,
-                columnWidth: 32,
-            };
-        }
-
-        /**
-         * 单击某行.
-         */
-        function onRowClick(event: MouseEvent, row: ResultSetMetadataColumn, direction: 'left' | 'right', selectedKeys: string[]) {
-            if (KgUtil.isNotClickable(event.target as Element, ['ant-input'])) {
-                return;
-            }
-
-            if (row.id === KG.__KG__CREATE_ROW_ID__) {
-                return;
-            }
-
-            if (row.id?.startsWith(KG.__KG__CUSTOM_ROW_ID__)) {
-                return;
-            }
-
-            selectedKeys.length = 0;
-
-            switch (event.detail) {
-                // 单击
-                case 1:
-                    selectedKeys[0] = row.id!;
-                    break;
-
-                // 双击
-                case 2:
-                    switch (direction) {
-                        case 'left':
-                            targetKeys.value.push(row.id!);
-                            break;
-
-                        case 'right':
-                            targetKeys.value = without(targetKeys.value, row.id!);
-                            break;
-                    }
-                    break;
-            }
-        }
-
-        /**
-         * 下一步.
-         */
-        function onSubmit(): void {
-            // TODO 验证表单数据
-
-            const datas = rightDatas.value.filter((i) => i.id !== KG.__KG__CREATE_ROW_ID__);
-
-            store.setVarSubmitDetails(datas.map((i, index) => new VarSubmitDetail({ srtseq: index + 1, var_nam: i.columnLabel })));
-
-            datas.forEach((i) => {
-                store.updateVarConfigDescription({ varName: i.columnLabel, varText: i.columnDesc ?? '' });
-            });
-        }
-        //endregion
-
-        expose({ onSubmit });
-
-        return () => {
-            return (
-                <div>
-                    <Transfer
-                        dataSource={datas.value}
-                        targetKeys={targetKeys.value}
-                        onUpdate:targetKeys={(value) => (targetKeys.value = value)}
-                        rowKey={(row) => row.id}
-                        showSearch={true}
-                        showSelectAll={false}
-                        searchPlaceholder={' '}
-                        titles={[kg.t('kg.KgPageDdaCreateSubmit.available'), kg.t('kg.KgPageDdaCreateSubmit.selected')]}
-                        filterOption={(value, item: ResultSetMetadataColumn & TransferItem) => !!item.var_nam?.includes(value)}
-                    >
-                        {{
-                            children: ({
-                                direction,
-                                filteredItems,
-                                selectedKeys,
-                                disabled: transferDisabled,
-                                onItemSelectAll,
-                                onItemSelect,
-                            }: {
-                                direction: 'left' | 'right';
-                                filteredItems: Array<ResultSetMetadataColumn & TransferItem>;
-                                selectedKeys: string[];
-                                disabled: boolean;
-                                onItemSelectAll: (keys: string[], selected: boolean) => void;
-                                onItemSelect: (key: string, selected: boolean) => void;
-                            }) => {
-                                const _datas = filteredItems.sort((x, y) => (x.srtseq ?? 0) - (y.srtseq ?? 0));
-
-                                if (direction === 'right') {
-                                    rightDatas.value = _datas;
-
-                                    // 为了操作方便, 在右侧表格中始终显示一个特殊的行, 点击该行左侧的加号就可以添加新的行,
-                                    if (!_datas.find((i) => i.id === KG.__KG__CREATE_ROW_ID__)) {
-                                        _datas.push({ id: KG.__KG__CREATE_ROW_ID__, direction: 'right', disabled: true });
-                                    }
-                                }
-
-                                return (
-                                    <Table
-                                        pagination={false}
-                                        class="kg-flex-table"
-                                        size={'small'}
-                                        scroll={{
-                                            x: direction === 'left' ? '370px' : `370px`,
-                                            y: 'auto',
-                                        }}
-                                        columns={direction === 'left' ? leftColumns() : rightColumns()}
-                                        rowKey="id"
-                                        dataSource={_datas}
-                                        customRow={(record: ResultSetMetadataColumn) => {
-                                            let props: Record<string, any> = {
-                                                onClick: (event: any) => onRowClick(event, record, direction, selectedKeys),
-                                            };
-
-                                            return props;
-                                        }}
-                                        rowSelection={getRowSelection({
-                                            disabled: transferDisabled,
-                                            selectedKeys,
-                                            onItemSelectAll,
-                                            onItemSelect,
-                                        })}
-                                    />
-                                );
-                            },
-                        }}
-                    </Transfer>
-                </div>
-            );
-        };
-    },
-});