JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<html>

  <head>
    <title>不收費出貨單 - RMA銷退系統</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">


    <link href="http://192.168.88.80:8890/admin/static/bootstrap/bootstrap2/swatch/cerulean/bootstrap.min.css?v=2.3.2" rel="stylesheet">
    <link href="http://192.168.88.80:8890/admin/static/bootstrap/bootstrap2/css/bootstrap-responsive.css?v=2.3.2" rel="stylesheet">
    <link href="http://192.168.88.80:8890/admin/static/admin/css/bootstrap2/admin.css?v=1.1.1" rel="stylesheet">

    <style>
      body {
        padding-top: 4px;
      }

      .control-group:nth-of-type(8) {
        /* 單身 */
        display: none;
      }

      .control-group:nth-of-type(9) {
        /* 單身儲存結果 */
        display: none;
      }

    </style>


    <link href="http://192.168.88.80:8890/admin/static/vendor/select2/select2.css?v=3.5.2" rel="stylesheet">
    <link href="http://192.168.88.80:8890/admin/static/vendor/bootstrap-daterangepicker/daterangepicker-bs2.css?v=1.3.22" rel="stylesheet">


  </head>

  <body>

    <div class="container">
      <div class="navbar">
        <div class="navbar-inner">

          <a class="brand" href="/admin">RMA銷退系統</a>


          <ul class="nav">


            <li>
              <a href="/admin/">簡介</a>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
            銷退單<b class="caret"></b>
          </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="/admin/copti/">檢視</a>
                </li>
                <li>
                  <a href="/admin/return_form/">新建</a>
                </li>
              </ul>
            </li>

            <li>
              <a href="/admin/maintain_form/">維修單</a>
            </li>
  ...

JavaScript

now = new Date();
year = "" + now.getFullYear();
month = "" + (now.getMonth() + 1);
if (month.length == 1) {
  month = "0" + month;
}
day = "" + now.getDate();
if (day.length == 1) {
  day = "0" + day;
}
hour = "" + now.getHours();
if (hour.length == 1) {
  hour = "0" + hour;
}
minute = "" + now.getMinutes();
if (minute.length == 1) {
  minute = "0" + minute;
}
second = "" + now.getSeconds();
if (second.length == 1) {
  second = "0" + second;
}
time = year + "-" + month + "-" + day + "_" + hour + ":" + minute + ":" + second;
$('#create_time').val(time)


$.ajax({
  url: "http://192.168.88.80:8890/erp/get/copma",
  type: 'get',
  dataType: 'json',
  async: false,
  success: function(data) {
    erpdata = $.map(data, function(obj) {
      obj.id = obj.id || obj.MA001; // select2 need id&text column to choice
      obj.text = obj.text || obj.MA001; // replace name with the property used for the text
      return obj;
    });
    $("#customer_code").select2({
      width: 220,
      data: erpdata
    });
    console.log(data);
  }
});
$("#customer_code").change(function() {
  $("#customer_name").val($("#customer_code").select2('data').MA003);
})

function get_pd(pn) {
  var Data = null;
  var DataArray = [];
  var apiUrl = "http://192.168.88.80:8890/erp/get/invmb/" + pn;
  $.ajax({
    url: apiUrl,
    type: 'get',
    dataType: 'html',
    async: false,
    success: function(data) {
      Data = data;
    }
  });

  var obj = JSON.parse(Data);
  _.findIndex(obj, function(object) {
    DataArray.push(object.MB002);
  });
  return DataArray
}

$("#item_amount").change(function() {
  $("#parameters_area").parent().parent().parent().show();
  jexcel(null);
})

function jexcel(parameters_json) {
  var pnData = null;
  var pnDataArray = [];
  var apiUrl = "http://192.168.88.80:8890/erp/get/invmb";
  $.ajax({
    url: apiUrl,
    type: 'get',
    dataType: 'html',
    async: false,
    success: function(data) {
      pnData = data;
    }
  });

  var obj =...