index.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. import React, { Component } from 'react';
  2. import DataTable from '@/components/common/DataTable';
  3. import {
  4. Button,
  5. Dropdown,
  6. Menu,
  7. Space,
  8. Table,
  9. DatePicker,
  10. message,
  11. Popconfirm
  12. } from "antd";
  13. import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
  14. import { TableDropdown } from '@ant-design/pro-table';
  15. import { ProFormSelect } from '@ant-design/pro-form';
  16. import TableModal from './components/TableModal';
  17. import BillingHistory from './components/billingHistory';
  18. import {
  19. getSelectSuperId,
  20. getFakeCaptcha
  21. } from './services/API';
  22. import {
  23. getProcessStatus,
  24. getLiquidationStatus,
  25. getApprovedState,
  26. getNewOrderStatus
  27. } from "@/utils/tools";
  28. import {fakeAccountLogin} from "@/services/login";
  29. const { RangePicker } = DatePicker;
  30. const menu = (
  31. <Menu>
  32. <Menu.Item key="1">1st item</Menu.Item>
  33. <Menu.Item key="2">2nd item</Menu.Item>
  34. <Menu.Item key="3">3rd item</Menu.Item>
  35. </Menu>
  36. );
  37. // 部门
  38. const departmentList = async() => {
  39. const msg = await getSelectSuperId();
  40. if(msg.error.length === 0){
  41. let theArr = [];
  42. msg.data.forEach((item) => {
  43. theArr.push({
  44. label: item.name,
  45. value: item.id
  46. });
  47. });
  48. return theArr;
  49. }else{
  50. message.info(msg.error[0].message)
  51. }
  52. return [];
  53. }
  54. class Billing extends Component{
  55. constructor(props) {
  56. super(props);
  57. this.state = {
  58. columns: [
  59. {
  60. title: '合同编号',
  61. dataIndex: 'contractNo',
  62. width: 200,
  63. searchBool: true,
  64. },
  65. {
  66. title: '订单编号',
  67. dataIndex: 'orderNo',
  68. width: 200,
  69. searchBool: true,
  70. },
  71. {
  72. title: '客户名称',
  73. dataIndex: 'userName',
  74. searchBool: true,
  75. render: text => {
  76. return text && text.length > 9 ? text.substr(0, 9) + '...' : text;
  77. },
  78. },
  79. {
  80. title: '订单部门',
  81. dataIndex: 'depName',
  82. key: 'depId',
  83. width: 200,
  84. searchBool: true,
  85. renderFormItem: () => {
  86. return (
  87. <ProFormSelect label='' request={departmentList}/>
  88. );
  89. },
  90. },
  91. {
  92. title: '下单时间',
  93. dataIndex: 'createDate',
  94. key: 'createDate',
  95. valueType: 'dateRange',
  96. searchBool: true,
  97. render: (text, record) => {
  98. return record.createDate;
  99. }
  100. },
  101. {
  102. title: '合同签订时间',
  103. dataIndex: 'signDate',
  104. width: 200,
  105. },
  106. {
  107. title: "流程状态",
  108. dataIndex: "processStatus",
  109. key: "processStatus",
  110. render: text => {
  111. return getProcessStatus(text);
  112. }
  113. },
  114. {
  115. title: '签单金额(万元)',
  116. dataIndex: 'totalAmount',
  117. width: 200,
  118. searchBool: true,
  119. renderFormItem: () => {
  120. return (
  121. <ProFormSelect label='' valueEnum={{
  122. '0': {
  123. text: '10万元以下',
  124. },
  125. '1': {
  126. text: '10~20万元',
  127. },
  128. '2': {
  129. text: '20~30万元',
  130. },
  131. '3': {
  132. text: '30~40万元',
  133. },
  134. '4': {
  135. text: '20~40万元以上',
  136. },
  137. }}/>
  138. );
  139. }
  140. },
  141. {
  142. title: "开票金额(万元)",
  143. dataIndex: "invoiceAmount",
  144. key: "invoiceAmount"
  145. },
  146. {
  147. title: "已收款(万元)",
  148. dataIndex: "settlementAmount",
  149. key: "settlementAmount"
  150. },
  151. {
  152. title: "结算状态",
  153. dataIndex: "liquidationStatus",
  154. key: "liquidationStatus",
  155. searchBool: true,
  156. renderFormItem: () => {
  157. return (
  158. <ProFormSelect label='' valueEnum={{
  159. '0': {
  160. text: '首付待付请',
  161. },
  162. '1': {
  163. text: '尾款待付清',
  164. },
  165. '2': {
  166. text: '已付清',
  167. }
  168. }}/>
  169. );
  170. },
  171. render: text => {
  172. return getLiquidationStatus(text);
  173. }
  174. },
  175. {
  176. title: "是否特批",
  177. dataIndex: "approval",
  178. key: "approval",
  179. searchBool: true,
  180. renderFormItem: () => {
  181. return (
  182. <ProFormSelect label='' valueEnum={{
  183. '0': {
  184. text: '非特批',
  185. },
  186. '1': {
  187. text: '特批',
  188. },
  189. }}/>
  190. );
  191. },
  192. render: text => {
  193. return getApprovedState(text);
  194. }
  195. },
  196. {
  197. title: "订单状态",
  198. dataIndex: "orderStatus",
  199. key: "orderStatus",
  200. render: text => {
  201. return getNewOrderStatus(text);
  202. }
  203. },
  204. {
  205. title: "财务负责人",
  206. dataIndex: "financeName",
  207. key: "financeName"
  208. },
  209. // {
  210. // title: '自定义筛选',
  211. // key: 'direction',
  212. // hideInTable: true,
  213. // dataIndex: 'direction',
  214. // searchBool: true,
  215. // search: {
  216. // transform: (v)=>{
  217. // console.log(v)
  218. // return v
  219. // }
  220. // },
  221. // renderFormItem: (item, props) => {
  222. // return (
  223. // <ProFormSelect request={departmentList}/>
  224. // );
  225. // },
  226. // },
  227. {
  228. title: '操作',
  229. valueType: 'option',
  230. key: 'option',
  231. fixed: 'right',
  232. align: 'center',
  233. width: 150,
  234. render: (text, record, key, action) => [
  235. <a
  236. key="editable"
  237. onClick={(e) => {
  238. e.stopPropagation();
  239. this.visit(record, key);
  240. }}
  241. >
  242. 开票
  243. </a>,
  244. <Popconfirm
  245. title="是否结项?"
  246. onConfirm={(e) => {
  247. e.stopPropagation();
  248. this.delectRow(record.orderNo,action);
  249. }}
  250. onCancel={(e)=>{e.stopPropagation();}}
  251. okText="是"
  252. cancelText="否"
  253. >
  254. <a
  255. target="_blank"
  256. rel="noopener noreferrer"
  257. key="view"
  258. onClick={(e)=>{
  259. e.stopPropagation();
  260. }}
  261. >
  262. 结项
  263. </a>
  264. </Popconfirm>,
  265. <TableDropdown
  266. key="actionGroup"
  267. onSelect={(v) => {
  268. // 操作
  269. console.log(v)
  270. }}
  271. menus={[
  272. { key: 'copy', name: '复制' },
  273. { key: 'delete', name: '删除' },
  274. ]}
  275. />,
  276. ],
  277. },
  278. ],
  279. tableModal: false,
  280. tableRowInfor: {},
  281. billingHistoryModal: false,
  282. billinghistoryorderNo: '',
  283. }
  284. this.dataTableRef = null;
  285. }
  286. componentDidMount() {
  287. }
  288. // 结项
  289. async delectRow(orderNo,action) {
  290. const msg = await getFakeCaptcha(orderNo);
  291. if(msg.error.length === 0){
  292. message.success("该项目已成功结项!");
  293. action.reload();
  294. }else{
  295. message.info(msg.error[0].message)
  296. }
  297. }
  298. render() {
  299. return (
  300. <>
  301. <DataTable
  302. ref={res => this.dataTableRef = res}
  303. headerTitle='开单与签单'
  304. url='/api/admin/newOrder/orderNewList'
  305. rowKey='orderNo'
  306. scroll={{ x: 2500 }}
  307. columns={this.state.columns}
  308. search={{
  309. filterType: 'query',
  310. labelWidth: 'auto',
  311. defaultCollapsed: false,
  312. }}
  313. rowSelection={{
  314. type: 'radio',
  315. selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
  316. }}
  317. requestProcess={(v)=>{
  318. if(v && v.createDate){
  319. v.starTime = v.createDate[0];
  320. v.endTime = v.createDate[1];
  321. delete v.createDate;
  322. }
  323. return v;
  324. }}
  325. onRow={record => {
  326. return {
  327. onClick: (event) => {
  328. this.setState({
  329. tableModal: true,
  330. tableRowInfor: record,
  331. })
  332. }, // 点击行
  333. };
  334. }}
  335. onHeaderRow={column => {
  336. return {
  337. onClick: () => {}, // 点击表头行
  338. };
  339. }}
  340. toolBarRender={[
  341. <Button key="button" icon={<PlusOutlined />} type="primary">
  342. 开单
  343. </Button>,
  344. <Dropdown key="menu" overlay={menu}>
  345. <Button>
  346. <EllipsisOutlined />
  347. </Button>
  348. </Dropdown>,
  349. ]}
  350. tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
  351. <Space size={24}>
  352. <span>
  353. 已选 {selectedRowKeys.length} 项
  354. <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
  355. 取消选择
  356. </a>
  357. </span>
  358. <span>{`签单金额: ${selectedRows.reduce(
  359. (pre, item) => pre + item.totalAmount,
  360. 0,
  361. )} 万`}</span>
  362. </Space>
  363. )}
  364. tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
  365. return (
  366. <Space size={16}>
  367. <a onClick={()=>{
  368. this.setState({
  369. billingHistoryModal: true,
  370. billinghistoryorderNo: selectedRowKeys[0],
  371. })
  372. }}>查看开票记录</a>
  373. <a>查看催款详情</a>
  374. <a>查看项目进度</a>
  375. </Space>
  376. );
  377. }}
  378. />
  379. <TableModal
  380. centered
  381. width={1200}
  382. visible={this.state.tableModal}
  383. tableRowInfor={this.state.tableRowInfor}
  384. onCancel={() => this.setState({
  385. tableModal: false,
  386. tableRowInfor: {}
  387. })}
  388. onOk={() => this.setState({
  389. tableModal: false,
  390. tableRowInfor: {},
  391. })}/>
  392. {/* 开票历史记录 */}
  393. <BillingHistory
  394. visible={this.state.billingHistoryModal}
  395. orderNo={this.state.billinghistoryorderNo}
  396. onCancel={() => this.setState({
  397. billingHistoryModal: false,
  398. billinghistoryorderNo: '',
  399. })}
  400. onOk={() => this.setState({
  401. billingHistoryModal: false,
  402. billinghistoryorderNo: '',
  403. })}
  404. />
  405. </>
  406. );
  407. }
  408. }
  409. export default Billing;