| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703 | import React, { Component } from 'react';import { Button, Modal, Tag, Tooltip, } from "antd";import './index.less';import TabelContent from "../../../../common/tabelContent";import { splitUrl, getClockState } from "@/tools";import ImgList from "../../../../common/imgList";import { clockState } from "@/dataDic";import { getApprovedState, getLiquidationStatus, getNewOrderStatus, getProcessStatus } from "../../../../tools";import moment from 'moment';class DetailedList extends Component {  constructor(props) {    super(props);    this.state = {      columns: [        {          title: "编号",          dataIndex: "key",          key: "key",          width: 120,        },        {          title: "面谈部门",          dataIndex: "name",          key: "name",          width: 320,        },        {          title: "客户类型",          dataIndex: "newUser",          key: "newUser",          width: 100,          render: (text) => (            text === 0 ? '新客户' :              text === 1 ? '老客户' : ''          )        },        {          title: "面谈客户",          dataIndex: "nickname",          key: "nickname",          width: 220,        },        {          title: "面谈数",          dataIndex: "quantity",          key: "quantity",          className: 'projectTable',          width: 150,          onCellClick: (record, event) => {            event.stopPropagation();            this.setState({              visible1: true,              uid: record.uid,              depId: record.id,            })          },        },        {          title: "签单数",          dataIndex: "sign",          key: "sign",          className: 'projectTable',          width: 150,          onCellClick: (record, event) => {            event.stopPropagation();            this.setState({              visible2: true,              uid: record.uid,              depId: record.id,            })          },        },      ],      columns1: [        {          title: "编号",          dataIndex: "key",          key: "key",          width: 45        },        {          title: "客户名称",          dataIndex: "nickname",          key: "nickname",          width: 140,          render: (text) => {            return (              <div style={{                width: 140,                wordBreak: 'break-all',              }}>{text}</div>            )          },        },        {          title: "跟单人",          dataIndex: "sname",          key: "sname",          width: 100,          render: (text) => {            return (              <Tooltip title={text}>                <div style={{                  width: 100,                  overflow: 'hidden',                  textOverflow: "ellipsis",                  whiteSpace: 'nowrap',                }}>{text}</div>              </Tooltip>            )          },        },        {          title: "公出申请人",          dataIndex: "aname",          key: "aname",          width: 100,          render: (text) => {            return (              <Tooltip title={text}>                <div style={{                  width: 100,                  overflow: 'hidden',                  textOverflow: "ellipsis",                  whiteSpace: 'nowrap',                }}>{text}</div>              </Tooltip>            )          },        },        {          title: "申请时间",          dataIndex: "createTimes",          key: "createTimes",          width: 130        },        {          title: "公出时间",          dataIndex: "releaseStarts",          key: "releaseStarts",          width: 130,          render: (text, record) => (            <div>              <div>{text}</div>              <div style={{ paddingLeft: '44px' }}>至</div>              <div>{record.releaseEnds}</div>            </div>          )        },        {          title: "公出地点",          dataIndex: "userName",          key: "userName",          width: 120,          render: (text) => {            return (              <Tooltip title={text}>                <div style={{                  width: 120,                  overflow: 'hidden',                  textOverflow: "ellipsis",                  whiteSpace: 'nowrap',                }}>{text}</div>              </Tooltip>            )          },        },        {          title: "公出时长(时)",          dataIndex: "duration",          key: "duration",          width: 50        },        {          title: "打卡时间",          dataIndex: "clockInTimes",          key: "clockInTimes",          width: 130        },        {          title: "审核状态",          dataIndex: "status",          key: "status",          width: 40,          render: (text, record) => (            <div style={{ display: "flex", flexDirection: "row" }}>              <Tag color={getClockState(text).color}>                {getClockState(text).title}              </Tag>              {record.updateStatus === 1 && (                <Tag color="#1E90FF">改</Tag>              )}            </div>            // <Tag color={getClockState(text).color}>{getClockState(text).title}</Tag>          )        },        {          title: "打卡状态",          dataIndex: "clockIn",          key: "clockIn",          width: 60,          render: (text) => (            <span              style={{ color: ["#F21212", "#34DE38"][text] }}            >              {["未打卡", "已打卡"][text]}            </span>          )        },        {          title: "公出类型",          dataIndex: "type",          key: "type",          width: 70,          render: (text) =>            <span              style={{ color: ["#1D4FEA", "#1E90FF", "#FF5500", "red"][text] }}            >              {                text === 0                  ? "业务公出" : text === 1                    ? "技术公出" : text === 2                      ? "行政公出" : text === 3                        ? "技术协单" : ""              }            </span>        },        {          title: "公出原因/计划",          dataIndex: "remarks",          key: "remarks",          width: 155,          render: (text) => {            return (<div style={{ wordBreak: "break-all" }}>{text}</div>)          },        },        {          title: "补充",          dataIndex: "supplement",          key: "supplement",          width: 155,          render: (text) => {            return (<div style={{ wordBreak: "break-all" }}>{text}</div>)          },        },        {          title: "审核/指导",          dataIndex: "auditInfo",          key: "auditInfo",          width: 155,          render: (text) => {            return (<div style={{ wordBreak: "break-all" }}>{text}</div>)          },        },        {          title: "操作",          dataIndex: "annexUrl",          key: "annexUrl",          render: (text, record) => (            <div>              <Button                type={"primary"}                onClick={(e) => {                  e.stopPropagation();                  let arr1 = text || [];                  let arr2 = record.photoUrl || [];                  this.setState({                    annexUrlArr: splitUrl(arr1, ",", globalConfig.avatarHost + "/upload"),                    photoUrlArr: splitUrl(arr2, ",", globalConfig.avatarHost + "/upload"),                  }, () => {                    this.setState({                      imgListVisible: true                    })                  })                }}              >                查看附件              </Button>            </div>          )        },      ],      searchList: [        {          type: 'newDepartmentSelect',          dataKey: 'deps',          placeholder: '请选择部门'        },        {          type: 'times',          title: '公出时间',          dataKey: 'date',          format: 'YYYY/MM'        },      ],      searchList1: [        {          type: 'select',          dataKey: 'status',          placeholder: '请选择审核状态',          selectList: () => {            let arr = [];            for (let i of clockState) {              arr.push({                value: i.id,                label: i.title              })            }            return arr;          }        },        {          type: 'select',          dataKey: 'clockIn',          placeholder: '请选择打卡状态',          selectList: [            {              value: '0',              label: '已打卡'            },            {              value: '1',              label: '未打卡'            }          ]        },        {          type: 'autoComplete',          dataKey: 'aid',          api: '/api/admin/customer/listAdminByName',          search: 'adminName',          placeholder: '请输入公出申请人'        },        {          type: 'autoComplete',          dataKey: 'sid',          api: '/api/admin/customer/listAdminByName',          search: 'adminName',          placeholder: '请输入跟单人'        },      ],      columns2: [        {          title: "合同编号",          dataIndex: "contractNo",          key: "contractNo",        },        {          title: "订单编号",          dataIndex: "orderNo",          key: "orderNo",        },        {          title: "客户名称",          dataIndex: "userName",          key: "userName",          render: text => {            return (              <Tooltip title={text}>                <div                  // style={{                  //   maxWidth: '150px',                  //   overflow: 'hidden',                  //   textOverflow: "ellipsis",                  //   whiteSpace: 'nowrap',                  // }}                >{text}</div>              </Tooltip>            )          }        },        {          title: "订单部门",          dataIndex: "depName",          key: "depName",        },        {          title: "下单时间",          dataIndex: "createDate",          key: "createTime",        },        {          title: "合同签订时间",          dataIndex: "signDate",          key: "signDate",        },        {          title: "流程状态",          dataIndex: "processStatus",          key: "processStatus",          render: (text, record) => {            return getProcessStatus(text, record.examineName, record.approval);          },        },        {          title: "签单金额(万元)",          dataIndex: "totalAmount",          key: "totalAmount",        },        {          title: "开票金额(万元)",          dataIndex: "invoiceAmount",          key: "invoiceAmount",        },        {          title: "已收款(万元)",          dataIndex: "settlementAmount",          key: "settlementAmount",        },        {          title: "结算状态",          dataIndex: "liquidationStatus",          key: "liquidationStatus",          render: (text) => {            return getLiquidationStatus(text);          },        },        {          title: "是否特批",          dataIndex: "approval",          key: "approval",          render: (text) => {            return getApprovedState(text);          },        },        {          title: "订单状态",          dataIndex: "orderStatus",          key: "orderStatus",          render: (text) => {            return getNewOrderStatus(text);          },        },        {          title: "财务负责人",          dataIndex: "financeName",          key: "financeName",        },      ],      searchList2: [        {          type: 'text',          placeholder: '请输入订单编号',          dataKey: 'orderNo',        },        {          type: 'text',          placeholder: '请输入客户名称',          dataKey: 'name',        },        {          type: 'text',          placeholder: '请输入合同编号',          dataKey: 'contractNo',        },        {          type: 'select',          dataKey: 'liquidationStatus',          placeholder: '请选择结算状态',          selectList: [            {              value: '0',              label: '首付待付请'            },            {              value: '1',              label: '尾款待付清'            },            {              value: '2',              label: '已付清'            },          ]        },        {          type: 'select',          dataKey: 'approval',          placeholder: '请选择特批状态',          selectList: [            {              value: '0',              label: '非特批'            },            {              value: '1',              label: '特批'            },          ]        },        {          type: 'select',          dataKey: 'amountStatus',          placeholder: '请选择签单金额',          selectList: [            {              value: '0',              label: '10万元以下'            },            {              value: '1',              label: '10~20万元'            },            {              value: '2',              label: '20~30万元'            },            {              value: '3',              label: '30~40万元'            },            {              value: '4',              label: '40万元以上'            },          ]        },      ],      searchConfig: {}    }  }  render() {    return (      <div>        <Modal          maskClosable={false}          visible={this.props.visible}          onOk={this.props.onCancel}          onCancel={this.props.onCancel}          width='1200px'          title={this.props.recordInfor.name + '面谈表'}          footer=''          className="admin-desc-content">          <div className="user-content">            <TabelContent              scroll={{ x: 0, y: 500 }}              searchList={this.state.searchList}              columns={this.state.columns}              searchConfig={this.props.searchConfig}              tabelApi={'/api/admin/provinceFollowStatisticsList'}              exportApi={'/api/admin/provinceFollowStatisticsListExport'}              query={{                province: this.props.recordInfor.id,                type: this.props.recordInfor.type              }}              onRowClick={() => { }}              searchOperation={(value) => {                for (let i of Object.keys(value)) {                  if (i === 'sort' || i === 'pageNo' || i === 'pageSize') {                    delete value[i]                  }                }                this.setState({ searchConfig: value })              }              }              dataProcessing={(data) => {                let theArr = [];                for (let i = 0; i < data.data.length; i++) {                  let thisdata = data.data[i];                  thisdata.key = i + 1;                  theArr.push(thisdata);                }                return theArr;              }}            />          </div>          {this.state.visible1 && <Modal            maskClosable={false}            visible={this.state.visible1}            onOk={() => {              this.setState({                visible1: false,                uid: '',                depId: ''              })            }}            onCancel={() => {              this.setState({                visible1: false,                uid: '',                depId: ''              })            }}            width='1600px'            title='公出详细列表'            footer=''            className="admin-desc-content">            <div className="user-content">              <TabelContent                scroll={{ x: 1200 }}                searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}                searchList={this.state.searchList1}                columns={this.state.columns1}                tabelApi={'/api/admin/release/publicReleaseDtails'}                exportApi={'/api/admin/release/publicReleaseDtails/export'}                query={{                  uid: this.state.uid,                  depId: this.state.depId,                  releaseStart: moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),                  releaseEnd: moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')                }}                exportExecProcessing={(data) => {                  data.uid = this.state.uid;                  data.depId = this.state.depId;                  return data;                }}                onRowClick={() => { }}                dataProcessing={(data) => {                  let theArr = [];                  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);                  }                  return theArr;                }}              />            </div>          </Modal>}          {this.state.visible2 && <Modal            maskClosable={false}            visible={this.state.visible2}            onOk={() => {              this.setState({                visible2: false,                uid: '',                depId: ''              })            }}            onCancel={() => {              this.setState({                visible2: false,                uid: '',                depId: ''              })            }}            width='1600px'            title='客户订单列表'            footer=''            className="admin-desc-content">            <div className="user-content">              <TabelContent                scroll={{ x: 1200 }}                searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}                searchList={this.state.searchList2}                columns={this.state.columns2}                tabelApi={'/api/admin/newOrder/orderNewList'}                query={{                  uid: this.state.uid,                  depId: this.state.depId,                  specially: 8,                  starTime: moment(this.state.searchConfig.date).startOf('month').format('YYYY-MM-DD'),                  endTime: moment(this.state.searchConfig.date).endOf('month').format('YYYY-MM-DD')                }}                onRowClick={() => { }}                dataProcessing={(data) => {                  let theArr = [];                  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);                  }                  return theArr;                }}              />            </div>          </Modal>}        </Modal>        {this.state.imgListVisible ? <Modal          maskClosable={false}          visible={this.state.imgListVisible}          onOk={() => {            this.setState({              imgListVisible: false            })          }}          onCancel={() => {            this.setState({              imgListVisible: false            })          }}          width='500px'          title='图片'          footer=''>          <div>            <div>申请附件</div>            <ImgList fileList={this.state.annexUrlArr} domId='publicStatistics' />            <div style={{ paddingTop: '35px' }}>打卡照片</div>            <ImgList fileList={this.state.photoUrlArr} domId='publicStatistics1' />          </div>        </Modal> : null}      </div>    )  }}export default DetailedList;
 |