|
@@ -1,9 +1,33 @@
|
|
import React, { Component } from 'react';
|
|
import React, { Component } from 'react';
|
|
import DataTable from '@/components/common/DataTable';
|
|
import DataTable from '@/components/common/DataTable';
|
|
-import {Button, Dropdown, Menu, Space, Table, DatePicker} from "antd";
|
|
|
|
|
|
+import {
|
|
|
|
+ Button,
|
|
|
|
+ Dropdown,
|
|
|
|
+ Menu,
|
|
|
|
+ Space,
|
|
|
|
+ Table,
|
|
|
|
+ DatePicker,
|
|
|
|
+ message,
|
|
|
|
+ Popconfirm
|
|
|
|
+} from "antd";
|
|
import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
|
|
import {EllipsisOutlined, PlusOutlined} from "@ant-design/icons";
|
|
import { TableDropdown } from '@ant-design/pro-table';
|
|
import { TableDropdown } from '@ant-design/pro-table';
|
|
|
|
+import { ProFormSelect } from '@ant-design/pro-form';
|
|
import TableModal from './components/TableModal';
|
|
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 { RangePicker } = DatePicker;
|
|
|
|
|
|
@@ -15,6 +39,24 @@ const menu = (
|
|
</Menu>
|
|
</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{
|
|
class Billing extends Component{
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props);
|
|
super(props);
|
|
@@ -24,17 +66,18 @@ class Billing extends Component{
|
|
title: '合同编号',
|
|
title: '合同编号',
|
|
dataIndex: 'contractNo',
|
|
dataIndex: 'contractNo',
|
|
width: 200,
|
|
width: 200,
|
|
- lock: 'left',
|
|
|
|
- searchbool: true,
|
|
|
|
|
|
+ searchBool: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '订单编号',
|
|
title: '订单编号',
|
|
dataIndex: 'orderNo',
|
|
dataIndex: 'orderNo',
|
|
width: 200,
|
|
width: 200,
|
|
|
|
+ searchBool: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '客户名称',
|
|
title: '客户名称',
|
|
dataIndex: 'userName',
|
|
dataIndex: 'userName',
|
|
|
|
+ searchBool: true,
|
|
render: text => {
|
|
render: text => {
|
|
return text && text.length > 9 ? text.substr(0, 9) + '...' : text;
|
|
return text && text.length > 9 ? text.substr(0, 9) + '...' : text;
|
|
},
|
|
},
|
|
@@ -42,13 +85,24 @@ class Billing extends Component{
|
|
{
|
|
{
|
|
title: '订单部门',
|
|
title: '订单部门',
|
|
dataIndex: 'depName',
|
|
dataIndex: 'depName',
|
|
|
|
+ key: 'depId',
|
|
width: 200,
|
|
width: 200,
|
|
|
|
+ searchBool: true,
|
|
|
|
+ renderFormItem: () => {
|
|
|
|
+ return (
|
|
|
|
+ <ProFormSelect label='' request={departmentList}/>
|
|
|
|
+ );
|
|
|
|
+ },
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '下单时间',
|
|
title: '下单时间',
|
|
dataIndex: 'createDate',
|
|
dataIndex: 'createDate',
|
|
|
|
+ key: 'createDate',
|
|
valueType: 'dateRange',
|
|
valueType: 'dateRange',
|
|
- searchbool: true,
|
|
|
|
|
|
+ searchBool: true,
|
|
|
|
+ render: (text, record) => {
|
|
|
|
+ return record.createDate;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '合同签订时间',
|
|
title: '合同签订时间',
|
|
@@ -56,76 +110,168 @@ class Billing extends Component{
|
|
width: 200,
|
|
width: 200,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ title: "流程状态",
|
|
|
|
+ dataIndex: "processStatus",
|
|
|
|
+ key: "processStatus",
|
|
|
|
+ render: text => {
|
|
|
|
+ return getProcessStatus(text);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
title: '签单金额(万元)',
|
|
title: '签单金额(万元)',
|
|
dataIndex: 'totalAmount',
|
|
dataIndex: 'totalAmount',
|
|
width: 200,
|
|
width: 200,
|
|
- filters: true,
|
|
|
|
|
|
+ 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: '自定义筛选',
|
|
|
|
- key: 'direction',
|
|
|
|
- hideInTable: true,
|
|
|
|
- dataIndex: 'direction',
|
|
|
|
- searchbool: true,
|
|
|
|
- search: {
|
|
|
|
- transform: (v)=>{
|
|
|
|
- console.log(v)
|
|
|
|
- return v
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- renderFormItem: (item, props) => {
|
|
|
|
|
|
+ title: "开票金额(万元)",
|
|
|
|
+ dataIndex: "invoiceAmount",
|
|
|
|
+ key: "invoiceAmount"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "已收款(万元)",
|
|
|
|
+ dataIndex: "settlementAmount",
|
|
|
|
+ key: "settlementAmount"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: "结算状态",
|
|
|
|
+ dataIndex: "liquidationStatus",
|
|
|
|
+ key: "liquidationStatus",
|
|
|
|
+ searchBool: true,
|
|
|
|
+ renderFormItem: () => {
|
|
return (
|
|
return (
|
|
- <RangePicker value={props.value} onPanelChange={props.onChange}/>
|
|
|
|
|
|
+ <ProFormSelect label='' valueEnum={{
|
|
|
|
+ '0': {
|
|
|
|
+ text: '首付待付请',
|
|
|
|
+ },
|
|
|
|
+ '1': {
|
|
|
|
+ text: '尾款待付清',
|
|
|
|
+ },
|
|
|
|
+ '2': {
|
|
|
|
+ text: '已付清',
|
|
|
|
+ }
|
|
|
|
+ }}/>
|
|
);
|
|
);
|
|
},
|
|
},
|
|
|
|
+ render: text => {
|
|
|
|
+ return getLiquidationStatus(text);
|
|
|
|
+ }
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '状态',
|
|
|
|
- dataIndex: 'state',
|
|
|
|
- initialValue: 'open',
|
|
|
|
- valueType: 'select',
|
|
|
|
- searchbool: true,
|
|
|
|
- filters: true,
|
|
|
|
- valueEnum: {
|
|
|
|
- all: {
|
|
|
|
- text: '全部',
|
|
|
|
- status: 'Default'
|
|
|
|
- },
|
|
|
|
- open: {
|
|
|
|
- text: '未解决',
|
|
|
|
- status: 'Error',
|
|
|
|
- },
|
|
|
|
- closed: {
|
|
|
|
- text: '已解决',
|
|
|
|
- status: 'Success',
|
|
|
|
- },
|
|
|
|
- processing: {
|
|
|
|
- text: '解决中',
|
|
|
|
- status: 'Processing',
|
|
|
|
- },
|
|
|
|
|
|
+ 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: '操作',
|
|
title: '操作',
|
|
valueType: 'option',
|
|
valueType: 'option',
|
|
key: 'option',
|
|
key: 'option',
|
|
fixed: 'right',
|
|
fixed: 'right',
|
|
align: 'center',
|
|
align: 'center',
|
|
width: 150,
|
|
width: 150,
|
|
- render: (text, record, _, action) => [
|
|
|
|
|
|
+ render: (text, record, key, action) => [
|
|
<a
|
|
<a
|
|
key="editable"
|
|
key="editable"
|
|
- onClick={() => {}}
|
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
+ e.stopPropagation();
|
|
|
|
+ this.visit(record, key);
|
|
|
|
+ }}
|
|
>
|
|
>
|
|
开票
|
|
开票
|
|
</a>,
|
|
</a>,
|
|
- <a target="_blank" rel="noopener noreferrer" key="view">
|
|
|
|
- 结项
|
|
|
|
- </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
|
|
<TableDropdown
|
|
key="actionGroup"
|
|
key="actionGroup"
|
|
onSelect={(v) => {
|
|
onSelect={(v) => {
|
|
- //操作
|
|
|
|
|
|
+ // 操作
|
|
console.log(v)
|
|
console.log(v)
|
|
}}
|
|
}}
|
|
menus={[
|
|
menus={[
|
|
@@ -138,20 +284,42 @@ class Billing extends Component{
|
|
],
|
|
],
|
|
tableModal: false,
|
|
tableModal: false,
|
|
tableRowInfor: {},
|
|
tableRowInfor: {},
|
|
|
|
+ billingHistoryModal: false,
|
|
|
|
+ billinghistoryorderNo: '',
|
|
}
|
|
}
|
|
|
|
+ this.dataTableRef = null;
|
|
}
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
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() {
|
|
render() {
|
|
return (
|
|
return (
|
|
- <div>
|
|
|
|
|
|
+ <>
|
|
<DataTable
|
|
<DataTable
|
|
|
|
+ ref={res => this.dataTableRef = res}
|
|
|
|
+ headerTitle='开单与签单'
|
|
url='/api/admin/newOrder/orderNewList'
|
|
url='/api/admin/newOrder/orderNewList'
|
|
rowKey='orderNo'
|
|
rowKey='orderNo'
|
|
|
|
+ scroll={{ x: 2500 }}
|
|
columns={this.state.columns}
|
|
columns={this.state.columns}
|
|
|
|
+ search={{
|
|
|
|
+ filterType: 'query',
|
|
|
|
+ labelWidth: 'auto',
|
|
|
|
+ defaultCollapsed: false,
|
|
|
|
+ }}
|
|
rowSelection={{
|
|
rowSelection={{
|
|
type: 'radio',
|
|
type: 'radio',
|
|
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
@@ -181,7 +349,7 @@ class Billing extends Component{
|
|
}}
|
|
}}
|
|
toolBarRender={[
|
|
toolBarRender={[
|
|
<Button key="button" icon={<PlusOutlined />} type="primary">
|
|
<Button key="button" icon={<PlusOutlined />} type="primary">
|
|
- 新建
|
|
|
|
|
|
+ 开单
|
|
</Button>,
|
|
</Button>,
|
|
<Dropdown key="menu" overlay={menu}>
|
|
<Dropdown key="menu" overlay={menu}>
|
|
<Button>
|
|
<Button>
|
|
@@ -197,16 +365,21 @@ class Billing extends Component{
|
|
取消选择
|
|
取消选择
|
|
</a>
|
|
</a>
|
|
</span>
|
|
</span>
|
|
- <span>{`签单金额: ${selectedRows.reduce(
|
|
|
|
- (pre, item) => pre + item.totalAmount,
|
|
|
|
- 0,
|
|
|
|
- )} 万`}</span>
|
|
|
|
|
|
+ <span>{`签单金额: ${selectedRows.reduce(
|
|
|
|
+ (pre, item) => pre + item.totalAmount,
|
|
|
|
+ 0,
|
|
|
|
+ )} 万`}</span>
|
|
</Space>
|
|
</Space>
|
|
)}
|
|
)}
|
|
tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
|
|
tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {
|
|
return (
|
|
return (
|
|
<Space size={16}>
|
|
<Space size={16}>
|
|
- <a>查看开票记录</a>
|
|
|
|
|
|
+ <a onClick={()=>{
|
|
|
|
+ this.setState({
|
|
|
|
+ billingHistoryModal: true,
|
|
|
|
+ billinghistoryorderNo: selectedRowKeys[0],
|
|
|
|
+ })
|
|
|
|
+ }}>查看开票记录</a>
|
|
<a>查看催款详情</a>
|
|
<a>查看催款详情</a>
|
|
<a>查看项目进度</a>
|
|
<a>查看项目进度</a>
|
|
</Space>
|
|
</Space>
|
|
@@ -226,7 +399,20 @@ class Billing extends Component{
|
|
tableModal: false,
|
|
tableModal: false,
|
|
tableRowInfor: {},
|
|
tableRowInfor: {},
|
|
})}/>
|
|
})}/>
|
|
- </div>
|
|
|
|
|
|
+ {/* 开票历史记录 */}
|
|
|
|
+ <BillingHistory
|
|
|
|
+ visible={this.state.billingHistoryModal}
|
|
|
|
+ orderNo={this.state.billinghistoryorderNo}
|
|
|
|
+ onCancel={() => this.setState({
|
|
|
|
+ billingHistoryModal: false,
|
|
|
|
+ billinghistoryorderNo: '',
|
|
|
|
+ })}
|
|
|
|
+ onOk={() => this.setState({
|
|
|
|
+ billingHistoryModal: false,
|
|
|
|
+ billinghistoryorderNo: '',
|
|
|
|
+ })}
|
|
|
|
+ />
|
|
|
|
+ </>
|
|
);
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|