123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702 |
- import React from 'react';
- import $ from 'jquery/src/ajax';
- import {
- Icon,
- Tooltip,
- Modal,
- message,
- Spin,
- Upload,
- Input,
- Select,
- Button,
- Radio,
- Form,
- Cascader,
- Tag,
- InputNumber
- } from 'antd';
- import { citySelect } from '@/NewDicProvinceListAll';
- import { splitUrl ,getReleaseStateList} from '@/tools.js';
- //tag组件
- const KeyWordTagGroup = React.createClass({
- getInitialState() {
- return {
- tags: [],
- inputVisible: false,
- inputValue: ''
- };
- },
- handleClose(removedTag) {
- const tags = this.state.tags.filter(tag => tag !== removedTag);
- this.props.tagsArr(tags);
- this.setState({ tags });
- },
- showInput() {
- this.setState({ inputVisible: true }, () => this.input.focus());
- },
- handleInputChange(e) {
- this.setState({ inputValue: e.target.value });
- },
- handleInputConfirm() {
- const state = this.state;
- const inputValue = state.inputValue;
- let tags = state.tags;
- if (inputValue && tags.indexOf(inputValue) === -1 && inputValue.replace(/(^\s*)|(\s*$)/g, "").length != 0) {
- tags = [...tags, inputValue.replace(/(^\s*)|(\s*$)/g, "")];
- }
- this.props.tagsArr(tags);
- this.setState({
- tags,
- inputVisible: false,
- inputValue: '',
- });
- },
- componentWillMount() {
- this.state.tags = this.props.keyWordArr;
- },
- componentWillReceiveProps(nextProps) {
- if (this.props.keyWordArr != nextProps.keyWordArr) {
- this.state.tags = nextProps.keyWordArr;
- };
- },
- render() {
- const { tags, inputVisible, inputValue } = this.state;
- return (
- <div className="keyWord-tips">
- {tags.map((tag, index) => {
- const isLongTag = tag.length > 10;
- const tagElem = (
- <Tag key={tag} closable={index !== -1} afterClose={() => this.handleClose(tag)}>
- {isLongTag ? `${tag.slice(0, 10)}...` : tag}
- </Tag>
- );
- return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
- })}
- {inputVisible && (
- <Input
- ref={input => this.input = input}
- type="text"
- style={{ width: 78 }}
- value={inputValue}
- onChange={this.handleInputChange}
- onBlur={this.handleInputConfirm}
- onPressEnter={this.handleInputConfirm}
- />
- )}
- {!inputVisible && <Button className="addtips" type="dashed" disabled={tags.length > 9 ? true : false} onClick={this.showInput}>+ 新标签</Button>}
- </div>
- );
- }
- });
- //图片组件
- const PicturesWall = React.createClass({
- getInitialState() {
- return {
- previewVisible: false,
- previewImage: '',
- fileList: []
- };
- },
- handleCancel() {
- this.setState({ previewVisible: false });
- },
- handlePreview(file) {
- this.setState({
- previewImage: file.url || file.thumbUrl,
- previewVisible: true
- });
- },
- handleChange(info) {
- let fileList = info.fileList;
- this.setState({ fileList });
- this.props.fileList(fileList);
- },
- componentWillReceiveProps(nextProps) {
- this.state.fileList = nextProps.pictureUrl;
- },
- render() {
- const { previewVisible, previewImage, fileList } = this.state;
- const uploadButton = (
- <div>
- <Icon type="plus" />
- <div className="ant-upload-text">点击上传</div>
- </div>
- );
- return (
- <div style={{ display: 'inline-block' }}>
- <Upload
- action={globalConfig.context + '/api/user/jtBusiness/project/uploadPicture'}
- data={{ sign: 'jt_project_picture' }}
- listType="picture-card"
- fileList={fileList}
- onPreview={this.handlePreview}
- onChange={this.handleChange}
- >
- {fileList.length >= 1 ? null : uploadButton}
- </Upload>
- <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
- <img alt="example" style={{ width: '100%' }} src={previewImage} />
- </Modal>
- </div>
- );
- }
- });
- const DemandDetailForm = Form.create()(
- React.createClass({
- getInitialState() {
- return {
- visible: false,
- loading: false,
- auditStatus: 0,
- textFileList: [],
- videoFileList: [],
- pictureUrl: [],
- orgCodeUrl: [],
- companyLogoUrl: [],
- tags: []
- };
- },
- //左侧图片地址
- getOrgCodeUrl(e) {
- this.setState({ orgCodeUrl: e });
- },
- //右侧图片地址
- getCompanyLogoUrl(e) {
- this.setState({ companyLogoUrl: e });
- },
- //编辑部门,保存
- handleSubmit(e,index) {
- e.preventDefault();
- if (!this.state.name) {
- message.warning('请输入项目名称');
- return;
- }
- if ((this.state.name).length>16) {
- message.warning('项目名称在16个字以内');
- return false;
- };
- if (!this.state.categoryId||!this.state.categoryId[1]) {
- message.warning('请选择项目二级业务品类');
- return;
- }
- if (!this.state.ProvinceCity.length) {
- message.warning('请选择省份');
- return;
- }
- if (!this.state.price) {
- message.warning('请输入正确的市场价');
- return;
- }
- if(this.state.advertisement&&(this.state.advertisement).length>30){
- message.warning('项目营销说明字数不得超过30个字。');
- return;
- }
- this.setState({
- loading: true
- });
- let minPictureUrl = [];
- if (this.state.orgCodeUrl.length) {
- let picArr = [];
- this.state.orgCodeUrl.map(function(item) {
- if (item.response && item.response.data && item.response.data.length) {
- picArr.push(item.response.data);
- }
- });
- minPictureUrl = picArr.join(',');
- }
- let maxPictureUrl = [];
- if (this.state.companyLogoUrl.length) {
- let picArr = [];
- this.state.companyLogoUrl.map(function(item) {
- if (item.response && item.response.data && item.response.data.length) {
- picArr.push(item.response.data);
- }
- });
- maxPictureUrl = picArr.join(',');
- }
- $.ajax({
- method: 'post',
- dataType: 'json',
- crossDomain: false,
- url: globalConfig.context + '/api/user/jtBusiness/project/update',
- data: {
- auditStatus:index,
- id: this.state.id, //业务名称
- name: this.state.name, //业务名称
- categoryId: this.state.categoryId[1], //业务品类
- price: this.state.price, //市场价
- advertisement:this.state.advertisement,//项目营销说明
- activityPrice: this.state.activityPrice ? this.state.activityPrice : '0', //最低折扣
- memberPrice: this.state.memberPrice ? this.state.memberPrice : '0', //会员价
- offset: this.state.offset ? this.state.offset : '0',
- activityFlag: this.state.activityFlag, //活动生效标识
- province: this.state.ProvinceCity ? this.state.ProvinceCity[0] : '', //是否全国
- city: this.state.ProvinceCity ? this.state.ProvinceCity[1] : '',
- introduce: this.state.introduce,
- value: this.state.value,
- tag:this.state.tags?this.state.tags.join(','):'',
- isHot: this.state.isHot,
- minImgUrl: minPictureUrl.length ? minPictureUrl : '',
- maxImgUrl: maxPictureUrl.length ? maxPictureUrl : '',
- applyConditions: this.state.applyConditions
- }
- }).done(
- function(data) {
- if (!data.error.length) {
- message.success('保存成功!');
- this.setState({
- loading: false,
- editvisible: false
- });
- } else {
- message.warning(data.error[0].message);
- }
- this.props.handOk();
- }.bind(this)
- );
- },
- loadData(ids) {
- $.ajax({
- method: 'get',
- dataType: 'json',
- crossDomain: false,
- url: globalConfig.context + '/api/user/jtBusiness/project/detail',
- data: {
- id: ids
- },
- success: function(data) {
- if (!data.data) {
- if (data.error && data.error.length) {
- message.warning(data.error[0].message);
- }
- } else {
- let categoryIdArr=[];
- let thisdata = data.data;
- let ProvinceCityArr = [];
- ProvinceCityArr.push(thisdata.province, thisdata.city);
- (this.props.categoryList).map(item=>{
- if(item.children.length){
- (item.children).map(atem=>{
- if(atem.value==thisdata.categoryId){
- categoryIdArr.push(item.value,atem.value)
- }
- })
- }
- })
- this.setState({
- id: thisdata.id, //业务名称
- name: thisdata.name, //业务名称
- tags:thisdata.tag?thisdata.tag.split(','):[],
- categoryId: categoryIdArr, //业务品类
- number: thisdata.number,
- auditInfo:thisdata.auditInfo,
- price: thisdata.price, //市场价
- activityPrice: thisdata.activityPrice ? thisdata.activityPrice : '', //最低折扣
- memberPrice: thisdata.memberPrice ? thisdata.memberPrice : '', //会员价
- offset: thisdata.offset ? thisdata.offset : '',
- activityFlag: thisdata.activityFlag ? thisdata.activityFlag.toString() : '', //活动生效标识
- ProvinceCity: ProvinceCityArr,
- introduce: thisdata.introduce,
- createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '',
- value: thisdata.value,
- isHot:thisdata.isHot,
- auditStatus:thisdata.auditStatus,
- applyConditions: thisdata.applyConditions,
- orgCodeUrl: thisdata.minImgUrl
- ? splitUrl(thisdata.minImgUrl, ',', globalConfig.avatarHost + '/upload')
- : [],
- companyLogoUrl: thisdata.maxImgUrl
- ? splitUrl(thisdata.maxImgUrl, ',', globalConfig.avatarHost + '/upload')
- : []
- });
- }
- }.bind(this)
- }).always(
- function() {
- this.setState({
- loading: false
- });
- }.bind(this)
- );
- },
- submission(e, index) {
- this.handleSubmit(e, index);
- $.ajax({
- method: 'get',
- dataType: 'json',
- crossDomain: false,
- async: true,
- url: globalConfig.context + '/api/user/jtBusiness/project/publish',
- data: {
- id: this.state.id,
- auditStatus:1
- }
- }).done(
- function(data) {
- if (!data.error.length) {
- this.setState({
- loading: false
- });
- } else {
- message.warning(data.error[0].message);
- }
- }.bind(this)
- );
- },
- cancelFun() {
- this.props.closeDesc();
- },
- componentWillMount() {
- if (this.props.data.id) {
- this.loadData(this.props.data.id);
- }
- },
- componentWillReceiveProps(nextProps) {
- if (!this.props.visible && nextProps.visible) {
- this.state.textFileList = [];
- this.state.videoFileList = [];
- if (nextProps.data.id) {
- this.loadData(nextProps.data.id);
- }
- }
- },
- render() {
- const FormItem = Form.Item;
- let categoryList = this.props.categoryList||[];
- return (
- <div className="patent-desc">
- <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form">
- <Spin spinning={this.state.loading}>
- <div className="clearfix" style={{ paddingLeft: '86px' }}>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label={
- <span>
- <strong style={{ color: 'red' }}>*</strong>项目名称
- </span>
- }
- >
- <Input
- placeholder="项目名称"
- value={this.state.name}
- onChange={(e) => {
- this.setState({ name: e.target.value });
- }}
- />
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label={
- <span>
- <strong style={{ color: 'red' }}>*</strong>业务品类
- </span>
- }
- >
- <Cascader
- options={categoryList}
- value={this.state.categoryId}
- placeholder="业务品类"
- onChange={(e, pre) => {
- this.setState({ categoryId: e });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix" style={{ paddingLeft: '86px' }}>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label={
- <span>
- <strong style={{ color: 'red' }}>*</strong>省-市
- </span>
- }
- >
- <Cascader
- options={citySelect()}
- value={this.state.ProvinceCity}
- placeholder="选择市"
- onChange={(e, pre) => {
- this.setState({ ProvinceCity: e });
- }}
- />
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label={
- <span>
- <strong style={{ color: 'red' }}>*</strong>热点
- </span>
- }
- >
- <Radio.Group
- onChange={(e) => {
- this.setState({ isHot: e.target.value });
- }}
- value={this.state.isHot}
- >
- <Radio value={0}>否</Radio>
- <Radio value={1}>是</Radio>
- </Radio.Group>
- </FormItem>
- </div>
- <div className="clearfix" style={{ paddingLeft: '86px' }}>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label={
- <span>
- <strong style={{ color: 'red' }}>*</strong>市场价
- </span>
- }
- >
- <InputNumber
- placeholder="市场价"
- value={this.state.price}
- style={{ width: 120 }}
- onChange={(e) => {
- this.setState({ price: e });
- }}
- required="required"
- />
- <span style={{ marginLeft: 10 }}>万元</span>
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="活动价"
- >
- <InputNumber
- placeholder="活动价"
- value={this.state.activityPrice}
- style={{ width: 120 }}
- onChange={(e) => {
- this.setState({ activityPrice: e });
- }}
- min={0}
- max={999999}
- step={0.01}
- />
- <span style={{ marginLeft: 10 }}>万元</span>
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="最低折扣"
- >
- <InputNumber
- placeholder="最低折扣(如:0.5)"
- value={this.state.offset}
- style={{ width: '50%' }}
- onChange={(e) => {
- this.setState({ offset: e });
- }}
- min={0}
- max={1}
- step={0.01}
- />
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="会员价"
- >
- <InputNumber
- placeholder="会员价"
- value={this.state.memberPrice}
- style={{ width: '120px' }}
- onChange={(e) => {
- this.setState({ memberPrice: e });
- }}
- min={0}
- max={999999}
- step={0.01}
- />
- <span style={{ marginLeft: 10 }}>万元</span>
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="活动生效"
- >
- <Select
- placeholder="活动生效"
- value={this.state.activityFlag}
- style={{ width: '94%' }}
- onChange={(e) => {
- this.setState({ activityFlag: e });
- }}
- >
- <Select.Option key="0">无效</Select.Option>
- <Select.Option key="1">有效</Select.Option>
- </Select>
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="创建时间"
- >
- <span style={{ width: '94%' }}>{this.state.createTime}</span>
- </FormItem>
- </div>
- <div className="clearfix">
- <FormItem
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 18 }}
- label={<span><span></span>标签</span>} >
- <KeyWordTagGroup
- keyWordArr={this.state.tags}
- tagsArr={(e)=>{this.setState({tags:e})}}
- />
- </FormItem>
- </div>
- <div>
- <FormItem
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="发布状态">
- <span>{getReleaseStateList(this.state.auditStatus)}</span>
- </FormItem>
- </div>
- <div className="clearfix">
- {this.state.auditInfo?<FormItem
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 12 }}
- label="拒绝原因">
- <span>{this.state.auditInfo}</span>
- </FormItem>:''}
- </div>
-
- <div className="clearfix">
- <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目服务内容">
- <Input
- type="textarea"
- rows={4}
- placeholder="业务项目服务内容"
- value={this.state.introduce}
- onChange={(e) => {
- this.setState({ introduce: e.target.value });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix">
- <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="项目营销说明">
- <Input
- type="textarea"
- rows={4}
- placeholder="项目营销说明"
- value={this.state.advertisement}
- onChange={(e) => {
- this.setState({ advertisement: e.target.value });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix">
- <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目价值及作用">
- <Input
- type="textarea"
- rows={4}
- placeholder="业务项目价值及作用"
- value={this.state.value}
- onChange={(e) => {
- this.setState({ value: e.target.value });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix">
- <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label="业务项目客户基本条件">
- <Input
- type="textarea"
- rows={4}
- placeholder="业务项目客户基本条件"
- value={this.state.applyConditions}
- onChange={(e) => {
- this.setState({ applyConditions: e.target.value });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix pictures">
- <FormItem
- className="half-item"
- labelCol={{ span: 8 }}
- wrapperCol={{ span: 10 }}
- label="业务项目图标(小)"
- >
- <PicturesWall
- pictureSign="business_project_min_picture"
- fileList={this.getOrgCodeUrl}
- pictureUrl={this.state.orgCodeUrl}
- />
- <p>图片建议:图片要清晰。(72*72)</p>
- </FormItem>
- <FormItem
- className="half-item"
- labelCol={{ span: 8 }}
- wrapperCol={{ span: 12 }}
- label="业务项目图标(大)"
- >
- <PicturesWall
- pictureSign="business_project_max_picture"
- fileList={this.getCompanyLogoUrl}
- pictureUrl={this.state.companyLogoUrl}
- />
- <p>图片建议:图片要清晰。(330*230)</p>
- </FormItem>
- </div>
- <Button
- className="set-submit"
- type="primary"
- htmlType="submit"
- style={{ marginLeft: '160px', marginBottom: '20px', marginTop: '20px' }}
- >
- 保存
- </Button>
- <Button
- className="set-submit"
- type="ghost"
- onClick={(e) => {
- this.submission(e,1)
- }}
- >
- 提交审核
- </Button>
- <Button
- className="set-submit"
- type="ghost"
- onClick={this.cancelFun}
- >
- 取消
- </Button>
- </Spin>
- </Form>
- </div>
- );
- }
- })
- );
- export default DemandDetailForm;
|