@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/table/ImportFileModalByApi/uploadCSVFile.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * 序列化错误信息
+ */
+export declare const errorStringify: (error: any) => string;
+export declare function UploadCSVFile({ parseFile, fields, datasourceTitle, dbName, setDisableNext, setFile, file, createDataImportQuery, setCreateDataImportQuery, updateByField, setUpdateByField, supportManyRelated, }: {
+    parseFile: any;
+    fields: any;
+    datasourceTitle: any;
+    dbName: any;
+    setDisableNext: any;
+    setFile: any;
+    file: any;
+    createDataImportQuery: any;
+    setCreateDataImportQuery: any;
+    updateByField: any;
+    setUpdateByField: any;
+    supportManyRelated: any;
+}): JSX.Element;

package/dist/web/components/table/ImportFileModalByApi/uploadCSVFile.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Upload, Form, Text, Status, Select, Bubble, Icon, } from 'tea-component';
+import { exportData, getXlsxFileHeader } from '../../../utils/file';
+import { callWedaApi } from '../../../utils/tcb';
+import csvTemplate from '../ImportFileModal/csvTemplate.json';
+/**
+ * 序列化错误信息
+ */
+export const errorStringify = (error) => {
+    let msg = '未知';
+    try {
+        msg = JSON.stringify(error);
+    }
+    catch (error) { }
+    return msg;
+};
+// 下载模版
+const getCSVTemplate = (fields, datasourceTitle) => {
+    const header = [];
+    const row = [];
+    fields.forEach((i) => {
+        var _a;
+        const value = (_a = csvTemplate.find((j) => j.type === i.type && j.format === i.format)) === null || _a === void 0 ? void 0 : _a.value;
+        header.push(i.title);
+        row.push(value || '');
+    });
+    exportData([header, row], 'xlsx', `_${datasourceTitle}_导入模版`);
+};
+// 上传csv文件
+export function UploadCSVFile({ parseFile, fields, datasourceTitle, dbName, setDisableNext, setFile, file, createDataImportQuery, setCreateDataImportQuery, updateByField, setUpdateByField, supportManyRelated, }) {
+    const [status, setStatus] = useState(null);
+    const [errorMsg, setErrorMsg] = useState('');
+    const updateFieldOption = fields
+        .filter((i) => i['x-unique'] && i.format !== 'one-one')
+        .map((i) => ({ value: i.name, text: i.title }));
+    updateFieldOption.unshift({ value: 'identity', text: '数据标识' });
+    function handleStart(file) {
+        setFile(file);
+        getXlsxFileHeader(file, ({ headers }) => {
+            parseFile({ fileHeader: headers });
+        });
+    }
+    function handleSuccess(value) {
+        const { code } = value;
+        if (code === 'BAD_REQUEST') {
+            setStatus('error');
+            setErrorMsg('上传文件失败' + errorStringify(value));
+            setDisableNext(true);
+        }
+        else {
+            setStatus('success');
+        }
+    }
+    function handleError(error) {
+        console.error('handleError', error);
+        setStatus('error');
+        setErrorMsg('上传文件失败' + errorStringify(error));
+        setDisableNext(true);
+    }
+    function beforeUpload(file, fileList, isAccepted, reasons) {
+        let accepted = isAccepted;
+        if (!isAccepted) {
+            setStatus('error');
+            setErrorMsg('上传文件失败' + errorStringify(reasons));
+        }
+        if ((file === null || file === void 0 ? void 0 : file.name) && /[!*(');:@&=+$,/?#[\]\s]/.test(file === null || file === void 0 ? void 0 : file.name)) {
+            accepted = false;
+            setStatus('error');
+            setErrorMsg(`文件名中不允许包含! * ' ( ) ; : @ & = + $ , / ? # [ ] 和空格，请修改后重新上传`);
+        }
+        return accepted;
+    }
+    async function getUploadUrl(file) {
+        try {
+            const { name, size } = file;
+            const queryParams = {
+                action: 'CreateDataPreImport',
+                data: {
+                    FileName: name,
+                    DataSourceName: dbName,
+                    Version: supportManyRelated ? 2 : 1,
+                },
+            };
+            const { UploadUrl, FileId } = await callWedaApi(queryParams);
+            setCreateDataImportQuery({
+                ...createDataImportQuery,
+                fileId: FileId,
+                fileName: name,
+                fileSize: size,
+            });
+            return UploadUrl;
+        }
+        catch (error) {
+            setErrorMsg(`上传文件 CreateDataPreImport 接口调用失败，${(error === null || error === void 0 ? void 0 : error.message) || ''}`);
+            console.error('getUploadUrl error', error);
+        }
+    }
+    const tipsTemplate = `2、支持xlsx类型文件，要求文件大小10M以内，不能超过50000行，文件名中不可包含! * ' ( ) ; : @ & = + $ , / ? # [ ] 和空格`;
+    return (_jsxs("div", { className: "modal-upload-wrap", children: [_jsxs(Form, { className: "weda_modal-upload-wrap_import_type", children: [_jsx(Form.Item, { label: "\u5BFC\u5165\u6A21\u5F0F", children: _jsx(Select, { size: "m", appearance: "button", matchButtonWidth: true, options: [
+                                { value: 'create', text: '仅新增' },
+                                { value: 'update', text: '仅更新' },
+                                { value: 'upsert', text: '新增或更新' },
+                            ], value: createDataImportQuery.writeType, onChange: (value) => setCreateDataImportQuery({
+                                ...createDataImportQuery,
+                                writeType: value,
+                            }) }) }), ['update', 'upsert'].includes(createDataImportQuery.writeType) && (_jsx(Form.Item, { label: "\u66F4\u65B0\u4F9D\u636E\u5B57\u6BB5", children: _jsxs(_Fragment, { children: [_jsx(Select, { size: "m", appearance: "button", matchButtonWidth: true, onChange: (value) => {
+                                        setUpdateByField(value);
+                                    }, value: updateByField, options: updateFieldOption }), _jsx(Bubble, { arrowPointAtCenter: true, placement: "top-end", content: "\u652F\u6301\u9009\u62E9\u5F00\u542F\u552F\u4E00\u5C5E\u6027\u7684\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5339\u914D\u5E76\u66F4\u65B0\u5DF2\u6709\u7684\u6570\u636E\u8BB0\u5F55", children: _jsx(Icon, { type: "info" }) })] }) }))] }), _jsx(Form.Control, { status: status, message: status === 'error' ? errorMsg : '', children: _jsx(Upload, { method: "put", action: getUploadUrl, send: (file) => file, accept: ".xlsx", maxSize: 1024 * 1024 * 10, onStart: handleStart, onSuccess: handleSuccess, onError: handleError, beforeUpload: beforeUpload, children: ({ open, isDragging }) => (_jsx(Upload.Dragger, { filename: file && file.name, button: _jsx(Status, { className: "csv-file", icon: 'blank', size: 's', description: file && file.name, operation: _jsxs(_Fragment, { children: [_jsx("a", { onClick: open, children: "\u91CD\u65B0\u4E0A\u4F20" }), "\u00A0/\u00A0", _jsx("a", { onClick: () => {
+                                            setFile(null);
+                                            setDisableNext(true);
+                                        }, children: "\u5220\u9664" })] }) }), children: isDragging ? ('释放鼠标') : (_jsx(Status, { className: "upload-file", icon: 'blank', size: 's', operation: _jsxs(_Fragment, { children: [_jsx("a", { onClick: open, children: "\u70B9\u51FB\u4E0A\u4F20" }), " /", ' ', _jsx(Text, { theme: "weak", children: "\u62D6\u62FD\u5230\u6B64\u533A\u57DF" })] }) })) })) }) }), _jsx("div", { className: "modal-upload-text-wrap", children: _jsxs("ul", { children: [_jsxs("li", { children: ["1\u3001\u8BF7\u4E0B\u8F7D\u4F7F\u7528", _jsx("span", { onClick: () => {
+                                        getCSVTemplate(fields, datasourceTitle);
+                                    }, children: "\u00A0 \u5BFC\u5165\u6A21\u7248" }), "\uFF0C\u5E76\u6309\u7167\u793A\u4F8B\u586B\u5199\u6570\u636E\uFF0C\u4EE5\u4FDD\u8BC1\u6570\u636E\u5BFC\u5165\u987A\u5229"] }), _jsx("li", { children: tipsTemplate }), _jsxs("li", { children: [_jsx("div", { children: "3\u3001\u5BFC\u5165\u66F4\u65B0\u8BF4\u660E" }), _jsx("div", { children: "\u00A01\uFF09\u652F\u6301\u9009\u62E9\u5F00\u542F\u552F\u4E00\u5C5E\u6027\u7684\u5B57\u6BB5\uFF0C\u7528\u4E8E\u5339\u914D\u5E76\u66F4\u65B0\u5DF2\u6709\u7684\u6570\u636E\u8BB0\u5F55" }), _jsx("div", { children: "\u00A02\uFF09\u5BFC\u5165\u6A21\u5F0F\u4E3A\u300C\u65B0\u589E\u6216\u66F4\u65B0\u300D\u65F6\uFF0C\u5982\u300C\u6570\u636E\u6807\u8BC6\u300D\u5217\u4E3A\u7A7A\uFF0C\u8BE5\u884C\u6570\u636E\u4F1A\u6267\u884C\u65B0\u589E\u64CD\u4F5C" }), _jsx("div", { children: "\u00A03\uFF09\u5355\u5143\u683C\u5185\u5BB9\u4E3A\u7A7A\u65F6\uFF0C\u8BE5\u7A7A\u503C\u5C06\u8986\u76D6\u539F\u6709\u6570\u636E\uFF0C\u8BF7\u8C28\u614E\u64CD\u4F5C" })] }), _jsxs("li", { children: [_jsx("div", { children: "4\u3001\u6570\u636E\u683C\u5F0F\u8BF4\u660E" }), _jsx("div", { children: "\u00A0 1\uFF09\u679A\u4E3E\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u9009\u9879\u6807\u8BC6\u6216\u9009\u9879\u503C\u8FDB\u884C\u5BFC\u5165\uFF1A\u9009\u9879\u6807\u8BC6\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u4E1A\u52A1\u540D\u79F0\uFF1B\u9009\u9879\u503C\u4E3A\u9009\u9879\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A02\uFF09\u5173\u8054\u5173\u7CFB\u3001\u4E3B\u5B50\u660E\u7EC6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u9009\u62E9\u4E3B\u5217\u5B57\u6BB5\u6216\u6570\u636E\u6807\u8BC6\u8FDB\u884C\u5BFC\u5165\uFF1A\u4E3B\u5217\u5B57\u6BB5\u4E3A\u8868\u683C\u4E2D\u5C55\u793A\u7684\u5173\u8054\u6570\u636E\u4E1A\u52A1\u540D\u79F0\uFF1B\u6570\u636E\u6807\u8BC6\u4E3A\u5173\u8054\u6570\u636E\u7684\u7CFB\u7EDF\u552F\u4E00\u6807\u8BC6" }), _jsx("div", { children: "\u00A03\uFF09\u5E03\u5C14\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165\u300C\u662F/\u5426\u300D\u6216\u300Ctrue/false\u300D" }), _jsx("div", { children: "\u00A04\uFF09\u56FE\u7247\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301\u5BFC\u5165https\u6216cloud\u534F\u8BAE\u7684\u56FE\u7247\u5730\u5740" }), _jsx("div", { children: "\u00A05\uFF09\u6587\u4EF6\u7C7B\u578B\u6570\u636E\uFF1A\u652F\u6301cloud\u534F\u8BAE\u7684\u6587\u4EF6\u5730\u5740" }), _jsx("div", { children: "\u00A06\uFF09\u5730\u7406\u4F4D\u7F6E\u7C7B\u578B\u6570\u636E\uFF1A\u6570\u636E\u683C\u5F0F\u8981\u6C42\u4E3A\u5730\u70B9\u540D\u79F0(\u5750\u6807\u7ECF\u5EA6,\u5750\u6807\u7EF4\u5EA6)" }), _jsx("div", { children: "\u00A07\uFF09\u5F53\u8868\u683C\u5217\u7ED1\u5B9A\u4E86\u300C\u591A\u5BF9\u4E00\u3001\u4E00\u5BF9\u4E00\u300D\u5173\u7CFB\u7684\u5173\u8054\u6A21\u578B\u5B57\u6BB5\u65F6\uFF0C\u652F\u6301\u9009\u62E9\u4E3B\u5217\u5B57\u6BB5\u6216\u6570\u636E\u6807\u8BC6\uFF0C\u4E0E\u5DF2\u6709\u6570\u636E\u8FDB\u884C\u5339\u914D\u5173\u8054" }), _jsx("div", { children: "\u00A08\uFF09\u5BFC\u5165\u65F6\u6682\u4E0D\u652F\u6301\u4E0E\u300C\u591A\u5BF9\u591A\u3001\u4E00\u5BF9\u591A\u300D\u5173\u7CFB\u7684\u5173\u8054\u6A21\u578B\u6784\u5EFA\u5173\u7CFB" })] })] }) })] }));
+}

package/dist/web/components/table/InOrOutRecordModeal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * 菜单导航配置弹窗
+ */
+export declare function InOrOutRecordModeal({ visible, onCancel, dbName }: {
+    visible: any;
+    onCancel: any;
+    dbName: any;
+}): JSX.Element;

package/dist/web/components/table/InOrOutRecordModeal.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useInOutFieldsRecords } from './hooks/useInOutFieldsRecords';
+import { mutate } from 'swr';
+import { Modal, Table, Button, Text, StatusTip, Icon, List, } from 'tea-component';
+import { moment } from '../form/select';
+const fieldsStatusTextColor = {
+    init: 'warning',
+    importing: 'warning',
+    success: 'text',
+    failure: 'danger',
+    partialFailure: 'danger',
+};
+/**
+ * 菜单导航配置弹窗
+ */
+export function InOrOutRecordModeal({ visible, onCancel, dbName }) {
+    var _a, _b, _c, _d, _e;
+    const isImportRecord = visible && visible === 'import';
+    const titlePre = isImportRecord ? '导入' : '导出';
+    const fieldsStatus = {
+        init: `${titlePre}初始化中`,
+        importing: `${titlePre}中`,
+        exporting: `${titlePre}中`,
+        success: '成功',
+        failure: '失败',
+        partialFailure: '部分失败',
+    };
+    const [isLodaing, setIsLodaing] = useState(null);
+    const [errorFiles, setErrorFiles] = useState(null);
+    const { data, isError } = useInOutFieldsRecords({
+        type: visible || 'import',
+        dbName,
+        setIsLodaing,
+    });
+    const tableRecords = ((_a = data === null || data === void 0 ? void 0 : data.Files) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        const result = { ...item };
+        // 整理出部分失败状态，成功条数不为0，失败条数不为0，partialFailure
+        const { ErrorMessage, ErrorDownloadUrl } = item;
+        const isPartialFailure = (ErrorMessage === null || ErrorMessage === void 0 ? void 0 : ErrorMessage.Failure) && (ErrorMessage === null || ErrorMessage === void 0 ? void 0 : ErrorMessage.Success);
+        if (ErrorMessage && ErrorDownloadUrl) {
+            ErrorMessage['ErrorDownloadUrl'] = ErrorDownloadUrl;
+        }
+        if (isPartialFailure) {
+            result['Status'] = 'partialFailure';
+        }
+        result['ErrorMessage'] = ErrorMessage;
+        return result;
+    })) || [];
+    const renderStatus = (item) => {
+        const status = item === null || item === void 0 ? void 0 : item.Status;
+        return (_jsxs("div", { children: [status && (_jsx(Text, { theme: fieldsStatusTextColor[status], children: fieldsStatus[status] })), status !== 'success' && (_jsx("span", { style: { color: '#E7E7E7', margin: '0 7px' }, children: "|" })), (status === 'importing' || status === 'init') && (_jsx(Button, { type: "link", onClick: () => {
+                        mutate(dbName + 'DescribeDataImportList');
+                    }, children: "\u5237\u65B0" })), (status === 'failure' || status === 'partialFailure') && (_jsx(Button, { type: "link", onClick: () => {
+                        setErrorFiles(item === null || item === void 0 ? void 0 : item.ErrorMessage);
+                    }, children: (item === null || item === void 0 ? void 0 : item.ErrorMessage) ? '查看原因' : '未查询到失败原因' }))] }));
+    };
+    const { scrollable } = Table.addons;
+    const columns = [
+        {
+            key: 'FileName',
+            header: '文件名称',
+            render: (item) => _jsx("span", { children: (item === null || item === void 0 ? void 0 : item.FileName) || '-' }),
+        },
+        {
+            key: 'CreateDate',
+            header: `${titlePre}时间`,
+            render: (item) => moment(item === null || item === void 0 ? void 0 : item.CreateDate).format('YYYY-MM-DD HH:mm:ss'),
+        },
+        { key: 'Status', header: '状态', render: (item) => renderStatus(item) },
+    ];
+    if (!isImportRecord) {
+        columns.push({
+            key: 'Operate',
+            header: '操作',
+            render: (item) => {
+                return (item === null || item === void 0 ? void 0 : item.DownloadUrl) ? (_jsx("a", { target: '_blank', href: item === null || item === void 0 ? void 0 : item.DownloadUrl, rel: "noreferrer", children: "\u70B9\u51FB\u4E0B\u8F7D" })) : (_jsx("span", { children: "-" }));
+            },
+        });
+    }
+    const getTopTip = (isError, isLodaing, tableRecords) => {
+        let type = null;
+        if (isError) {
+            type = 'error';
+        }
+        else if (isLodaing) {
+            type = 'loading';
+        }
+        else if (!(tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length)) {
+            type = 'empty';
+        }
+        return type && _jsx(StatusTip, { status: type });
+    };
+    const getTitle = (isErrorMessage) => {
+        if (isErrorMessage) {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { className: "weda-import-or-modal__arrowarp", onClick: () => {
+                            setErrorFiles([]);
+                        }, children: _jsx("i", { className: "weda-import-or-modal__arrow" }) }), _jsx("span", {}), "\u5931\u8D25\u539F\u56E0\uFF1A", errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.FileName] }));
+        }
+        return `${titlePre}数据`;
+    };
+    useEffect(() => {
+        mutate(dbName + 'DescribeDataImportList');
+    }, []);
+    return (_jsxs(Modal, { caption: getTitle((_b = errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage) === null || _b === void 0 ? void 0 : _b.length), visible: visible, onClose: onCancel, destroyOnClose: true, size: 'l', className: `weda-import-or-modal`, children: [_jsx(Modal.Body, { children: ((_c = errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage) === null || _c === void 0 ? void 0 : _c.length) ? (_jsxs("div", { className: "error-container", children: [_jsxs("div", { className: "error-tip", children: [_jsx(Icon, { type: "error", size: "s" }), _jsxs("p", { children: ["\u6570\u636E", titlePre, "\u5931\u8D25"] })] }), _jsx("div", { className: "error-content", children: _jsxs(List, { children: [(errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorDownloadUrl) && (_jsx(List.Item, { children: _jsx("a", { target: '_blank', href: errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorDownloadUrl, rel: "noreferrer", children: "\u4E0B\u8F7D\u9519\u8BEF\u62A5\u544A" }) })), Array.isArray(errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage)
+                                        ? (_d = errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage) === null || _d === void 0 ? void 0 : _d.map((i, index) => (_jsx(List.Item, { children: i }, index)))
+                                        : errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage] }) })] })) : (_jsx(Table, { records: tableRecords, recordKey: "CreateDate", columns: columns, topTip: getTopTip(isError, isLodaing, tableRecords), addons: [
+                        scrollable({
+                            maxHeight: 420,
+                        }),
+                    ] })) }), _jsx(Modal.Footer, { children: !((_e = errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.ErrorMessage) === null || _e === void 0 ? void 0 : _e.length) && (_jsx(Button, { type: "text", style: {
+                        float: 'left',
+                        pointerEvents: 'none',
+                        marginLeft: '0',
+                        paddingLeft: '0',
+                        color: 'rgba(0, 0, 0, 0.6)',
+                    }, children: "\u4EC5\u5C55\u793A24\u5C0F\u65F6\u5185\u5BFC\u5165/\u5BFC\u51FA\u8BB0\u5F55" })) })] }));
+}

package/dist/web/components/table/QuoteModal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * 引用类型显示弹窗
+ * @description 使用组件方式编写，避免数据流中断
+ */
+export declare const QuoteModal: ({ children, ...restProps }: {
+    [x: string]: any;
+    children: any;
+}) => JSX.Element;

package/dist/web/components/table/QuoteModal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { Button, Modal } from 'tea-component';
+/**
+ * 引用类型显示弹窗
+ * @description 使用组件方式编写，避免数据流中断
+ */
+export const QuoteModal = ({ children, ...restProps }) => {
+    const [visible, setVisible] = useState(false);
+    const onHandleModalVisible = () => {
+        setVisible(!visible);
+    };
+    return (_jsxs(Fragment, { children: [_jsx(Button, { onClick: onHandleModalVisible, type: "link", children: "\u8BE6\u60C5" }), _jsx(Modal, { ...restProps, visible: visible, onClose: onHandleModalVisible, children: _jsx(Modal.Body, { children: children }) })] }));
+};

package/dist/web/components/table/SelectableBlock/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './style';
+/**
+ * 选区组件
+ */
+export declare function SelectableBlock(props: any): JSX.Element;

package/dist/web/components/table/SelectableBlock/index.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfigProvider, Button, Popover } from 'tea-component';
+import { isInIde, isWXIDE } from '../../../utils/platform';
+import './style';
+/**
+ * 选区组件
+ */
+export function SelectableBlock(props) {
+    const { index, show, component, action, actionMap, actionParams, compId, selectableBlockEvents, exportValue, blockKey, isSelectable = true, // 当前元素是否为选区，默认为true
+    ...rest } = props;
+    /**
+     * selectableBlockEvents中
+     * events: 事件面板的events
+     * onCustomEvent: 预览和发布中的onClick事件
+     * onClick: 编辑器的onClick事件
+     * onMouseOver: 编辑器的onMouseOver事件
+     * onMouseOut: 编辑器的onMouseOut事件
+     */
+    const { events, onCustomEvent, onMouseOver, onMouseOut, ...restEvents } = selectableBlockEvents || {};
+    const isSelectableMix = isInIde() && isSelectable;
+    const SelectableBlockButton = () => (_jsx(Button, { ...rest, ...restEvents, onMouseOver: isSelectableMix ? onMouseOver : null, onMouseOut: isSelectableMix ? onMouseOut : null, onClick: (e) => {
+            const params = {
+                event: e,
+                compId,
+                order: index,
+                blockKey,
+            };
+            if (isInIde()) {
+                const { onClick } = selectableBlockEvents || {};
+                isSelectable && onClick && onClick(params);
+            }
+            else {
+                if (action === 'custom') {
+                    // 1、onCustomEvent是运行态的render传过来的方法
+                    // 2、点击按钮时，执行onCustomEvent，回调render
+                    // 3、render中onCustomEvent根据params里的index等参数去拿到第几个选区的listenInstance
+                    // 4、listenInstance转换为events，放到selectableBlockEvents里面，回传到选区
+                    onCustomEvent && onCustomEvent(params);
+                    // 1、上一步selectableBlockEvents里面的events，即为当前点击按钮所需的事件
+                    // 2、执行该按钮的事件
+                    // 3、setTimeout作用是保证先执行上一步，拿到events，才执行下一步的该events.tap
+                    // eslint-disable-next-line rulesdir/no-timer
+                    setTimeout(() => {
+                        events.tap &&
+                            events.tap({ value: { ...exportValue } }, { originEvent: e });
+                    }, 0);
+                }
+                else if (action) {
+                    const excuteAction = actionMap[action];
+                    excuteAction && excuteAction(e, actionParams);
+                }
+            }
+        }, children: rest.text || `按钮${index + 1}` }, index));
+    const componentMap = {
+        Button: SelectableBlockButton,
+    };
+    return (show && (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: isSelectableMix ? (_jsx(Popover, { placement: "top-start", placementOffset: "-1", escapeWithReference: true, overlay: _jsxs("div", { children: [_jsx("div", { style: {
+                            display: 'inline-block',
+                            background: isWXIDE() ? '#00b26a' : '#0052d9',
+                            color: 'white',
+                            padding: 3,
+                            borderRadius: '0 0 0 2px',
+                            cursor: 'default',
+                            fontSize: '12px',
+                        }, children: "\u9009\u533A" }), _jsxs("div", { style: {
+                            display: 'inline-block',
+                            padding: 2,
+                            borderRadius: '0 2px 2px 0',
+                            border: isWXIDE()
+                                ? '1px solid #00b26a'
+                                : '1px solid #0052d9',
+                            cursor: 'default',
+                            background: '#f3f4f7',
+                            boxSizing: 'border-box',
+                            fontSize: '12px',
+                        }, children: [blockKey, index + 1] })] }), children: componentMap[component] && componentMap[component]() })) : (componentMap[component] && componentMap[component]()) })));
+}

package/dist/web/components/table/SelectableBlock/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/table/SelectableBlock/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../../style';

package/dist/web/components/table/UserDepartment/ViewCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './style';
+export declare const ViewCell: ({ data, showType, relation }: {
+    data: any;
+    showType: any;
+    relation: any;
+}) => JSX.Element;

package/dist/web/components/table/UserDepartment/ViewCell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'tea-component';
+import { getRelationData } from './utils';
+import './style';
+export const ViewCell = ({ data, showType, relation }) => {
+    if (showType === 'tree') {
+        return _jsx(Text, { verticalAlign: "middle", children: (data === null || data === void 0 ? void 0 : data.content) || '-' });
+    }
+    const defaultValue = getRelationData(relation);
+    return (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.id) ? (_jsx(Text, { verticalAlign: "middle", children: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.content })) : (_jsx(Text, { children: "-" }));
+};

package/dist/web/components/table/UserDepartment/style.d.ts

@@ -0,0 +1,2 @@
+import './viewCell.css';
+import '../../style';

package/dist/web/components/table/UserDepartment/style.js

@@ -0,0 +1,2 @@
+import './viewCell.css';
+import '../../style';

package/dist/web/components/table/UserDepartment/utils.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export declare const parentIcon: ({ expanded }: {
+    expanded: any;
+}) => JSX.Element;
+export declare const roleIcon: () => JSX.Element;
+export declare const departIcon: () => JSX.Element;
+export declare const dealOrgData: (data?: any[]) => {
+    id: string;
+    content: any;
+    children: any;
+    selectable: boolean;
+    expandable: boolean;
+    icon: ({ expanded }: {
+        expanded: any;
+    }) => JSX.Element;
+    orgId: any;
+}[];
+export declare const dealRoleData: (data?: any[]) => {
+    id: any;
+    expandable: boolean;
+    selectable: boolean;
+    content: any;
+    children: any;
+    icon: ({ expanded }: {
+        expanded: any;
+    }) => JSX.Element;
+}[];
+export declare const dealUserData: (data: any[], isRole: any) => {
+    id: string;
+    expandable: boolean;
+    selectable: boolean;
+    content: any;
+    userId: any;
+    isUser: boolean;
+    icon: () => JSX.Element;
+}[];
+export declare function guidMod(bit: any): string;
+export declare const getNode: (nodes: any, id: any, key: any) => any;
+export declare const getRelationData: (relation: any) => {
+    content: any;
+    id: any;
+};

package/dist/web/components/table/UserDepartment/utils.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from 'tea-component';
+import { safeJsonParse } from '../../../utils/tool';
+export const parentIcon = ({ expanded }) => (_jsx(Icon, { type: expanded ? 'folderopen' : 'folderclose' }));
+// 角色icon
+export const roleIcon = () => _jsx(Icon, { type: 'role' });
+// 部门icon
+export const departIcon = () => _jsx(Icon, { type: 'depart' });
+// 处理部门数据格式
+export const dealOrgData = (data = []) => data.map((i) => ({
+    id: `${guidMod(7)}-${i.OrgId}`,
+    //   icon: getIcon(i.depth),
+    content: i[i.PrimaryColumn],
+    children: undefined,
+    selectable: true,
+    expandable: true,
+    icon: parentIcon,
+    orgId: i.OrgId,
+}));
+// 处理角色数据格式
+export const dealRoleData = (data = []) => data.map((role) => ({
+    id: role.Id,
+    expandable: true,
+    selectable: false,
+    content: role.Name,
+    children: undefined,
+    icon: parentIcon,
+}));
+// 处理用户数据格式
+export const dealUserData = (data = [], isRole) => data.map((user) => {
+    var _a;
+    return ({
+        id: `${guidMod(7)}-${user.UserId}`,
+        expandable: false,
+        selectable: true,
+        content: (user === null || user === void 0 ? void 0 : user[user === null || user === void 0 ? void 0 : user.PrimaryColumn]) ||
+            ((user === null || user === void 0 ? void 0 : user.UserExtend)
+                ? (_a = safeJsonParse(user.UserExtend)) === null || _a === void 0 ? void 0 : _a[user === null || user === void 0 ? void 0 : user.PrimaryColumn]
+                : null),
+        userId: user.UserId,
+        isUser: true,
+        icon: isRole ? roleIcon : departIcon,
+    });
+});
+export function guidMod(bit) {
+    const str = 'qwertyuiopasdfghjklmnbvcxz1234567890';
+    let cont = '';
+    for (let i = 0; i < bit; i++) {
+        cont += str[Math.floor(Math.random() * str.length)];
+    }
+    return cont;
+}
+export const getNode = (nodes, id, key) => {
+    if (!id)
+        return null;
+    for (const node of nodes) {
+        if (node[key] === id) {
+            return node;
+        }
+        if (node.children) {
+            const result = getNode(node.children, id, key);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+};
+export const getRelationData = (relation) => {
+    var _a, _b;
+    const record = (_a = relation === null || relation === void 0 ? void 0 : relation.v1) === null || _a === void 0 ? void 0 : _a.record;
+    const primaryColumn = (_b = relation === null || relation === void 0 ? void 0 : relation.v1) === null || _b === void 0 ? void 0 : _b.primaryColumn;
+    const data = {
+        content: record === null || record === void 0 ? void 0 : record[primaryColumn],
+        id: record === null || record === void 0 ? void 0 : record._id,
+    };
+    return data;
+};

package/dist/web/components/table/UserDepartment/viewCell.css

@@ -0,0 +1,11 @@
+.view-cell-bubble .wedatea2td-bubble__inner {
+  padding: 5px 8px;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(0, 0, 0, 0.9);
+}
+.view-cell-bubble .wedatea2td-bubble__inner::after,
+.view-cell-bubble .wedatea2td-bubble__inner::before {
+  border-bottom-color: rgba(0, 0, 0, 0.9);
+}