藏品删除-初步完工

后台管理/src/components/MyPopconfirm.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { Button, Popconfirm } from 'antd'
 
 type Props = {
-  txtK: '删除' | '取消' | '重置密码' | '退出登录'
+  txtK: '删除' | '取消' | '重置密码' | '退出登录' | '重新提交'
   onConfirm: () => void
   Dom?: React.ReactNode
   loc?: 'bottom'
@@ -14,7 +14,8 @@ function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
       删除: ['删除后无法恢复，是否删除?', '删除'],
       取消: ['放弃编辑后，信息将不会保存!', '放弃'],
       重置密码: ['密码重制后为Aa147852，是否重置?', '重置'],
-      退出登录: ['确定退出吗?', '确定']
+      退出登录: ['确定退出吗?', '确定'],
+      重新提交: ['确定重新提交吗?', '确定']
     }
     return Reflect.get(obj, txtK) || ['', '']
   }, [txtK])

后台管理/src/pages/A0goodsInfo/Tab1info/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import styles from './index.module.scss'
 import { B1listType } from '@/pages/B1ledger/data'
 import ImageLazy from '@/components/ImageLazy'
@@ -20,6 +20,14 @@ function Tab1info({ info, auto }: Props) {
     filesRef.current?.showList(info.file || [])
   }, [info.file])
 
+  // 藏品状态
+  const goodsSta = useMemo(() => {
+    let txt = ''
+    const obj = goodsSelect.find(v => v.value === info.status)
+    if (obj) txt = obj.label
+    return txt
+  }, [info.status])
+
   return (
     <div className={styles.Tab1info} style={{ height: auto ? 'auto' : '100%' }}>
       {info.id ? (
@@ -33,10 +41,12 @@ function Tab1info({ info, auto }: Props) {
                 </div>
               ))}
             </div>
-            <div className='T1_1rr'>
-              <span>藏品状态：</span>
-              <p>{goodsSelect.find(v => v.value === info.status)?.label}</p>
-            </div>
+            {goodsSta ? (
+              <div className='T1_1rr'>
+                <span>藏品状态：</span>
+                <p>{goodsSta}</p>
+              </div>
+            ) : null}
           </div>
 
           <div className='T1_1 T1_2'>

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

@@ -61,6 +61,7 @@ function A0goodsInfo() {
             style={{ color: '#ff4d4d' }}
             onClick={async () => {
               if (goodsInfo.status === 3) MessageFu.warning('该藏品删除审核中，无法重复删除')
+              else if (goodsInfo.status === 2) MessageFu.warning('该藏品修改审核中，无法删除')
               else {
                 // 创建订单
                 const res = await B4_APIcreate(goodsInfo)

后台管理/src/pages/B4delete/B4look/index.module.scss

@@ -0,0 +1,87 @@
+.B4look {
+  background-color: #fff;
+  border-radius: 10px;
+  font-size: 16px;
+  overflow: auto;
+  padding: 20px;
+  :global {
+    .B4lTit {
+      font-weight: 700;
+      font-size: 18px;
+      color: var(--themeColor);
+      margin-right: 20px;
+    }
+
+    .B4lTop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 15px;
+
+      .B4lTopll {
+        display: flex;
+        align-items: center;
+      }
+      .B4lToprr {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 10;
+      }
+      .B4lTopllBtn {
+        pointer-events: none;
+      }
+    }
+    .B4lTxt {
+      display: flex;
+      flex-wrap: wrap;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #ccc;
+      padding: 15px 0 0;
+      margin-bottom: 15px;
+      .B4lTrow {
+        width: 33%;
+        display: flex;
+        margin-bottom: 15px;
+        .B4lTrow1 {
+          width: 100px;
+          font-weight: 700;
+          text-align: right;
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+        .B4lTrow2 {
+          width: calc(100% - 100px);
+        }
+      }
+      .B4lTrowAll {
+        width: 80%;
+        .B4lTrow1 {
+          position: relative;
+          top: 4px;
+        }
+        .B4lTrow2 {
+          .ant-btn {
+            margin-right: 15px;
+          }
+        }
+      }
+    }
+
+    .B4lGood {
+      border-bottom: 1px solid #ccc;
+      margin: 15px 0 15px;
+      padding-bottom: 15px;
+    }
+
+    .ant-table-wrapper {
+      margin-top: 15px;
+      .ant-table-cell {
+        padding: 8px !important;
+      }
+    }
+  }
+}

后台管理/src/pages/B4delete/B4look/index.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { useParams } from 'react-router-dom'
+import { B1listType } from '@/pages/B1ledger/data'
+import { B4_APIaduit, B4_APIgetInfo } from '@/store/action/B4delete'
+import { API_getFileListByIds } from '@/store/action/B1ledger'
+import { MessageFu } from '@/utils/message'
+import history, { backPageFu } from '@/utils/history'
+import { Button } from 'antd'
+import { statusSelect } from '@/utils/select'
+import TextArea from 'antd/es/input/TextArea'
+import Tab1info from '@/pages/A0goodsInfo/Tab1info'
+import MyTable from '@/components/MyTable'
+import { auditTableC } from '@/utils/tableData'
+function B4look() {
+  const { key, id } = useParams<any>()
+
+  // 订单相关信息
+  const [info, setInfo] = useState({} as B1listType)
+
+  // 藏品相关信息
+  const [goodsInfo, setGoodsInfo] = useState({} as B1listType)
+
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await B4_APIgetInfo(id)
+    if (res.code === 0) {
+      setInfo(res.data)
+
+      const goodsArr = res.data.snaps
+
+      if (goodsArr && goodsArr[0] && goodsArr[0].snap) {
+        const objStr = goodsArr[0].snap
+        try {
+          const obj: B1listType = JSON.parse(objStr)
+          if (obj.fileIds) {
+            const fileArr = obj.fileIds.split(',').map(v => Number(v))
+
+            const res2 = await API_getFileListByIds(fileArr)
+
+            if (res2.code === 0) {
+              obj.file = res2.data
+              setGoodsInfo(obj)
+            }
+          } else setGoodsInfo(obj)
+        } catch (error) {
+          MessageFu.warning('JSON数据错误')
+        }
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (id) getInfoFu(id)
+  }, [getInfoFu, id, key])
+
+  // 审批的sta
+  const [auditSta, setAuDitSta] = useState('')
+  const [rtfOpinion, setRtfOpinion] = useState('')
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
+  // 点击提交
+  const btnOk = useCallback(async () => {
+    if (!auditSta) {
+      MessageFu.warning('请选择审批结果')
+      boxRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
+      return
+    }
+
+    const res = await B4_APIaduit({
+      orderId: id,
+      rtfOpinion,
+      status: auditSta === '同意' ? 1 : 2
+    })
+
+    if (res.code === 0) {
+      MessageFu.success('审批成功')
+      history.replace(`/delete_look/1/${id}`)
+    }
+  }, [auditSta, id, rtfOpinion])
+
+  return (
+    <div className={styles.B4look}>
+      <div className='pageTitle'>藏品删除 - {key === '1' ? '查看' : '审批'}</div>
+
+      {info.id ? (
+        <>
+          <div className='B4lTop'>
+            <div className='B4lTopll'>
+              <div className='B4lTit'>申请信息</div>
+              <div className='B4lTopllBtn'>
+                <Button type='dashed'>
+                  {statusSelect.find(v => v.value === info.status)?.label}
+                </Button>
+              </div>
+            </div>
+            <div className='B4lToprr'>
+              {key === '2' ? (
+                <>
+                  <Button type='primary' onClick={btnOk}>
+                    提交
+                  </Button>
+                  &emsp;
+                </>
+              ) : null}
+              <Button onClick={() => backPageFu('/register')}>返回</Button>
+            </div>
+          </div>
+
+          <div className='B4lTxt'>
+            <div className='B4lTrow'>
+              <div className='B4lTrow1'>订单编号：</div>
+              <div className='B4lTrow2'>{info.num}</div>
+            </div>
+            <div className='B4lTrow'>
+              <div className='B4lTrow1'>订单名称：</div>
+              <div className='B4lTrow2'>藏品删除</div>
+            </div>
+            <div className='B4lTrow'>
+              <div className='B4lTrow1'>发起人：</div>
+              <div className='B4lTrow2'>{info.creatorName + ' - ' + info.createTime}</div>
+            </div>
+
+            {/* 审批相关 */}
+            {key === '2' ? (
+              <>
+                <div className='B4lTrow B4lTrowAll'>
+                  <div className='B4lTrow1'>
+                    <span>* </span>审批结果：
+                  </div>
+                  <div className='B4lTrow2'>
+                    {['同意', '不同意'].map(v => (
+                      <Button
+                        key={v}
+                        onClick={() => setAuDitSta(v)}
+                        type={auditSta === v ? 'primary' : 'default'}
+                      >
+                        {v}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+                <div className='B4lTrow B4lTrowAll' style={{ marginBottom: 25 }}>
+                  <div className='B4lTrow1'>审批意见：</div>
+                  <div className='B4lTrow2'>
+                    <TextArea
+                      value={rtfOpinion}
+                      onChange={e => setRtfOpinion(e.target.value)}
+                      placeholder='请输入内容'
+                      maxLength={200}
+                      showCount
+                    />
+                  </div>
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          <div className='B4lTit'>藏品详情</div>
+
+          <div className='B4lGood'>
+            <Tab1info info={goodsInfo} auto />
+          </div>
+
+          <div className='B4lTit'>申请流程</div>
+
+          <MyTable
+            list={info.audits || []}
+            columnsTemp={auditTableC}
+            pagingInfo={false}
+            widthSet={{ rtfOpinion: 600 }}
+          />
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoB4look = React.memo(B4look)
+
+export default MemoB4look

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

@@ -1,4 +1,18 @@
 .B4delete {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
   :global {
+    .B4top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      .B4topll {
+        display: flex;
+      }
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
   }
 }

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

@@ -1,9 +1,211 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { Button, DatePicker, Input, Select } from 'antd'
+import { useDispatch, useSelector } from 'react-redux'
+import { B2fromDataBase } from '../B2register/data'
+import { B4_APIgetlist, B4_APIresubmit } from '@/store/action/B4delete'
+import { RootState } from '@/store'
+import { B1listType } from '../B1ledger/data'
+import history, { aduitBtnRoleFu, resubmitBtnRoleFu } from '@/utils/history'
+import { B2tableC } from '@/utils/tableData'
+import MyTable from '@/components/MyTable'
+import { B2devFu } from '@/utils/deriveFu'
+import { statusSelect } from '@/utils/select'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { API_getGoodsInfo } from '@/store/action/B1ledger'
+import { MessageFu } from '@/utils/message'
+
+const { RangePicker } = DatePicker
+
 function B4delete() {
+  const dispatch = useDispatch()
+  const [formData, setFormData] = useState({ ...B2fromDataBase, type: 'SC' })
+
+  const getListFu = useCallback(() => {
+    dispatch(B4_APIgetlist(formData))
+  }, [dispatch, formData])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  // 输入框改变
+  const timeRef = useRef(-1)
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'num' | 'snapNum' | 'snapName') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFormData({
+          ...formData,
+          [key]: e.target.value,
+          pageNum: 1
+        })
+      }, 500)
+    },
+    [formData]
+  )
+
+  // 时间选择器改变
+  const timeChange = useCallback(
+    (date: any, dateString: any) => {
+      let startTime = ''
+      let endTime = ''
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + ' 00:00:00'
+        endTime = dateString[1] + ' 23:59:59'
+      }
+      setFormData({ ...formData, startTime, endTime, pageNum: 1 })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1)
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now())
+    setFormData({ ...B2fromDataBase, type: 'SC' })
+  }, [])
+
+  // 从仓库拿数据
+  const tableInfo = useSelector((state: RootState) => state.B4delete.tableInfo)
+
+  // 点击重新提交
+  const resubmitFu = useCallback(
+    async (item: B1listType) => {
+      // 先拿详情
+      const res1 = await API_getGoodsInfo(item.goodIds)
+      if (res1.code === 0) {
+        const obj = res1.data
+        const res2 = await B4_APIresubmit(item.id, obj)
+        if (res2.code === 0) {
+          MessageFu.success('重新提交成功')
+          getListFu()
+        }
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: B1listType) => {
+          return (
+            <>
+              <Button
+                size='small'
+                type='text'
+                onClick={() => history.push(`/delete_look/1/${item.id}`)}
+              >
+                查看
+              </Button>
+
+              {aduitBtnRoleFu(item) ? (
+                <Button
+                  size='small'
+                  type='text'
+                  onClick={() => history.push(`/delete_look/2/${item.id}`)}
+                >
+                  审批
+                </Button>
+              ) : null}
+
+              {resubmitBtnRoleFu(item) ? (
+                <MyPopconfirm
+                  txtK='重新提交'
+                  onConfirm={() => resubmitFu(item)}
+                  Dom={
+                    <Button size='small' type='text'>
+                      重新提交
+                    </Button>
+                  }
+                />
+              ) : null}
+            </>
+          )
+        }
+      }
+    ]
+  }, [resubmitFu])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+    },
+    [formData]
+  )
+
   return (
     <div className={styles.B4delete}>
       <div className='pageTitle'>藏品删除</div>
+
+      <div className='B4top'>
+        <div className='B4topll' key={inputKey}>
+          <Input
+            placeholder='申请编号'
+            maxLength={30}
+            showCount
+            allowClear
+            onChange={e => txtChangeFu(e, 'num')}
+            style={{ width: 200 }}
+          />
+          &emsp;
+          <Input
+            placeholder='藏品编号'
+            maxLength={30}
+            showCount
+            allowClear
+            onChange={e => txtChangeFu(e, 'snapNum')}
+            style={{ width: 200 }}
+          />
+          &emsp;
+          <Input
+            placeholder='藏品名称'
+            maxLength={30}
+            showCount
+            allowClear
+            onChange={e => txtChangeFu(e, 'snapName')}
+            style={{ width: 200 }}
+          />
+          &emsp;
+          <RangePicker
+            placeholder={['发起日期起', '发起日期终']}
+            style={{ width: 240 }}
+            onChange={timeChange}
+          />
+          &emsp;
+          <Select
+            allowClear
+            style={{ width: 200 }}
+            placeholder='申请状态'
+            options={statusSelect}
+            value={formData.status}
+            onChange={e => setFormData({ ...formData, status: e })}
+          />
+          &emsp;
+        </div>
+        <div className='B4toprr'>
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type='primary' onClick={() => B2devFu(formData, '藏品删除')}>
+            数据导出
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <MyTable
+        yHeight={655}
+        list={tableInfo.list}
+        columnsTemp={B2tableC}
+        lastBtn={tableLastBtn}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+      />
     </div>
   )
 }

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

@@ -148,5 +148,11 @@ export const routerSon: RouterTypeRow = [
     name: '藏品修改-查看',
     path: '/edit_look/:key/:id',
     Com: React.lazy(() => import('../B3edit/B3look'))
+  },
+  {
+    id: 600,
+    name: '藏品删除-查看',
+    path: '/delete_look/:key/:id',
+    Com: React.lazy(() => import('../B4delete/B4look'))
   }
 ]

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

@@ -30,7 +30,7 @@ export const API_addGoods = (data: any) => {
 /**
  * 藏品详情-获取详情
  */
-export const API_getGoodsInfo = (id: number) => {
+export const API_getGoodsInfo = (id: number | string) => {
   return http.get(`cms/goods/detail/${id}`)
 }