projectvipall.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd";
  4. import OrderDesc from "../orderDetail/orderDesc";
  5. import ResolutionDetail from "@/resolutionDetail";
  6. import { ChooseList } from "../../order/orderNew/chooseList"
  7. import ReactToPrint from "react-to-print";
  8. import OrderItemStatus from "../../../common/orderItemStatus";
  9. import { salesList } from "@/dataDic.js";
  10. import ShowModalDiv from "@/showModal.jsx";
  11. import VipLogs from "../../../common/logPopup/viplogs";
  12. const { TabPane } = Tabs;
  13. //财务总监会员项目查看
  14. const ProjectVipAll = React.createClass({
  15. //
  16. getInitialState() {
  17. return {
  18. dvisible: false,
  19. pageNo: 1,
  20. totalPage: 0,
  21. searchValues: {
  22. status: "5"
  23. },//查询条件
  24. loading: false,
  25. changeList: undefined,// 子组件改变的表格title数组
  26. pagination: {
  27. defaultCurrent: 1,
  28. defaultPageSize: 10,
  29. showQuickJumper: true,
  30. pageSize: 10,
  31. onChange: function (page) {
  32. this.setState({
  33. pageNo: page,
  34. });
  35. this.loadData(page);
  36. }.bind(this),
  37. showTotal: function (total) {
  38. return "共" + total + "条数据";
  39. },
  40. },
  41. columns: [
  42. {
  43. title: "销售类型",
  44. dataIndex: "salesType",
  45. key: "salesType",
  46. render: (text, record) => {
  47. return (
  48. <Tooltip
  49. title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "," + record.other) : "")}
  50. >
  51. <span>
  52. {salesList[text]}
  53. </span>
  54. </Tooltip>
  55. );
  56. },
  57. },
  58. {
  59. title: "合同编号",
  60. dataIndex: "contractNo",
  61. key: "contractNo",
  62. width: 160,
  63. render: (text, record) => {
  64. return (
  65. <Tooltip
  66. title={
  67. <Button
  68. type="primary"
  69. onClick={(e) => {
  70. e.stopPropagation();
  71. let input = document.getElementById("copyText");
  72. input.value = text;
  73. input.select();
  74. document.execCommand("copy");
  75. message.success("复制成功");
  76. }}
  77. >
  78. 复制
  79. </Button>
  80. }
  81. >
  82. <div>
  83. {text}
  84. <div style={{ display: "flex" }}>
  85. <OrderItemStatus deleteSign={record.deleteSign} />
  86. {
  87. record.approval == 1
  88. ? <Tag color="#faa755">特批待审</Tag> :
  89. record.approval == 2 && <Tag color="#ff0000">特批通过</Tag>
  90. }
  91. </div>
  92. </div>
  93. </Tooltip>
  94. );
  95. },
  96. },
  97. {
  98. title: "客户名称",
  99. dataIndex: "userName",
  100. key: "userName",
  101. width: 200,
  102. render: text => {
  103. return (
  104. <Tooltip title={text}>
  105. <div>{text}</div>
  106. </Tooltip>
  107. )
  108. }
  109. },
  110. {
  111. title: "订单编号",
  112. dataIndex: "orderNo",
  113. key: "orderNo",
  114. width: 140,
  115. render: (text, record) => {
  116. return (
  117. <Tooltip
  118. title={
  119. <Button
  120. type="primary"
  121. onClick={(e) => {
  122. e.stopPropagation();
  123. let input = document.getElementById("copyText");
  124. input.value = text;
  125. input.select();
  126. document.execCommand("copy");
  127. message.success("复制成功");
  128. }}
  129. >
  130. 复制
  131. </Button>
  132. }
  133. >
  134. <div>
  135. {text}
  136. <div>
  137. {record.totalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
  138. {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
  139. </div>
  140. </div>
  141. </Tooltip>
  142. );
  143. },
  144. },
  145. {
  146. title: "订单部门",
  147. dataIndex: "depName",
  148. key: "depName",
  149. className: "title-table",
  150. },
  151. {
  152. title: "订单负责人",
  153. dataIndex: "salesmanName",
  154. key: "salesmanName",
  155. className: "title-table",
  156. },
  157. {
  158. title: "财务负责人",
  159. dataIndex: "financeName",
  160. key: "financeName",
  161. className: "title-table",
  162. },
  163. {
  164. title: "会员项目",
  165. dataIndex: "projectName",
  166. key: "projectName",
  167. className: "title-table",
  168. render: (text, record) => {
  169. return (
  170. <div>
  171. {text}
  172. {(record.memberType == 1 || record.memberType == 2) && <Tag color="#ff0000">特批项目</Tag>}
  173. </div>
  174. )
  175. }
  176. },
  177. {
  178. title: "项目说明",
  179. dataIndex: "taskComment",
  180. key: "taskComment",
  181. className: "title-table",
  182. width: 300,
  183. },
  184. {
  185. title: "状态",
  186. dataIndex: "status",
  187. key: "status",
  188. className: "title-table",
  189. width: 80,
  190. render: (text) => {
  191. return (
  192. <div>
  193. {["", "财务审核", "特批审核", "通过", "驳回"][text]}
  194. </div>
  195. );
  196. }
  197. },
  198. {
  199. title: "操作",
  200. dataIndex: "caozuo",
  201. key: "caouzo",
  202. className: "title-table",
  203. render: (text, recard) => {
  204. return (
  205. <div>
  206. <VipLogs id={recard.id} />
  207. </div>
  208. );
  209. },
  210. },
  211. ],
  212. dataSource: [],
  213. fjlist: [],// 营销员列表
  214. checkOrderNo: "",//操作订单编号
  215. checkData: "",//操作描述
  216. checkVisible: "",//审核弹窗开关
  217. checkId: "",//会员项目编号
  218. result: -1,//1同意 0驳回
  219. };
  220. },
  221. componentWillMount() {
  222. this.loadData();
  223. this.departmentList();
  224. },
  225. // 获取订单部门
  226. departmentList() {
  227. $.ajax({
  228. method: "get",
  229. dataType: "json",
  230. crossDomain: false,
  231. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  232. data: {},
  233. success: function (data) {
  234. let thedata = data.data;
  235. let theArr = [];
  236. if (!thedata) {
  237. if (data.error && data.error.length) {
  238. message.warning(data.error[0].message);
  239. }
  240. } else {
  241. thedata.map(function (item, index) {
  242. theArr.push({
  243. key: index,
  244. name: item.name,
  245. id: item.id,
  246. });
  247. });
  248. }
  249. this.setState({
  250. departmentArr: theArr,
  251. });
  252. }.bind(this),
  253. }).always(
  254. function () {
  255. }.bind(this)
  256. );
  257. },
  258. // 列表数据
  259. loadData(pageNo, pageSize) {
  260. const { searchValues, pagination } = this.state
  261. this.setState({
  262. loading: true,
  263. });
  264. let datas = Object.assign(searchValues, {
  265. pageNo: pageNo || 1,
  266. pageSize: pageSize || 10,
  267. shiroType: 0, //所有
  268. });
  269. $.ajax({
  270. method: "get",
  271. dataType: "json",
  272. crossDomain: false,
  273. url: globalConfig.context + "/api/admin/orderProject/memberList",
  274. data: datas,
  275. success: function (data) {
  276. this.setState({
  277. loading: false,
  278. });
  279. if (data.error && data.error.length === 0) {
  280. if (data.data.list) {
  281. pagination.current = data.data.pageNo;
  282. pagination.total = data.data.totalCount;
  283. if (data.data && data.data.list && !data.data.list.length) {
  284. pagination.current = 0;
  285. pagination.total = 0;
  286. }
  287. this.setState({
  288. dataSource: data.data.list,
  289. pagination: this.state.pagination,
  290. pageNo: data.data.pageNo,
  291. totalPage: data.data.totalPage,
  292. });
  293. } else {
  294. this.setState({
  295. dataSource: data.data,
  296. pagination: false,
  297. });
  298. }
  299. } else {
  300. message.warning(data.error[0].message);
  301. }
  302. }.bind(this),
  303. }).always(
  304. function () {
  305. this.setState({
  306. loading: false,
  307. });
  308. }.bind(this)
  309. );
  310. },
  311. // 点击行
  312. tableRowClick(record) {
  313. this.state.RowData = record;
  314. this.setState({
  315. showDesc: true,
  316. });
  317. },
  318. // 关闭
  319. closeDesc(e, s) {
  320. this.state.showDesc = e;
  321. if (s) {
  322. this.loadData(this.state.page);
  323. }
  324. },
  325. // 搜索
  326. search() {
  327. this.setState({
  328. selectedRowKeys: []
  329. })
  330. this.loadData();
  331. },
  332. // 重置
  333. reset() {
  334. this.setState({
  335. searchValues: JSON.parse(JSON.stringify({})),
  336. }, () => {
  337. this.loadData();
  338. })
  339. },
  340. // 更改表格显示数据
  341. changeList(arr) {
  342. const newArr = [];
  343. this.state.columns.forEach((item) => {
  344. arr.forEach((val) => {
  345. if (val === item.title) {
  346. newArr.push(item);
  347. }
  348. });
  349. });
  350. this.setState({
  351. changeList: newArr,
  352. });
  353. },
  354. // 导出当前列表
  355. exportAll() {
  356. message.config({
  357. duration: 20,
  358. });
  359. let loading = message.loading("下载中...");
  360. this.setState({
  361. exportPendingLoading: true,
  362. });
  363. let data = {
  364. shiroType: 0, //所有
  365. };
  366. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  367. data = Object.assign(data, obj1);
  368. $.ajax({
  369. method: "get",
  370. dataType: "json",
  371. crossDomain: false,
  372. url: "/api/admin/orderProject/memberList/export",
  373. data,
  374. success: function (data) {
  375. if (data.error.length === 0) {
  376. this.download(data.data);
  377. } else {
  378. message.warning(data.error[0].message);
  379. }
  380. }.bind(this),
  381. }).always(
  382. function () {
  383. loading();
  384. this.setState({
  385. exportPendingLoading: false,
  386. });
  387. }.bind(this)
  388. );
  389. },
  390. // 打印
  391. printAll() {
  392. this.setState({
  393. dvisible: true,
  394. });
  395. this.loadData(1, 9999999);
  396. },
  397. // 下载
  398. download(fileName) {
  399. window.location.href =
  400. globalConfig.context + "/open/download?fileName=" + fileName;
  401. },
  402. // 查询订单负责人列表
  403. followUp(e) {
  404. const { searchValues } = this.state;
  405. this.setState({
  406. searchValues: Object.assign(searchValues, {
  407. aname: e,
  408. }),
  409. });
  410. $.ajax({
  411. method: "get",
  412. dataType: "json",
  413. crossDomain: false,
  414. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  415. data: {
  416. adminName: e,
  417. },
  418. success: function (data) {
  419. let thedata = data.data;
  420. if (!thedata) {
  421. if (data.error && data.error.length) {
  422. message.warning(data.error[0].message);
  423. }
  424. thedata = {};
  425. }
  426. this.setState({
  427. fjlist: thedata,
  428. });
  429. }.bind(this),
  430. }).always(
  431. function () {
  432. this.setState({
  433. loading: false,
  434. });
  435. }.bind(this)
  436. );
  437. },
  438. // 选中订单负责人
  439. selectF(value) {
  440. const { searchValues, fjlist } = this.state;
  441. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  442. this.setState({
  443. searchValues: Object.assign(searchValues, {
  444. salesmanId: newdataSources.find((item) => item.name == value).id,
  445. }),
  446. });
  447. },
  448. // 失去焦点
  449. blurChange(e) {
  450. let theType = "";
  451. let contactLists = this.state.customerArr || [];
  452. if (e) {
  453. contactLists.map(function (item) {
  454. if (item.name == e.toString()) {
  455. theType = item.id;
  456. }
  457. });
  458. }
  459. this.setState({
  460. theTypes: theType,
  461. });
  462. },
  463. // 删除数组最后一项(删除操作列)
  464. truncate(arr) {
  465. return arr.filter(function (v, i, ar) {
  466. return i !== ar.length - 1
  467. })
  468. },
  469. render() {
  470. const { TextArea } = Input
  471. const { searchValues, departmentArr = [] } = this.state
  472. const dataSources = this.state.fjlist || [];
  473. const options = dataSources.map((group) => (
  474. <Select.Option key={group.id} value={group.name}>
  475. {group.name}
  476. </Select.Option>
  477. ));
  478. return (
  479. <div className="user-content">
  480. <ShowModalDiv ShowModal={this.state.showModal} />
  481. <div className="content-title" style={{ marginBottom: 10 }}>
  482. <span style={{ fontWeight: 900, fontSize: 16 }}>会员项目(all)</span>
  483. </div>
  484. <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
  485. <TabPane tab="更改表格显示数据" key="1">
  486. <div style={{ marginLeft: 10 }}>
  487. <ChooseList
  488. columns={this.state.columns}
  489. changeFn={this.changeList}
  490. changeList={this.state.changeList}
  491. top={55}
  492. margin={11}
  493. />
  494. </div>
  495. </TabPane>
  496. <TabPane tab="搜索" key="2">
  497. <div className="user-search" style={{ marginLeft: 10 }}>
  498. <Input
  499. placeholder="订单编号"
  500. value={searchValues["orderNo"]
  501. ? searchValues["orderNo"]
  502. : ""}
  503. onChange={(e) => {
  504. searchValues["orderNo"] = e.target.value;
  505. this.setState({
  506. searchValues: searchValues,
  507. });
  508. }}
  509. />
  510. <Input
  511. placeholder="客户名称"
  512. value={searchValues["userName"]
  513. ? searchValues["userName"]
  514. : ""}
  515. onChange={(e) => {
  516. searchValues["userName"] = e.target.value;
  517. this.setState({
  518. searchValues: searchValues,
  519. });
  520. }}
  521. />
  522. <Select
  523. placeholder="订单部门"
  524. style={{ width: 190, marginRight: 10 }}
  525. value={searchValues["depId"]
  526. ? searchValues["depId"]
  527. : undefined}
  528. onChange={(e) => {
  529. searchValues["depId"] = e;
  530. this.setState({
  531. searchValues: searchValues,
  532. });
  533. }}
  534. >
  535. {departmentArr.map(function (item) {
  536. return (
  537. <Select.Option key={item.id}>{item.name}</Select.Option>
  538. );
  539. })}
  540. </Select>
  541. <Input
  542. placeholder="合同编号"
  543. value={searchValues["contractNo"]
  544. ? searchValues["contractNo"]
  545. : ""}
  546. onChange={(e) => {
  547. searchValues["contractNo"] = e.target.value;
  548. this.setState({
  549. searchValues: searchValues,
  550. });
  551. }}
  552. />
  553. <AutoComplete
  554. className="certain-category-search"
  555. dropdownClassName="certain-category-search-dropdown"
  556. dropdownMatchSelectWidth={false}
  557. style={{ width: "120px" }}
  558. dataSource={options}
  559. placeholder="订单负责人"
  560. value={searchValues.aname || undefined}
  561. onChange={this.followUp.bind(this)}
  562. filterOption={true}
  563. onSelect={this.selectF.bind(this)}
  564. >
  565. <Input />
  566. </AutoComplete>
  567. <Input
  568. placeholder="项目名称"
  569. value={searchValues["projectName"]
  570. ? searchValues["projectName"]
  571. : ""}
  572. onChange={(e) => {
  573. searchValues["projectName"] = e.target.value;
  574. this.setState({
  575. searchValues: searchValues,
  576. });
  577. }}
  578. />
  579. <Select
  580. style={{ width: 120 }}
  581. placeholder="签单金额"
  582. value={searchValues["amountStatus"]
  583. ? searchValues["amountStatus"]
  584. : undefined}
  585. onChange={(e) => {
  586. searchValues["amountStatus"] = e;
  587. this.setState({
  588. searchValues: searchValues,
  589. });
  590. }}
  591. >
  592. <Option value="0">10万元以下</Option>
  593. <Option value="1">10~20万元</Option>
  594. <Option value="2">20~30万元</Option>
  595. <Option value="3">30~40万元</Option>
  596. <Option value="4">40万元以上</Option>
  597. </Select>
  598. <Select
  599. style={{ width: 120 }}
  600. placeholder="特批状态"
  601. value={searchValues["approval"]
  602. ? searchValues["approval"]
  603. : undefined}
  604. onChange={(e) => {
  605. searchValues["approval"] = e;
  606. this.setState({
  607. searchValues: searchValues,
  608. });
  609. }}
  610. >
  611. <Option value="0">非特批</Option>
  612. <Option value="1">特批待审</Option>
  613. <Option value="2">特批通过</Option>
  614. <Option value="4">全部特批</Option>
  615. </Select>
  616. <Select
  617. style={{ width: 120 }}
  618. placeholder="审核状态"
  619. value={searchValues["status"]
  620. ? searchValues["status"]
  621. : undefined}
  622. onChange={(e) => {
  623. searchValues["status"] = e;
  624. this.setState({
  625. searchValues: searchValues,
  626. });
  627. }}
  628. >
  629. <Option value="1">财务审核</Option>
  630. <Option value="2">特批审核</Option>
  631. <Option value="3">通过</Option>
  632. <Option value="5">全部</Option>
  633. </Select>
  634. <Button
  635. type="primary"
  636. onClick={this.search}
  637. style={{ marginLeft: 10 }}
  638. disabled={this.state.loading ? true : false}
  639. >
  640. 搜索
  641. </Button>
  642. <Button onClick={this.reset}>重置</Button>
  643. </div>
  644. </TabPane>
  645. <TabPane tab="打印" key="3">
  646. <Button
  647. type="primary"
  648. style={{ margin: "11px 0px 10px 10px" }}
  649. onClick={this.printAll}
  650. >
  651. 打印当前列表
  652. </Button>
  653. </TabPane>
  654. <TabPane tab="导出Excel" key="4">
  655. <Button
  656. type="primary"
  657. style={{ margin: "11px 0px 10px 10px" }}
  658. onClick={this.exportAll}
  659. >
  660. 导出当前列表
  661. </Button>
  662. </TabPane>
  663. </Tabs>
  664. <div className="patent-table">
  665. <Spin spinning={this.state.loading}>
  666. <Table
  667. bordered
  668. columns={
  669. this.state.changeList == undefined
  670. ? this.state.columns
  671. : this.state.changeList
  672. }
  673. dataSource={this.state.dataSource}
  674. pagination={this.state.pagination}
  675. onRowDoubleClick={this.tableRowClick.bind(this)}
  676. size="small"
  677. />
  678. </Spin>
  679. </div>
  680. <textarea id="copyText" style={{ opacity: 0 }} />
  681. {/* 订单详情 */}
  682. <OrderDesc
  683. data={this.state.RowData}
  684. showDesc={this.state.showDesc}
  685. closeDesc={this.closeDesc.bind(this)}
  686. />
  687. {
  688. //打印预览
  689. this.state.dvisible &&
  690. <Modal
  691. visible={this.state.dvisible}
  692. footer=""
  693. title="所有列表信息"
  694. className="admin-desc-content"
  695. width="1300px"
  696. onCancel={() => {
  697. this.loadData();
  698. this.setState({
  699. dvisible: false,
  700. });
  701. }}
  702. >
  703. <Spin spinning={this.state.loading}>
  704. <div
  705. className="patent-table"
  706. style={{
  707. padding: "25px 0 30px 30px",
  708. }}
  709. ref={(e) => {
  710. this.refs.all = e;
  711. }}
  712. >
  713. <Table
  714. columns={this.truncate(this.state.columns)}
  715. dataSource={this.state.dataSource}
  716. pagination={false}
  717. bordered
  718. size="small"
  719. />
  720. </div>
  721. </Spin>
  722. <ReactToPrint
  723. trigger={() => (
  724. <Button
  725. type="primary"
  726. style={{
  727. float: "right",
  728. marginTop: 10,
  729. position: "absolute",
  730. top: 0,
  731. right: 30,
  732. }}
  733. >
  734. 打印
  735. </Button>
  736. )}
  737. content={() => this.refs.all}
  738. />
  739. </Modal>
  740. }
  741. </div>
  742. );
  743. },
  744. });
  745. export default ProjectVipAll;