workspace/code/file-preview/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>文件预览测试</title>
  <script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.min.js"></script>
  <script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="./custom-file/index.js"></script>
  <link rel="stylesheet" href="./custom-file/index.css" />

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .button-group {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }

    .button-group button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background: #5D87FF;
      color: white;
      cursor: pointer;
      font-size: 14px;
    }

    .button-group button:hover {
      background: #4a6fcf;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="button-group">
      <button id="reloadBtn">加载文件组1</button>
      <button id="reloadBtn2">加载文件组2</button>
      <button id="addFileBtn">添加文件</button>
      <button id="clearBtn">清空选择</button>
      <button id="destroyBtn">销毁组件</button>
    </div>

    <div style="height: 600px;width: 500px;">
      <div id="fileContainer"></div>
    </div>
  </div>

  <script>
    $(function () {
      const file = $('#fileContainer').G3File({
        language: 'zh-CN',
        data: [
          { name: 'test.jar', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/XI26033384.rar' },
        ],
        globalPermission: {
          select: true,
          upload: true,
          download: true,
          delete: true,
          view: true
        },
        onUpload: function (pendingFiles) {
          console.log('上传文件:', pendingFiles);
          alert('上传功能，共 ' + pendingFiles.length + ' 个文件待上传');
        },
        onDelete: function (files, callback) {
          console.log('删除文件:', files);
          if (confirm('确定要删除 ' + files.length + ' 个文件吗？')) {
            callback(true);
          } else {
            callback(false);
          }
        },
        onPreview: function (files) {
          console.log('预览文件:', files);
          alert('预览文件: ' + files[0].name);
        },
        onSelect: function (files) {
          console.log('选择文件:', files);
        },
        getActionMenu: function (file) {
          const menuItems = [];

          menuItems.push({
            title: '审批',
            onClick: function (f) {
              console.log('审批文件:', f.name);
              alert('审批功能：' + f.name);
            }
          });

          menuItems.push({
            title: '修改',
            onClick: function (f) {
              console.log('修改文件:', f.name);
              alert('修改功能：' + f.name);
            }
          });

          menuItems.push({
            title: '重命名',
            onClick: function (f) {
              console.log('重命名文件:', f.name);
              const newName = prompt('请输入新文件名:', f.name);
              if (newName && newName !== f.name) {
                console.log('文件已重命名为:', newName);
              }
            }
          });

          menuItems.push({
            title: '复制',
            disabled: false,
            onClick: function (f) {
              console.log('复制文件:', f.name);
              alert('复制功能：' + f.name);
            }
          });

          menuItems.push({
            title: '移动到文件夹',
            disabled: false,
            onClick: function (f) {
              console.log('移动文件:', f.name);
              alert('移动功能：' + f.name);
            }
          });

          menuItems.push({
            title: '分享',
            disabled: false,
            onClick: function (f) {
              console.log('分享文件:', f.name);
              alert('分享功能：' + f.name);
            }
          });

          menuItems.push({
            title: '历史版本',
            disabled: false,
            onClick: function (f) {
              console.log('查看历史版本:', f.name);
              alert('历史版本功能：' + f.name);
            }
          });

          return menuItems;
        }
      });

      $('#reloadBtn').click(function () {
        file.setFiles([
          { name: '测试文档1.pdf', size: 2048000, uploadDate: '2024-01-15T10:30:00', url: '' },
          { name: 'test.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
          { name: '项目报告.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: 'http://118.89.70.199:9000/test/report.docx' },
        ]);
      });

      $('#reloadBtn2').click(function () {
        file.setFiles([
          { name: '测试文档2.pdf', size: 4096000, uploadDate: '2024-01-15T10:30:00', url: '' },
          { name: '项目报告2.docx', size: 524288, uploadDate: '2024-02-20T14:45:00', url: '' },
          { name: '数据表.xlsx', size: 1572864, uploadDate: '2024-03-01T09:00:00', url: 'http://118.89.70.199:9000/test/data.xlsx' },
          { name: '演示文稿.pptx', size: 3145728, uploadDate: '2024-03-05T16:30:00', url: '' },
        ]);
      });

      $('#addFileBtn').click(function () {
        file.$btnSelect.click();
      });

      $('#clearBtn').click(function () {
        file.updateState({ selectedFiles: [] });
      });

      $('#destroyBtn').click(function () {
        if (confirm('确定要销毁组件吗？')) {
          file.destroy();
          $('#fileContainer').html('<p style="text-align:center;padding:50px;color:#999;">组件已销毁</p>');
        }
      });
    });
  </script>

</body>

</html>