add.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. import React,{Component} from 'react';
  2. import SpinContainer from "../../../SpinContainer";
  3. import {Button, Form, Icon, Input, message, Modal, Select, Upload} from "antd";
  4. import {beforeUploadFile,splitUrl} from "@/tools.js";
  5. import Editors from "@/richTextEditors";
  6. import $ from "jquery/src/ajax";
  7. const FormItem = Form.Item;
  8. //上传图片组件
  9. const PicturesWall = React.createClass({
  10. getInitialState() {
  11. return {
  12. previewVisible: false,
  13. previewImage: "",
  14. fileList: this.props.pictureUrl,
  15. type:''
  16. };
  17. },
  18. getDefaultProps() {
  19. return {
  20. changeClick: this.modifyChange
  21. };
  22. },
  23. handleCancel() {
  24. this.setState({ previewVisible: false });
  25. },
  26. handlePreview(file) {
  27. let type = '';
  28. if(file.type){
  29. let str = file.type;
  30. let index = str.indexOf("/");
  31. type =str.substring(0,index);
  32. }else{
  33. let str = file.url || file.thumbUrl;
  34. let index = str.indexOf(".");
  35. type =str.substring(index+1);
  36. }
  37. this.setState({
  38. type,
  39. previewImage: file.url || file.thumbUrl,
  40. previewVisible: true
  41. });
  42. },
  43. handleChange(info) {
  44. let fileList = info.fileList;
  45. this.setState({ fileList });
  46. this.props.fileList(fileList);
  47. },
  48. componentWillReceiveProps(nextProps) {
  49. this.state.fileList = nextProps.pictureUrl;
  50. },
  51. render() {
  52. const { previewVisible, previewImage, fileList } = this.state;
  53. const uploadButton = (
  54. <div>
  55. <Icon type="plus" />
  56. <div className="ant-upload-text">点击上传</div>
  57. </div>
  58. );
  59. return (
  60. <div style={{ display: "inline-block" }}>
  61. <Upload
  62. accept={
  63. this.props.type ==='img' ? "image/*" :
  64. this.props.type ==='video' ?
  65. "video/mp4,video/rmvb,video/mkv,video/avi,audio/mp3" : ''}
  66. beforeUpload={beforeUploadFile}
  67. action={globalConfig.context + "/api/admin/customerCase/uploadFile"}
  68. data={{ sign: "purchase_picture" }}
  69. listType="picture-card"
  70. fileList={fileList}
  71. onPreview={this.handlePreview}
  72. onChange={this.handleChange}
  73. >
  74. {fileList && fileList.length >= 1 ? null : uploadButton}
  75. </Upload>
  76. <Modal
  77. maskClosable={false}
  78. visible={previewVisible}
  79. footer={null}
  80. onCancel={this.handleCancel}
  81. >
  82. {
  83. this.state.type=== 'image' ?
  84. <img alt="" style={{ width: "100%" }} src={previewImage} /> :
  85. this.state.type=== 'video' ?
  86. <video style={{width:'100%'}} controls="controls" autoPlay="" name="media">
  87. <source src={previewImage} type="video/mp4"/>
  88. </video>:
  89. this.state.type=== 'audio' ?
  90. <audio src={previewImage} controls="controls">Your browser does not support the audio element.</audio>: ''
  91. }
  92. </Modal>
  93. </div>
  94. );
  95. }
  96. });
  97. class Add extends Component{
  98. constructor(props) {
  99. super(props);
  100. this.state={
  101. loading: false,
  102. projectType: '',
  103. sort:'',
  104. name:'',
  105. pictureVideoUrl: '',
  106. pictureImgUrl: '',
  107. content: '',
  108. amount: '',
  109. projectList: [],
  110. host: 0,
  111. }
  112. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  113. this.getVideoOrgCodeUrl = this.getVideoOrgCodeUrl.bind(this);
  114. this.onOk = this.onOk.bind(this);
  115. this.getProjectList = this.getProjectList.bind(this);
  116. }
  117. componentDidMount() {
  118. this.getProjectList();
  119. }
  120. getOrgCodeUrl(e) {
  121. this.setState({ pictureImgUrl: e });
  122. }
  123. getVideoOrgCodeUrl(e) {
  124. this.setState({ pictureVideoUrl: e });
  125. }
  126. onOk(releaseStatus = 0){
  127. if(!this.state.name){
  128. message.warning('请输入产品名称');
  129. return false;
  130. }
  131. if(isNaN(parseInt(this.state.projectType))){
  132. message.warning('请输入产品分类');
  133. return false;
  134. }
  135. if(isNaN(parseInt(this.state.amount))){
  136. message.warning('请输入正确的金额');
  137. return false;
  138. }
  139. if(this.state.pictureVideoUrl.length === 0){
  140. message.warning('请上传视频/音频');
  141. return false;
  142. }
  143. if(this.state.pictureImgUrl.length === 0){
  144. message.warning('请上传略缩图');
  145. return false;
  146. }
  147. if(!this.state.content){
  148. message.warning('请输入简介');
  149. return false;
  150. }
  151. this.setState({
  152. loading: true
  153. });
  154. let url = this.props.id ? "/api/admin/project/update" : "/api/admin/project/add"
  155. $.ajax({
  156. method: "post",
  157. dataType: "json",
  158. crossDomain: false,
  159. url: globalConfig.context + url,
  160. data: {
  161. name: this.state.name || undefined,
  162. sort:this.state.sort || undefined,
  163. content: this.state.content || undefined,
  164. id: this.props.id || undefined,
  165. type: this.state.projectType,
  166. amount: this.state.amount || undefined,
  167. commodityUrl: this.state.pictureVideoUrl[0].response.data || undefined,
  168. thumbnailUrl: this.state.pictureImgUrl[0].response.data || undefined,
  169. host: this.state.host,
  170. releaseStatus,
  171. },
  172. success: function(data) {
  173. if (data.error && data.error.length) {
  174. message.warning(data.error[0].message);
  175. } else {
  176. message.success(this.state.id ? '修改成功' : '添加成功');
  177. this.props.onOk();
  178. }
  179. }.bind(this)
  180. }).always(
  181. function() {
  182. this.setState({
  183. loading: false
  184. });
  185. }.bind(this)
  186. );
  187. }
  188. getProjectList() {
  189. this.setState({
  190. loading: true
  191. });
  192. $.ajax({
  193. method: "get",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + "/open/projectList",
  197. data: {}
  198. }).done((data1) => {
  199. if (data1.error.length !== 0) {
  200. message.warning(data1.error[0].message);
  201. } else {
  202. this.setState({
  203. projectList: data1.data,
  204. },()=>{
  205. if(this.props.infor){
  206. this.setState({
  207. name: this.props.infor.name,
  208. sort:this.props.infor.sort,
  209. content: this.props.infor.content,
  210. projectType: this.props.infor.type,
  211. amount: this.props.infor.amount,
  212. pictureVideoUrl: this.props.infor.commodityUrl ? splitUrl(this.props.infor.commodityUrl, ',', globalConfig.avatarHost + '/upload') : [],
  213. pictureImgUrl: this.props.infor.thumbnailUrl ? splitUrl(this.props.infor.thumbnailUrl, ',', globalConfig.avatarHost + '/upload') : [],
  214. host: this.props.infor.host,
  215. })
  216. }
  217. });
  218. }
  219. }).always(function () {
  220. this.setState({
  221. loading: false
  222. });
  223. }.bind(this))
  224. }
  225. render() {
  226. return (
  227. <Modal
  228. className="customeDetails"
  229. title={this.props.id ? "修改产品" : "添加产品"}
  230. okText={"保存"}
  231. width="1050"
  232. visible={this.props.visible}
  233. onCancel={this.props.onCancel}
  234. footer={false}
  235. >
  236. <Form
  237. layout="horizontal"
  238. id="demand-form"
  239. >
  240. <SpinContainer spinning={this.state.loading}>
  241. <div className="clearfix">
  242. <FormItem
  243. className="half-item"
  244. labelCol={{ span: 8 }}
  245. wrapperCol={{ span: 12 }}
  246. label="产品名称"
  247. >
  248. <Input
  249. placeholder="请输入产品名称"
  250. value={this.state.name}
  251. onChange={(e) => {
  252. this.setState({ name: e.target.value });
  253. }}
  254. />
  255. </FormItem>
  256. <FormItem
  257. className="half-item"
  258. labelCol={{ span: 8 }}
  259. wrapperCol={{ span: 12 }}
  260. label="产品分类"
  261. >
  262. <Select
  263. value={this.state.projectType}
  264. placeholder="请选择产品分类"
  265. onChange={e => {
  266. this.setState({
  267. projectType: e
  268. });
  269. }}
  270. >
  271. {
  272. this.state.projectList.map((v,k)=>(
  273. <Option key={k} value={v.id}>{v.name}</Option>
  274. ))
  275. }
  276. </Select>
  277. </FormItem>
  278. <FormItem
  279. className="half-item"
  280. labelCol={{ span: 8 }}
  281. wrapperCol={{ span: 12 }}
  282. label="产品金额"
  283. >
  284. <Input
  285. type={'number'}
  286. placeholder="请输入产品金额"
  287. value={this.state.amount}
  288. onChange={(e) => {
  289. this.setState({ amount: e.target.value });
  290. }}
  291. />
  292. </FormItem>
  293. <FormItem
  294. className="half-item"
  295. labelCol={{ span: 8 }}
  296. wrapperCol={{ span: 12 }}
  297. label="是否发布到首页"
  298. >
  299. <Select
  300. value={this.state.host}
  301. placeholder="是否发布到首页"
  302. onChange={e => {
  303. this.setState({
  304. host: e
  305. });
  306. }}
  307. >
  308. <Option value={0}>否</Option>
  309. <Option value={1}>是</Option>
  310. </Select>
  311. </FormItem>
  312. <FormItem
  313. className="half-item"
  314. labelCol={{ span: 8 }}
  315. wrapperCol={{ span: 12 }}
  316. label="排序"
  317. >
  318. <Input
  319. placeholder="请输入排序"
  320. value={this.state.sort}
  321. onChange={e => {
  322. this.setState({
  323. sort: e.target.value
  324. });
  325. }}
  326. />
  327. <p>数字越大,排序越前</p>
  328. </FormItem>
  329. <div className="clearfix">
  330. <FormItem
  331. className="half-item"
  332. labelCol={{ span: 8 }}
  333. wrapperCol={{ span: 12 }}
  334. label="缩略图"
  335. >
  336. <PicturesWall
  337. type={'img'}
  338. fileList={this.getOrgCodeUrl}
  339. pictureUrl={this.state.pictureImgUrl}
  340. />
  341. </FormItem>
  342. </div>
  343. <div className="clearfix">
  344. <FormItem
  345. className="half-item"
  346. labelCol={{ span: 8 }}
  347. wrapperCol={{ span: 12 }}
  348. label="视频/音频"
  349. >
  350. <PicturesWall
  351. type={'video'}
  352. fileList={this.getVideoOrgCodeUrl}
  353. pictureUrl={this.state.pictureVideoUrl}
  354. />
  355. <p>支持<span style={{color:'#F00'}}>MP3/MP4/RMVB/MKV/AVI</span></p>
  356. </FormItem>
  357. </div>
  358. <div className="clearfix">
  359. <FormItem
  360. labelCol={{ span: 4 }}
  361. wrapperCol={{ span: 18 }}
  362. label="简介"
  363. >
  364. <Editors
  365. textContent={this.state.content}
  366. uploadUrl={"/api/admin/news/uploadFile"}
  367. globalConfig={globalConfig.uploadPath}
  368. placeholder="内容(编辑器,支持图文音频等)"
  369. handleRichText={value => {
  370. this.setState({ content: value });
  371. }}
  372. />
  373. </FormItem>
  374. </div>
  375. </div>
  376. <div style={{display:'flex',justifyContent: 'center'}}>
  377. <Button
  378. type="primary"
  379. onClick={()=>{
  380. this.onOk();
  381. }}>
  382. 保存
  383. </Button>
  384. <Button
  385. type="primary"
  386. style={{marginLeft:'30px'}}
  387. onClick={()=>{
  388. this.onOk(1);
  389. }}>
  390. 保存并发布
  391. </Button>
  392. </div>
  393. </SpinContainer>
  394. </Form>
  395. </Modal>
  396. )
  397. }
  398. }
  399. export default Add;