@/utils/utils#renderForeignKey JavaScript Examples
The following examples show how to use
@/utils/utils#renderForeignKey.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addPermission({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updatePermission(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removePermission(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'name',
dataIndex: 'name',
rules: [
{
required: true,
message: 'name为必填项',
},
],
},
{
title: 'content_type',
dataIndex: 'content_type',
rules: [
{
required: true,
message: 'content_type为必填项',
},
],
renderFormItem: (item, {value, onChange}) => {
return dealForeignKeyField(item, value, onChange, content_typeForeignKeyList);
},
render: (text, record) => {
return renderForeignKey(text, content_typeVerboseNameMap);
},
},
{
title: 'codename',
dataIndex: 'codename',
rules: [
{
required: true,
message: 'codename为必填项',
},
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除permission吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryPermissionDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryPermissionListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [content_typeForeignKeyList, setContent_typeForeignKeyList] = useState([]);
useEffect(() => {
queryContentType({all: 1}).then(value => {
setContent_typeForeignKeyList(value);
});
}, []);
const [content_typeVerboseNameMap, setContent_typeVerboseNameMap] = useState([]);
useEffect(() => {
queryContentTypeVerboseName().then(value => {
setContent_typeVerboseNameMap(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="permission表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryPermission, table_columns, 'permission-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索permission" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'permission-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryPermission({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
