projectvipall.jsx 21 KB

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