publist.jsx 14 KB

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