古桥档案

后台管理/src/components/MyTable/index.tsx

@@ -21,6 +21,8 @@ type Props = {
   myTitle?: { name: string; Com: React.ReactNode }
   // 为空的定制字段
   isNull?: string
+  // 设置宽度
+  widthSet?: any
 }
 
 // 表格内容定制化
@@ -53,7 +55,8 @@ function MyTable({
   classKey = '',
   merge,
   myTitle,
-  isNull = '（空）'
+  isNull = '（空）',
+  widthSet
 }: Props) {
   useEffect(() => {
     const dom = document.querySelector(`.MyTable${classKey} .ant-table-body`) as HTMLDivElement
@@ -134,6 +137,7 @@ function MyTable({
     const arr: any = columnsTemp.map((v: any) => ({
       title: myTitle && v.includes(myTitle.name) ? myTitle.Com : v[1],
       render: dataChangeFu(v),
+      width: widthSet && Reflect.get(widthSet, v[2]) ? Reflect.get(widthSet, v[2]) : 'auto',
       onCell:
         merge && v.includes(merge.type)
           ? // {rowSpan:3}
@@ -144,7 +148,7 @@ function MyTable({
     }))
 
     return arr
-  }, [columnsTemp, dataChangeFu, merge, myTitle])
+  }, [columnsTemp, dataChangeFu, merge, myTitle, widthSet])
 
   return (
     <Table

后台管理/src/components/Z3upFiles/data.ts

@@ -0,0 +1,63 @@
+import store from '@/store'
+import { baseURL } from '@/utils/http'
+
+// 查看 权限 图片 /视频 、音频
+export const authFilesLookFu = (name: string, url: string) => {
+  let flag = false
+
+  const nameRes = name ? name : ''
+
+  // pdf和txt 直接新窗口打开
+  const arr0: ('.pdf' | '.txt')[] = ['.pdf', '.txt']
+  arr0.forEach(v => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      if (url) window.open(baseURL + url)
+      flag = true
+    }
+  })
+
+  // 图片使用 antd的图片预览组件
+  const arr1 = ['.png', '.jpg', '.jpeg', '.gif']
+  arr1.forEach(v => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      if (url) {
+        store.dispatch({
+          type: 'layout/lookBigImg',
+          payload: {
+            url: baseURL + url,
+            show: true
+          }
+        })
+      }
+
+      flag = true
+    }
+  })
+
+  // 视频和音频 使用自己的封装的组件
+  let type: '' | 'video' | 'audio' = ''
+  const arr2 = ['.mp3', '.wav']
+  arr2.forEach(v => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      type = 'audio'
+      flag = true
+    }
+  })
+
+  if (nameRes.toLowerCase().endsWith('.mp4')) {
+    type = 'video'
+    flag = true
+  }
+
+  if (type && url) {
+    store.dispatch({
+      type: 'layout/lookDom',
+      payload: {
+        src: url,
+        type
+      }
+    })
+  }
+
+  return flag
+}

后台管理/src/components/Z3upFiles/index.module.scss

@@ -0,0 +1,72 @@
+.Z3upFiles {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+
+    .Z3files {
+      width: 500px;
+      // padding-top: 6px;
+
+      .Z3filesRow {
+        display: flex;
+        margin-top: 5px;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        border-bottom: 1px dashed #999;
+        padding-bottom: 5px;
+
+        .Z3files1 {
+          width: calc(100% - 130px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .Z3files2 {
+          display: flex;
+          width: 120px;
+          justify-content: flex-end;
+
+          &>span {
+            cursor: pointer;
+          }
+
+          a {
+            color: black;
+          }
+        }
+      }
+    }
+
+    .fileTit {
+      margin-top: 14px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+
+      .noUpThumb {
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: top .2s;
+        color: #ff4d4f;
+        top: -10px;
+      }
+
+
+
+      .noUpThumbAc {
+        top: 0;
+        opacity: 1;
+      }
+    }
+
+    .lookNone {
+      position: relative;
+      top: 4px;
+      left: 10px;
+    }
+  }
+}

后台管理/src/components/Z3upFiles/index.tsx

@@ -0,0 +1,201 @@
+import React, { useCallback, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { FileImgListType } from '@/types'
+import { API_upFile } from '@/store/action/layout'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { forwardRef, useImperativeHandle } from 'react'
+import { Button, Popconfirm } from 'antd'
+import { UploadOutlined, CloseOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons'
+import classNames from 'classnames'
+import { baseURL } from '@/utils/http'
+import { authFilesLookFu } from './data'
+
+type Props = {
+  isLook: boolean //是否是查看
+  ref: any //当前自己的ref，给父组件调用
+  fileCheck: boolean
+  dirCode: string //文件的code码
+  myUrl: string
+  fromData?: any
+  accept?: string
+  // result:成果 | list:清单
+  type?: string
+  tips?: string
+  // 文件大小
+  size?: number
+}
+
+function Z3upFiles(
+  {
+    isLook,
+    type = 'doc',
+    fileCheck,
+    dirCode,
+    myUrl,
+    fromData,
+    accept = '.zip',
+    tips = '此处的附件为对外的项目成果文件，仅支持zip格式，最多10个；单个附件不得超过500M',
+    size
+  }: Props,
+  ref: any
+) {
+  const [fileList, setFileList] = useState<FileImgListType[]>([])
+
+  // 给父组件调用 回显
+  const showList = useCallback((list: FileImgListType[]) => {
+    setFileList(list)
+  }, [])
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传文件
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        // 校验格式
+        if (!filesInfo.name.includes('.zip') && accept !== '*') {
+          e.target.value = ''
+          return MessageFu.warning(`只支持zip格式!`)
+        }
+
+        // 校验大小
+        if (size && filesInfo.size > size * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning(`最大支持${size}M!`)
+        }
+
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', type)
+        fd.append('dirCode', dirCode)
+        fd.append('isCompress', 'true')
+        fd.append('isDb', 'true')
+        fd.append('file', filesInfo)
+
+        if (fromData) {
+          for (const k in fromData) {
+            if (fromData[k]) fd.append(k, fromData[k])
+          }
+        }
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            setFileList([...fileList, res.data])
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [accept, dirCode, fileList, fromData, myUrl, size, type]
+  )
+
+  // 列表删除某一个文件
+  const delImgListFu = useCallback(
+    async (id: number) => {
+      const newItems = fileList.filter(v => v.id !== id)
+      setFileList(newItems)
+    },
+    [fileList, setFileList]
+  )
+
+  // 让父组件调用，拿到 附件信息
+  const filesIdRes = useCallback(() => {
+    return fileList.map(v => v.id)
+  }, [fileList])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    filesIdRes,
+    showList
+  }))
+
+  return (
+    <div className={styles.Z3upFiles}>
+      <input
+        id='upInput'
+        type='file'
+        accept={accept}
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+      <div className='Z3Btn'>
+        {isLook ? null : (
+          <Button
+            onClick={() => myInput.current?.click()}
+            icon={<UploadOutlined rev={undefined} />}
+          >
+            上传
+          </Button>
+        )}
+
+        <div className='Z3files'>
+          {fileList.map(v => (
+            <div className='Z3filesRow' key={v.id}>
+              <div className='Z3files1' title={v.fileName}>
+                {v.fileName}
+              </div>
+              <div className='Z3files2'>
+                {authFilesLookFu(v.fileName, '') ? (
+                  <>
+                    <EyeOutlined
+                      rev={undefined}
+                      title='查看'
+                      onClick={() => authFilesLookFu(v.fileName, v.filePath)}
+                    />
+                    &emsp;
+                  </>
+                ) : null}
+                <a
+                  title='下载'
+                  href={baseURL + v.filePath}
+                  download={v.fileName}
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  <DownloadOutlined rev={undefined} />
+                </a>
+                &emsp;
+                <Popconfirm
+                  title='删除后无法恢复，是否删除?'
+                  okText='删除'
+                  cancelText='取消'
+                  onConfirm={() => delImgListFu(v.id)}
+                  okButtonProps={{ loading: false }}
+                >
+                  <CloseOutlined rev={undefined} title='删除' hidden={isLook} />
+                </Popconfirm>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className='fileTit' hidden={isLook}>
+          {tips}
+          <br />
+          <div
+            className={classNames(
+              'noUpThumb',
+              fileList.length <= 0 && fileCheck ? 'noUpThumbAc' : ''
+            )}
+          >
+            请上传视频!
+          </div>
+        </div>
+      </div>
+      {isLook && fileList.length <= 0 ? <div className='lookNone'>（空）</div> : null}
+    </div>
+  )
+}
+
+export default forwardRef(Z3upFiles)

后台管理/src/pages/A1record/A1look/index.tsx

@@ -7,6 +7,7 @@ import ImageLazy from '@/components/ImageLazy'
 import A1edit from '../A1edit'
 import A1tab1introduce from '../A1tab1introduce'
 import A1tab2file from '../A1tab2file'
+import A1tab3log from '../A1tab3log'
 
 type Props = {
   sId: number
@@ -139,6 +140,7 @@ function A1look({ sId, closeFu }: Props) {
           <div className='A1Lbtn2'>
             {btnAc === '古桥介绍' ? <A1tab1introduce sInfo={info} upInfoFu={getInfoFu} /> : null}
             {btnAc === '附件管理' ? <A1tab2file sId={sId} /> : null}
+            {btnAc === '维护记录' ? <A1tab3log sId={sId} /> : null}
           </div>
         </div>
       </div>

后台管理/src/pages/A1record/A1tab2file/index.tsx

@@ -97,7 +97,7 @@ function A1tab2file({ sId }: Props) {
     [getListFu]
   )
 
-  // 下拉框改变
+  // 表格下拉框改变
   const effectDictIdChange = useCallback(
     async (id: number, effectDictId: number) => {
       const res = await A1_APIfileSave({ id, effectDictId })

后台管理/src/pages/A1record/A1tab3log/A1T3add/index.module.scss

@@ -0,0 +1,50 @@
+.A1T3add {
+  position: relative;
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal-header {
+      border-bottom: 1px solid #ccc !important;
+      padding-bottom: 10px !important;
+      margin-bottom: 20px !important;
+    }
+    .ant-modal {
+      width: 1000px !important;
+
+      .ant-form {
+        width: calc(100% - 80px);
+        padding-right: 20px;
+        max-height: 500px;
+        min-height: 280px;
+        overflow-y: auto;
+        padding-bottom: 40px;
+      }
+
+      .ant-form-item-label {
+        width: 81px;
+      }
+      .formRow {
+        display: flex;
+        .formRowll {
+          padding-top: 5px;
+          width: 81px;
+          text-align: right;
+        }
+        .formRowrr {
+          width: calc(100% - 81px);
+          .fileTit {
+            display: none;
+          }
+        }
+      }
+
+      .A1T3btn {
+        position: absolute;
+        right: 25px;
+        top: 55%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}

后台管理/src/pages/A1record/A1tab3log/A1T3add/index.tsx

@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Form, FormInstance, Modal, Select } from 'antd'
+import { A1_APIlogGetInfo, A1_APIlogSave } from '@/store/action/A1record'
+import { MessageFu } from '@/utils/message'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import TextArea from 'antd/es/input/TextArea'
+import Z3upFiles from '@/components/Z3upFiles'
+
+export type A3T3addInfoType = {
+  txt: '查看' | '编辑' | '新增' | ''
+  id: number
+}
+
+type Props = {
+  addInfo: A3T3addInfoType
+  closeFu: () => void
+  upTableFu: () => void
+  bridgeId: number
+}
+
+function A1T3add({ addInfo, closeFu, upTableFu, bridgeId }: Props) {
+  const listObj = useSelector((state: RootState) => state.A3dict.listObj)
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  const listFilesRef = useRef<any>(null)
+
+  // 编辑进来获取详情
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A1_APIlogGetInfo(id)
+
+    if (res.code === 0) {
+      const data = res.data
+
+      listFilesRef.current.showList(data.file)
+
+      FormBoxRef.current?.setFieldsValue(data)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (addInfo.txt !== '新增') getInfoFu(addInfo.id)
+  }, [getInfoFu, addInfo])
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, [])
+
+  //  通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const listFilesRes = listFilesRef.current.filesIdRes()
+
+      const obj = {
+        ...values,
+        id: addInfo.txt === '新增' ? null : addInfo.id,
+        bridgeId,
+        fileIds: listFilesRes.join(',')
+      }
+
+      // if (1 + 1 === 2) {
+      //   console.log('------222', obj)
+      //   return
+      // }
+
+      const res = await A1_APIlogSave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(`${addInfo.txt}成功`)
+        upTableFu()
+        closeFu()
+      }
+    },
+    [addInfo.id, addInfo.txt, bridgeId, closeFu, upTableFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.A1T3add}
+      open={true}
+      title={`${addInfo.txt}记录`}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <Form
+        ref={FormBoxRef}
+        name='basic'
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete='off'
+        scrollToFirstError
+      >
+        <Form.Item
+          label='维护类型'
+          name='dictId'
+          rules={[{ required: true, message: '请选择维护类型' }]}
+        >
+          <Select
+            disabled={addInfo.txt === '查看'}
+            placeholder='请选择'
+            options={listObj.maintain.map(v => ({ value: v.id, label: v.name }))}
+          />
+        </Form.Item>
+
+        <Form.Item label='维护详情' name='intro'>
+          <TextArea
+            readOnly={addInfo.txt === '查看'}
+            placeholder={addInfo.txt === '查看' ? '（空）' : '请输入'}
+            maxLength={2000}
+            showCount
+          />
+        </Form.Item>
+
+        <div className='formRow'>
+          <div className='formRowll'>附件：</div>
+          <div className='formRowrr'>
+            <Z3upFiles
+              accept='*'
+              isLook={addInfo.txt === '查看'}
+              ref={listFilesRef}
+              fileCheck={false}
+              dirCode='A1recordTab3File'
+              myUrl='cms/maintain/upload'
+              tips=''
+            />
+          </div>
+        </div>
+
+        {/* 确定和取消按钮 */}
+        <Form.Item className='A1T3btn'>
+          {addInfo.txt === '查看' ? (
+            <Button onClick={closeFu}>关闭</Button>
+          ) : (
+            <>
+              <Button type='primary' htmlType='submit'>
+                提交
+              </Button>
+              <br />
+              <br />
+              <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+            </>
+          )}
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+const MemoA1T3add = React.memo(A1T3add)
+
+export default MemoA1T3add

后台管理/src/pages/A1record/A1tab3log/index.module.scss

@@ -0,0 +1,18 @@
+.A1tab3log {
+  :global {
+    .A1T3top {
+      display: flex;
+      justify-content: space-between;
+      .A1T3top1 {
+        display: flex;
+        & > div {
+          margin-right: 20px;
+        }
+      }
+      margin-bottom: 15px;
+    }
+    .ant-table-cell {
+      padding: 8px !important;
+    }
+  }
+}

后台管理/src/pages/A1record/A1tab3log/index.tsx

@@ -0,0 +1,195 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { Button, Input, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { A1_APIlogDel, A1_APIlogGetList } from '@/store/action/A1record'
+import { MessageFu } from '@/utils/message'
+import MyTable from '@/components/MyTable'
+import A1T3add, { A3T3addInfoType } from './A1T3add'
+
+type ListType = {
+  id: number
+  dictId: number
+}
+
+type FromDataType = {
+  dictId: number | null
+  searchKey: string
+  type: string | null
+}
+
+const baseFromData: FromDataType = {
+  dictId: null,
+  searchKey: '',
+  type: null
+}
+
+type Props = {
+  sId: number
+}
+
+function A1tab3log({ sId }: Props) {
+  const listObj = useSelector((state: RootState) => state.A3dict.listObj)
+
+  const [fromData, setFromData] = useState(baseFromData)
+
+  const [list, setList] = useState<ListType[]>([])
+
+  const getListFu = useCallback(async () => {
+    const res = await A1_APIlogGetList({ ...fromData, bridgeId: sId, pageNum: 1, pageSize: 99999 })
+
+    if (res.code === 0) {
+      setList(res.data || [])
+    }
+  }, [fromData, sId])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  // 作品名称的输入
+  const timeRef = useRef(-1)
+  const [inputKey, setInputKey] = useState(0)
+  const fromKeyChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({ ...fromData, [key]: e.target.value })
+      }, 500)
+    },
+    [fromData]
+  )
+
+  // 下拉框的改变
+  const selectChangeFu = useCallback(
+    (value: any, key: 'type' | 'dictId') => {
+      setFromData({ ...fromData, [key]: value })
+    },
+    [fromData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setInputKey(Date.now())
+    setFromData({ ...baseFromData })
+  }, [])
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await A1_APIlogDel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const staBtn = useMemo(() => {
+    return [
+      {
+        title: '维护类型',
+        render: (item: ListType) => listObj.maintain.find(v => v.id === item.dictId)?.name
+      }
+    ]
+  }, [listObj.maintain])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: ListType) => {
+          return (
+            <>
+              <Button
+                size='small'
+                type='text'
+                onClick={() => setAddInfo({ txt: '查看', id: item.id })}
+              >
+                查看
+              </Button>
+              <Button
+                size='small'
+                type='text'
+                onClick={() => setAddInfo({ txt: '编辑', id: item.id })}
+              >
+                编辑
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增编辑、查看
+  const [addInfo, setAddInfo] = useState({} as A3T3addInfoType)
+
+  return (
+    <div className={styles.A1tab3log}>
+      <div className='A1T3top'>
+        <div className='A1T3top1'>
+          <div>
+            <Input
+              key={inputKey}
+              maxLength={50}
+              showCount
+              style={{ width: 400 }}
+              placeholder='请输入维护详情'
+              allowClear
+              onChange={e => fromKeyChangeFu(e, 'searchKey')}
+            />
+          </div>
+
+          <div>
+            <Select
+              allowClear
+              style={{ width: 200 }}
+              placeholder='维护类型'
+              value={fromData.dictId || null}
+              onChange={e => selectChangeFu(e, 'dictId')}
+              options={listObj.maintain.map(v => ({ value: v.id, label: v.name }))}
+            />
+          </div>
+        </div>
+        <div className='A1T3top2'>
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type='primary' onClick={() => setAddInfo({ txt: '新增', id: -1 })}>
+            新增
+          </Button>
+        </div>
+      </div>
+
+      <MyTable
+        classKey='A1tab3file'
+        list={list}
+        columnsTemp={[
+          ['text', '维护详情', 'intro', 50],
+          ['txt', '编辑人', 'creatorName'],
+          ['txt', '编辑时间', 'updateTime']
+        ]}
+        staBtn={staBtn}
+        lastBtn={tableLastBtn}
+        pagingInfo={false}
+        widthSet={{ intro: 700 }}
+      />
+
+      {addInfo.txt ? (
+        <A1T3add
+          addInfo={addInfo}
+          closeFu={() => setAddInfo({ txt: '', id: 0 })}
+          upTableFu={getListFu}
+          bridgeId={sId}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+const MemoA1tab3log = React.memo(A1tab3log)
+
+export default MemoA1tab3log

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

@@ -42,6 +42,7 @@ export const A1_APIgetInfo = (id: number) => {
 }
 
 // ----------------附件管理---------------------
+
 /**
  * 古桥档案-附件管理-获取列表
  */
@@ -62,3 +63,33 @@ export const A1_APIfileDel = (id: number) => {
 export const A1_APIfileSave = (data: any) => {
   return http.post('cms/bridgeFile/save', data)
 }
+
+// ----------------维护记录---------------------
+
+/**
+ * 古桥档案-维护记录-获取列表
+ */
+export const A1_APIlogGetList = (data: any) => {
+  return http.post('cms/maintain/getList', data)
+}
+
+/**
+ * 古桥档案--维护记录-删除
+ */
+export const A1_APIlogDel = (id: number) => {
+  return http.get(`cms/maintain/remove/${id}`)
+}
+
+/**
+ * 古桥档案--维护记录-新增、编辑
+ */
+export const A1_APIlogSave = (data: any) => {
+  return http.post('cms/maintain/save', data)
+}
+
+/**
+ * 古桥档案--维护记录-获取详情
+ */
+export const A1_APIlogGetInfo = (id: number) => {
+  return http.get(`cms/maintain/detail/${id}`)
+}