yee 7 years ago
parent
commit
5ee499c16b

+ 218 - 18
js/component/manageCenter/idea/bannerManage/bannerManage.jsx

@@ -19,7 +19,7 @@ const Avatar = React.createClass({
         }
     },
     componentWillReceiveProps(nextProps) {
-        if (this.props.uid != nextProps.uid) {
+        if (this.props.id != nextProps.id) {
             this.state.imageUrl = null;
         };
     },
@@ -30,8 +30,8 @@ const Avatar = React.createClass({
                 className="avatar-uploader"
                 name={this.props.name}
                 showUploadList={false}
-                action={globalConfig.context + "/api/admin/lecture/upload"}
-                data={{ 'uid': this.props.uid, 'sign': 'lecture_picture' }}
+                action={globalConfig.context + "/api/admin/banners/upload"}
+                data={{ 'sign': this.props.sign }}
                 beforeUpload={beforeUpload}
                 onChange={this.handleChange} >
                 {
@@ -57,7 +57,7 @@ const Lecture = React.createClass({
             data: {
                 pageNo: pageNo || 1,
                 pageSize: this.state.pagination.pageSize,
-                key: this.state.searcchKey
+                key: this.state.searchKey
             },
             success: function (data) {
                 let theArr = [];
@@ -131,7 +131,11 @@ const Lecture = React.createClass({
     getInitialState() {
         return {
             loading: false,
+            visible: false,
+            selectedRowKeys: [],
+            selectedRows: [],
             keysObj: {},
+            RowData: {},
             pagination: {
                 defaultCurrent: 1,
                 defaultPageSize: 10,
@@ -149,7 +153,7 @@ const Lecture = React.createClass({
                     title: '位置',
                     dataIndex: 'sign',
                     key: 'sign',
-                    render: text => { return keysObj[text] }
+                    render: text => { return this.state.keysObj[text] }
                 }, {
                     title: '广告图描述',
                     dataIndex: 'text',
@@ -183,11 +187,58 @@ const Lecture = React.createClass({
             tableData: []
         };
     },
+    tableRowClick(record, index) {
+        this.state.RowData = record;
+        this.setState({
+            visible: true
+        });
+    },
     componentWillMount() {
         this.loadKeys();
         this.loadData();
     },
+    clearCache() {
+        if (!this.state.searchKey) {
+            message.warning('必须选择一个位置!');
+            return;
+        };
+        this.setState({
+            loading: true
+        });
+        $.ajax({
+            method: "get",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context + '/api/admin/banners/clearCache',
+            data: {
+                key: this.state.searchKey  // 位置标示,必填
+            },
+            success: function (data) {
+                if (data.error && data.error.length) {
+                    message.warning(data.error[0].message);
+                } else {
+                    message.success('更新缓存成功!');
+                };
+            }.bind(this),
+        }).always(function () {
+            this.setState({
+                loading: false
+            });
+        }.bind(this));
+    },
     submit() {
+        if (!this.state.RowData.sign) {
+            message.warning('必须选择一个位置!');
+            return;
+        };
+        if (!this.state.RowData.imgurl) {
+            message.warning('必须上传一张广告图!');
+            return;
+        };
+        if (!this.state.RowData.url) {
+            message.warning('必须填写跳转链接!');
+            return;
+        };
         this.setState({
             loading: true
         });
@@ -195,24 +246,24 @@ const Lecture = React.createClass({
             method: "post",
             dataType: "json",
             crossDomain: false,
-            url: globalConfig.context + (this.state.addModal.id ? '/api/admin/lecture/update' : '/api/admin/lecture/add'),
+            url: globalConfig.context + '/api/admin/banners/save',
             data: {
-                'id': this.state.addModal.id,
-                "uid": this.state.addModal.uid,
-                "name": this.state.addModal.name,
-                "summary": this.state.addModal.summary,
-                "lectureUrl": this.state.addModal.lectureUrl,
-                "lectureTimeFormattedDate": this.state.addModal.lectureTimeFormattedDate,
-                "endTimeFormattedDate": this.state.addModal.endTimeFormattedDate,
-                "hot": this.state.addModal.showBig ? 1 : 0,
-                "dynamic": this.state.addModal.showStar ? 1 : 0
+                id: this.state.RowData.id || null, //主键,如果不填主键则为新增记录,填主键则为更新
+                sign: this.state.RowData.sign,  // 位置标示,必填
+                text: this.state.RowData.text,  //广告图描述,长度 255
+                imgurl: this.state.RowData.imgurl, //广告图url,必填,长度 255
+                url: this.state.RowData.url, //跳转链接,必填,长度255
+                width: this.state.RowData.width, //宽度,非必填,最大99999
+                height: this.state.RowData.height, //高度,非必填,最大99999
+                startDate: this.state.RowData.startDate, //广告图开始时间,非必填
+                endDate: this.state.RowData.endDate //广告图结束时间,非必填
             },
             success: function (data) {
                 if (data.error && data.error.length) {
                     message.warning(data.error[0].message);
                 } else {
                     message.success('保存成功!');
-                    this.setState({ addVisible: false });
+                    this.setState({ visible: false });
                     this.loadData();
                 };
             }.bind(this),
@@ -222,11 +273,49 @@ const Lecture = React.createClass({
             });
         }.bind(this));
     },
+    delectRow() {
+        if (this.state.selectedRows.length > 1) {
+            return;
+        };
+        this.setState({
+            selectedRowKeys: [],
+            loading: this.state.selectedRows.length > 0
+        });
+        $.ajax({
+            method: "POST",
+            dataType: "json",
+            crossDomain: false,
+            url: globalConfig.context + "/api/admin/banners/delete",
+            data: {
+                id: this.state.selectedRows[0].id
+            }
+        }).done(function (data) {
+            if (data.error && data.error.length) {
+                message.warning(data.error[0].message);
+            } else {
+                message.success('删除成功!');
+            };
+            this.setState({
+                loading: false,
+            });
+            this.loadData();
+        }.bind(this));
+    },
     reset() {
         this.state.searchKey = undefined;
         this.loadData();
     },
     render() {
+        const rowSelection = {
+            selectedRowKeys: this.state.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+                this.setState({
+                    selectedRows: selectedRows.slice(-1),
+                    selectedRowKeys: selectedRowKeys.slice(-1)
+                });
+            }
+        };
+        const hasSelected = this.state.selectedRowKeys.length > 0;
         return (
             <div className="admin-content" >
                 <div className="admin-content-title">广告图管理</div>
@@ -240,14 +329,125 @@ const Lecture = React.createClass({
                             {this.state.keysOption}
                         </Select>
                         <Button type="primary" onClick={this.loadData}>搜索</Button>
+                        <Button type="ghost" onClick={this.clearCache}>清除缓存</Button>
                         <Button onClick={this.reset}>重置</Button>
+                        <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}>
+                            删除<Icon type="minus" />
+                        </Button>
+                        <Button type="primary" style={{ float: 'right' }}
+                            onClick={() => { this.setState({ RowData: {}, visible: true }) }}>
+                            添加<Icon type="plus" />
+                        </Button>
                     </div>
                     <Spin spinning={this.state.loading}>
-                        <Table columns={this.state.columns}
+                        <Table className="no-all-select" columns={this.state.columns}
                             dataSource={this.state.tableData}
-                            pagination={this.state.pagination} />
+                            pagination={this.state.pagination}
+                            rowSelection={rowSelection}
+                            onRowClick={this.tableRowClick} />
                     </Spin>
                 </div>
+                <Modal title="广告图详情" width={1000}
+                    visible={this.state.visible}
+                    maskClosable={false}
+                    footer={null}
+                    afterClose={() => { this.state.RowData = {} }}
+                    onCancel={() => { this.setState({ visible: false }) }} >
+                    <Spin spinning={this.state.loading}>
+                        <div className="modal-box">
+                            <span className="modal-box-title">广告图位置</span>
+                            {this.state.RowData.id ? <div className="modal-box-detail">
+                                {this.state.keysObj[this.state.RowData.sign]}
+                            </div> : <div className="modal-box-detail">
+                                    <Select placeholder="选择广告图位置"
+                                        style={{ width: 200 }}
+                                        value={this.state.RowData.sign}
+                                        onChange={(e) => {
+                                            this.state.RowData.sign = e;
+                                            this.setState({ RowData: this.state.RowData })
+                                        }}>
+                                        {this.state.keysOption}
+                                    </Select>
+                                </div>}
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">广告图描述</span>
+                            <div className="modal-box-detail">
+                                <Input value={this.state.RowData.text}
+                                    onChange={(e) => {
+                                        this.state.RowData.text = e.target.value;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">跳转链接</span>
+                            <div className="modal-box-detail">
+                                <Input value={this.state.RowData.url}
+                                    onChange={(e) => {
+                                        this.state.RowData.url = e.target.value;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">图片宽度</span>
+                            <div className="modal-box-detail">
+                                <Input value={this.state.RowData.width}
+                                    onChange={(e) => {
+                                        this.state.RowData.width = e.target.value;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">图片高度</span>
+                            <div className="modal-box-detail">
+                                <Input value={this.state.RowData.height}
+                                    onChange={(e) => {
+                                        this.state.RowData.height = e.target.value;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">广告图播放时间</span>
+                            <div className="modal-box-detail">
+                                <DatePicker
+                                    showTime
+                                    format="YYYY-MM-DD HH:mm:ss"
+                                    placeholder="选择开始时间"
+                                    value={this.state.RowData.startDate ? moment(this.state.RowData.startDate, "YYYY-MM-DD HH:mm:ss") : undefined}
+                                    onChange={(t, str) => {
+                                        this.state.RowData.startDate = str;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                                <span>到</span>
+                                <DatePicker
+                                    showTime
+                                    format="YYYY-MM-DD HH:mm:ss"
+                                    placeholder="选择结束时间"
+                                    value={this.state.RowData.endDate ? moment(this.state.RowData.endDate, "YYYY-MM-DD HH:mm:ss") : undefined}
+                                    onChange={(t, str) => {
+                                        this.state.RowData.endDate = str;
+                                        this.setState({ RowData: this.state.RowData });
+                                    }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <span className="modal-box-title">上传图片</span>
+                            <div className="modal-box-detail clearfix">
+                                <Avatar sign={this.state.RowData.sign} id={this.state.RowData.id}
+                                    imageUrl={this.state.RowData.imgurl ? (globalConfig.avatarHost + "/upload" + this.state.RowData.imgurl) : null}
+                                    urlData={(url) => { this.state.RowData.imgurl = url }} />
+                            </div>
+                        </div>
+                        <div className="modal-box">
+                            <Button type="primary" onClick={this.submit}>提交</Button>
+                            <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button>
+                        </div>
+                    </Spin>
+                </Modal>
             </div>
         );
     }

+ 10 - 1
js/component/manageCenter/idea/content.less

@@ -34,7 +34,8 @@
         margin-bottom: 10px;
         .modal-box-title {
             float: left;
-            width: 60px;
+            width: 84px;
+            text-align: right;
             margin-right: 20px;
         }
         .modal-box-detail {
@@ -50,6 +51,14 @@
     }
 }
 
+.no-all-select {
+    .ant-table-selection {
+        .ant-checkbox {
+            display: none;
+        }
+    }
+}
+
 .avatar-uploader,
 .avatar-uploader-trigger,
 .avatar {