kede-client/js/component/manageCenter/financialManage/account/publicityAccount.jsx

import React from "react";
import $ from "jquery/src/ajax";
import moment from "moment";
import {
  Button,
  Form,
  Input,
  Spin,
  Table,
  Select,
  message,
  Tabs,
  DatePicker,
  AutoComplete,
  Modal,
  Tooltip,
  Tag,
} from "antd";
import { ChooseList } from "../../order/orderNew/chooseList";
import { ShowModal, getAccountName, getSecondaryAccountName, getClockState } from "../../../tools"
import { accountType, accountStatus } from "@/dataDic";
import ShowModalDiv from "@/showModal.jsx";
import OrderDetail from '../../order/orderNew/changeComponent/orderDetail';
import './index.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const PublicityAccount = React.createClass({

  getInitialState() {
    return {
      searchValues: {
        allStatus: "0"
      }, // 列表筛选条件
      loading: false, //加载动画
      changeList: undefined, // 更改后的表格显示数据
      dataSource: [], // 列表数据
      departmentArr: [], // 部门信息
      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: "contractNo",
          key: "contractNo",
          width: 300,
          render: (text, record) => {
            return (
              <span>
                <span>{text}</span>
                {" / " + record.buyerName}
              </span>
            );
          },
        },
        {
          title: "营销所属部门",
          dataIndex: "depName",
          key: "depName",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "营销员",
          dataIndex: "salesmanName",
          key: "salesmanName",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "公出/实际/超出（时）",
          dataIndex: "maxDuration",
          key: "maxDuration",
          render: (text, record) => {
            return (
              <div>
                {text + " / " + record.actualDuration + " / "}
                <span style={{ color: record.exceedType == 1 && "red" }}>{record.exceedDuration}</span>
              </div>
            );
          },
        },
        {
          title: "合同总额/已收款（万元）",
          dataIndex: "totalAmount",
          key: "totalAmount",
          render: (text, record) => {
            return (
              <div>
                {text + " / " + record.settlementAmount}
              </div>
            );
          },
        },
        {
          title: "报销总额（元）",
          dataIndex: "expenseAmount",
          key: "expenseAmount",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "已付成本（万元）",
          dataIndex: "paymentAmount",
          key: "paymentAmount",
          render: (text, record) => {
            return (
              <div>
                {text}
              </div>
            );
          },
        },
        {
          title: "报销人数/天数/报销次数",
          dataIndex: "peopleCount",
          key: "peopleCount",
          render: (text, record) => {
            return (
              <div>
                {text + " / " + record.days + " / " + record.expenseCount}
              </div>
            );
          },
        },
        {
          title: "报销未审核/驳回次数",
          dataIndex: "notExamine",
          key: "notExamine",
          render: (text, record) => {
            return (
              <div>
                {text + " / " + record.rejectCount}
              </div>
            );
          },
        },
      ],
    };
  },

  componentWillMount() {
    this.departmentList();
    this.loadData();
  },

  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      // pageNo: pageNo || 1,
      // pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/releaseAndExpenseCount",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data && !data.data.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
              totalAmount: data.data.totalAmount,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    }).always(
      function () {

      }.bind(this)
    );
  },
  // 搜索
  search() {
    this.loadData();
  },
  // 重置
  reset() {
    this.setState({
      searchValues: {
        allStatus: "0"
      },
    }, () => {
      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,
    });
  },
  // 导出
  export() {
    this.setState({
      exportExecLoading: true
    })
    let loading = message.loading('加载中...');
    let data = this.state.searchValues;
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/releaseAndExpenseCount/Export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      loading();
      this.setState({
        exportExecLoading: false
      })
    }.bind(this));
  },
  // 下载
  download(fileName) {
    window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  },
  // 清理缓存
  getCountsClear() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/releaseAndExpenseCountClear",
      data: {},
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          message.success("清除成功！")
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  followUp(e) {
    this.setState({
      aname: e
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      success: function (data) {
        let thedata = data.data || [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          fjlist: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  selectF(value) {
    const { searchValues, fjlist } = this.state;
    const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
    this.setState({
      searchValues: Object.assign(searchValues, {
        aid: newdataSources.find((item) => item.name == value).id,
      }),
    });
  },

  render() {
    const { searchValues, } = this.state
    const dataSources = this.state.fjlist || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    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>
        <Tabs defaultActiveKey="2" className="test">
          <TabPane tab="搜索" key="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Input
                placeholder="合同编号"
                value={searchValues["contractNo"]
                  ? searchValues["contractNo"]
                  : ""}
                onChange={(e) => {
                  searchValues["contractNo"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Input
                placeholder="客户名称"
                value={searchValues["buyerName"]
                  ? searchValues["buyerName"]
                  : ""}
                onChange={(e) => {
                  searchValues["buyerName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Select
                placeholder="所属部门"
                style={{ width: 200, marginRight: 10 }}
                value={searchValues["depId"]
                  ? searchValues["depId"]
                  : undefined}
                onChange={e => {
                  searchValues["depId"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                {this.state.departmentArr.map(function (item) {
                  return <Select.Option key={item.id}>{item.name}</Select.Option>;
                })}
              </Select>
              <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                style={{ width: 140 }}
                dataSource={options}
                placeholder="营销员名称"
                value={this.state.aname}
                onChange={this.followUp.bind(this)}
                filterOption={true}
                onSelect={this.selectF.bind(this)}
              >
                <Input />
              </AutoComplete>
              <Select
                style={{ width: 140 }}
                placeholder=""
                value={searchValues["allStatus"]
                  ? searchValues["allStatus"]
                  : undefined}
                onChange={(e) => {
                  searchValues["allStatus"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="0">全部公出</Option>
                <Option value="1">未超出</Option>
                <Option value="2">已超出</Option>
              </Select>
              <span>报销时间：</span>
              <RangePicker
                style={{ width: 300 }}
                value={[
                  searchValues.startTime ? moment(searchValues.startTime) : null,
                  searchValues.endTime ? moment(searchValues.endTime) : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({
                    searchValues: Object.assign(searchValues, {
                      startTime: dataString[0],
                      endTime: dataString[1],
                    }),
                  });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ margin: "0 10px" }}
              >搜索</Button>
              <Button onClick={this.reset}>重置</Button>
              <Button
                type="primary"
                onClick={this.getCountsClear}
                style={{ marginLeft: 10 }}
              >清理缓存</Button>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="1">
            <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">
            <div style={{ float: "left" }}>
              <Button
                type="primary"
                loading={this.state.exportPendingLoading}
                onClick={this.export}
                style={{ margin: 10 }}
              >
                导出excel
              </Button>
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              pagination={false}
              size="small"
            />
          </Spin>
        </div>
      </div>
    );
  },
});

export default PublicityAccount;