| | |
| | | background-size: cover; |
| | | background-position: center center; |
| | | height: auto; |
| | | min-height: 32px; |
| | | min-height: 28px; |
| | | text-align: center; |
| | | border-width: 0; |
| | | span { |
| | | font-style: inherit; |
| | | text-decoration: inherit; |
| | |
| | | return ( |
| | | <Form {...formItemLayout} className="picture-edit-model-form"> |
| | | <Row gutter={24}> |
| | | {!card.id ? <Col span={24}> |
| | | {!card.id && card.typecharone !== 'color' ? <Col span={24}> |
| | | <Form.Item label="添加方式"> |
| | | <Radio.Group value={plusType} onChange={(e) => {this.changeType(e.target.value)}} disabled={false}> |
| | | <Radio value="upload">上传</Radio> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {!card.id && plusType === 'input' ? <Col span={24}> |
| | | {!card.id && card.typecharone !== 'color' && plusType === 'input' ? <Col span={24}> |
| | | <Form.Item label="地址"> |
| | | {getFieldDecorator('linkurl', { |
| | | initialValue: linkurl, |
| | |
| | | })(<TextArea autoSize={{ minRows: 3 }} onPressEnter={() => this.props.inputSubmit()}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {card.id ? <Col span={24}> |
| | | {card.id && card.typecharone !== 'color' ? <Col span={24}> |
| | | <Form.Item label="地址"> |
| | | <TextArea value={card.linkurl} readOnly={true} autoSize={{ minRows: 3 }} /> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {card.typecharone === 'color' ? <Col span={24}> |
| | | <Form.Item label="色值"> |
| | | {getFieldDecorator('linkurl', { |
| | | initialValue: '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请填写色值!' |
| | | }, |
| | | { |
| | | max: 100, |
| | | message: '色值最多100个字符!' |
| | | } |
| | | ] |
| | | })(<Input onPressEnter={() => this.props.inputSubmit()}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}> |
| | | <Form.Item label="备注"> |
| | | {getFieldDecorator('remark', { |
| | |
| | | pageSize: 12, |
| | | filpictures: [], |
| | | filvideos: [], |
| | | colorlist: [], |
| | | piclist: [], |
| | | vidlist: [], |
| | | picIndex: 1, |
| | |
| | | trigger = () => { |
| | | let pictures = sessionStorage.getItem('app_pictures') |
| | | let videos = sessionStorage.getItem('app_videos') |
| | | let colorlist = sessionStorage.getItem('app_colors') |
| | | |
| | | try { |
| | | pictures = JSON.parse(pictures) |
| | | videos = JSON.parse(videos) |
| | | colorlist = JSON.parse(colorlist) |
| | | } catch { |
| | | pictures = [] |
| | | videos = [] |
| | | colorlist = [] |
| | | } |
| | | |
| | | let filpictures = pictures |
| | |
| | | videoKey: '', |
| | | piclist, |
| | | vidlist, |
| | | colorlist, |
| | | videos |
| | | }) |
| | | } |
| | |
| | | if (card.typecharone === 'image') { |
| | | sessionStorage.setItem('app_pictures', JSON.stringify(result.data || [])) |
| | | this.resetPicture(result.data || []) |
| | | } else { |
| | | } else if (card.typecharone === 'video') { |
| | | sessionStorage.setItem('app_videos', JSON.stringify(result.data || [])) |
| | | this.resetVideo(result.data || []) |
| | | } else if (card.typecharone === 'color') { |
| | | sessionStorage.setItem('app_colors', JSON.stringify(result.data || [])) |
| | | this.resetColor(result.data || []) |
| | | } |
| | | this.setState({editvisible: false}) |
| | | } else { |
| | |
| | | if (item.typecharone === 'image') { |
| | | sessionStorage.setItem('app_pictures', JSON.stringify(res.data || [])) |
| | | _this.resetPicture(res.data || []) |
| | | } else { |
| | | } else if (item.typecharone === 'video') { |
| | | sessionStorage.setItem('app_videos', JSON.stringify(res.data || [])) |
| | | _this.resetVideo(res.data || []) |
| | | } else if (item.typecharone === 'color') { |
| | | sessionStorage.setItem('app_colors', JSON.stringify(res.data || [])) |
| | | _this.resetColor(res.data || []) |
| | | } |
| | | } else { |
| | | notification.warning({ |
| | |
| | | let vidlist = filvideos.filter((item, index) => index < pageSize) |
| | | |
| | | this.setState({vidIndex: 1, filvideos, vidlist, videos: data}) |
| | | } |
| | | |
| | | resetColor = (data) => { |
| | | this.setState({colorlist: data}) |
| | | } |
| | | |
| | | filterPicture = () => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex } = this.state |
| | | const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state |
| | | |
| | | return ( |
| | | <div style={{display: 'inline-block'}}> |
| | |
| | | </Row> |
| | | {filvideos.length > pageSize ? <Pagination size="small" current={vidIndex} pageSize={pageSize} onChange={this.changeVidSize} total={filvideos.length} /> : null} |
| | | </TabPane> |
| | | <TabPane tab="颜色管理" key="color"> |
| | | <Row style={{marginBottom: '15px'}}> |
| | | <Col span={24}> |
| | | 可添加应用中常用的颜色,可以是英文代码、HEX格式、RGB格式,最多可添加25种。 |
| | | {colorlist.length < 25 ? <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'color'})}> |
| | | 添加 |
| | | </Button> : null} |
| | | </Col> |
| | | </Row> |
| | | <Row gutter={16} style={{height: '340px'}}> |
| | | {colorlist.length > 0 && colorlist.map(item => ( |
| | | <Col span={4} key={item.id}> |
| | | <div className="image-video-box"> |
| | | <div className="image-video-box-body" style={{background: item.linkurl}}> |
| | | </div> |
| | | <div className="image-video-control"> |
| | | <Icon type="copy" onClick={() => this.copySource(item)}/> |
| | | <Icon type="delete" onClick={() => this.deleteSource(item)}/> |
| | | </div> |
| | | </div> |
| | | <p className="image-video-remark">{item.remark}</p> |
| | | </Col> |
| | | ))} |
| | | {!colorlist.length ? <Empty description={null}/> : null} |
| | | </Row> |
| | | </TabPane> |
| | | </Tabs> |
| | | </Modal> |
| | | <Modal |
| | |
| | | } |
| | | state = { |
| | | color: '', |
| | | colors: [], |
| | | allowClear: false |
| | | } |
| | | |
| | |
| | | } else if (value) { |
| | | initVal = value |
| | | } |
| | | |
| | | let _colors = sessionStorage.getItem('app_colors') || [] |
| | | try { |
| | | _colors = JSON.parse(_colors) |
| | | } catch { |
| | | _colors = [] |
| | | } |
| | | |
| | | this.setState({color: initVal, allowClear: allowClear === true}) |
| | | let colors = presetColors.map((item, i) => { |
| | | if (_colors[i] && _colors[i].linkurl && !presetColors.includes(_colors[i].linkurl)) { |
| | | return _colors[i].linkurl |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({color: initVal, allowClear: allowClear === true, colors}) |
| | | } |
| | | |
| | | handleChange = (color) => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { color, allowClear } = this.state |
| | | const { color, allowClear, colors } = this.state |
| | | return ( |
| | | <div className="color-sketch-block"> |
| | | <Popover content={ |
| | | <SketchPicker color={ color } presetColors={presetColors} onChange={ this.handleChange } /> |
| | | <SketchPicker color={ color } presetColors={colors} onChange={ this.handleChange } /> |
| | | } overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click"> |
| | | <div className="color-sketch-block-box"> |
| | | <div className="color-sketch-block-inner" style={ {background: color} }></div> |
| | |
| | | button { |
| | | margin-right: 0px; |
| | | margin-bottom: 0px; |
| | | min-height: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | resProps.children = ( |
| | | <div> |
| | | {photos.map((url, i) => ( |
| | | {photos && photos.map((url, i) => ( |
| | | <Col key={i} span={cols}> |
| | | <div className={'ant-mk-picture' + (scale ? ' scale' : '')} onClick={() => { |
| | | if (!scale) return |
| | |
| | | button { |
| | | margin-right: 0px; |
| | | margin-bottom: 0px; |
| | | min-height: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | .ant-modal-mask { |
| | |
| | | button { |
| | | margin-right: 0px; |
| | | margin-bottom: 0px; |
| | | min-height: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | } |
| | |
| | | .button-list.toolbar-button { |
| | | button { |
| | | height: auto; |
| | | min-height: 32px; |
| | | min-height: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-right: 15px; |
| | | margin-bottom: 10px; |
| | | overflow: hidden; |
| | | min-height: 28px; |
| | | height: 28px; |
| | | } |
| | | |
| | | .loading-skeleton { |
| | |
| | | |
| | | render() { |
| | | const { components, visible } = this.state |
| | | console.log(components) |
| | | |
| | | return ( |
| | | <div className="page-setting-wrap"> |
| | | {options.sysType === 'local' ? <Button |
| | |
| | | top: 5px; |
| | | } |
| | | } |
| | | .ant-btn { |
| | | height: 28px; |
| | | min-height: 28px; |
| | | } |
| | | } |
| | | .advanced-list { |
| | | font-size: 13px; |
| | |
| | | font-size: 24px; |
| | | width: 35px; |
| | | height: 35px; |
| | | line-height: 38px; |
| | | line-height: 40px; |
| | | border-radius: 35px; |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | getAppPictures = () => { |
| | | if (sessionStorage.getItem('app_videos') || sessionStorage.getItem('app_pictures')) return |
| | | |
| | | Api.getSystemConfig({ |
| | | func: 's_url_db_adduptdel', |
| | | PageIndex: 0, // 0 代表全部 |
| | |
| | | sessionStorage.setItem('app_videos', JSON.stringify(res.data || [])) |
| | | } |
| | | }) |
| | | Api.getSystemConfig({ |
| | | func: 's_url_db_adduptdel', |
| | | PageIndex: 0, // 0 代表全部 |
| | | PageSize: 0, // 0 代表全部 |
| | | typecharone: 'color', |
| | | type: 'search' |
| | | }).then(res => { |
| | | if (res.status) { |
| | | sessionStorage.setItem('app_colors', JSON.stringify(res.data || [])) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | .ant-card-extra { |
| | | padding: 5px 0; |
| | | button { |
| | | margin-left: 20px; |
| | | margin-left: 10px; |
| | | } |
| | | .ant-switch.big { |
| | | min-width: 60px; |
| | |
| | | sessionStorage.setItem('app_videos', JSON.stringify(res.data || [])) |
| | | } |
| | | }) |
| | | Api.getSystemConfig({ |
| | | func: 's_url_db_adduptdel', |
| | | PageIndex: 0, // 0 代表全部 |
| | | PageSize: 0, // 0 代表全部 |
| | | typecharone: 'color', |
| | | type: 'search' |
| | | }).then(res => { |
| | | if (res.status) { |
| | | sessionStorage.setItem('app_colors', JSON.stringify(res.data || [])) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | }) |
| | | } |
| | | }) |
| | | Api.getSystemConfig({ |
| | | func: 's_url_db_adduptdel', |
| | | PageIndex: 0, // 0 代表全部 |
| | | PageSize: 0, // 0 代表全部 |
| | | typecharone: 'color', |
| | | type: 'search' |
| | | }).then(res => { |
| | | if (res.status) { |
| | | sessionStorage.setItem('app_colors', JSON.stringify(res.data || [])) |
| | | } else if (!res.status) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |