大组件自整理-pc端

*# 初始路由配置

注：下面三步顺序可以打乱

第一步

D:\11\check-manage-ui\src\app\routes\checkcell\task\checklist-routing.module.ts

第二步

新建要做的大组件的文件夹

上面路由中的的MmFormCs4L0001031Component组件就是ts里的：

第三步

在checklist.module.ts中配置组件

二维码

html

<tr>
                <td colspan="2" rowspan="2">
                    现品票
                </td>
                <td>
                    <img *ngIf="value['imgUrl']" [src]="value['imgUrl']" (click)="view(value['imgUrl'])"/>
                  </td>
            </tr>
            <tr>
                
                <td>
                    {{value["g0"]}}
                    {{value["g1"]}}
                    {{value["g2"]}}
                    {{value["g3"]}}
                    {{value["g4"]}}
                    {{value["g5"]}}
                    {{value["g6"]}}
                    {{value["g7"]}}
                    {{value["g8"]}}
                </td>
            </tr>

ts

import { ActivatedRoute } from '@angular/router';
import { CodeService } from '../../../../admin/syscode/services/code.service';
import { Component, OnInit } from '@angular/core';
import { TablesService } from '../../services/tables.service';
import { DynamicIndexData } from '../../model/dynamic-model';
import { Lightbox, LightboxConfig } from 'ngx-lightbox';

@Component({
  templateUrl: './mm-form-cs4-l0-00-218-2.html',
  selector: 'mm-form-cs4-l0-00-218-2',
  styleUrls: ['./mm-form-cs4-l0-00-218-2.scss'],
  providers: [CodeService, TablesService],
})
export class MmFormCs4L0002182Component implements OnInit {
  //index的主index
  indexMainData: DynamicIndexData = new DynamicIndexData();
  value: Array<Object> = new Array<Object>();
  line:string;
  tableName: string;
  constructor(private codeService: CodeService,
    private tablesService: TablesService,
    private route: ActivatedRoute,
    private lightbox: Lightbox,
    private lightboxConfig: LightboxConfig) {
  }

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      this.indexMainData.id = params.id;
      this.line = params.lineSn;
      this.tableName = params.code + '_index';
      this.tablesService.selectData(this.tableName, "id = '" + this.indexMainData.id + "'", '')
        .subscribe(data => {
          if (data['data'][0]) {
            this.indexMainData = data['data'][0];
            this.tablesService.selectData(this.tableName.replace('_index',''),"p_id = '" + this.indexMainData.id + "'","").subscribe((res)=>{
              if (res['data'].length) {
                let detailData = [];//子表中数据
                for (let i = 0; i < res['data'].length; i++) {
                  detailData.push(res['data'][i]);
                }
                let obj = [];
                detailData.forEach(element=>{
                  obj[element.field_name] = element.field_value;
                  this.value = obj;
                });
              }
            });
          }
        });
    });
    
  }

  view(src): void {
    let albums = new Array();
    const album = {
      src: src,
      caption: '',
      thumb: ''
    };
    albums.push(album);
    this.lightboxConfig.centerVertically = true;
    this.lightbox.open(albums, 0, this.lightboxConfig);
  }
  
}