aldehyde 0.0.1

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

@@ -0,0 +1,600 @@
+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;