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="./g3-file/index.js"></script>
  <script type="text/javascript" src="./g3-file/libs/FileSaver.min.js"></script>
  <script type="text/javascript" src="./g3-file/libs/jszip.min.js"></script>
  <link rel="stylesheet" href="./g3-file/index.css" />

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

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    #app {
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      display: flex;
      flex-direction: column;
    }

    .button-group {
      padding: 10px 20px;
      background: #ffffff;
      border-bottom: 1px solid #eef0f2;
      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;
    }

    #fileContainer {
      flex: 1;
      min-height: 0;
    }
  </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: 800px;">
      <div id="fileContainer"></div>
    </div>
  </div>

  <script>
    $(function () {
      // 存储权限信息
      let userPermissions = {
        approve: true,
        edit: true,
        rename: true,
        copy: true,
        move: true,
        share: true,
        history: true
      };

      // 模拟 API 请求获取权限
      function fetchPermissions() {
        return new Promise((resolve) => {
          // 模拟 API 请求延迟
          setTimeout(() => {
            // 模拟从 API 获取的权限数据
            const permissions = {
              approve: true,
              edit: true,
              rename: true,
              copy: true,
              move: true,
              share: true,
              history: true
            };
            userPermissions = permissions;
            resolve(permissions);
          }, 500);
        });
      }

      // 先获取权限，然后初始化组件
      fetchPermissions().then(() => {
        const file = $('#fileContainer').G3File({
          language: 'zh-CN',
          previewUrl:'https://sxox.g3soft.cn:8012/onlinePreview?url=',
          data: [
            { name: 'logo.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'https://g3hdzjsj.oss-cn-hangzhou.aliyuncs.com/g3hd/2026/04/28/ccb964f4-124d-4169-8981-20333bea2587.docx' },
          ],
          uploadConfig: {
            aliyun: {
              // 模拟获取上传凭证的函数
              getUploadToken: function (file) {
                return new Promise((resolve) => {
                  // 模拟 API 请求延迟
                  setTimeout(() => {
                    resolve({
                      uploadUrl: `http://example.com/${file.name}`,
                      // 其他阿里云上传所需的参数
                      accessKeyId: 'test-access-key',
                      accessKeySecret: 'test-secret-key',
                      bucket: 'test-bucket',
                      region: 'oss-cn-hangzhou'
                    });
                  }, 500);
                });
              }
            },
            // 自定义上传方法（注释掉以使用阿里云上传）
            // customUpload: function(file) {
            //   return new Promise((resolve, reject) => {
            //     // 模拟上传延迟
            //     setTimeout(() => {
            //       // 模拟上传成功
            //       resolve({
            //         url: `http://custom-upload.com/${file.name}`,
            //         uploadDate: new Date().toISOString()
            //       });
            //       // 模拟上传失败
            //       // reject(new Error('上传失败'));
            //     }, 1000);
            //   });
            // }
          },
          onUploadSuccess: function (file) {
            console.log('上传成功:', file);
            alert('上传成功：' + file.name);
          },
          onUploadError: function (file, error) {
            console.error('上传失败:', file.name, error);
            alert('上传失败：' + file.name);
          },
          onUploadComplete: function (successCount, failCount) {
            console.log('上传完成:', successCount, '成功', failCount, '失败');
            alert('上传完成：' + successCount + '成功，' + failCount + '失败');
          },
          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);
            }
          },
          onSelect: function (files) {
            console.log('选择文件:', files);
          },
          getActionMenu: function (file) {
            const menuItems = [];

            // 根据权限添加菜单项
            if (userPermissions.approve) {
              menuItems.push({
                title: '审批',
                onClick: function (f) {
                  console.log('审批文件:', f.name);
                  alert('审批功能：' + f.name);
                }
              });
            }

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

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

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

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

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

            if (userPermissions.history) {
              menuItems.push({
                title: '历史版本',
                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>