1
0

page.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import React from 'react';
  2. import './index.less';
  3. import Page from '@src/containers/Page';
  4. import Block from '@src/components/Block';
  5. import FilterLayout from '@src/layouts/FilterLayout';
  6. import ActionLayout from '@src/layouts/ActionLayout';
  7. import TableLayout from '@src/layouts/TableLayout';
  8. import { getMap, formatDate, bindSearch, formatTreeData } from '@src/services/Tools';
  9. import { asyncSMessage, asyncForm } from '@src/services/AsyncTools';
  10. import { FaqChannel, SystemSelect } from '../../../../Constant';
  11. import { System } from '../../../stores/system';
  12. import { Course } from '../../../stores/course';
  13. const FaqChannelMap = getMap(FaqChannel, 'value', 'label');
  14. const SystemSelectMap = getMap(SystemSelect, 'value', 'label');
  15. export default class extends Page {
  16. init() {
  17. this.actionList = [{
  18. key: 'add',
  19. type: 'primary',
  20. name: '创建',
  21. }];
  22. this.formF = null;
  23. this.itemList = [{
  24. key: 'id',
  25. type: 'hidden',
  26. }, {
  27. key: 'channel',
  28. type: 'cascader',
  29. name: '频道',
  30. select: formatTreeData(FaqChannel, 'value', 'label', 'parent'),
  31. placeholder: '请选择',
  32. onChange: (value) => {
  33. this.changeSearch(this.itemList, this.formF, value.join('-'), null, 2);
  34. },
  35. }, {
  36. key: 'position',
  37. type: 'select',
  38. name: '位置',
  39. select: [],
  40. placeholder: '请选择',
  41. }, {
  42. key: 'content',
  43. type: 'textarea',
  44. name: '用户留言',
  45. }, {
  46. key: 'answer',
  47. type: 'textarea',
  48. name: '编辑回复',
  49. }];
  50. this.filterF = null;
  51. this.filterForm = [{
  52. key: 'channel',
  53. type: 'cascader',
  54. allowClear: true,
  55. name: '频道',
  56. select: formatTreeData(FaqChannel, 'value', 'label', 'parent'),
  57. placeholder: '请选择',
  58. onChange: (value) => {
  59. this.changeSearch(this.filterForm, this, value.join('-'), null);
  60. },
  61. }, {
  62. key: 'position',
  63. type: 'select',
  64. allowClear: true,
  65. name: '位置',
  66. number: true,
  67. select: [],
  68. placeholder: '请选择',
  69. }, {
  70. key: 'isSystem',
  71. type: 'select',
  72. allowClear: true,
  73. number: true,
  74. name: '来源',
  75. select: SystemSelect,
  76. }];
  77. this.columns = [{
  78. title: '频道',
  79. dataIndex: 'channel',
  80. render: (text, record) => {
  81. return FaqChannelMap[record.channel];
  82. },
  83. }, {
  84. title: '位置',
  85. dataIndex: 'positionDetail.title',
  86. }, {
  87. title: '创建时间',
  88. sorter: true,
  89. dataIndex: 'createTime',
  90. render: (text) => {
  91. return formatDate(text);
  92. },
  93. }, {
  94. title: '来源',
  95. dataIndex: 'isSystem',
  96. render: (text) => {
  97. return SystemSelectMap[text];
  98. },
  99. }, {
  100. title: '操作',
  101. dataIndex: 'handler',
  102. render: (text, record) => {
  103. return <div className="table-button">
  104. {(
  105. <a onClick={() => {
  106. this.editAction(record);
  107. }}>编辑</a>
  108. )}
  109. </div>;
  110. },
  111. }];
  112. this.changeSearch(this.filterForm, this, this.state.search.channel, this.state.search.position);
  113. this.state.search.channel = this.state.search.channel ? this.state.search.channel.split('-') : '';
  114. }
  115. changeSearch(list, component, key, value, index = 1) {
  116. if (key === 'course-video' || key === 'course_data') {
  117. bindSearch(list, 'position', component, (search) => {
  118. if (key === 'course-video') {
  119. return Course.list(Object.assign({ courseModule: 'video' }, search));
  120. }
  121. return Course.listData(search);
  122. }, (row) => {
  123. return {
  124. title: row.title,
  125. value: row.id,
  126. };
  127. }, value ? Number(value) : null, null);
  128. list[index].disabled = false;
  129. } else {
  130. list[index].disabled = true;
  131. }
  132. }
  133. initData() {
  134. System.listFAQ(Object.assign({ isSpecial: true }, this.state.search)).then(result => {
  135. this.setTableData(result.list, result.total);
  136. });
  137. }
  138. addAction() {
  139. asyncForm('创建', this.itemList, {}, data => {
  140. data.isShow = 1;
  141. data.isSystem = 1;
  142. data.isSpecial = 1;
  143. return System.addFAQ(data).then(() => {
  144. asyncSMessage('添加成功!');
  145. this.refresh();
  146. });
  147. }).then(component => {
  148. this.formF = component;
  149. });
  150. }
  151. editAction(row) {
  152. asyncForm('编辑', this.itemList, row, data => {
  153. return System.editFAQ(data).then(() => {
  154. asyncSMessage('编辑成功!');
  155. this.refresh();
  156. });
  157. }).then(component => {
  158. this.formF = component;
  159. this.changeSearch(this.filterForm, this, row.channel, row.position, 2);
  160. });
  161. }
  162. show(row, isShow) {
  163. System.editFAQ({ id: row.id, isShow }).then(() => {
  164. asyncSMessage('编辑成功!');
  165. this.refresh();
  166. });
  167. }
  168. renderView() {
  169. return <Block flex>
  170. <FilterLayout
  171. show
  172. ref={(ref) => { this.filterF = ref; }}
  173. itemList={this.filterForm}
  174. data={this.state.search}
  175. onChange={data => {
  176. data.channel = data.channel.join('-');
  177. this.search(data);
  178. }} />
  179. <ActionLayout
  180. itemList={this.actionList}
  181. selectedKeys={this.state.selectedKeys}
  182. onAction={key => this.onAction(key)}
  183. />
  184. <TableLayout
  185. columns={this.tableSort(this.columns)}
  186. list={this.state.list}
  187. pagination={this.state.page}
  188. loading={this.props.core.loading}
  189. onChange={(pagination, filters, sorter) => this.tableChange(pagination, filters, sorter)}
  190. onSelect={(keys, rows) => this.tableSelect(keys, rows)}
  191. selectedKeys={this.state.selectedKeys}
  192. />
  193. </Block>;
  194. }
  195. }