Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2021-12-02 10:10:24 +08:00
parent 1ea3377be7
commit df711ddcb8
12 changed files with 739 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/app/routes/sys-setting/components/system-config/system-config.component.html Normal file
View File

@ -0,0 +1,187 @@
<nz-card>
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="4">
<ul nz-menu nzMode="inline" class="card-height">
<li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(idx)"
*ngFor="let item of tabs; let idx = index">
{{ item.name }}
</li>
</ul>
</div>
<div nz-col nzSpan="20" style="overflow: scroll">
<nz-card class="card-height" [nzBordered]="null" nzSize="small" *ngIf="selectedTab===0 ">
<h2 style="font-weight: 800;">货主端配置</h2>
<h3 style="font-weight: 600;margin-left: 120px;">图片配置</h3>
<sf style="margin-left: 30px" #sf mode="default" [formData]="i" [schema]="schema2"
[ui]="{ '*': { spanLabelFixed: 200,grid: { span: 24 }} }" button="none">
<ng-template sf-template="start" let-me let-ui="ui" let-schema="schema">
</ng-template>
<template id="tpl">
<span>so good </span>
</template>
<ng-template sf-template="time2" let-me let-ui="ui" let-schema="schema">
<div class="text-left">可输入字符</div>
<nz-range-picker extend nzFormat="HH:mm:ss"></nz-range-picker>
</ng-template>
</sf>
<h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">短信配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
<se label="短信内容设置" style="margin-bottom: 0;">
<p style="margin-top: 6px;">配置用户端登陆页注册帐号、修改密码、修改手机号时的短信内容</p>
<textarea nz-input rows="4"
placeholder="【运多星】您的验证码：XXXXXX。有效期10分钟，请及时输入，请勿向他人泄露您的验证码。如非本人操作，请忽略。"
style="width: 400px;"></textarea>
</se>
</div>
</div>
<h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">通知配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title:'用户实名认证审核'}">
</ng-container>
<ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title: '企业认证审核'}">
</ng-container>
</div>
</div>
<h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">客服电话配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="230">
<se label="客服电话" style="margin-bottom: 0;">
<input nz-input style="width: 325px;" />
</se>
</div>
</div>
</nz-card>
<nz-card class="card-height" [nzBordered]="null" nzSize="small" *ngIf="selectedTab===1">
<h2 style="font-weight: 800;">司机端配置</h2>
<h3 style="font-weight: 600;margin-left: 120px;">图片配置</h3>
<sf style="margin-left: 30px" #sf mode="default" [formData]="i" [schema]="schema"
[ui]="{ '*': { spanLabelFixed: 200,grid: { span: 24 }} }" button="none">
<ng-template sf-template="start" let-me let-ui="ui" let-schema="schema">
</ng-template>
<template id="tpl">
<span>so good </span>
</template>
<ng-template sf-template="time2" let-me let-ui="ui" let-schema="schema">
<div class="text-left">可输入字符</div>
<nz-range-picker extend nzFormat="HH:mm:ss"></nz-range-picker>
</ng-template>
</sf>
<h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">短信配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
<se label="短信内容设置" style="margin-bottom: 0;">
<p style="margin-top: 6px;">配置用户端登陆页注册帐号、修改密码、修改手机号时的短信内容</p>
<textarea nz-input rows="4"
placeholder="【运多星】您的验证码：XXXXXX。有效期10分钟，请及时输入，请勿向他人泄露您的验证码。如非本人操作，请忽略。"
style="width: 400px;"></textarea>
</se>
</div>
</div>
<h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">通知配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title:'司机实名认证审核'}">
</ng-container>
<ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title: '司机驾驶证证审核'}">
</ng-container>
<div se-container [labelWidth]="230" [se-container]="1">
<se class="mb-sm">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">到期系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
<se label="司机驾驶证证审核" class="mb-sm">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">审核通过系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
<se class="mb-sm">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">审核驳回系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
<se class="mb-sm">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">到期系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
</div>
</div>
</div>
<h3 style="font-weight: 600;margin-left: 140px;" class="mt-md">客服电话配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="230">
<se label="客服电话" >
<input nz-input style="width: 325px;" />
</se>
</div>
</div>
<h3 style="font-weight: 600;margin-left: 140px;" class="mt-md">证件提醒配置</h3>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
<se label="证件临期提醒" style="margin-bottom: 0;">
距离到期时间
<input type="number" nz-input style="width: 40px;"/>
天开始提醒，每隔
<input type="number" nz-input style="width: 40px;" />
天提醒一次
</se>
</div>
</div>
</nz-card>
<div class="mb-md save-btn">
<button class="ml-lg" nz-button nzSize="large" nzType="primary">保存</button>
<button class="ml-lg" nz-button nzSize="large">取消</button>
</div>
</div>
</div>
</nz-card>
<ng-template #textMessage let-data="data" let-title="title">
<div se-container [labelWidth]="230" [se-container]="1">
<se [label]="title" style="margin-bottom: 0;">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">审核通过系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
<se class="mb-sm">
<label for="">通知标题 : </label>
<input nz-input placeholder="请不要超过20个汉字" style="width: 325px;" maxlength="20" />
</se>
<se class="mb-sm">
<label for="">通知内容 : </label>
<input nz-input placeholder="请不要超过50个汉字" style="width: 325px;" maxlength="50" />
</se>
<se class="mb-sm">
<nz-radio-group [(ngModel)]="formDate.isAudit">
<label nz-radio [nzValue]="false" class="mt-sm">审核驳回系统通知</label>
<label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
</nz-radio-group>
</se>
<se class="mb-sm">
<label for="">通知标题 : </label>
<input nz-input placeholder="请不要超过20个汉字" style="width: 325px;" maxlength="20" />
</se>
<se class="mb-sm">
<label for="">通知内容 : </label>
<input nz-input placeholder="请不要超过50个汉字" style="width: 325px;" maxlength="50" />
</se>
<se class="mb-sm">
<div class=" d-flex">
<label for="">短信内容 : </label>
<textarea nz-input rows="3" placeholder="【运多星】您的账号：XXXXXX。实名认证审核已被驳回，请重新上传"
style="width: 325px;margin-left: 14px;"></textarea>
</div>
</se>
</div>
</ng-template>

22
src/app/routes/sys-setting/components/system-config/system-config.component.less Normal file
View File

@ -0,0 +1,22 @@
:host {
::ng-deep {
.card-height {
min-height: 600px;
}
.save-btn {
width : 100%;
text-align: right;
}
.block-radio {
display : flex;
min-height : 32px;
}
input {
width : 100px;
margin-left: 10px;
}
}
}

258
src/app/routes/sys-setting/components/system-config/system-config.component.ts Normal file
View File

@ -0,0 +1,258 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { SFComponent, SFSchema, SFUploadWidgetSchema } from '@delon/form';
import { Observable, Observer } from 'rxjs';
import { SystemService } from '../../services/system.service';
@Component({
selector: 'app-system-config',
templateUrl: './system-config.component.html',
styleUrls: ['./system-config.component.less']
})
export class SystemConfigComponent implements OnInit {
@ViewChild('sf', { static: false }) sf!: SFComponent;
formDate: any = {
isAudit: false,
isEveryDay: false,
isEveryWeek: false
};
tabs = [
{
name: '货主端配置'
},
{
name: '司机端配置'
}
];
selectedTab = 0;
checkOptionsOne = [
{ label: '周一', value: '周一', checked: true },
{ label: '周二', value: '周二' },
{ label: '周三', value: '周三' },
{ label: '周四', value: '周四' },
{ label: '周五', value: '周五' },
{ label: '周六', value: '周六' },
{ label: '周日', value: '周日' }
];
i: any;
schema!: SFSchema;
schema2!: SFSchema;
imageConfig = {
widget: 'upload',
action: `/scm/cms/cms/upload/multipartFile/fileModel`,
limit: 1,
limitFileCount: 1,
resReName: 'url',
urlReName: 'url',
data: {
appId: this.service.envSrv.getEnvironment().appId
},
multiple: false,
listType: 'picture-card',
showRequired: true
};
constructor(private service: SystemService) {}
ngOnInit() {
this.initSF();
}
changeType(type: number): void {
this.selectedTab = type;
}
initSF() {
this.schema = {
properties: {
sysMinLogo: {
type: 'string',
title: '系统LOGO（大）',
// enum: [],
ui: {
...this.imageConfig,
descriptionI18n: '大尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸300*170px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, 'sysMinLogo');
this.sf?.setValue('/sysMinLogo', avatar);
this.i.sysMinLogo = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo: {
type: 'string',
title: '用户默认头像',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo', avatar);
this.i.sysMaxLogo = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo1: {
type: 'string',
title: '用户默认头像',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸375*773px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo1', avatar);
this.i.sysMaxLogo1 = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
},
required: ['sysMinLogo', 'sysMaxLogo', 'sysMaxLogo1']
};
this.schema2 = {
properties: {
sysMinLogo: {
type: 'string',
title: '系统LOGO(小)',
// enum: [],
ui: {
...this.imageConfig,
descriptionI18n: '小尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸32*32px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, 'sysMinLogo');
this.sf?.setValue('/sysMinLogo', avatar);
this.i.sysMinLogo = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo: {
type: 'string',
title: '系统LOGO(大)',
ui: {
...this.imageConfig,
descriptionI18n: '小尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸32*32px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo', avatar);
this.i.sysMaxLogo = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo1: {
type: 'string',
title: '用户默认头像',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo1', avatar);
this.i.sysMaxLogo1 = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo2: {
type: 'string',
title: '企业默认头像',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo2', avatar);
this.i.sysMaxLogo2 = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo3: {
type: 'string',
title: '货主PC端登陆页海报',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸1920*630px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo3', avatar);
this.i.sysMaxLogo3 = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
sysMaxLogo4: {
type: 'string',
title: 'APP开屏海报',
ui: {
...this.imageConfig,
descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸375*773px）。',
change: args => {
if (args.type === 'success') {
const avatar = this.getImageModel(args, -1);
this.sf?.setValue('/sysMaxLogo4', avatar);
this.i.sysMaxLogo4 = avatar;
}
},
beforeUpload: this.uploadBefore
} as SFUploadWidgetSchema
},
},
required: ['sysMinLogo', 'sysMaxLogo', 'sysMaxLogo1', 'sysMaxLogo2', 'sysMaxLogo3', 'sysMaxLogo4']
};
}
private uploadBefore = (file: any, fileList: any) => {
return new Observable((observer: Observer<boolean>) => {
const isLt1M = file.size / 1024 / 1024 < 2;
const fileType = 'image/png,image/jpeg';
if (fileType.indexOf(file.type) === -1) {
this.service.msgSrv.warning('图片格式不正确！');
observer.complete();
return;
}
if (!isLt1M) {
// this.service.msgSrv.warning('图片需小于1M');
this.service.msgSrv.warning('图片大小超过2M!');
observer.complete();
return;
}
observer.next(isLt1M);
observer.complete();
});
};
private getImageModel(args: any, key: any) {
return [
{
uid: key,
name: 'LOGO',
status: 'done',
url: args.fileList[0].response.url,
response: {
url: args.fileList[0].response.url
}
}
];
}
}