ngx-shared-basics

珠海十亿网络科技前端sharedModule的提取封装,仅适用于本公司业务

Usage no npm install needed!

<script type="module">
  import ngxSharedBasics from 'https://cdn.skypack.dev/ngx-shared-basics';
</script>

README

使用

  1. module引入,"schemas": [CUSTOM_ELEMENTS_SCHEMA]为必要使用
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestlibComponent } from './testlib.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { "path": '', "component": TestlibComponent }
];

import {NgxSharedBasicsModule} from 'Ngx-shared-basics';

@NgModule({
    "imports": [
        CommonModule,
        RouterModule.forChild(routes),
        NgxSharedBasicsModule
    ],
    "schemas": [CUSTOM_ELEMENTS_SCHEMA],
  "declarations": [TestlibComponent]
})
export class TestlibModule { }

2.html中使用,与以往一致

<p>
  {{ abc | emptyCharacter}}
</p>

<p>
  {{ abc2 | emptyCharacter}}
</p>

<p  (click)="test()">
  {{ abc22 | textOmitted: 76}}
</p>


<div nz-row>
  <div nz-col nzSpan="12">col-12</div>
  <div nz-col nzSpan="12">col-12</div>
</div>

<p>测试</p>

<div class="page">
 <div class="">
      <h3>左树右表/参数说明</h3>
      <ul>
          <li>
              <h3>左树配置</h3>
          </li>
          <li>[url]:api地址 格式:string</li>
          <li>[urlmethod]: 请求方式  post/get 格式:string</li>
          <li>(getCurrentNode):当前点击的节点信息 格式:function</li>
          <li>
              <h3>[dataParmas]: 节点渲染配置  格式:对象</h3>
              <ul>
                  <li><img src="assets\user\123213.png" alt=""><img src="assets\user\123123.png" alt=""></li>
              </ul>
          </li>

          <li (click)="refresh()">
              <h3>右表配置</h3>
          </li>

          <li><img src="assets\user\demo11.png" alt=""></li>
          <li>th,td固定宽度配置 ,见下图</li>
          <li><img src="assets\user\demo12.png" alt=""></li>
          <li>
              滚动固定列配置
          </li>
          <li><img src="assets\user\demo13.png" alt=""></li>
      </ul>
  </div>
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }">
    <div nz-col nzSpan="4">
        <sp-tree
        #sptree
            [url]="'/rest/portal/category/listCategoryTree'"
            [urlmethod]="'get'"
            (getCurrentNode) = "getNodeInfor($event)"
            [dataParmas] = "dataParmas"
        ></sp-tree>
    </div>
    <div nz-col nzSpan="20">
      <sp-table
            #sptable
            [apiUrl]="url"
            [extralParam] = 'paramsMap'
            [sort] = "'roomCode'"
            [dir] = "'desc'"
            [pageSize] = "pageSize"
            [columns] = 'columns'
            (rRowInfor) = 'getRow($event)'
            [controlArray]='controlArray'
            [isSearchMore] = 'isSearchMore'
            [isSearchNum] = 'isSearchNum'
      >
      </sp-table>
    </div>
  </div>
</div>

3.需要使用方法,service之类的话

import { Component, OnInit, ViewChild } from '@angular/core';
import { SpMessageService, SpTableComponent,getCurrentUser, isProperty } from 'Ngx-shared-basics';
@Component({
  "selector": 'app-testlib',
  "templateUrl": './testlib.component.html',
  "styleUrls": ['./testlib.component.css']
})
export class TestlibComponent implements OnInit {

  constructor(
    private message: SpMessageService
  ) { }

  @ViewChild('sptable') sptable: SpTableComponent;

  test() {
    this.message.errorString(`请上传的格式资源`);
    getCurrentUser();
    isProperty();
  }

  abc = '';
  abc2 = '有值,可以上大';
  abc22 = '使用 Angular CLI 和 npm 包管理器来把你的库构建并发布成 npm 包。不建议把 Ivy 格式的库发布到 NPM 仓库。在把某个库发布到 NPM 之前,使用 --prod 标志构建它,此标志会使用老的编译器和运行时,也就是视图引擎(View Engine),以代替 Ivy.';
}

变化

引入NgxSharedBasicsModule之后直接使用,不用再次引入ImageViewModule,AdErrorCollectModule,ModalCustomModule,ModelFormCustomModule

LesseeInfoChangeModule, ModalCheckStaffModule, ModalAddedTaxInvoiceModule,UserAccountModifyModule 不再由NgxSharedBasicsModule导出

SpMessageService又原来的@shared/message/sp-message.service,改为import { SpMessageService } from 'Ngx-shared-basics';

所有导出

component

export * from './check-tips/check-tips.component';
export * from './column-filter/column-filter.component';
export * from './image-crop/image-crop.component';
export * from './error-collect/error-collect.module';
export * from './image-view/image-view.component';
export * from './input-modal-dept/input-modal-dept.component';
export * from './modal-department/modal-dept.service';
export * from './modal-department/modal-department.component';
export * from './input-modal-floor/input-modal-floor.component';
export * from './modal-floor/modal-floor.component';
export * from './modal-floor/modal-floor.service';
export * from './modal-custom/modal-custom.component';
export * from './modal-custom-export/modal-custom-export.component';
export * from './modal-info-close/modal-info-close.component';
export * from './modal-park/modal-park.component';
export * from './modal-park/modal-park.service';
export * from './sp-table/sp-table.component';
export * from './sp-table/sp-table.service';
export * from './sp-input/sp-input.component';
export * from './tree/tree.component';
export * from './sp-upload/sp-upload.component';
export * from './sp-popconfirm/sp-popconfirm.component';
export * from './set-default-menu/set-default-menu.component';
export * from './set-default-menu/set-default-menu.service';
export * from './senior-search/senior-search.component';
export * from './role-authorization/role-authorization.component';
export * from './role-authorization/role-authorization.service';
export * from './renew/renew.component';
export * from './qq-customer-service/qq-customer-service.component';
export * from './process/process.component';
export * from './process/process.service';
export * from './oss-upload/oss-upload.component';
export * from './oss-upload/oss-upload.component.service';
export * from './model-form-custom/model-form-custom.component';
export * from './model-form-custom/model-form-custom.service';
export * from './modal-reserve/modal-reserve.component';
export * from './modal-reserve/modal-reserve.servise';
export * from './modal-propertycompany/modal-propertycompany.component';
export * from './modal-propertycompany/modal-propertycompany.service';
export * from './modal-parkpay/modal-parkpay.component';
export * from './modal-parkpay/modal-parkpay.service';

Pipe

export * from './trust_html.pipe';
export * from './chinese-numbers/chinese-numbers.pipe';
export * from './day-character/day-character.pipe';
export * from './empty-character/empty-character.pipe';
export * from './fashion-table/table-rooms-omitted.pipe';
export * from './form/filter.pipe';
export * from './html/html.pipe';
export * from './number-dot/number-dot.pipe';
export * from './string-to-array/string-to-array.pipe';
export * from './table/render.pipe';
export * from './table/systable.pipe';
export * from './text-omitted/text-omitted.pipe';

Enum

export * from './backend.enum';

Directive

export * from './menupermission/menupermission.directive';
export * from './oprperssion/oprperssion.directive';
export * from './permission/permission.directive';
export * from './resizable/resizable.directive';
export * from './resizable/resizable.module';

Constants

export * from './bank.constants';
export * from './basic.constants';
export * from './merchant-category.constants';
export * from './province-city.constants';
export * from './supporting-data.constants';

Service

export * from './message/sp-message.service';
export * from './user-login/user-login.service';
export * from './captcha-service/captcha.service';
export * from './constant/constant.service';
export * from './data-dict/data-dict.service';
export * from './mock-service/mock-service.service';
export * from './websocket/websocket.service';
export * from './ip-city/ip-city.service';

Util

export * from './common.util';
export * from './user-session.util';

Validator

export * from './bankcard.directive';
export * from './idnum.directive';
export * from './integer.directive';
export * from './nspecial.directive';
export * from './number.directive';
export * from './phone.directive';
export * from './socialCode.directive';
export * from './zipCode.directive';
export * from './SpValidator';