国家医疗器械不良事件监测信息系统用户操作手册_v20181220.docx

    1. <div class="outer">
    2.     <div  class="table-header">
    3.         <div class="select1">
    4.             线别：
    5.             <nz-select 
    6.                 nzShowSearch 
    7.                 nzAllowClear 
    8.                 nzPlaceHolder="搜索线别" 
    9.                 [(ngModel)]="selectedLine"  
    10.                 style="width: 100%;"
    11.             >
    12.                 <nz-option *ngFor="let option of lines" [nzLabel]="option" [nzValue]="option" ></nz-option>
    13.             </nz-select>
    14.         </div>
    15.         <div class="select2">
    16.             机种：
    17.             <nz-select nzShowSearch nzAllowClear nzPlaceHolder="搜索机种" [(ngModel)]="selectedModel" style="width: 100%;">
    18.                 <nz-option *ngFor="let option of models" [nzLabel]="option" [nzValue]="option"></nz-option>
    19.             </nz-select>
    20.         </div>
    21.         <div class="headerButton">
    22.             <button nz-button nzType="primary" (click)="searchLineAndModel()" style="margin-left: 5%;">
    23.                 <i nz-icon nzType="search"></i>
    24.                 搜 索
    25.             </button>
    26.             <button nz-button nzType="primary" (click)="addData()" style="margin-left: 5%;">
    27.                 <i nz-icon nzType="plus-square" nzTheme="outline"></i>
    28.                 添 加
    29.             </button>
    30.             <button nz-button nzType="primary" (click)="deleteSelect()" style="margin-left: 5%;">
    31.                 <i nz-icon nzType="delete" nzTheme="outline"></i>
    32.                 删除所选数据
    33.             </button>
    34.             <button nz-button nzType="primary" (click)="showModal()" style="margin-left: 5%;">
    35.                 <i nz-icon nzType="upload" nzTheme="outline"></i>
    36.                 上 传
    37.             </button>
    38.         </div>
    39.     </div>
    40.     <div class="tebal-content">
    41.         <nz-table
    42.         #rowSelectionTable
    43.         [nzData]="listOfData"
    44.         [nzScroll]="{ y: '480px' }"
    45.         (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    46.         nzShowSizeChanger
    47.         >
    48.             <thead>
    49.             <tr>
    50.                 <!-- <th
    51.                 [nzSelections]="listOfSelection"
    52.                 [(nzChecked)]="checked"
    53.                 [nzIndeterminate]="indeterminate"
    54.                 (nzCheckedChange)="onAllChecked($event)"
    55.                 ></th> -->
    56.                 <th
    57.                 [(nzChecked)]="checked"
    58.                 [nzIndeterminate]="indeterminate"
    59.                 (nzCheckedChange)="onAllChecked($event)"
    60.                 ></th>
    61.                 <th>厂区</th>
    62.                 <th>厂别</th>
    63.                 <th>线种</th>
    64.                 <th>机种</th>
    65.                 <th>站别</th>
    66.                 <th>操作</th>
    67.             </tr>
    68.             </thead>
    69.             <tbody>
    70.             <tr *ngFor="let data of rowSelectionTable.data">
    71.                 <!-- <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> -->
    72.                 <td
    73.                 [nzChecked]="setOfCheckedId.has(data.station_id)"
    74.                 [nzIndeterminate]="indeterminate"
    75.                 (nzCheckedChange)="onItemChecked(data.station_id, $event)"
    76.                 ></td>
    77.                 <td>{{ data.site }}</td>
    78.                 <td>{{ data.plant }}</td>
    79.                 <td>{{ data.line }}</td>
    80.                 <td>{{ data.model }}</td>
    81.                 <td>{{ data.station }}</td>
    82.                 <td class="cell">
    83.                     <em
    84.                       nz-icon
    85.                       nzType="more"
    86.                       nzTheme="outline"
    87.                       nz-popover
    88.                       nzPopoverTrigger="hover"
    89.                       (nzPopoverVisibleChange)="change($event)"
    90.                       [nzPopoverContent]="contentTemplate"
    91.                       nzPopoverPlacement="left"
    92.                     ></em>
    93.                     <!-- 操作 -->
    94.                     <ng-template #contentTemplate>
    95.                         <a class="selectsadd" (click)="deleteModal(data.station_id)">删除</a><br>
    96.                         <a class="selectsadd" (click)="update(data.station_id)">更新</a><br>
    97.                         <a class="selectsadd" (click)="downLoad(data)">下載</a>
    98.                     </ng-template>
    99.                 </td>
    100.             </tr>
    101.             </tbody>
    102.         </nz-table>
    103.         <!-- <span>共{{ listOfData.length }}笔资料</span> -->
    104.     </div>    
    105. </div>
    107. <!-- 上传弹出框 -->
    108. <div>
    109.     <nz-modal
    110.       nzTitle="上传"
    111.       [(nzVisible)]="uploadVisible"
    112.       (nzOnCancel)="handleCancel()"
    113.       (nzOnOk)="handleOk()"
    114.       [nzStyle]="{ width: '30%', top: '100px' }"
    115.       [nzMaskStyle]="{ 'background-color': '#666' }"
    116.       [nzFooter]="nzModalFooter"
    117.     >
    118.       <ng-container *nzModalContent>
    119.         <nz-upload
    120.           nzType="drag"
    121.           [nzShowUploadList]="showUploadProgress"
    122.           [(nzFileList)]="fileList"
    123.           [nzLimit]="0"
    124.           [nzBeforeUpload]="beforeUpload"
    125.           [nzMultiple]="true"
    126.           [nzRemove]="delFileFromList"
    127.         >
    128.           <div class="upload-text">
    129.             <em nz-icon nzType="paper-clip" nzTheme="outline"></em>
    130.             <span>选择或拖拽上传</span>
    131.           </div>
    132.         </nz-upload>
    133.       </ng-container>
    135.       <ng-template #nzModalFooter>
    136.         <button
    137.           class="cancel"
    138.           nz-button
    139.           nzType="primary"
    140.           (click)="handleCancel()"
    141.         >
    142.           取消
    143.         </button>
    144.         <button [disabled]="flag" nz-button nzType="primary" (click)="handleOk()">
    145.           確定
    146.         </button>
    147.       </ng-template>
    148.     </nz-modal>
    149.   </div>
    1. import { Component, OnInit } from '@angular/core';
    2. import { HttpserviceService } from 'src/app/services/httpservice.service';
    3. import { NzMessageService } from 'ng-zorro-antd/message';  //信息提示
    4. import { NzModalService } from 'ng-zorro-antd/modal';
    5. import { NzUploadFile } from 'ng-zorro-antd/upload';//上传
    7. interface ItemData {
    8.   station_id: number;
    9.   site: string;
    10.   plant: number;
    11.   line: string;
    12.   model: string;
    13.   station: string;
    14. }
    16. @Component({
    17.   selector: 'app-mytemplate',
    18.   templateUrl: './mytemplate.component.html',
    19.   styleUrls: ['./mytemplate.component.css']
    20. })
    21. export class MytemplateComponent implements OnInit {   
    23.   selectedLine = null;//搜索线别
    24.   selectedModel = null;//搜索机种
    25.   lines = new Set<number>(); //线别数组
    26.   models = new Set<number>(); //机种数组
    27.   deleteVisible = false;//删除提示框
    28.   checked = false;//控制单选
    29.   indeterminate = false;//
    30.   public listOfData:any[] = [];//所有数据
    31.   listOfCurrentPageData: readonly ItemData[] = [];//指定类型数组
    32.   checkedAll = false; //控制全选
    33.   setOfCheckedId = new Set<number>();//已选的数据
    35.   //上传数据
    36.   uploadVisible = false;//上传弹出框
    37.   flag = true;
    38.   fileList: NzUploadFile[] = [];
    39.   data: any = {
    40.     fileList: [],
    41.     isUploadXML: false// 是否上传了XML檔
    42.   };
    43.   showUploadProgress = true; //是否展示uploadList
    46.   //item的删除
    47.   delete(id: number, event: any){
    48.     console.log("删除");
    49.     this.listOfData = this.listOfData.filter((item) => item.station_id !== id);
    50.   }
    51.   //item的更新
    52.   update(id: any) {
    53.     console.log("更新");
    54.     this.listOfData.forEach((ele) => {
    55.       if (ele.station_id == id) {
    56.         ele.site = 'WCQ';
    57.         ele.plant = 'F715';
    58.         ele.line = "line";
    59.         ele.model = "model";
    60.         ele.station = 'station';
    61.       }
    62.     });
    63.   }
    64.   //item的下载
    65.   downLoad(data: any) {
    66.     console.log("下载");
    67.     let downLoadData = [];
    68.     downLoadData.push(data);
    69.     // this.downloadService.exportAsExcelFile(downLoadData, '表格数据');
    70.   }
    71.   //操作
    72.   change(event: any) {
    73.     console.log(event);
    74.   }
    75.   //全选
    76.   onAllChecked(isCheckAll: boolean): void {
    77.     this.listOfData.forEach(element => {
    78.       this.updateCheckedSet(element.station_id, isCheckAll);
    79.     });
    80.     this.refreshCheckedStatus();
    81.     this.checkedAll = isCheckAll;
    82.   }
    83.   //单选
    84.   onItemChecked(id: number, checked: boolean): void {
    85.     this.updateCheckedSet(id, checked);
    86.     this.refreshCheckedStatus();
    87.     if (checked) {
    88.       this.setOfCheckedId.add(id);
    89.     } else {
    90.       this.setOfCheckedId.delete(id);
    91.     }
    92.     console.log("setOfCheckedId:",this.setOfCheckedId);
    93.     console.log("id:",id);
    94.   }
    95.   //更新已选行的id列表
    96.   updateCheckedSet(id: number, checked: boolean): void {
    97.     if (checked) {
    98.       this.setOfCheckedId.add(id);
    99.     } else {
    100.       this.setOfCheckedId.delete(id);
    101.     }
    102.   }
    103.   //每页显示多少数据
    104.   onCurrentPageDataChange($event: readonly ItemData[]): void {
    105.     this.listOfCurrentPageData = $event;
    106.     this.refreshCheckedStatus();
    107.   }
    108.   //刷新table表
    109.   refreshCheckedStatus(): void {
    110.     this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.station_id));
    111.     this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.station_id)) && !this.checked;
    112.   }
    113.   //删除本条数据
    114.   deleteModal(id: number): void {
    115.     this.modal.confirm({
    116.       nzTitle: '<i>警告</i>',
    117.       nzContent: '<b>是否确认删除本条数据？</b>',
    118.       nzOnOk: () => {
    119.         this.delete(id,true)
    120.         this.nzMessageService.success('删除成功！');
    121.         // console.log("this.listOfData:",this.listOfData);
    122.       }
    123.     });
    124.   }
    125.   //搜索线种和机种
    126.   searchLineAndModel(){
    127.     if(this.selectedLine!=null || this.selectedModel!=null){
    128.       let tempTable:any[]=[]
    129.       this.listOfData.forEach(element => {
    130.         if(this.selectedLine==element.line && this.selectedModel==element.model){
    131.           tempTable.push(element)
    132.         }
    133.         else if(this.selectedLine==null){
    134.           if(this.selectedModel==element.model){
    135.             tempTable.push(element)
    136.           }
    137.         }
    138.         else if(this.selectedModel==null){
    139.           if(this.selectedLine==element.line){
    140.             tempTable.push(element)
    141.           }
    142.         }
    143.       })
    144.       this.listOfData = tempTable
    145.     }else{
    146.       this.getTable();
    147.     }
    148.     //搜索完清空
    149.     this.selectedLine = null;
    150.     this.selectedModel = null;
    151.     this.refreshCheckedStatus()
    152.   }
    153.   //增加数据
    154.   addData() {
    155.     this.listOfData.push({
    156.       station_id: Math.floor(Math.random() * 100),
    157.       site: 'WCD',
    158.       plant: 'F721',
    159.       line: 'E1A',
    160.       model: 'SP15',
    161.     });
    162.     console.log(this.listOfData);
    163.     // this.refreshCheckedStatus()
    164.   }
    165.   //删除当前所选数据
    166.   deleteSelect() {
    167.     [...this.setOfCheckedId].forEach((id) => {
    168.       this.listOfData = this.listOfData.filter((item) => item['station_id'] !== id);
    169.     });
    170.     if (this.checkedAll) {
    171.       this.listOfData = [];
    172.     }
    173.   }
    175.   /**
    176.    * 上传弹出框
    177.    */
    178.    showModal(): void {
    179.     this.uploadVisible = true;
    180.     console.log("this.listOfData:",this.listOfData);
    181.   }
    182.   handleOk(): void {
    183.     this.uploadVisible = false;
    184.   }
    186.   handleCancel(): void {
    187.     this.uploadVisible = false;
    188.   }
    189.   //上传
    190.   beforeUpload = (file: NzUploadFile): boolean => {
    191.     this.fileList = this.fileList.concat(file);
    192.     console.log('档案', file);
    193.     console.log(this.fileList);
    194.     if (file['type'] === 'text/xml') {
    195.       this.flag = false;
    196.       //callAPI
    197.     } else {
    198.       this.nzMessageService.create('error', '该档案不是xml类型');
    199.     }
    200.     return false;
    201.   };
    202.   //移出
    203.   delFileFromList = (file: NzUploadFile): boolean => {
    204.     console.log(file)
    205.     this.fileList.forEach((element, index) => {
    206.       if (element.uid == file.uid) {
    207.         this.fileList.splice(index, 1);
    208.       }
    209.     });
    210.     return true;
    211.   }
    214.   constructor(
    215.     private HttpService:HttpserviceService,
    216.     private nzMessageService: NzMessageService,
    217.     private modal: NzModalService
    218.   ) {}
    220.   ngOnInit(){
    221.     this.getTable();
    222.   }
    223.   //调用Linlin的table的api
    224.    getTable(){
    225.     // await this.HttpService.getTableData().subscribe(
    226.     //   res=>{
    227.     //     console.log('res:',res.data);
    228.     //     this.listOfData = res.data;
    229.     //   }
    230.     // )
    231.     this.listOfData=[
    232.       {
    233.         station_id:1,
    234.         site:"WCD",
    235.         plant:1,
    236.         line:"A1",
    237.         model:"B1",
    238.         station:"C1",
    239.       },{
    240.         station_id:2,
    241.         site:"WCD",
    242.         plant:2,
    243.         line:"A1",
    244.         model:"B2",
    245.         station:"C2",
    246.       },{
    247.         station_id:3,
    248.         site:"WCD",
    249.         plant:3,
    250.         line:"A3",
    251.         model:"B3",
    252.         station:"C3",
    253.       },{
    254.         station_id:4,
    255.         site:"WCD",
    256.         plant:4,
    257.         line:"A4",
    258.         model:"B3",
    259.         station:"C4",
    260.       },{
    261.         station_id:5,
    262.         site:"WCD",
    263.         plant:5,
    264.         line:"A5",
    265.         model:"B5",
    266.         station:"C5",
    267.       },{
    268.         station_id:6,
    269.         site:"WCD",
    270.         plant:6,
    271.         line:"A6",
    272.         model:"B6",
    273.         station:"C6",
    274.       },{
    275.         station_id:7,
    276.         site:"WCD",
    277.         plant:7,
    278.         line:"A7",
    279.         model:"B7",
    280.         station:"C7",
    281.       },{
    282.         station_id:8,
    283.         site:"WCD",
    284.         plant:8,
    285.         line:"A8",
    286.         model:"B8",
    287.         station:"C8",
    288.       },{
    289.         station_id:9,
    290.         site:"WCD",
    291.         plant:9,
    292.         line:"A9",
    293.         model:"B9",
    294.         station:"C9",
    295.       },{
    296.         station_id:10,
    297.         site:"WCD",
    298.         plant:10,
    299.         line:"A10",
    300.         model:"B10",
    301.         station:"C10",
    302.       },{
    303.         station_id:11,
    304.         site:"WCD",
    305.         plant:11,
    306.         line:"A11",
    307.         model:"B11",
    308.         station:"C11",
    309.       }
    310.   ]
    312.     //存储线种，机种
    313.     this.listOfData.forEach(element => {
    314.       this.lines.add(element.line);
    315.       this.models.add(element.model)
    316.     });
    317.   }
    318.   xxx(){
    319.     console.log('selectedLine:',this.selectedLine);
    321.   }
    323. }
    1. @import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
    2. @import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
    4. .outer{
    5.     height: 100%;
    6.     position: relative;
    7. }
    8. .table-header{
    9.     /* border: 1px solid rebeccapurple; */
    10.     width: 100%;
    11.     height: 10%;
    12.     position: relative;
    13. }
    14. .select1{
    15.     /* border: 1px solid red; */
    16.     width: 15%;
    17.     position: absolute;
    18.     margin: auto;
    19.     left: 5%;
    20.     top: 8%;
    21. }
    22. .select2{
    23.     /* border: 1px solid red; */
    24.     width: 15%;
    25.     position: absolute;
    26.     margin: auto;
    27.     left: 25%;
    28.     top: 8%;
    29. }
    30. .headerButton{
    31.     /* border: 1px solid rebeccapurple; */
    32.     /* width: 80%; */
    33.     height: 100%;
    34.     position: absolute;
    35.     margin: auto;
    36.     left: 40%;
    37.     right: 1px;
    38.     padding-top: 26px;
    39.     /* position: relative; */
    41. }
    42. .tebal-content{
    43.     /* border: 1px solid skyblue; */
    44.     width: 100%;
    45.     height: 90%;
    46.     position: absolute;
    47.     margin: auto;
    48.     top: 10%;
    49. }
    50. .selectsadd {
    51.     color: #40a9ff !important;
    52. }
    53. .selectsadd:hover {
    54.     color: white !important;
    55.     background: #40a9ff;
    56. }

    新建项目：ng new 项目名称
    建立component、directive等schemastic：ng g schemastic名 名称
    启动服务：ng serve 默认4200端口 +—port 指定端口/+—open直接打开
    打包：ng build

    插值语法：{{xxx}}，直接读到component.ts里面的值
    指令语法：

    1. ngif，else：就是if：条件为布尔值，false时不加载：ngif=”xxx”;else=”yyy”
    2. ngfor：就是循环：ngfor=”let item of list;let i = index”

    数据绑定：

    1. 单向绑定：
      1. 基本的单项绑定：[]：[src]=”url”
      2. 类绑定：动态选择样式：[ngClass]={“class1=true,class2=false”}
      3. 样式绑定：控制大小等样式：[ngStyle]=”{color=xxx}”
    2. 双向绑定：输入框等信息：[(ngmodel)]=”xxx”

    表单：

    1. 响应式表单
    2. 模板驱动表单

    事件处理：

    1. 鼠标事件：
      1. 单击触发：(click)=”xxx()”
      2. 双击触发：(dblclick)=”xxx()”
      3. 失去焦点：(blur)=”xxx()”
      4. 鼠标进入：(mouseenter)=”xxx()”
      5. 鼠标离开：(mouseleave)=”xxx()”
      6. 鼠标滚动：(wheel)=”xxx()”
      7. 滑动条滚动：(scroll)=”xxx()”
      8. … …
    2. 键盘事件：
      1. 抬起触发：(keyup)=”xxx()”
      2. 按下触发：(keydown)=”xxx()”，(keypress)=”xxx()”
      3. enter抬起监听：(keyup.enter)=”xxx()”
      4. esc抬起触发：(keyup.esc)=”xxx()”

    … …

    1. tab需配合keydown使用，无法配合keyup。

    组件通信

    1. 父传子：父组件在子组件标签内传值，子组件中引入Input，用@Input接收值
    2. 子传父：子组件引入Output和EventEmitter，并实例化EventEmitter，通过this.new EventEmitter().emit(“xxx”)发送数据，
    3. 父调子：父组件在子组件标签内定义一个名如：#son，父组件引入viewChild，
    4. 任意组件传值：

    路由：单页面应用实现跳转

    1. 创建路由：ng new 项目名 —routing

    服务：

    1. 创建服务：ng g s 服务名
    2. 组件引入服务并注册
    3. 组件使用：result = this.服务.get/post(“url”,{参数})

    image.png
    image.png