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.
puhui-go-web/src/app/pages/goods/goods-list/goods-list.component.html

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>