123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421 |
- import React, { Component } from 'react';
- import DataTable from '@/components/common/DataTable';
- import {
- Button,
- Dropdown,
- Menu,
- Space,
- Table,
- DatePicker,
- message,
- Popconfirm
- } from "antd";
- import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
- import { TableDropdown } from '@ant-design/pro-table';
- import { ProFormSelect } from '@ant-design/pro-form';
- import TableModal from './components/TableModal';
- import BillingHistory from './components/billingHistory';
- import {
- getSelectSuperId,
- getFakeCaptcha
- } from './services/API';
- import {
- getProcessStatus,
- getLiquidationStatus,
- getApprovedState,
- getNewOrderStatus
- } from "@/utils/tools";
- import {fakeAccountLogin} from "@/services/login";
- const { RangePicker } = DatePicker;
- const menu = (
- <Menu>
- <Menu.Item key="1">1st item</Menu.Item>
- <Menu.Item key="2">2nd item</Menu.Item>
- <Menu.Item key="3">3rd item</Menu.Item>
- </Menu>
- );
- // 部门
- const departmentList = async() => {
- const msg = await getSelectSuperId();
- if(msg.error.length === 0){
- let theArr = [];
- msg.data.forEach((item) => {
- theArr.push({
- label: item.name,
- value: item.id
- });
- });
- return theArr;
- }else{
- message.info(msg.error[0].message)
- }
- return [];
- }
- class Billing extends Component{
- constructor(props) {
- super(props);
- this.state = {
- columns: [
- {
- title: '合同编号',
- dataIndex: 'contractNo',
- width: 200,
- searchBool: true,
- },
- {
- title: '订单编号',
- dataIndex: 'orderNo',
- width: 200,
- searchBool: true,
- },
- {
- title: '客户名称',
- dataIndex: 'userName',
- searchBool: true,
- render: text => {
- return text && text.length > 9 ? text.substr(0, 9) + '...' : text;
- },
- },
- {
- title: '订单部门',
- dataIndex: 'depName',
- key: 'depId',
- width: 200,
- searchBool: true,
- renderFormItem: () => {
- return (
- <ProFormSelect label='' request={departmentList}/>
- );
- },
- },
- {
- title: '下单时间',
- dataIndex: 'createDate',
- key: 'createDate',
- valueType: 'dateRange',
- searchBool: true,
- render: (text, record) => {
- return record.createDate;
- }
- },
- {
- title: '合同签订时间',
- dataIndex: 'signDate',
- width: 200,
- },
- {
- title: "流程状态",
- dataIndex: "processStatus",
- key: "processStatus",
- render: text => {
- return getProcessStatus(text);
- }
- },
- {
- title: '签单金额(万元)',
- dataIndex: 'totalAmount',
- width: 200,
- searchBool: true,
- renderFormItem: () => {
- return (
- <ProFormSelect label='' valueEnum={{
- '0': {
- text: '10万元以下',
- },
- '1': {
- text: '10~20万元',
- },
- '2': {
- text: '20~30万元',
- },
- '3': {
- text: '30~40万元',
- },
- '4': {
- text: '20~40万元以上',
- },
- }}/>
- );
- }
- },
- {
- title: "开票金额(万元)",
- dataIndex: "invoiceAmount",
- key: "invoiceAmount"
- },
- {
- title: "已收款(万元)",
- dataIndex: "settlementAmount",
- key: "settlementAmount"
- },
- {
- title: "结算状态",
- dataIndex: "liquidationStatus",
- key: "liquidationStatus",
- searchBool: true,
- renderFormItem: () => {
- return (
- <ProFormSelect label='' valueEnum={{
- '0': {
- text: '首付待付请',
- },
- '1': {
- text: '尾款待付清',
- },
- '2': {
- text: '已付清',
- }
- }}/>
- );
- },
- render: text => {
- return getLiquidationStatus(text);
- }
- },
- {
- title: "是否特批",
- dataIndex: "approval",
- key: "approval",
- searchBool: true,
- renderFormItem: () => {
- return (
- <ProFormSelect label='' valueEnum={{
- '0': {
- text: '非特批',
- },
- '1': {
- text: '特批',
- },
- }}/>
- );
- },
- render: text => {
- return getApprovedState(text);
- }
- },
- {
- title: "订单状态",
- dataIndex: "orderStatus",
- key: "orderStatus",
- render: text => {
- return getNewOrderStatus(text);
- }
- },
- {
- title: "财务负责人",
- dataIndex: "financeName",
- key: "financeName"
- },
- // {
- // title: '自定义筛选',
- // key: 'direction',
- // hideInTable: true,
- // dataIndex: 'direction',
- // searchBool: true,
- // search: {
- // transform: (v)=>{
- // console.log(v)
- // return v
- // }
- // },
- // renderFormItem: (item, props) => {
- // return (
- // <ProFormSelect request={departmentList}/>
- // );
- // },
- // },
- {
- title: '操作',
- valueType: 'option',
- key: 'option',
- fixed: 'right',
- align: 'center',
- width: 150,
- render: (text, record, key, action) => [
- <a
- key="editable"
- onClick={(e) => {
- e.stopPropagation();
- this.visit(record, key);
- }}
- >
- 开票
- </a>,
- <Popconfirm
- title="是否结项?"
- onConfirm={(e) => {
- e.stopPropagation();
- this.delectRow(record.orderNo,action);
- }}
- onCancel={(e)=>{e.stopPropagation();}}
- okText="是"
- cancelText="否"
- >
- <a
- target="_blank"
- rel="noopener noreferrer"
- key="view"
- onClick={(e)=>{
- e.stopPropagation();
- }}
- >
- 结项
- </a>
- </Popconfirm>,
- <TableDropdown
- key="actionGroup"
- onSelect={(v) => {
- // 操作
- console.log(v)
- }}
- menus={[
- { key: 'copy', name: '复制' },
- { key: 'delete', name: '删除' },
- ]}
- />,
- ],
- },
- ],
- tableModal: false,
- tableRowInfor: {},
- billingHistoryModal: false,
- billinghistoryorderNo: '',
- }
- this.dataTableRef = null;
- }
- componentDidMount() {
- }
- // 结项
- async delectRow(orderNo,action) {
- const msg = await getFakeCaptcha(orderNo);
- if(msg.error.length === 0){
- message.success("该项目已成功结项!");
- action.reload();
- }else{
- message.info(msg.error[0].message)
- }
- }
- render() {
- return (
- <>
- <DataTable
- ref={res => this.dataTableRef = res}
- headerTitle='开单与签单'
- url='/api/admin/newOrder/orderNewList'
- rowKey='orderNo'
- scroll={{ x: 2500 }}
- columns={this.state.columns}
- search={{
- filterType: 'query',
- labelWidth: 'auto',
- defaultCollapsed: false,
- }}
- rowSelection={{
- type: 'radio',
- selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
- }}
- requestProcess={(v)=>{
- if(v && v.createDate){
- v.starTime = v.createDate[0];
- v.endTime = v.createDate[1];
- delete v.createDate;
- }
- return v;
- }}
- onRow={record => {
- return {
- onClick: (event) => {
- this.setState({
- tableModal: true,
- tableRowInfor: record,
- })
- }, // 点击行
- };
- }}
- onHeaderRow={column => {
- return {
- onClick: () => {}, // 点击表头行
- };
- }}
- toolBarRender={[
- <Button key="button" icon={<PlusOutlined />} type="primary">
- 开单
- </Button>,
- <Dropdown key="menu" overlay={menu}>
- <Button>
- <EllipsisOutlined />
- </Button>
- </Dropdown>,
- ]}
- tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
- <Space size={24}>
- <span>
- 已选 {selectedRowKeys.length} 项
- <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
- 取消选择
- </a>
- </span>
- <span>{`签单金额: ${selectedRows.reduce(
- (pre, item) => pre + item.totalAmount,
- 0,
- )} 万`}</span>
- </Space>
- )}
- tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
- return (
- <Space size={16}>
- <a onClick={()=>{
- this.setState({
- billingHistoryModal: true,
- billinghistoryorderNo: selectedRowKeys[0],
- })
- }}>查看开票记录</a>
- <a>查看催款详情</a>
- <a>查看项目进度</a>
- </Space>
- );
- }}
- />
- <TableModal
- centered
- width={1200}
- visible={this.state.tableModal}
- tableRowInfor={this.state.tableRowInfor}
- onCancel={() => this.setState({
- tableModal: false,
- tableRowInfor: {}
- })}
- onOk={() => this.setState({
- tableModal: false,
- tableRowInfor: {},
- })}/>
- {/* 开票历史记录 */}
- <BillingHistory
- visible={this.state.billingHistoryModal}
- orderNo={this.state.billinghistoryorderNo}
- onCancel={() => this.setState({
- billingHistoryModal: false,
- billinghistoryorderNo: '',
- })}
- onOk={() => this.setState({
- billingHistoryModal: false,
- billinghistoryorderNo: '',
- })}
- />
- </>
- );
- }
- }
- export default Billing;
|