node-swallowjs/src/tags/ResolveDomain.jsx

epp portal

var ResolveDomain = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {
            domain: '',
            record: [],
            value: ''
        }
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        api.pdns('list', nextState.id, {}, function(code, data) {
            switch(code) {
            case '1000':
                this.shouldUpdate = true;
                data.push({
                    name: '',
                    type: 'A',
                    content: '',
                    ttl: '',
                    prio: ''
                });
                this.setState({domain:nextState.id, record:data, value:''}, function() {
                    this.shouldUpdate = false;
                });
                break;
            case '2004':
                this.shouldUpdate = true;
                this.setState({domain:nextState.id, record:[], value:'域名解析服务器需要设置为：'+data.join(' ')}, function() {
                    this.shouldUpdate = false;
                });
                break;
            default:
                logout();
            }
        }.bind(this));
        return false;
    },
    handler(action, record) {
        api.pdns(action, this.state.domain, record, function(code, data) {
            switch(code) {
            case '1000':
                this.setState({value: '操作成功！'});
                break;
            case '2501':
                logout();
                break;
            default:
                alert(data);
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
              <table className="datatable" width="100%">
              <tbody>
                <tr>
                  <td colSpan="6">{this.props.children}</td>
                </tr>
                <tr>
                  <td colSpan="6">{this.state.domain}</td>
                </tr>
                <tr>
                  <td>NAME</td>
                  <td>TYPE</td>
                  <td>CONTENT</td>
                  <td>TTL</td>
                  <td>PRIO</td>
                  <td>操作</td>
                </tr>
                {this.state.record.map(function(record, i) {
                    switch(record.type) {
                    case 'SOA':
                        return (
                            <tr key={record.id}>
                              <td>{record.name}</td>
                              <td>{record.type}</td>
                              <td>{record.content}</td>
                              <td>{record.ttl}</td>
                              <td></td>
                              <td></td>
                            </tr>
                        );
                    default:
                        return record.id ? (
                            <tr key={record.id}>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].name',
                                  type: 'text',
                                  size: 5
                              })}/></td>
                              <td><SelectType {...this.linkState({name: 'record['+i+'].type'})}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].content',
                                  type: 'text',
                                  size: 40
                              })}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].ttl',
                                  type: 'text',
                                  size: 6
                              })}/></td>
                              <td>{record.type==='MX' ? <input {...this.linkState({
                                  name: 'record['+i+'].prio',
                                  type: 'text',
                                  size: 2
                              })}/> : ''}</td>
                              <td><a onClick={this.handler.bind(this, 'add', record)}>修改</a> |
                                  <a onClick={this.handler.bind(this, 'remove', record)}>删除</a></td>
                            </tr>
                        ) : (
                            <tr key={0}>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].name',
                                  type: 'text',
                                  size: 5
                              })}/></td>
                              <td><SelectType {...this.linkState({name: 'record['+i+'].type'})}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].content',
                                  type: 'text',
                                  size: 40
                              })}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].ttl',
                                  type: 'text',
                                  size: 6
                              })}/></td>
                              <td>{record.type==='MX' ? <input {...this.linkState({
                                  name: 'record['+i+'].prio',
                                  type: 'text',
                                  size: 2
                              })}/> : ''}</td>
                              <td><a onClick={this.handler.bind(this, 'add', record)}>添加</a></td>
                            </tr>
                        );
                    }
                }.bind(this))}
              </tbody>
              </table>
              <OpResult content={this.state.value} />
            </div>
        );
    }
});