kede-client/js/component/manageCenter/order/orderNew/myprojectvip.jsx

import React from "react";
import $ from "jquery/src/ajax";
import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd";
import OrderDesc from "../../financialManage/orderDetail/orderDesc"
import ResolutionDetail from "@/resolutionDetail";
import { ChooseList } from "../../order/orderNew/chooseList"
import ReactToPrint from "react-to-print";
import OrderItemStatus from "../../../common/orderItemStatus";
import { salesList, approvalOptions } from "@/dataDic.js";
import ProjectOperationVip from "../../../common/projectOperation/vip";
import ShowModalDiv from "@/showModal.jsx";
import VipLogs from "../../../common/logPopup/viplogs";//会员日志
import { splitUrl, getApprovalTag, getApprovedType } from "@/tools";
import ImgList from "../../../common/imgList";
import Cascaders from "../../../common/cascaders";
const { TabPane } = Tabs;

//我的会员项目列表
const MyProjectVip = React.createClass({

  //
  getInitialState() {
    return {
      approvaType: [],
      dvisible: false,
      pageNo: 1,
      totalPage: 0,
      searchValues: {},//查询条件
      loading: false,
      changeList: undefined,// 子组件改变的表格title数组
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.setState({
            pageNo: page,
          });
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "销售类型",
          dataIndex: "salesType",
          key: "salesType",
          render: (text, record) => {
            return (
              <Tooltip
                title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "，" + record.other) : "")}
              >
                <span>
                  {salesList[text]}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: "特批类型",
          dataIndex: "type",
          key: "type",
          width: 110,
          render: (text, record) => {
            return (
              <span>
                {getApprovedType(text ? text.split(",").map(Number) : [], record.typeExplain)}
              </span>
            );
          },
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: 160,
          render: (text, record) => {
            return (
              <Tooltip
                title={
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      let input = document.getElementById("copyText");
                      input.value = text;
                      input.select();
                      document.execCommand("copy");
                      message.success("复制成功");
                    }}
                  >
                    复制
                  </Button>
                }
              >
                <div>
                  {text}
                  <div style={{ display: "flex" }}>
                    <OrderItemStatus deleteSign={record.deleteSign} />
                    {getApprovalTag(record.approval)}
                  </div>
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 160,
          render: text => {
            return (
              <Tooltip title={text}>
                <div>{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
          width: 140,
          render: (text, record) => {
            return (
              <Tooltip
                title={
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      let input = document.getElementById("copyText");
                      input.value = text;
                      input.select();
                      document.execCommand("copy");
                      message.success("复制成功");
                    }}
                  >
                    复制
                  </Button>
                }
              >
                <div>
                  {text}
                  <div>
                    {record.totalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
                    {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
                  </div>
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "订单负责人",
          dataIndex: "salesmanName",
          key: "salesmanName",
        },
        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
        {
          title: "会员项目",
          dataIndex: "projectName",
          key: "projectName",
          render: (text, record) => {
            return (
              <div>
                {text}
                {(record.memberType == 1 || record.memberType == 2) && <Tag color="#ff0000">特批项目</Tag>}
              </div>
            )
          }
        },
        {
          title: "数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity",
        },
        {
          title: "总年限",
          dataIndex: "yearSum",
          key: "yearSum",
          render: (text, record) => {
            return (
              <div>{["", "一年", "二年", "三年", "四年", "五年"][text]}</div>
            );
          }
        },
        {
          title: "年限",
          dataIndex: "serviceLife",
          key: "serviceLife",
          width: 60,
          render: (text, record) => {
            return (
              <div>{!!text && JSON.parse(text).toString()}</div>
            );
          }
        },
        {
          title: "本次派单",
          dataIndex: "serviceYear",
          key: "serviceYear",
          render: (text, record) => {
            return (
              <div>{!text ? "" : text}</div>
            );
          }
        },
        {
          title: "项目说明",
          dataIndex: "taskComment",
          key: "taskComment",
          render: (text, record) => {
            return (
              <div style={{ maxWidth: 220 }}>{text}</div>
            );
          }
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: 80,
          render: (text, record) => {
            return (
              <div>
                {text != 1 && <div style={{ color: text == 4 && "red" }}>{["", "财务审核", `公司/部门管理审核`, "通过", "驳回"][text]}</div>}
                {text == 1 &&
                  <div>
                    {record.examineType == 1
                      ? "财务审核" : record.examineType == 2
                        ? "财务复审" : record.examineType == 3 && "财务审核"
                    }
                    {record.examineType == 3 && <div>财务复审</div>}
                  </div>
                }
              </div>
            );
          }
        },
        {
          title: "操作",
          dataIndex: "pictureUrl",
          key: "pictureUrl",
          width: 110,
          render: (text, recard) => {
            return (
              <div>
                {
                  recard.status == 4 &&
                  <Button
                    style={{ margin: 5 }}
                    type="primary"
                    onClick={() => {
                      this.setState({
                        vipVisible: true,
                        dataInfor: recard,
                      })
                    }}
                  >
                    重新提交
                  </Button>
                }
                <Button
                  type="primary"
                  style={{ margin: 5 }}
                  onClick={(e) => {
                    e.stopPropagation();
                    let arr = text || [];
                    this.setState({
                      pictureUrlArr: splitUrl(arr, ",", globalConfig.avatarHost + "/upload"),
                    }, () => {
                      this.setState({
                        imgListVisible: true,
                      })
                    })
                  }}
                >
                  查看附件
                </Button>
                <VipLogs id={recard.id} />
              </div>
            );
          },
        },
      ],
      dataSource: [],
      fjlist: [],// 营销员列表
      checkOrderNo: "",//操作订单编号
      checkData: "",//操作描述
      checkVisible: "",//审核弹窗开关
      checkId: "",//会员项目编号
      result: -1,//1同意 0驳回
      vipVisible: false,//编辑弹窗
      dataInfor: {},//编辑的数据
      imgListVisible: false,//附件弹窗
      pictureUrlArr: [],//附件
    };
  },

  componentWillMount() {
    this.loadData();
    // this.departmentList();
  },
  // 关闭编辑弹窗
  vipClose() {
    this.setState({
      vipVisible: false
    }, () => {
      this.loadData(this.state.pageNo);
    })
  },
  // 获取订单部门
  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)
    );
  },
  // 列表数据
  loadData(pageNo, pageSize) {
    const { searchValues, pagination } = this.state
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pageSize || 10,
      shiroType: 1, //营销员
      type: this.state.approvaType.length > 0 ? this.state.approvaType.toString() : undefined, //特批类型
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/memberList",
      data: datas,
      success: function (data) {
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data.list,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
              totalPage: data.data.totalPage,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  // 点击行
  tableRowClick(record) {
    this.state.RowData = record;
    this.setState({
      showDesc: true,
    });
  },
  // 关闭
  closeDesc(e, s) {
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.pageNo);
    }
  },
  // 搜索
  search() {
    this.setState({
      selectedRowKeys: []
    })
    this.loadData();
  },
  // 重置
  reset() {
    this.setState({
      searchValues: JSON.parse(JSON.stringify({})),
      approvaType: [],
    }, () => {
      this.Cascaders.empty();
      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,
    });
  },
  // 导出当前列表
  exportAll() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let data = {
      shiroType: 1, //我的
      type: this.state.approvaType.length > 0 ? this.state.approvaType.toString() : undefined, //特批类型

    };
    let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
    data = Object.assign(data, obj1);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/orderProject/memberList/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({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  },
  // 打印
  printAll() {
    this.setState({
      dvisible: true,
    });
    this.loadData(1, 9999999);
  },
  // 下载
  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  },
  // 查询订单负责人列表
  followUp(e) {
    const { searchValues } = this.state;
    this.setState({
      searchValues: Object.assign(searchValues, {
        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, {
        salesmanId: newdataSources.find((item) => item.name == value).id,
      }),
    });
  },
  // 失去焦点
  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  },
  // 删除数组最后一项（删除操作列）
  truncate(arr) {
    return arr.filter(function (v, i, ar) {
      return i !== ar.length - 1
    })
  },

  render() {
    const { TextArea } = Input
    const { searchValues, departmentArr = [] } = this.state
    const dataSources = this.state.fjlist || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const approvaChildren = approvalOptions.map(i => (
      <Option key={i.value}>{i.label}</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" onChange={this.callback} className="test">
          <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="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Input
                placeholder="订单编号"
                value={searchValues["orderNo"]
                  ? searchValues["orderNo"]
                  : ""}
                onChange={(e) => {
                  searchValues["orderNo"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Input
                placeholder="合同编号"
                value={searchValues["contractNo"]
                  ? searchValues["contractNo"]
                  : ""}
                onChange={(e) => {
                  searchValues["contractNo"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Input
                placeholder="客户名称"
                value={searchValues["userName"]
                  ? searchValues["userName"]
                  : ""}
                onChange={(e) => {
                  searchValues["userName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Cascaders
                ref={node => this.Cascaders = node}
                placeholder="订单部门"
                id="id"
                name="name"
                children="list"
                height={28}
                onSel={(e) => {
                  searchValues["deps"] = JSON.stringify(e);
                  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,
                  });
                }}
              >
                {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: "120px" }}
                dataSource={options}
                placeholder="订单负责人"
                value={searchValues.aname || undefined}
                onChange={this.followUp.bind(this)}
                filterOption={true}
                onSelect={this.selectF.bind(this)}
              >
                <Input />
              </AutoComplete>
              <Input
                placeholder="项目名称"
                value={searchValues["projectName"]
                  ? searchValues["projectName"]
                  : ""}
                onChange={(e) => {
                  searchValues["projectName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Select
                style={{ width: 120 }}
                placeholder="签单金额"
                value={searchValues["amountStatus"]
                  ? searchValues["amountStatus"]
                  : undefined}
                onChange={(e) => {
                  searchValues["amountStatus"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="0">10万元以下</Option>
                <Option value="1">10~20万元</Option>
                <Option value="2">20~30万元</Option>
                <Option value="3">30~40万元</Option>
                <Option value="4">40万元以上</Option>
              </Select>
              <Select
                style={{ width: 100 }}
                placeholder="特批状态"
                value={searchValues["approval"]
                  ? searchValues["approval"]
                  : undefined}
                onChange={(e) => {
                  searchValues["approval"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="0">非特批</Option>
                <Option value="1">特批待审</Option>
                <Option value="2">特批通过</Option>
                <Option value="4">全部特批</Option>
              </Select>
              <Select
                style={{ width: 100 }}
                placeholder="审核状态"
                value={searchValues["status"]
                  ? searchValues["status"]
                  : undefined}
                onChange={(e) => {
                  searchValues["status"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="1">财务审核</Option>
                <Option value="2">特批审核</Option>
                <Option value="3">通过</Option>
                <Option value="4">驳回</Option>
                <Option value="5">全部</Option>
              </Select>
              <Select
                mode="multiple"
                style={{ width: 200 }}
                placeholder="特批类型"
                value={this.state.approvaType}
                onChange={e => {
                  this.setState({
                    approvaType: e
                  })
                }}
              >
                {approvaChildren}
              </Select>
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
                disabled={this.state.loading ? true : false}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="打印" key="3">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={this.printAll}
            >
              打印当前列表
            </Button>
          </TabPane>
          <TabPane tab="导出Excel" key="4">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={this.exportAll}
            >
              导出当前列表
            </Button>
          </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={this.state.pagination}
              onRowDoubleClick={this.tableRowClick.bind(this)}
              size="small"
            />
          </Spin>
        </div>
        <textarea id="copyText" style={{ opacity: 0 }} />
        {/* 订单详情 */}
        <OrderDesc
          data={this.state.RowData}
          showDesc={this.state.showDesc}
          closeDesc={this.closeDesc.bind(this)}
        />
        {
          //打印预览
          this.state.dvisible &&
          <Modal
            visible={this.state.dvisible}
            footer=""
            title="所有列表信息"
            className="admin-desc-content"
            width="1300px"
            onCancel={() => {
              this.loadData();
              this.setState({
                dvisible: false,
              });
            }}
          >
            <Spin spinning={this.state.loading}>
              <div
                className="patent-table"
                style={{
                  padding: "25px 0 30px 30px",
                }}
                ref={(e) => {
                  this.refs.all = e;
                }}
              >
                <Table
                  columns={this.truncate(this.state.columns)}
                  dataSource={this.state.dataSource}
                  pagination={false}
                  bordered
                  size="small"
                />
              </div>
            </Spin>
            <ReactToPrint
              trigger={() => (
                <Button
                  type="primary"
                  style={{
                    float: "right",
                    marginTop: 10,
                    position: "absolute",
                    top: 0,
                    right: 30,
                  }}
                >
                  打印
                </Button>
              )}
              content={() => this.refs.all}
            />
          </Modal>
        }
        {
          // 会员项目添加编辑
          this.state.vipVisible &&
          <ProjectOperationVip
            readOnly={false}
            orderNo={this.state.dataInfor.orderNo}
            visible={this.state.vipVisible}
            dataInfor={this.state.dataInfor}
            onCancel={this.vipClose}
          />
        }
        {
          //查看附件
          this.state.imgListVisible &&
          <Modal
            maskClosable={false}
            visible={this.state.imgListVisible}
            onOk={() => {
              this.setState({
                imgListVisible: false,
              });
            }}
            onCancel={() => {
              this.setState({
                imgListVisible: false,
              });
            }}
            width="600px"
            title="附件"
            footer=""
          >
            <div>
              <ImgList
                fileList={this.state.pictureUrlArr}
                domId="publicStatistics"
              />
            </div>
          </Modal>
        }
      </div>
    );
  },
});

export default MyProjectVip;