编辑独立值集

在HZERO的值集配置中，可以配置独立值集，如下图：

现在有一个需求，就是在这个值集配置页面以外的地方可以进行编辑值集的操作。
所以，事不宜迟，现在就开始找寻方法吧。

打开浏览器的检查，发现上图的数据其实是通过这个接口请求而来：

观察一下返回的数据，发现接口中2067这个其实是对应lovId的，那么有什么方法可以通过lovCode来获取这个lovId呢？
我们回到值集配置的上一个页面中：

返回的数据中，就有我们需要的lovId了。

然后，在值集配置中尝试编辑独立值集的过程中，很容易发现编辑、删除、修改都是调用的同一个接口，只是请求方法不同，如下图：

所以，至此，所有的准备工作都已完成了，我们已经了解了整一个编辑独立值集过程中所需要的所有接口了。

接下来，就开始编码工作了，核心是一个dateSet，如下：

const modifyModalDS = () => ({
  transport: {
    read: ({ dataSet }) => {
      const { lovId } = dataSet.queryParameter;
      return {
        url: `${BASE_PATH}hpfm/v1/0/lov-headers/${lovId}/values?tenantId=0`,
        method: 'GET',
      };
    },
    create: ({ data, dataSet }) => {
      const { lovId, lovCode } = dataSet.queryParameter;

      const obj = data[0];
      obj.lovCode = lovCode;
      obj.lovId = lovId;
      obj.tenantId = currentTenantId;

      return {
        url: `${BASE_PATH}hpfm/v1/0/lov-values`,
        data: obj,
        method: 'POST',
      };
    },
    update: ({ data }) => {
      return {
        url: `${BASE_PATH}hpfm/v1/0/lov-values`,
        data: data[0],
        method: 'PUT',
      };
    },
    destroy: ({ data }) => {
      return {
        url: `${BASE_PATH}hpfm/v1/0/lov-values`,
        data,
        method: 'DELETE',
      };
    },
  },
  fields: [
    {
      name: 'meaning',
      type: 'string',
      label: '含义',
    },
    {
      name: 'orderSeq',
      type: 'number',
      label: '排序号',
    },
    {
      name: 'tenantId',
      type: 'number',
      label: 'tenantId',
    },
    {
      name: 'value',
      type: 'string',
      label: '值',
    },
    {
      name: '_token',
      type: 'string',
      label: '_token',
    },
  ],
});

然后，把它做成一个弹出框的表格：

export function showModifyModal({ dataSet, title, lovId, lovCode }) {
  const tableDS = new DataSet({
    ...dataSet(),
  });
  Modal.open({
    style: { ...constants.MODAL_DEFAULT_POSITION, width: '9.5rem' },
    title,
    closable: true,
    destroyOnClose: true,
    children: (
      <>
        <ModifyTable tableDS={tableDS} lovId={lovId} lovCode={lovCode} />
      </>
    ),
  });
}

其中的ModifyTable中代码如下：

import React, { Component } from 'react';
import { connect } from 'dva';
import { Bind } from 'lodash-decorators';
import { getCurrentOrganizationId } from 'utils/utils';
import { Table } from 'choerodon-ui/pro';

const organizationId = getCurrentOrganizationId();

@connect()
class ModifyTable extends Component {
  componentDidMount() {
    const { tableDS, lovId, lovCode } = this.props;
    if (lovId) {
      tableDS.setQueryParameter('lovId', lovId);
      tableDS.query();
      tableDS.setQueryParameter('lovCode', lovCode);
    }
  }

  get lineButtons() {
    return [['add'], ['delete']];
  }

  /**
   * 行新建
   */
  @Bind()
  handleCreateLine() {
    const { selectHeadData, lineDataSet } = this.props;
    if (selectHeadData) {
      lineDataSet.create({ doId: selectHeadData, tenantId: organizationId }, 0);
    }
  }

  get lineColumns() {
    return [
      {
        name: 'value',
        editor: true,
      },
      {
        name: 'meaning',
        editor: true,
      },
      {
        name: 'orderSeq',
        editor: true,
      },
      {
        header: '操作',
        command: () => ['edit'],
      },
    ];
  }

  render() {
    const { tableDS } = this.props;
    return (
      <Table
        dataSet={tableDS}
        buttons={this.lineButtons}
        columns={this.lineColumns}
        editMode="inline"
      />
    );
  }
}

export default ModifyTable;

最后的效果如下图：