aldehyde 0.0.2 → 0.0.3

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

@@ -1,600 +0,0 @@
-import React from 'react'
-import {Button, Input, message, Table, Tooltip} from 'antd';
-import {
-    AlignLeftOutlined,
-    DeleteOutlined,
-    EditOutlined,
-    FormOutlined,
-    PlusSquareOutlined,
-    SnippetsOutlined
-} from '@ant-design/icons';
-import "./index.css";
-import {DtmplData, 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 ModalDtmplEdit from '../detail/edit/modal-dtmpl-edit'
-import ModelSelectTable from './modal-select-table';
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import CollapseCard from '../controls/collapse-card'
-import RowEditor from '../detail/edit/row-editor'
-import Action from "../controls/action";
-
-interface RelationTableProps {
-    parentId: string,
-    loading: boolean,
-    viewOrEdit: ViewOrEdit,
-    refreshId?: string;
-    fieldGroupConfig: FieldGroupConfig;
-    value: DtmplData[];
-    onChange?: (fieldGroupConfig: FieldGroupConfig, value: DtmplData[]) => void;
-    initCollapse?: boolean,
-};
-
-interface RelationTableStat {
-    selectedCode: string,
-    showDtmplView: boolean,
-    showDtmplEdit: boolean,
-    showSelectTable: boolean,
-    tableLoading: boolean,
-    showRowEdit: boolean,
-    selectedDtmplData: DtmplData,
-    filterStr: string,
-};
-
-
-class RelationTable extends React.PureComponent<RelationTableProps, RelationTableStat> {
-
-    state = {
-        showDtmplView: false,
-        selectedCode: undefined,
-        showSelectTable: false,
-        showDtmplEdit: false,
-        tableLoading: false,
-        showRowEdit: false,
-        selectedDtmplData: undefined,
-        filterStr: undefined,
-        // columns:[],
-        // dataSource:[],
-        // current:1,
-        // title:undefined,
-    }
-
-    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 != preFieldGroupConfig) {
-        //     if (fieldGroupConfig.displayConfig.includes('folded')) {
-        //         this.setState({
-        //             collapse: true,
-        //         })
-        //     }
-        // }
-    }
-
-    buildDataSource = () => {
-
-        const {filterStr} = this.state;
-        const {viewOrEdit, value, fieldGroupConfig} = this.props;
-        const {title, buttons, fields, showRelationName, relationNames, showRowNum} = fieldGroupConfig;
-
-        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: index,
-                        relationLabel: item.relationLabel,
-                        code: item.code,//增加code,为了删除操作
-                        ...item.fieldMap
-                    };
-                    dataSource.push(row);
-                }
-            })
-        }
-
-        return dataSource;
-
-    }
-
-    buildColumns = () => {
-
-        const {viewOrEdit, value, fieldGroupConfig} = this.props;
-        const {title, buttons, fields, showRelationName, relationNames, showRowNum} = fieldGroupConfig;
-        let columns = [];
-        /** 构建column **/
-        let s = 0;
-        fields.forEach((item) => {
-            let column = {};
-            columns.push(column);
-            column['title'] = item.title;
-            column['dataIndex'] = item.id;
-            s++;
-            let itemType = SupportInputTypes.getControlType(item, null);
-            if (s < 10) {
-                TableUnits.sort(column, itemType);
-            }
-            column['render'] = (text, record) => {
-                return <ViewControl holderType={'table'} fieldConfig={item} value={record[item.id]}/>
-            }
-        });
-        if (showRelationName) {//判断是否有关系属性
-            let rela = {
-                dataIndex: "relationLabel",
-                name: "relation",
-                title: "关系",
-                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('delete');
-
-
-        if (viewOrEdit == 'edit' && (viewable || rowEdit || dtmplEdit || deletable)) {
-            const actionColumn = {};
-            columns.push(actionColumn);
-            actionColumn['title'] = '操作';
-            actionColumn['fixed'] = "right";
-            actionColumn['key'] = "action";
-            actionColumn['render'] = (record) => {
-                return <div className="actionbtn">
-                    {/*详情*/}
-                    {viewable ?
-                        <Button
-                            title="当前实体"
-                            type='primary'
-                            icon={<AlignLeftOutlined/>}
-                            size="small"
-                            onClick={() => this.showEntityView(record)}
-                        ></Button> : ""}
-                    {/*模板编辑*/}
-                    {dtmplEdit ?
-                        <Button
-                            title="编辑当实体"
-                            type='primary'
-                            icon={<FormOutlined/>}
-                            size="small"
-                            onClick={() => this.showEditDtmplModel(record)}
-                        ></Button> : ""}
-                    {fieldGroupConfig.rowActions && fieldGroupConfig.rowActions.length > 0 ?
-                        fieldGroupConfig.rowActions.map((action) => {
-                            return <Action key={action.id} data={[record]} actionConfig={action}  doAction={this.doRowAction} buttonSize={'small'}  ></Action>
-                        }) : ""}
-                    {/*行编辑*/}
-                    {rowEdit ?
-                        // <Popover placement="leftBottom"   content={<RowEditCard fieldGroupConfig={fieldGroupConfig} dtmplData={this.getRowEditData(record.code)} onOk={this.handleRowEdit}  ></RowEditCard>} trigger="click">
-                        // <Tooltip placement="left" title="编辑当前行">
-                        //     <Button
-                        //         type='primary'
-                        //         icon={<EditOutlined/>}
-                        //         size="small"
-                        //         // onClick={() => {
-                        //         //     this.showRowEditModel(record.code)
-                        //         // }}
-                        //     ></Button> </Tooltip></Popover>
-                        <RowEditor buttonIcon={<EditOutlined/>} dtmplData={this.getRowEditData(record.code)}
-                                   fieldGroupConfig={fieldGroupConfig}
-                                   onOk={this.handleRowEdit}
-                                   tooltipTitle={"编辑当前行"}></RowEditor> : ""}
-                    {/*删除*/}
-                    {deletable ?
-                        <Tooltip placement="right" title="删除当前行">
-                            <Button
-                                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['title'] = '操作';
-            actionColumn['fixed'] = "right";
-            actionColumn['key'] = "action";
-            actionColumn['render'] = (record) => {
-                return <div className="actionbtn">
-                    {/*详情*/}
-                    {viewable ?
-                        <Button
-                            title="当前实体"
-                            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 result: boolean = await HcserviceV3.postActions( 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,
-        });
-    }
-
-    editRow = (record) => {
-
-    }
-    delete = (record) => {
-        const {value, fieldGroupConfig, onChange} = this.props;
-        //追加
-        const selectdDatas = [];
-        if (value) {
-            for (let v of value) {
-                if (v.code != record.code) {
-                    selectdDatas.push(v);
-                }
-            }
-        }
-        onChange(fieldGroupConfig, selectdDatas);
-    }
-
-
-    searchValue = (filterStr: string) => {
-        this.setState({
-            filterStr
-        })
-    }
-
-    tabChange = () => {
-
-    }
-
-    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} = this.props;
-        const {title, fields, showRelationName, relationNames, showRowNum} = fieldGroupConfig;
-        this.setState({
-            tableLoading: true,
-        })
-        let selectdDatas: DtmplData[] = await HcserviceV3.requestSelectedData(fieldGroupConfig.id, codes);
-
-        //添加默认关系
-        if (selectdDatas) {
-            for (let d of selectdDatas) {
-                d['relationLabel'] = relationNames[0];
-            }
-        }
-
-        //追加
-        if (value) {
-            selectdDatas.unshift(...value);
-        }
-
-        onChange(fieldGroupConfig, selectdDatas);
-        this.setState({
-            tableLoading: false,
-        })
-    }
-
-    // edit = async (code: string) => {
-    //
-    // }
-
-    // showRowEditModel = (code?: string) => {
-    //     const {value} = this.props;
-    //     let selectedDtmplData = undefined;
-    //     if (code) {
-    //         for (let dtmplData of value) {
-    //             if (code == dtmplData.code) {
-    //                 selectedDtmplData = dtmplData;
-    //                 break;
-    //             }
-    //         }
-    //     }
-    //     this.setState({
-    //         showRowEdit: true,
-    //         selectedDtmplData,
-    //     })
-    // }
-
-    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) => {
-        this.setState({
-            showDtmplEdit: false,
-        })
-        await this.add([code]);
-    }
-
-    handleDtmplEdit = async (code: string) => {
-        const {value, fieldGroupConfig, onChange} = this.props;
-        const {title, fields, showRelationName, relationNames, showRowNum} = fieldGroupConfig;
-        this.setState({
-            tableLoading: true,
-            showDtmplEdit: false,
-        })
-        let data: DtmplData = (await HcserviceV3.requestSelectedData(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;
-                v.editStatus = dtmplData.editStatus;
-                v.fieldMap = dtmplData.fieldMap;
-                v.relationLabel = dtmplData.relationLabel;
-                break;
-            }
-        }
-        if (isAdd) {
-            datas.unshift(dtmplData);
-        }
-        onChange(fieldGroupConfig, datas);
-        if (isAdd) {
-            message.success('已添加');
-        } else {
-            message.success('已修改');
-        }
-        //this.hiddenRowEdit();
-    }
-
-    showAddDtmplModel = () => {
-        this.setState({
-            showDtmplEdit: true,
-            selectedCode: undefined,
-        })
-    }
-    showEditDtmplModel = (record) => {
-        this.setState({
-            showDtmplEdit: true,
-            selectedCode: record.code,
-        })
-    }
-
-    buildButtons = () => {
-        const {fieldGroupConfig, viewOrEdit, value} = this.props;
-        const {buttons} = fieldGroupConfig;
-        const {showRowEdit} = this.state;
-        const buttonDisabled: boolean = fieldGroupConfig.max ? fieldGroupConfig.max <= (value ? value.length : 0) : false;
-
-        if (viewOrEdit == 'edit') {
-            return <>
-                {buttons.includes('rowAdd') ?
-                    // <Popover placement="rightBottom"   content={<RowEditCard fieldGroupConfig={fieldGroupConfig} onOk={this.handleRowEdit}  ></RowEditCard>} trigger="click">
-                    //                     // <Button
-                    //                     //     disabled={buttonDisabled}
-                    //                     //     type='primary'
-                    //                     //     icon={<PlusOutlined/>}
-                    //                     //     size="small"
-                    //                     //     // onClick={() => {
-                    //                     //     //     this.showRowEditModel()
-                    //                     //     // }}
-                    //                     //     style={{marginBottom: 10, marginRight: 10}}
-                    //                     // >新建一行</Button></Popover>
-                    <RowEditor buttonStyle={{marginBottom: 10, marginRight: 10}} buttonTitle={"新建一行"}
-                               fieldGroupConfig={fieldGroupConfig}
-                               onOk={this.handleRowEdit}
-                    ></RowEditor>
-                    : ''}
-                {buttons.includes('dtmplAdd') ?
-                    <Button
-                        disabled={buttonDisabled}
-                        type='primary'
-                        icon={<PlusSquareOutlined/>}
-                        size="small"
-                        onClick={this.showAddDtmplModel}
-                        style={{marginBottom: 10, marginRight: 10}}
-                    >新增</Button> : ""}
-                {buttons.includes('selectAdd') ?
-                    <Button
-                        disabled={buttonDisabled}
-                        type='primary'
-                        icon={<SnippetsOutlined/>}
-                        size="small"
-                        onClick={this.showSelect}
-                        style={{marginBottom: 10, marginRight: 10}}
-                    >选择</Button> : ""}
-            </>
-        } else {
-            return "";
-        }
-    }
-
-    // hiddenRowEdit = () => {
-    //     this.setState({
-    //         showRowEdit: false,
-    //     })
-    // }
-
-    render() {
-
-        const {fieldGroupConfig, value, parentId, loading, initCollapse} = this.props;
-        const {selectedCode, showDtmplView, showSelectTable, showDtmplEdit, tableLoading, showRowEdit, selectedDtmplData} = this.state;
-
-        const {buttons} = fieldGroupConfig;
-        let page = {
-            pageSize: 10,
-            hideOnSinglePage: true,
-            defaultCurrent: 1,
-            total: value ? value.length : undefined,
-            showTotal: (total) => {
-                return `总共有${total}条`;
-            }
-        }
-        let exceptCodes = [];
-        if (value) {
-            for (let v of value) {
-                exceptCodes.push(v.code);
-            }
-        }
-
-
-        return (
-            fieldGroupConfig.displayConfig.includes('nonDataNonDisplayed') && (!value || value.length <= 0) ? "" :
-                <>
-                    <CollapseCard
-                        initCollapse={initCollapse || fieldGroupConfig.displayConfig.includes('folded')}
-                        title={fieldGroupConfig.title}
-                        id={parentId + fieldGroupConfig.id}
-                        className={`hoverable`}
-                        headStyle={{background: "#f2f4f5"}}
-                        loading={loading}
-                        extra={<Input.Search onSearch={this.searchValue} allowClear placeholder="关键字搜索"/>
-                        }
-                    >
-                        <div className="editTableList">
-                            {this.buildButtons()}
-                            <Table scroll={{scrollToFirstRowOnChange: false}}
-                                   bordered
-                                   loading={tableLoading}
-                                   dataSource={this.buildDataSource()}
-                                   columns={this.buildColumns()}
-                                   pagination={page}
-                                   onChange={this.tabChange}
-                            />
-                        </div>
-                    </CollapseCard>
-                    {buttons.includes('detail') ?
-                        <ModalDtmplView visible={showDtmplView} onCancel={this.hiddenEntityView}
-                                        sourceId={fieldGroupConfig.id}
-                                        code={selectedCode}> </ModalDtmplView> : ""}
-                    {buttons.includes('dtmplEdit') || buttons.includes('dtmplAdd') ?
-                        <ModalDtmplEdit visible={showDtmplEdit} onCancel={this.hiddenEntityEdit}
-                                        sourceId={fieldGroupConfig.id}
-                                        code={selectedCode}
-                                        onOk={selectedCode ? this.handleDtmplEdit : this.handleDtmplAdd}> </ModalDtmplEdit>
-                        : ""}
-                    {/*{buttons.includes('rowEdit') || buttons.includes('rowAdd') ?*/}
-                    {/*    <ModalRowEdit visible={showRowEdit} onCancel={this.hiddenRowEdit}*/}
-                    {/*                  onOk={this.handleRowEdit} dtmplData={selectedDtmplData}*/}
-                    {/*                  fieldGroupConfig={fieldGroupConfig}> </ModalRowEdit>*/}
-                    {/*    : ""}*/}
-                    {buttons.includes('selectAdd') ?
-                        <ModelSelectTable maxSelectedRows={fieldGroupConfig.max} visible={showSelectTable}
-                                          onOK={this.select} onCancel={() => {
-                            this.setState({showSelectTable: false})
-                        }} exceptCodes={exceptCodes}
-                                          sourceId={fieldGroupConfig.id}></ModelSelectTable> : ""}
-
-                </>
-        );
-    }
-}
-
-export default RelationTable;