projectvipall.jsx 23 KB

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