|
@@ -0,0 +1,221 @@
|
|
|
+import React, { useCallback, useEffect, useState } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import { Button, Cascader, Input, InputNumber, Modal, Radio, Select } from 'antd'
|
|
|
+import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
+import { Z3_APIgetProInfo } from '@/store/action/Z3flowSet'
|
|
|
+import { UserTableListType } from '@/types'
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
+import { Z5_APIgetList } from '@/store/action/Z5role'
|
|
|
+import { RootState } from '@/store'
|
|
|
+import { D4_APIgetTree } from '@/store/action/Z4organization'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+const { SHOW_CHILD } = Cascader
|
|
|
+
|
|
|
+const baseFormData = {
|
|
|
+ id: -1,
|
|
|
+ name: '',
|
|
|
+ type: '',
|
|
|
+ sort: 999
|
|
|
+}
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ sId: number
|
|
|
+ closeFu: () => void
|
|
|
+ succFu: () => void
|
|
|
+ userList: UserTableListType[]
|
|
|
+}
|
|
|
+
|
|
|
+function Z3addPro({ sId, closeFu, succFu, userList }: Props) {
|
|
|
+ const dispatch = useDispatch()
|
|
|
+ // 获取角色列表
|
|
|
+ const { list: roleList } = useSelector((state: RootState) => state.Z5role.tableInfo)
|
|
|
+
|
|
|
+ // 获取部门树列表
|
|
|
+ const { treeData } = useSelector((state: RootState) => state.Z4organization)
|
|
|
+
|
|
|
+ const [form, setForm] = useState(baseFormData)
|
|
|
+
|
|
|
+ const getInfoFu = useCallback(async (id: number) => {
|
|
|
+ const res = await Z3_APIgetProInfo(id)
|
|
|
+ if (res.code === 0) {
|
|
|
+ console.log(123, res)
|
|
|
+ // 待完善回显 多元数组
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ dispatch(Z5_APIgetList({ pageNum: 1, pageSize: 99999 }))
|
|
|
+
|
|
|
+ dispatch(D4_APIgetTree())
|
|
|
+
|
|
|
+ if (sId > 0) getInfoFu(sId)
|
|
|
+ else {
|
|
|
+ setForm({ ...baseFormData, type: 'user' })
|
|
|
+ }
|
|
|
+ }, [dispatch, getInfoFu, sId])
|
|
|
+
|
|
|
+ const formChange = useCallback(
|
|
|
+ (key: 'name' | 'type' | 'sort', val: any) => {
|
|
|
+ setForm({
|
|
|
+ ...form,
|
|
|
+ [key]: val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ [form]
|
|
|
+ )
|
|
|
+
|
|
|
+ const [idsArr1, setIdsArr1] = useState<string[]>([])
|
|
|
+ const [idsArr2, setIdsArr2] = useState<string[]>([])
|
|
|
+ const [idsArr3, setIdsArr3] = useState<string[][]>([])
|
|
|
+
|
|
|
+ // 点击提交
|
|
|
+ const btnOk = useCallback(async () => {
|
|
|
+ if (!form.name) return MessageFu.warning('请输入节点名称')
|
|
|
+ if (!form.sort) return MessageFu.warning('请输入正整数排序值')
|
|
|
+
|
|
|
+ console.log('xxxxxxxx', idsArr3)
|
|
|
+
|
|
|
+ const id1 = (idsArr1 || []).join(',')
|
|
|
+
|
|
|
+ if (form.type === 'user' && !id1) return MessageFu.warning('请选择指定用户')
|
|
|
+
|
|
|
+ const id2 = (idsArr2 || []).join(',')
|
|
|
+
|
|
|
+ if (form.type === 'role' && !id2) return MessageFu.warning('请选择角色')
|
|
|
+
|
|
|
+ const id3 = (idsArr3 || [[]]).map(arr => arr.slice(-1)[0]).join(',')
|
|
|
+ // .flat().join(',')
|
|
|
+ // .map(arr => arr.slice(-1)[0]).join(',');
|
|
|
+ // 待完善 和后端沟通 需要把id的
|
|
|
+ // 还需要多一个字段存json数据回显
|
|
|
+
|
|
|
+ if (form.type === 'dept' && !id3) return MessageFu.warning('请选择部门')
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...form,
|
|
|
+ xxxxx: form.type === 'user' ? id1 : form.type === 'role' ? id2 : id3
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(123, obj)
|
|
|
+ }, [form, idsArr1, idsArr2, idsArr3])
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ wrapClassName={styles.Z3addPro}
|
|
|
+ destroyOnClose
|
|
|
+ open={true}
|
|
|
+ title={sId > 0 ? '编辑' : '新增'}
|
|
|
+ footer={
|
|
|
+ [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <div className='Z3aRow'>
|
|
|
+ <div className='Z3aRowll'>
|
|
|
+ <span> * </span> 节点名称:
|
|
|
+ </div>
|
|
|
+ <div className='Z3aRowrr'>
|
|
|
+ <Input
|
|
|
+ placeholder='请输入内容'
|
|
|
+ maxLength={10}
|
|
|
+ showCount
|
|
|
+ value={form.name}
|
|
|
+ onChange={e => formChange('name', e.target.value.trim())}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='Z3aRow'>
|
|
|
+ <div className='Z3aRowll'>
|
|
|
+ <span> * </span> 办理人:
|
|
|
+ </div>
|
|
|
+ <div className='Z3aRowrr'>
|
|
|
+ <Radio.Group
|
|
|
+ value={form.type}
|
|
|
+ onChange={e => formChange('type', e.target.value)}
|
|
|
+ options={[
|
|
|
+ { value: 'user', label: '指定用户' },
|
|
|
+ { value: 'role', label: '按角色' },
|
|
|
+ { value: 'dept', label: '按部门主管' }
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='Z3aRow'>
|
|
|
+ <div className='Z3aRowll'></div>
|
|
|
+
|
|
|
+ <div className='Z3aRowrr' hidden={form.type !== 'user'}>
|
|
|
+ <Select
|
|
|
+ showSearch={false}
|
|
|
+ mode='multiple'
|
|
|
+ allowClear
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ placeholder='请选择'
|
|
|
+ value={idsArr1}
|
|
|
+ onChange={value => setIdsArr1(value)}
|
|
|
+ options={userList}
|
|
|
+ fieldNames={{ value: 'id', label: 'realName' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className='Z3aRowrr' hidden={form.type !== 'role'}>
|
|
|
+ <Select
|
|
|
+ showSearch={false}
|
|
|
+ mode='multiple'
|
|
|
+ allowClear
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ placeholder='请选择'
|
|
|
+ value={idsArr2}
|
|
|
+ onChange={value => setIdsArr2(value)}
|
|
|
+ options={roleList}
|
|
|
+ fieldNames={{ value: 'id', label: 'roleName' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='Z3aRowrr' hidden={form.type !== 'dept'}>
|
|
|
+ <Cascader
|
|
|
+ placeholder='请选择'
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ options={treeData}
|
|
|
+ value={idsArr3}
|
|
|
+ onChange={e => setIdsArr3(e as string[][])}
|
|
|
+ multiple
|
|
|
+ maxTagCount='responsive'
|
|
|
+ showCheckedStrategy={SHOW_CHILD}
|
|
|
+ fieldNames={{ value: 'id', label: 'name', children: 'children' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='Z3aRow'>
|
|
|
+ <div className='Z3aRowll'>
|
|
|
+ <span> * </span> 排序值:
|
|
|
+ </div>
|
|
|
+ <div className='Z3aRowrr'>
|
|
|
+ <InputNumber
|
|
|
+ min={1}
|
|
|
+ max={999}
|
|
|
+ precision={0}
|
|
|
+ placeholder='请输入'
|
|
|
+ value={form.sort}
|
|
|
+ onChange={e => formChange('sort', e)}
|
|
|
+ />
|
|
|
+ <div className='fromRowTit'>
|
|
|
+ 请输入1~999的数字。数字越小,排序越靠前。数字相同时,更新发布的内容排在前面
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='Z3aBtn'>
|
|
|
+ <Button type='primary' onClick={btnOk}>
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+  
|
|
|
+ <MyPopconfirm txtK='取消' onConfirm={closeFu} />
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const MemoZ3addPro = React.memo(Z3addPro)
|
|
|
+
|
|
|
+export default MemoZ3addPro
|