kede-client/js/component/manageCenter/channelList/channelunit/publist.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: [],
      columns: [
        {
          title: "渠道名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "地区",
          dataIndex: "province",
          key: "province",
          render: (text, record) => {
            return (record.province || "") + " " + (record.city || "") + " " + (record.area || "");
          },
        },
        {
          title: "渠道类别",
          dataIndex: "type",
          key: "type",
          width: 200,
          render: (text) =>
            [
              "",
              "其他",
              "民主党派",
              "园区",
              "民间组织",
              "战略合作单位",
            ][text],
        },
        {
          title: "初始时间",
          dataIndex: "transferTime",
          key: "transferTime",
          width: 200,
        },
        {
          title: "操作",
          dataIndex: "op",
          key: "op",
          render: (text, record) => (

            <Button
              type="primary"
              onClick={(e) => {
                e.stopPropagation(), this.receive(record);
              }}
            >
              领取
            </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: "", //控制弹窗变量
    };

  }

  componentWillMount() {
    this.loadData();
  }
  /*单个领取*/
  receive(e) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/receiveCustomer",
      data: {
        uid: e.id,
      },
    }).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)
    );
  }
  //
  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: [],
        cityList: [],
        areaList: [],
      },
      () => {
        this.loadData();
      }
    );
  }
  // 列表接口
  loadData(pageNo) {
    const { searchInfor, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchInfor, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    // delete datas.aname
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/publicChannelUserList",
      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)
    );
  }
  // 选择行
  onSelectChange(selectedRowKeys) {
    this.setState({ selectedRowKeys });
  }
  // 关闭弹窗
  closeDesc() {
    this.setState({
      mvisible: "",
    });
    this.loadData(this.state.pageNo);
  }

  render() {
    const {
      columns,
      selectedRowKeys,
      cityList,
      areaList,
      changeList,
      searchInfor,
      channeOb,
      dataSource,
    } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
      hideDefaultSelections: true,
      type: "radio",
    };

    const hasSelected = this.state.selectedRowKeys.length > 0;
    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" >
          <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>
                  <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>
              </Form>
            </div>
          </TabPane>
          <TabPane tab="操作" key="2">
            <div
              style={{
                marginLeft: 10,
                paddingBottom: 10,
                display: "flex",
              }}
            >
              <div style={{ flex: 1 }}>
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      mvisible: "channellog",
                    });
                  }}
                  style={{ marginLeft: "10px" }}
                  disabled={!hasSelected}
                >
                  渠道日志
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      mvisible: "changelog",
                    });
                  }}
                  style={{ marginLeft: "10px" }}
                  disabled={!hasSelected}
                >
                  更改日志
                </Button>
              </div>
            </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}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              rowSelection={rowSelection}
            />
          </Spin>
        </div>
        {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}
          />
        )}
      </div>
    );
  }
}

export default ChannelUnit;