kede-client/js/component/manageCenter/channelList/channelunit/index.jsx

// 私有渠道列表
import React, { Component } from "react";
import {
  Form,
  Button,
  message,
  Spin,
  Input,
  DatePicker,
  Select,
  Tabs,
  Table,
  Modal,
  AutoComplete,
} from "antd";
import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
import { provinceList } from "../../../NewDicProvinceList";
import $ from "jquery/src/ajax";
import { ShowModal } from "@/tools";
import moment from "moment";
import AddChannel from "./addchannel"; //新增渠道
import ChannelLog from "./channellog"; //转交日志
import ChangeLog from "./changelog"; //更名日志
import ChannelDetail from "./channeldetail"; //渠道详情
import FollowDetail from "../../../../component/manageCenter/customer/NEW/intentionCustomer/followDetail";//新增渠道跟进
import ShowModalDiv from "@/showModal.jsx";

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

class ChannelUnit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: { type: 1 },
      changeList: undefined,
      selectedRowKeys: [],
      selectedRows: [],//列表多选
      columns: [
        {
          title: "渠道名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "地区",
          dataIndex: "province",
          key: "province",
          width: 250,
          render: (text, record) => {
            return (record.province || "") + (!record.city ? "" : "-") + (record.city || "") + (!record.area ? "" : "-") + (record.area || "");
          },
        },
        {
          title: "渠道类别",
          dataIndex: "type",
          key: "type",
          width: 120,
          render: (text) =>
            [
              "",
              "其他",
              "民主党派",
              "园区",
              "民间组织",
              "战略合作单位",
            ][text],
        },
        {
          title: "初始时间",
          dataIndex: "transferTime",
          key: "transferTime",
          width: 160,
        },
        {
          title: "跟进人",
          dataIndex: "aName",
          key: "aName",
        },
        {
          title: "剩余天数",
          dataIndex: "remainingDays",
          key: "remainingDays",
          width: 80,
        },
        {
          title: "跟进操作",
          dataIndex: "op",
          key: "op",
          render: (text, record) => (
            record.type != 1 &&
            <Button
              type="primary"
              onClick={(e) => {
                e.stopPropagation();
                this.setState({
                  followData: record,
                  visitModuls: true,
                });
              }}
            >
              渠道跟进
            </Button >
          ),
        },
      ],
      dataSource: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      channeOb: [
        { name: "民主党派", val: 2 },
        { name: "园区", val: 3 },
        { name: "民间组织", val: 4 },
        { name: "战略合作单位", val: 5 },
        { name: "其他", val: 1 },
      ],
      fjlist: [], // 查询到的更进人列表
      loading: false,
      cityList: [],
      areaList: [],
      searchInfor: {}, // 查询条件
      mvisible: "", //控制弹窗变量
      customerArr: [], //查询到的转交人列表
      rowdata: {}, //双击行数据
      categoryArr: [],
      visitModuls: false,
    };
    this.tabelContentRef = null;
    this.autoCompleteSearchRef = {};
  }

  componentWillMount() {
    this.loadData();
    this.category();
  }
  //
  getVal(arr, val) {
    if (!val || arr.length == 0) {
      return undefined;
    } else {
      for (const items of arr) {
        if (items.id == val) {
          return items.name;
        }
      }
    }
  }
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }
  // 重置
  resetAll() {
    this.setState(
      {
        searchInfor: JSON.parse(JSON.stringify({})),
        selectedRowKeys: [],
        selectedRows: [],
        cityList: [],
        areaList: [],
        auto: "",
      },
      () => {
        this.loadData();
      }
    );
  }
  // 列表接口
  loadData(pageNo) {
    const { searchInfor, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchInfor, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/channelUserList",
      data: datas,
      success: function (data) {
        ShowModal(this);
        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,
            });
          } 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)
    );
  }
  //值改变时请求客户名称
  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  }
  // 指定转交人自动补全
  supervisor(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({
          customerArr: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  // 失去焦点
  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,
    });
  }
  // 选择行
  onSelectChange(selectedRowKeys, selectedRows) {
    this.setState({
      selectedRowKeys,
      selectedRows
    });
  }
  //
  addClick() {
    this.setState({
      mvisible: "add",
    });
  }
  // 关闭弹窗
  closeDesc() {
    this.setState({
      mvisible: "",
    });
    this.loadData(this.state.pageNo);
  }
  // 转交提示
  showConfirm() {
    const { selectedRows } = this.state;
    if (!this.state.theTypes) {
      message.warning("请输入转交人姓名");
      return;
    }
    let _this = this;
    Modal.confirm({
      title: "提示",
      content: (
        <span style={{ color: "red" }}>
          确定要转交以下渠道吗？
          {
            selectedRows.map((item, index) =>
              <div key={index} style={{ marginTop: "5px", color: "#000" }}>
                {item.name}
              </div>
            )
          }
        </span>
      ),
      onOk() {
        _this.setState({
          informationTransferVisible: true,
        });
      },
      onCancel() { },
    });
  }
  //转交
  changeAssigner(infor) {
    const { selectedRows } = this.state;
    if (this.state.theTypes) {
      this.setState({
        informationTransferVisible: false,
      });
      let changeIds = "";
      let oldAid = "";
      for (let idx = 0; idx < selectedRows.length; idx++) {
        let rowItem = selectedRows[idx];
        if (rowItem.id) {
          oldAid = rowItem.aid;
          changeIds =
            selectedRows.length - 1 === idx
              ? changeIds + rowItem.id
              : changeIds + rowItem.id + ",";
        }
      }
      let loading = message.loading("加载中...");
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/customer/transferToOther",
        data: {
          uid: changeIds, //这一行数据的ID
          aid: this.state.theTypes, //指定转交人的ID
          oldAid: oldAid, //原跟进人ID
          operatorType: 5,
          data: infor, // 资料是否一并转交 0否 1是
        },
      }).done(
        function (data) {
          loading();
          if (!data.error.length) {
            message.success("转交成功！");
            this.setState({
              auto: "",
              loading: false,
              selectedRowKeys: [],
              selectedRows: [],
            });
          } else {
            message.warning(data.error[0].message);
          }
          this.loadData(
            Math.min(
              this.state.pageNo == undefined ? 1 : this.state.pageNo,
              Math.ceil((this.state.pagination.total - 1) / 10)
            )
          );
        }.bind(this)
      );
    } else {
      message.warning("请输入转交人姓名");
    }
  }
  // 移出渠道
  remove() {
    const { dataSource, selectedRows, pageNo } = this.state;
    const _this = this
    Modal.confirm({
      title: "您确定将以下渠道移至公共渠道吗？？",
      content: (
        <span style={{ color: "red" }}>
          移除后，以下客户将被别人领取！
          {
            selectedRows.map((item, index) =>
              <div key={index} style={{ marginTop: "5px", color: "#000" }}>
                {item.name}
              </div>
            )
          }
        </span>
      ),
      onOk() {
        let deletedIds = "";
        for (var idx = 0; idx < selectedRows.length; idx++) {
          let rowItem = selectedRows[idx];
          if (rowItem.id) {
            deletedIds =
              selectedRows.length - 1 === idx
                ? deletedIds + rowItem.id
                : deletedIds + rowItem.id + ",";
          }
        }
        $.ajax({
          method: "get",
          dataType: "json",
          crossDomain: false,
          url: globalConfig.context + "/api/admin/customer/pushReleaseUser",
          data: {
            id: deletedIds,
          },
          success: function (data) {
            _this.setState({
              selectedRowKeys: [],
              selectedRows: [],
            });
            let thedata = data.data;
            if (!thedata) {
              if (data.error && data.error.length) {
                message.warning(data.error[0].message);
              }
              thedata = {};
            } else {
              message.success("移除成功");
            }
            _this.loadData(
              dataSource.length === 1
                ? pageNo === 1
                  ? 1
                  : pageNo - 1
                : pageNo
            )
          }.bind(this),
        }).always(
          function () {
            _this.setState({
              loading: false,
            });
          }.bind(this)
        );
      },
      onCancel() { },
    });
  }
  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  }
  // 跟进人查询
  followUp(e) {
    const { searchInfor } = this.state;
    this.setState({
      searchInfor: Object.assign(searchInfor, {
        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 { searchInfor, fjlist } = this.state;
    const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
    this.setState({
      searchInfor: Object.assign(searchInfor, {
        aid: newdataSources.find((item) => item.name == value).id,
      }),
    });
  }
  //品类数据获取
  category() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/Varieties/getSuperList",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              value: item.id,
              key: item.cname,
            });
          });
        }
        this.setState({
          categoryArr: theArr,
        });
      }.bind(this),
    });
  }
  //查看跟进记录列表
  loadVisit(pageNo) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listFollowHistory",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.paginations.pageSize,
        uid: this.props.data.id, //名称1
      },
      success: function (data) {
        let theArr = [];
        if (data.error.length || data.data.list == "") {
          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(thisdata);
          }
          this.state.paginations.current = data.data.pageNo;
          this.state.paginations.total = data.data.totalCount;
          this.setState({
            pageNo: data.data.pageNo,
          });
        }
        if (data.data.list && !data.data.list.length) {
          this.state.paginations.current = 0;
          this.state.paginations.total = 0;
        }
        this.setState({
          visitArrList: theArr,
          paginations: this.state.paginations,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  close() {
    this.setState({
      visitModuls: false,
    });
    this.loadData(this.state.pageNo);
  }

  render() {
    const {
      columns,
      selectedRowKeys,
      cityList,
      areaList,
      changeList,
      searchInfor,
      channeOb,
      dataSource,
    } = this.state;
    const rowSelection = {
      hideDefaultSelections: true,
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    const hasSelected = this.state.selectedRowKeys.length > 0;
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const newdataSources =
      JSON.stringify(this.state.fjlist) == "{}" ? [] : this.state.fjlist;
    const newoptions = newdataSources.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="1"
          onChange={() => {
            this.setState({ searchInfor: {} })
          }}
        >
          <TabPane tab="搜索" key="1">
            <div>
              <Form layout="inline">
                <FormItem>
                  <Input
                    placeholder={"请输入渠道名称"}
                    value={searchInfor.name || undefined}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          name: e.target.value,
                        }),
                      });
                    }}
                  />
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"选择省份"}
                    style={{ width: 100 }}
                    value={this.getVal(provinceList, searchInfor.province)}
                    onChange={(e) => {
                      for (const items of provinceList) {
                        if (items.id == e) {
                          this.setState({
                            cityList: items.cityList,
                            areaList: [],
                            searchInfor: Object.assign(searchInfor, {
                              province: items.id,
                              city: undefined,
                              area: undefined,
                            }),
                          });
                        }
                      }
                    }}
                  >
                    {provinceList.map((item, index) => (
                      <Option key={item.id}>{item.name}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"选择城市"}
                    style={{ width: 100 }}
                    value={this.getVal(cityList, searchInfor.city)}
                    onChange={(e) => {
                      for (const items of cityList) {
                        if (items.id == e) {
                          this.setState({
                            areaList: items.areaList,
                            searchInfor: Object.assign(searchInfor, {
                              city: items.id,
                              area: undefined,
                            }),
                          });
                        }
                      }
                    }}
                  >
                    {cityList.map((cit, cin) => (
                      <Option key={cit.id}>{cit.name}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"选择地区"}
                    style={{ width: 100 }}
                    value={this.getVal(areaList, searchInfor.area)}
                    onChange={(e) => {
                      for (const items of areaList) {
                        if (items.id == e) {
                          this.setState({
                            searchInfor: Object.assign(searchInfor, {
                              area: items.id,
                            }),
                          });
                        }
                      }
                    }}
                  >
                    {areaList.map((cit, cin) => (
                      <Option key={cit.id}>{cit.name}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: "120px" }}
                    dataSource={newoptions}
                    placeholder="跟进人"
                    value={searchInfor.aname || undefined}
                    onChange={this.followUp.bind(this)}
                    filterOption={true}
                    onSelect={this.selectF.bind(this)}
                  >
                    <Input />
                  </AutoComplete>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"渠道类型"}
                    style={{ width: 130 }}
                    value={searchInfor.type || undefined}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          type: e,
                        }),
                      });
                    }}
                  >
                    {channeOb.map((it, ins) => (
                      <Option key={it.val}>{it.name}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <RangePicker
                    value={[
                      searchInfor.startDate
                        ? moment(searchInfor.startDate)
                        : null,
                      searchInfor.endDate ? moment(searchInfor.endDate) : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          startDate: dataString[0],
                          endDate: dataString[1],
                        }),
                      });
                    }}
                  />
                </FormItem>
                <Button
                  type="primary"
                  onClick={() => {
                    this.loadData();
                  }}
                  style={{ marginRight: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={this.resetAll.bind(this)}
                  style={{ marginRight: "10px" }}
                >
                  重置
                </Button>
                <Button
                  type="primary"
                  onClick={this.addClick.bind(this)}
                  style={{ display: "float", float: "right" }}
                >
                  新增渠道
                </Button>
              </Form>
            </div>
          </TabPane>
          <TabPane tab="操作" key="2">
            <div
              style={{
                marginLeft: 10,
                paddingBottom: 10,
                display: "flex",
              }}
            >
              <div style={{ flex: 1 }}>
                <AutoComplete
                  className="certain-category-search"
                  dropdownClassName="certain-category-search-dropdown"
                  dropdownMatchSelectWidth={false}
                  style={{ width: "120px" }}
                  dataSource={options}
                  placeholder="输入转交人姓名"
                  value={this.state.auto}
                  onChange={this.httpChange.bind(this)}
                  filterOption={true}
                  onBlur={this.blurChange.bind(this)}
                  onSelect={this.selectAuto.bind(this)}
                  disabled={!hasSelected}
                >
                  <Input />
                </AutoComplete>
                <Button
                  type="primary"
                  onClick={this.showConfirm.bind(this)}
                  style={{ marginLeft: 10 }}
                  disabled={!hasSelected}
                >
                  转交
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      mvisible: "channellog",
                    });
                  }}
                  style={{ marginLeft: "10px" }}
                  disabled={this.state.selectedRowKeys.length !== 1}
                >
                  渠道日志
                </Button>
                <Button
                  type="primary"
                  onClick={this.remove.bind(this)}
                  style={{ marginLeft: "10px" }}
                  disabled={!hasSelected}
                >
                  移出渠道
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      mvisible: "changelog",
                    });
                  }}
                  style={{ marginLeft: "10px" }}
                  disabled={this.state.selectedRowKeys.length !== 1}
                >
                  更改日志
                </Button>
              </div>
              <Button
                type="primary"
                onClick={this.addClick.bind(this)}
                style={{ marginLeft: "10px" }}
              >
                新增渠道
              </Button>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="3">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={columns}
                changeFn={this.changeList.bind(this)}
                changeList={changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              size="middle"
              columns={changeList ? changeList : columns}
              onRowDoubleClick={(e) => {
                this.setState({
                  mvisible: "detail",
                  rowdata: e,
                });
              }}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              rowSelection={rowSelection}
            />
          </Spin>
        </div>
        {this.state.informationTransferVisible && (
          <Modal
            visible={this.state.informationTransferVisible}
            title="提醒"
            onCancel={() => {
              this.setState({
                informationTransferVisible: false,
              });
            }}
            footer={[
              <Button
                key="1"
                size="large"
                type={"primary"}
                onClick={() => {
                  this.changeAssigner(1);
                }}
              >
                需要
              </Button>,
              <Button
                key="2"
                size="large"
                type={"danger"}
                onClick={() => {
                  this.changeAssigner(0);
                }}
              >
                不需要
              </Button>,
            ]}
          >
            请确定，是否将客户资料一并转交！选择“需要”，系统将全部客户资料一并转交！选择“不需要”，原客户资料保存您的客户资料中，请注意客户资料的更新维护，谢谢
          </Modal>
        )}
        {this.state.mvisible == "add" && (
          <AddChannel
            showDesc={this.state.mvisible}
            closeDesc={this.closeDesc.bind(this)}
          />
        )}
        {this.state.mvisible == "channellog" && (
          <ChannelLog
            cancel={this.closeDesc.bind(this)}
            visible={this.state.mvisible}
            id={dataSource[selectedRowKeys[0]].id}
          />
        )}
        {this.state.mvisible == "changelog" && (
          <ChangeLog
            cancel={this.closeDesc.bind(this)}
            visible={this.state.mvisible}
            id={dataSource[selectedRowKeys[0]].id}
          />
        )}
        {this.state.mvisible == "detail" && (
          <ChannelDetail
            cancel={this.closeDesc.bind(this)}
            visible={this.state.mvisible}
            IntentionData={this.state.rowdata}
            categoryArr={this.state.categoryArr}
          />
        )}
        <FollowDetail
          categoryArr={this.state.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModuls}
          closeDesc={this.close.bind(this)}
          loadData={this.loadVisit.bind(this)}
        />
      </div>
    );
  }
}

export default ChannelUnit;