大组件自整理-pad端

最新推荐文章于 2024-08-11 10:58:10 发布

七彩猫猫虫

最新推荐文章于 2024-08-11 10:58:10 发布

阅读量672

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/SDAW_1/article/details/105385436

版权

这篇博客详细介绍了Pad端的界面组件实现，包括表格初始化、用户登录、日期选择、单选菜单、时间选择、计数框、系长签名、多选下拉框、输入框、二维码展示以及一些特殊组件如OK、NG关联功能。每个组件都提供了HTML和TS代码示例，涵盖了从基础输入到复杂交互的各种功能。

摘要由CSDN通过智能技术生成

开始

   <table class="table table-striped check-table-border" border="1" width="100%" style="text-align: center;">

1、表格初始头：用户登录

html：

<span class="fontsize">统计完成:</span>
    <user-confirm-input (userConfirmed)="userConfirmed()" [title]="'记录者'" [(ngModel)]="confirmPerson"
    name="'confirmPerson'"></user-confirm-input>

ts:


  userConfirmed() {
   
    this.dateTime = moment().format("YYYY-MM-DD");//不良记录主表更新时间

    if (this.confirmPerson) {
   
      this.indexMainData.confirmPersonId = this.confirmPerson.userId;
      this.indexMainData.confirmPerson = this.confirmPerson.userNick;
      this.indexMainData.confirmResult = 'Y';
      this.indexMainData.recordStatus = "已完成";
      this.userService.completeTaskProgress(this.value.formCode, this.value.pId, this.indexMainData.confirmResult != 'Y');//完成表的创建
    }
    this.sql.saveRecord(this.value["indexTableName"], this.indexMainData);
  }

2、日期

在这里插入图片描述

html：

<td>
                <input [readOnly]="value['confirmPerson']" 
                class="check-input"
                 type="date" 
                 [(ngModel)]="value['checkDate']" 
                 (ngModelChange)="saveRecord('checkDate');">
                </td>

ts：

在这里插入代码片

3、单选菜单

在这里插入图片描述

html：

<select class="check-input form-control ng-pristine ng-valid ng-touche" 
[disabled]="confirmPerson" 
[(ngModel)]="indexMainData['remark']" 
(ngModelChange)="saveParent('remark')" 
name="indexMainData['remark']">
          <option value="big1">1#大径卷边头</option>
          <option value="small1">1#小径卷边头</option>
          <option value="big2">2#大径卷边头</option>
          <option value="small2">2#小径卷边头</option>
          <option value="big3">3#大径卷边头</option>
          <option value="small3">3#小径卷边头</option>
        </select>

indexMainData[‘remark’] --------框中当前选中的内容

ts：

//储存单选框数据
  saveParent(name = '') {
   
    //如果单选框中选择的内容和name相同
    if (name == 'remark') {
   
      //则执行查询操作
      this.selectTotalNums();
    }
    this.nativeProvider.saveRecord(this.value["indexTableName"], this.indexMainData);
  }

4、时间

html：

<td>
        <input type="time" class="check-input time-width" 
        [readonly]="confirmPerson"
          [(ngModel)]="value['checkTime']"
        (ngModelChange)="saveRecord('checkTime');">
      </td>

ts：

changeCheckTime(name: string) {
   
    this.selectTotalNums();
    this.saveParent();
  }

5、计数框

5.1 使用次数：

html：

<td>
        <input class="check-input" 
        [readonly]="confirmPerson" type="number" 
        [(ngModel)]="value['col1Value']"
               (blur)="useChange1();"/>
      </td>

5.2 累计使用次数：

html：

<td>
        <input class="check-input" [readonly]="confirmPerson" type="number" [(ngModel)]="value['col2Value']"
               (ngModelChange)="setTotal1($event)"/>
        <button *ngIf="!confirmPerson" style="font-size:16px;position:relative;" (click)="clearTotal1();">清零 <i
          class="fa fa-dot-circle-o" style="font-size:20px;color:red"></i></button>
      </td>

6、系长签名

html

<td colspan="4">
           <user-confirm-input 
                  *ngIf="confirmPerson" 
                  name="headSign" [title]="'承认签名'" 
                  [(ngModel)]="headSign"
                  (userConfirmed)="userConfirmed('headSign')" 
                  [roleType]="'1'">
          </user-confirm-input>
              </td>

ts

userConfirmed() {
   
    if (this.value['confirmResult'] == 'N') {
   
      this.indexMainData.confirmResult = "N";
    } else if (this.value["confirmResult"] == "Y") {
   
      this.indexMainData.confirmResult = "Y";
    }
    if (this.confirmPerson) {
   
      this.indexMainData.confirmPerson = this.confirmPerson.userNick;
      this.indexMainData.confirmPersonId = this.confirmPerson.userId;
      this.indexMainData.recordStatus = "已完成";//表的状态
      // let hasNg = false;
      // this.userService.completeTaskProgress(this.value["formCode"], this.indexMainData.id, hasNg);
      this.userService.completeTaskProgress(this.value["formCode"], this.indexMainData.id, this.indexMainData.confirmResult != 'Y');
    }
    if (this.headSign) {
   
      this.indexMainData.headSign = this.headSign.userNick;
      this.indexMainData.headSignId = this.headSign.userId;
    }
    this.nativeProvider.saveRecord(this.value.indexTableName, this.indexMainData);

  }

7、多选下拉框

在这里插入图片描述

html

<td>
        <ion-select *ngIf="!confirmPerson"
         class="select" 
         [disabled]="indexMainData['recordStatus']=='已完成'"
          [(ngModel)]="suitVariet1" 
          (ngModelChange)="saveVariety();" multiple="true"
                cancelText="取消" okText="确定">

          <ion-option *ngFor="let item of codeList" 
          value="{
   {item.name}}">{
   {
   item.name}}</ion-option>
          <!-- <option value="EGZ">EGZ</option>
          <option value="AGK">AGK</option>
          <option value="EFS">EFS</option>
          <option value="GGE">GGE</option>
          <option value="EHB">EHB</option> -->
        </ion-select>
        <label *ngIf="confirmPerson">
        {
   {
   value['variety']}}</label>
      </td>

ts

//此方法为：当已经选中了，则将数据存到库中
saveVariety() {
   
    if (this.suitVariet1) {
   
      this.value['variety'] = this.suitVariet1.toString().split(",").join("/");
    }
    this.saveRecord('variety')
  }

8、输入框

在这里插入图片描述

html

<td colspan="2"> 产气药暴露控制“ON”</td>
      <td>
        <div style="width:200px;margin: 0 auto">
          <check-item-text 
            [formCode]="indexMainData['formCode']"
            [benchmark]="benchmark.benchmark1" 
            [inputFieldName]="'checkValue1'"
            [readonly]="confirmPerson" 
            [checkProject]=