审批设置-等后端接口

后台管理/src/pages/D2approval/D2edit/D2addPro.tsx

@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Input, InputNumber, Modal, Radio, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { D2proListType } from '../data'
+import { D2_APIgetProInfo, D2_APIgetProSave } from '@/store/action/D2approval'
+import { D3_APIgetList } from '@/store/action/D3role'
+import { getUserListAPI } from '@/store/action/Z1user'
+
+const baseFormData = {
+  id: -1,
+  name: '',
+  type: '',
+  sort: 999
+} as D2proListType
+
+type Props = {
+  sId: number
+  closeFu: () => void
+  succFu: () => void
+  flowId: number
+}
+
+function D2addPro({ sId, closeFu, succFu, flowId }: Props) {
+  const dispatch = useDispatch()
+  // 获取角色列表
+  const { list: roleList } = useSelector((state: RootState) => state.D3role.tableInfo)
+
+  // 获取用户列表
+  const { list: userList } = useSelector((state: RootState) => state.Z1user.tableInfo)
+
+  const [form, setForm] = useState(baseFormData)
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await D2_APIgetProInfo(id)
+    if (res.code === 0) {
+      const data: D2proListType = res.data
+
+      let moduleIds: any = data.moduleIds.split(',')
+
+      data.type === 'user'
+        ? setIdsArr1(moduleIds.map((v: any) => Number(v)))
+        : setIdsArr2(moduleIds.map((v: any) => Number(v)))
+
+      setForm(data)
+    }
+  }, [])
+
+  useEffect(() => {
+    dispatch(D3_APIgetList({ pageNum: 1, pageSize: 99999 }))
+
+    dispatch(getUserListAPI({ pageNum: 1, pageSize: 99999, searchKey: '' }))
+
+    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 btnOk = useCallback(async () => {
+    if (!form.name) return MessageFu.warning('请输入节点名称')
+    if (!form.sort) return MessageFu.warning('请输入正整数排序值')
+
+    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 obj = {
+      ...form,
+      moduleIds: form.type === 'user' ? id1 : id2,
+      id: sId > 0 ? sId : null,
+      flowId
+    }
+
+    const res = await D2_APIgetProSave(obj)
+
+    if (res.code === 0) {
+      MessageFu.success(sId > 0 ? '编辑成功' : '新增成功')
+      succFu()
+      closeFu()
+    }
+  }, [closeFu, flowId, form, idsArr1, idsArr2, sId, succFu])
+
+  return (
+    <Modal
+      wrapClassName={styles.D2addPro}
+      destroyOnClose
+      open={true}
+      title={sId > 0 ? '编辑' : '新增'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='D2aRow'>
+        <div className='D2aRowll'>
+          <span> * </span> 节点名称：
+        </div>
+        <div className='D2aRowrr'>
+          <Input
+            placeholder='请输入内容'
+            maxLength={10}
+            showCount
+            value={form.name}
+            onChange={e => formChange('name', e.target.value.trim())}
+          />
+        </div>
+      </div>
+
+      <div className='D2aRow'>
+        <div className='D2aRowll'>
+          <span> * </span> 办理人：
+        </div>
+        <div className='D2aRowrr'>
+          <Radio.Group
+            value={form.type}
+            onChange={e => formChange('type', e.target.value)}
+            options={[
+              { value: 'user', label: '指定用户' },
+              { value: 'role', label: '按角色' }
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className='D2aRow'>
+        <div className='D2aRowll'></div>
+
+        <div className='D2aRowrr' 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='D2aRowrr' 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>
+
+      <div className='D2aRow'>
+        <div className='D2aRowll'>
+          <span> * </span> 排序值：
+        </div>
+        <div className='D2aRowrr'>
+          <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='D2aBtn'>
+        <Button type='primary' onClick={btnOk}>
+          提交
+        </Button>
+        &emsp;
+        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+      </div>
+    </Modal>
+  )
+}
+
+const MemoD2addPro = React.memo(D2addPro)
+
+export default MemoD2addPro

后台管理/src/pages/D2approval/D2edit/D2lookPro.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Modal } from 'antd'
+import { D2_APIgetProGetUser } from '@/store/action/D2approval'
+
+type Props = {
+  sId: number
+  closeFu: () => void
+}
+
+function D2lookPro({ sId, closeFu }: Props) {
+  const [list, setList] = useState<string[]>([])
+
+  const getInfoFu = useCallback(async () => {
+    const res = await D2_APIgetProGetUser(sId)
+    if (res.code === 0) {
+      setList((res.data || []).map((v: any) => v.realName))
+    }
+  }, [sId])
+
+  useEffect(() => {
+    getInfoFu()
+  }, [getInfoFu])
+
+  return (
+    <Modal
+      wrapClassName={styles.D2lookPro}
+      destroyOnClose
+      open={true}
+      title='查看办理人'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='D2lMain'>
+        {list.length ? list.map(v => <span key={v}>{v}</span>) : <span>暂无</span>}
+      </div>
+
+      <div className='D2lBtn'>
+        <Button onClick={closeFu}>关闭</Button>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoD2lookPro = React.memo(D2lookPro)
+
+export default MemoD2lookPro

后台管理/src/pages/D2approval/D2edit/index.module.scss

@@ -0,0 +1,118 @@
+.D2edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  :global {
+    .D2eRow {
+      display: flex;
+      margin-bottom: 20px;
+      font-size: 16px;
+      position: relative;
+      .D2eBtn {
+        position: absolute;
+        bottom: 0px;
+        right: 100px;
+      }
+      & > div {
+        &:nth-of-type(1) {
+          width: 100px;
+          font-weight: 700;
+          text-align: right;
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        &:nth-of-type(2) {
+          width: calc(100% - 200px);
+          .D2table {
+            margin-top: 20px;
+            .ant-table-cell {
+              padding: 8px;
+            }
+          }
+        }
+      }
+      .D2tablell {
+        position: relative;
+        top: 3px;
+      }
+    }
+  }
+}
+
+// 环节的新增/编辑弹窗
+.D2addPro {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+      .D2aRow {
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        .D2aRowll {
+          width: 90px;
+          text-align: right;
+          font-weight: 700;
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+        .D2aRowrr {
+          width: calc(100% - 90px);
+          position: relative;
+          .fromRowTit {
+            position: absolute;
+            left: 100px;
+            top: 5px;
+            color: #999;
+            font-size: 12px;
+          }
+        }
+      }
+      .D2aBtn {
+        margin-top: 30px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// 查看办理人
+.D2lookPro {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+
+      .D2lMain {
+        margin-top: 15px;
+        & > span {
+          display: inline-block;
+          margin: 0 15px 15px;
+          font-size: 16px;
+        }
+      }
+      .D2lBtn {
+        margin-top: 15px;
+        text-align: center;
+      }
+    }
+  }
+}

后台管理/src/pages/D2approval/D2edit/index.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { D2_APIgetInfo, D2_APIgetProDel, D2_APIsave } from '@/store/action/D2approval'
+import { D2editTableType, D2editType } from '../data'
+import { Button, Radio } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import MyTable from '@/components/MyTable'
+import { D2tableC2 } from '@/utils/tableData'
+import { MessageFu } from '@/utils/message'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import D2lookPro from './D2lookPro'
+import D2addPro from './D2addPro'
+
+type Props = {
+  sId: number
+  closeFu: () => void
+  upTableFu: () => void
+}
+
+function D2edit({ sId, closeFu, upTableFu }: Props) {
+  const [info, setInfo] = useState({} as D2editType)
+
+  const getInfoFu = useCallback(async () => {
+    const res = await D2_APIgetInfo(sId)
+    if (res.code === 0) {
+      const data: D2editTableType[] = res.data.process || []
+      setInfo({
+        ...res.data,
+        process: data.map((v, i) => ({
+          ...v,
+          sort: v.isUse === 0 ? '/' : v.sort,
+          type: v.isUse === 0 ? '/' : v.type
+        }))
+      })
+    }
+  }, [sId])
+
+  useEffect(() => {
+    getInfoFu()
+  }, [getInfoFu])
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await D2_APIgetProDel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getInfoFu()
+      }
+    },
+    [getInfoFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: D2editTableType) => {
+          return item.isUse === 0 ? (
+            '/'
+          ) : (
+            <>
+              <Button size='small' type='text' onClick={() => setLookId(item.id)}>
+                查看办理人
+              </Button>
+              <Button size='small' type='text' onClick={() => setProId(item.id)}>
+                编辑
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu])
+
+  // 环节的新增和编辑
+  const [proId, setProId] = useState(0)
+
+  // 查看办理人
+  const [lookId, setLookId] = useState(0)
+
+  // 点击保存
+  const btnOk = useCallback(async () => {
+    const res = await D2_APIsave({
+      id: info.id,
+      enabled: info.enabled,
+      remark: info.remark
+    })
+    if (res.code === 0) {
+      MessageFu.warning('编辑成功')
+      upTableFu()
+      closeFu()
+    }
+  }, [info, closeFu, upTableFu])
+
+  return (
+    <div className={styles.D2edit}>
+      <div className='D2eRow'>
+        <div>流程名称：</div>
+        <div>{info.name}</div>
+      </div>
+
+      <div className='D2eRow'>
+        <div>
+          <span>* </span>流程状态：
+        </div>
+        <div>
+          <Radio.Group
+            value={info.enabled}
+            onChange={e => setInfo({ ...info, enabled: e.target.value })}
+            options={[
+              { value: 1, label: '启用' },
+              { value: 0, label: '禁用' }
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className='D2eRow'>
+        <div>流程说明：</div>
+        <div>
+          <TextArea
+            style={{ width: '90%' }}
+            placeholder='请输入'
+            maxLength={500}
+            showCount
+            value={info.remark}
+            onChange={e => setInfo({ ...info, remark: e.target.value })}
+          />
+        </div>
+
+        <div className='D2eBtn'>
+          <Button type='primary' onClick={btnOk}>
+            保存
+          </Button>
+          <br />
+          <br />
+          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+        </div>
+      </div>
+      <div className='D2eRow'>
+        <div className='D2tablell'>审批环节：</div>
+        <div>
+          <Button type='primary' onClick={() => setProId(-1)}>
+            新增
+          </Button>
+          <div className='D2table'>
+            <MyTable
+              classKey='D2editTable'
+              yHeight={492}
+              list={info.process || []}
+              columnsTemp={D2tableC2}
+              lastBtn={tableLastBtn}
+              pagingInfo={false}
+            />
+          </div>
+        </div>
+      </div>
+
+      {proId ? (
+        <D2addPro flowId={sId} sId={proId} closeFu={() => setProId(0)} succFu={getInfoFu} />
+      ) : null}
+
+      {lookId ? <D2lookPro sId={lookId} closeFu={() => setLookId(0)} /> : null}
+    </div>
+  )
+}
+
+const MemoD2edit = React.memo(D2edit)
+
+export default MemoD2edit

后台管理/src/pages/D2approval/data.ts

@@ -10,3 +10,45 @@ export type D2listType = {
   typeKey: string
   updateTime: string
 }
+
+export type D2editTableType = {
+  createTime: string
+  creatorId?: any
+  creatorName?: any
+  flowId: number
+  id: number
+  isUse: number
+  moduleIds?: any
+  name: string
+  sort: number
+  type?: any
+  updateTime: string
+}
+
+export type D2editType = {
+  createTime: string
+  creatorId: number
+  creatorName?: any
+  enabled: number
+  id: number
+  name: string
+  process: D2editTableType[]
+  remark: string
+  typeKey: string
+  updateTime: string
+}
+
+// 环节配置列表
+export type D2proListType = {
+  createTime: string
+  creatorId?: any
+  creatorName: string
+  flowId: number
+  id: number
+  isUse: number
+  moduleIds: string
+  name: string
+  sort: number | string
+  type: string
+  updateTime: string
+}

后台管理/src/pages/D2approval/index.module.scss

@@ -1,4 +1,5 @@
 .D2approval {
   background-color: #fff;
   border-radius: 10px;
+  position: relative;
 }

后台管理/src/pages/D2approval/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
 import { D2_APIgetlist } from '@/store/action/D2approval'
@@ -7,6 +7,7 @@ import MyTable from '@/components/MyTable'
 import { D2tableC } from '@/utils/tableData'
 import { D2listType } from './data'
 import { Button } from 'antd'
+import D2edit from './D2edit'
 function D2approval() {
   const dispatch = useDispatch()
 
@@ -25,7 +26,7 @@ function D2approval() {
       {
         title: '操作',
         render: (item: D2listType) => (
-          <Button size='small' type='text'>
+          <Button size='small' type='text' onClick={() => setEditId(item.id)}>
             编辑
           </Button>
         )
@@ -33,9 +34,12 @@ function D2approval() {
     ]
   }, [])
 
+  // 点击编辑
+  const [editId, setEditId] = useState(0)
+
   return (
     <div className={styles.D2approval}>
-      <div className='pageTitle'>审批设置</div>
+      <div className='pageTitle'>审批设置{editId ? ' - 编辑' : ''}</div>
 
       <MyTable
         yHeight={750}
@@ -45,6 +49,9 @@ function D2approval() {
         pagingInfo={false}
         widthSet={{ remark: 800 }}
       />
+
+      {/* 编辑页面 */}
+      {editId ? <D2edit sId={editId} closeFu={() => setEditId(0)} upTableFu={getListFu} /> : null}
     </div>
   )
 }

后台管理/src/pages/D3role/D3add/index.tsx

@@ -19,12 +19,15 @@ function D3add({ sId, closeFu, addTableFu, editTableFu }: Props) {
   // 设置表单ref
   const FormBoxRef = useRef<FormInstance>(null)
 
+  const [loding, setLoding] = useState(false)
+
   // 编辑进来获取详情
   const getInfoFu = useCallback(async (id: number) => {
     const res = await D3_APIgetInfo(id)
     if (res.code === 0) {
       FormBoxRef.current?.setFieldsValue(res.data.role)
       setRoleArr(res.data.permission)
+      setLoding(true)
     }
   }, [])
 
@@ -35,6 +38,7 @@ function D3add({ sId, closeFu, addTableFu, editTableFu }: Props) {
     const res = await D3_APIgetAddTreeList()
     if (res.code === 0) {
       setRoleArr(res.data || [])
+      setLoding(true)
     }
   }, [])
 
@@ -156,7 +160,9 @@ function D3add({ sId, closeFu, addTableFu, editTableFu }: Props) {
                 </div>
               ))}
 
-              <div className={classNmaes('D3aErr', checkIds.length <= 0 ? 'D3aErrAc' : '')}>
+              <div
+                className={classNmaes('D3aErr', checkIds.length <= 0 && loding ? 'D3aErrAc' : '')}
+              >
                 至少选中一个
               </div>
             </div>

后台管理/src/store/action/D2approval.ts

@@ -13,8 +13,43 @@ export const D2_APIgetlist = (): any => {
 }
 
 /**
- * 流程设置-
+ * 流程设置- 获取详情
  */
-// export const D1_APIdel = (id: string) => {
-//   return http.get(`cms/dict/remove/${id}`)
-// }
+export const D2_APIgetInfo = (id: number) => {
+  return http.get(`cms/flow/detail/${id}`)
+}
+
+/**
+ * 流程设置- 编辑
+ */
+export const D2_APIsave = (data: any) => {
+  return http.post('cms/flow/edit', data)
+}
+
+/**
+ * 流程设置- 环节-获取详情
+ */
+export const D2_APIgetProInfo = (id: number) => {
+  return http.get(`cms/flow/process/${id}`)
+}
+
+/**
+ * 流程设置- 环节-删除
+ */
+export const D2_APIgetProDel = (id: number) => {
+  return http.get(`cms/flow/process/remove/${id}`)
+}
+
+/**
+ * 流程设置- 环节 - 列表
+ */
+export const D2_APIgetProGetUser = (id: number) => {
+  return http.get(`cms/flow/process/getUser/${id}`)
+}
+
+/**
+ * 流程设置- 环节-新增/编辑
+ */
+export const D2_APIgetProSave = (data: any) => {
+  return http.post('cms/flow/process/save', data)
+}

后台管理/src/utils/tableData.ts

@@ -19,6 +19,17 @@ export const D2tableC = [
   ['text', '流程说明', 'remark', '100'],
   ['txtChange', '状态', 'enabled', { 0: '禁用', 1: '启用' }]
 ]
+export const D2tableC2 = [
+  ['index', '序号'],
+  ['txt', '节点名称', 'name'],
+  ['txt', '排序值', 'sort'],
+  [
+    'txtChange',
+    '办理人',
+    'type',
+    { user: '指定用户', role: '按角色', dept: '按部门主管', '/': '/' }
+  ]
+]
 
 export const D3tableC = [
   ['txt', '角色名称', 'roleName'],