add 文件管理

web-react/src/pages/system/app/index.jsx

@@ -15,18 +15,17 @@ const apiAction = {
     edit: api.sysAppEdit,
     delete: api.sysAppDelete,
 
-    setDefault: api.sysAppSetAsDefault
+    setDefault: api.sysAppSetAsDefault,
 }
 
 // 用于弹窗标题
 const name = '应用'
 
 export default class index extends Component {
-
     state = {
         codes: {
-            commonStatus: []
-        }
+            commonStatus: [],
+        },
     }
 
     // 表格实例
@@ -42,51 +41,58 @@ export default class index extends Component {
         {
             title: '应用名称',
             dataIndex: 'name',
+            width: 300,
             sorter: true,
         },
         {
             title: '唯一编码',
             dataIndex: 'code',
+            width: 300,
             sorter: true,
         },
         {
             title: '是否默认',
             dataIndex: 'active',
+            width: 200,
             sorter: true,
-            render: (text, record) => (<>
-                {text ? '是' : '否'}
-                {
-                    !record.active && <Auth auth="sysApp:setAsDefault">
-                        <QueryTableActions>
-                            <span></span>
-                            <Popconfirm
-                                placement="topRight"
-                                title="是否确认设置为默认应用"
-                                onConfirm={() => this.onSetDefault(record)}
-                            >
-                                <a>设为默认</a>
-                            </Popconfirm>
-                        </QueryTableActions>
-                    </Auth>
-                }
-            </>)
+            render: (text, record) => (
+                <>
+                    {text ? '是' : '否'}
+                    {!record.active && (
+                        <Auth auth="sysApp:setAsDefault">
+                            <QueryTableActions>
+                                <span></span>
+                                <Popconfirm
+                                    placement="topRight"
+                                    title="是否确认设置为默认应用"
+                                    onConfirm={() => this.onSetDefault(record)}
+                                >
+                                    <a>设为默认</a>
+                                </Popconfirm>
+                            </QueryTableActions>
+                        </Auth>
+                    )}
+                </>
+            ),
         },
         {
             title: '状态',
             dataIndex: 'status',
+            width: 100,
             sorter: true,
-            render: text => (<>{this.bindCodeValue(text, 'common_status')}</>)
+            render: text => <>{this.bindCodeValue(text, 'common_status')}</>,
         },
         {
             title: '排序',
             dataIndex: 'sort',
+            width: 100,
             sorter: true,
         },
     ]
 
     /**
      * 构造函数,在渲染前动态添加操作字段等
-     * @param {*} props 
+     * @param {*} props
      */
     constructor(props) {
         super(props)
@@ -98,20 +104,22 @@ export default class index extends Component {
                 title: '操作',
                 width: 150,
                 dataIndex: 'actions',
-                render: (text, record) => (<QueryTableActions>
-                    <Auth auth="sysApp:edit">
-                        <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
-                    </Auth>
-                    <Auth auth="sysApp:delete">
-                        <Popconfirm
-                            placement="topRight"
-                            title="是否确认删除"
-                            onConfirm={() => this.onDelete(record)}
-                        >
-                            <a>删除</a>
-                        </Popconfirm>
-                    </Auth>
-                </QueryTableActions>)
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth="sysApp:edit">
+                            <a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
+                        </Auth>
+                        <Auth auth="sysApp:delete">
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
             })
         }
     }
@@ -120,9 +128,9 @@ export default class index extends Component {
      * 阻止外部组件引发的渲染,提升性能
      * 可自行添加渲染条件
      * [必要]
-     * @param {*} props 
-     * @param {*} state 
-     * @returns 
+     * @param {*} props
+     * @param {*} state
+     * @returns
      */
     shouldComponentUpdate(props, state) {
         return !isEqual(this.state, state)
@@ -136,20 +144,23 @@ export default class index extends Component {
         const { onLoading, onLoadData } = this.table.current
         onLoading()
         getDictData('common_status').then(res => {
-            this.setState({
-                codes: res
-            }, () => {
-                onLoadData()
-            })
+            this.setState(
+                {
+                    codes: res,
+                },
+                () => {
+                    onLoadData()
+                }
+            )
         })
     }
 
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
-     * @param {*} params 
-     * @param {*} query 
-     * @returns 
+     * @param {*} params
+     * @param {*} query
+     * @returns
      */
     loadData = async (params, query) => {
         const { data } = await apiAction.page({
@@ -161,15 +172,15 @@ export default class index extends Component {
 
     /**
      * 绑定字典数据
-     * @param {*} code 
-     * @param {*} name 
-     * @returns 
+     * @param {*} code
+     * @param {*} name
+     * @returns
      */
     bindCodeValue(code, name) {
         name = toCamelCase(name)
         const codes = this.state.codes[name]
         if (codes) {
-            const c = codes.find((p) => p.code === code)
+            const c = codes.find(p => p.code == code)
             if (c) {
                 return c.value
             }
@@ -179,20 +190,20 @@ export default class index extends Component {
 
     /**
      * 打开新增/编辑弹窗
-     * @param {*} modal 
-     * @param {*} record 
+     * @param {*} modal
+     * @param {*} record
      */
     onOpen(modal, record) {
         modal.current.open({
-            record
+            record,
         })
     }
 
     /**
      * 对表格上的操作进行统一处理
      * [异步]
-     * @param {*} action 
-     * @param {*} successMessage 
+     * @param {*} action
+     * @param {*} successMessage
      */
     async onAction(action, successMessage) {
         const { onLoading, onLoaded, onReloadData } = this.table.current
@@ -212,21 +223,15 @@ export default class index extends Component {
 
     /**
      * 删除
-     * @param {*} record 
+     * @param {*} record
      */
     onDelete(record) {
-        this.onAction(
-            apiAction.delete(record),
-            '删除成功'
-        )
+        this.onAction(apiAction.delete(record), '删除成功')
     }
 
     //#region 自定义方法
     async onSetDefault(record) {
-        this.onAction(
-            apiAction.setDefault(record),
-            '设置成功'
-        )
+        this.onAction(apiAction.setDefault(record), '设置成功')
     }
     //#endregion
 
@@ -255,7 +260,9 @@ export default class index extends Component {
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
-                                >新增{name}</Button>
+                                >
+                                    新增{name}
+                                </Button>
                             </Auth>
                         }
                     />

web-react/src/pages/system/file/index.jsx

@@ -0,0 +1,398 @@
+import React, { Component } from 'react'
+import {
+    Button,
+    Card,
+    Form,
+    Input,
+    message as Message,
+    Popconfirm,
+    Select,
+    Tag,
+    Tooltip,
+    Upload,
+} from 'antd'
+import { AntIcon, Auth, Container, PhotoPreview, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import { ArrayBufferToBase64, GetFileName, PreviewFileArrayBuffer } from 'util/file'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.sysFileInfoPage,
+    delete: api.sysFileInfoDelete,
+}
+
+/**
+ * 用于弹窗标题
+ * [必要]
+ */
+const name = '/**/'
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = 'sysFileInfo'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            fileStorageLocation: [],
+        },
+
+        uploading: false,
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    photoPreview = React.createRef()
+
+    columns = [
+        {
+            title: '文件名称',
+            dataIndex: 'fileOriginName',
+            width: 300,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '文件后缀',
+            dataIndex: 'fileSuffix',
+            width: 120,
+            sorter: true,
+            render: text => <Tag color="green">{text}</Tag>,
+        },
+        {
+            title: '文件大小',
+            dataIndex: 'fileSizeKb',
+            width: 120,
+            sorter: true,
+            render: text => (
+                <>
+                    {text}
+                    <small>KB</small>
+                </>
+            ),
+        },
+        {
+            title: '存储位置',
+            dataIndex: 'fileLocation',
+            width: 120,
+            sorter: true,
+            render: text => this.bindCodeValue(text, 'file_storage_location'),
+        },
+        {
+            title: '文件仓库',
+            dataIndex: 'fileBucket',
+            width: 200,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '唯一标识id',
+            dataIndex: 'fileObjectName',
+            width: 250,
+            ellipsis: {
+                showTitle: false,
+            },
+            sorter: true,
+            render: text => <Tooltip title={text}>{text}</Tooltip>,
+        },
+        {
+            title: '上传时间',
+            dataIndex: 'createdTime',
+            width: 200,
+            sorter: true,
+            defaultSortOrder: 'descend',
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ [authName]: 'delete' })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <a onClick={() => this.onFileDownload(record)}>下载</a>
+                        <Auth auth={{ [authName]: 'delete' }}>
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                        {['png', 'jpeg', 'jpg', 'gif', 'tif', 'bmp'].includes(
+                            record.fileSuffix
+                        ) && <a onClick={() => this.onFilePreview(record)}>预览</a>}
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('file_storage_location').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} record
+     */
+    onOpen(modal, record) {
+        modal.current.open({
+            record,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} record
+     */
+    onDelete(record) {
+        this.onAction(apiAction.delete(record), '删除成功')
+    }
+
+    //#region 自定义方法
+    async onFileUpload({ file }) {
+        this.setState({ uploading: true })
+        const table = this.table.current
+        table.onLoading()
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            await api.sysFileInfoUpload(fd)
+            table.onReloadData()
+        } catch {
+            table.onLoaded()
+        } finally {
+            this.setState({ uploading: false })
+        }
+    }
+
+    async onFilePreview({ id }) {
+        const key = Math.random().toString(16).slice(2)
+        const hide = Message.loading({
+            key,
+            content: '正在获取文件...',
+            duration: 0,
+        })
+        const file = await PreviewFileArrayBuffer(id)
+        if (file) {
+            const base64 = await ArrayBufferToBase64(file)
+            var img = new Image()
+            img.onload = () => {
+                const items = [
+                    {
+                        src: base64,
+                        w: img.naturalWidth,
+                        h: img.naturalHeight,
+                    },
+                ]
+                this.photoPreview.current.initPhotoSwipe(items)
+
+                hide()
+            }
+            img.onerror = () => {
+                Message.error({
+                    key,
+                    content: '获取文件失败',
+                })
+            }
+            img.src = base64
+        } else {
+            Message.error({
+                key,
+                content: '获取文件失败',
+            })
+        }
+    }
+
+    async onFileDownload({ id }) {
+        const key = Math.random().toString(16).slice(2)
+        const hide = Message.loading({
+            key,
+            content: '正在获取文件...',
+            duration: 0,
+        })
+        try {
+            const { data, headers } = await api.sysFileInfoDownload({ id })
+            const url = window.URL.createObjectURL(data)
+            const fileName = GetFileName(headers['content-disposition'])
+            const a = document.createElement('a')
+            a.href = url
+            a.download = fileName
+            a.click()
+            window.URL.revokeObjectURL(url)
+            a.remove()
+            hide()
+        } catch {
+            Message.error({
+                key,
+                content: '下载文件失败',
+            })
+        }
+    }
+    //#endregion
+
+    render() {
+        const { codes, uploading } = this.state
+
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="文件名" name="fileOriginName">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入文件名"
+                                        className="w-200"
+                                    />
+                                </Form.Item>
+                                <Form.Item label="存储位置" name="fileLocation">
+                                    <Select placeholder="请选择存储位置" className="w-200">
+                                        {codes.fileStorageLocation.map(item => (
+                                            <Select.Option key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Select.Option>
+                                        ))}
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item label="文件仓库" name="fileBucket">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入文件仓库"
+                                        className="w-200"
+                                    />
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth={{ [authName]: 'add' }}>
+                                <Upload customRequest={e => this.onFileUpload(e)} fileList={[]}>
+                                    <Button loading={uploading} icon={<AntIcon type="upload" />}>
+                                        上传文件
+                                    </Button>
+                                </Upload>
+                            </Auth>
+                        }
+                    />
+                </Card>
+
+                <PhotoPreview ref={this.photoPreview} />
+            </Container>
+        )
+    }
+}