kede-client/js/component/manageCenter/order/myOrder/servicesOrder/myService.jsx

import React from 'react';
import ReactDom from 'react-dom';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import { Form, Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Checkbox, Modal, Upload, Popconfirm, Tabs } from 'antd';
import NewService from "./addService.jsx";
import moment from 'moment';
import '../../userMangagement.less';
import { intentProgress, transactionProgress, contractProgress, projectProgress, orderType, orderStage, orderState, paymentState, specially, specialBatchState, projectState, orderChannel, approvedState, lock, paymentMethod, transactionChannel } from '../../../../dataDic.js';
import {
  getIntentProgress,
  getTransactionProgress,
  getProjectState,
  getContractProgress,
  getProjectProgress,
  splitUrl,
  getOrderType,
  getOrderStage,
  getOrderState,
  getPaymentState,
  getOrderChannel,
  getApprovedState,
  getLock,
  getPaymentMethod,
  getTransactionChannel,
  ShowModal
} from "../../../../tools.js";
import ShowModalDiv from "@/showModal.jsx";
import { ChooseList } from "../../orderNew/chooseList";
const { TabPane } = Tabs
const MyService = Form.create()(React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/listServiceOrder',
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        buyerName: this.state.customerName,
        orderNo: this.state.orderNo,
        startDate: this.state.releaseDate[0],
        endDate: this.state.releaseDate[1],
        projectStage: this.state.projectProgress,
        liquidationStatus: this.state.settlementState, //结算
        orderStatus: this.state.orderStatusSearch,
        approval: this.state.approval,
        orderChannel: this.state.orderChannelSearch,
        intention: this.state.intentOrder ? 1 : 0,
        formal: this.state.formalOrder ? 1 : 0,
      },
      success: function (data) {
        ShowModal(this);
        let theArr = [];
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
        } else {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            theArr.push({
              key: i,
              id: thisdata.id,
              orderNo: thisdata.orderNo,//订单编号
              orderType: thisdata.orderType,//订单类型
              orderStatus: thisdata.orderStatus,
              liquidationStatus: thisdata.liquidationStatus,
              createTime: thisdata.createTime,
              buyerName: thisdata.buyerName,
              signTotalAmount: thisdata.signTotalAmount,
              projectStage: thisdata.projectStage,
              approval: thisdata.approval,
              orderChannel: thisdata.orderChannel,
              salesmanName: thisdata.salesmanName,
              active: thisdata.active,
              signTime: thisdata.signTime,
              financeName: thisdata.financeName
            });
          };
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
        };
        if (!data.data.list.length) {
          this.state.pagination.current = 0
          this.state.pagination.total = 0
        }
        this.setState({
          pageNo: pageNo,
          dataSource: theArr,
          pagination: this.state.pagination,
          selectedRowKeys: [],
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  getInitialState() {
    return {
      datauser: {},
      selectedRowKeys: [],
      releaseDate: [],
      signBillState: false,
      signBillVisible: false,
      selectedRows: [],
      searchMore: true,
      loading: false,
      intentOrder: true,
      formalOrder: true,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      columns: [
        {
          title: '订单编号',
          dataIndex: 'orderNo',
          key: 'orderNo'
        }, {
          title: '订单类型',
          dataIndex: 'orderType',
          key: 'orderType',
          render: text => { return getOrderType(text) }
        }, {
          title: '下单时间',
          dataIndex: 'createTime',
          key: 'createTime'
        }, {
          title: '签单时间',
          dataIndex: 'signTime',
          key: 'signTime'
        }, {
          title: '订单客户',
          dataIndex: 'buyerName',
          key: 'buyerName',
          render: (text) => {
            return (text && text.length > 8 ? text.substr(0, 8) + '...' : text)
          }
        }, {
          title: '实际下单金额(万元)',
          dataIndex: 'signTotalAmount',
          key: 'signTotalAmount'
        }, {
          title: '结算状态',
          dataIndex: 'liquidationStatus',
          key: 'liquidationStatus',
          render: text => { return getPaymentState(text) }
        }, {
          title: '订单状态',
          dataIndex: 'orderStatus',
          key: 'orderStatus',
          render: text => { return getOrderState(text) }
        }, {
          title: '项目状态',
          dataIndex: 'projectStage',
          key: 'projectStage',
          render: text => { return getProjectState(text) }
        }, {
          title: '是否特批',
          dataIndex: 'approval',
          key: 'approval',
          render: text => { return getApprovedState(text) }
        }, {
          title: '订单外联',
          dataIndex: 'orderChannel',
          key: 'orderChannel',
          render: text => { return getOrderChannel(text) }
        }, {
          title: '订单负责人',
          dataIndex: 'salesmanName',
          key: 'salesmanName'
        }, {
          title: '财务负责人',
          dataIndex: 'financeName',
          key: 'financeName'
        },
        {
          title: '操作',
          dataIndex: 'active',
          key: 'active',
          render: (text, record, index) => {
            return <div>
              {text.confirmIntention && <Popconfirm title={'请确认您是否受理来自【' + record.buyerName + '】发起的服务意向订单？'} onConfirm={(e) => { this.admissibleOrderOk(record) }} onCancel={(e) => { this.admissibleOrderCancel(record) }} okText="同意" cancelText="拒绝">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="primary">受理意向</Button>
              </Popconfirm>}
              {/*{text.applySign&&<Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation(),this.signBill(record)}} type="primary">签单</Button> }  */}
              {text.applyForCancel && <Popconfirm title={'请确认您是否取消客户【' + record.buyerName + '】的服务订单，订单取消将导致业务终止！'} onConfirm={(e) => { this.cancelOrder(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="danger">取消订单</Button>
              </Popconfirm>}
              {text.applyRevoke && <Popconfirm title={'请确认您是否作废客户【' + record.buyerName + '】的服务订单，订单作废将导致订单失效！'} onConfirm={(e) => { this.scrapOrder(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="danger">作废</Button>
              </Popconfirm>}
              {text.applyLock && <Popconfirm title={'请确认您是否锁定客户【' + record.buyerName + '】的服务订单，订单锁定将导致订单暂停！'} onConfirm={(e) => { this.lockOrder(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="danger">锁定<Icon type="lock" /></Button>
              </Popconfirm>}
              {text.agreeRefund && <Popconfirm title={'请确认您是否同意客户【' + record.buyerName + '】的退款？'} onConfirm={(e) => { this.refundOk(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="primary">同意退款</Button>
              </Popconfirm>}
              {text.refuseRefund && <Popconfirm title={'请确认您是否拒绝客户【' + record.buyerName + '】的退款？'} onConfirm={(e) => { this.refundCancel(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="danger">拒绝退款</Button>
              </Popconfirm>}
              {text.applyUnLock && <Popconfirm title={'请确认您是否解锁客户【' + record.buyerName + '】的服务订单，订单解锁将导致订单正常！'} onConfirm={(e) => { this.unlockOrder(record) }} okText="确认" cancelText="取消">
                <Button style={{ marginRight: '5px' }} onClick={(e) => { e.stopPropagation() }} type="primary">解锁<Icon type="unlock" /></Button>
              </Popconfirm>}
            </div>
          }
        }
      ],
      dataSource: [],
    };
  },
  //是否退款
  refundCancel(record) {
    this.refund(record, 0)
  },
  refundOk(record) {
    this.refund(record, 1)
  },
  refund(record, index) {
    this.setState({
      signBillVisible: false,
      selectedRowKeys: [],
      loading: true,
      userDetaile: false
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/confirmRefund',
      data: {
        orderNo: record.orderNo,
        confirm: index
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('操作成功！');
        this.setState({
          loading: false,
          showDesc: false
        });
      }
      this.loadData(this.state.pageNo);
    }.bind(this));
  },
  //受理订单
  admissibleOrderOk(e) {
    this.admissibleOrder(e, true)
  },
  admissibleOrderCancel(e) {
    this.admissibleOrder(e, false)
  },
  admissibleOrder(record, index) {
    this.setState({
      signBillVisible: false,
      selectedRowKeys: [],
      loading: true,
      userDetaile: false
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/confirmIntention',
      data: {
        orderNo: record.orderNo,
        confirm: index
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('操作成功！');
        this.setState({
          loading: false,
          showDesc: false
        });
      } else {
        message.warning(data.error[0].message);
        this.setState({
          showDesc: true
        })
      };
      this.loadData(this.state.pageNo);
    }.bind(this));
  },
  //取消订单
  cancelOrder(e) {
    this.operation(e, 3)
  },
  //作废订单
  scrapOrder(e) {
    this.operation(e, 2)
  },
  //锁定订单
  lockOrder(e) {
    this.operation(e, 0)
  },
  //解锁订单
  unlockOrder(e) {
    this.operation(e, 1)
  },
  //签单
  signBill(ids) {
    this.setState({
      uid: ids,
      signBillVisible: true
    })
  },
  componentWillMount() {
    this.loadData();
    let data = localStorage.getItem('newData');
    if (data != '{}' && data) {
      var newData = JSON.parse(data);
      this.tableRowClick(newData);
    };
  },
  tableRowClick(record, index) {
    this.state.userDetaile = true;
    this.state.datauser = record;
    this.setState({
      signBillVisible: false,
      signBillState: true,
      showDesc: true
    });
    localStorage.setItem('newData', '{}');
  },
  //列表各种骚操作
  operation(record, index) {
    this.setState({
      selectedRowKeys: [],
      loading: true,
      showDesc: false
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/lockOrRevokeOrder',
      data: {
        orderNo: record.orderNo,
        operatorType: index
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('操作成功！');
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      this.loadData(this.state.pageNo);
    }.bind(this));
  },
  addClick() {
    this.state.userDetaile = false;
    this.setState({
      signBillVisible: false,
      showDesc: true
    });
  },
  closeDesc(e, s) {
    this.state.userDetaile = false;
    this.state.signBillVisible = false;
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.pageNo);
    };
  },
  searchSwitch() {
    this.setState({
      signBillVisible: false,
      searchMore: !this.state.searchMore
    });
  },
  search() {
    this.setState({
      signBillVisible: false
    })
    this.loadData();
  },
  reset() {
    this.setState({
      signBillVisible: false
    })
    this.state.orderNo = '';
    this.state.customerName = '';
    this.state.releaseDate[0] = undefined;
    this.state.releaseDate[1] = undefined;
    this.state.projectProgress = undefined;
    this.state.settlementState = undefined;
    this.state.orderStatusSearch = undefined;
    this.state.orderChannelSearch = undefined;
    this.state.approval = undefined;
    this.state.formalOrder = true;
    this.state.intentOrder = true;
    this.loadData();
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  render() {
    const FormItem = Form.Item;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1)
        });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        this.setState({
          selectedRowKeys: []
        })
      },
    };
    const hasSelected = this.state.selectedRowKeys.length > 0;
    const { RangePicker } = DatePicker;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>科技服务订单</span>
        </div>
        <div className="user-search">
          <Tabs
            defaultActiveKey="1"
            onChange={this.callback}
            className="test">
            <TabPane tab="搜索" key="1">
              <div>
                <Input
                  placeholder="订单编号"
                  style={{ width: 150, marginLeft: 10 }}
                  value={this.state.orderNo}
                  onChange={e => {
                    this.setState({ orderNo: e.target.value });
                  }}
                />
                <Input
                  placeholder="客户名称"
                  style={{ width: 150, marginLeft: 10 }}
                  value={this.state.customerName}
                  onChange={e => {
                    this.setState({ customerName: e.target.value });
                  }}
                />
                <RangePicker
                  style={{ marginLeft: 10 }}
                  value={[
                    this.state.releaseDate[0]
                      ? moment(this.state.releaseDate[0])
                      : null,
                    this.state.releaseDate[1]
                      ? moment(this.state.releaseDate[1])
                      : null
                  ]}
                  onChange={(data, dataString) => {
                    this.setState({ releaseDate: dataString });
                  }}
                />
                <Select
                  placeholder="特批筛选"
                  style={{ width: 150, marginLeft: "10px" }}
                  value={this.state.approval}
                  onChange={e => {
                    this.setState({ approval: e });
                  }}
                >
                  {specially.map(function (item) {
                    return (
                      <Select.Option key={item.value}>{item.key}</Select.Option>
                    );
                  })}
                </Select>
                <Button
                  type="primary"
                  onClick={this.search}
                  style={{ marginLeft: "10px" }}
                >
                  搜索
                  <Icon type="search" />
                </Button>
                <Button onClick={this.reset}>
                  重置
                  <Icon type="reload" />
                </Button>
                <span style={{ marginLeft: "10px", marginRight: "20px" }}>
                  更多搜索
                  <Switch defaultChecked={false} onChange={this.searchSwitch} />
                </span>
              </div>
              <div className="clearfix" style={{ marginTop: "5px", marginLeft: 10 }}>
                <div
                  className="search-more"
                  style={this.state.searchMore ? { display: "none" } : {}}
                >
                  <Checkbox
                    checked={this.state.intentOrder}
                    onChange={e => {
                      this.setState({ intentOrder: !this.state.intentOrder });
                    }}
                  >
                    意向订单
                  </Checkbox>
                  <Checkbox
                    checked={this.state.formalOrder}
                    onChange={e => {
                      this.setState({ formalOrder: !this.state.formalOrder });
                    }}
                  >
                    正式订单
                  </Checkbox>
                  <Select
                    placeholder="订单状态"
                    style={{
                      width: 150,
                      marginRight: "10px",
                      marginBottom: "10px"
                    }}
                    value={this.state.orderStatusSearch}
                    onChange={e => {
                      this.setState({ orderStatusSearch: e });
                    }}
                  >
                    {orderState.map(function (item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                  <Select
                    placeholder="结算状态"
                    style={{ width: 150, marginRight: "10px" }}
                    value={this.state.settlementState}
                    onChange={e => {
                      this.setState({ settlementState: e });
                    }}
                  >
                    {paymentState.map(function (item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                  <Select
                    placeholder="项目进度"
                    style={{ width: 150, marginRight: "10px" }}
                    value={this.state.projectProgress}
                    onChange={e => {
                      this.setState({ projectProgress: e });
                    }}
                  >
                    {projectState.map(function (item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                  <Select
                    placeholder="订单外联"
                    style={{ width: 150 }}
                    value={this.state.orderChannelSearch}
                    onChange={e => {
                      this.setState({ orderChannelSearch: e });
                    }}
                  >
                    {orderChannel.map(function (item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                </div>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
                />
              </div>
            </TabPane>
            <TabPane tab="开单" key="3">
              <Button
                type="primary"
                className="addButton"
                style={{ margin: 10, float: "left" }}
                onClick={this.addClick}
              >
                开单
                <Icon type="plus" />
              </Button>
            </TabPane>
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                rowSelection={rowSelection}
                pagination={this.state.pagination}
                onRowClick={this.tableRowClick}
                bordered
                size="small"
              />
            </Spin>
          </div>
          <NewService
            uid={this.state.uid}
            signBillVisible={this.state.signBillVisible}
            signBillState={this.state.signBillState}
            operation={this.operation}
            admissibleOrder={this.admissibleOrder}
            userDetaile={this.state.userDetaile}
            datauser={this.state.datauser}
            showDesc={this.state.showDesc}
            closeDesc={this.closeDesc}
          />
        </div>
      </div>
    );
  }
}));

export default MyService;