publist.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. // 渠道列表
  2. import React, { Component } from "react";
  3. import {
  4. Form,
  5. Button,
  6. message,
  7. Spin,
  8. Input,
  9. DatePicker,
  10. Select,
  11. Tabs,
  12. Table,
  13. Modal,
  14. AutoComplete,
  15. } from "antd";
  16. import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
  17. import { provinceList } from "../../../NewDicProvinceList";
  18. import $ from "jquery/src/ajax";
  19. import { ShowModal } from "@/tools";
  20. import moment from "moment";
  21. import AddChannel from "./addchannel"; //新增渠道
  22. import ChannelLog from "./channellog"; //转交日志
  23. import ChangeLog from "./changelog"; //更名日志
  24. import ChannelDetail from "./channeldetail"; //渠道详情
  25. import FollowDetail from "../../../../component/manageCenter/customer/NEW/intentionCustomer/followDetail";
  26. const { TabPane } = Tabs;
  27. const FormItem = Form.Item;
  28. const Option = Select.Option;
  29. const { RangePicker } = DatePicker;
  30. class ChannelUnit extends Component {
  31. constructor(props) {
  32. super(props);
  33. this.state = {
  34. query: { type: 1 },
  35. changeList: undefined,
  36. selectedRowKeys: [],
  37. columns: [
  38. {
  39. title: "渠道名称",
  40. dataIndex: "name",
  41. key: "name",
  42. },
  43. {
  44. title: "地区",
  45. dataIndex: "province",
  46. key: "province",
  47. render: (text, record) => {
  48. return record.province + "-" + record.city + "-" + record.area;
  49. },
  50. },
  51. {
  52. title: "渠道类别",
  53. dataIndex: "type",
  54. key: "type",
  55. render: (text) =>
  56. [
  57. "",
  58. "政府部门",
  59. "民主党派",
  60. "园区",
  61. "民间组织",
  62. "其他战略合作单位",
  63. ][text],
  64. },
  65. {
  66. title: "初始时间",
  67. dataIndex: "createTime",
  68. key: "createTime",
  69. },
  70. {
  71. title: "操作",
  72. dataIndex: "op",
  73. key: "op",
  74. render: (text, record) => (
  75. <Button
  76. type="primary"
  77. onClick={(e) => {
  78. e.stopPropagation(), this.receive(record);
  79. }}
  80. >
  81. 领取
  82. </Button>
  83. ),
  84. },
  85. ],
  86. dataSource: [],
  87. pagination: {
  88. defaultCurrent: 1,
  89. defaultPageSize: 10,
  90. showQuickJumper: true,
  91. pageSize: 10,
  92. onChange: function (page) {
  93. this.loadData(page);
  94. }.bind(this),
  95. showTotal: function (total) {
  96. return "共" + total + "条数据";
  97. },
  98. },
  99. channeOb: [
  100. { name: "政府部门", val: 1 },
  101. { name: "民主党派", val: 2 },
  102. { name: "园区", val: 3 },
  103. { name: "民间组织", val: 4 },
  104. { name: "其他战略合作单位", val: 5 },
  105. ],
  106. fjlist: [], // 查询到的更进人列表
  107. loading: false,
  108. cityList: [],
  109. areaList: [],
  110. searchInfor: {}, // 查询条件
  111. mvisible: "", //控制弹窗变量
  112. };
  113. }
  114. componentWillMount() {
  115. this.loadData();
  116. }
  117. /*单个领取*/
  118. receive(e) {
  119. this.setState({
  120. loading: true,
  121. selectedRowKeys: [],
  122. });
  123. $.ajax({
  124. method: "get",
  125. dataType: "json",
  126. crossDomain: false,
  127. url: globalConfig.context + "/api/admin/customer/receiveCustomer",
  128. data: {
  129. uid: e.id,
  130. },
  131. }).done(
  132. function (data) {
  133. if (!data.error.length) {
  134. message.success("领取成功!");
  135. this.setState({
  136. loading: false,
  137. });
  138. } else {
  139. message.warning(data.error[0].message);
  140. }
  141. this.loadData(this.state.ispage);
  142. }.bind(this)
  143. );
  144. }
  145. //
  146. getVal(arr, val) {
  147. if (!val || arr.length == 0) {
  148. return undefined;
  149. } else {
  150. for (const items of arr) {
  151. if (items.id == val) {
  152. return items.name;
  153. }
  154. }
  155. }
  156. }
  157. changeList(arr) {
  158. const newArr = [];
  159. this.state.columns.forEach((item) => {
  160. arr.forEach((val) => {
  161. if (val === item.title) {
  162. newArr.push(item);
  163. }
  164. });
  165. });
  166. this.setState({
  167. changeList: newArr,
  168. });
  169. }
  170. // 重置
  171. resetAll() {
  172. this.setState(
  173. {
  174. searchInfor: JSON.parse(JSON.stringify({})),
  175. selectedRowKeys: [],
  176. },
  177. () => {
  178. this.loadData();
  179. }
  180. );
  181. }
  182. // 列表接口
  183. loadData(pageNo) {
  184. const { searchInfor, pagination } = this.state;
  185. this.setState({
  186. loading: true,
  187. });
  188. let datas = Object.assign(searchInfor, {
  189. pageNo: pageNo || 1,
  190. pageSize: pagination.pageSize,
  191. });
  192. // delete datas.aname
  193. $.ajax({
  194. method: "get",
  195. dataType: "json",
  196. crossDomain: false,
  197. url: globalConfig.context + "/api/admin/customer/publicChannelUserList",
  198. data: datas,
  199. success: function (data) {
  200. ShowModal(this);
  201. this.setState({
  202. loading: false,
  203. });
  204. if (data.error && data.error.length === 0) {
  205. if (data.data.list) {
  206. pagination.current = data.data.pageNo;
  207. pagination.total = data.data.totalCount;
  208. if (data.data && data.data.list && !data.data.list.length) {
  209. pagination.current = 0;
  210. pagination.total = 0;
  211. }
  212. this.setState({
  213. dataSource: data.data.list,
  214. pagination: this.state.pagination,
  215. pageNo: data.data.pageNo,
  216. });
  217. } else {
  218. this.setState({
  219. dataSource: data.data,
  220. pagination: false,
  221. });
  222. }
  223. } else {
  224. message.warning(data.error[0].message);
  225. }
  226. }.bind(this),
  227. }).always(
  228. function () {
  229. this.setState({
  230. loading: false,
  231. });
  232. }.bind(this)
  233. );
  234. }
  235. // 选择行
  236. onSelectChange(selectedRowKeys) {
  237. this.setState({ selectedRowKeys });
  238. }
  239. // 关闭弹窗
  240. closeDesc() {
  241. this.setState({
  242. mvisible: "",
  243. });
  244. this.loadData();
  245. }
  246. render() {
  247. const {
  248. columns,
  249. selectedRowKeys,
  250. cityList,
  251. areaList,
  252. changeList,
  253. searchInfor,
  254. channeOb,
  255. dataSource,
  256. } = this.state;
  257. const rowSelection = {
  258. selectedRowKeys,
  259. onChange: this.onSelectChange.bind(this),
  260. hideDefaultSelections: true,
  261. type: "radio",
  262. };
  263. const hasSelected = this.state.selectedRowKeys.length > 0;
  264. return (
  265. <div className="user-content">
  266. <div className="content-title" style={{ marginBottom: 10 }}>
  267. <span style={{ fontWeight: 900, fontSize: 16 }}>公共渠道列表</span>
  268. </div>
  269. <Tabs defaultActiveKey="1" >
  270. <TabPane tab="搜索" key="1">
  271. <div>
  272. <Form layout="inline">
  273. <FormItem>
  274. <Input
  275. placeholder={"请输入渠道名称"}
  276. value={searchInfor.name || undefined}
  277. onChange={(e) => {
  278. this.setState({
  279. searchInfor: Object.assign(searchInfor, {
  280. name: e.target.value,
  281. }),
  282. });
  283. }}
  284. />
  285. </FormItem>
  286. <FormItem>
  287. <Select
  288. placeholder={"选择省份"}
  289. style={{ width: 100 }}
  290. value={this.getVal(provinceList, searchInfor.province)}
  291. onChange={(e) => {
  292. for (const items of provinceList) {
  293. if (items.id == e) {
  294. this.setState({
  295. cityList: items.cityList,
  296. areaList: [],
  297. searchInfor: Object.assign(searchInfor, {
  298. province: items.id,
  299. city: undefined,
  300. area: undefined,
  301. }),
  302. });
  303. }
  304. }
  305. }}
  306. >
  307. {provinceList.map((item, index) => (
  308. <Option key={item.id}>{item.name}</Option>
  309. ))}
  310. </Select>
  311. </FormItem>
  312. <FormItem>
  313. <Select
  314. placeholder={"选择城市"}
  315. style={{ width: 100 }}
  316. value={this.getVal(cityList, searchInfor.city)}
  317. onChange={(e) => {
  318. for (const items of cityList) {
  319. if (items.id == e) {
  320. this.setState({
  321. areaList: items.areaList,
  322. searchInfor: Object.assign(searchInfor, {
  323. city: items.id,
  324. area: undefined,
  325. }),
  326. });
  327. }
  328. }
  329. }}
  330. >
  331. {cityList.map((cit, cin) => (
  332. <Option key={cit.id}>{cit.name}</Option>
  333. ))}
  334. </Select>
  335. </FormItem>
  336. <FormItem>
  337. <Select
  338. placeholder={"选择地区"}
  339. style={{ width: 100 }}
  340. value={this.getVal(areaList, searchInfor.area)}
  341. onChange={(e) => {
  342. for (const items of areaList) {
  343. if (items.id == e) {
  344. this.setState({
  345. searchInfor: Object.assign(searchInfor, {
  346. area: items.id,
  347. }),
  348. });
  349. }
  350. }
  351. }}
  352. >
  353. {areaList.map((cit, cin) => (
  354. <Option key={cit.id}>{cit.name}</Option>
  355. ))}
  356. </Select>
  357. </FormItem>
  358. <FormItem>
  359. <Select
  360. placeholder={"渠道类型"}
  361. style={{ width: 130 }}
  362. value={searchInfor.type || undefined}
  363. onChange={(e) => {
  364. this.setState({
  365. searchInfor: Object.assign(searchInfor, {
  366. type: e,
  367. }),
  368. });
  369. }}
  370. >
  371. {channeOb.map((it, ins) => (
  372. <Option key={it.val}>{it.name}</Option>
  373. ))}
  374. </Select>
  375. </FormItem>
  376. <FormItem>
  377. <RangePicker
  378. value={[
  379. searchInfor.startDate
  380. ? moment(searchInfor.startDate)
  381. : null,
  382. searchInfor.endDate ? moment(searchInfor.endDate) : null,
  383. ]}
  384. onChange={(data, dataString) => {
  385. this.setState({
  386. searchInfor: Object.assign(searchInfor, {
  387. startDate: dataString[0],
  388. endDate: dataString[1],
  389. }),
  390. });
  391. }}
  392. />
  393. </FormItem>
  394. <Button
  395. type="primary"
  396. onClick={() => {
  397. this.loadData();
  398. }}
  399. style={{ marginRight: "10px" }}
  400. >
  401. 搜索
  402. </Button>
  403. <Button
  404. onClick={this.resetAll.bind(this)}
  405. style={{ marginRight: "10px" }}
  406. >
  407. 重置
  408. </Button>
  409. </Form>
  410. </div>
  411. </TabPane>
  412. <TabPane tab="操作" key="2">
  413. <div
  414. style={{
  415. marginLeft: 10,
  416. paddingBottom: 10,
  417. display: "flex",
  418. }}
  419. >
  420. <div style={{ flex: 1 }}>
  421. <Button
  422. type="primary"
  423. onClick={() => {
  424. this.setState({
  425. mvisible: "channellog",
  426. });
  427. }}
  428. style={{ marginLeft: "10px" }}
  429. disabled={!hasSelected}
  430. >
  431. 渠道日志
  432. </Button>
  433. <Button
  434. type="primary"
  435. onClick={() => {
  436. this.setState({
  437. mvisible: "changelog",
  438. });
  439. }}
  440. style={{ marginLeft: "10px" }}
  441. disabled={!hasSelected}
  442. >
  443. 更改日志
  444. </Button>
  445. </div>
  446. </div>
  447. </TabPane>
  448. <TabPane tab="更改表格显示数据" key="3">
  449. <div style={{ marginLeft: 10 }}>
  450. <ChooseList
  451. columns={columns}
  452. changeFn={this.changeList.bind(this)}
  453. changeList={changeList}
  454. top={55}
  455. margin={11}
  456. />
  457. </div>
  458. </TabPane>
  459. </Tabs>
  460. <div className="patent-table">
  461. <Spin spinning={this.state.loading}>
  462. <Table
  463. bordered
  464. size="middle"
  465. columns={changeList ? changeList : columns}
  466. dataSource={this.state.dataSource}
  467. pagination={this.state.pagination}
  468. rowSelection={rowSelection}
  469. />
  470. </Spin>
  471. </div>
  472. {this.state.mvisible == "channellog" && (
  473. <ChannelLog
  474. cancel={this.closeDesc.bind(this)}
  475. visible={this.state.mvisible}
  476. id={dataSource[selectedRowKeys[0]].id}
  477. />
  478. )}
  479. {this.state.mvisible == "changelog" && (
  480. <ChangeLog
  481. cancel={this.closeDesc.bind(this)}
  482. visible={this.state.mvisible}
  483. id={dataSource[selectedRowKeys[0]].id}
  484. />
  485. )}
  486. </div>
  487. );
  488. }
  489. }
  490. export default ChannelUnit;