kede-client/js/component/manageCenter/set/amoeba/barList.jsx

import React, { Component } from "react";
import { Button, Modal, Form, AutoComplete, TreeSelect, Input, message, Spin, Select, Tabs, Table, } from "antd";
import $ from "jquery/src/ajax";
import { ShowModal, getBarLevel } from "@/tools";
import './index.less'
import ShowModalDiv from "@/showModal.jsx";
import { ChooseList } from "../../order/orderNew/chooseList";
import Operation from "./operation"

const { TabPane } = Tabs;
const FormItem = Form.Item;
const confirm = Modal.confirm;

class Source extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: '', // 弹窗控制
      level1Data: [], // 体系数据
      searchValues: {}, // 列表筛选条件
      lvl: 5, // 层级
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      loading: false, //加载动画
      changeList: undefined, // 更改后的表格显示数据
      dataSource: [], // 列表数据
      selectedRowKeys: [], // 选中列表数据
      selectedRows: [], // 选中列表数据
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
          width: "8%",
          render: (text, record) =>
            <span>
              {text + (getBarLevel(record.ancestorsNames)[4] != "" ? ("（" + getBarLevel(record.ancestorsNames)[4] + "）") : "")}
            </span>
        },
        {
          title: "巴主",
          dataIndex: "leaderName",
          key: "leaderName",
          width: "8%",
        },
        {
          title: "各战区&区事业部",
          dataIndex: "name4",
          key: "name4",
          width: "8%",
          render: (text, record) =>
            <span >
              {getBarLevel(record.ancestorsNames)[3]}
            </span>
        },
        {
          title: "各事业部&区经管开综",
          dataIndex: "name3",
          key: "name3",
          width: "8%",
          render: (text, record) =>
            <span >
              {getBarLevel(record.ancestorsNames)[2]}
            </span>
        },
        {
          title: "各大区管理中心&集团经开综",
          dataIndex: "name2",
          key: "name2",
          render: (text, record) =>
            <span >
              {getBarLevel(record.ancestorsNames)[1]}
            </span>
        },
        {
          title: "管理中心",
          dataIndex: "name1",
          key: "name1",
          width: "8%",
          render: (text, record) =>
            <span >
              {getBarLevel(record.ancestorsNames)[0]}
            </span>
        },
        {
          title: "财务",
          dataIndex: "financeName",
          key: "financeName",
          width: "8%",
        },
        {
          title: "会计",
          dataIndex: "accountantName",
          key: "accountantName",
          width: "8%",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text) =>
            <span style={{ color: ["green", "red"][text] }}>
              {text == 0
                ? "正常" : text == 1
                  ? "停用" : "-"}
            </span>
        },
        {
          title: "创建时间",
          dataIndex: "createTimes",
          key: "createTimes",
        },
        {
          title: "操作",
          dataIndex: "opt",
          key: "opt",
          render: (text, record) =>
            <div>
              <Button
                type="primary"
                style={{ marginRight: "10px" }}
                onClick={() => {
                  this.setState({
                    visible: "edit",
                    id: record.id
                  })
                }}
              >
                编辑
              </Button>
              <Button
                type="danger"
                style={{ marginRight: "10px" }}
                onClick={() => {
                  let _this = this
                  confirm({
                    title: '提醒',
                    content: '确定要删除吗?',
                    onOk() {
                      _this.delete(record.id)
                    }
                  })
                }}
              >
                删除
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.editStatus(record.id, record.status == 0 ? 1 : 0)
                }}
              >
                {record.status == 0 ? "停用" : "启用"}
              </Button>
            </div>
        },
      ],
    };
    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.blurChange = this.blurChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  // 修改状态
  editStatus(id, num) {
    this.setState({
      loading: true
    })
    let data = {
      id,
      status: num
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/amb/update",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          message.success("操作成功！");
          this.loadData();
        } else {
          message.warning(data.error[0].message);
        }
        this.setState({
          loading: false,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  // 根据id获取子集
  getSubset(id, list, key = "id", valus = "list") {
    let newList = [];
    if (!list) {
      return newList
    }
    list.forEach((item) => {
      if (item[key] == id) {
        newList = item[valus]
      }
    })
    return newList
  }
  // 筛选数据
  getList() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/amb/selectAll",
      success: function (data) {
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          let menuList = data.data
          this.setState({
            level1Data: menuList ? this.handleTreeData(menuList) : []
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  // 树状默认数据处理
  handleTreeData(treeData) {
    let nodeDta = [];
    treeData.map(item => {
      let treeObj = {};
      treeObj.key = item.id
      treeObj.id = item.id
      treeObj.value = item.id
      treeObj.label = item.name
      treeObj.title = item.name
      treeObj.lvl = item.lvl
      treeObj.parentId = item.parentId
      item.list ? treeObj.children = this.handleTreeData(item.list) : null;
      nodeDta.push(treeObj)
    })
    return nodeDta
  }
  // 更改表格显示数据
  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(
      {
        auto: "",
        searchValues: JSON.parse(JSON.stringify({})),
        lvl: 5,
        selectedRowKeys: [],
        selectedRows: [],
      },
      () => {
        this.loadData();
      }
    );
  }
  // 搜索
  submit() {
    this.setState({
      params: this.state.searchValues
    })
    this.loadData()
  }
  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination, lvl } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
      lvl,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/amb/select",
      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)
    );
  }
  // 查询用户
  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 () {

      }.bind(this)
    );
  }
  // 输入触发
  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  }
  // 选中
  selectAuto(value, options) {
    const { searchValues } = this.state
    let contactLists = this.state.customerArr || [];
    if (value) {
      contactLists.map(function (item) {
        if (item.name == value.toString()) {
          searchValues["leader"] = item.id;
        }
      });
    }
    this.setState({
      auto: value,
      searchValues: searchValues,
    });
  }
  // 失去焦点
  blurChange(e) {
    const { searchValues } = this.state
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          searchValues["leader"] = item.id;
        }
      });
    }
    this.setState({
      searchValues: searchValues,
    });
  }
  // 选择行
  onSelectChange(selectedRowKeys, selectedRows) {
    this.setState({ selectedRowKeys, selectedRows });
  }
  // 删除巴
  delete(id) {
    this.setState({
      loading: true,
    })
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/amb/delete",
      data: { id },
      success: function (data) {
        if (data.error.length) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message)
          }
        } else {
          message.success('删除成功');
          this.getList();
          this.loadData();
          this.setState({
            selectedRowKeys: [],
            selectedRows: [],
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        })
      }.bind(this)
    );
  }
  // 关闭弹窗
  handleCancel() {
    this.setState({
      visible: "",
      id: "",
    }, () => {
      this.getList();
      this.loadData();
    })
  }

  componentWillMount() {
    this.getList();
    this.loadData();
  }

  render() {
    const { searchValues, columns, selectedRowKeys, selectedRows, changeList, level1Data } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
      hideDefaultSelections: true,
      type: "radio",
    };
    const dataSources = this.state.customerArr || [];
    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="1" onChange={() => { }}>
          <TabPane tab="搜索" key="1">
            <div style={{ padding: "0 10px" }}>
              <Form layout="inline">
                <FormItem>
                  <Input
                    placeholder="输入巴名称"
                    value={searchValues["name"]
                      ? searchValues["name"]
                      : ""}
                    onChange={(e) => {
                      searchValues["name"] = e.target.value;
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                </FormItem>
                <FormItem>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: 150 }}
                    dataSource={options}
                    placeholder='输入巴主名称'
                    value={this.state.auto}
                    onChange={this.httpChange}
                    filterOption={true}
                    onBlur={this.blurChange}
                    onSelect={this.selectAuto}
                  >
                    <Input />
                  </AutoComplete>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder="层级"
                    style={{ width: 150 }}
                    value={this.state.lvl}
                    onChange={(e) => {
                      this.setState({ lvl: e })
                    }}
                  >
                    <Select.Option value={1}>管理中心</Select.Option>
                    <Select.Option value={2}>各大区管理中心&集团经开综</Select.Option>
                    <Select.Option value={3}>各事业部&区经管开综</Select.Option>
                    <Select.Option value={4}>各战区&区事业部</Select.Option>
                    <Select.Option value={5}>各巴&小巴</Select.Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <TreeSelect
                    style={{ width: 300 }}
                    value={searchValues["ancestors"]
                      ? searchValues["ancestors"]
                      : undefined}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    treeData={level1Data}
                    placeholder="请选择"
                    showSearch
                    treeNodeFilterProp="title"
                    onChange={(e) => {
                      searchValues["ancestors"] = e;
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                </FormItem>
                <Button
                  type="primary"
                  onClick={() => { this.submit() }}
                  style={{ marginRight: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={() => { this.resetAll() }}
                  style={{ marginRight: "10px" }}
                >
                  重置
                </Button>
                <Button
                  type="primary"
                  onClick={() => { this.setState({ visible: "add" }) }}
                  style={{ float: "right" }}
                >
                  新增阿米巴架构
                </Button>
              </Form>
            </div>
          </TabPane>
          {/* <TabPane tab="操作" key="2">
            <div style={{ marginLeft: 10 }}>

            </div>
          </TabPane> */}
          <TabPane tab="更改表格显示数据" key="2">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={columns}
                changeFn={this.changeList.bind(this)}
                changeList={changeList}
                top={55}
              />
            </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.visible != "" &&
          <Operation
            visible={this.state.visible}
            handleCancel={this.handleCancel}
            levelData={this.state.level1Data}
            id={this.state.id}
            lev={5}
          />
        }
      </div>
    );
  }
}

export default Source;