index.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import SearchComponent from '@/components/SearchComponent';
  2. import type { ActionType, ProColumns } from '@jetlinks/pro-table';
  3. import ProTable from '@jetlinks/pro-table';
  4. import { useRef, useState } from 'react';
  5. import Service from '@/pages/system/Relationship/service';
  6. import { PageContainer } from '@ant-design/pro-layout';
  7. import { PermissionButton } from '@/components';
  8. import { useIntl } from 'umi';
  9. import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
  10. import { message } from 'antd';
  11. import Save from './Save';
  12. export const service = new Service('relation');
  13. const Relationship = () => {
  14. const intl = useIntl();
  15. const [param, setParam] = useState<any>({});
  16. const [current, setCurrent] = useState<Partial<ReationItem>>({});
  17. const [visible, setVisible] = useState<boolean>(false);
  18. const actionRef = useRef<ActionType>();
  19. const { permission } = PermissionButton.usePermission('system/Relationship');
  20. const columns: ProColumns<ReationItem>[] = [
  21. {
  22. dataIndex: 'name',
  23. title: '名称',
  24. ellipsis: true,
  25. fixed: 'left',
  26. width: '20%',
  27. },
  28. {
  29. dataIndex: 'objectTypeName',
  30. title: '关联方',
  31. ellipsis: true,
  32. },
  33. {
  34. dataIndex: 'targetTypeName',
  35. title: '被关联方',
  36. ellipsis: true,
  37. },
  38. {
  39. dataIndex: 'description',
  40. title: '说明',
  41. ellipsis: true,
  42. },
  43. {
  44. title: '操作',
  45. valueType: 'option',
  46. align: 'center',
  47. width: 200,
  48. fixed: 'right',
  49. render: (text, record) => [
  50. <PermissionButton
  51. isPermission={permission.update}
  52. key="warning"
  53. onClick={() => {
  54. setVisible(true);
  55. setCurrent(record);
  56. }}
  57. type={'link'}
  58. style={{ padding: 0 }}
  59. tooltip={{
  60. title: intl.formatMessage({
  61. id: 'pages.data.option.edit',
  62. defaultMessage: '编辑',
  63. }),
  64. }}
  65. >
  66. <EditOutlined />
  67. </PermissionButton>,
  68. <PermissionButton
  69. isPermission={permission.delete}
  70. style={{ padding: 0 }}
  71. popConfirm={{
  72. title: '确认删除',
  73. onConfirm: async () => {
  74. const resp: any = await service.remove(record.id);
  75. if (resp.status === 200) {
  76. message.success(
  77. intl.formatMessage({
  78. id: 'pages.data.option.success',
  79. defaultMessage: '操作成功!',
  80. }),
  81. );
  82. actionRef.current?.reload();
  83. }
  84. },
  85. }}
  86. key="button"
  87. type="link"
  88. >
  89. <DeleteOutlined />
  90. </PermissionButton>,
  91. ],
  92. },
  93. ];
  94. return (
  95. <PageContainer>
  96. <SearchComponent<ReationItem>
  97. field={columns}
  98. target="relationship"
  99. onSearch={(data) => {
  100. actionRef.current?.reload();
  101. setParam(data);
  102. }}
  103. />
  104. <ProTable<ReationItem>
  105. actionRef={actionRef}
  106. params={param}
  107. columns={columns}
  108. search={false}
  109. rowKey="id"
  110. scroll={{ x: 1366 }}
  111. request={async (params) => {
  112. return service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] });
  113. }}
  114. headerTitle={[
  115. <PermissionButton
  116. isPermission={permission.add}
  117. key="add"
  118. onClick={() => {
  119. setVisible(true);
  120. setCurrent({});
  121. }}
  122. type="primary"
  123. tooltip={{
  124. title: intl.formatMessage({
  125. id: 'pages.data.option.add',
  126. defaultMessage: '新增',
  127. }),
  128. }}
  129. >
  130. 新增
  131. </PermissionButton>,
  132. ]}
  133. />
  134. {visible && (
  135. <Save
  136. data={current}
  137. close={() => {
  138. setVisible(false);
  139. actionRef.current?.reload();
  140. }}
  141. />
  142. )}
  143. </PageContainer>
  144. );
  145. };
  146. export default Relationship;