163 lines
11 KiB
HTML
163 lines
11 KiB
HTML
<!--
|
||
* @Description :
|
||
* @Version : 1.0
|
||
* @Author : Shiming
|
||
* @Date : 2022-01-25 16:03:45
|
||
* @LastEditors : Shiming
|
||
* @LastEditTime : 2022-04-27 10:58:30
|
||
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\dynamic-setting\\dynamic-setting-h5\\dynamic-setting-h5.component.html
|
||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||
-->
|
||
<nz-card [nzLoading]="service.http.loading">
|
||
<div nz-row [nzGutter]="8">
|
||
<div nz-col [nzSpan]="tabSpan">
|
||
<ul nz-menu nzMode="inline" class="card-height">
|
||
<li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(item)"
|
||
*ngFor="let item of tabs; let idx = index">
|
||
{{ item.name }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div nz-col [nzSpan]="24-tabSpan" style="overflow: scroll">
|
||
<nz-card class="card-height" [nzBordered]="null" nzSize="small">
|
||
<h2 style="font-weight: 800;">{{selectedTab?.name}}</h2>
|
||
<div nz-row nzGutter="8">
|
||
<div nz-col nzSpan="24" se-container [labelWidth]="labelWidth">
|
||
<se [label]="item.name" *ngFor="let item of configList" col="1" [required]="item.requiredField">
|
||
<ng-container [ngSwitch]="item.itemType">
|
||
<!-- 整型输入框 -->
|
||
<ng-container *ngSwitchCase="1">
|
||
<nz-input-group [nzAddOnAfter]="item.remark?.afterLable" style="width: 155px;"
|
||
class="ml-md mr-xl">
|
||
<nz-input-number [(ngModel)]="item.itemValue" [nzMin]="item.remark?.min"
|
||
[nzPrecision]="item.remark?.precision" [nzMax]="item.remark?.max"
|
||
nzPlaceHolder="请输入" style="width: 120px;"></nz-input-number>
|
||
<!-- <input type="number" nz-input [(ngModel)]="item.itemValue" placeholder="请输入"/> -->
|
||
</nz-input-group>
|
||
</ng-container>
|
||
<!-- 0-1单选框 -->
|
||
<ng-container *ngSwitchCase="2">
|
||
<nz-radio-group [(ngModel)]="item.itemValue" class="mr-xl">
|
||
<label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] || '否'}}</label>
|
||
<label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] || '是'}}</label>
|
||
</nz-radio-group>
|
||
</ng-container>
|
||
<!-- 时间选择器 -->
|
||
<ng-container *ngSwitchCase="3">
|
||
<nz-time-picker nzFormat="HH:mm" nzPlaceHolder="请选择时间" [(ngModel)]="item.itemValue"
|
||
class="ml-md mr-xl">
|
||
</nz-time-picker>
|
||
</ng-container>
|
||
<!-- 时间段选择器 -->
|
||
<ng-container *ngSwitchCase="5">
|
||
<div class="d-flex" style="align-items: center;justify-content: space-between;">
|
||
<input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
|
||
style="margin-left: 23px;">
|
||
<label class="ml-sm mr-sm"> --</label>
|
||
<input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
|
||
style="margin-left: 0;" class=" mr-xl">
|
||
</div>
|
||
</ng-container>
|
||
<!-- 单选加配置 -->
|
||
<ng-container *ngSwitchCase="6">
|
||
<div class="d-flex" style="align-items: center;justify-content: space-between;">
|
||
|
||
<nz-radio-group [(ngModel)]="item.itemValue.radio" class="mr-xl">
|
||
<label nz-radio [nzValue]="0" class="ml-xl">{{item.remark?.[0] ||
|
||
'否'}}</label>
|
||
<label nz-radio [nzValue]="1" class="ml-xl">{{item.remark?.[1] ||
|
||
'是'}}</label>
|
||
</nz-radio-group>
|
||
|
||
<input type="time" [(ngModel)]="item.itemValue.startTime" placeHolder="开始时间"
|
||
style="margin-left: 23px;">
|
||
<label class="ml-sm mr-sm"> --</label>
|
||
<input type="time" [(ngModel)]="item.itemValue.endTime" placeHolder="结束时间"
|
||
style="margin-left: 0;" class=" mr-xl">
|
||
</div>
|
||
</ng-container>
|
||
<!-- 运费列表 -->
|
||
<ng-container *ngSwitchCase="7">
|
||
<app-freight-table></app-freight-table>
|
||
</ng-container>
|
||
<!-- 文本输入框 -->
|
||
<ng-container *ngSwitchCase="8">
|
||
<nz-input-group style="width: 155px;" class="ml-md mr-xl">
|
||
<input nz-input placeholder="请输入" [(ngModel)]="item.itemValue" />
|
||
</nz-input-group>
|
||
</ng-container>
|
||
<!-- 文件上传 -->
|
||
<ng-container *ngSwitchCase="9">
|
||
<nz-upload [nzAction]="service.$api_upload_url" [nzName]="'multipartFile'"
|
||
[nzHeaders]="{ authorization: 'authorization-text' }"
|
||
[(nzFileList)]="item.itemValue" style="margin-left: 26px;">
|
||
<button nz-button>
|
||
<i nz-icon nzType="upload"></i>
|
||
上传文件
|
||
</button>
|
||
</nz-upload>
|
||
</ng-container>
|
||
<!-- 开关选项 -->
|
||
<ng-container *ngSwitchCase="10">
|
||
<nz-switch [(ngModel)]="item.itemValue" style="margin-left: 26px;"></nz-switch>
|
||
</ng-container>
|
||
<!-- 下拉单选 -->
|
||
<ng-container *ngSwitchCase="11">
|
||
<nz-select [(ngModel)]="item.itemValue" style="width: 146px;margin-left: 31px;">
|
||
<nz-option [nzValue]="re.value" [nzLabel]="re.label"
|
||
*ngFor="let re of item.remark"></nz-option>
|
||
</nz-select>
|
||
</ng-container>
|
||
<!-- 图片上传 -->
|
||
<ng-container *ngSwitchCase="12">
|
||
<div>
|
||
<nz-upload class="avatar-uploader" [nzAction]="service.$api_upload_url"
|
||
[nzName]="'multipartFile'" nzName="avatar" nzListType="picture-card"
|
||
[nzShowUploadList]="false" (nzChange)="uploadChange($event,item)">
|
||
<ng-container *ngIf="!item.itemValue">
|
||
<i class="upload-icon" nz-icon
|
||
[nzType]="service.http.loading ? 'loading' : 'plus'"></i>
|
||
<div class="ant-upload-text">上传</div>
|
||
</ng-container>
|
||
<div style="width: 102px;height: 102px;display: flex;align-items: center;justify-content: center;"
|
||
*ngIf="item.itemValue" (click)="$event.cancelBubble = true">
|
||
<img nz-image [nzSrc]="item.itemValue"
|
||
style="max-width: 102px;max-height: 102px;" />
|
||
</div>
|
||
</nz-upload>
|
||
<p>支持
|
||
<ng-container *ngFor="let item of item.remark?.format">
|
||
{{item}},
|
||
</ng-container>
|
||
格式，文件小于{{item.remark?.size || 2}}M（建议尺寸
|
||
{{item.remark?.width || 750}}px * {{item.remark?.height|| 1622}}px）。
|
||
<a *ngIf="item.remark?.caseImage"
|
||
(click)="showImg(item.remark?.caseImage)">查看示例</a>
|
||
</p>
|
||
</div>
|
||
</ng-container>
|
||
<!-- 文本域 -->
|
||
<ng-container *ngSwitchCase="13">
|
||
<textarea rows="4" nz-input [(ngModel)]="item.itemValue" style="width: 400px;"
|
||
[maxlength]="item.remark?.maxLength"
|
||
[placeholder]="item.remark?.placeholder || ''"></textarea>
|
||
</ng-container>
|
||
<!-- 自定义选项 -->
|
||
<ng-container *ngSwitchCase="999">
|
||
<ng-content select="custom-element"></ng-content>
|
||
</ng-container>
|
||
</ng-container>
|
||
</se>
|
||
</div>
|
||
</div>
|
||
</nz-card>
|
||
|
||
|
||
<div class="mb-md save-btn">
|
||
<button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="saveAction()"
|
||
*ngIf="selectedTab?.configKey!=='freight' && labelWidth!==0 && isCanSave">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nz-card> |