mjava-taisen/pages/build/customer-info-query.yida.jsx

var _customState = {};

var APP_TYPE = 'APP_N9NPHVTQLPBPO8MR6WFG';
var CUSTOMER_FORM_UUID = 'FORM-NO966791YOK2XKW9DMSEGD5L1IN73UHW3ME6LR1';
var STORAGE_KEY = 'tyson.customer-info-query.selected-customer';
var requestSequence = 0;
var FIELDS = {
  customerNumber: 'textField_l6em70k2',
  customerName: 'textField_l6em70k4'
};
export function didMount() {
  var cached = null;
  try {
    cached = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || 'null');
  } catch (e) {
    cached = null;
  }
  this.setCustomState({
    keyword: cached && cached.customerNumber ? cached.customerNumber + ' - ' + (cached.customerName || '') : '',
    searching: false,
    customers: [],
    selectedCustomer: cached && cached.customerNumber ? cached : null,
    queryType: 'balance',
    querying: false,
    result: null,
    error: '',
    searchVisible: false
  });
}
export function didUnmount() {
  if (this._customerSearchTimer) {
    clearTimeout(this._customerSearchTimer);
  }
}
export function setQueryType(queryType) {
  this.setCustomState({
    queryType: queryType,
    result: null,
    error: ''
  });
  this.forceUpdate();
}
export function updateKeyword(value) {
  var self = this;
  var keyword = value || '';
  self.setCustomState({
    keyword: keyword,
    searchVisible: true,
    error: ''
  });
  self.forceUpdate();
  if (self._customerSearchTimer) {
    clearTimeout(self._customerSearchTimer);
  }
  if (keyword.trim().length < 2) {
    self.setCustomState({
      customers: [],
      searching: false
    });
    self.forceUpdate();
    return;
  }
  self._customerSearchTimer = setTimeout(function () {
    self.searchCustomers(keyword.trim());
  }, 300);
}
export function searchCustomers(keyword) {
  var self = this;
  var base = {
    formUuid: CUSTOMER_FORM_UUID,
    appType: APP_TYPE,
    currentPage: 1,
    pageSize: 20
  };
  var codeCondition = [{
    key: FIELDS.customerNumber,
    value: keyword,
    type: 'TEXT',
    operator: 'contains',
    componentName: 'TextField'
  }];
  var nameCondition = [{
    key: FIELDS.customerName,
    value: keyword,
    type: 'TEXT',
    operator: 'contains',
    componentName: 'TextField'
  }];
  self.setCustomState({
    searching: true
  });
  self.forceUpdate();
  var codeParams = {};
  var nameParams = {};
  Object.keys(base).forEach(key => {
    codeParams[key] = base[key];
    nameParams[key] = base[key];
  });
  codeParams.searchFieldJson = JSON.stringify(codeCondition);
  nameParams.searchFieldJson = JSON.stringify(nameCondition);
  return Promise.all([self.utils.yida.searchFormDatas(codeParams), self.utils.yida.searchFormDatas(nameParams)]).then(function (responses) {
    var seen = {};
    var customers = [];
    responses.forEach(response => {
      var rows = response && response.data || response && response.content && response.content.data || [];
      rows.forEach(row => {
        var formData = row.formData || {};
        var customerNumber = formData[FIELDS.customerNumber];
        if (customerNumber && !seen[customerNumber]) {
          seen[customerNumber] = true;
          customers.push({
            customerNumber: customerNumber,
            customerName: formData[FIELDS.customerName] || ''
          });
        }
      });
    });
    self.setCustomState({
      customers: customers,
      searching: false
    });
    self.forceUpdate();
  }).catch(function (error) {
    self.setCustomState({
      searching: false,
      customers: []
    });
    self.utils.toast({
      title: error && error.message ? error.message : '客户查询失败',
      type: 'error'
    });
    self.forceUpdate();
  });
}
export function selectCustomer(customer) {
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(customer));
  } catch (e) {
    // The query remains usable when browser storage is unavailable.
  }
  this.setCustomState({
    selectedCustomer: customer,
    keyword: customer.customerNumber + ' - ' + customer.customerName,
    searchVisible: false,
    customers: [],
    result: null,
    error: ''
  });
  this.forceUpdate();
}
export function clearCustomer() {
  try {
    window.localStorage.removeItem(STORAGE_KEY);
  } catch (e) {
    // Ignore storage cleanup errors.
  }
  this.setCustomState({
    keyword: '',
    selectedCustomer: null,
    customers: [],
    result: null,
    error: ''
  });
  this.forceUpdate();
}
export function queryCustomerInfo() {
  var self = this;
  var state = self.getCustomState();
  var selected = state.selectedCustomer;
  if (!selected) {
    self.utils.toast({
      title: '请先选择客户',
      type: 'warning'
    });
    return;
  }
  var dataSourceName = state.queryType === 'balance' ? 'customerBalance' : 'customerUnlockOrders';
  var dataSource = self.dataSourceMap && self.dataSourceMap[dataSourceName];
  if (!dataSource || !dataSource.load) {
    var availableDataSources = self.dataSourceMap ? Object.keys(self.dataSourceMap).join(', ') : '未初始化';
    var message = '查询数据源不可用：' + dataSourceName + '；当前数据源：' + availableDataSources;
    self.setCustomState({
      error: message,
      result: null
    });
    self.utils.toast({
      title: message,
      type: 'error'
    });
    self.forceUpdate();
    return;
  }
  self.setCustomState({
    querying: true,
    error: '',
    result: null
  });
  self.forceUpdate();
  var request = {
    inputs: JSON.stringify({
      Headers: {
        'Content-Type': 'application/json'
      },
      Query: {},
      Body: {
        requestID: self.createRequestId(),
        CUSTOMER_NUMBER: selected.customerNumber,
        CUSTOMER_NAME: selected.customerName
      }
    })
  };
  try {
    return Promise.resolve(dataSource.load(request)).then(function (result) {
      var response = result && result.Response !== undefined ? result.Response : result;
      response = response && response.content !== undefined ? response.content : response;
      response = response && response.serviceReturnValue !== undefined ? response.serviceReturnValue : response;
      if (typeof response === 'string') {
        try {
          response = JSON.parse(response);
        } catch (e) {
          // Preserve the original value so the query can still recover gracefully.
        }
      }
      self.setCustomState({
        querying: false,
        result: response || {}
      });
      self.forceUpdate();
    }).catch(function (error) {
      self.setCustomState({
        querying: false,
        result: null,
        error: error && error.message ? error.message : 'SAP查询失败'
      });
      self.utils.toast({
        title: error && error.message ? error.message : 'SAP查询失败',
        type: 'error'
      });
      self.forceUpdate();
    });
  } catch (error) {
    self.setCustomState({
      querying: false,
      result: null,
      error: error && error.message ? error.message : 'SAP查询初始化失败'
    });
    self.utils.toast({
      title: error && error.message ? error.message : 'SAP查询初始化失败',
      type: 'error'
    });
    self.forceUpdate();
  }
}
export function createRequestId() {
  requestSequence += 1;
  if (window.crypto && window.crypto.randomUUID) {
    return window.crypto.randomUUID();
  }
  if (window.crypto && window.crypto.getRandomValues) {
    var values = new Uint32Array(4);
    window.crypto.getRandomValues(values);
    return values[0].toString(16) + '-' + values[1].toString(16) + '-' + values[2].toString(16) + '-' + values[3].toString(16);
  }
  return Date.now().toString(36) + '-' + requestSequence.toString(36) + '-' + Math.random().toString(36).slice(2);
}
export function formatAmount(value) {
  var amount = Number(value || 0);
  if (isNaN(amount)) {
    return value || '-';
  }
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}
export function formatDate(value) {
  if (!value) {
    return value || '-';
  }
  var text = String(value);
  if (text.length === 8) {
    return text.slice(0, 4) + '-' + text.slice(4, 6) + '-' + text.slice(6, 8);
  }
  var matched = text.match(/^(\d{4}-\d{2}-\d{2})/);
  return matched ? matched[1] : text;
}
export function formatTime(value) {
  if (!value) {
    return '-';
  }
  var matched = String(value).match(/T(\d{2}:\d{2}:\d{2})/);
  return matched ? matched[1] : String(value);
}
export function renderBalanceSummary(result) {
  return <div style={styles.balanceSummary}><div><span style={styles.summaryLabel}>客户组</span><strong>{result.CUSTOMER_GROUP || '-'}</strong></div><div><span style={styles.summaryLabel}>客户组描述</span><strong>{result.CUSTOMER_GROUP_DESC || '-'}</strong></div><div><span style={styles.summaryLabel}>总风险金额</span><strong style={styles.summaryAmount}>{this.formatAmount(result.TOTAL_RISK_AMT)}</strong></div></div>;
}
export function renderBalance(state, mobile) {
  var result = state.result || {};
  var items = result.ITEM || [];
  if (!items.length) {
    return <div style={styles.empty}>未查询到余额数据</div>;
  }
  return <div>{this.renderBalanceSummary(result)}<div style={styles.tableWrap}><table className="customer-query-table" style={styles.table}><thead><tr><th>公司代码</th><th>币种</th><th>未结金额</th></tr></thead><tbody>{items.map((item, index) => <tr key={index}><td>{item.COMPANY_CODE || '-'}</td><td>{item.CURRENCY || '-'}</td><td style={styles.amountHighlight}>{this.formatAmount(item.OUTSTAND_AMT)}</td></tr>)}</tbody></table></div></div>;
}
export function renderOrders(state, mobile) {
  var items = state.result && state.result.ITEM || [];
  if (!items.length) {
    return <div style={styles.empty}>未查询到收款解锁订单</div>;
  }
  return <div style={styles.tableWrap}><table className="customer-query-table" style={styles.table}><thead><tr><th>客户编码</th><th>客户名称</th><th>公司代码</th><th>销售订单号</th><th>销售组织</th><th>订单金额</th><th>币种</th><th>释放日期</th><th>释放时间</th><th>状态</th></tr></thead><tbody>{items.map((item, index) => <tr key={index}><td>{item.CUSTOMER_NUMBER || '-'}</td><td style={styles.nameCell}>{item.CUSTOMER_NAME || '-'}</td><td>{item.COMPANY_CODE || '-'}</td><td style={styles.orderCell}>{item.SALES_ORDER || '-'}</td><td>{item.SALES_ORG || '-'}</td><td style={styles.amountCell}>{this.formatAmount(item.SALES_AMOUNT)}</td><td>{item.CURRENCY || '-'}</td><td>{this.formatDate(item.RELEASE_DATE)}</td><td>{this.formatTime(item.RELEASE_TIME)}</td><td><span style={item.RELEASE_STATUS === 'S' ? styles.statusSuccess : styles.statusError}>{item.RELEASE_STATUS === 'S' ? '成功' : '失败'}</span></td></tr>)}</tbody></table></div>;
}
export function renderJsx() {
  var self = this;
  var state = self.getCustomState();
  var mobile = self.utils.isMobile();
  var selected = state.selectedCustomer;
  var result = state.result;
  return <div style={styles.page}>
    <style>{'.customer-query-table th{background:#EEF4F0;color:#405149;font-weight:700;white-space:nowrap;padding:10px 12px;border-bottom:1px solid #D7E1DB}.customer-query-table td{padding:9px 12px;border-bottom:1px solid #E7ECE9;white-space:nowrap}.customer-query-table tbody tr:last-child td{border-bottom:0}.customer-query-table tbody tr:nth-child(even){background:#FAFCFB}.customer-query-table tbody tr:hover{background:#F1F6F3}'}</style>
    <div style={styles.shell}>
      <div style={styles.header}><div><div style={styles.eyebrow}>CUSTOMER SERVICE</div><h1 style={styles.title}>客户信息查询</h1><p style={styles.subtitle}>查询客户余额与收款解锁订单</p></div></div>
      <section style={styles.panel}>
        <div style={mobile ? styles.queryStack : styles.queryRow}>
          <div style={styles.customerField}>
            <div style={styles.fieldLabel}>选择客户</div>
            <div style={styles.searchWrap}>
              <input key={selected ? selected.customerNumber : 'empty'} defaultValue={state.keyword || ''} placeholder="输入客户编码或名称，至少 2 个字符" onChange={e => {
                self.updateKeyword(e.target.value);
              }} onFocus={e => {
                self.setCustomState({
                  searchVisible: true
                });
                self.forceUpdate();
              }} style={styles.input} />
              {selected && <button type="button" onClick={e => {
                self.clearCustomer();
              }} style={styles.clearButton}>清除</button>}
              {state.searchVisible && (state.searching || state.customers && state.customers.length > 0) && <div style={styles.searchMenu}>
                {state.searching && <div style={styles.searchHint}>正在搜索客户...</div>}
                {!state.searching && state.customers.map(customer => <button type="button" key={customer.customerNumber} onClick={e => {
                  self.selectCustomer(customer);
                }} style={styles.customerOption}><b>{customer.customerNumber}</b><span>{customer.customerName || '未维护名称'}</span></button>)}
              </div>}
            </div>
          </div>
          <div style={styles.queryTypeField}>
            <div style={styles.fieldLabel}>查询内容</div>
            <div style={styles.typeRow}>
              <button type="button" onClick={e => {
                self.setQueryType('balance');
              }} style={state.queryType === 'balance' ? styles.typeActive : styles.typeButton}>客户余额</button>
              <button type="button" onClick={e => {
                self.setQueryType('unlockOrders');
              }} style={state.queryType === 'unlockOrders' ? styles.typeActive : styles.typeButton}>收款解锁订单</button>
            </div>
          </div>
          <div style={styles.queryActionField}>
            <div style={styles.fieldLabel}>操作</div>
            <button type="button" disabled={state.querying} onClick={e => {
              if (!selected) {
                self.setCustomState({
                  error: '请先选择客户后再查询',
                  result: null
                });
                self.forceUpdate();
                return;
              }
              self.queryCustomerInfo();
            }} style={state.querying || !selected ? styles.queryDisabled : styles.queryButton}>{state.querying ? '查询中...' : '查询'}</button>
          </div>
        </div>
        {!selected && <div style={styles.validationHint}>请选择客户后再查询</div>}
      </section>
      {state.error && <div style={styles.error}>{state.error}</div>}
      {result && <section style={styles.resultPanel}>
        <div style={styles.resultHeader}><div><div style={styles.eyebrow}>{state.queryType === 'balance' ? 'BALANCE' : 'UNLOCKED ORDERS'}</div><h2 style={styles.resultTitle}>{state.queryType === 'balance' ? '客户余额' : '收款解锁订单'}</h2></div><div style={styles.customerSummary}>{(result.CUSTOMER_NUMBER || selected && selected.customerNumber || '-') + '  ' + (result.CUSTOMER_NAME || selected && selected.customerName || '')}</div></div>
        {state.queryType === 'balance' ? self.renderBalance(state, mobile) : self.renderOrders(state, mobile)}
      </section>}
      {!result && !state.error && <div style={styles.empty}>选择客户和查询内容后，可查看对应的 SAP 信息。</div>}
    </div>
    <div style={{
      display: 'none'
    }}>{this.state && this.state.timestamp}</div>
  </div>;
}
var styles = {
  page: {
    minHeight: '100vh',
    background: '#F4F6F5',
    color: '#17211E',
    fontFamily: 'Microsoft YaHei, Arial, sans-serif',
    padding: '20px 16px 40px'
  },
  shell: {
    maxWidth: 1120,
    margin: '0 auto'
  },
  header: {
    padding: '12px 0 22px',
    borderBottom: '1px solid #DCE3DF',
    marginBottom: 20,
    textAlign: 'center'
  },
  eyebrow: {
    color: '#3B6C55',
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: 1.2,
    marginBottom: 6
  },
  title: {
    margin: 0,
    fontSize: 28,
    lineHeight: 1.2,
    letterSpacing: '-0.5px'
  },
  subtitle: {
    margin: '8px 0 0',
    color: '#66746E',
    fontSize: 14
  },
  panel: {
    background: '#FFFFFF',
    border: '1px solid #DCE3DF',
    padding: 20,
    boxShadow: '0 10px 28px rgba(25,48,38,.06)'
  },
  fieldLabel: {
    color: '#405149',
    fontSize: 13,
    fontWeight: 700,
    margin: '0 0 8px'
  },
  queryRow: {
    display: 'flex',
    alignItems: 'flex-end',
    gap: 14
  },
  queryStack: {
    display: 'flex',
    flexDirection: 'column',
    gap: 14
  },
  customerField: {
    flex: 1,
    minWidth: 260
  },
  queryTypeField: {
    width: 300
  },
  queryActionField: {
    width: 110
  },
  searchWrap: {
    position: 'relative'
  },
  input: {
    width: '100%',
    boxSizing: 'border-box',
    minHeight: 46,
    border: '1px solid #B7C5BD',
    borderRadius: 4,
    padding: '0 72px 0 13px',
    fontSize: 15,
    outline: 'none',
    background: '#fff'
  },
  clearButton: {
    position: 'absolute',
    right: 8,
    top: 8,
    border: 0,
    background: '#EEF3F0',
    color: '#466253',
    minHeight: 30,
    borderRadius: 3,
    padding: '0 10px',
    cursor: 'pointer'
  },
  searchMenu: {
    position: 'absolute',
    zIndex: 20,
    top: 49,
    left: 0,
    right: 0,
    maxHeight: 280,
    overflowY: 'auto',
    background: '#fff',
    border: '1px solid #B7C5BD',
    boxShadow: '0 12px 24px rgba(22,43,34,.14)'
  },
  searchHint: {
    padding: 14,
    color: '#66746E',
    fontSize: 13
  },
  customerOption: {
    display: 'flex',
    width: '100%',
    minHeight: 48,
    padding: '10px 13px',
    gap: 12,
    alignItems: 'center',
    border: 0,
    borderBottom: '1px solid #EDF1EE',
    background: '#fff',
    textAlign: 'left',
    cursor: 'pointer',
    color: '#17211E'
  },
  typeRow: {
    display: 'flex',
    gap: 8
  },
  typeStack: {
    display: 'flex',
    flexDirection: 'column',
    gap: 10
  },
  typeButton: {
    flex: 1,
    minHeight: 44,
    border: '1px solid #B7C5BD',
    borderRadius: 4,
    background: '#fff',
    color: '#405149',
    fontSize: 14,
    cursor: 'pointer'
  },
  typeActive: {
    flex: 1,
    minHeight: 44,
    border: '1px solid #24563E',
    borderRadius: 4,
    background: '#24563E',
    color: '#fff',
    fontSize: 14,
    fontWeight: 700,
    cursor: 'pointer'
  },
  queryButton: {
    width: '100%',
    minHeight: 46,
    border: 0,
    borderRadius: 4,
    background: '#D76F2B',
    color: '#fff',
    fontSize: 15,
    fontWeight: 700,
    cursor: 'pointer'
  },
  queryDisabled: {
    width: '100%',
    minHeight: 46,
    border: 0,
    borderRadius: 4,
    background: '#C8D0CB',
    color: '#FFFFFF',
    fontSize: 15,
    fontWeight: 700,
    cursor: 'not-allowed'
  },
  validationHint: {
    marginTop: 8,
    color: '#9B3D15',
    fontSize: 12
  },
  resultPanel: {
    background: '#FFFFFF',
    border: '1px solid #DCE3DF',
    margin: '20px auto 0',
    padding: 24,
    maxWidth: 1120,
    boxSizing: 'border-box'
  },
  resultHeader: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    gap: 8,
    borderBottom: '1px solid #E7ECE9',
    paddingBottom: 16,
    marginBottom: 18,
    textAlign: 'center'
  },
  resultTitle: {
    margin: 0,
    fontSize: 22
  },
  customerSummary: {
    color: '#5D6B64',
    fontSize: 13,
    textAlign: 'center'
  },
  balanceSummary: {
    display: 'flex',
    justifyContent: 'center',
    gap: 40,
    marginBottom: 18,
    padding: '14px 18px',
    background: '#F6F9F7',
    border: '1px solid #DDE6E0',
    color: '#405149',
    textAlign: 'center'
  },
  summaryLabel: {
    display: 'block',
    marginBottom: 5,
    color: '#718078',
    fontSize: 12,
    fontWeight: 400
  },
  summaryAmount: {
    color: '#1D6141',
    fontVariantNumeric: 'tabular-nums'
  },
  empty: {
    padding: '36px 18px',
    marginTop: 20,
    textAlign: 'center',
    color: '#7A8881',
    background: '#FFFFFF',
    border: '1px dashed #C9D5CE',
    fontSize: 14
  },
  error: {
    marginTop: 20,
    padding: '12px 14px',
    background: '#FFF1EB',
    border: '1px solid #F1B895',
    color: '#9B3D15',
    fontSize: 14
  },
  tableWrap: {
    overflowX: 'auto',
    border: '1px solid #DDE6E0',
    borderRadius: 4,
    background: '#FFFFFF'
  },
  table: {
    width: '100%',
    borderCollapse: 'collapse',
    fontSize: 13,
    minWidth: 620,
    textAlign: 'center',
    lineHeight: 1.35
  },
  amountCell: {
    textAlign: 'right',
    fontVariantNumeric: 'tabular-nums'
  },
  amountHighlight: {
    textAlign: 'right',
    color: '#1D6141',
    fontWeight: 700,
    fontVariantNumeric: 'tabular-nums'
  },
  nameCell: {
    textAlign: 'left',
    minWidth: 150
  },
  orderCell: {
    fontFamily: 'Consolas, monospace',
    fontWeight: 700
  },
  mobileCard: {
    border: '1px solid #DFE7E2',
    padding: 15,
    marginBottom: 10,
    background: '#FBFCFB'
  },
  cardTop: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 14
  },
  currency: {
    color: '#5F6E66',
    fontSize: 12
  },
  metric: {
    display: 'flex',
    justifyContent: 'space-between',
    gap: 12,
    padding: '8px 0',
    borderTop: '1px solid #E7ECE9',
    color: '#64726B',
    fontSize: 13
  },
  highlight: {
    color: '#1D6141',
    fontWeight: 700
  },
  detailGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '8px 12px',
    fontSize: 13,
    color: '#64726B'
  },
  statusSuccess: {
    display: 'inline-block',
    padding: '3px 8px',
    borderRadius: 12,
    color: '#1D6141',
    background: '#E4F1E8',
    fontSize: 12,
    fontWeight: 700
  },
  statusError: {
    display: 'inline-block',
    padding: '3px 8px',
    borderRadius: 12,
    color: '#A83B27',
    background: '#FCE9E4',
    fontSize: 12,
    fontWeight: 700
  }
};

export function getCustomState(key) {
  if (typeof _customState === "undefined") {
    return key ? undefined : {};
  }
  if (key) {
    return _customState[key];
  }
  return Object.assign({}, _customState);
}

export function setCustomState(newState) {
  if (typeof _customState === "undefined") {
    return;
  }
  Object.keys(newState || {}).forEach(function(key) {
    _customState[key] = newState[key];
  });
  this.forceUpdate();
}

export function forceUpdate() {
  this.setState({ timestamp: new Date().getTime() });
}