index.tsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. import React, { useEffect, useState } from 'react'
  2. import Helmet from 'react-helmet'
  3. import Container, { ContainerBody } from 'components/Container'
  4. import Box from 'components/Box'
  5. import {
  6. Button,
  7. Col,
  8. Divider,
  9. Icon,
  10. message,
  11. Popconfirm,
  12. Row,
  13. Table,
  14. Tooltip
  15. } from 'antd'
  16. import { ColumnProps } from 'antd/lib/table'
  17. import { compose } from 'redux'
  18. import request from 'utils/request'
  19. import api from 'utils/api'
  20. import DictDatasModal from 'containers/DataManagerDictionary/components/DictDatasModal'
  21. import { IDictType } from 'containers/DataManagerDictionary/types'
  22. import DictTypeFormModal from 'containers/DataManagerDictionary/components/DictTypeFormModal'
  23. function DataDictionary() {
  24. const [tableLoading, setTableLoading] = useState(false)
  25. const [dictTypes, setDictTypes] = useState<IDictType[]>([])
  26. const [visible, setVisible] = useState(false)
  27. const [dictType, setDictType] = useState<string>(null)
  28. const [dictTypeFormVisible, setDictTypeFormVisible] = useState(false)
  29. const [dictTypeFormLoading, setDictTypeFormLoading] = useState(false)
  30. const [dictTypeForm, setDictTypeForm] = useState<IDictType>(null)
  31. const tableColumns: Array<ColumnProps<IDictType>> = [
  32. {
  33. title: '字典主键',
  34. dataIndex: 'dictId'
  35. },
  36. {
  37. title: '字典名称',
  38. dataIndex: 'dictName'
  39. },
  40. {
  41. title: '字典类型',
  42. dataIndex: 'dictType'
  43. },
  44. {
  45. title: '状态',
  46. dataIndex: 'status',
  47. render: (text) => (
  48. <>
  49. {text === 0 && (
  50. <span
  51. style={{ padding: '2px 4px', background: 'green', color: '#fff' }}
  52. >
  53. 正常
  54. </span>
  55. )}
  56. {text === 1 && (
  57. <span
  58. style={{ padding: '2px 4px', background: 'red', color: '#fff' }}
  59. >
  60. 停用
  61. </span>
  62. )}
  63. </>
  64. )
  65. },
  66. {
  67. title: '备注',
  68. dataIndex: 'remark'
  69. },
  70. {
  71. title: '创建时间'
  72. // dataIndex: 'isDefault'
  73. },
  74. {
  75. title: '操作',
  76. render: (_, data) => (
  77. <>
  78. <a
  79. onClick={() => {
  80. setDictTypeFormVisible(true)
  81. setDictTypeForm(data)
  82. }}
  83. >
  84. 编辑
  85. </a>
  86. <Divider type="vertical" />
  87. <a
  88. onClick={() => {
  89. setDictType(data.dictType)
  90. setVisible(true)
  91. }}
  92. >
  93. 列表
  94. </a>
  95. <Divider type="vertical" />
  96. <Popconfirm
  97. title="确定删除?"
  98. placement="bottom"
  99. onConfirm={() => handleDeleteDictType(data.dictId)}
  100. >
  101. <a>删除</a>
  102. </Popconfirm>
  103. </>
  104. )
  105. }
  106. ]
  107. const queryDictTypes = async () => {
  108. try {
  109. setTableLoading(true)
  110. const data = await request(api.dictTypes, { method: 'GET' })
  111. // @ts-ignore
  112. setDictTypes(data?.payload ?? [])
  113. } finally {
  114. setTableLoading(false)
  115. }
  116. }
  117. const handleDeleteDictType = async (dictId) => {
  118. try {
  119. setTableLoading(true)
  120. await request(`${api.deleteDictType}/${dictId}`, { method: 'delete' })
  121. queryDictTypes()
  122. } finally {
  123. setTableLoading(false)
  124. }
  125. }
  126. const handleSaveDictType = async (dt: IDictType) => {
  127. // // 0=正常,1=停用
  128. try {
  129. setDictTypeFormLoading(true)
  130. const url = dictTypeForm?.dictId
  131. ? `${api.updateDictType}/${dictTypeForm.dictId}`
  132. : api.createDictType
  133. const result = await request(url, {
  134. method: dictTypeForm?.dictId ? 'PUT' : 'POST',
  135. data: { ...(dictTypeForm ?? {}), ...dt, status: dt.status ? 0 : 1 }
  136. })
  137. // @ts-ignore
  138. if (result.header.code === 200) {
  139. setDictTypeFormVisible(false)
  140. queryDictTypes()
  141. } else {
  142. // @ts-ignore
  143. // tslint:disable-next-line:no-unused-expression
  144. result.header.msg && message.error({ content: result.header.msg })
  145. }
  146. } finally {
  147. setDictTypeFormLoading(false)
  148. }
  149. }
  150. useEffect(() => {
  151. queryDictTypes()
  152. }, [])
  153. return (
  154. <Container>
  155. <Helmet title="数据字典" />
  156. <ContainerBody>
  157. <Box>
  158. <Box.Header>
  159. <Box.Title>
  160. <Icon type="bars" />
  161. 数据字典列表
  162. </Box.Title>
  163. <Box.Tools>
  164. <Tooltip placement="bottom" title="新增">
  165. <Button
  166. type="primary"
  167. icon="plus"
  168. onClick={() => {
  169. setDictTypeFormVisible(true)
  170. setDictTypeForm(null)
  171. }}
  172. />
  173. </Tooltip>
  174. </Box.Tools>
  175. </Box.Header>
  176. <Box.Body>
  177. <Row>
  178. <Col span={24}>
  179. <Table
  180. bordered
  181. rowKey="dictId"
  182. loading={tableLoading}
  183. dataSource={dictTypes}
  184. columns={tableColumns}
  185. pagination={false}
  186. // onChange={this.tableChange}
  187. />
  188. <div style={{ height: 20 }} />
  189. </Col>
  190. </Row>
  191. </Box.Body>
  192. </Box>
  193. </ContainerBody>
  194. <DictDatasModal
  195. visible={visible}
  196. dictType={dictType}
  197. onCancel={() => setVisible(false)}
  198. />
  199. <DictTypeFormModal
  200. visible={dictTypeFormVisible}
  201. loading={dictTypeFormLoading}
  202. fromView={dictTypeForm}
  203. onSave={handleSaveDictType}
  204. onCancel={() => setDictTypeFormVisible(false)}
  205. />
  206. </Container>
  207. )
  208. }
  209. // const mapDispatchToProps = (dispatch: Dispatch<ViewActionType>) => ({
  210. // onLoadViews: (projectId) => dispatch(ViewActions.loadViews(projectId)),
  211. // onDeleteView: (viewId, resolve) => dispatch(ViewActions.deleteView(viewId, resolve)),
  212. // onCopyView: (view, resolve) => dispatch(ViewActions.copyView(view, resolve)),
  213. // onCheckName: (data, resolve, reject) => dispatch(checkNameUniqueAction('view', data, resolve, reject))
  214. // })
  215. //
  216. // const mapStateToProps = createStructuredSelector({
  217. // views: makeSelectViews(),
  218. // currentProject: makeSelectCurrentProject(),
  219. // loading: makeSelectLoading()
  220. // })
  221. // const withConnect = connect<IViewListStateProps, IViewListDispatchProps, RouteComponentWithParams>(mapStateToProps, mapDispatchToProps)
  222. // const withReducer = injectReducer({ key: 'view', reducer })
  223. // const withSaga = injectSaga({ key: 'view', saga: sagas })
  224. export default compose()(DataDictionary)
  225. // withReducer,
  226. // withSaga,
  227. // withConnect