/*
 * Create:      柿子
 * CreateDate:  2022/09/19
 * Describe：   库房 - 制单公共组件 - 入库制单(ReceiptVP)/转移制单(TransferVP)/产品调价单录入ProductPriceAdjustment/退货制单ReturnVP
 * */
import React, { Component } from 'react';
import { Card, Row, Col, Button, Menu, Dropdown, Popconfirm, Icon, Select, message, Modal, Tooltip, Input, Spin, Tag } from 'antd';
import { Util, dayFormat } from 'tools';
import { $http } from 'containers/config/https';
import store from 'store';
import moment from 'moment';
import RangeDatePicker from 'components/rangePicker/index';
import OrderOfGlassesModal from './component/OrderOfGlassesModal';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import ReviewedReceiptVPModal from './component/ReviewedReceiptVPModal';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import iconListvisits from 'assets/images/icon_listvisits.png';
import iconMessages from 'assets/images/icon_messages.png';
import './style/index.less';

class VoucherPreparation extends Component {
  constructor(props) {
    super(props);
    let userData = React.$getSessionData();
    this.state = {
      category: '',
      userData,
      selectData: {},
      queryParams: { // 查询条件
        endDate: moment().format(dayFormat), // 结束日期
        startDate: moment().format(dayFormat), // 开始日期
        status: '', // 单据状态
      },
      columns: [],
      totalWidth: 550,
      tableData: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      rowID: '',
      rowData: {},
      baseFormData: [],
      detailRowData: {},
      inputFormData: [],
      detailColumns: [],
      detailTotalWidth: 1100,
      detailLoading: false,
      detailTableData: [],
      detailRowID: '',
      modalTableColumns: [],
      modalTotalWidth: 800,
      scanningCode: undefined,
      spinLoading: true,
      selectedRowKeys: [],
      orderModalType: ''
    };
    this.scanningRef = React.createRef();

    this.staticColumns = [{
      key: 1,
      title: '制单时间',
      dataIndex: 'creatDateTime',
      align: 'center',
      width: 150
    }, {
      key: 2,
      title: '入库单号',
      dataIndex: 'inOpeNo',
      align: 'center',
      width: 150
    }, {
      key: 3,
      title: '入库科室',
      dataIndex: 'locDesc',
      align: 'center',
      width: 150
    }, {
      key: 4,
      title: '状态',
      dataIndex: 'statusDesc',
      align: 'center',
      width: 100
    }];

    this.staticDetailColumns = [{
      key: 1,
      title: '产品代码',
      dataIndex: 'stockCode',
      align: 'center',
      width: 150
    }, {
      key: 2,
      title: '产品名称',
      dataIndex: 'stockDesc',
      align: 'center',
      width: 300
    }, {
      key: 3,
      title: '数量',
      dataIndex: 'qty',
      align: 'center',
      width: 100
    }, {
      key: 4,
      title: '单位',
      dataIndex: 'unitDesc',
      align: 'center',
      width: 100
    }, {
      key: 5,
      title: '进价',
      dataIndex: 'rp',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '售价',
      dataIndex: 'sp',
      align: 'center',
      width: 100
    }, {
      key: 7,
      title: '医院进价',
      dataIndex: 'hospRp',
      align: 'center',
      width: 150
    }, {
      key: 8,
      title: '集团进价',
      dataIndex: 'groupRp',
      align: 'center',
      width: 100
    }];

    this.staticModalTableColumns = [{
      key: 1,
      title: '产品代码',
      dataIndex: 'stockCode',
      align: 'center',
      width: 150
    }, {
      key: 2,
      title: '产品名称',
      dataIndex: 'stockDesc',
      align: 'center',
      width: 300
    }, {
      key: 3,
      title: '品牌',
      dataIndex: 'brandDesc',
      align: 'center',
      width: 100
    }, {
      key: 3,
      title: '品种',
      dataIndex: 'varietyDesc',
      align: 'center',
      width: 100
    }, {
      key: 4,
      title: '包装规格',
      dataIndex: 'stockSpec',
      align: 'center',
      width: 100
    }, {
      key: 5,
      title: '产地',
      dataIndex: 'sourceDesc',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '医院进价',
      dataIndex: 'hospRp',
      align: 'center',
      width: 100
    }]
  }

  componentDidMount() {
    let newCategory;
    if ('paras' in this.props && this.props.paras && this.props.paras.params) { // 侧菜单获取类别参数
      newCategory = this.props.paras.params;
    } else {
      if ('location' in this.props && this.props.location.state && this.props.location.state.params) { // 头菜单获取类别参数
        newCategory = this.props.location.state.params;
        React.$setSessionData('voucherPreparation', newCategory, false);
      } else { // 头菜单刷新界面时获取类别
        newCategory = React.$getSessionData('voucherPreparation', false);
      }
    }
    this.setState({ category: newCategory, orderModalType: Util.getValueByUrlStr(newCategory, 'orderModalType') }, () => {
      this.getSelectData();
    });
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取下拉框数据
  getSelectData = async () => {
    try {
      let { userData, category, queryParams } = this.state;
      let selectCode = Util.getValueByUrlStr(category, 'selectCode');
      if (!selectCode) {
        this.getTableColumns();
        this.getDetailColumns();
        this.getTableData();
      } else {
        let data = {
          params: [{
            hospID: userData?.hospID || ''
          }]
        }
        let res = await React.$asyncPost(this, selectCode, data);
        // 初始化日期
        queryParams.startDate = res.result?.startDate || queryParams.startDate;
        queryParams.endDate = res.result?.endDate || queryParams.endDate;
        this.setState({ selectData: res.result }, () => {
          this.getTableColumns();
          this.getDetailColumns();
          this.getTableData();
        });
      }
    } catch (error) {
      this.setState({ selectData: {} }, () => {
        this.getTableColumns();
        this.getDetailColumns();
        this.getTableData();
      });
    }
  }

  // 获取列表表头数据
  getTableColumns = async () => {
    try {
      const { category } = this.state;
      let componentName = Util.getValueByUrlStr(category, 'componentName');
      let data = {
        params: [{
          compontName: componentName,
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (columns && columns.length > 0) {
        columns = columns.map(item => {
          return {
            ...item,
            render: (text, record) => {
              return (
                <Tooltip title={text}>
                  <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                </Tooltip>
              );
            },
          }
        })
        this.setState({
          columns,
          totalWidth: res.totalWidth
        })
      }
      // 表单操作数据
      let baseFormData = res.result && res.result.formData && res.result.formData.length > 0 ? res.result.formData : [];
      if (!(baseFormData && baseFormData.length > 0)) {
        baseFormData = this.getBaseFormData();
      }
      this.setState({ baseFormData }, () => {
        this.handleSelectDataAssignment('baseFormData');
      });
    } catch (error) {
      console.log(error)
    }
  }

  // 下拉框数据源赋值
  handleSelectDataAssignment = (dataIndex) => {
    const { selectData, category } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    if (this.state[dataIndex] && this.state[dataIndex].length > 0) {
      for (var i = 0; i < this.state[dataIndex].length; i++) {
        let currentIndex = i;
        this.state[dataIndex][i].loading = false;
        this.state[dataIndex][i].defaultDisabled = this.state[dataIndex][i]?.disabled || 'N';
        if (this.state[dataIndex][i] && this.state[dataIndex][i].typeCode === 'SearchSelect') { // 回车搜索列表展示
          let baseRecord = this.state[dataIndex][i];
          this.state[dataIndex][i].valueindex = 'descripts'; // 显示在界面上的值 -> 对应下拉数据返回的描述
          this.state[dataIndex][i].valueID = this.state[dataIndex][i].methodName; // 需要存到后台的字段对应的id值 - 关联方法
          this.state[dataIndex][i].onSearch = (e) => this.handleChargeSearch(e, dataIndex, currentIndex, baseRecord);
        }
        if (this.state[dataIndex][i] && this.state[dataIndex][i].dataIndex === 'sp' && componentName === 'ReceiptVP') { // 入库制单售价是否可编辑 - stkRecSpEdit  1，可编辑，0，不可编辑
          let stkRecSpEdit = selectData.stkRecSpEdit === '0' ? 'Y' : 'N'
          this.state[dataIndex][i].disabled = stkRecSpEdit; // 是否可编辑
          this.state[dataIndex][i].required = stkRecSpEdit === 'Y' ? 'N' : 'Y'; // 是否必填
        }
        if (componentName === 'ReceiptVP' && this.state[dataIndex][i] && (this.state[dataIndex][i].dataIndex === 'qty' || this.state[dataIndex][i].dataIndex === 'rp' || this.state[dataIndex][i].dataIndex === 'sp')) { // 数量
          this.state[dataIndex][i].callBackResult = 'Fn';
          this.state[dataIndex][i].changeCallBack = this.handleQtyChange;
        }
      }
      this.setState({});
    }
  }

  // 数量change后自动计算进价售价金额
  handleQtyChange = (e, dataIndex, fieldsValue) => {
    let rpAmt = 0, spAmt = 0; // 进价/售价金额
    if (fieldsValue && 'rp' in fieldsValue && fieldsValue.rp !== undefined) { // 进价
      rpAmt = this.handleCalculatePrice(fieldsValue?.rp || 0, fieldsValue?.qty || 0);
    }
    if (fieldsValue && 'sp' in fieldsValue && fieldsValue.sp !== undefined) { // 售价
      spAmt = this.handleCalculatePrice(fieldsValue?.sp || 0, fieldsValue?.qty || 0);
    }
    this.inputFormRef && this.inputFormRef.setFieldsValue({
      rpAmt,
      spAmt
    });
  }

  // 计算价格
  handleCalculatePrice = (price, qty) => {
    return (((Number(price).toFixed(4)) * 10000) * Number(qty)) / 10000
  }

  // 获取基本信息表单数据
  getBaseFormData = () => {
    const { selectData, category } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    let baseFormData = [];
    if (componentName === 'TransferVP') { // 转移制单
      baseFormData = [{
        required: 'Y',
        title: '供给科室',
        typeCode: 'Select',
        dataIndex: 'inOperLocID',
        detailItem: selectData?.reqLoc || [],
      }, {
        required: 'Y',
        title: '出库类型',
        typeCode: 'Select',
        dataIndex: 'operTypeID',
        detailItem: selectData?.reqLoc || [],
      }, {
        required: 'Y',
        title: '出库人员',
        typeCode: 'Select',
        dataIndex: 'purUserID',
        detailItem: selectData?.reqLoc || [],
      }, {
        required: 'Y',
        title: '请求科室',
        typeCode: 'Select',
        dataIndex: 'loc',
        detailItem: selectData?.reqLoc || [],
      }, {
        title: '制单日期',
        typeCode: 'Date',
        dataIndex: 'createDate',
      }, {
        title: '出库备注',
        typeCode: 'Input',
        dataIndex: 'remark',
      }, {
        title: '库存子类',
        typeCode: 'Select',
        dataIndex: 'stkCatID',
        detailItem: selectData?.reqLoc || [],
      }, {
        title: '入库单号',
        typeCode: 'Input',
        dataIndex: 'No',
        placeholder: '保存后自动生成单号',
      }, {
        title: '单据状态',
        typeCode: 'Select',
        dataIndex: 'status',
        detailItem: selectData?.reqLoc || [],
      }, {
        col: 4,
        title: '赠送标志',
        typeCode: 'Switch',
        dataIndex: 'giftFlag',
        formItemCol: { labelCol: 12, wrapperCol: 12 },
      }, {
        col: 3,
        title: '调价换票',
        typeCode: 'Switch',
        dataIndex: 'adjCheque',
        formItemCol: { labelCol: 12, wrapperCol: 12 }
      }];
    } else {
      baseFormData = [{
        required: 'Y',
        title: '入库科室',
        typeCode: 'Select',
        dataIndex: 'locID',
        detailItem: selectData?.inOpLoc || [],
      }, {
        required: 'Y',
        title: '入库类型',
        typeCode: 'Select',
        dataIndex: 'operTypeID',
        detailItem: selectData?.inOpType || [],
      }, {
        required: 'Y',
        title: '入库人员',
        typeCode: 'Select',
        dataIndex: 'purUserID',
        detailItem: selectData?.purPlanUser || [],
      }, {
        required: 'Y',
        title: '供应商',
        typeCode: 'SearchSelect',
        dataIndex: 'vendorDesc',
        loading: false,
        valueindex: 'descripts', // 显示在界面上的值 -> 对应下拉数据返回的描述
        valueID: 'vendorID', // 需要存到后台的字段对应的id值
        detailItem: [],
        onSearch: (e) => this.handleChargeSearch(e, 'baseFormData', 3),
      }, {
        title: '入库日期',
        typeCode: 'Date',
        dataIndex: 'createDate',
        defaultValue: moment().format(dayFormat)
      }, {
        title: '入库备注',
        typeCode: 'Input',
        dataIndex: 'remark',
      }, {
        title: '库存子类',
        typeCode: 'Select',
        dataIndex: 'stkCatID',
        detailItem: selectData?.stkCat || [],
      }, {
        title: '入库单号',
        typeCode: 'Input',
        dataIndex: 'inOpeNo',
        placeholder: '保存后自动生成单号',
      }, {
        title: '请求科室',
        typeCode: 'Select',
        dataIndex: 'reqLocID',
        detailItem: selectData?.reqLoc || [],
      }, {
        title: '单据状态',
        typeCode: 'Select',
        dataIndex: 'status',
        detailItem: selectData?.status || [],
        disabled: 'Y'
      }, {
        col: 4,
        title: '赠送标志',
        typeCode: 'Switch',
        dataIndex: 'giftFlag',
        formItemCol: { labelCol: 12, wrapperCol: 12 },
      }, {
        col: 3,
        title: '调价换票',
        typeCode: 'Switch',
        dataIndex: 'adjCheque',
        formItemCol: { labelCol: 12, wrapperCol: 12 }
      }];
    }
    return baseFormData;
  }

  // 厂家搜索事件 
  handleChargeSearch = (value, dataIndex, index, record) => {
    try {
      this.state[dataIndex][index]['loading'] = true;
      this.setState({});
      this.fetchCharge(value, record, (selectData) => {
        this.state[dataIndex][index]['loading'] = false;
        this.state[dataIndex][index]['detailItem'] = selectData;
        this.setState({});
      });
    } catch (error) {
      console.log(error);
    }
  }

  // 获取远程搜索下拉数据
  fetchCharge = (value, record, callback) => {
    value = value.replace(/^\s+/, '').replace(/\s+$/, '');
    if (!(record && record.className)) return;
    if (value === '') {
      let resData = [];
      callback(resData);
      return;
    }
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
    function fakeCharge() {
      let data = {
        params: [{
          desc: value
        }]
      }
      $http.post('urlS', this, {
        code: record.className,
        data,
        success: function (res) {
          let dataSouceIndex = record.className === '02020352' ? 'manf' : (record.className === '02020353' ? 'vendor' : 'result'); // 厂家和供应商数据
          if (res.errorCode === '0') {
            callback(res[dataSouceIndex]);
          }
        }
      });
    }
    this.timeout = setTimeout(fakeCharge, 300);
  }

  // 修改操作框数据
  handleModifyInputValue = (e, dataIndex) => {
    this.state.queryParams[dataIndex] = e;
    dataIndex === 'brandID' ? this.getVarietySelectData(e) : '';
    this.setState({}, () => {
      if (dataIndex === 'startDate' || dataIndex === 'endDate' || dataIndex === 'takeStartDate' || dataIndex === 'takeEndDate') {
        this.handleQuery();
      }
    })
  }

  // 查询
  handleQuery = () => {
    this.setState({ page: 1, rowID: '' }, () => {
      this.getTableData();
    })
  }

  // 请求列表数据
  getTableData = async (isClear) => {
    try {
      let { queryParams, pageSize, page, category, modalTableColumns } = this.state;
      let queryCode = Util.getValueByUrlStr(category, 'queryCode');
      if (!queryCode) return;
      this.setState({ loading: true })
      let data = {
        params: [{
          ...queryParams,
          ...this.getModalTableParams(),
          statusID: queryParams?.status || '', // 状态
        }],
        pagination: [{
          pageSize,
          currentPage: page
        }]
      }
      let res = await React.$asyncPost(this, queryCode, data);
      let tableData = Util.addKeyValueToDataSource(res.result && 'rows' in res.result ? res.result.rows : (Array.isArray(res.result) ? res.result : []));
      this.setState({ tableData, total: res.result?.total || tableData.length, loading: false }, () => {
        if (!(modalTableColumns && modalTableColumns.length > 0)) {
          this.getModalTableColumns();
        }
        isClear !== 'N' ? this.handleClearSelectData() : ''; // 清除操作数据
      });
    } catch (error) {
      this.setState({ tableData: [], total: 0, loading: false });
    }
  }

  // 清除操作数据
  handleClearSelectData = () => {
    this.setState({ rowID: '', rowData: {}, detailTableData: [], scanningCode: undefined }, () => {
      this.handleDetailEmpty();
      this.handleIsDisabled('baseFormData');
      this.handleIsDisabled('inputFormData');
      this.baseFormRef && this.baseFormRef.resetFields();
    })
  }

  // 分页操作
  compilePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.getTableData();
    })
  }

  // 操作行
  onClickRowPublic = (record) => {
    const { category } = this.state;
    let idIndex = Util.getValueByUrlStr(category, 'idIndex');
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowID === '' || (this.state.rowID && (this.state.rowID !== record[idIndex]))) {
          this.setState({ rowID: record[idIndex] }, () => {
            this.queryRowDataByID(record);
          });
        } else {
          this.handleClearSelectData();
        }
      }
    }
  }

  // 根据行ID获取明细数据
  queryRowDataByID = async (record) => {
    try {
      const { category, rowID } = this.state;
      let idIndex = Util.getValueByUrlStr(category, 'idIndex');
      let queryDetailCode = Util.getValueByUrlStr(category, 'queryDetailCode');
      if (!queryDetailCode) {
        this.setState({ rowData: record, detailTableData: [record] }, () => {
          this.handleDetailEmpty();
        })
        return;
      };
      let data = {
        params: [{
          [idIndex]: rowID
        }]
      }
      let res = await React.$asyncPost(this, queryDetailCode, data);
      this.setState({ rowData: res.result?.baseInfo || {}, detailTableData: Util.addKeyValueToDataSource(res.result?.detailInfo || []) }, () => {
        this.inputFormRef && this.inputFormRef.resetFields();
        this.handleIsDisabled('baseFormData');
        this.handleIsDisabled('inputFormData');
        this.handleDetailEmpty();
      })
    } catch (error) {
      console.log(error)
    }
  }

  // 输入域是否可以操作
  handleIsDisabled = (dataIndex) => {
    let { rowID, rowData } = this.state;
    let detailDeleteFlag = rowID ? (rowData.statusCode === '10' ? true : false) : true;
    let formData = this.state[dataIndex];
    if (formData && formData.length > 0) {
      for (var i = 0; i < formData.length; i++) {
        this.state[dataIndex][i].disabled = detailDeleteFlag ? this.state[dataIndex][i].defaultDisabled : 'Y';
      }
      this.setState({});
    }
  }

  // 选中行操作
  setRowClassNamePublic = (record) => {
    const { category } = this.state;
    let idIndex = Util.getValueByUrlStr(category, 'idIndex');
    return record[idIndex] === this.state.rowID ? 'clickRowStyle' : '';
  }

  // 删除
  handleDelete = async (record, e) => {
    try {
      this.handleStopPropagation(e);
      const { category, rowID } = this.state;
      let idIndex = Util.getValueByUrlStr(category, 'idIndex');
      let deleteCode = Util.getValueByUrlStr(category, 'deleteCode');
      if (!deleteCode || !idIndex) return;
      let data = {
        params: [{
          [idIndex]: record[idIndex] || ''
        }]
      }
      let res = await React.$asyncPost(this, deleteCode, data);
      message.success(res.errorMessage || '删除成功');
      this.getTableData(rowID === record[idIndex] ? 'Y' : 'N');
    } catch (error) {
      console.log(error)
    }
  }

  // 点击input框时阻止事件冒泡
  handleStopPropagation = (e) => {
    e.stopPropagation();
  }

  // 入库辅助制单操作
  handleMoreBtnClick = ({ key }) => {
    if (key === '1') {
      this.orderOfGlassesRef && this.orderOfGlassesRef.modifyVisible(true);
    } else if (key === '2') {
      this.reviewedRVPRef && this.reviewedRVPRef.modifyVisible(true);
    }
  }

  // 获取明细录入表单数据
  getInputFormData = () => {
    const { category } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    let inputFormData = [];
    if (componentName === 'TransferVP') { // 转移制单
      inputFormData = [{
        required: 'Y',
        title: '产品名称',
        typeCode: 'InputTable',
        dataIndex: 'stockDesc',
      }, {
        title: '产品代码',
        typeCode: 'Input',
        dataIndex: 'stockCode',
      }, {
        required: 'Y',
        title: '出库数量',
        typeCode: 'InputNumber',
        dataIndex: 'num',
      }, {
        title: '单位',
        typeCode: 'Select',
        dataIndex: 'unit',
      }, {
        disabled: 'Y',
        title: '品牌',
        typeCode: 'Select',
        dataIndex: 'brandID',
      }, {
        disabled: 'Y',
        title: '品种',
        typeCode: 'Select',
        dataIndex: 'varietiesID',
      }, {
        disabled: 'Y',
        title: '规格型号',
        typeCode: 'Input',
        dataIndex: 'stockSpec',
      }, {
        disabled: 'Y',
        title: '生产厂家',
        typeCode: 'Select',
        dataIndex: 'manufID',
      }, {
        disabled: 'Y',
        title: '进口国产',
        typeCode: 'Select',
        dataIndex: 'operTypeID',
      }, {
        disabled: 'Y',
        title: '产地',
        typeCode: 'Select',
        dataIndex: 'placeOrigin',
      }, {
        disabled: 'Y',
        title: '医院进价',
        typeCode: 'Input',
        dataIndex: 'hospRp',
      }, {
        disabled: 'Y',
        title: '医院售价',
        typeCode: 'Input',
        dataIndex: 'sp',
      }, {
        disabled: 'Y',
        title: '可用数量',
        typeCode: 'Input',
        dataIndex: 'rpAmt',
      }, {
        disabled: 'Y',
        title: '请求数量',
        typeCode: 'InputNumber',
        dataIndex: 'spAmt',
      }, {
        disabled: 'Y',
        title: '占用数量',
        typeCode: 'InputNumber',
        dataIndex: 'batchNumber',
      }, {
        disabled: 'Y',
        title: '批次库存',
        typeCode: 'Input',
        dataIndex: 'productCode',
        placeholder: '自动显示',
      }, {
        title: '备注',
        typeCode: 'Input',
        dataIndex: 'remarks',
      }];
    } else {
      inputFormData = [{
        required: 'Y',
        title: '产品名称',
        typeCode: 'InputTable',
        dataIndex: 'stockDesc',
      }, {
        disabled: 'Y',
        title: '产品代码',
        typeCode: 'Input',
        dataIndex: 'stockCode',
      }, {
        disabled: 'Y',
        title: '品牌',
        typeCode: 'Select',
        dataIndex: 'brandID',
      }, {
        disabled: 'Y',
        title: '品种',
        typeCode: 'Select',
        dataIndex: 'varietyID',
      }, {
        disabled: 'Y',
        title: '规格型号',
        typeCode: 'Input',
        dataIndex: 'stockSpec',
      }, {
        disabled: 'Y',
        title: '进口类型',
        typeCode: 'Select',
        dataIndex: 'impTypeID',
      }, {
        disabled: 'Y',
        title: '产地',
        typeCode: 'Select',
        dataIndex: 'sourceID',
      }, {
        disabled: 'Y',
        title: '进价',
        typeCode: 'Input',
        dataIndex: 'rp',
      }, {
        disabled: 'Y',
        title: '售价',
        typeCode: 'Input',
        dataIndex: 'sp',
      }, {
        required: 'Y',
        title: '数量',
        typeCode: 'InputNumber',
        dataIndex: 'qty',
      }, {
        required: 'Y',
        title: '单位',
        typeCode: 'Select',
        dataIndex: 'unitID',
      }, {
        title: '生产日期',
        typeCode: 'Date',
        dataIndex: 'produceDate',
      }, {
        title: '有效日期',
        typeCode: 'Date',
        dataIndex: 'expDate',
      }, {
        required: 'Y',
        title: '产品编码',
        typeCode: 'Input',
        dataIndex: 'productCode',
        placeholder: '保存后自动生成单号',
      }, {
        title: '集团进价',
        typeCode: 'Input',
        dataIndex: 'groupRp',
      }, {
        title: '医院进价',
        typeCode: 'Input',
        dataIndex: 'hospRp',
      }];
    }
    return inputFormData;
  }

  // 清空明细表单数据
  handleDetailEmpty = () => {
    const { detailRowID } = this.state;
    if (detailRowID) {
      this.setState({ detailRowID: '' }, () => {
        this.handleModifyBtnTitle();
      });
    } else {
      this.handleModifyBtnTitle();
    }
    this.handleDetailResetFields();
  }

  // 重置明细表单
  handleDetailResetFields = () => {
    this.setState({ detailRowData: {} });
    this.inputFormRef && this.inputFormRef.resetFields();
  }

  // 获取明细表头数据
  getDetailColumns = async () => {
    try {
      const { category } = this.state;
      let componentName = Util.getValueByUrlStr(category, 'componentName');
      let data = {
        params: [{
          compontName: componentName + 'Detail',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let detailColumns = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (detailColumns && detailColumns.length > 0) {
        detailColumns = detailColumns.map(item => {
          return {
            ...item,
            render: (text, record) => {
              if (item.dataIndex === 'urgentSign' && (text === '一级加急' || text === '二级加急')) { // 加急标志
                return (
                  <Tag style={{ fontWeight: 'normal' }} color={text === '一级加急' ? '#FF3D00' : (text === '二级加急' ? '#FA8C17' : '')}>{text}</Tag>
                );
              } else {
                return (
                  <Tooltip title={text}>
                    <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                  </Tooltip>
                );
              }
            },
          }
        })
        this.setState({
          detailColumns,
          detailTotalWidth: res.totalWidth
        });
      }
      // 表单操作数据
      let inputFormData = res.result && res.result.formData && res.result.formData.length > 0 ? Util.addKeyValueToDataSource(res.result.formData, '', 0) : [];
      let inputFormButton = [{
        col: 4,
        title: '清空',
        typeCode: 'Button',
        onClick: this.handleDetailEmpty,
        style: { textAlign: 'right', lineHeight: '40px', paddingRight: '30px' }
      }, {
        col: 2,
        title: '保存',
        ghost: true,
        type: 'primary',
        typeCode: 'Button',
        onClick: this.handleDetailSave,
        style: { lineHeight: '40px' }
      }]
      if (!(inputFormData && inputFormData.length > 0)) {
        inputFormData = this.getInputFormData();
      }
      this.setState({ inputFormData: [...inputFormData, ...inputFormButton], spinLoading: false }, () => {
        this.handleSelectDataAssignment('inputFormData');
      });
    } catch (error) {
      this.setState({ spinLoading: false });
    }
  }

  getModalTableColumns = async () => {
    try {
      const { category } = this.state;
      let componentName = Util.getValueByUrlStr(category, 'componentName');
      let modalTableName = Util.getValueByUrlStr(category, 'modalTableName');
      let data = {
        params: [{
          compontName: modalTableName ? modalTableName : componentName + 'ModalTable',
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let modalTableColumns = res.result && res.result.C && res.result.C.length > 0 ? res.result.C : [];
      if (modalTableColumns && modalTableColumns.length > 0) {
        this.setState({
          modalTableColumns,
          modalTotalWidth: res.totalWidth
        });
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 明细行操作
  handleDetailRowClick = (record) => {
    const { rowID, rowData } = this.state;
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.detailRowID === '' || (this.state.detailRowID && (this.state.detailRowID !== record.key))) {
          let detailDeleteFlag = rowID ? (rowData.statusCode === '10' || rowData.statusCode === 'No' ? true : false) : true;
          record.usableQty = this.getUsableQty(record);
          record.rpAmt = this.handleCalculatePrice(record?.rp || 0, record?.qty || 0); // 进价金额
          record.spAmt = this.handleCalculatePrice(record?.sp || 0, record?.qty || 0); // 售价金额
          if (detailDeleteFlag) {
            this.getUnitSelectData(record?.unitArr || []);
            this.setState({ detailRowID: record.key, detailRowData: record }, () => {
              this.handleModifyBtnTitle();
            });
          }
        } else {
          this.handleDetailEmpty();
        }
      }
    }
  }

  // 计算可用数量
  getUsableQty = (record) => {
    let stkLocBatQty = Number(record?.stkLocBatQty || 0); // 总数量
    let dirtyQty = Number(record?.dirtyQty || 0); // 暂用数量
    return stkLocBatQty - dirtyQty
  }

  // 修改明细form操作描述
  handleModifyBtnTitle = () => {
    let { inputFormData, detailRowID } = this.state;
    if (inputFormData && inputFormData.length > 0) {
      let len = inputFormData.length;
      this.state.inputFormData[len - 2].title = detailRowID ? '取消修改' : '清空';
      this.state.inputFormData[len - 1].title = detailRowID ? '确认修改' : '保存';
      this.setState({});
    }
  }

  handleDetailRowClassName = (record) => {
    return record.key === this.state.detailRowID ? 'clickRowStyle' : (record?.presChange === '是' ? 'common-row-color-FDECF2' : '');
  }

  // 保存明细
  handleDetailSave = async () => {
    try {
      const { detailTableData, detailRowID, detailRowData } = this.state;
      let values = await this.inputFormRef.handleSave();
      if (values && values.error) {
        message.info('请先完善必填项。');
        return;
      }
      values = { // 选择产品名称附带的其他数据
        ...detailRowData,
        ...values,
      };
      if (values && 'unitID' in values && values.unitID) {
        values.unitDesc = Util.returnDataCccordingToAttributes(detailRowData?.unitArr || [], values.unitID)?.descripts;
      }
      values.rpAmt = this.handleCalculatePrice(values?.rp || 0, values?.qty || 0); // 进价金额
      values.spAmt = this.handleCalculatePrice(values?.sp || 0, values?.qty || 0); // 售价金额
      if (detailRowID) { // 编辑
        for (var i = 0; i < detailTableData.length; i++) {
          if (detailTableData[i].key === detailRowID) {
            detailTableData[i] = {
              ...detailTableData[i],
              ...values
            };
            break;
          }
        }
      } else { // 新增
        values.key = detailTableData && detailTableData.length > 0 ? (detailTableData.length + 1) : 1;
        detailTableData.push(values);
      }
      this.setState({ detailTableData }, () => {
        this.handleDetailEmpty();
      });
    } catch (error) {
      console.log(error);
    }
  }

  // 录入顺序
  handleEntrySequence = (typeDesc) => {
    const { category } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    this.inputFormRef && this.inputFormRef.showFromMaintenanceModal(componentName + typeDesc);
  }

  // 保存/暂存 10-保存；20-完成；30-审核；40-验收
  handleSave = async (statusCode) => {
    const { detailTableData, detailRowID, detailRowData } = this.state;
    let baseValues = await this.baseFormRef.handleSave();
    if (baseValues && baseValues.error) {
      message.info('请完善基本信息中的必填项。');
      return;
    }
    if (!(detailTableData && detailTableData.length > 0) || detailRowID) {
      let inputValues = await this.inputFormRef.handleSave();
      if (inputValues && inputValues.error) {
        message.error(detailRowID ? '明细列表中存在数据处于编辑状态，请完善必填信息后保存。' : '请完善制单表单中的必填项。');
        return;
      }
      if (detailRowID) {
        let detailValue = this.inputFormRef && this.inputFormRef.getFieldsValue();
        let flag = false;
        for (var keys in detailValue) {
          for (var rowKeys in detailRowData) {
            if (keys === rowKeys && detailValue[keys] !== undefined && String(detailValue[keys]) !== String(detailRowData[rowKeys])) {
              flag = true;
              break;
            }
          }
        }
        if (flag) {
          Modal.confirm({
            title: '数据修改提醒',
            content: '您当前正在修改明细数据，且数据已发生变动，是否需要先保存明细数据？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => this.handleDetailSave(),
            onCancel: () => this.handleHttpSave(statusCode, baseValues),
          });
        } else {
          this.handleHttpSave(statusCode, baseValues)
        }
      } else if (!(detailTableData && detailTableData.length > 0)) {
        message.error('请录入明细数据');
        return;
      } else {
        this.handleHttpSave(statusCode, baseValues)
      }
    } else {
      this.handleHttpSave(statusCode, baseValues)
    }
  }

  // 调用接口保存
  handleHttpSave = async (statusCode, baseValues) => {
    try {
      const { detailTableData, category, rowData } = this.state;
      let saveCode = Util.getValueByUrlStr(category, 'saveCode');
      if (!saveCode) return;
      let data = {
        params: [{
          statusCode,
          baseInfo: { ...rowData, ...baseValues },
          detailInfo: detailTableData
        }]
      }
      let res = await React.$asyncPost(this, saveCode, data);
      message.success(res?.errorMessage || '操作成功');
      this.getTableData();
    } catch (error) {
      console.log(error);
    }
  }

  // 删除明细
  handleDetailDelete = async (record, e) => {
    try {
      this.handleStopPropagation(e);
      const { category, detailRowID } = this.state;
      let detailIDIndex = Util.getValueByUrlStr(category, 'detailIDIndex');
      let deleteCode = Util.getValueByUrlStr(category, 'deleteCode');
      if (!deleteCode || !detailIDIndex) return;
      let detailDeleteIndex = detailIDIndex && typeof (detailIDIndex) === 'string' && detailIDIndex.indexOf('ID') > -1 && detailIDIndex.replace('ID', 'Arr');
      if (record && record[detailIDIndex]) { // 调用接口删除
        let data = {
          params: [{
            [detailDeleteIndex]: [record[detailIDIndex]]
          }]
        }
        let res = await React.$asyncPost(this, deleteCode, data);
        message.success(res.errorMessage || '删除成功');
      }
      this.handleRowDelete(record.key);
      if (record.key === detailRowID) {
        this.handleDetailEmpty();
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 本地删除数据
  handleRowDelete = (key) => {
    let { detailTableData } = this.state;
    detailTableData = detailTableData.filter(item => item.key !== key);
    this.setState({ detailTableData: Util.addKeyValueToDataSource(detailTableData) });
  }

  // 确认选择产品
  handleConfirmSelect = record => {
    this.getUnitSelectData(record?.unitArr || []);
    let detailRowData = { ...this.state.detailRowData, ...record };
    detailRowData.rpAmt = this.handleCalculatePrice(detailRowData?.rp || 0, detailRowData?.qty || 0); // 进价金额
    detailRowData.spAmt = this.handleCalculatePrice(detailRowData?.sp || 0, detailRowData?.qty || 0); // 售价金额
    this.setState({ detailRowData });
  }

  // 获取单位下拉数据
  getUnitSelectData = (unitArr = []) => {
    let { inputFormData } = this.state;
    for (var i = 0; i < inputFormData.length; i++) {
      let dataIndex = inputFormData[i]?.dataIndex || '';
      if (dataIndex && dataIndex.indexOf('nitID') > -1) {
        let unitKey = Util.returnDataCccordingToAttributes(inputFormData, dataIndex, 'dataIndex')?.key;
        if (unitKey !== undefined && unitArr && unitArr.length > 0) {
          this.state.inputFormData[unitKey].detailItem = unitArr;
        }
      }
    }
    this.setState({});
  }

  // 清空产品选择数据
  handleModalSelectClear = () => {
    this.setState({ detailRowData: {} });
  }

  // 撤回单据
  handleWithdrawalOfDocuments = async () => {
    try {
      const { category, rowID } = this.state;
      let idIndex = Util.getValueByUrlStr(category, 'idIndex');
      let revokeCode = Util.getValueByUrlStr(category, 'revokeCode');
      if (!idIndex) return;
      let data = {
        params: [{
          [idIndex]: rowID
        }]
      }
      let res = await React.$asyncPost(this, revokeCode, data);
      message.success(res?.errorMessage || '单据撤回成功');
      this.getTableData();
    } catch (error) {
      console.log(error)
    }
  }

  // 扫码入库
  handleScanningCodePressEnter = async () => {
    try {
      const { detailTableData, scanningCode } = this.state;
      if (!scanningCode) return;
      let data = {
        params: [{
          productNo: scanningCode
        }]
      }
      let res = await React.$asyncPost(this, '17030034', data);
      let detailObj = res && 'result' in res && Object.prototype.toString.call(res.result) === '[object Object]' ? res.result : {};
      detailObj.key = detailTableData && detailTableData.length > 0 ? detailTableData.length + 1 : 1;
      detailObj.usableQty = this.getUsableQty(detailObj);
      this.setState({ detailTableData: [...detailTableData, detailObj], scanningCode: undefined }, () => {
        setTimeout(() => {
          this.scanningRef.current?.focus();
        }, 300)
      });
    } catch (error) {
      console.log(error)
    }
  }

  // 获取查询产品名称所需参数
  getModalTableParams = () => {
    const { category, userData } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    let queryKey = componentName === 'TransferVP' ? 'frLocID' : 'locID';
    let values = this.baseFormRef && this.baseFormRef.getFieldsValue();
    return {
      [queryKey]: values && queryKey in values && values[queryKey] ? values[queryKey] : userData?.locID
    };
  }

  // 添加明细数据
  handleAddDetailData = (data) => {
    if (data && Array.isArray(data) && data.length > 0) {
      let { detailTableData } = this.state;
      this.setState({ detailTableData: Util.addKeyValueToDataSource([...detailTableData, ...data]) });
    }
  }

  render() {
    const { category, selectData, queryParams, columns, totalWidth, tableData, page, total, loading, rowData, baseFormData, detailRowData, inputFormData, detailColumns, detailLoading, detailTableData, detailTotalWidth,
      rowID, modalTotalWidth, modalTableColumns, scanningCode, spinLoading, orderModalType
    } = this.state;
    let componentName = Util.getValueByUrlStr(category, 'componentName');
    let modalTableName = Util.getValueByUrlStr(category, 'modalTableName');
    let revokeCode = Util.getValueByUrlStr(category, 'revokeCode');
    let operationFixedFlag = Util.getValueByUrlStr(category, 'operationFixedFlag');
    let detailDelete = componentName === 'ProductPriceAdjustment' ? 'N' : 'Y';

    // 列表操作
    const operationObj = {
      width: 80,
      title: '操作',
      align: 'center',
      key: 'operation',
      fixed: operationFixedFlag === 'Y' ? 'right' : null,
      render: (text, record) => (
        <span>
          <Icon type="delete" className="common-record-delete-span" style={{ color: record.deleteFlag === 'Y' ? 'red' : '#999' }}></Icon>
          {record && record.deleteFlag === 'Y' ? (
            <Popconfirm
              title="删除后不可恢复，确定要删除吗?"
              onClick={this.handleStopPropagation}
              onCancel={this.handleStopPropagation}
              onConfirm={(e) => this.handleDelete(record, e)}
            >
              <span className="span" style={{ color: 'rgba(240, 65, 52, 1)' }}>删除</span>
            </Popconfirm>
          ) : (
            <span
              style={{ color: '#999', cursor: 'no-drop', fontWeight: 'normal' }}
              onClick={this.handleStopPropagation}
            >
              删除
            </span>
          )}
        </span>
      ),
    };

    const moreBtnMenu = (
      <Menu onClick={this.handleMoreBtnClick}>
        {componentName === 'ReceiptVP' ? (
          <Menu.Item key="1">依据订单</Menu.Item>
        ) : ''}
        {componentName === 'TransferVP' ? (
          <Menu.Item key="2">已审核入库单</Menu.Item>
        ) : ''}
      </Menu>
    );

    let detailDeleteFlag = rowID ? (rowData.statusCode === '10' ? true : false) : true;
    // 明细列表操作
    const operationDetailObj = {
      width: 80,
      title: '操作',
      align: 'center',
      key: 'operation',
      fixed: 'right',
      render: (text, record) => (
        <span>
          <Icon type="delete" className="common-record-delete-span" style={{ color: detailDeleteFlag ? 'red' : '#999' }}></Icon>
          {record && detailDeleteFlag ? (
            <Popconfirm
              title="删除后不可恢复，确定要删除吗?"
              onClick={this.handleStopPropagation}
              onCancel={this.handleStopPropagation}
              onConfirm={(e) => this.handleDetailDelete(record, e)}
            >
              <span className="span" style={{ color: 'rgba(240, 65, 52, 1)' }}>删除</span>
            </Popconfirm>
          ) : (
            <span
              style={{ color: '#999', cursor: 'no-drop', fontWeight: 'normal' }}
              onClick={this.handleStopPropagation}
            >
              删除
            </span>
          )}
        </span>
      ),
    };

    // let rowSelection = {
    //   selectedRowKeys,
    //   onChange: (selectedRowKeys, selectedRows) => {
    //     this.setState({
    //       selectedRowKeys,
    //     })
    //   },
    // };

    return (
      <Row className="voucher-preparation receipt-voucher-preparation">
        <Col span={9}>
          <div style={{ paddingRight: '6px', position: 'relative', height: '100%' }}>
            <Card
              size="small"
              bordered={false}
              className="table-body-height"
              title={(
                <div className="card-title-left-img">
                  <img src={iconListvisits} alt="" />
                  {componentName === 'ReceiptVP' ? '入库单' : (componentName === 'TransferVP' ? '出库单' : (componentName === 'ReturnVP' ? '退货单' : '单据'))}列表
                </div>
              )}
            >
              <div className="flex-align-items" style={{ marginBottom: 12 }}>
                <div className="flex-align-items" style={{ marginRight: 12 }}>
                  <span className="common-input-label">{componentName === 'ProductPriceAdjustment' ? '调价日期：' : '制单日期：'}</span>
                  <RangeDatePicker
                    width="280px"
                    label=""
                    isChange={true}
                    format={dayFormat}
                    endDate={queryParams?.endDate}
                    startDate={queryParams?.startDate}
                    endChange={(e) => this.handleModifyInputValue(e, 'endDate')}
                    startChange={(e) => this.handleModifyInputValue(e, 'startDate')}
                  />
                </div>
                <span className="common-input-label">处理状态：</span>
                <Select
                  allowClear
                  showSearch
                  value={queryParams?.status}
                  placeholder="请选择"
                  optionFilterProp="search"
                  className="common-query-input"
                  style={{ width: 120, marginRight: 12 }}
                  onChange={(e) => this.handleModifyInputValue(e, 'status')}
                >
                  {React.$SelectOptions(selectData?.status || [])}
                </Select>
                <Button type="primary" onClick={this.handleQuery}>查询</Button>
              </div>
              <PubilcTablePagination
                param={{
                  page,
                  total,
                  loading,
                  componentName,
                  pageSize: '20',
                  data: tableData, // 表格数据
                  x: totalWidth, // 表格的宽度
                  y: store.getState().tableHeight.y + 49,
                  height: store.getState().tableHeight.y + 99 + 'px',
                  columns: columns && columns.length > 0 ? [...columns, operationObj] : [...this.staticColumns, operationObj], // 表头配置
                }}
                compilePage={this.compilePage}
                getColumns={this.getTableColumns}
                onClickRowPublic={this.onClickRowPublic}
                setRowClassNamePublic={this.setRowClassNamePublic}
              />
            </Card>
            <div className="common-card-right-split-line" style={{ width: 8 }}></div>
          </div>
        </Col>
        <Col span={15} className="voucher-preparation-right-card">
          <Card
            size="small"
            bordered={false}
            title={(
              <div className="card-title-left-img">
                <img src={iconMessages} alt="" />
                正在{rowID ? '编辑' : '添加'}{componentName === 'ReceiptVP' ? '入库单' : (componentName === 'TransferVP' ? '出库单' : (componentName === 'ReturnVP' ? '退货单' : '单据'))}
              </div>
            )}
            extra={(
              <>
                {/* <Button
                  ghost
                  size="small"
                  type="primary"
                  style={{ marginRight: '12px' }}
                >
                  打印
                </Button> */}
                {componentName === 'ReceiptVP' || componentName === 'TransferVP' ? (
                  <Dropdown overlay={moreBtnMenu}>
                    <Button
                      size="small"
                    >
                      辅助制单
                      <Icon type="down" />
                    </Button>
                  </Dropdown>
                ) : ''}
                <Button
                  icon="plus"
                  size="small"
                  style={{ marginLeft: '12px' }}
                  className="add-btn add-btn-nohover"
                  onClick={this.handleClearSelectData}
                >
                  新增单据
                </Button>
              </>
            )}
          >
            <Spin tip="正在初始化表单数据……" spinning={spinLoading}>
              <div className="voucher-preparation-right-card-content scroll-bar-style" style={{ height: store.getState().tableHeight.y + 181 + 'px' }}>
                <Card
                  type="inner"
                  size="small"
                  title="基本信息"
                  extra={(
                    <Button
                      size="small"
                      onClick={() => this.handleEntrySequence('')}
                    >
                      录入顺序
                    </Button>
                  )}
                >
                  <DynamicRenderingForm
                    isEnterJump='Y'
                    formItemCol={{ labelCol: 8, wrapperCol: 16, col: 6 }}
                    rowData={rowData}
                    selectData={selectData}
                    formData={baseFormData}
                    onRef={ref => this.baseFormRef = ref}
                    handleQueryFormData={this.getTableColumns}
                  />
                </Card>
                <Card
                  type="inner"
                  size="small"
                  title={componentName === 'ReceiptVP' ? '入库单' : (componentName === 'TransferVP' ? '出库单' : (componentName === 'ReturnVP' ? '退货单' : '单据')) + '明细'}
                  style={{ margin: '12px 0', minHeight: store.getState().tableHeight.y - 80 + 'px' }}
                  extra={(
                    <Button
                      size="small"
                      onClick={() => this.handleEntrySequence('Detail')}
                    >
                      录入顺序
                    </Button>
                  )}
                >
                  <DynamicRenderingForm
                    isEnterJump='Y'
                    formItemCol={{ labelCol: 8, wrapperCol: 16, col: 6 }}
                    selectData={selectData}
                    rowData={detailRowData}
                    formData={inputFormData}
                    modalTotalWidth={modalTotalWidth}
                    modalTableComponentName={modalTableName ? modalTableName : componentName + 'ModalTable'}
                    modalColumns={modalTableColumns && modalTableColumns.length > 0 ? modalTableColumns : this.staticModalTableColumns}
                    onRef={ref => this.inputFormRef = ref}
                    handleQueryFormData={this.getDetailColumns}
                    modalConfirmSelect={this.handleConfirmSelect}
                    modalSelectClear={this.handleModalSelectClear}
                    getModalTableParams={this.getModalTableParams}
                    getModalTableColumns={this.getModalTableColumns}
                  />

                  <PubilcTablePagination
                    title={componentName === 'ProductPriceAdjustment' ? '' : () => {
                      return (
                        <div className="flex-between-center">
                          <div className="flex-align-items">
                            {/* <Button
                            ghost
                            type="primary"
                            disabled={!(selectedRowKeys && selectedRowKeys.length > 0)}
                          >
                            打印标签
                          </Button> */}
                            <Input
                              ref={this.scanningRef}
                              placeholder={'扫码' + (componentName === 'ReceiptVP' ? '入库' : (componentName === 'TransferVP' ? '出库' : (componentName === 'ReturnVP' ? '退货' : '单据')))}
                              value={scanningCode}
                              style={{ width: '350px' }}
                              disabled={!detailDeleteFlag}
                              onChange={Util.commonInputChange.bind(this, 'scanningCode')}
                              onPressEnter={this.handleScanningCodePressEnter}
                            />
                          </div>
                          <div className="voucher-preparation-statistics">
                            共计：<span className="voucher-preparation-statistics-span">{detailTableData?.length || 0}</span>条记录
                            {componentName !== 'ReturnVP' ? <>
                              <span style={{ marginLeft: 12 }}>进价金额总金额：</span>
                              <span className="voucher-preparation-statistics-span" style={{ marginRight: 12 }}>{rowData?.sumRp || 0}</span>
                              售价金额总金额：<span className="voucher-preparation-statistics-span">{rowData?.sumSp || 0}</span>
                            </> : ''}
                          </div>
                        </div>
                      )
                    }}
                    param={{
                      y: 'N',
                      height: 'auto',
                      loading: detailLoading,
                      data: detailTableData, // 表格数据
                      x: detailTotalWidth, // 表格的宽度
                      componentName: componentName + 'Detail',
                      columns: detailColumns && detailColumns.length > 0 ? (detailDelete === 'Y' ? [...detailColumns, operationDetailObj] : detailColumns) : (detailDelete === 'Y' ? [...this.staticDetailColumns, operationDetailObj] : this.staticDetailColumns), // 表头配置
                    }}
                    // rowSelectionPublic={rowSelection}
                    getColumns={this.getDetailColumns}
                    onClickRowPublic={this.handleDetailRowClick}
                    setRowClassNamePublic={this.handleDetailRowClassName}
                  />
                </Card>
                <div className="voucher-preparation-right-footer flex-center-align-end">
                  <Button
                    ghost
                    type="primary"
                    style={{ marginRight: '12px' }}
                    disabled={rowID ? (rowData.statusCode === '10' || rowData.statusCode === 'No' ? false : true) : false}
                    onClick={() => this.handleSave('10')}
                  >
                    {rowID ? '确认修改' : (revokeCode ? '暂存' : '保存')}
                  </Button>
                  {revokeCode ? ( // 取消审核接口
                    <>
                      <Button
                        type="primary"
                        style={{ display: !rowID || (rowData.statusCode === '10') ? 'inline-block' : 'none' }}
                        onClick={() => this.handleSave('20')}
                      >
                        提交审核
                      </Button>
                      <Popconfirm
                        title="撤回后不可恢复，确定要撤回吗?"
                        onConfirm={this.handleWithdrawalOfDocuments}
                      >
                        <Button
                          ghost
                          type="danger"
                          style={{ display: rowData.statusCode === '20' ? 'inline-block' : 'none' }}
                        >
                          撤回单据
                        </Button>
                      </Popconfirm>
                    </>
                  ) : ''}
                </div>
              </div>
            </Spin>
          </Card>
        </Col >
        <OrderOfGlassesModal
          orderModalType={orderModalType}
          selectData={selectData}
          addDetailData={this.handleAddDetailData}
          onRef={ref => this.orderOfGlassesRef = ref}
        />
        <ReviewedReceiptVPModal addDetailData={this.handleAddDetailData} onRef={ref => this.reviewedRVPRef = ref} />
      </Row>
    )
  }
};

export default VoucherPreparation;

/*
 * 菜单参数配置及说明
 * 示例：params=componentName:ReceiptVP&selectCode:17030029&queryCode:17030030&idIndex:metStkRecID&deleteCode:17030035&queryDetailCode:17030031&detailIDIndex:metStkRecDetailID&saveCode:17030032&modalTableName:NVPReceiptVPModalTable
 * componentName - 组件名
 * selectCode - 初始化接口对应的code
 * queryCode - 查询接口
 * idIndex - 主列表行ID字段名
 * deleteCode - 删除接口对应code
 * queryDetailCode - 明细列表对应code
 * detailIDIndex - 明细列表行ID字段名
 * saveCode - 保存接口对应code
 * modalTableName - 产品名称对应的table表头名
 * 入库制单：params=componentName:ReceiptVP&selectCode:17030029&queryCode:17030030&idIndex:metStkRecID&deleteCode:17030035&queryDetailCode:17030031&detailIDIndex:metStkRecDetailID&saveCode:17030032&revokeCode:17030050&orderModalType:InOperate
 * 转移制单：params=componentName:TransferVP&selectCode:17030059&queryCode:17030060&idIndex:metStkTransferID&deleteCode:17030064&queryDetailCode:17030061&detailIDIndex:metStkTransDetailID&saveCode:17030063&modalTableName:NVPReceiptVPModalTable&revokeCode:17030065
 * 调价单：params=componentName:ProductPriceAdjustment&selectCode:17060015&queryCode:17060016&idIndex:metAdjPriceID&modalTableName:NVPReceiptVPModalTable&saveCode:17060018&deleteCode:17060019
 * 退货制单：params=componentName:ReturnVP&selectCode:17030036&queryCode:17030040&idIndex:stkReturnID&deleteCode:17030038&queryDetailCode:17030041&detailIDIndex:stkReturnDetailID&saveCode:17030037&modalTableName:NVPReceiptVPModalTable&revokeCode:17030044
 * */
