You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
9.2 KiB
238 lines
9.2 KiB
10 months ago
|
<form nz-form [formGroup]="searchForm" class="search_form" [nzLayout]="'vertical'">
|
||
|
<div nz-row [nzGutter]="24">
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品名称</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<input nzSize="large" nz-input formControlName="title" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品分类</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-tree-select
|
||
|
nzPlaceHolder="请选择"
|
||
|
formControlName="goodsType"
|
||
|
[nzNodes]="nodes"
|
||
|
nzShowSearch
|
||
|
></nz-tree-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品品牌</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="goodsBrand">
|
||
|
<nz-option *ngFor="let item of nodesBrand" nzLabel="{{item['title']}}" nzValue="{{item['id']}}"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品类型</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="type">
|
||
|
<nz-option nzLabel="实物商品" nzValue="1"></nz-option>
|
||
|
<nz-option nzLabel="虚拟商品商品" nzValue="2"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
<div nz-col [nzSpan]="6">
|
||
|
<nz-form-item>
|
||
|
<nz-form-label>商品状态</nz-form-label>
|
||
|
<nz-form-control>
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="status">
|
||
|
<nz-option nzLabel="上线中" nzValue="1"></nz-option>
|
||
|
<nz-option nzLabel="编辑中" nzValue="2"></nz-option>
|
||
|
<nz-option nzLabel="审核中" nzValue="3"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</div>
|
||
|
|
||
|
<div nz-col [nzSpan]="6" class="search-area">
|
||
|
<button nz-button [nzType]="'primary'" (click)="getRequest(true)">查询</button>
|
||
|
<button nz-button (click)="searchForm.reset()">重置</button>
|
||
|
<button nz-button [nzType]="'primary'" (click)="showEdit()">创建</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</form>
|
||
|
|
||
|
<nz-table #basicTable
|
||
|
[nzBordered]="true"
|
||
|
[nzFrontPagination]="false"
|
||
|
[nzShowQuickJumper]="true"
|
||
|
[nzShowTotal]="totalTemplate"
|
||
|
[(nzPageIndex)]="tablePageNum"
|
||
|
(nzPageIndexChange)="getRequest(false)"
|
||
|
[nzTotal]="tableData.total"
|
||
|
[nzData]="tableData.list" >
|
||
|
<thead>
|
||
|
<tr>
|
||
|
<th nzWidth="80px">商品名称</th>
|
||
|
<th nzWidth="100px">商品图片</th>
|
||
|
<th nzWidth="100px">商品类型</th>
|
||
|
<th nzWidth="100px">商品分类</th>
|
||
|
<th nzWidth="100px">商品品牌</th>
|
||
|
<th nzWidth="50px">创建时间</th>
|
||
|
<th nzWidth="50px">更新时间</th>
|
||
|
<th nzWidth="50px">状态</th>
|
||
|
<th nzWidth="70px">操作</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr *ngFor="let data of basicTable.data">
|
||
|
<td>{{data.title}}</td>
|
||
|
<td>
|
||
|
<img nz-image width="60px" height="60px" nzSrc="{{imageUrl + data.listImg }}" [nzFallback]="fallbackImg" alt="" />
|
||
|
</td>
|
||
|
<td>{{data.type == 1 ? '实物商品' : '虚拟商品'}}</td>
|
||
|
<td>{{data.goodsTypeName}}</td>
|
||
|
<td>{{data.goodsBrandName}}</td>
|
||
|
<td>{{ data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
||
|
<td>{{ data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
||
|
<td>{{data.status | goodsStatus}}</td>
|
||
|
<td>
|
||
|
<a (click)="showEdit(data)">修改</a>
|
||
|
<nz-divider nzType="vertical"></nz-divider>
|
||
|
<a nz-popconfirm nzPopconfirmTitle="是否确认删除?" (nzOnConfirm)="delete(data.id)">删除</a>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
<ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
|
||
|
|
||
|
|
||
|
<!--添加弹出框-->
|
||
|
<nz-modal [(nzVisible)]="isVisibleEdit" [nzMaskClosable] = false nzTitle="编辑类目" (nzOnCancel)="isVisibleEdit = false" (nzOnOk)="handleEdit()">
|
||
|
<ng-container *nzModalContent>
|
||
|
<form nz-form [formGroup]="editForm">
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>标题</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入标题!">
|
||
|
<input nzSize="large" nz-input formControlName="title" placeholder="请输入" />
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" >商品分类</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-tree-select
|
||
|
nzPlaceHolder="请选择"
|
||
|
formControlName="goodsType"
|
||
|
[nzNodes]="nodes"
|
||
|
nzShowSearch
|
||
|
></nz-tree-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>商品类型</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="type">
|
||
|
<nz-option nzLabel="实物商品" nzValue="1"></nz-option>
|
||
|
<nz-option nzLabel="虚拟商品商品" nzValue="2"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>商品品牌</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="goodsBrand">
|
||
|
<nz-option *ngFor="let item of nodesBrand" nzLabel="{{item['title']}}" nzValue="{{item['id']}}"></nz-option>
|
||
|
</nz-select>
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>列表图片</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-upload
|
||
|
nzAction="{{baseUrl}}fileUpload/fileUpload"
|
||
|
nzListType="picture-card"
|
||
|
[(nzFileList)]="listImg"
|
||
|
[nzShowButton]="listImg.length < 1"
|
||
|
[nzPreview]="handlePreview"
|
||
|
nzAccept="image/*"
|
||
|
>
|
||
|
<div>
|
||
|
<span nz-icon nzType="plus"></span>
|
||
|
<div style="margin-top: 8px">上传图片</div>
|
||
|
</div>
|
||
|
</nz-upload>
|
||
|
<nz-modal
|
||
|
[nzVisible]="previewVisible"
|
||
|
[nzContent]="modalContent"
|
||
|
[nzFooter]="null"
|
||
|
(nzOnCancel)="previewVisible = false"
|
||
|
>
|
||
|
<ng-template #modalContent>
|
||
|
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" alt=""/>
|
||
|
</ng-template>
|
||
|
</nz-modal>
|
||
|
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>轮播图片</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-upload
|
||
|
nzAction="{{baseUrl}}fileUpload/fileUpload"
|
||
|
nzListType="picture-card"
|
||
|
[(nzFileList)]="bannerImg"
|
||
|
[nzShowButton]="bannerImg.length < 1"
|
||
|
[nzPreview]="handlePreview"
|
||
|
nzAccept="image/*"
|
||
|
>
|
||
|
<div>
|
||
|
<span nz-icon nzType="plus"></span>
|
||
|
<div style="margin-top: 8px">上传图片</div>
|
||
|
</div>
|
||
|
</nz-upload>
|
||
|
<nz-modal
|
||
|
[nzVisible]="previewVisible"
|
||
|
[nzContent]="modalContent"
|
||
|
[nzFooter]="null"
|
||
|
(nzOnCancel)="previewVisible = false"
|
||
|
>
|
||
|
<ng-template #modalContent>
|
||
|
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" alt=""/>
|
||
|
</ng-template>
|
||
|
</nz-modal>
|
||
|
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
<nz-form-item >
|
||
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>详情图片</nz-form-label>
|
||
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||
|
<nz-upload
|
||
|
nzAction="{{baseUrl}}fileUpload/fileUpload"
|
||
|
nzListType="picture-card"
|
||
|
[(nzFileList)]="detailImg"
|
||
|
[nzShowButton]="detailImg.length < 1"
|
||
|
[nzPreview]="handlePreview"
|
||
|
nzAccept="image/*"
|
||
|
>
|
||
|
<div>
|
||
|
<span nz-icon nzType="plus"></span>
|
||
|
<div style="margin-top: 8px">上传图片</div>
|
||
|
</div>
|
||
|
</nz-upload>
|
||
|
<nz-modal
|
||
|
[nzVisible]="previewVisible"
|
||
|
[nzContent]="modalContent"
|
||
|
[nzFooter]="null"
|
||
|
(nzOnCancel)="previewVisible = false"
|
||
|
>
|
||
|
<ng-template #modalContent>
|
||
|
<img [src]="previewImage" [ngStyle]="{ width: '100%' }" alt=""/>
|
||
|
</ng-template>
|
||
|
</nz-modal>
|
||
|
|
||
|
</nz-form-control>
|
||
|
</nz-form-item>
|
||
|
</form>
|
||
|
</ng-container>
|
||
|
</nz-modal>
|