在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;
最后的效果如下图：
