前端页面增删改查

html页面

<!-- 表格查询条件Begin -->
<ng-template #serchArea>
    <div nz-row nzType="flex">
        <div nz-col>
            <nz-form-item nzFlex>
                <nz-form-label>申请日期</nz-form-label>
                <nz-form-control>
                    <nz-range-picker name="date" style="width:250px" [(ngModel)]="selectedDates" (ngModelChange)="onRangerPickerChange($event)"></nz-range-picker>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col>
            <nz-form-item nzFlex>
                <nz-form-label>部门</nz-form-label>
                <nz-form-control>
                    <nz-select nzPlaceHolder="请选择" [(ngModel)]="reqObj.departmentId" style="width:150px" nzAllowClear (ngModelChange)="getEmploList($event)">
                        <nz-option *ngFor="let department of departmentList" [nzLabel]="department.name" [nzValue]="department.id"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col>
            <nz-form-item nzFlex>
                <nz-form-label>申请人</nz-form-label>
                <nz-form-control>
                    <input class="form_input" nz-input name="employeeName" id="employeeName" nzPlaceHolder="请选择" style="width:150px" [(ngModel)]="reqObj.applyName" />
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col>
            <nz-form-item nzFlex>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="updateList(true)" style="margin-left: 10px;">
                        查询
                    </button>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>
</ng-template>
<!-- 表格查询条件End -->
<ng-template #btnAdd>
    <button nz-button nzType="primary" (click)="add($event)">添加</button>
  <button nz-button nzType="default" style="margin-left: 20px" (click)="out()">导出</button>
</ng-template>
<nz-card nzTitle="采购登记列表" [nzExtra]="btnAdd">
    <nz-table #ajaxTable nzBordered nzShowSizeChanger [nzTitle]="serchArea" [nzFrontPagination]="false" [nzLoading]="isTableLoading" [nzData]="list" [nzTotal]="page.total" [(nzPageIndex)]="page.index" [(nzPageSize)]="page.size" (nzPageIndexChange)="updateList()"
        (nzPageSizeChange)="updateList(true)" [nzShowTotal]="totalTemplate" [nzScroll]="">
        <thead>
            <tr>
              <th class="textCenter" nzShowSort  (click)="changeNum()">采购日期</th>
              <th class="textCenter">物品名称</th>
              <th class="textCenter">规格</th>
              <th class="textCenter">数量</th>
              <th class="textCenter">金额</th>
                <th class="textCenter">申请部门</th>
                <th class="textCenter">申请人</th>
                <th class="textCenter" nzRight="0px">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of ajaxTable.data ;let i =index">
              <td class="textCenter" class="textCenter" >
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <ng-container *ngIf="data.flag==true">
                      {{ data.purchaseDate }}
                    </ng-container>
                    <ng-container *ngIf="data.flag==false">
<!--                      <input type="text" nz-input [(ngModel)]="data.purchaseDate">-->
                      <nz-date-picker
                        nzShowTime
                        nzFormat="yyyy-MM-dd HH:mm:ss"
                        (ngModelChange)="onChange($event,i)"
                        [(ngModel)]="data.date"
                      ></nz-date-picker>
                    </ng-container>
                  </div>
                </div>
              </td>
              <td class="textCenter" class="textCenter" >
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <ng-container *ngIf="data.flag==true">
                      {{ data.goodsNo }}
                    </ng-container>
                    <ng-container *ngIf="data.flag==false">
                      <input type="text" nz-input [(ngModel)]="data.goodsNo">
                    </ng-container>
                  </div>
                </div>
              </td>
              <td class="textCenter" class="textCenter" >
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <ng-container *ngIf="data.flag==true">
                      {{ data.specifications }}
                    </ng-container>
                    <ng-container *ngIf="data.flag==false">
                      <input type="text" nz-input [(ngModel)]="data.specifications">
                    </ng-container>
                  </div>
                </div>
              </td>
              <td class="textCenter" class="textCenter" >
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <ng-container *ngIf="data.flag==true">
                      {{ data.quantity }}
                    </ng-container>
                    <ng-container *ngIf="data.flag==false">
                      <input type="text" nz-input [(ngModel)]="data.quantity">
                    </ng-container>
                  </div>
                </div>
              </td>
              <td class="textCenter" class="textCenter" >
                <div class="editable-cell">
                  <div class="editable-cell-text-wrapper">
                    <ng-container *ngIf="data.flag==true">
                      {{ data.amount }}
                    </ng-container>
                    <ng-container *ngIf="data.flag==false">
                      <input type="text" nz-input [(ngModel)]="data.amount">
                    </ng-container>
                  </div>
                </div>
              </td>
                <td class="textCenter" class="textCenter" >
                  <div class="editable-cell">
                    <div class="editable-cell-text-wrapper">
                      <ng-container *ngIf="data.flag==true">
                        {{ data.departmentName }}
                      </ng-container>
                      <ng-container *ngIf="data.flag==false">
                        <nz-select nzPlaceHolder="请选择" [(ngModel)]="data.departmentId" style="width:150px" nzAllowClear (ngModelChange)="getEmploList($event)">
                          <nz-option *ngFor="let department of departmentList" [nzLabel]="department.name" [nzValue]="department.id"></nz-option>
                        </nz-select>
                      </ng-container>
                    </div>
                  </div>
                </td>
                <td class="textCenter">
                  <div class="editable-cell">
                    <div class="editable-cell-text-wrapper">
                      <ng-container *ngIf="data.flag==true">
                        {{ data.applyName }}
                      </ng-container>
                      <ng-container *ngIf="data.flag==false">
                        <input type="text" nz-input [(ngModel)]="data.applyName">
                      </ng-container>
                    </div>
                  </div>
                </td>
                <td class="textCenter"  nzRight="0px">
                  <ng-container *ngIf="data.flag==true">
                    <a href="javascript:void(0)" (click)="startEdit(i)">编辑</a>
                  </ng-container>
                  <ng-container *ngIf="data.flag==false">
                    <a href="javascript:void(0)" (click)="saveEdit(i)">保存</a>
                  </ng-container>
                    <nz-divider nzType="vertical"></nz-divider>
                  <ng-container *ngIf="data.flag==true">
                    <a href="javascript:void(0)" style="color: #f81d22 !important;" (click)="delete(data.id)">删除</a>
                  </ng-container>
                  <ng-container *ngIf="data.flag==false" >
                    <a href="javascript:void(0)" (click)="cancelEdit(i)">取消</a>
                  </ng-container>

                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>
<ng-template #totalTemplate let-total>共 {{ total }} 条</ng-template>

js部分代码

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { HttpReqService } from "../../../common/service/HttpUtils.Service";
import { JsUtilsService } from "../../../common/service/JsUtils.Service";
import { Utils } from "../../../common/utils/utils";
import { GlobalService } from "../../../common/service/GlobalService";
import { NzMessageService } from "ng-zorro-antd";
import {Validators} from "@angular/forms";
@Component({
  selector: "app-articlePurchaseRegistration",
  templateUrl: "./articlePurchaseRegistration.component.html",
  styleUrls: ["./articlePurchaseRegistration.component.css"],
})
export class ArticlePurchaseRegistrationComponent implements OnInit {
  departmentList = [];
  list = [];

  page = {
    total: 0,
    size: 10,
    index: 1,
  };
  i = 1;
  reqObj = {
    page: 1,
    size: 10,
    departmentId: "",
    applyName: "",
    beginTime: "",
    endTime: "",
    sortFlag:true,
  };
  editCache = {};

  goodsClassificationNodes;
  selectedDates = [];
  isTableLoading = false;
  emplList = []; //申请人列表
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private httpReq: HttpReqService,
    private jsUtil: JsUtilsService,
    private globalService: GlobalService,
    private message: NzMessageService
  ) {}

  ngOnInit() {
    if (sessionStorage.getItem(this.router.url + "1") !== null) {
      this.reqObj = JSON.parse(sessionStorage.getItem(this.router.url + "1"));
      if (
        !Utils.isEmpty(this.reqObj.beginTime) &&
        !Utils.isEmpty(this.reqObj.endTime)
      ) {
        this.selectedDates.push(new Date(this.reqObj.beginTime));
        this.selectedDates.push(new Date(this.reqObj.endTime));
      }
    }

    this.httpReq.post("department/listAll", null, {}, (data) => {
      if (data["status"] == 200) {
        this.departmentList = data["data"];
      }
    });

    this.updateList();
  }

  add(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id =
      this.list.length > 0
        ? this.list[this.list.length - 1].id +
        1
        : 0;
    const jiatingchengyuan = {
      purchaseDate:'',//采购日期
      goodsNo:'',//物品名称
      specifications:'',// 规格
      quantity:'',// 数量
      amount:'',// 金额
      departmentId:'',// 部门Id
      applyName:'',
      flag:false
    };
    // const index = this.interviewContactsList.push(jiatingchengyuan);

    this.list = [
      jiatingchengyuan,
      ...this.list,
    ];
  }
  //编辑
  startEdit(e): void {
    this.list[e].date=new Date(this.list[e].purchaseDate)
    this.list[e].flag=false

  }
  //保存
  saveEdit(e): void {
    this.list[e].flag=true
    this.list[e].purchaseDate= this.jsUtil.dateFormat2( this.list[e].purchaseDate)
    this.httpReq.post("purchaseRegister/saveOrUpdateNew",null,this.list[e], (data) => {
      if (data["code"] == 0) {
        this.message.success("保存成功！");
        this.updateList();
      }
    });
  }
  //取消
  cancelEdit(e): void {
    this.list[e].flag=true
    this.updateList();
  }
  onChange(result: Date[],e): void {
    this.list[e].purchaseDate= this.jsUtil.dateFormat2(result)
    console.log(  '',this.list[e].purchaseDate)
  }
  onOk(result: Date): void {
    console.log('onOk', result);
  }
  //排序
  changeNum(){
    if(this.reqObj.sortFlag==true){
      this.reqObj.sortFlag=false
    }else  if(this.reqObj.sortFlag==false){
      this.reqObj.sortFlag=true
    }
    this.updateList();
  }
  out(){
    // let obj = {
    //   departmentId: this.reqObj.departmentId,
    //   applyName: this.reqObj.applyName,
    //   beginTime:this.reqObj.beginTime,
    //   endTime: this.reqObj.endTime,
    // };
    this.httpReq.get(
      "purchaseRegister/export",
      {},
      (res) => {
        if (res.code == 0) {

        }
      }
    );
  }
  updateList(reset: boolean = false): void {
    if (reset) {
      this.page.index = 1;
    }
    this.reqObj.page = this.page.index - 1;
    this.reqObj.size = this.page.size;

    if (this.reqObj.departmentId == null) {
      this.reqObj.departmentId = "";
    }

    if (this.reqObj.applyName == null) {
      this.reqObj.applyName = "";
    }
    sessionStorage.setItem(this.router.url, JSON.stringify(this.reqObj));
    this.isTableLoading = true;
    this.httpReq.get("purchaseRegister/getPage", this.reqObj, (data) => {
      this.isTableLoading = false;
      if (data["code"] == 0) {
        this.list = data["data"]["content"];
        for (let i = 0; i < this.list.length; i++) {
          // this.list[i].purchaseDate=new Date(this.list[i].purchaseDate)
         this.list[i].flag=true
        }
        this.page.total = data["data"]["totalElements"];
      }
    });
  }

  onRangerPickerChange(dateArr: Date[]) {
    if (dateArr[0]) {
      this.reqObj.beginTime = this.jsUtil.dateFormat(dateArr[0]) + " 00:00:00";
    } else {
      this.reqObj.beginTime = "";
    }
    if (dateArr[1]) {
      this.reqObj.endTime = this.jsUtil.dateFormat(dateArr[1]) + " 23:59:59";
    } else {
      this.reqObj.endTime = "";
    }
  }
  delete(id) {
    this.globalService.delModal(() => {
      this.httpReq.post("purchaseRegister/del", null, { id: id }, (data) => {
        if (data["code"] == 0) {
          this.message.success("删除成功！");
          this.updateList();
        }
      });
    });
  }

  // 通过部门获得人员
  getEmploList(event) {
    // this.validateForm.get("departmentId").value
    this.httpReq.get("employees/getByDepartment", { id: event }, (data) => {
      if (data["status"] == 200 && data["code"] == 0) {
        this.emplList = data["data"];
      }
    });
  }
}

最后实现的效果