文档管理接口联调

src/pages/FileManagement/components/PreModal.js

@@ -0,0 +1,68 @@
+import { Checkbox, Modal, Radio } from "antd";
+import { useRef, useEffect, useMemo } from "react";
+import style from './index.less'
+import { useRequest } from '@umijs/max';
+
+const PerModal = ({ node,auditList, visible, handleCancel, handleOk }) => {
+  console.log(node)
+  const checkedValuesRef = useRef([])
+  const auditItem= useRef()
+  const data = [
+    { name: "文件权限", id: "DDMultiSelectField_2e553cd3-094e-4a34-8a2a-40271d6b107e", value: ["删除", "下载"] },
+    { name: "文件名称", id: "TextField_663c9a4e - 26c7- 408e-ac90 - fac20e796edf", value: ["文件夹1"] },
+    { name: "文件id", id: "TextField_1d1334ed - 1944 - 4e59 - 97db - 2d8615acf7c6", value: ["2"] },
+    { name: "文件类型", id: "TextField_1d1334ed - 1944 - 4e59 - 97db - 2d8615acf7c7", value: ["2"] }
+  ]
+  const options = useMemo(() => {
+   return node?.dir_type ? [
+    { label: '下载', value: 1},
+    { label: '删除', value:2 }
+  ] : [
+    { label: '下载', value: 1}
+  ];
+  }, [node]) 
+
+  const onChange = (checkedValues) => {
+    checkedValuesRef.current = checkedValues;
+    console.log('checked = ', checkedValues);
+  };
+  const handleOkClick = () => {
+    data[0].value = checkedValuesRef.current;
+    data[1].value = [node?.dir_name];
+    data[2].value = [node?.id.toString()];
+    data[3].value = [node?.dir_type.toString()];
+
+    const result = {
+      flow_id: auditItem.current,
+      form: JSON.stringify(data),
+      audit_list:[448],
+      files: '',
+    }
+    console.log(data, auditItem.current);
+    handleOk?.(result)
+  }
+  return (
+    <Modal
+      title="权限申请"
+      open={visible}
+      onOk={handleOkClick}
+      onCancel={handleCancel}
+      destroyOnClose
+      width={800}
+    >
+      <div className={style.title}>申请权限对象：</div>
+      <div className={style.content}>{node?.dir_name}</div>
+      <div className={style.title}>选择权限：</div>
+      <div className={style.content}>
+        <Checkbox.Group options={options} onChange={onChange} />
+      </div>
+      <div className={style.title}>可选流程：</div>
+      <Radio.Group onChange={onChange}>
+       {auditList?.map(item=><Radio value={item?.id} onChange={(e)=>{auditItem.current = e.target.value}}>{item?.name}</Radio>)}
+      </Radio.Group>
+
+    </Modal>
+  );
+}
+  
+export default PerModal

src/pages/FileManagement/components/index.less

@@ -0,0 +1,9 @@
+.title{
+  font-weight: bold;
+  margin: 10px 0;
+}
+.content{
+  border: 1px solid #ddd;
+  padding: 10px 20px;
+  border-radius: 5px;
+}

src/pages/FileManagement/components/model.jsx

@@ -15,7 +15,9 @@ const AddFileModal = ({ id, visible, handleOk, handleCancel }) => {
       onOk={onChange}
       onCancel={handleCancel}
     >
-      <div>
+      <div
+        style={{ display: 'flex', whiteSpace: 'nowrap', alignItems: 'center' }}
+      >
         文件名：
         <Input
           defaultValue={'新建文件夹'}

src/pages/FileManagement/index.js

@@ -21,36 +21,23 @@ import {
   queryDirCreate,
   queryDirList,
   queryFileList,
+  queryFileUpload,
   queryOAFile,
+  querySetPermit,
+  queryFileDownload,
 } from '../../services/file';
 import { queryGetContractList } from '../../services/contract';
 import { downloadFile, getToken } from '@/utils/utils';
 import { PlusOutlined } from '@ant-design/icons';
 import AddFileModal from './components/model';
-
-const temp = [
-  {
-    id: 999,
-    dir_name: '受控文件',
-    children: [],
-  },
-  {
-    id: 998,
-    dir_name: '部门文件',
-    children: [],
-  },
-];
+import PerModal from './components/PreModal';
+import { queryAuditList, createAduit } from '@/services/boom';
 
 const tempData = [
   { name: '文件1', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
   { name: '文件2', upload_user: '管理员', upload_time: '2023-04-10 11:00:00' },
 ];
 
-const tempPer = [
-  { name: '管理员', list: 1, read: 1, download: 1, delete: 1, permission: 1 },
-  { name: '徐俊杰', list: 1, read: 1, download: 0, delete: 0, permission: 0 },
-];
-
 const { DirectoryTree } = Tree;
 const { Search } = Input;
 const { RangePicker } = DatePicker;
@@ -58,39 +45,67 @@ const { RangePicker } = DatePicker;
 function FileManagement(props) {
   const [form] = Form.useForm();
   const { user } = useModel('userInfo');
-  const [treeData, setTreeData] = useState(temp);
+  const [tableData , setTableData] = useState([])
   const [visible, setVisible] = useState(false);
-  const [id, setId] = useState();
-
-  const [fileType, setType] = useState(null);
-
-  const {} = useRequest((data) => queryDirList(data), {
-    onSuccess: (data) => {
-      console.log(data);
-      const result = [...temp];
-      result[0].children = data.limit_list;
-      result[1] = data.list[0];
-      setTreeData(result);
-      console.log(result);
+  const [node, setNode] = useState();
+  const [selectedRowKeys, setSelectedRowKeys] = useState([])
+
+  const { data:treeData, run: runFileDir } = useRequest((data) => queryDirList(data), {
+    formatResult: (res) => {
+      const result = [];
+      result[0] = res?.data.limit_list[0];
+      result[1] = res?.data.list[0];
+      return result
     },
   });
 
-  const { data, loading, run } = useRequest((data) => queryFileList(data), {
+  const { loading, run } = useRequest((data) => queryFileList(data), {
     manual: true,
+    onSuccess: (data) => {
+      let result = data?.list?.map((item, idx) => {
+        return {...item, dir_name:item.file_name, create_time: item.created_on, key:idx }
+      }) || []
+      setTableData(result)
+      setSelectedRowKeys([])
+    }
   });
 
   const {
-    data: OAdata,
     loading: OAloading,
     run: runOA,
-  } = useRequest((data) => queryOAFile(data), { manual: true });
+  } = useRequest((data) => queryOAFile(data), {
+    manual: true,
+    onSuccess: (data) => {
+      let result = data?.list.map((item, idx) => {
+        let name
+        if (item?.name) {
+          name = item.name
+        } else if (item?.path) {
+          const list = item.path.split('/');
+          name = list?.length > 0 ? list[list.length - 1] : "-";
+        } else if (item?.url) {
+          const list = item?.url?.split('/');
+          name = list?.length > 0 ? list[list.length - 1] : "-";
+        }
+        return {...item, dir_name:name, create_time: dayjs(item.c_time).format('YYYY-MM-DD'), key:idx}
+      }) || []
+      setTableData(result)
+      setSelectedRowKeys([])
+    }
+  });
 
   const {
-    data: contractData,
     loading: contractLoading,
     run: runContract,
   } = useRequest((data) => queryGetContractList({ ...data, status: 3 }), {
     manual: true,
+    onSuccess: (data) => {
+      let result = data?.list.map((item, idx) => {
+        return {...item, dir_name:item.name, create_time: item.created_on, key:idx }
+      }) || []
+      setTableData(result)
+      setSelectedRowKeys([])
+    }
   });
 
   const { loading: createLoading, run: RunCreate } = useRequest(
@@ -98,6 +113,8 @@ function FileManagement(props) {
     {
       manual: true,
       onSuccess: () => {
+        setVisible(false);
+        runFileDir()
         message.success('创建成功');
       },
       onError: () => {
@@ -105,6 +122,51 @@ function FileManagement(props) {
       },
     },
   );
+  //申请权限
+  const { loading:perLoading, run:runPer } = useRequest((data) => querySetPermit(data), {
+    manual: true,
+    onSuccess: (data) => {
+      message.success('申请成功')
+    },
+    onError: () => {
+      message.error('申请失败')
+    }
+  });
+
+  //上传文件
+  const { run:runUploadFiles} = useRequest((data) => queryFileUpload(data), {
+    manual: true,
+    onSuccess: (data) => {
+      updateTableFile(node)
+      message.success('文件上传成功')
+    },
+    onError: () => {
+      message.error('文件上传失败')
+    }
+  })
+
+  //文件审批列表
+  const { data: auditList} = useRequest(() => queryAuditList({ flow_type: 1 }));
+  //发起申请权限的文件审批
+  const { loading: createLoadin, run:runAuditCreate  } = useRequest(createAduit, {
+    manual: true,
+    onSuccess() {
+      message.success('申请审批成功');
+      setPerOpen(false);
+    },
+  });
+
+  //下载文件
+  const { data: fileData, run:runDownload } = useRequest((data) => queryFileDownload(data), {
+    manual: true,
+    onSuccess: (data) => {
+      console.log("==================", data)
+      message.success('文件下载成功')
+    },
+    onError: (data) => {
+      message.error('文件下载失败')
+    }
+  })
 
   const [expandedKeys, setExpandedKeys] = useState([]);
   const [searchValue, setSearchValue] = useState('');
@@ -113,7 +175,7 @@ function FileManagement(props) {
   const [editPer, setEditPer] = useState(false);
 
   const columns = [
-    { title: '文档名称', dataIndex: 'file_name' },
+    { title: '文档名称', dataIndex: 'dir_name' },
     { title: '上传人员', dataIndex: 'user_name' },
     {
       title: '上传时间',
@@ -123,73 +185,15 @@ function FileManagement(props) {
     {
       title: '操作',
       render: (_, record) => (
-        <>
+        <Space>
+          <a onClick={()=>{}}>查看</a>
           <a onClick={() => onDownload(record)}>下载</a>
-          <Divider type="vertical" />
-          <a>删除</a>
-        </>
+          {node?.dir_type == 0 && <a>删除</a>}
+        </Space>
       ),
     },
   ];
 
-  const OAcolumns = [
-    { title: '文档名称', dataIndex: 'name' },
-    { title: '上传人员', dataIndex: ['CreatorUser', 'CName'] },
-    {
-      title: '上传时间',
-      dataIndex: 'c_time',
-      render: (text) => dayjs(text).format('YYYY-MM-DD'),
-    },
-    {
-      title: '操作',
-      render: (_, record) => <a onClick={() => onDownloadOA(record)}>下载</a>,
-    },
-  ];
-
-  const contractColumns = [
-    { title: '文档名称', dataIndex: 'name' },
-    { title: '上传人员', dataIndex: 'created_name' },
-    { title: '上传时间', dataIndex: 'created_on' },
-    {
-      title: '操作',
-      render: (_, record) => (
-        <>
-          <a>下载</a>
-          <Divider type="vertical" />
-          <a>删除</a>
-        </>
-      ),
-    },
-  ];
-
-  const columnsPer = [
-    { title: '用户', dataIndex: 'name' },
-    {
-      title: '查看列表',
-      dataIndex: 'list',
-      render: (value, _) => <Checkbox checked={value} disabled />,
-    },
-    {
-      title: '只读',
-      dataIndex: 'read',
-      render: (value, _) => <Checkbox checked={value} disabled />,
-    },
-    {
-      title: '下载',
-      dataIndex: 'download',
-      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
-    },
-    {
-      title: '删除',
-      dataIndex: 'delete',
-      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
-    },
-    {
-      title: '授权',
-      dataIndex: 'permission',
-      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
-    },
-  ];
 
   // 搜索文件夹树
   const onSearchDirectory = (value, nodes = treeData) => {
@@ -236,66 +240,66 @@ function FileManagement(props) {
       });
   };
 
-  const handleSelect = (SelectKeys, e) => {
-    const node = e.node;
-    if (node?.classify_id == 42 || node?.classify_id == 43) {
-      setType('OA');
-      runOA({ classify_id: node.classify_id });
-    } else if (node.id == 6) {
-      setType('contract');
-      runContract({});
-    } else {
-      setType(null);
-      run({ dir_id: SelectKeys[0] });
+  const findListById = (id) => {
+    if(!id )return 
+    const fun = (data) => {
+      for (let i = 0; i < data.length; i++){
+        let item = data[i];
+        if (item.id == id) {
+          return item.children;
+        }else if(item.children){
+          let res = fun(item.children);
+          if (res) return res;
+        }
+      }
     }
-  };
+    const list = fun(treeData)
 
-  const renderFileTable = () => {
-    let tableColumns = [];
-    let tableData = [];
-    let tableLoading = false;
-
-    switch (fileType) {
-      case 'OA':
-        tableColumns = OAcolumns;
-        tableData = OAdata?.list;
-        tableLoading = OAloading;
-        break;
-      case 'contract':
-        tableColumns = contractColumns;
-        tableData = contractData?.list;
-        tableLoading = contractLoading;
-        break;
-      default:
-        tableColumns = columns;
-        tableData = data?.list;
-        tableLoading = loading;
-        break;
+    return list?.map((item, idx) => { return { ...item, key :idx} })
+  }
+
+  const updateTableFile = (node) => {
+    if (node.id == 1) {
+      //点击受控文件直接把文件夹下的文件夹列表显示出来
+      setTableData(findListById(1))
+      setSelectedRowKeys([])
+    } else if (node.id == 3) {
+      //点击合同文件直接把文件夹下的文件夹列表显示出来
+      setTableData(findListById(3))
+      setSelectedRowKeys([])
+    } else if (node.id == 7) {
+      //合同归档走合同接口
+      runContract({});
+    } else if(node.is_limit){
+      //其他受控文件走classify_id
+      runOA({ classify_id: node.classify_id });
+    } else {
+      //部门文件
+      run({ dir_id:node.id })
     }
+  }
 
-    return (
-      <Table
-        columns={tableColumns}
-        dataSource={tableData}
-        loading={tableLoading}
-        style={{ overflowY: 'auto' }}
-        pagination={false}
-      />
-    );
+  const handleSelect = (SelectKeys, e) => {
+    console.log(e, SelectKeys)
+    const node = e.node;
+    setNode(node)
+    updateTableFile(e.node)
   };
 
+
   const onDownload = (record) => {
-    const token = getToken();
+    runDownload({file_id:record.id, path:record.path, file_type:node.dir_type })
+    // const token = getToken();
     // downloadFile(
     //   `/api/archive/v1/file/download?file_id=${record.id}&JWT-TOKEN=${token}`,
     //   record.file_name,
     //   false,
     // );
-    downloadFile(
-      `http://47.96.12.136:8888/api/archive/v1/file/download?file_id=${record.id}&JWT-TOKEN=${token}`,
-      record.file_name,
-      false,
-    );
+    // downloadFile(
+    //   `http://47.96.12.136:8888/api/archive/v1/file/download?file_id=${record.id}&JWT-TOKEN=${token}`,
+    //   record.file_name,
+    //   false,
+    // );
   };
 
   const onDownloadOA = (record) => {
@@ -303,6 +307,19 @@ function FileManagement(props) {
     downloadFile(record.url, record.name);
   };
 
+  const handleFilesChange = () => {
+    const inputDom = document.getElementById('files');
+    let formData = new FormData()
+    formData.append('dir_id', node.id);
+    formData.append('user_name', user.CName);
+    if (inputDom.files?.length > 0) {
+      for (let i = 0; i < inputDom.files.length; i++){
+        formData.append('files', inputDom.files[i]);
+      }
+      runUploadFiles(formData)
+    }
+  }
+
   return (
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -321,9 +338,9 @@ function FileManagement(props) {
                   <span>{item.dir_name}</span>
                   <Button
                     shape="circle"
-                    icon={<PlusOutlined />}
+                    icon={<PlusOutlined style={{fontSize:'16px'}} />}
                     onClick={() => {
-                      setId(item.id);
+                      setNode(item);
                       setVisible(true);
                     }}
                   />
@@ -348,16 +365,29 @@ function FileManagement(props) {
               </Button>
             </Form.Item>
             <Form.Item>
-              <Button type="primary">上传</Button>
+              <Button type="primary" onClick={ ()=>document.getElementById('files')?.click()} disabled={node ? false : true}>上传</Button>
             </Form.Item>
             <Form.Item>
-              <Button type="primary" onClick={() => setPerOpen(true)}>
+              <Button type="primary" onClick={() => setPerOpen(true)} disabled={node ? false : true}>
                 申请权限
               </Button>
             </Form.Item>
           </Form>
           <div>
-            {renderFileTable()}
+            <Table
+              columns={columns}
+              dataSource={tableData}
+              rowSelection={{
+                selectedRowKeys,
+                onChange: (e) => {
+                  console.log(e)
+                  setSelectedRowKeys(e)
+              }}}
+              loading={OAloading || contractLoading || loading}
+              style={{ overflowY: 'auto' }}
+              childrenColumnName='none'
+              pagination={false}
+            />
             {/* 
             <Button type="primary" onClick={() => setAddOpen(true)}>
               <PlusOutlined />
@@ -389,45 +419,34 @@ function FileManagement(props) {
             */}
           </div>
         </ProCard>
+         <Input
+            id="files"
+            type="file"
+            style={{ display: 'none' }}
+            onChange={handleFilesChange}
+            multiple
+          />
       </div>
-      <PerModal />
+      {/* <PerModal /> */}
       <AddModal />
 
       <AddFileModal
-        id={id}
+        id={node?.id}
         visible={visible}
         handleOk={(value) => {
           RunCreate({ ...value, user_name: user?.CName });
         }}
         handleCancel={() => setVisible(false)}
       />
+      <PerModal
+        node={node}
+        auditList={auditList}
+        visible={permissionOpen}
+        handleCancel={() => setPerOpen(false)}
+        handleOk={(data)=>{runAuditCreate(data)}}
+      />
     </PageContainer>
   );
-
-  function PerModal(props) {
-    const modalColumns = [
-      { title: '文档名称', dataIndex: 'name' },
-      { title: '下载', render: () => <Checkbox /> },
-      { title: '删除', render: () => <Checkbox /> },
-      { title: '授权', render: () => <Checkbox /> },
-    ];
-    return (
-      <Modal
-        title="权限申请"
-        open={permissionOpen}
-        onCancel={() => setPerOpen(false)}
-        destroyOnClose
-        width={800}
-      >
-        <Table
-          columns={modalColumns}
-          dataSource={tempData}
-          pagination={false}
-        />
-      </Modal>
-    );
-  }
-
   function AddModal(props) {
     const perList = [
       { label: '查看列表', value: 'a', disabled: true },

src/services/file.js

@@ -23,3 +23,25 @@ export const queryDirCreate = async (data) => {
     data,
   });
 };
+
+export const querySetPermit = async (data) => {
+  return await request('/api/archive/v1/set/permit', {
+    method: 'POST',
+    data,
+  });
+};
+
+export const queryFileUpload = async (data) => {
+  return await request('/api/archive/v1/file/upload', {
+    method: 'POST',
+    data,
+    headers: {'content-type':'mutipart/form-data'}
+  });
+};
+
+export const queryFileDownload = async (data) => {
+  return await request('/api/archive/v1/file/download', {
+    method: 'GET',
+    params:data,
+  });
+};