index.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. /*
  2. * @Author: code4eat awesomedema@gmail.com
  3. * @Date: 2023-03-03 11:30:33
  4. * @LastEditors: code4eat awesomedema@gmail.com
  5. * @LastEditTime: 2024-12-24 16:26:31
  6. * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/index.tsx
  7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  8. */
  9. import KCIMPagecontainer from '@/components/KCIMPageContainer';
  10. import { KCIMTable } from '@/components/KCIMTable';
  11. import { createFromIconfontCN } from '@ant-design/icons';
  12. import { ActionType, ProFormDependency, ProFormInstance, ProFormText, ProFormSelect } from '@ant-design/pro-components';
  13. import { ModalForm, ProFormDigit, ProFormTextArea } from '@ant-design/pro-form'
  14. import { ProColumns } from '@ant-design/pro-table';
  15. import { Input, message, Popconfirm, Popover, Switch, Tooltip } from 'antd';
  16. import { useEffect, useRef, useState } from 'react';
  17. import 'moment/locale/zh-cn';
  18. import { addData, delData, editData, getTableList } from './service';
  19. import './style.less';
  20. import { renameChildListToChildren } from '@/utils/tooljs';
  21. const IconFont = createFromIconfontCN({
  22. scriptUrl: '',
  23. });
  24. let selectableLevelList: any[] = [];
  25. let currentRow: any = undefined;
  26. export const searchTree = (tree: any[], searchTerm: string) => {
  27. const searchTermLower = searchTerm.toLowerCase();
  28. function searchNode(node: any) {
  29. const matchedChildren: any[] = [];
  30. if (node.children && node.children.length > 0) {
  31. node.children.forEach((child: any) => {
  32. const matchedChild = searchNode(child);
  33. if (matchedChild) {
  34. matchedChildren.push(matchedChild);
  35. }
  36. });
  37. }
  38. if (node.responsibilityName.toLowerCase().includes(searchTermLower) || (node.responsibilityCode && node.responsibilityCode.toLowerCase().includes(searchTermLower))) {
  39. return {
  40. ...node,
  41. children: matchedChildren.length > 0 ? matchedChildren : node.children
  42. };
  43. } else if (matchedChildren.length > 0) {
  44. return {
  45. ...node,
  46. children: matchedChildren
  47. };
  48. }
  49. return null;
  50. }
  51. return tree.map(rootNode => searchNode(rootNode)).filter(node => node !== null);
  52. }
  53. export default function QualificationClassifiMana() {
  54. const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>();
  55. const [tableDataSearchKeywords, set_tableDataSearchKeywords] = useState<string>('');
  56. const tableRef = useRef<ActionType>();
  57. const formRef = useRef<ProFormInstance>();
  58. const columns: ProColumns[] = [
  59. {
  60. title: '分类名称',
  61. dataIndex: 'name',
  62. ellipsis: true,
  63. },
  64. {
  65. title: '分类编码',
  66. ellipsis: true,
  67. dataIndex: 'code',
  68. },
  69. {
  70. title: '顺序号',
  71. ellipsis: true,
  72. dataIndex: 'sort',
  73. },
  74. {
  75. title: '说明',
  76. ellipsis: true,
  77. dataIndex: 'description',
  78. },
  79. {
  80. title: '操作',
  81. key: 'option',
  82. width: 120,
  83. fixed: 'right',
  84. valueType: 'option',
  85. render: (_: any, record: any) => {
  86. const { code, allowDelete } = record;
  87. return code != '0' ? [
  88. <UpDataActBtn key={'act'} record={record} type='ADDCHILD' />,
  89. <UpDataActBtn key={'act1'} record={record} type='EDIT' />,
  90. <>
  91. {
  92. allowDelete == 1 ? (
  93. <Popconfirm
  94. title="是否确认删除?"
  95. key="del"
  96. onConfirm={() => delTableData(record)}
  97. >
  98. <a>删除</a>
  99. </Popconfirm>
  100. ) : (
  101. <Tooltip title="分类下已有资质,不可删除" placement='topRight'>
  102. <span style={{ color: '#99A6BF', cursor: 'not-allowed' }}>删除</span>
  103. </Tooltip>
  104. )
  105. }
  106. </>,
  107. ] : [
  108. <UpDataActBtn key={'act'} record={record} type='ADDCHILD' />,
  109. ]
  110. },
  111. },
  112. ]
  113. const getTableData = async (params: any) => {
  114. const { filter } = params;
  115. const resp = await getTableList({ ...params });
  116. if (resp) {
  117. return {
  118. data: resp,
  119. success: true,
  120. total: resp.totalCount,
  121. pageSize: resp.pageSize,
  122. totalPage: resp.totalPage,
  123. }
  124. }
  125. return []
  126. }
  127. const delTableData = async (record: any) => {
  128. const resp = await delData(record.id);
  129. if (resp) {
  130. message.success('操作成功!');
  131. tableRef.current?.reload();
  132. // message.success('操作成功!');
  133. }
  134. }
  135. const updateTable = async (formVal: any, type: 'EDIT' | "ADD" | "ADDCHILD") => {
  136. try {
  137. if (type == 'ADD' || type == 'ADDCHILD') {
  138. const resp = await addData(formVal);
  139. if (resp) {
  140. tableRef.current?.reload();
  141. message.success('操作成功!');
  142. }
  143. }
  144. if (type == 'EDIT') {
  145. try {
  146. const resp = await editData({ ...formVal });
  147. if (resp) {
  148. tableRef.current?.reload();
  149. message.success('操作成功!');
  150. }
  151. } catch (error) {
  152. console.log({ error });
  153. }
  154. }
  155. } catch (error) {
  156. console.log('新增/编辑error', error);
  157. }
  158. return true;
  159. }
  160. const UpDataActBtn = ({ record, type }: { record: any, type: 'EDIT' | 'ADD' | 'ADDCHILD' }) => {
  161. return (
  162. <ModalForm
  163. title={`${type == 'EDIT' ? '编辑' : '新增'}分类`}
  164. width={350}
  165. formRef={formRef}
  166. initialValues={type == 'EDIT' ? {
  167. ...record,
  168. } : { selectedSharelevel: 0, sort: 0 }}
  169. trigger={
  170. type == 'EDIT' ? <a key="edit" >编辑</a> : type == 'ADDCHILD' ? <a className='add'>添加</a> : <span className='add'>新增</span>
  171. }
  172. onFinish={(val) => {
  173. return updateTable(type == 'EDIT' ? { ...record, ...val } : type == 'ADDCHILD' ? { ...val, parentCode: record.code } : { ...val }, type);
  174. }}
  175. modalProps={{ destroyOnClose: true }}
  176. colProps={{ span: 24 }}
  177. grid
  178. >
  179. <ProFormText
  180. label="资质分类名称:"
  181. rules={[
  182. {
  183. required: true,
  184. message: '资质分类名称是必填项',
  185. },
  186. ]}
  187. name="name"
  188. />
  189. <ProFormText
  190. disabled={type == 'EDIT'}
  191. label="资质分类编码:"
  192. rules={[
  193. {
  194. required: true,
  195. message: '资质分类编码是必填项',
  196. },
  197. ]}
  198. name="code"
  199. />
  200. <ProFormDigit
  201. label="顺序号:"
  202. width={120}
  203. rules={[
  204. {
  205. required: true,
  206. message: '顺序号是必填项',
  207. },
  208. ]}
  209. name="sort"
  210. />
  211. <ProFormTextArea
  212. label="资质分类说明:"
  213. name="description"
  214. />
  215. </ModalForm>
  216. )
  217. }
  218. const tableDataSearchHandle = (paramName: string) => {
  219. set_tableDataFilterParams({
  220. ...tableDataFilterParams,
  221. currnt: 1,
  222. [`${paramName}`]: tableDataSearchKeywords
  223. })
  224. }
  225. useEffect(() => {
  226. }, [])
  227. return (
  228. <KCIMPagecontainer className='QualificationClassifiMana' title={false}>
  229. <div className='pageContent'>
  230. <div className='toolBar'>
  231. <div className='filter'>
  232. <div className='filterItem'>
  233. <span className='label' style={{ whiteSpace: 'nowrap' }}> 检索:</span>
  234. <Input placeholder={'分类编码、分类名称'} allowClear autoComplete='off'
  235. suffix={
  236. <IconFont type="iconsousuo" style={{ color: '#99A6BF' }} onClick={() => tableDataSearchHandle('queryCondition')} />
  237. }
  238. onChange={(e) => {
  239. set_tableDataSearchKeywords(e.target.value);
  240. if (e.target.value.length == 0) {
  241. set_tableDataFilterParams({
  242. ...tableDataFilterParams,
  243. current: 1,
  244. queryCondition: ''
  245. });
  246. }
  247. }}
  248. onPressEnter={(e) => {
  249. set_tableDataFilterParams({
  250. ...tableDataFilterParams,
  251. current: 1,
  252. queryCondition: (e.target as HTMLInputElement).value
  253. });
  254. }}
  255. />
  256. </div>
  257. </div>
  258. <div className='btnGroup'>
  259. {/* <UpDataActBtn record type='ADD' /> */}
  260. </div>
  261. </div>
  262. <KCIMTable pagination={false} columns={columns as ProColumns[]}
  263. scroll={{ y: 'calc(100vh - 192px)' }} actionRef={tableRef} rowKey='code'
  264. expandable={{
  265. defaultExpandedRowKeys: ['0']
  266. }}
  267. params={tableDataFilterParams} request={(params) => getTableData(params)} />
  268. </div>
  269. </KCIMPagecontainer>
  270. )
  271. }