Skip to content
website.component.html 14.1 KiB
Newer Older
wangqinghua's avatar
wangqinghua committed
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisible" nzTitle="{{title}}" [nzFooter]="null" (nzOnCancel)="handleCancel()"
wangqinghua's avatar
wangqinghua committed
          (nzOnOk)="handleOk()">
    <nz-tabset [nzSelectedIndex]="tabNum" style="padding-bottom: 25px;min-height: 500px">
        <nz-tab nzTitle="1.场景">
            <div nz-form class="ant-advanced-search-form form-select">
                <form nz-form class="ant-advanced-search-form">
                    <nz-collapse>
                        <nz-collapse-panel nzHeader="基本属性" [nzActive]="true">
                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-label [nzSpan]="6" nzRequired nzFor="name">网站名称</nz-form-label>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-control [nzSpan]="14">
                                            <input id="name" name="name" nz-input placeholder="默认" [(ngModel)]="validateForm.name">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>

                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
                                        <nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="delay">更新间隔</nz-form-label>
                                        <nz-form-control [nzSpan]="14">
                                            <input id="delay" name="delay" nz-input placeholder="默认" [(ngModel)]="validateForm.delay">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
                                        <nz-form-label [nzSpan]="6" nzFor="retries">尝试次数</nz-form-label>
                                        <nz-form-control [nzSpan]="14">
                                            <input id="retries" name="retries" nz-input placeholder="默认" [(ngModel)]="validateForm.retries">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>

                                <div nz-col [nzSpan]="12">
                                    <nz-form-item nzFlex>
                                        <nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="hostid">客户端
                                        </nz-form-label>
                                        <nz-form-control [nzSpan]="14">
                                            <nz-select name="equipmentType" nzPlaceHolder="选择设备类型" [(ngModel)]="validateForm.hostid">
                                                <nz-option nzValue="是" nzLabel="是"></nz-option>
                                            </nz-select>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="24">
                                    <nz-form-item nzFlex>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-label [nzSpan]="3" nzFor="http_proxy">Http代理</nz-form-label>
wangqinghua's avatar
wangqinghua committed
                                        <nz-form-control [nzSpan]="18">
                                            <input id="http_proxy" name="http_proxy" nz-input placeholder="默认"
                                                   [(ngModel)]="validateForm.http_proxy">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>
                        </nz-collapse-panel>

                        <nz-collapse-panel nzHeader="高级属性" [nzActive]="true">
                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="2">
                                    变量
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    >=
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    X
                                </div>
                            </div>

                            <div nz-row [nzGutter]="24">
                                <div nz-col [nzSpan]="2">
                                    头部
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    >=
                                </div>
                                <div nz-col [nzSpan]="10">
                                    <nz-form-item nzFlex>
                                        <nz-form-control [nzSpan]="14">
                                            <input  name="ipmi_username" nz-input placeholder="默认">
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col [nzSpan]="1">
                                    X
                                </div>
                            </div>
                        </nz-collapse-panel>
                    </nz-collapse>

                </form>

            </div>

            <div class="modal-footer-btn">
                <button nz-button (click)="handleCancel()" nzType="primary">取消</button>
                <button nz-button (click)="tabsChange(1)" nzType="primary">下一步</button>
            </div>
        </nz-tab>

        <nz-tab nzTitle="2.步骤">
wangqinghua's avatar
wangqinghua committed
                    <button (click)="addStep()" nz-button nzType="default">添加步骤</button>
                    <div>
wangqinghua's avatar
wangqinghua committed
                        <div nz-row [nzGutter]="24">
                            <div nz-col  [nzSpan]="1">
                                No
                            </div>
                            <div nz-col [nzSpan]="3">
                                步骤名称
                            </div>
                            <div nz-col [nzSpan]="3">
                                超时
                            </div>
                            <div nz-col [nzSpan]="3">
                                URL
                            </div>
                            <div nz-col [nzSpan]="3">
                                要求字串
                            </div>
                            <div nz-col [nzSpan]="3">
                                要求状态码
                            </div>
                            <div nz-col [nzSpan]="3">
                                跟随调整
                            </div>
                            <div nz-col [nzSpan]="1">

                            </div>
                        </div>
wangqinghua's avatar
wangqinghua committed
                        <div nz-row [nzGutter]="12" *ngFor="let item of steps;let i = index;">
wangqinghua's avatar
wangqinghua committed
                            <div nz-col [nzSpan]="1">
wangqinghua's avatar
wangqinghua committed
                                {{i +1}}
wangqinghua's avatar
wangqinghua committed
                            </div>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <input nz-input placeholder="名称" [(ngModel)]="item.name">
wangqinghua's avatar
wangqinghua committed
                            </nz-form-control>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <input nz-input placeholder="15" [(ngModel)]="item.timeout">
wangqinghua's avatar
wangqinghua committed
                            </nz-form-control>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <input nz-input placeholder=""  [(ngModel)]="item.url">
wangqinghua's avatar
wangqinghua committed
                            </nz-form-control>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <input nz-input placeholder="" [(ngModel)]="item.posts">
wangqinghua's avatar
wangqinghua committed
                            </nz-form-control>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <input nz-input placeholder="200" [(ngModel)]="item.status_codes">
wangqinghua's avatar
wangqinghua committed
                            </nz-form-control>
                            <nz-form-control nz-col [nzSpan]="3">
wangqinghua's avatar
wangqinghua committed
                                <nz-select name="equipmentType" nzPlaceHolder="是否跟随跳转" [(ngModel)]="item.follow_redirects">
                                    <nz-option nzValue="1" nzLabel="是"></nz-option>
                                    <nz-option nzValue="0" nzLabel="否"></nz-option>
wangqinghua's avatar
wangqinghua committed
                                </nz-select>
                            </nz-form-control>
                            <div nz-col [nzSpan]="1">
wangqinghua's avatar
wangqinghua committed
                                <span (click)="deleteStep(index)" class="cursor">X</span>
wangqinghua's avatar
wangqinghua committed
                            </div>
                        </div>
                    </div>

            <div class="modal-footer-btn">
                <button nz-button (click)="handleCancel()" nzType="primary">取消</button>
                <button nz-button (click)="tabsChange(0)" nzType="primary">上一步</button>
wangqinghua's avatar
wangqinghua committed
                <button nz-button (click)="tabsChange(2)" nzType="primary">下一步</button>
wangqinghua's avatar
wangqinghua committed
            </div>
        </nz-tab>

        <nz-tab nzTitle="3.认证">
            <form nz-form class="ant-advanced-search-form">
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="applicationid">Http认证</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <nz-select id="applicationid" name="applicationid" nzPlaceHolder="选择设备类型" [(ngModel)]="validateForm.applicationid">
                                    <nz-option nzValue="是" nzLabel="是"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </div>

                    <div nz-col [nzSpan]="6">
                        <label nz-checkbox>
                            <span>SSL验证对端</span>
                        </label>
                    </div>

                    <div nz-col [nzSpan]="6">
                        <label nz-checkbox>
                            <span>SSL验证主机</span>
                        </label>
                    </div>
                </div>
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="ssl_cert_file">SSL证书文件</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_cert_file" name="ssl_cert_file" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_cert_file">
                            </nz-form-control>
                        </nz-form-item>
                    </div>

                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="ssl_key_file">SSL秘钥文件
                            </nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_key_file" name="ssl_key_file" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_key_file">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>

                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="12">
                        <nz-form-item nzFlex>
                            <nz-form-label [nzSpan]="6" nzFor="ssl_key_password">SSL秘钥密码</nz-form-label>
                            <nz-form-control [nzSpan]="14">
                                <input id="ssl_key_password" name="ssl_key_password" nz-input placeholder="默认"
                                       [(ngModel)]="validateForm.ssl_key_password">
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
            </form>
            <div class="modal-footer-btn">
                <button nz-button (click)="handleCancel()" nzType="primary">取消</button>
                <button nz-button (click)="tabsChange(1)" nzType="primary">上一步</button>
                <button nz-button (click)="handleOk()" nzType="primary">完成</button>
            </div>
        </nz-tab>
    </nz-tabset>
wangqinghua's avatar
wangqinghua committed
</nz-modal>