edit.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import { connect } from 'dva/index';
  2. import React, { Component } from 'react';
  3. import { Form, Spin, Button } from 'antd';
  4. import {
  5. sldLlineRtextAddGoods,
  6. failTip,
  7. sucTip,
  8. getSldEmptyH,
  9. sldComLanguage,
  10. quillEscapeToHtml,
  11. } from '@/utils/utils';
  12. import router from 'umi/router';
  13. import global from '@/global.less';
  14. import SldEditFormCom from '@/components/SldEditFormCom/SldEditFormCom';
  15. import SldUEditor from '@/components/SldUEditor';
  16. import { Scrollbars } from 'react-custom-scrollbars';
  17. import defaultSettings from '@/defaultSettings';
  18. @connect(({ agreement, global }) => ({
  19. agreement, global,
  20. }))
  21. @Form.create()
  22. export default class Edit extends Component {
  23. constructor(props) {
  24. super(props);
  25. this.state = {
  26. initDataLoading: false, // 整体加载loading
  27. submitLoading: false,
  28. initEditorFlag: false,//加载百度编辑器
  29. getEditorContentFlag: false,//获取百度编辑器内容标识
  30. initEditorContent: '',//百度编辑器内容
  31. query: props.location.query,
  32. operate_data: [{
  33. type: 'input',
  34. label: `${sldComLanguage('协议标题')}`,//协议标题
  35. name: 'title',
  36. placeholder: `${sldComLanguage('请输入')}${sldComLanguage('协议标题')}`,//请输入协议标题
  37. initialValue: '',
  38. maxLength: 100,
  39. rules: [{
  40. required: true,
  41. whitespace: true,
  42. message: `${sldComLanguage('请输入')}${sldComLanguage('协议标题')}`,//请输入协议标题
  43. }],
  44. }],
  45. };
  46. }
  47. componentDidMount() {
  48. this.props.dispatch({
  49. type: 'global/getLayoutCollapsed',
  50. });
  51. this.get_detail();
  52. }
  53. componentWillUnmount() {
  54. }
  55. //获取协议详情
  56. get_detail = () => {
  57. const { dispatch } = this.props;
  58. let { operate_data, query } = this.state;
  59. this.setState({initDataLoading: true})
  60. dispatch({
  61. type: 'agreement/get_agreement_detail',
  62. payload: { agreementCode: query.agreementCode },
  63. callback: (res) => {
  64. for (let i in operate_data) {
  65. if (operate_data[i].name == 'title') {
  66. operate_data[i].initialValue = res.data.title;
  67. }
  68. }
  69. this.setState({ initDataLoading: false, operate_data, initEditorContent: quillEscapeToHtml(res.data.content), initEditorFlag: true });
  70. },
  71. });
  72. };
  73. //保存并新增事件
  74. handleSaveAllData = () => {
  75. this.setState({ getEditorContentFlag: true });
  76. };
  77. //保存并新增事件
  78. saveData = (editorCon) => {
  79. this.props.form.validateFieldsAndScroll((err, values) => {
  80. if (!err) {
  81. const { dispatch } = this.props;
  82. values.content = editorCon;
  83. const { query } = this.state;
  84. values.agreementCode = query.agreementCode;
  85. let dis_type = 'agreement/update_agreement';
  86. this.setState({submitLoading: true})
  87. dispatch({
  88. type: dis_type,
  89. payload: values,
  90. callback: (res) => {
  91. if (res.state == 200) {
  92. sucTip(res.msg);
  93. router.replace(query.source);
  94. } else {
  95. failTip(res.msg);
  96. }
  97. this.setState({submitLoading: false})
  98. },
  99. });
  100. }
  101. });
  102. };
  103. //获取编辑器内容
  104. getEditorContent = (con) => {
  105. this.saveData(con);
  106. this.setState({ getEditorContentFlag: false });
  107. };
  108. render() {
  109. const { submitLoading, operate_data, initDataLoading, initEditorFlag, getEditorContentFlag, initEditorContent } = this.state;
  110. return (
  111. <div className={global.common_page_20}
  112. style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
  113. <Spin spinning={initDataLoading}>
  114. <Scrollbars
  115. autoHeight
  116. autoHeightMin={100}
  117. autoHeightMax={document.body.clientHeight - 120}
  118. >
  119. <div className={global.flex_row_start_start}>
  120. <div className={global.flex_column_start_start} style={{ flex: 1 }}>
  121. {sldLlineRtextAddGoods(defaultSettings.primaryColor, `${sldComLanguage('基本信息')}`)}
  122. <div style={{ marginTop: 20 }} className={global.tableListFormAdd}>
  123. <div style={{ display: 'flex', flexDirection: 'column' }}>
  124. <Form onSubmit={() => this.handleSaveAllData()} layout="inline">
  125. <SldEditFormCom form={this.props.form} search_data={operate_data}/>
  126. {getSldEmptyH(15)}
  127. {sldLlineRtextAddGoods(defaultSettings.primaryColor, `${sldComLanguage('内容编辑')}`)}
  128. <div className={`${global.goods_sku_tab} ${global.flex_column_start_start}`} style={{
  129. marginTop: 20,
  130. width: document.body.clientWidth - (this.props.global.collapsed ? 90 : 160) - 60,
  131. }}>
  132. {initEditorFlag &&
  133. <SldUEditor id={'agreement'} getContentFlag={getEditorContentFlag}
  134. getEditorContent={this.getEditorContent} initEditorContent={initEditorContent}/>
  135. }
  136. {getSldEmptyH(30)}
  137. </div>
  138. <div className={global.m_diy_bottom_wrap}
  139. style={{ position: 'fixed', left: this.props.global.collapsed ? 90 : 160 }}>
  140. <Button
  141. onClick={() => this.props.history.goBack()}
  142. style={{ width: '100px', borderRadius: '0', marginRight: '20px' }}
  143. >
  144. {sldComLanguage('返回')}
  145. </Button>
  146. <Button
  147. type='primary'
  148. loading={submitLoading}
  149. style={{ minWidth: '100px', borderRadius: '0' }}
  150. onClick={() => this.handleSaveAllData()}
  151. >
  152. {sldComLanguage('保存并返回')}
  153. </Button>
  154. </div>
  155. </Form>
  156. </div>
  157. </div>
  158. </div>
  159. <div style={{ height: 100, width: 6, flexShrink: 0 }}/>
  160. </div>
  161. </Scrollbars>
  162. </Spin>
  163. </div>
  164. );
  165. }
  166. }