aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/table/relation-table.tsx

@@ -1,1093 +1,1093 @@
-import React from "react";
-import {
-    Button,
-    Col,
-    Form as AntdForm,
-    Popover,
-    Row,
-    Space,
-    Tooltip,
-    Typography, Popconfirm, FormInstance,
-    message
-} from "antd";
-import Table from "./control-table-x-axis-wrapper";
-import {
-    AlignLeftOutlined, CheckOutlined, CloseCircleOutlined,
-    DeleteOutlined,
-    EditOutlined,
-    FormOutlined,
-    PlusSquareOutlined, QuestionCircleOutlined,
-    SnippetsOutlined,
-} from "@ant-design/icons";
-import "./index.css";
-import {
-    ClassAddConfig,
-    DtmplData, FieldConfig,
-    FieldGroupConfig,
-    SelectedRow,
-    ViewOrEdit,
-} from "../tmpl/interface";
-import SupportInputTypes from "../tmpl/control-type-supportor";
-import TableUnits from "./table-util";
-import ViewControl from "../controls/view-control";
-import ModalDtmplView from "../detail/view/modal-dtmpl-view";
-import DtmplEditPage from "../module/dtmpl-edit-page";
-import ModelSelectTable from "./modal-select-table";
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import CollapseCard from "../controls/collapse-card";
-import PopoverEditor from "../detail/edit/popover-editor";
-import Action from "../controls/action";
-import CountingTag from "../controls/counting-tag";
-import { LocaleContext } from "../locale/LocaleProvider";
-import VerticalList from "../list/vertical-list";
-import { EntryControl } from "../index";
-import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
-
-
-const FormItem = AntdForm.Item;
-const { Text } = Typography;
-
-interface RelationTableProps {
-    showRightNav?: boolean;
-    mainCode?: string;
-    serverKey?: string;
-    parentId: string;
-    loading: boolean;
-    viewOrEdit: ViewOrEdit;
-    refreshId?: string;
-    fieldGroupConfig: FieldGroupConfig;
-    value: DtmplData[];
-    parentFormInstance?: FormInstance;
-    onChange?: (fieldGroupConfig: FieldGroupConfig, value: DtmplData[]) => void;
-    onEditing?: (editing: boolean) => void;
-    initCollapse?: boolean;
-    showCollapseCard?: boolean; // 是否显示折叠卡片，默认显示
-}
-
-interface RelationTableStat {
-    selectedCode?: string;
-    showDtmplView?: boolean;
-    showDtmplEdit?: boolean;
-    showSelectTable?: boolean;
-    tableLoading?: boolean;
-    showRowEdit?: boolean;
-    selectedDtmplData?: DtmplData;
-    filterStr?: string;
-    pageSize?: number;
-    addTmplId?: string;
-    editings?: string[];
-    uploadingFiles?: object[];
-}
-
-class RelationTable extends React.PureComponent<
-    RelationTableProps,
-    RelationTableStat
-> {
-    state = {
-        showDtmplView: false,
-        selectedCode: undefined,
-        showSelectTable: false,
-        showDtmplEdit: false,
-        tableLoading: false,
-        showRowEdit: false,
-        selectedDtmplData: undefined,
-        filterStr: undefined,
-        pageSize: 10,
-        addTmplId: undefined,
-        editings: [],
-        uploadingFiles: [],
-    };
-    static contextType = LocaleContext;
-    context: React.ContextType<typeof LocaleContext>;
-    static defaultProps = {
-        showCollapseCard: true,
-    };
-    formRef = React.createRef<FormInstance>();
-
-    async componentDidMount() {
-        // const {fieldGroupConfig} = this.props;
-        // if (fieldGroupConfig.displayConfig.includes('folded')) {
-        //     this.setState({
-        //         collapse: true,
-        //     })
-        // }
-    }
-
-    async componentDidUpdate(prevProps) {
-        const { fieldGroupConfig } = this.props;
-        const { fieldGroupConfig: preFieldGroupConfig } = prevProps;
-        if (
-            fieldGroupConfig.disabled != preFieldGroupConfig.disabled ||
-            fieldGroupConfig.mainCode != preFieldGroupConfig.mainCode
-        ) {
-            this.setState({ filterStr: "" });
-        }
-    }
-
-    buildDataSource = () => {
-        const { filterStr } = this.state;
-        const { value } = this.props;
-        let dataSource = undefined;
-
-        /** 构建 dataSource **/
-        if (value) {
-            dataSource = [];
-            value.forEach((item, index) => {
-                let flag = true;
-                if (filterStr) {
-                    flag = false;
-                    for (let value of Object.values(item.fieldMap)) {
-                        if (value && value.toString().indexOf(filterStr) >= 0) {
-                            flag = true;
-                        }
-                    }
-                }
-                if (flag) {
-                    let row = {
-                        key: item.code,
-                        editStatus: item.editStatus,
-                        relationLabel: item.relationLabel,
-                        code: item.code, //增加code,为了删除操作
-                        ...item.fieldMap,
-                    };
-                    dataSource.push(row);
-                }
-            });
-        }
-
-        return dataSource;
-    };
-
-    isDisabled = (record: DtmplData, item: FieldConfig) => {
-        if (!item.rowEditType) {
-            return false;
-        }
-        let isNew: boolean = record.editStatus && record.editStatus == "new";
-        let type = item.rowEditType;
-        if (type == "editable") {
-            return false;
-        } else if (type == "readonly") {
-            return true;
-        } else if (type == "editonly" && !isNew) {
-            return false;
-        } else if (type == "addonly" && isNew) {
-            return false;
-        }
-        return true;
-    }
-
-    buildColumns = () => {
-        const { viewOrEdit, fieldGroupConfig, serverKey, parentFormInstance } = this.props;
-        const {
-            buttons,
-            fields,
-            showRelationName,
-            relationNames,
-            disabled,
-            deleteData, addOrEditType
-        } = fieldGroupConfig;
-        const { translate } = this.context;
-        const { editings } = this.state;
-        let columns = [];
-        /** 构建column **/
-        let s = 0;
-        fields.forEach((item) => {
-            let column = {};
-            columns.push(column);
-            let title1 = translate("${" + item.title + "}");
-            column["title"] = item.tip ? <>{title1}<Tooltip placement="top" title={item.tip}>
-                <Button type={'text'} size={'small'} disabled={true} icon={<QuestionCircleOutlined />} /></Tooltip> </> : title1;
-            column["dataIndex"] = item.id;
-            if (item.colWidth) column["width"] = item.colWidth;
-            s++;
-            let itemType = SupportInputTypes.getControlType(item, null);
-            if (s < 12 && item.sortable) {
-                TableUnits.sort(column, itemType);
-            }
-            //配置字段的 默认次过滤条件
-            if (item.relValueField) {
-                if (!item.baseCriteria) {
-                    item.baseCriteria = {}
-                }
-                item.baseCriteria = {
-                    ...item.baseCriteria,
-                    "secondCriterion": parentFormInstance.getFieldValue(item.relValueField.id)
-                };
-                item.configChanged = true;
-            }
-            column["render"] = (text, record) => {
-                return (editings.indexOf(record.code) >= 0 ?
-                    <FormItem style={{ margin: 0 }}
-                        name={record.code + "_" + item.id}
-                        key={record.code + "_" + item.id}
-                        rules={TmplConfigAnalysis.getRules(item, translate)}
-                        initialValue={record[item.id]}>
-                        <EntryControl
-                            serverKey={serverKey}
-                            fieldConfig={{ ...item, disabled: this.isDisabled(record, item) }}
-                            value={record[item.id]}
-                        /></FormItem> :
-                    <ViewControl
-                        serverKey={serverKey}
-                        holderType={"table"}
-                        fieldConfig={item}
-                        value={record[item.id]}
-                    />
-                );
-            };
-        });
-        if (showRelationName) {
-            //判断是否有关系属性
-            let rela = {
-                dataIndex: "relationLabel",
-                name: "relation",
-                title: translate("${关系}"),
-                type: "relation",
-                editable: true,
-                fieldAvailable: true,
-                id: "10000", //关系默认id是'10000'
-                options: relationNames,
-            };
-            columns.unshift(rela);
-        }
-
-        //添加操作列
-
-        const viewable = buttons.includes("detail");
-        const rowEdit = buttons.includes("rowEdit");
-        const dtmplEdit = buttons.includes("dtmplEdit");
-        const deletable = buttons.includes("singleDelete");
-        if (
-            viewOrEdit == "edit" &&
-            (viewable || rowEdit || dtmplEdit || deletable)
-        ) {
-            const actionColumn = {};
-            columns.push(actionColumn);
-            actionColumn["操作"] = 1;
-            actionColumn["title"] = translate("${操作}");
-            actionColumn["fixed"] = "right";
-            actionColumn["key"] = "action";
-            actionColumn["render"] = (record) => {
-                return (
-                    <div className="actionbtn">
-                        {/*详情*/}
-                        {viewable ? (
-                            <Button
-                                disabled={disabled}
-                                title={translate("${当前实体}")}
-                                type="primary"
-                                icon={<AlignLeftOutlined />}
-                                size="small"
-                                onClick={() => this.showEntityView(record)}
-                            ></Button>
-                        ) : (
-                            ""
-                        )}
-                        {/*模板编辑*/}
-                        {dtmplEdit ? (
-                            <Button
-                                disabled={disabled}
-                                title={translate("${编辑}${当前实体}")}
-                                icon={<FormOutlined />}
-                                size="small"
-                                onClick={() => this.showEditDtmplModel(record)}
-                            ></Button>
-                        ) : (
-                            ""
-                        )}
-                        {fieldGroupConfig.rowActions &&
-                            fieldGroupConfig.rowActions.length > 0
-                            ? fieldGroupConfig.rowActions.map((action) => {
-                                return (
-                                    <Action
-                                        serverKey={serverKey}
-                                        disabled={disabled}
-                                        key={action.id}
-                                        data={[record]}
-                                        actionConfig={action}
-                                        doAction={this.doRowAction}
-                                        buttonSize={"small"}
-                                    ></Action>
-                                );
-                            })
-                            : ""}
-                        {/*行编辑*/}
-                        {rowEdit && editings.indexOf(record.code) < 0 ? (
-                            addOrEditType !== "tableRow" ?
-                                <PopoverEditor
-                                    serverKey={serverKey}
-                                    disabled={disabled}
-                                    buttonIcon={<EditOutlined />}
-                                    dtmplData={this.getRowEditData(record.code)}
-                                    fieldGroupConfig={fieldGroupConfig}
-                                    onOk={this.handleColData}
-                                    tooltipTitle={translate("${编辑当前行}")}
-                                ></PopoverEditor> : <Button icon={<EditOutlined />} size={'small'}
-                                    onClick={() => this.editRowEdit(record.code)}>
-                                </Button>
-                        ) : ""
-                        }
-                        {editings.indexOf(record.code) >= 0 ?
-                            <><Tooltip placement="topRight" title={translate("${确定修改}")}>
-                                <Button onClick={() => this.saveRowData(record)}
-                                    icon={<CheckOutlined />} size={'small'}></Button></Tooltip>
-                                {record.editStatus !== "new" &&
-                                    <Tooltip placement="topRight" title={translate("${取消修改}")}>
-                                        <Button onClick={() => this.cancelRowEdit(record.code)}
-                                            icon={<CloseCircleOutlined />} size={'small'}></Button>
-                                    </Tooltip>}
-                            </> : ""}
-                        {/*删除*/}
-                        {deletable ?
-                            deleteData ? <Popconfirm
-                                placement="leftBottom"
-                                title={translate("${确定要[删除]选中数据吗}?")}
-                                onConfirm={() => {
-                                    this.delete(record);
-                                }}
-                                okText={translate("${确定}")}
-                                cancelText={translate("${取消}")}
-                                okType={"danger"}
-                            > <Button
-                                disabled={disabled}
-                                danger
-                                type="primary"
-                                icon={<DeleteOutlined />}
-                                size="small"></Button>
-                            </Popconfirm> :
-                                <Tooltip placement="right" title={translate("${删除}${当前行}")}>
-                                    <Button
-                                        disabled={disabled}
-                                        danger
-                                        type="primary"
-                                        icon={<DeleteOutlined />}
-                                        size="small"
-                                        onClick={() => this.delete(record)}></Button></Tooltip>
-
-                            : (
-                                ""
-                            )}
-                    </div>
-                );
-            };
-        } else if (viewOrEdit == "view" && viewable) {
-            const actionColumn = {};
-            columns.push(actionColumn);
-            actionColumn["操作"] = 1;
-            actionColumn["title"] = translate("${操作}");
-            actionColumn["fixed"] = "right";
-            actionColumn["key"] = "action";
-            actionColumn["render"] = (record) => {
-                return (
-                    <div className="actionbtn">
-                        {/*详情*/}
-                        {viewable ? (
-                            <Button
-                                disabled={disabled}
-                                title={translate("${当前实体}")}
-                                type="primary"
-                                icon={<AlignLeftOutlined />}
-                                size="small"
-                                onClick={() => this.showEntityView(record)}
-                            ></Button>
-                        ) : (
-                            ""
-                        )}
-                    </div>
-                );
-            };
-        }
-
-        return columns;
-    };
-
-    doRowAction = async (actionId: string, codes: string[], params: object) => {
-        await this.doAction(
-            actionId,
-            [{ title: undefined, code: codes[0] }],
-            params
-        );
-        this.handleDtmplEdit(codes[0]);
-    };
-
-    doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
-        this.setState({
-            tableLoading: true,
-        });
-        let { serverKey } = this.props;
-        let result: boolean = await HcserviceV3.postActions(
-            serverKey,
-            actionId,
-            selectedRows,
-            params
-        );
-        {
-            this.setState({
-                tableLoading: false,
-            });
-        }
-    };
-
-    showEntityView = (record) => {
-        //console.log('tabel record:', record);
-        this.setState({
-            selectedCode: record.code,
-            showDtmplView: true,
-        });
-    };
-
-    hiddenEntityView = () => {
-        this.setState({
-            showDtmplView: false,
-        });
-    };
-    hiddenEntityEdit = () => {
-        this.setState({
-            showDtmplEdit: false,
-        });
-    };
-
-    delete = async (record) => {
-        const { value, fieldGroupConfig, onChange, serverKey } = this.props;
-        const { editings } = this.state;
-        //追加
-        const selectdDatas: DtmplData[] = [];
-        const selectdCodes: string[] = [];
-        if (value) {
-            for (let v of value) {
-                if (v.code != record.code) {
-                    selectdDatas.push(v);
-                    selectdCodes.push(v.code);
-                }
-            }
-        }
-        //直接删除
-        if (fieldGroupConfig.deleteData) {
-            let result: boolean = await HcserviceV3.deleteByCode(serverKey, fieldGroupConfig.id, [record.code]);
-        }
-
-        if (editings && editings.includes(record.code)) {
-            this.cancelRowEdit(record.code);
-        }
-
-        onChange(fieldGroupConfig, selectdDatas);
-    };
-
-    searchValue = (filterStr: string) => {
-        this.setState({
-            filterStr,
-        });
-    };
-
-    tabChange = (pagination) => {
-        //console.log('pagination',pagination);
-        this.setState({
-            pageSize: pagination.pageSize,
-        });
-    };
-
-    showSelect = () => {
-        //console.log('showSelectTable click');
-        this.setState({
-            showSelectTable: true,
-        });
-    };
-
-    select = async (selectedRows: SelectedRow[]) => {
-        this.setState({
-            showSelectTable: false,
-        });
-        if (!selectedRows || selectedRows.length <= 0) {
-            return;
-        }
-
-        //查询
-        const codes: string[] = [];
-        for (let row of selectedRows) {
-            codes.push(row.code);
-        }
-        await this.add(codes);
-    };
-
-    add = async (codes: string[]) => {
-        const { value, fieldGroupConfig, onChange, serverKey } = this.props;
-        const { relationNames } = fieldGroupConfig;
-        this.setState({
-            tableLoading: true,
-        });
-        let selectdDatas: DtmplData[] = await HcserviceV3.requestSelectedData(
-            serverKey,
-            fieldGroupConfig.id,
-            codes
-        );
-
-        //添加默认关系
-        if (selectdDatas) {
-            for (let d of selectdDatas) {
-                d["relationLabel"] = relationNames[0];
-            }
-        }
-
-        //追加
-        if (value) {
-            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
-                selectdDatas.push(...value);
-            } else {
-                selectdDatas.unshift(...value);
-            }
-        }
-
-        onChange(fieldGroupConfig, selectdDatas);
-        this.setState({
-            tableLoading: false,
-        });
-    };
-
-    getRowEditData = (code?: string) => {
-        const { value } = this.props;
-        let data = undefined;
-        if (code) {
-            for (let dtmplData of value) {
-                if (code == dtmplData.code) {
-                    data = dtmplData;
-                    break;
-                }
-            }
-        }
-        return data;
-    };
-    handleDtmplAdd = async (code: string, isContinueSave?: boolean) => {
-        if (isContinueSave) {
-            this.setState({ selectedCode: code });
-        } else {
-            this.setState({ showDtmplEdit: false });
-        }
-        await this.add([code]);
-    };
-
-    handleDtmplEdit = async (code: string) => {
-        const { value, fieldGroupConfig, onChange } = this.props;
-        const {
-            serverKey,
-        } = fieldGroupConfig;
-        this.setState({
-            tableLoading: true,
-            showDtmplEdit: false,
-        });
-        let data: DtmplData = (
-            await HcserviceV3.requestSelectedData(serverKey, fieldGroupConfig.id, [
-                code,
-            ])
-        )[0];
-        let datas: DtmplData[] = [...value];
-
-        if (datas && data) {
-            for (let v of datas) {
-                if (v.code == data.code) {
-                    v.fieldMap = data.fieldMap;
-                }
-            }
-        }
-        onChange(fieldGroupConfig, datas);
-        this.setState({
-            tableLoading: false,
-        });
-    };
-
-    handleRowEdit = (dtmplData: DtmplData) => {
-        const { value, fieldGroupConfig, onChange } = this.props;
-        let datas: DtmplData[] = [];
-        if (value) {
-            datas = [...value];
-        }
-        let isAdd = true;
-        for (let v of datas) {
-            if (v.code == dtmplData.code) {
-                isAdd = false;
-                if (dtmplData.editStatus) {
-                    v.editStatus = dtmplData.editStatus;
-                }
-                v.fieldMap = dtmplData.fieldMap;
-                if (dtmplData.relationLabel) {
-                    v.relationLabel = dtmplData.relationLabel;
-                }
-                break;
-            }
-        }
-        if (isAdd) {
-            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
-                datas.push(dtmplData);
-            } else {
-                datas.unshift(dtmplData);
-            }
-        }
-        onChange(fieldGroupConfig, datas);
-    };
-
-    showAddDtmplModel = (addTmplId?: string) => {
-        this.setState({
-            showDtmplEdit: true,
-            addTmplId,
-            selectedCode: undefined,
-        });
-    };
-    showEditDtmplModel = (record) => {
-        this.setState({
-            showDtmplEdit: true,
-            addTmplId: undefined,
-            selectedCode: record.code,
-        });
-    };
-
-    getAddTmplButton = (classAddConfigs: ClassAddConfig[]) => {
-        const { translate } = this.context;
-
-        if (classAddConfigs && classAddConfigs.length < 1) {
-            return translate("${没有分类添加按钮}");
-        }
-        return classAddConfigs.map((config) => {
-            return (
-                <p>
-                    <Button
-                        size={"small"}
-                        type={"text"}
-                        onClick={() => this.showAddDtmplModel(config.id)}
-                    >
-                        {config.title}
-                    </Button>
-                </p>
-            );
-        });
-    };
-
-    addNewRow = (defaultValue) => {
-        const { value, fieldGroupConfig, onChange, onEditing } = this.props;
-        const { editings } = this.state;
-        let datas: DtmplData[] = [];
-        if (value) {
-            datas = [...value];
-        }
-        let fieldMaps = [];
-        if (!defaultValue) {
-            const defObj = {};
-            for (let f of fieldGroupConfig.fields) {
-                if (f.defaultValue) {
-                    defObj[f.id] = f.defaultValue;
-                }
-            }
-            // 添加一行设置默认值
-            fieldMaps = [defObj];
-        } else if (Array.isArray(defaultValue)) {
-            fieldMaps = defaultValue;
-        } else {
-            fieldMaps = [defaultValue]
-        }
-
-        let editingCodes = [...editings];
-        let i = 0;
-        for (let f of fieldMaps) {
-
-            let newData: DtmplData = {};
-            newData.editStatus = "new";
-            newData.code = Date.now() + "" + i++;
-            newData.relationLabel = fieldGroupConfig.relationNames[0]
-            newData.fieldMap = f;
-            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
-                datas.push(newData);
-            } else {
-                datas.unshift(newData);
-            }
-            editingCodes.push(newData.code);
-        }
-
-        this.setState({ editings: editingCodes })
-        onChange(fieldGroupConfig, datas);
-        if (onEditing) {
-            onEditing(editingCodes.length > 0);
-        }
-    }
-
-    editRowEdit = (code) => {
-        const { editings } = this.state;
-        const { onEditing } = this.props;
-        let edis = [...editings, code];
-        this.setState({ editings: edis });
-        if (onEditing) {
-            onEditing(edis.length > 0);
-        }
-    }
-
-    cancelRowEdit = (code: string) => {
-        const { onEditing } = this.props
-        const { editings } = this.state
-        let arr = editings.filter(item => item !== code);
-        this.setState({ editings: [...arr] });
-        if (onEditing) {
-            onEditing(arr.length > 0);
-        }
-    }
-
-    // 单独提交
-    postDtmplData = async (dtmplData, record: DtmplData) => {
-        const { fieldGroupConfig, serverKey, onChange, value } = this.props;
-        const sourceId = fieldGroupConfig.id;
-        const { code, editStatus } = record;
-        if (editStatus !== "new") { //editStatus 为new时，是新增实体模版，不传code
-            dtmplData["唯一编码"] = code;
-        }
-        let res = await HcserviceV3.postDtmplData(
-            serverKey,
-            sourceId,
-            dtmplData,
-            message
-        );
-        if (res.status === "success") {
-            this.cancelRowEdit(editStatus !== "new" ? res.code : code);
-            if (editStatus === "new") {
-                onChange(fieldGroupConfig, value.filter(item => item.code !== code)); // 单独提交添加成功后，删除原未保存的数据
-                setTimeout(() => this.handleDtmplAdd(res.code), 100);
-            } else {
-                this.handleDtmplEdit(res.code);
-            }
-        }
-    };
-
-    saveRowData = async (record: DtmplData) => {
-        const { fieldGroupConfig } = this.props;
-        const { code } = record;
-        let currentForm = this.formRef.current;
-        let dtmplData: DtmplData = { code };
-        dtmplData.fieldMap = {};
-        dtmplData.editStatus = "changed";
-        await currentForm.validateFields().then(async (values) => {
-            for (let key in values) {
-                if (values.hasOwnProperty(key) && key.startsWith(code)) {
-                    dtmplData.fieldMap[key.split("_")[1]] = values[key];
-                }
-            }
-            if (fieldGroupConfig.submitType === "separate") {
-                // 单独提交
-                this.postDtmplData(dtmplData.fieldMap, record);
-            } else {
-                this.cancelRowEdit(code);
-                this.handleRowEdit(dtmplData);
-            }
-        }).catch(errorInfo => {
-        })
-    }
-
-    // 单列、双列表单添加编辑
-    handleColData = (record: DtmplData) => {
-        const { fieldGroupConfig } = this.props;
-        if (fieldGroupConfig.submitType === "separate") {
-            // 单独提交
-            this.postDtmplData(record.fieldMap, record);
-        } else {
-            this.handleRowEdit(record);
-        }
-    }
-
-
-
-    uploadFiles = (values) => {
-
-        const { batchAddFileField } = this.props.fieldGroupConfig
-        if (values) {
-
-            let uploading = false;
-            let vals = JSON.parse(values);
-            for (let value of vals) {
-                if (!value.status || value.status != "done") {
-                    uploading = true;
-                }
-            }
-            let datas = [];
-            if (!uploading) {
-                for (let value of vals) {
-                    let data = {};
-                    data[batchAddFileField.id] = JSON.stringify(value);
-                    datas.push(data);
-                }
-                this.addNewRow(datas);
-                this.setState({ uploadingFiles: [] })
-            } else {
-                this.setState({ uploadingFiles: values })
-            }
-        }
-    }
-
-    // 处理fieldConfig，添加exceptCodes
-    handleFieldConfig = () => {
-        const { fieldGroupConfig, value } = this.props;
-        const fields = fieldGroupConfig.fields.map(field => {
-            if (!field || !value || !field.relDeduplication) {
-                return field;
-            }
-            const exceptCodes = value.map(item => {
-                let val = item.fieldMap[field.id];
-                if (val?.includes("@R@")) {
-                    return val.split("@R@")[0];
-                }
-                return val;
-            }).filter(Boolean);
-            return { ...field, exceptCodes };
-        });
-        return { ...fieldGroupConfig, fields };
-    }
-
-    buildButtons = () => {
-        const { fieldGroupConfig, viewOrEdit, value, serverKey } = this.props;
-        const { translate } = this.context;
-        const { buttons, disabled, addOrEditType, batchAddFileField } = fieldGroupConfig;
-        const { uploadingFiles } = this.state;
-        const temFieldGroupConfig = this.handleFieldConfig();
-
-        const buttonDisabled: boolean = disabled
-            ? disabled
-            : fieldGroupConfig.max
-                ? fieldGroupConfig.max <= (value ? value.length : 0)
-                : false;
-
-        if (viewOrEdit == "edit") {
-            return (
-                <Row>
-                    <Col span={20}>
-                        <Space>
-                            {buttons.includes("rowAdd") ? (
-                                addOrEditType == "tableRow" ?
-                                    <>
-                                        <Button
-                                            onClick={() => this.addNewRow(undefined)}>{translate("${添加一行}")}</Button>
-                                        {batchAddFileField ?
-                                            <EntryControl value={uploadingFiles} onChange={this.uploadFiles}
-                                                fieldConfig={{ controlType: "relfile" }} /> : ""}
-                                    </> :
-                                    <PopoverEditor
-                                        serverKey={serverKey}
-                                        disabled={buttonDisabled}
-                                        buttonStyle={{ marginBottom: 10 }}
-                                        buttonTitle={translate("${新建一行}")}
-                                        fieldGroupConfig={temFieldGroupConfig}
-                                        onOk={this.handleColData}
-                                    />
-                            ) : (
-                                ""
-                            )}
-                            {buttons.includes("dtmplAdd") ? (
-                                fieldGroupConfig.classAddConfigs &&
-                                    fieldGroupConfig.classAddConfigs.length > 0 ? (
-                                    <Popover
-                                        arrow={false}
-                                        content={this.getAddTmplButton(
-                                            fieldGroupConfig.classAddConfigs
-                                        )}
-                                        placement="bottomRight"
-                                    >
-                                        <Tooltip>
-                                            <Button icon={<PlusSquareOutlined />}>
-                                                {translate("${新增}")}
-                                            </Button>
-                                        </Tooltip>
-                                    </Popover>
-                                ) : (
-                                    <Button
-                                        disabled={buttonDisabled}
-                                        icon={<PlusSquareOutlined />}
-                                        size="small"
-                                        onClick={() => this.showAddDtmplModel()}
-                                        style={{ marginBottom: 10 }}
-                                    >
-                                        {translate("${新增}")}
-                                    </Button>
-                                )
-                            ) : (
-                                ""
-                            )}
-                            {buttons.includes("selectAdd") ? (
-                                <Button
-                                    disabled={buttonDisabled}
-                                    type="primary"
-                                    icon={<SnippetsOutlined />}
-                                    size="small"
-                                    onClick={this.showSelect}
-                                    style={{ marginBottom: 10 }}
-                                >
-                                    {translate("${选择}")}
-                                </Button>
-                            ) : (
-                                ""
-                            )}
-                            {fieldGroupConfig.min && (!value || value.length <= 0) ? (
-                                <Text style={{ color: "red" }}>
-                                    {translate("${请选择或添加}")}
-                                    {translate("${" + fieldGroupConfig.title + "}")}
-                                </Text>
-                            ) : null}
-                            <FormItem
-                                name={"$virtual" + fieldGroupConfig.id}
-                                style={{ margin: 0, maxHeight: "32px" }}
-                                rules={
-                                    fieldGroupConfig.min
-                                        ? [
-                                            {
-                                                required: true,
-                                                message: ``,
-                                            },
-                                        ]
-                                        : null
-                                }
-                            >
-                                <CountingTag
-                                    min={fieldGroupConfig.min + ""}
-                                    style={{ marginBottom: 10 }}
-                                    count={value ? value.length : 0}
-                                    value={value}
-                                ></CountingTag>
-                            </FormItem>
-                        </Space>
-                    </Col>
-                </Row>
-            );
-        } else {
-            return "";
-        }
-    };
-
-    render() {
-        const {
-            fieldGroupConfig,
-            value,
-            parentId,
-            loading,
-            initCollapse,
-            mainCode,
-            serverKey,
-            showRightNav, parentFormInstance, showCollapseCard
-        } = this.props;
-        const {
-            pageSize,
-            selectedCode,
-            showDtmplView,
-            showSelectTable,
-            showDtmplEdit,
-            addTmplId,
-            tableLoading,
-        } = this.state;
-        const { translate } = this.context;
-
-        const { buttons, viewModel } = fieldGroupConfig;
-        let mainCode1 = fieldGroupConfig.mainCode
-            ? fieldGroupConfig.mainCode
-            : mainCode
-                ? mainCode
-                : parentId;
-        let page = {
-            pageSize: pageSize,
-            hideOnSinglePage: true,
-            defaultCurrent: 1,
-            total: value ? value.length : undefined,
-            showTotal: (total) => {
-                return translate("${共}" + total + "${条}");
-            },
-        };
-        let exceptCodes = [];
-        if (value) {
-            for (let v of value) {
-                exceptCodes.push(v.code);
-            }
-        }
-
-        const renderEditTableList = <div className="editTableList">
-            {this.buildButtons()}
-            {viewModel && viewModel === "verticalList" ? <VerticalList
-                dataSource={this.buildDataSource()}
-                columnConfigs={fieldGroupConfig?.fields}
-                serverKey={serverKey}
-                columns={this.buildColumns()} /> :
-                <AntdForm ref={this.formRef} component={false}>
-                    <Table
-                        size={"small"}
-                        locale={{
-                            emptyText: (
-                                <div style={{ textAlign: "center", width: "100%" }}>
-                                    <Text disabled>{translate("${暂无数据}...")}</Text>
-                                </div>
-                            ),
-                        }}
-                        bordered
-                        loading={tableLoading}
-                        dataSource={this.buildDataSource()}
-                        columns={this.buildColumns()}
-                        pagination={page}
-                        onChange={this.tabChange}
-                    /></AntdForm>}
-        </div>;
-
-        console.log("showCollapseCard", showCollapseCard);
-
-        return fieldGroupConfig.displayConfig.includes("nonDataNonDisplayed") &&
-            (!value || value.length <= 0) ? "" : (
-            <>
-                {showCollapseCard ?
-                    <CollapseCard
-                        showRightNav={showRightNav}
-                        initCollapse={initCollapse || fieldGroupConfig.displayConfig.includes("folded")}
-                        title={fieldGroupConfig.title}
-                        tip={fieldGroupConfig.tip}
-                        id={parentId + fieldGroupConfig.id}
-                        className="hoverable"
-                        styles={{ header: { background: "#f2f4f5" }, body: { padding: "6px" } }}
-                        loading={loading}
-                    //暂时注释掉，后续要支持配置。
-                    //extra={<Input.Search onSearch={this.searchValue} allowClear placeholder=""/>}
-                    >
-                        {renderEditTableList}
-                    </CollapseCard> : renderEditTableList}
-                {buttons.includes("detail") ? (
-                    <ModalDtmplView
-                        serverKey={serverKey}
-                        mainCode={mainCode1}
-                        open={showDtmplView}
-                        onCancel={this.hiddenEntityView}
-                        sourceId={fieldGroupConfig.id}
-                        code={selectedCode}
-                    >
-                        {" "}
-                    </ModalDtmplView>
-                ) : ""}
-                {buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd") ? (
-                    <DtmplEditPage
-                        addTmplId={addTmplId}
-                        serverKey={serverKey}
-                        mainCode={mainCode1}
-                        open={showDtmplEdit}
-                        onCancel={this.hiddenEntityEdit}
-                        sourceId={fieldGroupConfig.id}
-                        code={selectedCode}
-                        parentFormInstance={parentFormInstance}
-                        onOk={selectedCode ? this.handleDtmplEdit : this.handleDtmplAdd}
-                    />
-                ) : ""}
-                {buttons.includes("selectAdd") ? (
-                    <ModelSelectTable
-                        serverKey={serverKey}
-                        defaultCriteriaValue={fieldGroupConfig.defaultCriteriaValue}
-                        maxSelectedRows={fieldGroupConfig.max}
-                        open={showSelectTable}
-                        onOK={this.select}
-                        onCancel={() => {
-                            this.setState({ showSelectTable: false });
-                        }}
-                        exceptCodes={exceptCodes}
-                        mainCode={mainCode1}
-                        sourceId={fieldGroupConfig.id}
-                        selectRelValueField={fieldGroupConfig.selectRelValueField}
-                        parentFormInstance={parentFormInstance}
-                    />
-                ) : ""}
-            </>
-        );
-    }
-}
-
-export default RelationTable;
+import React from "react";
+import {
+    Button,
+    Col,
+    Form as AntdForm,
+    Popover,
+    Row,
+    Space,
+    Tooltip,
+    Typography, Popconfirm, FormInstance,
+    message
+} from "antd";
+import Table from "./control-table-x-axis-wrapper";
+import {
+    AlignLeftOutlined, CheckOutlined, CloseCircleOutlined,
+    DeleteOutlined,
+    EditOutlined,
+    FormOutlined,
+    PlusSquareOutlined, QuestionCircleOutlined,
+    SnippetsOutlined,
+} from "@ant-design/icons";
+import "./index.css";
+import {
+    ClassAddConfig,
+    DtmplData, FieldConfig,
+    FieldGroupConfig,
+    SelectedRow,
+    ViewOrEdit,
+} from "../tmpl/interface";
+import SupportInputTypes from "../tmpl/control-type-supportor";
+import TableUnits from "./table-util";
+import ViewControl from "../controls/view-control";
+import ModalDtmplView from "../detail/view/modal-dtmpl-view";
+import DtmplEditPage from "../module/dtmpl-edit-page";
+import ModelSelectTable from "./modal-select-table";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import CollapseCard from "../controls/collapse-card";
+import PopoverEditor from "../detail/edit/popover-editor";
+import Action from "../controls/action";
+import CountingTag from "../controls/counting-tag";
+import { LocaleContext } from "../locale/LocaleProvider";
+import VerticalList from "../list/vertical-list";
+import { EntryControl } from "../index";
+import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
+
+
+const FormItem = AntdForm.Item;
+const { Text } = Typography;
+
+interface RelationTableProps {
+    showRightNav?: boolean;
+    mainCode?: string;
+    serverKey?: string;
+    parentId: string;
+    loading: boolean;
+    viewOrEdit: ViewOrEdit;
+    refreshId?: string;
+    fieldGroupConfig: FieldGroupConfig;
+    value: DtmplData[];
+    parentFormInstance?: FormInstance;
+    onChange?: (fieldGroupConfig: FieldGroupConfig, value: DtmplData[]) => void;
+    onEditing?: (editing: boolean) => void;
+    initCollapse?: boolean;
+    showCollapseCard?: boolean; // 是否显示折叠卡片，默认显示
+}
+
+interface RelationTableStat {
+    selectedCode?: string;
+    showDtmplView?: boolean;
+    showDtmplEdit?: boolean;
+    showSelectTable?: boolean;
+    tableLoading?: boolean;
+    showRowEdit?: boolean;
+    selectedDtmplData?: DtmplData;
+    filterStr?: string;
+    pageSize?: number;
+    addTmplId?: string;
+    editings?: string[];
+    uploadingFiles?: object[];
+}
+
+class RelationTable extends React.PureComponent<
+    RelationTableProps,
+    RelationTableStat
+> {
+    state = {
+        showDtmplView: false,
+        selectedCode: undefined,
+        showSelectTable: false,
+        showDtmplEdit: false,
+        tableLoading: false,
+        showRowEdit: false,
+        selectedDtmplData: undefined,
+        filterStr: undefined,
+        pageSize: 10,
+        addTmplId: undefined,
+        editings: [],
+        uploadingFiles: [],
+    };
+    static contextType = LocaleContext;
+    context: React.ContextType<typeof LocaleContext>;
+    static defaultProps = {
+        showCollapseCard: true,
+    };
+    formRef = React.createRef<FormInstance>();
+
+    async componentDidMount() {
+        // const {fieldGroupConfig} = this.props;
+        // if (fieldGroupConfig.displayConfig.includes('folded')) {
+        //     this.setState({
+        //         collapse: true,
+        //     })
+        // }
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { fieldGroupConfig } = this.props;
+        const { fieldGroupConfig: preFieldGroupConfig } = prevProps;
+        if (
+            fieldGroupConfig.disabled != preFieldGroupConfig.disabled ||
+            fieldGroupConfig.mainCode != preFieldGroupConfig.mainCode
+        ) {
+            this.setState({ filterStr: "" });
+        }
+    }
+
+    buildDataSource = () => {
+        const { filterStr } = this.state;
+        const { value } = this.props;
+        let dataSource = undefined;
+
+        /** 构建 dataSource **/
+        if (value) {
+            dataSource = [];
+            value.forEach((item, index) => {
+                let flag = true;
+                if (filterStr) {
+                    flag = false;
+                    for (let value of Object.values(item.fieldMap)) {
+                        if (value && value.toString().indexOf(filterStr) >= 0) {
+                            flag = true;
+                        }
+                    }
+                }
+                if (flag) {
+                    let row = {
+                        key: item.code,
+                        editStatus: item.editStatus,
+                        relationLabel: item.relationLabel,
+                        code: item.code, //增加code,为了删除操作
+                        ...item.fieldMap,
+                    };
+                    dataSource.push(row);
+                }
+            });
+        }
+
+        return dataSource;
+    };
+
+    isDisabled = (record: DtmplData, item: FieldConfig) => {
+        if (!item.rowEditType) {
+            return false;
+        }
+        let isNew: boolean = record.editStatus && record.editStatus == "new";
+        let type = item.rowEditType;
+        if (type == "editable") {
+            return false;
+        } else if (type == "readonly") {
+            return true;
+        } else if (type == "editonly" && !isNew) {
+            return false;
+        } else if (type == "addonly" && isNew) {
+            return false;
+        }
+        return true;
+    }
+
+    buildColumns = () => {
+        const { viewOrEdit, fieldGroupConfig, serverKey, parentFormInstance } = this.props;
+        const {
+            buttons,
+            fields,
+            showRelationName,
+            relationNames,
+            disabled,
+            deleteData, addOrEditType
+        } = fieldGroupConfig;
+        const { translate } = this.context;
+        const { editings } = this.state;
+        let columns = [];
+        /** 构建column **/
+        let s = 0;
+        fields.forEach((item) => {
+            let column = {};
+            columns.push(column);
+            let title1 = translate("${" + item.title + "}");
+            column["title"] = item.tip ? <>{title1}<Tooltip placement="top" title={item.tip}>
+                <Button type={'text'} size={'small'} disabled={true} icon={<QuestionCircleOutlined />} /></Tooltip> </> : title1;
+            column["dataIndex"] = item.id;
+            if (item.colWidth) column["width"] = item.colWidth;
+            s++;
+            let itemType = SupportInputTypes.getControlType(item, null);
+            if (s < 12 && item.sortable) {
+                TableUnits.sort(column, itemType);
+            }
+            //配置字段的 默认次过滤条件
+            if (item.relValueField) {
+                if (!item.baseCriteria) {
+                    item.baseCriteria = {}
+                }
+                item.baseCriteria = {
+                    ...item.baseCriteria,
+                    "secondCriterion": parentFormInstance.getFieldValue(item.relValueField.id)
+                };
+                item.configChanged = true;
+            }
+            column["render"] = (text, record) => {
+                return (editings.indexOf(record.code) >= 0 ?
+                    <FormItem style={{ margin: 0 }}
+                        name={record.code + "_" + item.id}
+                        key={record.code + "_" + item.id}
+                        rules={TmplConfigAnalysis.getRules(item, translate)}
+                        initialValue={record[item.id]}>
+                        <EntryControl
+                            serverKey={serverKey}
+                            fieldConfig={{ ...item, disabled: this.isDisabled(record, item) }}
+                            value={record[item.id]}
+                        /></FormItem> :
+                    <ViewControl
+                        serverKey={serverKey}
+                        holderType={"table"}
+                        fieldConfig={item}
+                        value={record[item.id]}
+                    />
+                );
+            };
+        });
+        if (showRelationName) {
+            //判断是否有关系属性
+            let rela = {
+                dataIndex: "relationLabel",
+                name: "relation",
+                title: translate("${关系}"),
+                type: "relation",
+                editable: true,
+                fieldAvailable: true,
+                id: "10000", //关系默认id是'10000'
+                options: relationNames,
+            };
+            columns.unshift(rela);
+        }
+
+        //添加操作列
+
+        const viewable = buttons.includes("detail");
+        const rowEdit = buttons.includes("rowEdit");
+        const dtmplEdit = buttons.includes("dtmplEdit");
+        const deletable = buttons.includes("singleDelete");
+        if (
+            viewOrEdit == "edit" &&
+            (viewable || rowEdit || dtmplEdit || deletable)
+        ) {
+            const actionColumn = {};
+            columns.push(actionColumn);
+            actionColumn["操作"] = 1;
+            actionColumn["title"] = translate("${操作}");
+            actionColumn["fixed"] = "right";
+            actionColumn["key"] = "action";
+            actionColumn["render"] = (record) => {
+                return (
+                    <div className="actionbtn">
+                        {/*详情*/}
+                        {viewable ? (
+                            <Button
+                                disabled={disabled}
+                                title={translate("${当前实体}")}
+                                type="primary"
+                                icon={<AlignLeftOutlined />}
+                                size="small"
+                                onClick={() => this.showEntityView(record)}
+                            ></Button>
+                        ) : (
+                            ""
+                        )}
+                        {/*模板编辑*/}
+                        {dtmplEdit ? (
+                            <Button
+                                disabled={disabled}
+                                title={translate("${编辑}${当前实体}")}
+                                icon={<FormOutlined />}
+                                size="small"
+                                onClick={() => this.showEditDtmplModel(record)}
+                            ></Button>
+                        ) : (
+                            ""
+                        )}
+                        {fieldGroupConfig.rowActions &&
+                            fieldGroupConfig.rowActions.length > 0
+                            ? fieldGroupConfig.rowActions.map((action) => {
+                                return (
+                                    <Action
+                                        serverKey={serverKey}
+                                        disabled={disabled}
+                                        key={action.id}
+                                        data={[record]}
+                                        actionConfig={action}
+                                        doAction={this.doRowAction}
+                                        buttonSize={"small"}
+                                    ></Action>
+                                );
+                            })
+                            : ""}
+                        {/*行编辑*/}
+                        {rowEdit && editings.indexOf(record.code) < 0 ? (
+                            addOrEditType !== "tableRow" ?
+                                <PopoverEditor
+                                    serverKey={serverKey}
+                                    disabled={disabled}
+                                    buttonIcon={<EditOutlined />}
+                                    dtmplData={this.getRowEditData(record.code)}
+                                    fieldGroupConfig={fieldGroupConfig}
+                                    onOk={this.handleColData}
+                                    tooltipTitle={translate("${编辑当前行}")}
+                                ></PopoverEditor> : <Button icon={<EditOutlined />} size={'small'}
+                                    onClick={() => this.editRowEdit(record.code)}>
+                                </Button>
+                        ) : ""
+                        }
+                        {editings.indexOf(record.code) >= 0 ?
+                            <><Tooltip placement="topRight" title={translate("${确定修改}")}>
+                                <Button onClick={() => this.saveRowData(record)}
+                                    icon={<CheckOutlined />} size={'small'}></Button></Tooltip>
+                                {record.editStatus !== "new" &&
+                                    <Tooltip placement="topRight" title={translate("${取消修改}")}>
+                                        <Button onClick={() => this.cancelRowEdit(record.code)}
+                                            icon={<CloseCircleOutlined />} size={'small'}></Button>
+                                    </Tooltip>}
+                            </> : ""}
+                        {/*删除*/}
+                        {deletable ?
+                            deleteData ? <Popconfirm
+                                placement="leftBottom"
+                                title={translate("${确定要[删除]选中数据吗}?")}
+                                onConfirm={() => {
+                                    this.delete(record);
+                                }}
+                                okText={translate("${确定}")}
+                                cancelText={translate("${取消}")}
+                                okType={"danger"}
+                            > <Button
+                                disabled={disabled}
+                                danger
+                                type="primary"
+                                icon={<DeleteOutlined />}
+                                size="small"></Button>
+                            </Popconfirm> :
+                                <Tooltip placement="right" title={translate("${删除}${当前行}")}>
+                                    <Button
+                                        disabled={disabled}
+                                        danger
+                                        type="primary"
+                                        icon={<DeleteOutlined />}
+                                        size="small"
+                                        onClick={() => this.delete(record)}></Button></Tooltip>
+
+                            : (
+                                ""
+                            )}
+                    </div>
+                );
+            };
+        } else if (viewOrEdit == "view" && viewable) {
+            const actionColumn = {};
+            columns.push(actionColumn);
+            actionColumn["操作"] = 1;
+            actionColumn["title"] = translate("${操作}");
+            actionColumn["fixed"] = "right";
+            actionColumn["key"] = "action";
+            actionColumn["render"] = (record) => {
+                return (
+                    <div className="actionbtn">
+                        {/*详情*/}
+                        {viewable ? (
+                            <Button
+                                disabled={disabled}
+                                title={translate("${当前实体}")}
+                                type="primary"
+                                icon={<AlignLeftOutlined />}
+                                size="small"
+                                onClick={() => this.showEntityView(record)}
+                            ></Button>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                );
+            };
+        }
+
+        return columns;
+    };
+
+    doRowAction = async (actionId: string, codes: string[], params: object) => {
+        await this.doAction(
+            actionId,
+            [{ title: undefined, code: codes[0] }],
+            params
+        );
+        this.handleDtmplEdit(codes[0]);
+    };
+
+    doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
+        this.setState({
+            tableLoading: true,
+        });
+        let { serverKey } = this.props;
+        let result: boolean = await HcserviceV3.postActions(
+            serverKey,
+            actionId,
+            selectedRows,
+            params
+        );
+        {
+            this.setState({
+                tableLoading: false,
+            });
+        }
+    };
+
+    showEntityView = (record) => {
+        //console.log('tabel record:', record);
+        this.setState({
+            selectedCode: record.code,
+            showDtmplView: true,
+        });
+    };
+
+    hiddenEntityView = () => {
+        this.setState({
+            showDtmplView: false,
+        });
+    };
+    hiddenEntityEdit = () => {
+        this.setState({
+            showDtmplEdit: false,
+        });
+    };
+
+    delete = async (record) => {
+        const { value, fieldGroupConfig, onChange, serverKey } = this.props;
+        const { editings } = this.state;
+        //追加
+        const selectdDatas: DtmplData[] = [];
+        const selectdCodes: string[] = [];
+        if (value) {
+            for (let v of value) {
+                if (v.code != record.code) {
+                    selectdDatas.push(v);
+                    selectdCodes.push(v.code);
+                }
+            }
+        }
+        //直接删除
+        if (fieldGroupConfig.deleteData) {
+            let result: boolean = await HcserviceV3.deleteByCode(serverKey, fieldGroupConfig.id, [record.code]);
+        }
+
+        if (editings && editings.includes(record.code)) {
+            this.cancelRowEdit(record.code);
+        }
+
+        onChange(fieldGroupConfig, selectdDatas);
+    };
+
+    searchValue = (filterStr: string) => {
+        this.setState({
+            filterStr,
+        });
+    };
+
+    tabChange = (pagination) => {
+        //console.log('pagination',pagination);
+        this.setState({
+            pageSize: pagination.pageSize,
+        });
+    };
+
+    showSelect = () => {
+        //console.log('showSelectTable click');
+        this.setState({
+            showSelectTable: true,
+        });
+    };
+
+    select = async (selectedRows: SelectedRow[]) => {
+        this.setState({
+            showSelectTable: false,
+        });
+        if (!selectedRows || selectedRows.length <= 0) {
+            return;
+        }
+
+        //查询
+        const codes: string[] = [];
+        for (let row of selectedRows) {
+            codes.push(row.code);
+        }
+        await this.add(codes);
+    };
+
+    add = async (codes: string[]) => {
+        const { value, fieldGroupConfig, onChange, serverKey } = this.props;
+        const { relationNames } = fieldGroupConfig;
+        this.setState({
+            tableLoading: true,
+        });
+        let selectdDatas: DtmplData[] = await HcserviceV3.requestSelectedData(
+            serverKey,
+            fieldGroupConfig.id,
+            codes
+        );
+
+        //添加默认关系
+        if (selectdDatas) {
+            for (let d of selectdDatas) {
+                d["relationLabel"] = relationNames[0];
+            }
+        }
+
+        //追加
+        if (value) {
+            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
+                selectdDatas.push(...value);
+            } else {
+                selectdDatas.unshift(...value);
+            }
+        }
+
+        onChange(fieldGroupConfig, selectdDatas);
+        this.setState({
+            tableLoading: false,
+        });
+    };
+
+    getRowEditData = (code?: string) => {
+        const { value } = this.props;
+        let data = undefined;
+        if (code) {
+            for (let dtmplData of value) {
+                if (code == dtmplData.code) {
+                    data = dtmplData;
+                    break;
+                }
+            }
+        }
+        return data;
+    };
+    handleDtmplAdd = async (code: string, isContinueSave?: boolean) => {
+        if (isContinueSave) {
+            this.setState({ selectedCode: code });
+        } else {
+            this.setState({ showDtmplEdit: false });
+        }
+        await this.add([code]);
+    };
+
+    handleDtmplEdit = async (code: string) => {
+        const { value, fieldGroupConfig, onChange } = this.props;
+        const {
+            serverKey,
+        } = fieldGroupConfig;
+        this.setState({
+            tableLoading: true,
+            showDtmplEdit: false,
+        });
+        let data: DtmplData = (
+            await HcserviceV3.requestSelectedData(serverKey, fieldGroupConfig.id, [
+                code,
+            ])
+        )[0];
+        let datas: DtmplData[] = [...value];
+
+        if (datas && data) {
+            for (let v of datas) {
+                if (v.code == data.code) {
+                    v.fieldMap = data.fieldMap;
+                }
+            }
+        }
+        onChange(fieldGroupConfig, datas);
+        this.setState({
+            tableLoading: false,
+        });
+    };
+
+    handleRowEdit = (dtmplData: DtmplData) => {
+        const { value, fieldGroupConfig, onChange } = this.props;
+        let datas: DtmplData[] = [];
+        if (value) {
+            datas = [...value];
+        }
+        let isAdd = true;
+        for (let v of datas) {
+            if (v.code == dtmplData.code) {
+                isAdd = false;
+                if (dtmplData.editStatus) {
+                    v.editStatus = dtmplData.editStatus;
+                }
+                v.fieldMap = dtmplData.fieldMap;
+                if (dtmplData.relationLabel) {
+                    v.relationLabel = dtmplData.relationLabel;
+                }
+                break;
+            }
+        }
+        if (isAdd) {
+            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
+                datas.push(dtmplData);
+            } else {
+                datas.unshift(dtmplData);
+            }
+        }
+        onChange(fieldGroupConfig, datas);
+    };
+
+    showAddDtmplModel = (addTmplId?: string) => {
+        this.setState({
+            showDtmplEdit: true,
+            addTmplId,
+            selectedCode: undefined,
+        });
+    };
+    showEditDtmplModel = (record) => {
+        this.setState({
+            showDtmplEdit: true,
+            addTmplId: undefined,
+            selectedCode: record.code,
+        });
+    };
+
+    getAddTmplButton = (classAddConfigs: ClassAddConfig[]) => {
+        const { translate } = this.context;
+
+        if (classAddConfigs && classAddConfigs.length < 1) {
+            return translate("${没有分类添加按钮}");
+        }
+        return classAddConfigs.map((config) => {
+            return (
+                <p>
+                    <Button
+                        size={"small"}
+                        type={"text"}
+                        onClick={() => this.showAddDtmplModel(config.id)}
+                    >
+                        {config.title}
+                    </Button>
+                </p>
+            );
+        });
+    };
+
+    addNewRow = (defaultValue) => {
+        const { value, fieldGroupConfig, onChange, onEditing } = this.props;
+        const { editings } = this.state;
+        let datas: DtmplData[] = [];
+        if (value) {
+            datas = [...value];
+        }
+        let fieldMaps = [];
+        if (!defaultValue) {
+            const defObj = {};
+            for (let f of fieldGroupConfig.fields) {
+                if (f.defaultValue) {
+                    defObj[f.id] = f.defaultValue;
+                }
+            }
+            // 添加一行设置默认值
+            fieldMaps = [defObj];
+        } else if (Array.isArray(defaultValue)) {
+            fieldMaps = defaultValue;
+        } else {
+            fieldMaps = [defaultValue]
+        }
+
+        let editingCodes = [...editings];
+        let i = 0;
+        for (let f of fieldMaps) {
+
+            let newData: DtmplData = {};
+            newData.editStatus = "new";
+            newData.code = Date.now() + "" + i++;
+            newData.relationLabel = fieldGroupConfig.relationNames[0]
+            newData.fieldMap = f;
+            if (fieldGroupConfig.addRowPosition && fieldGroupConfig.addRowPosition === 'end') {
+                datas.push(newData);
+            } else {
+                datas.unshift(newData);
+            }
+            editingCodes.push(newData.code);
+        }
+
+        this.setState({ editings: editingCodes })
+        onChange(fieldGroupConfig, datas);
+        if (onEditing) {
+            onEditing(editingCodes.length > 0);
+        }
+    }
+
+    editRowEdit = (code) => {
+        const { editings } = this.state;
+        const { onEditing } = this.props;
+        let edis = [...editings, code];
+        this.setState({ editings: edis });
+        if (onEditing) {
+            onEditing(edis.length > 0);
+        }
+    }
+
+    cancelRowEdit = (code: string) => {
+        const { onEditing } = this.props
+        const { editings } = this.state
+        let arr = editings.filter(item => item !== code);
+        this.setState({ editings: [...arr] });
+        if (onEditing) {
+            onEditing(arr.length > 0);
+        }
+    }
+
+    // 单独提交
+    postDtmplData = async (dtmplData, record: DtmplData) => {
+        const { fieldGroupConfig, serverKey, onChange, value } = this.props;
+        const sourceId = fieldGroupConfig.id;
+        const { code, editStatus } = record;
+        if (editStatus !== "new") { //editStatus 为new时，是新增实体模版，不传code
+            dtmplData["唯一编码"] = code;
+        }
+        let res = await HcserviceV3.postDtmplData(
+            serverKey,
+            sourceId,
+            dtmplData,
+            message
+        );
+        if (res.status === "success") {
+            this.cancelRowEdit(editStatus !== "new" ? res.code : code);
+            if (editStatus === "new") {
+                onChange(fieldGroupConfig, value.filter(item => item.code !== code)); // 单独提交添加成功后，删除原未保存的数据
+                setTimeout(() => this.handleDtmplAdd(res.code), 100);
+            } else {
+                this.handleDtmplEdit(res.code);
+            }
+        }
+    };
+
+    saveRowData = async (record: DtmplData) => {
+        const { fieldGroupConfig } = this.props;
+        const { code } = record;
+        let currentForm = this.formRef.current;
+        let dtmplData: DtmplData = { code };
+        dtmplData.fieldMap = {};
+        dtmplData.editStatus = "changed";
+        await currentForm.validateFields().then(async (values) => {
+            for (let key in values) {
+                if (values.hasOwnProperty(key) && key.startsWith(code)) {
+                    dtmplData.fieldMap[key.split("_")[1]] = values[key];
+                }
+            }
+            if (fieldGroupConfig.submitType === "separate") {
+                // 单独提交
+                this.postDtmplData(dtmplData.fieldMap, record);
+            } else {
+                this.cancelRowEdit(code);
+                this.handleRowEdit(dtmplData);
+            }
+        }).catch(errorInfo => {
+        })
+    }
+
+    // 单列、双列表单添加编辑
+    handleColData = (record: DtmplData) => {
+        const { fieldGroupConfig } = this.props;
+        if (fieldGroupConfig.submitType === "separate") {
+            // 单独提交
+            this.postDtmplData(record.fieldMap, record);
+        } else {
+            this.handleRowEdit(record);
+        }
+    }
+
+
+
+    uploadFiles = (values) => {
+
+        const { batchAddFileField } = this.props.fieldGroupConfig
+        if (values) {
+
+            let uploading = false;
+            let vals = JSON.parse(values);
+            for (let value of vals) {
+                if (!value.status || value.status != "done") {
+                    uploading = true;
+                }
+            }
+            let datas = [];
+            if (!uploading) {
+                for (let value of vals) {
+                    let data = {};
+                    data[batchAddFileField.id] = JSON.stringify(value);
+                    datas.push(data);
+                }
+                this.addNewRow(datas);
+                this.setState({ uploadingFiles: [] })
+            } else {
+                this.setState({ uploadingFiles: values })
+            }
+        }
+    }
+
+    // 处理fieldConfig，添加exceptCodes
+    handleFieldConfig = () => {
+        const { fieldGroupConfig, value } = this.props;
+        const fields = fieldGroupConfig.fields.map(field => {
+            if (!field || !value || !field.relDeduplication) {
+                return field;
+            }
+            const exceptCodes = value.map(item => {
+                let val = item.fieldMap[field.id];
+                if (val?.includes("@R@")) {
+                    return val.split("@R@")[0];
+                }
+                return val;
+            }).filter(Boolean);
+            return { ...field, exceptCodes };
+        });
+        return { ...fieldGroupConfig, fields };
+    }
+
+    buildButtons = () => {
+        const { fieldGroupConfig, viewOrEdit, value, serverKey } = this.props;
+        const { translate } = this.context;
+        const { buttons, disabled, addOrEditType, batchAddFileField } = fieldGroupConfig;
+        const { uploadingFiles } = this.state;
+        const temFieldGroupConfig = this.handleFieldConfig();
+
+        const buttonDisabled: boolean = disabled
+            ? disabled
+            : fieldGroupConfig.max
+                ? fieldGroupConfig.max <= (value ? value.length : 0)
+                : false;
+
+        if (viewOrEdit == "edit") {
+            return (
+                <Row>
+                    <Col span={20}>
+                        <Space>
+                            {buttons.includes("rowAdd") ? (
+                                addOrEditType == "tableRow" ?
+                                    <>
+                                        <Button
+                                            onClick={() => this.addNewRow(undefined)}>{translate("${添加一行}")}</Button>
+                                        {batchAddFileField ?
+                                            <EntryControl value={uploadingFiles} onChange={this.uploadFiles}
+                                                fieldConfig={{ controlType: "relfile" }} /> : ""}
+                                    </> :
+                                    <PopoverEditor
+                                        serverKey={serverKey}
+                                        disabled={buttonDisabled}
+                                        buttonStyle={{ marginBottom: 10 }}
+                                        buttonTitle={translate("${新建一行}")}
+                                        fieldGroupConfig={temFieldGroupConfig}
+                                        onOk={this.handleColData}
+                                    />
+                            ) : (
+                                ""
+                            )}
+                            {buttons.includes("dtmplAdd") ? (
+                                fieldGroupConfig.classAddConfigs &&
+                                    fieldGroupConfig.classAddConfigs.length > 0 ? (
+                                    <Popover
+                                        arrow={false}
+                                        content={this.getAddTmplButton(
+                                            fieldGroupConfig.classAddConfigs
+                                        )}
+                                        placement="bottomRight"
+                                    >
+                                        <Tooltip>
+                                            <Button icon={<PlusSquareOutlined />}>
+                                                {translate("${新增}")}
+                                            </Button>
+                                        </Tooltip>
+                                    </Popover>
+                                ) : (
+                                    <Button
+                                        disabled={buttonDisabled}
+                                        icon={<PlusSquareOutlined />}
+                                        size="small"
+                                        onClick={() => this.showAddDtmplModel()}
+                                        style={{ marginBottom: 10 }}
+                                    >
+                                        {translate("${新增}")}
+                                    </Button>
+                                )
+                            ) : (
+                                ""
+                            )}
+                            {buttons.includes("selectAdd") ? (
+                                <Button
+                                    disabled={buttonDisabled}
+                                    type="primary"
+                                    icon={<SnippetsOutlined />}
+                                    size="small"
+                                    onClick={this.showSelect}
+                                    style={{ marginBottom: 10 }}
+                                >
+                                    {translate("${选择}")}
+                                </Button>
+                            ) : (
+                                ""
+                            )}
+                            {fieldGroupConfig.min && (!value || value.length <= 0) ? (
+                                <Text style={{ color: "red" }}>
+                                    {translate("${请选择或添加}")}
+                                    {translate("${" + fieldGroupConfig.title + "}")}
+                                </Text>
+                            ) : null}
+                            <FormItem
+                                name={"$virtual" + fieldGroupConfig.id}
+                                style={{ margin: 0, maxHeight: "32px" }}
+                                rules={
+                                    fieldGroupConfig.min
+                                        ? [
+                                            {
+                                                required: true,
+                                                message: ``,
+                                            },
+                                        ]
+                                        : null
+                                }
+                            >
+                                <CountingTag
+                                    min={fieldGroupConfig.min + ""}
+                                    style={{ marginBottom: 10 }}
+                                    count={value ? value.length : 0}
+                                    value={value}
+                                ></CountingTag>
+                            </FormItem>
+                        </Space>
+                    </Col>
+                </Row>
+            );
+        } else {
+            return "";
+        }
+    };
+
+    render() {
+        const {
+            fieldGroupConfig,
+            value,
+            parentId,
+            loading,
+            initCollapse,
+            mainCode,
+            serverKey,
+            showRightNav, parentFormInstance, showCollapseCard
+        } = this.props;
+        const {
+            pageSize,
+            selectedCode,
+            showDtmplView,
+            showSelectTable,
+            showDtmplEdit,
+            addTmplId,
+            tableLoading,
+        } = this.state;
+        const { translate } = this.context;
+
+        const { buttons, viewModel } = fieldGroupConfig;
+        let mainCode1 = fieldGroupConfig.mainCode
+            ? fieldGroupConfig.mainCode
+            : mainCode
+                ? mainCode
+                : parentId;
+        let page = {
+            pageSize: pageSize,
+            hideOnSinglePage: true,
+            defaultCurrent: 1,
+            total: value ? value.length : undefined,
+            showTotal: (total) => {
+                return translate("${共}" + total + "${条}");
+            },
+        };
+        let exceptCodes = [];
+        if (value) {
+            for (let v of value) {
+                exceptCodes.push(v.code);
+            }
+        }
+
+        const renderEditTableList = <div className="editTableList">
+            {this.buildButtons()}
+            {viewModel && viewModel === "verticalList" ? <VerticalList
+                dataSource={this.buildDataSource()}
+                columnConfigs={fieldGroupConfig?.fields}
+                serverKey={serverKey}
+                columns={this.buildColumns()} /> :
+                <AntdForm ref={this.formRef} component={false}>
+                    <Table
+                        size={"small"}
+                        locale={{
+                            emptyText: (
+                                <div style={{ textAlign: "center", width: "100%" }}>
+                                    <Text disabled>{translate("${暂无数据}...")}</Text>
+                                </div>
+                            ),
+                        }}
+                        bordered
+                        loading={tableLoading}
+                        dataSource={this.buildDataSource()}
+                        columns={this.buildColumns()}
+                        pagination={page}
+                        onChange={this.tabChange}
+                    /></AntdForm>}
+        </div>;
+
+        console.log("showCollapseCard", showCollapseCard);
+
+        return fieldGroupConfig.displayConfig.includes("nonDataNonDisplayed") &&
+            (!value || value.length <= 0) ? "" : (
+            <>
+                {showCollapseCard ?
+                    <CollapseCard
+                        showRightNav={showRightNav}
+                        initCollapse={initCollapse || fieldGroupConfig.displayConfig.includes("folded")}
+                        title={fieldGroupConfig.title}
+                        tip={fieldGroupConfig.tip}
+                        id={parentId + fieldGroupConfig.id}
+                        className="hoverable"
+                        styles={{ header: { background: "#f2f4f5" }, body: { padding: "6px" } }}
+                        loading={loading}
+                    //暂时注释掉，后续要支持配置。
+                    //extra={<Input.Search onSearch={this.searchValue} allowClear placeholder=""/>}
+                    >
+                        {renderEditTableList}
+                    </CollapseCard> : renderEditTableList}
+                {buttons.includes("detail") ? (
+                    <ModalDtmplView
+                        serverKey={serverKey}
+                        mainCode={mainCode1}
+                        open={showDtmplView}
+                        onCancel={this.hiddenEntityView}
+                        sourceId={fieldGroupConfig.id}
+                        code={selectedCode}
+                    >
+                        {" "}
+                    </ModalDtmplView>
+                ) : ""}
+                {buttons.includes("dtmplEdit") || buttons.includes("dtmplAdd") ? (
+                    <DtmplEditPage
+                        addTmplId={addTmplId}
+                        serverKey={serverKey}
+                        mainCode={mainCode1}
+                        open={showDtmplEdit}
+                        onCancel={this.hiddenEntityEdit}
+                        sourceId={fieldGroupConfig.id}
+                        code={selectedCode}
+                        parentFormInstance={parentFormInstance}
+                        onOk={selectedCode ? this.handleDtmplEdit : this.handleDtmplAdd}
+                    />
+                ) : ""}
+                {buttons.includes("selectAdd") ? (
+                    <ModelSelectTable
+                        serverKey={serverKey}
+                        defaultCriteriaValue={fieldGroupConfig.defaultCriteriaValue}
+                        maxSelectedRows={fieldGroupConfig.max}
+                        open={showSelectTable}
+                        onOK={this.select}
+                        onCancel={() => {
+                            this.setState({ showSelectTable: false });
+                        }}
+                        exceptCodes={exceptCodes}
+                        mainCode={mainCode1}
+                        sourceId={fieldGroupConfig.id}
+                        selectRelValueField={fieldGroupConfig.selectRelValueField}
+                        parentFormInstance={parentFormInstance}
+                    />
+                ) : ""}
+            </>
+        );
+    }
+}
+
+export default RelationTable;