GtDigManageWeb/src/pages/FileManagement/index.js

import React, { useState, useEffect } from 'react';
import {
  Input,
  Tree,
  Table,
  Button,
  Form,
  DatePicker,
  Divider,
  Modal,
  Checkbox,
  TreeSelect,
  Upload,
  Space,
  message,
  Spin,
} from 'antd';
import dayjs from 'dayjs';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useRequest, useModel } from '@umijs/max';
import {
  queryDirCreate,
  queryDirList,
  queryFileDelete,
  queryFileList,
  queryFileUpload,
  queryOAFile,
  queryPermitList,
  querySetPermit,
} from '../../services/file';
import { queryGetContractList } from '../../services/contract';
import { downloadFile, getToken } from '@/utils/utils';
import {
  ExclamationCircleOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import AddFileModal from './components/model';
import PerModal from './components/PreModal';
import { queryAuditList, createAduit } from '@/services/boom';
import { stringify } from 'qs';
import FileViewerModal from '@/components/FileViewerNew';

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 { DirectoryTree } = Tree;
const { Search } = Input;
const { RangePicker } = DatePicker;

function FileManagement(props) {
  const [form] = Form.useForm();
  const [modal, contextHolder] = Modal.useModal();
  const { user } = useModel('userInfo');
  const [tableData, setTableData] = useState([]);
  const [visible, setVisible] = useState(false);
  const [node, setNode] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [fileViewerVisible, setFileViewerVisible] = useState(false);
  const [fileViewerData, setFileViewerData] = useState();

  const {
    data: treeData,
    loading: treeLoading,
    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 { 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 { loading: OAloading, run: runOA } = 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 { 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(
    (data) => queryDirCreate(data),
    {
      manual: true,
      onSuccess: () => {
        setVisible(false);
        runFileDir();
        message.success('创建成功');
      },
      onError: () => {
        message.success('创建失败');
      },
    },
  );
  //申请权限
  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: preListData,
    loading: preListLoading,
    run: runPreList,
  } = useRequest((data) => queryPermitList(data), {
    manual: true,
  });

  //删除文件
  const { loading: delFileLoading, run: runDelFile } = useRequest(
    (data) => queryFileDelete(data),
    {
      manual: true,
      onSuccess: () => {
        updateTableFile(node);
        message.success('删除成功');
      },
      onError: () => {
        message.success('删除失败');
      },
    },
  );

  const [expandedKeys, setExpandedKeys] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [permissionOpen, setPerOpen] = useState(false);
  const [addOpen, setAddOpen] = useState(false);

  const delConfirm = (record) => {
    modal.confirm({
      title: '删除',
      icon: <ExclamationCircleOutlined />,
      content: `确定删除文件${record.dir_name}， 删除后不能恢复`,
      okText: '确认',
      cancelText: '取消',
      onOk: () => runDelFile({ file_id: record.id }),
    });
  };

  const isShow = (id, num) => {
    //num  下载 1   删除 2
    let bool = false;
    const idx = preListData?.list?.findIndex(
      (item) => item.file_id == id && item.permit == num,
    );
    if (idx > -1) bool = true;
    return bool;
  };

  const columns = [
    { title: '文档名称', dataIndex: 'dir_name' },
    { title: '上传人员', align: 'center', dataIndex: 'user_name' },
    {
      title: '上传时间',
      align: 'center',
      dataIndex: 'create_time',
      render: (text) => dayjs(text).format('YYYY-MM-DD'),
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <a onClick={() => handleSeeClick(record)}>查看</a>
          {isShow(record.id, 1) && (
            <a onClick={() => onDownload(record)}>下载</a>
          )}
          {isShow(record.id, 2) && node?.dir_type == 0 && (
            <a onClick={() => delConfirm(record)}>删除</a>
          )}
        </Space>
      ),
    },
  ];

  useEffect(() => {
    //获取列表的权限
    if (!tableData || tableData.length <= 0) return;
    const ids = tableData.map((item) => item.id);
    const data = {
      file_type: node.dir_type,
      file_ids: ids?.join(','),
    };
    runPreList(data);
  }, [tableData]);

  // 搜索文件夹树
  const onSearchDirectory = (value, nodes = treeData) => {
    const expandedKeys = getExpandedKeys(nodes, value);
    setExpandedKeys(expandedKeys);
    setSearchValue(value);
  };

  // 根据搜索值(value)获取key列表
  const getExpandedKeys = (nodes, value) => {
    if (!value) return [];
    let result = [];
    nodes.forEach((node) => {
      // 若该节点名称包含搜索值,将key加入result
      if (node.dir_name.includes(value)) {
        result.push(node.id);
      }
      // 若该节点的子节点包含搜索值,将子节点key和该节点key加入result
      if (node.children) {
        let getChildren = getExpandedKeys(node.children, value);
        if (getChildren.length != 0)
          result = [...result, node.id, ...getChildren];
      }
    });
    return result;
  };

  const onExpand = (expandedKeys) => {
    setExpandedKeys(expandedKeys);
  };

  const filterTreeNode = (node) =>
    searchValue.length > 0 ? node.dir_name.includes(searchValue) : false;

  // 搜索文件
  const onSearch = () => {
    form
      .validateFields()
      .then((values) => {
        console.log(values);
      })
      .catch((err) => {
        return;
      });
  };

  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);

    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 });
    }
  };

  const handleSelect = (SelectKeys, e) => {
    // console.log(e, SelectKeys);
    const node = e.node;
    setNode(node);
    updateTableFile(e.node);
  };

  const onDownload = (record) => {
    const data = {
      file_id: record.id,
      path: record.path,
      file_type: node.dir_type,
    };
    window.downloadFile(
      `/api/archive/v1/file/download?${stringify(data)}`,
      record.dir_name,
      false,
    );
  };

  const handleSeeClick = (record) => {
    if (node?.dir_type == 2) {
      // 合同归档
      if (!record.attach) return;
      const attach = JSON.parse(record.attach);
      setFileViewerData(attach);
      setFileViewerVisible(true);
    } else {
      const token = getToken();
      const params = {
        file_id: record.id,
        path: record.path,
        file_type: node.dir_type,
        'JWT-TOKEN': token,
      };
      const url = `${location.origin}/api/archive/v1/file/download?${stringify(
        params,
      )}`;
      const arr = record.dir_name.split('.');
      const type = arr[arr.length - 1];
      const data = { url, name: record.dir_name, type };
      setFileViewerData(data);
      setFileViewerVisible(true);
    }
  };

  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' }}>
        <ProCard style={{ height: '100%', width: '30%' }}>
          <Search onChange={(e) => onSearchDirectory(e.target.value)} />
          <Spin spinning={treeLoading}>
            <DirectoryTree
              expandedKeys={expandedKeys}
              onExpand={onExpand}
              treeData={treeData}
              onSelect={handleSelect}
              fieldNames={{
                key: 'id',
                title: 'dir_name',
                children: 'children',
              }}
              filterTreeNode={filterTreeNode}
              titleRender={(item) => {
                return item.dir_name == '部门文件' ? (
                  <Space>
                    <span>{item.dir_name}</span>
                    <PlusCircleOutlined
                      style={{ fontSize: '16px' }}
                      onClick={() => {
                        setNode(item);
                        setVisible(true);
                      }}
                    />
                  </Space>
                ) : (
                  <span>{item.dir_name}</span>
                );
              }}
            />
          </Spin>
        </ProCard>
        <ProCard style={{ height: '100%', width: 'calc(70% - 20px)' }}>
          <Form layout="inline" form={form}>
            <Form.Item name="date">
              <RangePicker />
            </Form.Item>
            <Form.Item name="name">
              <Input />
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={onSearch}>
                查询
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                onClick={() => document.getElementById('files')?.click()}
                disabled={node ? false : true}
              >
                上传
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                onClick={() => setPerOpen(true)}
                disabled={selectedRowKeys?.length > 0 ? false : true}
              >
                申请权限
              </Button>
            </Form.Item>
          </Form>
          <div>
            <Table
              columns={columns}
              dataSource={tableData}
              rowSelection={{
                selectedRowKeys,
                type: 'radio',
                onChange: (e, fileNode) => {
                  console.log(e);
                  setSelectedRowKeys(e);
                  // (fileNode[0])
                },
              }}
              loading={OAloading || contractLoading || loading}
              style={{ overflowY: 'auto' }}
              childrenColumnName="none"
              pagination={false}
            />
            {/* 
            <Button type="primary" onClick={() => setAddOpen(true)}>
              <PlusOutlined />
              新增权限
            </Button>
            {!editPer && (
              <Button
                type="primary"
                onClick={() => setEditPer(true)}
                style={{ marginLeft: 20 }}
              >
                编辑权限
              </Button>
            )}
            {editPer && (
              <Button
                type="primary"
                onClick={() => setEditPer(false)}
                style={{ marginLeft: 20 }}
              >
                确定
              </Button>
            )}
            <Table
              columns={columnsPer}
              dataSource={tempPer}
              style={{ overflowY: 'auto' }}
            />
            */}
          </div>
        </ProCard>
        <Input
          id="files"
          type="file"
          style={{ display: 'none' }}
          onChange={handleFilesChange}
          multiple
        />
        {contextHolder}
      </div>
      {/* <PerModal /> */}
      <AddModal />

      <AddFileModal
        id={node?.id}
        visible={visible}
        handleOk={(value) => {
          RunCreate({ ...value, user_name: user?.CName });
        }}
        handleCancel={() => setVisible(false)}
      />
      <PerModal
        node={node}
        fileNode={tableData?.find((item) => item.key == selectedRowKeys[0])}
        auditList={auditList}
        visible={permissionOpen}
        handleCancel={() => setPerOpen(false)}
        handleOk={(data) => {
          runAuditCreate(data);
        }}
      />
      <FileViewerModal
        data={fileViewerData}
        visible={fileViewerVisible}
        downloadFile={() => {}}
        onCancel={() => {
          setFileViewerVisible(false);
        }}
      />
    </PageContainer>
  );
  function AddModal(props) {
    const perList = [
      { label: '查看列表', value: 'a', disabled: true },
      { label: '只读', value: 'b', disabled: true },
      { label: '下载', value: 'c' },
      { label: '删除', value: 'd' },
      { label: '授权', value: 'e' },
    ];

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows,
        );
      },
    };

    return (
      <Modal
        title="新增权限"
        open={addOpen}
        onCancel={() => setAddOpen(false)}
        width={800}
      >
        <Table
          title={() => '文档列表'}
          columns={columns.slice(0, -1)}
          dataSource={tempData}
          pagination={false}
          rowSelection={rowSelection}
          destroyOnClose
        />
        <div style={{ margin: '20px 0px' }}>
          <span style={{ marginRight: 20 }}>选择用户:</span>
          <TreeSelect multiple={true} style={{ width: 200 }}></TreeSelect>
        </div>
        <div>
          <span style={{ marginRight: 20 }}>选择权限:</span>
          <Checkbox.Group options={perList} defaultValue={['a', 'b']} />
        </div>
      </Modal>
    );
  }
}

export default FileManagement;