product-module.component.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <!-- 产品 -->
  2. <nz-card nzTitle="产品">
  3. <!-- 操作按钮 -->
  4. <div nz-row [nzGutter]="24">
  5. <div nz-col [nzSpan]="24">
  6. <button nz-button (click)="productAddRow()" nzType="primary">{{ 'button.add' | translate }}</button>
  7. <br />
  8. <br />
  9. </div>
  10. </div>
  11. <!-- 表格 -->
  12. <div nz-row [nzGutter]="24">
  13. <div nz-col [nzSpan]="24">
  14. <nz-table #productRowTable nzSize="small" class="tableTdPadding" nzBordered [nzData]="productList">
  15. <thead>
  16. <tr>
  17. <!-- 产品编码 -->
  18. <th nzWidth="10%">{{ 'product' | translate }}{{ 'table.thead.code' | translate }}</th>
  19. <!-- 产品名称 -->
  20. <th nzWidth="17%">{{ 'product' | translate }}{{ 'contract.name' | translate }}</th>
  21. <!-- 折扣率 -->
  22. <th nzWidth="9%">{{ 'The discount' | translate }}</th>
  23. <!-- 标准报价 -->
  24. <th nzWidth="9%">{{ 'standard.quotation' | translate }}</th>
  25. <!-- 折扣后单价 -->
  26. <th nzWidth="9%">
  27. {{ 'pm.quotation.Discount' | translate }}
  28. {{ 'after' | translate }}
  29. {{ 'price' | translate }}
  30. </th>
  31. <!-- 标准金额 -->
  32. <th nzWidth="9%">{{ 'standard.amount' | translate }}</th>
  33. <!-- 折扣后金额 -->
  34. <th nzWidth="9%">
  35. {{ 'pm.quotation.Discount' | translate }}
  36. {{ 'after' | translate }}
  37. {{ 'their.fees.money' | translate }}
  38. </th>
  39. <!-- 成本单价 -->
  40. <th nzWidth="9%">
  41. {{ 'cost' | translate }}
  42. {{ 'price' | translate }}
  43. </th>
  44. <!--成本金额 -->
  45. <th nzWidth="9%">
  46. {{ 'cost' | translate }}
  47. {{ 'their.fees.money' | translate }}
  48. </th>
  49. <!-- 操作 -->
  50. <th nzWidth="10%">{{ 'table.operation' | translate }}</th>
  51. </tr>
  52. </thead>
  53. <tbody>
  54. <tr *ngFor="let data of productRowTable.data" class="editable-row">
  55. <td><input type="text" nz-input [(ngModel)]="data.code" disabled="true" /></td>
  56. <td>
  57. <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
  58. <input
  59. type="text"
  60. [(ngModel)]="data.name"
  61. nz-input
  62. placeholder="{{ 'select.please.choose' | translate }}"
  63. disabled="true"
  64. />
  65. </nz-input-group>
  66. <ng-template #suffixIconButton>
  67. <!-- 放大镜 勾选列表 -->
  68. <button nz-button nzType="primary" nzSearch (click)="selectProdutModal(data)">
  69. <i nz-icon type="search"></i>
  70. </button>
  71. </ng-template>
  72. </td>
  73. <td>
  74. <nz-input-number
  75. [nzMin]="0"
  76. [(ngModel)]="data.discountRate"
  77. [nzFormatter]="formatterDollar2"
  78. [nzParser]="parserDollar2"
  79. ></nz-input-number>
  80. </td>
  81. <td>
  82. <nz-input-number
  83. [nzMin]="0"
  84. [nzDisabled]="true"
  85. [(ngModel)]="data.standardQuotation"
  86. [nzFormatter]="formatterDollar"
  87. [nzParser]="parserDollar"
  88. ></nz-input-number>
  89. </td>
  90. <td>
  91. <nz-input-number
  92. [nzMin]="0"
  93. [(ngModel)]="data.unitPriceAfterDiscount"
  94. (nzBlur)="unitPriceAfterDiscountBlur(data)"
  95. [nzFormatter]="formatterDollar"
  96. [nzParser]="parserDollar"
  97. ></nz-input-number>
  98. </td>
  99. <td>
  100. <nz-input-number
  101. [nzMin]="0"
  102. [(ngModel)]="data.standardAmount"
  103. [nzFormatter]="formatterDollar"
  104. [nzParser]="parserDollar"
  105. ></nz-input-number>
  106. </td>
  107. <td>
  108. <nz-input-number
  109. [nzMin]="0"
  110. [(ngModel)]="data.amountAfterDiscount"
  111. [nzFormatter]="formatterDollar"
  112. [nzParser]="parserDollar"
  113. ></nz-input-number>
  114. </td>
  115. <td>
  116. <nz-input-number
  117. [nzMin]="0"
  118. [(ngModel)]="data.costUnitPrice"
  119. [nzFormatter]="formatterDollar"
  120. [nzParser]="parserDollar"
  121. ></nz-input-number>
  122. </td>
  123. <td>
  124. <nz-input-number
  125. [nzMin]="0"
  126. [(ngModel)]="data.costAmount"
  127. [nzFormatter]="formatterDollar"
  128. [nzParser]="parserDollar"
  129. ></nz-input-number>
  130. </td>
  131. <td>
  132. <a
  133. nz-popconfirm
  134. nzTitle="{{ 'confirm.to.delete' | translate }}?"
  135. nzOkText="{{ 'yes' | translate }}"
  136. nzCancelText="{{ 'no' | translate }}"
  137. (nzOnConfirm)="productDeleteRow(data)">{{ 'table.delete' | translate }}</a>
  138. </td>
  139. </tr>
  140. </tbody>
  141. </nz-table>
  142. </div>
  143. </div>
  144. </nz-card>
  145. <!-- 模块 -->
  146. <nz-card nzTitle="{{ 'module' | translate }}">
  147. <nz-tabset>
  148. <nz-tab *ngFor="let product of productList" [nzTitle]="product.name">
  149. <!-- 操作按钮 -->
  150. <div nz-row [nzGutter]="24">
  151. <div nz-col [nzSpan]="24">
  152. <!-- 新增 -->
  153. <button nz-button (click)="moduleAddRow(product)" nzType="primary">{{ 'button.add' | translate }}</button>
  154. <br />
  155. <br />
  156. </div>
  157. </div>
  158. <!-- 表格 -->
  159. <div nz-row [nzGutter]="24">
  160. <div nz-col [nzSpan]="24">
  161. <nz-table
  162. #moduleRowTable
  163. nzSize="small"
  164. class="tableTdPadding"
  165. nzBordered
  166. [nzData]="product.contractFileModularList"
  167. >
  168. <thead>
  169. <tr>
  170. <!-- 产品模块编码 -->
  171. <th nzWidth="30%">{{ 'product' | translate }}{{ 'module.code' | translate }}</th>
  172. <!-- 产品模块名称 -->
  173. <th nzWidth="30%">{{ 'product' | translate }}{{ 'module.name' | translate }}</th>
  174. <!-- 标准报价 -->
  175. <th nzWidth="10%">{{ 'standard.quotation' | translate }}</th>
  176. <!-- 采购价格 -->
  177. <th nzWidth="10%">
  178. {{ 'procurement' | translate }}
  179. {{ 'the.price' | translate }}
  180. </th>
  181. <!-- 操作 -->
  182. <th nzWidth="20%">{{ 'table.operation' | translate }}</th>
  183. </tr>
  184. </thead>
  185. <tbody>
  186. <tr *ngFor="let data of moduleRowTable.data" class="editable-row">
  187. <td><input disabled="true" type="text" nz-input [(ngModel)]="data.code" /></td>
  188. <td>
  189. <nz-select
  190. style="width:100%"
  191. nzShowSearch
  192. nzAllowClear
  193. [(ngModel)]="data.baseMaterialFileModularId"
  194. nzPlaceHolder="{{ 'select.please.choose' | translate }}"
  195. (ngModelChange)="baseMaterialFileModularIdChange(product, data, $event)"
  196. >
  197. <nz-option *ngFor="let i of product.modularListSelect" [nzValue]="i.id" [nzLabel]="i.name">
  198. </nz-option>
  199. </nz-select>
  200. </td>
  201. <td>
  202. <nz-input-number
  203. [nzMin]="0"
  204. [nzDisabled]="true"
  205. [(ngModel)]="data.standardQuotation"
  206. [nzFormatter]="formatterDollar"
  207. [nzParser]="parserDollar"
  208. (ngModelChange)="standardQuotationModuleKeyUp(product)"
  209. ></nz-input-number>
  210. </td>
  211. <td>
  212. <nz-input-number
  213. [nzMin]="0"
  214. [(ngModel)]="data.purchasePrice"
  215. [nzFormatter]="formatterDollar"
  216. [nzParser]="parserDollar"
  217. ></nz-input-number>
  218. </td>
  219. <td>
  220. <a
  221. nz-popconfirm
  222. nzTitle="{{ 'confirm.to.delete' | translate }}?"
  223. nzOkText="{{ 'yes' | translate }}"
  224. nzCancelText="{{ 'no' | translate }}"
  225. (nzOnConfirm)="moduleDeleteRow(product, data.id)"
  226. >{{ 'table.delete' | translate }}</a
  227. >
  228. </td>
  229. </tr>
  230. </tbody>
  231. </nz-table>
  232. </div>
  233. </div>
  234. </nz-tab>
  235. </nz-tabset>
  236. </nz-card>