aldehyde 0.2.196 → 0.2.198

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

@@ -1,855 +1,855 @@
-import React from "react";
-import {
-  Button,
-  Col,
-  Form,
-  message,
-  Popover,
-  Row,
-  Space,
-  Tooltip,
-  Typography,Popconfirm,
-} from "antd";
-import Table from "./control-table-x-axis-wrapper";
-import {
-  AlignLeftOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  FormOutlined,
-  PlusSquareOutlined,
-  SnippetsOutlined,
-} from "@ant-design/icons";
-import "./index.css";
-import {
-  ClassAddConfig,
-  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 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 RowEditor from "../detail/edit/row-editor";
-import Action from "../controls/action";
-import CountingTag from "../controls/counting-tag";
-import { LocaleContext } from "../locale/LocaleProvider";
-
-const FormItem = Form.Item;
-const { Text } = Typography;
-
-interface RelationTableProps {
-  showRightNav?: boolean;
-  mainCode?: string;
-  serverKey?: string;
-  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;
-  pageSize?: number;
-  addTmplId?: 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,
-    pageSize: 10,
-    addTmplId: undefined,
-    // columns:[],
-    // dataSource:[],
-    // current:1,
-    // title:undefined,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-  static defaultProps = {};
-
-  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: index,
-            relationLabel: item.relationLabel,
-            code: item.code, //增加code,为了删除操作
-            ...item.fieldMap,
-          };
-          dataSource.push(row);
-        }
-      });
-    }
-
-    return dataSource;
-  };
-
-  buildColumns = () => {
-    const { viewOrEdit, value, fieldGroupConfig, serverKey } = this.props;
-    const {
-      title,
-      buttons,
-      fields,
-      showRelationName,
-      relationNames,
-      showRowNum,
-      disabled,
-      deleteData,
-    } = fieldGroupConfig;
-    const { translate } = this.context;
-    let columns = [];
-    /** 构建column **/
-    let s = 0;
-    fields.forEach((item) => {
-      let column = {};
-      columns.push(column);
-      column["title"] = translate("${" + item.title + "}");
-      column["dataIndex"] = item.id;
-      s++;
-      let itemType = SupportInputTypes.getControlType(item, null);
-      // if (s == 1) {
-      //     TableUnits.sort(column, itemType, 'ascend');
-      // } else
-      if (s < 12 && item.sortable) {
-        TableUnits.sort(column, itemType);
-      }
-      column["render"] = (text, record) => {
-        return (
-          <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["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 ? (
-              <RowEditor
-                serverKey={serverKey}
-                disabled={disabled}
-                buttonIcon={<EditOutlined />}
-                dtmplData={this.getRowEditData(record.code)}
-                fieldGroupConfig={fieldGroupConfig}
-                onOk={this.handleRowEdit}
-                tooltipTitle={translate("${编辑}${当前行}")}
-              ></RowEditor>
-            ) : (
-              ""
-            )}
-            {/*删除*/}
-            {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["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,
-    });
-  };
-
-  editRow = (record) => {};
-  delete =async (record) => {
-    const { value, fieldGroupConfig, onChange,serverKey } = this.props;
-    //追加
-    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]);
-    }
-    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) {
-      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) => {
-    this.setState({
-      showDtmplEdit: false,
-    });
-    await this.add([code]);
-  };
-
-  handleDtmplEdit = async (code: string) => {
-    const { value, fieldGroupConfig, onChange } = this.props;
-    const {
-      title,
-      fields,
-      showRelationName,
-      relationNames,
-      showRowNum,
-      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;
-    const { translate } = this.context;
-    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);
-
-    //console.log("handleRowEdit data:",datas);
-
-    if (isAdd) {
-      message.success(translate("${已添加}"));
-    } else {
-      message.success(translate("${已修改}"));
-    }
-    //this.hiddenRowEdit();
-  };
-
-  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>
-      );
-    });
-  };
-
-  buildButtons = () => {
-    const { fieldGroupConfig, viewOrEdit, value, serverKey } = this.props;
-    const { translate } = this.context;
-    const { buttons, disabled } = fieldGroupConfig;
-    const { showRowEdit } = this.state;
-
-    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") ? (
-                <RowEditor
-                  serverKey={serverKey}
-                  disabled={buttonDisabled}
-                  buttonStyle={{ marginBottom: 10 }}
-                  buttonTitle={translate("${新建一行}")}
-                  fieldGroupConfig={fieldGroupConfig}
-                  onOk={this.handleRowEdit}
-                ></RowEditor>
-              ) : (
-                ""
-              )}
-              {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 "";
-    }
-  };
-
-  // hiddenRowEdit = () => {
-  //     this.setState({
-  //         showRowEdit: false,
-  //     })
-  // }
-
-  render() {
-    const {
-      fieldGroupConfig,
-      value,
-      parentId,
-      loading,
-      initCollapse,
-      mainCode,
-      serverKey,
-      showRightNav,
-    } = this.props;
-    const {
-      pageSize,
-      selectedCode,
-      showDtmplView,
-      showSelectTable,
-      showDtmplEdit,
-      addTmplId,
-      tableLoading,
-      showRowEdit,
-      selectedDtmplData,
-    } = this.state;
-    const { translate } = this.context;
-
-    const { buttons } = 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);
-      }
-    }
-
-    return fieldGroupConfig.displayConfig.includes("nonDataNonDisplayed") &&
-      (!value || value.length <= 0) ? (
-      ""
-    ) : (
-      <>
-        <CollapseCard
-          showRightNav={showRightNav}
-          initCollapse={
-            initCollapse || fieldGroupConfig.displayConfig.includes("folded")
-          }
-          title={fieldGroupConfig.title}
-          tip={fieldGroupConfig.tip}
-          id={parentId + fieldGroupConfig.id}
-          className={`hoverable`}
-          headStyle={{ background: "#f2f4f5" }}
-          loading={loading}
-          bodyStyle={{ padding: "6px" }}
-          //暂时注释掉，后续要支持配置。
-          //extra={<Input.Search onSearch={this.searchValue} allowClear placeholder=""/>}
-        >
-          <div className="editTableList">
-            {this.buildButtons()}
-            <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}
-            />
-          </div>
-        </CollapseCard>
-        {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}
-            onOk={selectedCode ? this.handleDtmplEdit : this.handleDtmplAdd}
-          />
-        ) : (
-          ""
-        )}
-        {/*{buttons.includes('rowEdit') || buttons.includes('rowAdd') ?*/}
-        {/*    <ModalRowEdit open={showRowEdit} onCancel={this.hiddenRowEdit}*/}
-        {/*                  onOk={this.handleRowEdit} dtmplData={selectedDtmplData}*/}
-        {/*                  fieldGroupConfig={fieldGroupConfig}> </ModalRowEdit>*/}
-        {/*    : ""}*/}
-        {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}
-          ></ModelSelectTable>
-        ) : (
-          ""
-        )}
-      </>
-    );
-  }
-}
-
-export default RelationTable;
+import React from "react";
+import {
+  Button,
+  Col,
+  Form,
+  message,
+  Popover,
+  Row,
+  Space,
+  Tooltip,
+  Typography,Popconfirm,
+} from "antd";
+import Table from "./control-table-x-axis-wrapper";
+import {
+  AlignLeftOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  FormOutlined,
+  PlusSquareOutlined,
+  SnippetsOutlined,
+} from "@ant-design/icons";
+import "./index.css";
+import {
+  ClassAddConfig,
+  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 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 RowEditor from "../detail/edit/row-editor";
+import Action from "../controls/action";
+import CountingTag from "../controls/counting-tag";
+import { LocaleContext } from "../locale/LocaleProvider";
+
+const FormItem = Form.Item;
+const { Text } = Typography;
+
+interface RelationTableProps {
+  showRightNav?: boolean;
+  mainCode?: string;
+  serverKey?: string;
+  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;
+  pageSize?: number;
+  addTmplId?: 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,
+    pageSize: 10,
+    addTmplId: undefined,
+    // columns:[],
+    // dataSource:[],
+    // current:1,
+    // title:undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+  static defaultProps = {};
+
+  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: index,
+            relationLabel: item.relationLabel,
+            code: item.code, //增加code,为了删除操作
+            ...item.fieldMap,
+          };
+          dataSource.push(row);
+        }
+      });
+    }
+
+    return dataSource;
+  };
+
+  buildColumns = () => {
+    const { viewOrEdit, value, fieldGroupConfig, serverKey } = this.props;
+    const {
+      title,
+      buttons,
+      fields,
+      showRelationName,
+      relationNames,
+      showRowNum,
+      disabled,
+      deleteData,
+    } = fieldGroupConfig;
+    const { translate } = this.context;
+    let columns = [];
+    /** 构建column **/
+    let s = 0;
+    fields.forEach((item) => {
+      let column = {};
+      columns.push(column);
+      column["title"] = translate("${" + item.title + "}");
+      column["dataIndex"] = item.id;
+      s++;
+      let itemType = SupportInputTypes.getControlType(item, null);
+      // if (s == 1) {
+      //     TableUnits.sort(column, itemType, 'ascend');
+      // } else
+      if (s < 12 && item.sortable) {
+        TableUnits.sort(column, itemType);
+      }
+      column["render"] = (text, record) => {
+        return (
+          <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["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 ? (
+              <RowEditor
+                serverKey={serverKey}
+                disabled={disabled}
+                buttonIcon={<EditOutlined />}
+                dtmplData={this.getRowEditData(record.code)}
+                fieldGroupConfig={fieldGroupConfig}
+                onOk={this.handleRowEdit}
+                tooltipTitle={translate("${编辑}${当前行}")}
+              ></RowEditor>
+            ) : (
+              ""
+            )}
+            {/*删除*/}
+            {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["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,
+    });
+  };
+
+  editRow = (record) => {};
+  delete =async (record) => {
+    const { value, fieldGroupConfig, onChange,serverKey } = this.props;
+    //追加
+    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]);
+    }
+    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) {
+      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) => {
+    this.setState({
+      showDtmplEdit: false,
+    });
+    await this.add([code]);
+  };
+
+  handleDtmplEdit = async (code: string) => {
+    const { value, fieldGroupConfig, onChange } = this.props;
+    const {
+      title,
+      fields,
+      showRelationName,
+      relationNames,
+      showRowNum,
+      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;
+    const { translate } = this.context;
+    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);
+
+    //console.log("handleRowEdit data:",datas);
+
+    if (isAdd) {
+      message.success(translate("${已添加}"));
+    } else {
+      message.success(translate("${已修改}"));
+    }
+    //this.hiddenRowEdit();
+  };
+
+  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>
+      );
+    });
+  };
+
+  buildButtons = () => {
+    const { fieldGroupConfig, viewOrEdit, value, serverKey } = this.props;
+    const { translate } = this.context;
+    const { buttons, disabled } = fieldGroupConfig;
+    const { showRowEdit } = this.state;
+
+    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") ? (
+                <RowEditor
+                  serverKey={serverKey}
+                  disabled={buttonDisabled}
+                  buttonStyle={{ marginBottom: 10 }}
+                  buttonTitle={translate("${新建一行}")}
+                  fieldGroupConfig={fieldGroupConfig}
+                  onOk={this.handleRowEdit}
+                ></RowEditor>
+              ) : (
+                ""
+              )}
+              {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 "";
+    }
+  };
+
+  // hiddenRowEdit = () => {
+  //     this.setState({
+  //         showRowEdit: false,
+  //     })
+  // }
+
+  render() {
+    const {
+      fieldGroupConfig,
+      value,
+      parentId,
+      loading,
+      initCollapse,
+      mainCode,
+      serverKey,
+      showRightNav,
+    } = this.props;
+    const {
+      pageSize,
+      selectedCode,
+      showDtmplView,
+      showSelectTable,
+      showDtmplEdit,
+      addTmplId,
+      tableLoading,
+      showRowEdit,
+      selectedDtmplData,
+    } = this.state;
+    const { translate } = this.context;
+
+    const { buttons } = 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);
+      }
+    }
+
+    return fieldGroupConfig.displayConfig.includes("nonDataNonDisplayed") &&
+      (!value || value.length <= 0) ? (
+      ""
+    ) : (
+      <>
+        <CollapseCard
+          showRightNav={showRightNav}
+          initCollapse={
+            initCollapse || fieldGroupConfig.displayConfig.includes("folded")
+          }
+          title={fieldGroupConfig.title}
+          tip={fieldGroupConfig.tip}
+          id={parentId + fieldGroupConfig.id}
+          className={`hoverable`}
+          headStyle={{ background: "#f2f4f5" }}
+          loading={loading}
+          bodyStyle={{ padding: "6px" }}
+          //暂时注释掉，后续要支持配置。
+          //extra={<Input.Search onSearch={this.searchValue} allowClear placeholder=""/>}
+        >
+          <div className="editTableList">
+            {this.buildButtons()}
+            <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}
+            />
+          </div>
+        </CollapseCard>
+        {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}
+            onOk={selectedCode ? this.handleDtmplEdit : this.handleDtmplAdd}
+          />
+        ) : (
+          ""
+        )}
+        {/*{buttons.includes('rowEdit') || buttons.includes('rowAdd') ?*/}
+        {/*    <ModalRowEdit open={showRowEdit} onCancel={this.hiddenRowEdit}*/}
+        {/*                  onOk={this.handleRowEdit} dtmplData={selectedDtmplData}*/}
+        {/*                  fieldGroupConfig={fieldGroupConfig}> </ModalRowEdit>*/}
+        {/*    : ""}*/}
+        {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}
+          ></ModelSelectTable>
+        ) : (
+          ""
+        )}
+      </>
+    );
+  }
+}
+
+export default RelationTable;