projectvipall.jsx 22 KB

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