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

462 lines
21 KiB

<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-dropdown [nzDropdownMenu]="menu">
更多
<span nz-icon nzType="down"></span>
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item><a (click)="showSpecsList(data)">规格列表</a></li>
<li nz-menu-item nzDanger>
<a nz-popconfirm nzPopconfirmTitle="是否确认删除?" (nzOnConfirm)="delete(data.id)">删除</a>
</li>
</ul>
</nz-dropdown-menu>
</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">商品标签</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入商品标签!">
<input nzSize="large" nz-input formControlName="goodsLabel" 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" nzErrorTip="请输入商品说明!">
<input nzSize="large" nz-input formControlName="goodsExplain" placeholder="请输入" />
</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>
<nz-modal [nzWidth]="1400" [(nzVisible)]="isVisibleSpecs" nzTitle="{{goodsMsg?.title}}-规格列表" [nzFooter]="null" (nzOnCancel)="isVisibleSpecs= false">
<!--列表-->
<ng-container *nzModalContent>
<button nz-button (click)="showEditSpecs()" nzType="primary">创建</button>
<button nz-button [nzType]="'default'" (click)="getSpecsList()">查询</button>
<br />
<br />
<nz-table [nzScroll]="{ x: '1980px' }" [nzBordered]="true" #basicTable [nzData]="nodesSpecs">
<thead>
<tr>
<th nzLeft rowspan="2">规格名称</th>
<th colspan="2">价格(RMB)</th>
<th rowspan="2">图片</th>
<th rowspan="2">限购(个)</th>
<th rowspan="2">库存(个)</th>
<th colspan="2">时间</th>
<th colspan="7" *ngIf="goodsMsg?.type == 2">虚拟产品</th>
<th rowspan="2" nzRight>操作</th>
</tr>
<tr>
<th rowspan="1">售价</th>
<th rowspan="1">原价</th>
<th rowspan="1">销售截止时间</th>
<th rowspan="1">创建时间</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">卡密</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">归库天数</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">类型</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">产品来源</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">跳转类型</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">跳转地址</th>
<th *ngIf="goodsMsg?.type == 2" rowspan="1">应用ID</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td nzLeft>{{data.name}}</td>
<td>
<span style="font-size: 24px;" nz-typography nzType="danger">¥{{data.salePrice}}</span>
</td>
<td>
<span nz-typography nzType="secondary">¥{{data.originalPrice}}</span>
</td>
<td>
<img nz-image width="60px" height="60px" nzSrc="{{imageUrl + data.showImg }}" [nzFallback]="fallbackImg" alt="" />
</td>
<td>{{data.purLimit}}</td>
<td>{{data.stock}}</td>
<td>{{ data.salesEndTime | date: 'yyyy-MM-dd HH:mm'}}</td>
<td>{{ data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.key}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.validDay}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.type == 1 ? '内部虚拟商品' : '外部虚拟产品'}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.source | dictionary: 'GOODS_VPD_SOURCE'}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.jumpType == 1 ? '小程序' : 'H5'}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.jumpUrl}}</td>
<td *ngIf="goodsMsg?.type == 2">{{data.appid}}</td>
<td nzRight>
<a (click)="showEditSpecs(data)">修改</a>
<nz-divider nzType="vertical"></nz-divider>
<a nz-popconfirm nzPopconfirmTitle="是否确认删除?" (nzOnConfirm)="deleteGoodsSpecs(data.specsId)">删除</a>
</td>
</tr>
</tbody>
</nz-table>
</ng-container>
</nz-modal>
<!--添加弹出框-->
<nz-modal [(nzVisible)]="editSpecs" [nzMaskClosable] = false nzTitle="编辑规格" (nzOnCancel)="editSpecs = false" (nzOnOk)="handleEditSpecs()">
<ng-container *nzModalContent>
<form nz-form [formGroup]="editSpecsForm">
<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="name" placeholder="请输入" />
</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" nzErrorTip="请输入限购数量!">
<nz-input-number style="width: 100%" formControlName="purLimit" [nzSize]="'large'" [nzMin]="1" [nzMax]="99999" [nzStep]="1" ></nz-input-number>
</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" nzErrorTip="请输入售卖价格!">
<nz-input-number-group nzPrefix="¥" nzSuffix="RMB" style="width: 100%">
<nz-input-number formControlName="salePrice" [nzPrecision]="2"></nz-input-number>
</nz-input-number-group>
</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" nzErrorTip="请输入原价!">
<nz-input-number-group nzPrefix="¥" nzSuffix="RMB" style="width: 100%">
<nz-input-number formControlName="originalPrice" [nzPrecision]="2" ></nz-input-number>
</nz-input-number-group>
</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" nzErrorTip="请输入库存!">
<nz-input-number style="width: 100%" formControlName="stock" [nzSize]="'large'" [nzMin]="1" [nzMax]="99999" [nzStep]="1" ></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="goodsMsg?.type == 2">
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>有效天数</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入有效天数!">
<nz-input-number style="width: 100%" formControlName="validDay" [nzSize]="'large'" [nzMin]="1" [nzMax]="99999" [nzStep]="1" ></nz-input-number>
</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" nzErrorTip="请选择售卖最终时间!">
<nz-date-picker
nzSize="large"
nzShowTime
nzFormat="yyyy-MM-dd HH:mm:ss"
formControlName="salesEndTime"
nzPlaceHolder="请选择售卖最终时间"
></nz-date-picker>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="goodsMsg?.type == 2">
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>虚拟来源</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择虚拟来源!">
<nz-select nzSize="large" nzShowSearch nzAllowClear formControlName="source" nzPlaceHolder="请选择">
<nz-option *ngFor="let item of nodesVpdSource" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="goodsMsg?.type == 2">
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>类型</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择类型!">
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="type" (ngModelChange)="typeChange($event)">
<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 *ngIf="editSpecsForm.value.type == 2">
<nz-form-label [nzSm]="6" [nzXs]="24">卡密</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nzSize="large" nz-input formControlName="key" placeholder="请输入" />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="editSpecsForm.value.type == 2">
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>跳转类型</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择跳转类型!">
<nz-select nzSize="large" nzShowSearch nzAllowClear nzPlaceHolder="请选择" formControlName="jumpType" (ngModelChange)="jumpTypeChange($event)">
<nz-option nzLabel="小程序" nzValue="1"></nz-option>
<nz-option nzLabel="H5" nzValue="2"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="editSpecsForm.value.type == 2">
<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="jumpUrl" placeholder="请输入" />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="editSpecsForm.value['jumpType'] == 1">
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>应用ID</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入应用ID!">
<input nzSize="large" nz-input formControlName="appid" placeholder="请输入" />
</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)]="showImg"
[nzShowButton]="showImg.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>