kede-client/js/component/manageCenter/project/summary/highTech.jsx

import React, { Component } from "react";
import {
  Button,
  DatePicker,
  Input,
  message,
  Select,
  Spin,
  Table,
  Tabs,
  Cascader,
  AutoComplete,
} from "antd";
import { ShowModal, getApprovedType } from "@/tools";
import { ChooseList } from "../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import moment from "moment";
import {
  member,
  highTechColumns,
  doubleSoft,
  softWriting,
  patent,
  audit,
  currency,
} from "./highTechConfig";
import { projectStatusList, approvalOptions } from "@/dataDic";
import ProjectDetails from "./projectDetails";
import Cascaders from "../../../common/cascaders";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;

class HighTech extends Component {
  constructor(props) {
    super(props);
    this.state = {
      approvaType: [],
      tbaindex: 1,
      loading: false,
      changeList: undefined,
      columns: currency,
      status: 0,
      page: 1,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      dataSource: [],
      releaseDate: [],
      searchOrderNo: "",
      searchContractNo: "",
      searchEnterpriseName: "",
      declarationBatch: "",
      projectSituation: "",
      projectAmount: "",
      deps: "",
      thchDeps: "",
      projectType: "",
      projectStatus: "",
      departmentArr: [],
      contactsOption: [],
      contactsOptionData: [],
      visible: false,
    };
    this.resetAll = this.resetAll.bind(this);
    this.changeList = this.changeList.bind(this);
    this.loadData = this.loadData.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);

    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.blurChange = this.blurChange.bind(this);

  }

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }

  loadData(pageNo = "") {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistis/selectTaskList",
      data: this.props.searchData
        ? Object.assign(
          {
            pageNo: pageNo || 1,
            pageSize: this.state.pagination.pageSize || 10,
          },
          this.props.searchData
        )
        :
        {
          pageNo: pageNo || 1,
          pageSize: this.state.pagination.pageSize || 10,
          startDate:
            this.state.releaseDate.length > 0
              ? this.state.releaseDate[0]
              : undefined, //开始时间
          endDate:
            this.state.releaseDate.length > 0
              ? this.state.releaseDate[1]
              : undefined, //结束时间
          deps: this.state.deps || undefined, //部门ID
          thchDeps: this.state.thchDeps || undefined, //责任部门ID
          projectStatus: this.state.projectStatus || undefined, //项目类别
          projectType: !this.state.projectType ? undefined : this.state.projectType, //项目分类
          orderNo: this.state.searchOrderNo || undefined, //订单编号
          contractNo: this.state.searchContractNo || undefined, //合同编号
          userName: this.state.searchEnterpriseName || undefined, //企业名称
          declarationBatch: this.state.declarationBatch || undefined, //申报批次
          projectSituation:
            typeof this.state.projectSituation === "number"
              ? this.state.projectSituation
              : undefined, //项目分类
          projectAmount: this.state.projectAmount || undefined, //项目金额
          status: this.state.status,
          thchId: this.state.thchId || undefined, //咨询师/咨询经理id
          taskProjectStatus: this.state.taskProjectStatus || undefined,//项目状态
          sdStatus: this.state.sdStatus,//满意度
          type: this.state.approvaType.length > 0 ? this.state.approvaType.toString() : undefined, //特批类型
        },
      success: function (data) {
        ShowModal(this);
        let theArr = [];
        if (!data.data || !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];
            thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1;
            theArr.push(thisdata);
          }
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
          if (data.data && data.data.list && !data.data.list.length) {
            this.state.pagination.current = 0;
            this.state.pagination.total = 0;
          }
          this.setState({
            pagination: this.state.pagination,
            page: pageNo,
            dataSource: theArr,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  resetAll() {
    this.setState(
      {
        newArray: [],
        releaseDate: [],
        searchOrderNo: "",
        searchContractNo: "",
        searchEnterpriseName: "",
        declarationBatch: "",
        projectSituation: "",
        projectAmount: "",
        projectType: "",
        deps: "",
        thchDeps: "",
        projectStatus: "",
        columns: currency,
        status: 0,
        thchId: "",
        auto: "",
        taskProjectStatus: "",
        sdStatus: undefined,
        approvaType: [],
      },
      () => {
        this.Cascaders1.empty();
        this.Cascaders2.empty();
        this.defaultcolumns();
        // this.loadData();
      }
    );
  }
  //项目类别
  selectSuperId() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/ProjectSize/getAllCname",
      data: {
        flag: 0,
      },
      success: function (data) {
        let theArr = [];
        let newTheArr = []
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        }
        for (let i = 0; i < data.data.length; i++) {
          let theData = data.data[i];
          theArr.push(
            <Select.Option value={theData.id} key={theData.cname}>
              {theData.cname}
            </Select.Option>
          );
          let newChildren = []
          for (let j = 0; j < theData.typeList.length; j++) {
            newChildren.push({
              label: theData.typeList[j].name,
              value: theData.typeList[j].id,
            })
          }
          newTheArr.push({
            label: theData.cname,
            value: theData.id,
            children: newChildren
          })
        }
        this.setState({
          contactsOption: theArr,
          contactsOptionData: newTheArr,
          // contactsOptionData: data.data,
        });
      }.bind(this),
    }).always();
  }
  // 设置默认table（用来默认不显示某列数据 isNoD:true）
  defaultcolumns() {
    const newArr = [];
    this.state.columns.forEach((item) => {
      if (item.isNoD) {
        return
      } else {
        newArr.push(item);
      }
    });
    this.setState({
      changeList: newArr,
    }, () => {
      this.loadData();
    });
  }
  // 导出excel
  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let data = {
      startDate:
        this.state.releaseDate.length > 0
          ? this.state.releaseDate[0]
          : undefined, //开始时间
      endDate:
        this.state.releaseDate.length > 0
          ? this.state.releaseDate[1]
          : undefined, //结束时间
      deps: this.state.deps || undefined, //部门ID
      thchDeps: this.state.thchDeps || undefined, //责任部门ID
      projectStatus: this.state.projectStatus || undefined, //项目类别
      projectType: !this.state.projectType ? undefined : this.state.projectType, //项目分类
      status: this.state.status,
      orderNo: this.state.searchOrderNo || undefined, //订单编号
      contractNo: this.state.searchContractNo || undefined, //合同编号
      userName: this.state.searchEnterpriseName || undefined, //企业名称
      declarationBatch: this.state.declarationBatch || undefined, //申报批次
      projectAmount: this.state.projectAmount || undefined, //项目金额
      thchId: this.state.thchId || undefined, //咨询师/咨询经理id
      taskProjectStatus: this.state.taskProjectStatus || undefined,//项目状态
      sdStatus: this.state.sdStatus,//满意度
      type: this.state.approvaType.length > 0 ? this.state.approvaType.toString() : undefined, //特批类型
    };
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/statistis/exporTaskList",
      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)
    );
  }
  // 下载
  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  }
  // 查询用户
  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) {
    let thchId = ""
    let contactLists = this.state.customerArr || [];
    if (value) {
      contactLists.map(function (item) {
        if (item.name == value.toString()) {
          thchId = item.id;
        }
      });
    }
    this.setState({
      auto: value,
      thchId: thchId,
    });
  }
  // 失去焦点
  blurChange(e) {
    let thchId = ""
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          thchId = item.id;
        }
      });
    }
    this.setState({
      thchId: thchId,
    });
  }

  componentWillMount() {
    // 
    if (!this.props.introduce) {
      this.defaultcolumns();
      this.selectSuperId();
    }
    if (this.props.searchData) {
      let e = this.props.searchData.projectType;
      this.setState({
        columns:
          e == "0"
            ? currency : e == "1"
              ? patent : e == "2"
                ? softWriting : e == "3"
                  ? audit : e == "4"
                    ? doubleSoft : e == "5"
                      ? highTechColumns : e == "6"
                        ? currency : e == "7"
                          ? member : currency,
      }, () => {
        this.defaultcolumns();
      });
    }
  }

  // 暂停项目 颜色
  suspendColor(record) {
    if (record.projectStatus == 29) {
      return 'light'
    } else {
      return 'dark'
    }
  }

  render() {
    const dataSources = this.state.customerArr || [];
    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">
        {this.props.introduce ? (
          this.props.introduce()
        ) : (
          <div>
            <div className="content-title" style={{ marginBottom: 10 }}>
              <span style={{ fontWeight: 900, fontSize: 16 }}>
                项目汇总表 (
                {this.state.status === 1
                  ? "高新" : this.state.status === 2
                    ? "双软" : this.state.status === 3
                      ? "软著" : this.state.status === 4
                        ? "专利" : this.state.status === 5
                          ? "会员" : this.state.status === 6
                            ? "审计" : "通用"}
                )
              </span>
            </div>
            <Tabs defaultActiveKey="1" className="test"
              onChange={e => {
                this.setState({
                  tbaindex: e
                })
              }}
            >
              <TabPane tab="搜索" key="1">
                <div
                  className="user-search"
                  style={{
                    marginTop: "10px",
                    marginLeft: "10px",
                    marginRight: "10px",
                  }}
                >
                  <Input
                    placeholder="订单编号"
                    style={{
                      width: 220,
                      marginRight: "10px",
                    }}
                    value={this.state.searchOrderNo}
                    onChange={(e) => {
                      this.setState({ searchOrderNo: e.target.value });
                    }}
                  />
                  <Input
                    placeholder="合同编号"
                    style={{
                      width: 220,
                      marginRight: "10px",
                    }}
                    value={this.state.searchContractNo}
                    onChange={(e) => {
                      this.setState({ searchContractNo: e.target.value });
                    }}
                  />
                  <Input
                    placeholder="企业名称"
                    style={{
                      width: 220,
                      marginRight: "10px",
                    }}
                    value={this.state.searchEnterpriseName}
                    onChange={(e) => {
                      this.setState({ searchEnterpriseName: e.target.value });
                    }}
                  />
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>项目分类:</span>
                    <Cascader
                      options={this.state.contactsOptionData}
                      value={this.state.newArray}
                      placeholder="请选择"
                      style={{ width: 150, marginRight: 10 }}
                      onChange={(e, pre) => {
                        let first = e[0];
                        let two = e[1];
                        this.setState({
                          newArray: e,
                          projectStatus: first,
                          projectType: two,
                          changeList: undefined,
                          dataSource: [],
                          status:
                            two == "4"
                              ? 2 : two == "3"
                                ? 6 : two == "2"
                                  ? 3 : two == "1"
                                    ? 4 : two == "5"
                                      ? 1 : two == "7"
                                        ? 5 : 0,
                          columns:
                            two == "0"
                              ? currency : two == "1"
                                ? patent : two == "2"
                                  ? softWriting : two == "3"
                                    ? audit : two == "4"
                                      ? doubleSoft : two == "5"
                                        ? highTechColumns : two == "6"
                                          ? currency : two == "7"
                                            ? member : currency,
                        }, () => {
                          this.defaultcolumns()
                        })
                      }}
                    />
                  </span>
                  {/* <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>
                      项目类别 :
                    </span>
                    <Select
                      value={this.state.projectStatus || undefined}
                      placeholder="请选择项目类别"
                      notFoundContent="未获取到上级品类列表"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        let infor = this.state.contactsOptionData.filter(
                          (v) => v.id === e
                        );
                        this.setState(
                          {
                            projectStatus: e,
                          },
                          // () => {
                          //   if (infor[0].cname === '高新会员服务' && typeof this.state.projectType !== 'number') {
                          //     this.setState({
                          //       columns: highTechColumns,
                          //       dataSource: [],
                          //       changeList: [],
                          //       status: 1,
                          //     }, () => {
                          //       this.loadData();
                          //     })
                          //   } else if (typeof this.state.projectType !== 'number') {
                          //     this.setState({
                          //       columns: currency,
                          //       dataSource: [],
                          //       changeList: [],
                          //       status: 0,
                          //     }, () => {
                          //       this.loadData();
                          //     })
                          //   } else {
                          //     this.loadData();
                          //   }
                          // }
                        );
                      }}
                    >
                      {this.state.contactsOption}
                    </Select>
                  </span>
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px", marginBottom: "10px" }}>
                      项目分类 :
                    </span>
                    <Select
                      value={
                        typeof this.state.projectType === "number"
                          ? this.state.projectType
                          : undefined
                      }
                      placeholder="请选择项目分类"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        this.setState(
                          {
                            columns:
                              e === 0
                                ? currency : e === 1
                                  ? patent : e === 2
                                    ? softWriting : e === 3
                                      ? currency : e === 4
                                        ? doubleSoft : e === 5
                                          ? highTechColumns : e === 6
                                            ? currency : currency,
                            changeList: [],
                            projectType: e,
                            status:
                              e === 4
                                ? 2 : e === 2
                                  ? 3 : e === 1
                                    ? 4 : e === 5
                                      ? 1 : 0,
                            dataSource: [],
                          },
                          () => {
                            this.defaultcolumns();
                            this.loadData();
                          }
                        );
                      }}
                    >
                      <Option value={0}>通用</Option>
                      <Option value={1}>专利</Option>
                      <Option value={2}>软著</Option>
                      <Option value={3}>审计</Option>
                      <Option value={4}>双软</Option>
                      <Option value={5}>高新</Option>
                      <Option value={6}>商标</Option>
                      <Option value={7}>会员</Option>
                    </Select>
                  </span> */}
                  <span
                    style={{
                      display: "inline-block",
                    }}
                  >
                    <span style={{ marginBottom: "10px" }}>订单部门：</span>
                    <Cascaders
                      ref={ref => this.Cascaders1 = ref}
                      placeholder="请选择订单部门"
                      height={28}
                      width={150}
                      onSel={(e) => {
                        this.setState({
                          deps: JSON.stringify(e)
                        })
                      }}
                    />
                  </span>
                  <span
                    style={{
                      display: "inline-block",
                    }}
                  >
                    <span style={{ marginBottom: "10px" }}>负责部门：</span>
                    <Cascaders
                      ref={ref => this.Cascaders2 = ref}
                      placeholder="请选择负责部门"
                      height={28}
                      width={150}
                      onSel={(e) => {
                        this.setState({
                          thchDeps: JSON.stringify(e)
                        })
                      }}
                    />
                  </span>
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px", marginBottom: "10px" }}>
                      咨询师/经理:
                    </span>
                    <AutoComplete
                      className="certain-category-search"
                      dropdownClassName="certain-category-search-dropdown"
                      dropdownMatchSelectWidth={false}
                      style={{ width: 130 }}
                      dataSource={options}
                      placeholder='请输入姓名'
                      value={this.state.auto}
                      onChange={this.httpChange}
                      filterOption={true}
                      onBlur={this.blurChange}
                      onSelect={this.selectAuto}
                    >
                      <Input />
                    </AutoComplete>
                  </span>
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px", marginBottom: "10px" }}>
                      申报批次:
                    </span>
                    <Select
                      value={this.state.declarationBatch || undefined}
                      placeholder="请选择批次"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        this.setState({
                          declarationBatch: e,
                        });
                      }}
                    >
                      <Option value={1}>第一批</Option>
                      <Option value={2}>第二批</Option>
                      <Option value={3}>第三批</Option>
                      <Option value={4}>第四批</Option>
                    </Select>
                  </span>
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>
                      项目金额:
                    </span>
                    <Select
                      value={this.state.projectAmount || undefined}
                      placeholder="请选择项目金额"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        this.setState({
                          projectAmount: e,
                        });
                      }}
                    >
                      <Option value={1}>0~0.5万</Option>
                      <Option value={2}>0.5~1万</Option>
                      <Option value={3}>1~2万</Option>
                      <Option value={4}>2~5万</Option>
                      <Option value={5}>5~10万</Option>
                      <Option value={6}>10~30万</Option>
                      <Option value={7}>30~50万</Option>
                      <Option value={8}>50~80万</Option>
                      <Option value={9}>80万上</Option>
                    </Select>
                  </span>
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>
                      项目状态:
                    </span>
                    <Select
                      value={this.state.taskProjectStatus || undefined}
                      placeholder="请选择项目状态"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        this.setState({
                          taskProjectStatus: e,
                        });
                      }}
                    >
                      {
                        projectStatusList.map((item) =>
                          <Option value={item.value} key={item.value}>{item.label}</Option>
                        )
                      }
                    </Select>
                  </span>
                  {/*    <span style={{display:"inline-block"}}>*/}
                  {/*    <span style={{marginRight:'10px',marginBottom:'10px'}}>项目情况 :</span>*/}
                  {/*    <Select*/}
                  {/*        value={typeof this.state.projectSituation === 'number' ? this.state.projectSituation : undefined}*/}
                  {/*        placeholder="请选择项目情况"*/}
                  {/*        style={{ width: 200,marginRight:'10px',marginBottom:'10px' }}*/}
                  {/*        onChange={(e) => {*/}
                  {/*            this.setState({*/}
                  {/*                projectSituation: e,*/}
                  {/*            });*/}
                  {/*        }}*/}
                  {/*    >*/}
                  {/*        <Option value={0}>未开始</Option>*/}
                  {/*        <Option value={1}>进行中</Option>*/}
                  {/*        <Option value={2}>已暂停</Option>*/}
                  {/*        <Option value={3}>已驳回(专利、软著项目编写)</Option>*/}
                  {/*        <Option value={4}>已完成</Option>*/}
                  {/*        <Option value={5}>项目已完成 已退单</Option>*/}
                  {/*        <Option value={6}>项目未完成 已退单</Option>*/}
                  {/*    </Select>*/}
                  {/*</span>*/}
                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>
                      满&nbsp;&nbsp;意&nbsp;&nbsp;度:
                    </span>
                    <Select
                      value={this.state.sdStatus}
                      placeholder="请选择满意度"
                      style={{
                        width: 150,
                        marginRight: "10px",
                      }}
                      onChange={(e) => {
                        this.setState({
                          sdStatus: e,
                        });
                      }}
                    >
                      <Option value={0}>未发放</Option>
                      <Option value={1}>已发放</Option>
                      <Option value={2}>已回收（非常满意）</Option>
                      <Option value={3}>已回收（满意）</Option>
                      <Option value={4}>已回收（一般）</Option>
                      <Option value={5}>已回收（不满意）</Option>
                    </Select>
                  </span>

                  <span style={{ display: "inline-block" }}>
                    <span style={{ marginRight: "10px" }}>
                      派单时间:
                    </span>
                    <RangePicker
                      allowClear={false}
                      style={{ marginRight: "10px", width: 250 }}
                      value={[
                        this.state.releaseDate[0]
                          ? moment(this.state.releaseDate[0])
                          : null,
                        this.state.releaseDate[1]
                          ? moment(this.state.releaseDate[1])
                          : null,
                      ]}
                      onChange={(data, dataString) => {
                        this.setState({ releaseDate: dataString });
                      }}
                    />
                  </span>
                  <Select
                    mode="multiple"
                    style={{ width: 200 }}
                    placeholder="特批类型"
                    value={this.state.approvaType}
                    onChange={e => {
                      this.setState({
                        approvaType: e
                      })
                    }}
                  >
                    {approvaChildren}
                  </Select>
                  <Button
                    type="primary"
                    onClick={() => {
                      this.loadData();
                    }}
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                  >
                    搜索
                  </Button>
                  <Button
                    onClick={this.resetAll}
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                  >
                    重置
                  </Button>
                </div>
              </TabPane>
              <TabPane tab="更改表格显示数据" key="2">
                {
                  this.state.tbaindex == 2 &&
                  <div style={{ marginLeft: 10 }}>
                    <ChooseList
                      columns={this.state.columns}
                      changeFn={this.changeList}
                      changeList={this.state.changeList}
                      top={55}
                      margin={11}
                    />
                  </div>
                }
              </TabPane>
              {adminData.isSuperAdmin ? <TabPane tab="导出EXCEL" key="3">
                <Button
                  type="primary"
                  style={{ margin: "10px" }}
                  onClick={this.exportExec.bind(this)}
                >
                  导出excel
                </Button>
              </TabPane>
                : ""}
            </Tabs>
          </div>
        )}
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              size="middle"
              scroll={{
                x:
                  this.state.status === 4 || this.state.status === 3
                    ? 1800
                    : 1000,
                y: 0,
              }}
              columns={
                (this.state.changeList && this.state.changeList.length != 0)
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              style={{
                cursor: "pointer",
              }}
              rowClassName={this.suspendColor}
              onRowClick={(record) => {
                this.setState({
                  projectdetailsId: record.id,
                  projectdetailsOrderNo: record.orderNo,
                  pname: record.pname,
                  visible: true,
                });
              }}
            />
          </Spin>
        </div>
        {this.state.visible ? (
          <ProjectDetails
            visible={this.state.visible}
            id={this.state.projectdetailsId}
            orderNo={this.state.projectdetailsOrderNo}
            taskName={this.state.pname}
            visitOk={() => {
              this.setState({
                visible: false,
              });
            }}
            visitCancel={() => {
              this.loadData(this.state.page);
              this.setState({
                visible: false,
              });
            }}
          />
        ) : null}
      </div>
    );
  }
}

export default HighTech;