videoForm.jsx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Icon,
  5. Modal,
  6. message,
  7. Spin,
  8. Upload,
  9. Input,
  10. Button,
  11. Form,
  12. Select
  13. } from 'antd';
  14. import { videoType } from '@/dataDic.js';
  15. import { getVideoType} from '@/tools.js';
  16. import VideoComponent from '@/crop/video';
  17. import Crop from '@/crop/cropBlock';
  18. const NewDetailForm = Form.create()(React.createClass({
  19. getInitialState() {
  20. return {
  21. visible: false,
  22. loading: false,
  23. auditStatus: 0,
  24. textFileList: [],
  25. videoImg: [],
  26. vedioUrl:[]
  27. };
  28. },
  29. loadData(id) {
  30. this.setState({
  31. loading: true
  32. });
  33. $.ajax({
  34. method: "get",
  35. dataType: "json",
  36. crossDomain: false,
  37. url: globalConfig.context + '/api/admin/policy/detail' ,
  38. data: {
  39. id: id
  40. },
  41. success: function (data) {
  42. let thisData = data.data,provice=[];
  43. if (!thisData) {
  44. if (data.error && data.error.length) {
  45. message.warning(data.error[0].message);
  46. };
  47. thisData = {};
  48. };
  49. let proArr=[];
  50. this.setState({
  51. id:thisData.id,
  52. data: thisData,
  53. auditStatus:thisData.auditStatus,
  54. videoUrl:[],
  55. videoImg: thisData.titleImg ? splitUrl(thisData.titleImg, ',', globalConfig.avatarHost + '/upload') : []
  56. });
  57. }.bind(this),
  58. }).always(function () {
  59. this.setState({
  60. loading: false
  61. });
  62. }.bind(this));
  63. },
  64. getPictureUrl(e) {
  65. this.setState({ pictureUrl: e });
  66. },
  67. handleSubmit(e,index) {
  68. e.preventDefault();
  69. this.props.form.validateFields((err, values) => {
  70. //url转化
  71. let thePictureUrl = [];
  72. if (this.state.pictureUrl.length) {
  73. let picArr = [];
  74. this.state.pictureUrl.map(function (item) {
  75. if ( item.response && item.response.data && item.response.data.length ){
  76. picArr.push(item.response.data);
  77. }
  78. });
  79. thePictureUrl = picArr.join(",");
  80. };
  81. if (!err) {
  82. this.setState({
  83. loading: true
  84. });
  85. $.ajax({
  86. method: "post",
  87. dataType: "json",
  88. async:true,
  89. url: this.props.data.id ? globalConfig.context + '/api/admin/policy/update' : globalConfig.context + '/api/admin/policy/apply',
  90. data: {
  91. id: this.props.data.id,
  92. type:0,
  93. title: values.title,
  94. author: values.author,
  95. titleImg: thePictureUrl.length?thePictureUrl:'',
  96. content:this.state.edit.content,
  97. hot:values.hot,
  98. source:values.source,
  99. sourceUrl:values.sourceUrl,
  100. keyword:values.keyword,
  101. auditStatus:index,
  102. summary: values.summary,
  103. }
  104. }).done(function (data) {
  105. this.setState({
  106. loading: false
  107. });
  108. if (!data.error.length) {
  109. message.success('操作成功!');
  110. this.setState({
  111. visible: false
  112. });
  113. this.props.handOk();
  114. } else {
  115. message.warning(data.error[0].message);
  116. }
  117. }.bind(this));
  118. }
  119. });
  120. },
  121. cancelFun(){
  122. this.state.edit={};
  123. this.props.closeDesc();
  124. },
  125. componentWillMount() {
  126. if (this.props.data.id) {
  127. this.loadData(this.props.data.id);
  128. } else {
  129. this.state.data = {};
  130. this.state.videoImg = [];
  131. this.state.videoUrl=[];
  132. };
  133. },
  134. componentWillReceiveProps(nextProps) {
  135. if (!this.props.visible && nextProps.visible) {
  136. if (nextProps.data.id) {
  137. this.loadData(nextProps.data.id);
  138. } else {
  139. this.state.data = {};
  140. this.state.videoImg = [];
  141. this.state.theData={};
  142. this.state.videoUrl=[];
  143. };
  144. this.props.form.resetFields();
  145. };
  146. },
  147. render() {
  148. const theData = this.state.data || {};
  149. const { getFieldDecorator } = this.props.form;
  150. const FormItem = Form.Item
  151. const formItemLayout = {
  152. labelCol: { span: 6 },
  153. wrapperCol: { span: 12 },
  154. };
  155. const formItemLayouts = {
  156. labelCol: { span: 3 },
  157. wrapperCol: { span: 18 },
  158. };
  159. return (
  160. <div className='login'>
  161. <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} id="demand-form">
  162. <Spin spinning={this.state.loading}>
  163. <div className="clearfix">
  164. <FormItem className="half-item" {...formItemLayout} label="视频名称">
  165. {getFieldDecorator('title', {
  166. rules: [ { required: true, message: '此项为必填项!' } ],
  167. initialValue: theData.title
  168. })(<Input placeholder="请输入视频的名称" />)}
  169. </FormItem>
  170. <FormItem className="half-item" {...formItemLayout} label="视频类型">
  171. {getFieldDecorator('title1', {
  172. rules: [ { required: true, message: '此项为必填项!' } ],
  173. initialValue: theData.title1
  174. })(<Select placeholder="请选择视频类型">
  175. {videoType.map(item=>{
  176. return <Select.Option value={item.value}>{item.key}</Select.Option>
  177. })}
  178. </Select>)}
  179. </FormItem>
  180. </div>
  181. <div className="clearfix">
  182. <FormItem className="half-item" {...formItemLayout} label="视频文件">
  183. < VideoComponent
  184. fileList={(e)=>{this.setState({videoUrl:e})}}
  185. dataUrl={{
  186. url:'/api/user/demand/uploadPicture',
  187. keyWord:'demand_picture',
  188. type:'video',
  189. page:1
  190. }}
  191. videoUrl={this.state.videoUrl}
  192. visible={this.props.visible}
  193. />
  194. </FormItem>
  195. <FormItem className="half-item" {...formItemLayout} label="封面图片">
  196. <Crop
  197. getAllImg={(e)=>{this.setState({videoImg:e})}}
  198. number = {1}
  199. aspectRatio = {1/1}
  200. url ={globalConfig.context + '/api/user/uploadPicture64'}
  201. uploadData = {{sign:'user_picture'}}
  202. urlArr = {this.state.videoImg}
  203. />
  204. </FormItem>
  205. </div>
  206. <div className="clearfix">
  207. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="视频简介">
  208. {getFieldDecorator('summary', {
  209. initialValue: theData.summary
  210. })(<Input type="textarea" rows={4} placeholder="输入视频简介" />)}
  211. </FormItem>
  212. </div>
  213. <div className="clearfix">
  214. <FormItem className="half-item" {...formItemLayout} label="发布人">
  215. <span>{theData.releaseStatus?'已发布':'管理员'}</span>
  216. </FormItem>
  217. {theData.createTime&&<FormItem className="half-item" {...formItemLayout} label="发布状态">
  218. <span>{theData.releaseStatus?'已发布':'未发布'}</span>
  219. </FormItem>}
  220. </div>
  221. <div className="clearfix">
  222. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  223. <Button className="set-submit" type="primary" htmlType="submit">
  224. 保存草稿
  225. </Button>
  226. <Button
  227. className="set-submit"
  228. type="ghost"
  229. onClick={(e) => {
  230. this.handleSubmit(e,2)
  231. }}
  232. >
  233. 发布视频
  234. </Button>
  235. <Button className="set-submit" type="ghost" onClick={this.cancelFun}>
  236. 取消
  237. </Button>
  238. </FormItem>
  239. </div>
  240. </Spin>
  241. </Form>
  242. </div>
  243. )
  244. }
  245. }));
  246. export default NewDetailForm;