Notice 第二阶段

web-react/src/pages/system/notice/form.jsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
-import { Form, Spin, Input, Radio, Select } from 'antd'
+import { Form, Spin, Input, Radio, Select, Upload, Button } from 'antd'
 import { api } from 'common/api'
 import { AntIcon, BraftEditor } from 'components'
 import getDictData from 'util/dic'
+import { BlobToBase64, GetFileName, PreviewFile } from 'util/file'
 import { cloneDeep } from 'lodash'
-// import BraftEditor from 'braft-editor'
-// import 'braft-editor/dist/index.css'
+
 const initialValues = {}
 
 export default class form extends Component {
@@ -19,6 +19,7 @@ export default class form extends Component {
             noticeType: [],
             noticeStatus: [],
         },
+        funloader: Object,
     }
 
     // 表单实例
@@ -32,8 +33,6 @@ export default class form extends Component {
      */
     componentDidMount() {
         this.props.created && this.props.created(this)
-        this.isLivinig = true
-        // 3秒后更改编辑器内容
     }
 
     /**
@@ -43,6 +42,7 @@ export default class form extends Component {
      * @param {*} params
      */
     async fillData(params) {
+        this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
         if (params.id) {
             this.record = (await api.sysNoticeDetail({ id: params.id })).data
@@ -51,6 +51,36 @@ export default class form extends Component {
             data: { items: userList },
         } = await this.onLoadUser()
         const codes = await getDictData('notice_status', 'notice_type')
+
+        if (this.record) {
+            const { attachments } = this.record
+            if (attachments) {
+                const fileValue = []
+                const fileList = attachments.split(',')
+                for (const fileId of fileList) {
+                    try {
+                        const file = await PreviewFile(fileId)
+                        const base64 = await BlobToBase64(file)
+                        fileValue.push({
+                            uid: fileId,
+                            response: fileId,
+                            name: file.name,
+                            url: base64,
+                            status: 'done',
+                        })
+                    } catch {
+                        const { data: file } = await api.sysFileInfoDetail({ id: fileId })
+                        fileValue.push({
+                            uid: fileId,
+                            response: '文件已丢失',
+                            name: file.fileOriginName,
+                            status: 'error',
+                        })
+                    }
+                }
+                this.record.Attachments = fileValue
+            }
+        }
         //#endregion
         this.form.current.setFieldsValue(this.record)
 
@@ -61,11 +91,46 @@ export default class form extends Component {
             },
             codes,
         })
+        //加载 BraftEditor 富文本插件
+        this.state.funloader()
+    }
+    /**
+     * 接受子组件传过来的方法
+     * 等页面加载完毕后调用
+     */
+    getChildrenMsg = funLoad => {
+        this.setState({
+            funloader: funLoad,
+        })
     }
     async onLoadUser() {
         const data = await api.getUserPage()
         return data
     }
+    async onFileUpload({ file, onProgress, onSuccess, onError }) {
+        onProgress({
+            percent: 0,
+        })
+        const fd = new FormData()
+        fd.append('file', file)
+        try {
+            const { data: fileId } = await api.sysFileInfoUpload(fd)
+            onSuccess(fileId)
+        } catch {
+            onError()
+        }
+    }
+    async onFileDownload(file) {
+        const { data, headers } = await api.sysFileInfoDownload({ id: file.response })
+        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()
+    }
     /**
      * 获取数据
      * 可以对postData进行数据结构调整
@@ -74,14 +139,21 @@ export default class form extends Component {
      */
     async getData() {
         const form = this.form.current
-
+        console.log(this.record)
         const valid = await form.validateFields()
         if (valid) {
             const postData = form.getFieldsValue()
             if (this.record) {
                 postData.id = this.record.id
+                postData.status = 0
+            } else {
+                postData.status = 1
             }
             //#region 从前段转换后端所需格式
+            const { Attachments } = postData
+            for (const key in Attachments) {
+                Attachments[key] = Attachments[key].response
+            }
             //#endregion
             return postData
         }
@@ -132,9 +204,33 @@ export default class form extends Component {
                                 },
                             ]}
                         >
-                            <BraftEditor />
+                            <BraftEditor parent={this} />
+                        </Form.Item>
+                        <Form.Item
+                            label="上传附件"
+                            name="Attachments"
+                            valuePropName="fileList"
+                            getValueFromEvent={e => {
+                                if (Array.isArray(e)) {
+                                    return e
+                                }
+                                return e && e.fileList
+                            }}
+                        >
+                            <Upload
+                                customRequest={e => this.onFileUpload(e)}
+                                showUploadList={{
+                                    showRemoveIcon: true,
+                                    showDownloadIcon: true,
+                                }}
+                                onPreview={() => false}
+                                onDownload={file => this.onFileDownload(file)}
+                            >
+                                <Button type="dashed" icon={<AntIcon type="upload" />}>
+                                    上传附件
+                                </Button>
+                            </Upload>
                         </Form.Item>
-
                         <Form.Item label="通知到的人" name="noticeUserIdList">
                             <Select
                                 mode="tags"

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

@@ -57,6 +57,19 @@ export default class index extends Component {
             title: '标题',
             dataIndex: 'title',
         },
+        {
+            title: '发布人',
+            dataIndex: 'publicUserName',
+        },
+        {
+            title: '发布时间',
+            dataIndex: 'createdTime',
+        },
+        {
+            title: '发布单位',
+            dataIndex: 'publicOrgName',
+            width: 200,
+        },
         {
             title: '类型',
             dataIndex: 'type',
@@ -76,7 +89,7 @@ export default class index extends Component {
     constructor(props) {
         super(props)
 
-        const flag = auth({ [authName]: [['edit'], ['delete']] })
+        const flag = auth({ [authName]: [['edit'], ['goBack'], ['publish'], ['delete']] })
 
         if (flag) {
             this.columns.push({
@@ -85,18 +98,55 @@ export default class index extends Component {
                 dataIndex: 'actions',
                 render: (text, record) => (
                     <QueryTableActions>
-                        <Auth auth={{ [authName]: 'edit' }}>
-                            <a onClick={() => this.onOpen(this.editForm, record.id)}>编辑</a>
-                        </Auth>
-                        <Auth auth={{ [authName]: 'delete' }}>
-                            <Popconfirm
-                                placement="topRight"
-                                title="是否确认删除"
-                                onConfirm={() => this.onDelete(record.id)}
+                        {record.status === 1 ? (
+                            <Auth
+                                key={this.subUniqueKey(record.id, 1)}
+                                auth={{ [authName]: 'goBack' }}
                             >
-                                <a>删除</a>
-                            </Popconfirm>
-                        </Auth>
+                                <Popconfirm
+                                    placement="topRight"
+                                    title="是否确认撤回"
+                                    onConfirm={() => this.onGoBack(record.id)}
+                                >
+                                    <a>撤回</a>
+                                </Popconfirm>
+                            </Auth>
+                        ) : (
+                            [
+                                <Auth
+                                    key={this.subUniqueKey(record.id, 2)}
+                                    auth={{ [authName]: 'edit' }}
+                                >
+                                    <a onClick={() => this.onOpen(this.editForm, record.id)}>
+                                        编辑
+                                    </a>
+                                </Auth>,
+                                <Auth
+                                    key={this.subUniqueKey(record.id, 3)}
+                                    auth={{ [authName]: 'publish' }}
+                                >
+                                    <Popconfirm
+                                        placement="topRight"
+                                        title="是否确认发布"
+                                        onConfirm={() => this.onPublish(record.id)}
+                                    >
+                                        <a>发布</a>
+                                    </Popconfirm>
+                                </Auth>,
+                                <Auth
+                                    key={this.subUniqueKey(record.id, 4)}
+                                    auth={{ [authName]: 'delete' }}
+                                >
+                                    <Popconfirm
+                                        placement="topRight"
+                                        title="是否确认删除"
+                                        onConfirm={() => this.onDelete(record.id)}
+                                    >
+                                        <a>删除</a>
+                                    </Popconfirm>
+                                </Auth>,
+                            ]
+                        )}
                     </QueryTableActions>
                 ),
             })
@@ -128,7 +178,9 @@ export default class index extends Component {
             })
         })
     }
-
+    subUniqueKey(text, index) {
+        return text.substr(index, 5)
+    }
     /**
      * 调用加载数据接口,可在调用前对query进行处理
      * [异步,必要]
@@ -200,8 +252,22 @@ export default class index extends Component {
      * @param {*} id
      */
     onDelete(id) {
-        this.onAction(apiAction.delete({ id }), '删除成功')
+        this.onAction(apiAction.Status({ id, Status: 3 }), '删除成功')
     }
+    /**
+     * 发布
+     * @param {*} id
+     */
+    onPublish(id) {
+        this.onAction(apiAction.Status({ id, Status: 1 }), '发布成功')
+    }
+    /**
+     * 撤回
+     * @param {*} id
+     */
+    onGoBack(id) {
+        this.onAction(apiAction.Status({ id, Status: 2 }), '撤回成功')
+    } //
 
     //#region 自定义方法
     //#endregion
@@ -214,6 +280,7 @@ export default class index extends Component {
                 <Card bordered={false}>
                     <QueryTable
                         ref={this.table}
+                        rowkey={record => record.id}
                         autoLoad={false}
                         loadData={this.loadData}
                         columns={this.columns}
@@ -223,11 +290,11 @@ export default class index extends Component {
                                     <Input
                                         autoComplete="off"
                                         placeholder="请输入标题、内容"
-                                        className="w-400"
+                                        className="w-200"
                                     />
                                 </Form.Item>
                                 <Form.Item label="类型" name="type">
-                                    <Select placeholder="请选择类型" className="w-400" allowClear>
+                                    <Select placeholder="请选择类型" className="w-200" allowClear>
                                         {codes.noticeType.map(item => (
                                             <Select.Option key={item.code} value={item.code}>
                                                 {item.value}
@@ -238,7 +305,7 @@ export default class index extends Component {
                             </Auth>
                         }
                         operator={
-                            <Auth auth={{ [authName]: 'add' }}>
+                            <Auth key={record => record.id} auth={{ [authName]: 'add' }}>
                                 <Button
                                     icon={<AntIcon type="plus" />}
                                     onClick={() => this.onOpen(this.addForm)}
@@ -255,6 +322,25 @@ export default class index extends Component {
                         title={`新增${name}`}
                         width={800}
                         action={apiAction.add}
+                        buttons={[
+                            {
+                                index: 1,
+                                button: (getData, close) => (
+                                    <Button
+                                        type="primary"
+                                        key="111"
+                                        onClick={async () => {
+                                            const data = await getData()
+                                            data.status = 0 //草稿状态
+                                            this.onAction(api.sysNoticeAdd(data))
+                                            close()
+                                        }}
+                                    >
+                                        保存草稿
+                                    </Button>
+                                ),
+                            },
+                        ]}
                         ref={this.addForm}
                         onSuccess={() => this.table.current.onReloadData()}
                     >

web-react/src/pages/system/noticeReceived/form.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import { Spin, Divider, Modal, Row } from 'antd'
+import { api } from 'common/api'
+import { AntIcon } from 'components'
+
+export default class form extends Component {
+    state = {
+        detailVisible: false,
+        detailLoading: false,
+        detailData: {},
+    }
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+    }
+
+    async onOpenDetail(id) {
+        this.setState({ detailLoading: true, detailVisible: true })
+        const { data } = await api.sysNoticeDetail({ id })
+        this.setState({
+            detailLoading: false,
+            detailData: data,
+        })
+    }
+
+    render() {
+        const { detailLoading, detailVisible, detailData } = this.state
+        return (
+            <Modal
+                width={1000}
+                footer={false}
+                visible={detailVisible}
+                onCancel={() => this.setState({ detailVisible: false, detailData: {} })}
+            >
+                <Spin spinning={detailLoading} indicator={<AntIcon type="loading" />}>
+                    <div className="h3 mt-lg">{detailData.title}</div>
+                    <Divider />
+                    <div
+                        className="pt-lg pb-lg"
+                        dangerouslySetInnerHTML={{ __html: detailData.content }}
+                    ></div>
+                    <Divider />
+                    <Row justify="space-between" className="text-gray">
+                        <span>发布人：{detailData.publicUserName}</span>
+                        <span>发布时间：{detailData.publicTime} </span>
+                    </Row>
+                </Spin>
+            </Modal>
+        )
+    }
+}

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

@@ -0,0 +1,211 @@
+import React, { Component } from 'react'
+import { Card, Form, message as Message, Input, Select } from 'antd'
+import { Auth, Container, QueryTable } 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 FormBody from './form'
+import { getSearchInfo, QueryType } from 'util/query'
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = '/**/'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            noticeStatus: [],
+            noticeType: [],
+        },
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '标题',
+            dataIndex: 'title',
+        },
+        {
+            title: '发布人',
+            dataIndex: 'publicUserName',
+        },
+        {
+            title: '发布时间',
+            dataIndex: 'createdTime',
+        },
+        {
+            title: '发布单位',
+            dataIndex: 'publicOrgName',
+            width: 200,
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+            render: text => this.bindCodeValue(text, 'notice_type'),
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+        const flag = auth({ [authName]: [['show']] })
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <Auth auth={{ [authName]: 'show' }}>
+                        <a onClick={() => this.onOpen(this.editForm, record.id)}>查看</a>
+                    </Auth>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('notice_status', 'notice_type').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @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()
+        }
+    }
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const searchInfo = getSearchInfo({
+            query,
+            queryType: {
+                type: QueryType.Equal,
+                title: QueryType.Like,
+            },
+        })
+
+        const { data } = await api.sysNoticeReceived({
+            ...params,
+            searchInfo,
+        })
+        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 {*} id
+     */
+    onOpen(modal, id) {
+        modal.current.onOpenDetail(id)
+    }
+
+    render() {
+        const { codes } = 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="title">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入标题"
+                                        className="w-200"
+                                    />
+                                </Form.Item>
+                                <Form.Item label="类型" name="type">
+                                    <Select placeholder="请选择类型" className="w-200" allowClear>
+                                        {codes.noticeType.map(item => (
+                                            <Select.Option key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Select.Option>
+                                        ))}
+                                    </Select>
+                                </Form.Item>
+                            </Auth>
+                        }
+                    />
+                </Card>
+                <FormBody ref={this.editForm} />
+            </Container>
+        )
+    }
+}