mirror of
https://github.com/KevinMidboe/linguist.git
synced 2025-10-29 01:30:22 +00:00
241 lines
11 KiB
TypeScript
241 lines
11 KiB
TypeScript
// Fixture taken from https://github.com/jcingroup/C551608_Roki/blob/master/Work.WebProj/Scripts/src/tsx/m-parm.tsx
|
||
|
||
import $ = require('jquery');
|
||
import React = require('react');
|
||
import ReactDOM = require('react-dom');
|
||
import Moment = require('moment');
|
||
import ReactBootstrap = require("react-bootstrap");
|
||
import CommCmpt = require('comm-cmpt');
|
||
import CommFunc = require('comm-func');
|
||
|
||
namespace Parm {
|
||
interface ParamData {
|
||
Email?: string;
|
||
PurchaseTotal?: number;
|
||
HomoiothermyFee?: number;
|
||
RefrigerFee?: number;
|
||
AccountName?: string;
|
||
BankName?: string;
|
||
BankCode?: string;
|
||
AccountNumber?: string;
|
||
Fee?: number;
|
||
}
|
||
export class GridForm extends React.Component<any, { param?: ParamData }>{
|
||
|
||
|
||
constructor() {
|
||
|
||
super();
|
||
this.queryInitData = this.queryInitData.bind(this);
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
this.componentDidMount = this.componentDidMount.bind(this);
|
||
this.setInputValue = this.setInputValue.bind(this);
|
||
this.render = this.render.bind(this);
|
||
this.state = {
|
||
param: {
|
||
Email: null,
|
||
PurchaseTotal: 0,
|
||
HomoiothermyFee: 0,
|
||
RefrigerFee:0,
|
||
AccountName: null,
|
||
BankName: null,
|
||
BankCode: null,
|
||
AccountNumber: null,
|
||
Fee: 0
|
||
}
|
||
}
|
||
}
|
||
static defaultProps = {
|
||
apiInitPath: gb_approot + 'Active/ParmData/aj_ParamInit',
|
||
apiPath: gb_approot + 'api/GetAction/PostParamData'
|
||
}
|
||
componentDidMount() {
|
||
this.queryInitData();
|
||
}
|
||
queryInitData() {
|
||
CommFunc.jqGet(this.props.apiInitPath, {})
|
||
.done((data, textStatus, jqXHRdata) => {
|
||
this.setState({ param: data });
|
||
})
|
||
.fail((jqXHR, textStatus, errorThrown) => {
|
||
CommFunc.showAjaxError(errorThrown);
|
||
});
|
||
}
|
||
handleSubmit(e: React.FormEvent) {
|
||
|
||
e.preventDefault();
|
||
CommFunc.jqPost(this.props.apiPath, this.state.param)
|
||
.done((data, textStatus, jqXHRdata) => {
|
||
if (data.result) {
|
||
CommFunc.tosMessage(null, '修改完成', 1);
|
||
} else {
|
||
alert(data.message);
|
||
}
|
||
})
|
||
.fail((jqXHR, textStatus, errorThrown) => {
|
||
CommFunc.showAjaxError(errorThrown);
|
||
});
|
||
return;
|
||
}
|
||
handleOnBlur(date) {
|
||
|
||
}
|
||
setInputValue(name: string, e: React.SyntheticEvent) {
|
||
let input: HTMLInputElement = e.target as HTMLInputElement;
|
||
let obj = this.state.param;
|
||
obj[name] = input.value;
|
||
this.setState({ param: obj });
|
||
}
|
||
render() {
|
||
|
||
var outHtml: JSX.Element = null;
|
||
|
||
let param = this.state.param;
|
||
let InputDate = CommCmpt.InputDate;
|
||
|
||
outHtml = (
|
||
<div>
|
||
<ul className="breadcrumb">
|
||
<li><i className="fa-list-alt"></i>
|
||
{this.props.menuName}
|
||
</li>
|
||
</ul>
|
||
<h4 className="title"> {this.props.caption} 基本資料維護</h4>
|
||
<form className="form-horizontal" onSubmit={this.handleSubmit}>
|
||
<div className="col-xs-12">
|
||
<div className="item-box">
|
||
{/*--email--*/}
|
||
<div className="item-title text-center">
|
||
<h5>Email信箱設定</h5>
|
||
</div>
|
||
<div className="alert alert-warning" role="alert">
|
||
<ol>
|
||
<li>多筆信箱請用「<strong className="text-danger">, </strong>」逗號分開。<br />ex.<strong>user1 @demo.com.tw, user2 @demo.com.tw</strong></li>
|
||
<li>Email 前面可填收件人姓名，用「<strong className="text-danger">: </strong>」冒號分隔姓名和信箱，此項非必要，可省略。<br />ex.<strong>收件人A: user1 @demo.com.tw, 收件人B: user2 @demo.com.tw</strong></li>
|
||
</ol>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-1 control-label">收件信箱</label>
|
||
<div className="col-xs-9">
|
||
<input className="form-control" type="text"
|
||
value={param.Email}
|
||
onChange={this.setInputValue.bind(this, 'Email') }
|
||
maxLength={500}
|
||
required/>
|
||
</div>
|
||
</div>
|
||
{/*--email end--*/}
|
||
{/*--shoppingCost--*/}
|
||
<div className="item-title text-center">
|
||
<h5>訂單運費設定</h5>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-3 control-label">會員下訂單，當訂單金額少於NT$</label>
|
||
<div className="col-xs-1">
|
||
<input className="form-control" type="number"
|
||
value={param.PurchaseTotal}
|
||
onChange={this.setInputValue.bind(this, 'PurchaseTotal') }
|
||
min={0}
|
||
required/>
|
||
</div>
|
||
<label className="col-xs-2 control-label">元時須付常溫運費NT$</label>
|
||
<div className="col-xs-1">
|
||
<input className="form-control" type="number"
|
||
value={param.HomoiothermyFee}
|
||
onChange={this.setInputValue.bind(this, 'HomoiothermyFee') }
|
||
min={0}
|
||
required/>
|
||
</div>
|
||
<label className="col-xs-2 control-label">元或冷凍(冷藏)運費NT$</label>
|
||
<div className="col-xs-1">
|
||
<input className="form-control" type="number"
|
||
value={param.RefrigerFee}
|
||
onChange={this.setInputValue.bind(this, 'RefrigerFee') }
|
||
min={0}
|
||
required/>
|
||
</div>
|
||
<label className="col-xs-1 control-label">元</label>
|
||
</div>
|
||
|
||
{/*--shoppingCost end--*/}
|
||
{/*--Payment--*/}
|
||
<div className="item-title text-center">
|
||
<h5>付款方式</h5>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-4 control-label">當付款方式選擇『ATM轉帳』時，銀行帳號資料為: </label>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-2 control-label">戶名: </label>
|
||
<div className="col-xs-3">
|
||
<input className="form-control" type="text"
|
||
value={param.AccountName}
|
||
onChange={this.setInputValue.bind(this, 'AccountName') }
|
||
maxLength={16}
|
||
required/>
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-2 control-label">銀行: </label>
|
||
<div className="col-xs-3">
|
||
<input className="form-control" type="text"
|
||
value={param.BankName}
|
||
onChange={this.setInputValue.bind(this, 'BankName') }
|
||
maxLength={16}
|
||
required/>
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-2 control-label">代碼: </label>
|
||
<div className="col-xs-3">
|
||
<input className="form-control" type="text"
|
||
value={param.BankCode}
|
||
onChange={this.setInputValue.bind(this, 'BankCode') }
|
||
maxLength={5}
|
||
required/>
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="col-xs-2 control-label">帳號: </label>
|
||
<div className="col-xs-3">
|
||
<input className="form-control" type="text"
|
||
value={param.AccountNumber}
|
||
onChange={this.setInputValue.bind(this, 'AccountNumber') }
|
||
maxLength={16}
|
||
required/>
|
||
</div>
|
||
</div>
|
||
{/*<div className="form-group">
|
||
<label className="col-xs-4 control-label">當付款方式選擇『貨到付款』時，須加NT$ </label>
|
||
<div className="col-xs-1">
|
||
<input className="form-control" type="number"
|
||
value={param.Fee}
|
||
onChange={this.setInputValue.bind(this, 'Fee') }
|
||
min={0}
|
||
required/>
|
||
</div>
|
||
<label className="control-label">元手續費</label>
|
||
</div>*/}
|
||
{/*--Payment end--*/}
|
||
</div>
|
||
|
||
|
||
|
||
<div className="form-action">
|
||
<div className="col-xs-4 col-xs-offset-5">
|
||
<button type="submit" className="btn-primary"><i className="fa-check"></i> 儲存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
|
||
return outHtml;
|
||
}
|
||
}
|
||
}
|
||
|
||
var dom = document.getElementById('page_content');
|
||
ReactDOM.render(<Parm.GridForm caption={gb_caption} menuName={gb_menuname} iconClass="fa-list-alt" />, dom);
|