嗨森逛PC管理端
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.
high-web/src/app/admin/cms/cms-content/cms-content.component.html

229 lines
11 KiB

4 years ago
<!--面包屑-->
<nz-breadcrumb>
<nz-breadcrumb-item>
内容管理
</nz-breadcrumb-item>
<nz-breadcrumb-item>
内容发布
</nz-breadcrumb-item>
</nz-breadcrumb>
<div class="inner-content" nz-row>
<!--条件搜索-->
<div style="margin-bottom: 24px; margin-top: 24px;">
<!--分类-->
<nz-tree-select
nzPlaceHolder="请选择分类"
style="width: 250px"
[nzNodes]="nodes"
nzShowSearch
nzPlaceHolder="请选择内容分类"
[(ngModel)]="searchCategoryId"
>
</nz-tree-select>
<input class="width_input_chlid" [(ngModel)]="searchTitle" name="searchTitle" nz-input placeholder="请输入内容标题" nzSize="default">
<nz-select class="width_input_chlid" nzShowSearch nzAllowClear nzPlaceHolder="请选择状态" [(ngModel)]="searchStatus">
<nz-option nzLabel="请选择状态" nzValue=""></nz-option>
<nz-option nzLabel="编辑中" nzValue="1"></nz-option>
<nz-option nzLabel="已发布" nzValue="2"></nz-option>
<!--<nz-option nzLabel="已下线" nzValue="3"></nz-option>-->
</nz-select>
<button style="margin-left: 10px;" nz-button nzType="primary" (click)="getSearch()" [nzLoading]="isLoadingSearch">搜索</button>
<button nz-button (click)="resetSearch()">重置</button>
</div>
</div>
<div class="inner-content" nz-row>
<nz-layout>
<nz-sider style="background: #ffffff;"><div class="gaopin-data-toalt" style="width: 300px;">共搜索到 {{total}} 条数据</div></nz-sider>
<nz-content style="text-align: right;background: #ffffff;">
<button *ngIf="BTN_cmscontent_add == 1" class="funcBnt" nz-button nzType="primary" (click)="getAdd()">添加</button>
</nz-content>
</nz-layout>
<!--数组表格 -->
<nz-table
style="margin-top: 30px;width: 100%;"
#ajaxTable
nzShowSizeChanger
[nzFrontPagination]="false"
[nzData]="requestData"
[nzLoading]="loading"
[nzTotal]="total"
[(nzPageIndex)]="pageIndex"
[(nzPageSize)]="pageSize"
(nzPageIndexChange)="getRequest()"
(nzPageSizeChange)="getRequest(true)"
[nzScroll]="{ x: '1150px'}">
<thead nzSingleSort>
<tr>
<th nzWidth="80px">序号</th>
<th nzWidth="240px">分类名称</th>
<th nzWidth="240px">内容标题</th>
<th nzWidth="300px">简要描述</th>
<th nzWidth="120px">访问总量</th>
<th nzWidth="120px">是否推荐</th>
<th nzWidth="120px">状态</th>
<th nzWidth="120px">创建时间</th>
<th nzRight="0px" nzAlign="left" nzWidth="300px">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of ajaxTable.data; let i = index;">
<td>{{i+ 1}}</td>
<td>{{data.categoryName}}</td>
<td>{{data.title}}</td>
<td>{{data.description}}</td>
<td>{{data.visitCount}}</td>
<td>
<span style="color: #1890ff;" *ngIf="data.recommend"></span>
<span style="color: darkgray;" *ngIf="!data.recommend"></span>
</td>
<td>
<span *ngIf="data.status == 1">编辑中</span>
<span *ngIf="data.status == 2">已发布</span>
</td>
<td>{{data.createTime | date:'yyyy-MM-dd' }}</td>
<td nzRight="0px" style="font-size: 16px;">
<a><span nz-tooltip nzTitle="详情" (click)='getContentView(data.id)'><i nz-icon nzType="unordered-list" nzTheme="outline"></i></span></a>
<span *ngIf="BTN_cmscontent_edit">
<nz-divider nzType="vertical"></nz-divider>
<a *ngIf="data.status == 1"><span nz-tooltip nzTitle="编辑" (click)='getEdit(data.id)'><i nz-icon nzType="edit" nzTheme="outline"></i></span></a>
</span>
<span *ngIf="BTN_cmscontent_up_down == 1">
<nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
<a *ngIf="data.status == 2"><span nz-tooltip nzTitle="下线" (click)='showDown(data.id)'><i nz-icon nzType="down-square" nzTheme="outline"></i></span></a>
<a *ngIf="data.status == 1"><span nz-tooltip nzTitle="发布" (click)='addPush(data.id, data.categoryId)'><i nz-icon nzType="up-square" nzTheme="outline"></i></span></a>
</span>
<span *ngIf="BTN_cmscontent_delete == 1">
<nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
<a *ngIf="data.status == 1"><span nz-tooltip nzTitle="删除" (click)='showDeleteConfirmDelete(data.id)'><i nz-icon nzType="delete" nzTheme="outline"></i></span></a>
</span>
<span *ngIf="BTN_cmscontent_patch == 1">
<nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
<a *ngIf="data.status == 1"><span nz-tooltip nzTitle="附件" (click)='findPatchByContent(data.id)'><i nz-icon nzType="file" nzTheme="outline"></i></span></a>
</span>
</td>
</tr>
</tbody>
</nz-table>
<nz-layout *ngIf="showPatch == 1" style="margin-bottom: 10px;">
<nz-content style="text-align: right;background: #ffffff;">
<button class="funcBnt" nz-button nzType="primary" (click)="addPatch()">添加附件</button>
</nz-content>
</nz-layout>
<nz-table style="width: 100%" [nzShowPagination]="false" #basicTable [nzData]="patchList" *ngIf="showPatch == 1">
<thead>
<tr>
<th>附件名称</th>
<th>附件类型</th>
<th>附件描述</th>
<th>排序</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of patchList">
<td>{{ data.patchName }}</td>
<td *ngIf="data.patchType == 1">图片</td>
<td *ngIf="data.patchType == 2">音频</td>
<td *ngIf="data.patchType == 3">视频</td>
<td *ngIf="data.patchType == 4">文档</td>
<td *ngIf="data.patchType == 5">其他</td>
<td>{{data.patchDesc}}</td>
<td>{{data.sort}}</td>
<td>{{data.addTime | date:'yyyy-MM-dd'}}</td>
<td>
<a><span nz-tooltip nzTitle="删除附件" (click)='showDeletePatch(data.id)'><i nz-icon nzType="delete" nzTheme="outline"></i></span></a>
</td>
</tr>
</tbody>
</nz-table>
</div>
<!--添加附件弹出层-->
<nz-modal [(nzVisible)]="isVisible" nzTitle="添加附件" (nzOnCancel)="handleCancel()" (nzOnOk)="handlePatchOk(annexForm.value)" [nzOkLoading]="isOkLoading">
<form nz-form [formGroup]="annexForm" style="margin-left: 5%;">
<!--附件名称-->
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchName" nzRequired>
<span>附件名称<i nz-icon nz-tooltip nzTitle="附件名称" type="question-circle" nzTheme="outline"></i></span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input formControlName="patchName" placeholder="请输入附件名称..." />
<!--<nz-form-explain *ngIf="annexForm.get('patchName')?.dirty && annexForm.get('patchName')?.errors">请输入附件名称!</nz-form-explain>-->
</nz-form-control>
</nz-form-item>
<!--附件描述-->
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchDesc">
<span>附件描述<i nz-icon nz-tooltip nzTitle="附件描述" type="question-circle" nzTheme="outline"></i></span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input formControlName="patchDesc" placeholder="请输入附件描述..." />
<!--<nz-form-explain *ngIf="annexForm.get('patchDesc')?.dirty && annexForm.get('patchDesc')?.errors">请输入附件描述!</nz-form-explain>-->
</nz-form-control>
</nz-form-item>
<!--附件排序-->
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sort" nzRequired>
<span>附件排序<i nz-icon nz-tooltip nzTitle="附件排序" type="question-circle" nzTheme="outline"></i></span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input type="number" formControlName="sort" placeholder="请输入附件排序,越小越靠前..." oninput="if(value.length>5) value=value.slice(0,5)"/>
<!--<nz-form-explain *ngIf="annexForm.get('sort')?.dirty && annexForm.get('sort')?.errors">请输入附件排序!</nz-form-explain>-->
</nz-form-control>
</nz-form-item>
<!--附件类型-->
<nz-form-item >
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchType" nzRequired>
<span>附件类型</span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-select style="width: 80%;" formControlName="patchType" (ngModelChange)="getChange($event)" nzShowSearch nzAllowClear nzPlaceHolder="请选择附件类型">
<nz-option nzLabel="图片" nzValue="1" ></nz-option>
<nz-option nzLabel="音乐" nzValue="2" ></nz-option>
<nz-option nzLabel="视频" nzValue="3" ></nz-option>
<nz-option nzLabel="文档" nzValue="4" ></nz-option>
<nz-option nzLabel="其他" nzValue="5" ></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<!--附件上传-->
<nz-form-item *ngIf="patchTypeCheck != '0' && patchTypeCheck != null && patchTypeCheck != ''">
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchPath" nzRequired>
<span>附件上传<i nz-icon nz-tooltip nzTitle="附件上传" type="question-circle" nzTheme="outline"></i></span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-upload
nzAction="{{WEB_SERVE_URL}}/fileUpload/fileUpload"
[(nzFileList)]="fileList"
[nzCustomRequest]="customReq"
[nzShowButton]="fileList.length < 1"
>
<button nz-button ><i nz-icon nzType="upload"></i><span>点击上传</span></button>
</nz-upload>
</nz-form-control>
</nz-form-item>
<button nz-button id="reset" style="display: none;" (click)="emptyForm($event)">清空</button>
</form>
</nz-modal>
<!--发布弹出层-->
<nz-modal [(nzVisible)]="isPublish" nzTitle="发布内容" (nzOnCancel)="handleCancelPush()" (nzOnOk)="handlePushOk(pushForm.value)" [nzOkLoading]="isPushOkLoading">
<form nz-form [formGroup]="pushForm" style="margin-left: 5%;">
<!--附件名称-->
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="moduleId">
<span>发布模板<i nz-icon nz-tooltip nzTitle="发布模板" type="question-circle" nzTheme="outline"></i></span>
</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-select formControlName="moduleId" nzShowSearch nzAllowClear nzPlaceHolder="选择发布模板,也可不选择" [(ngModel)]="moduleId">
<nz-option *ngFor="let data of selectModule" nzLabel="{{data.moduleName}}" nzValue="{{data.id}}"></nz-option>
</nz-select>
<!--<input nz-input formControlName="moduleId" placeholder="请输入附件名称..." />-->
</nz-form-control>
</nz-form-item>
<button nz-button id="resetPush" style="display: none;" (click)="emptyPushForm($event)">清空</button>
</form>
</nz-modal>