material-file.component.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <!-- 头部导航 -->
  2. <page-header [action]="phActionTpl">
  3. <ng-template #phActionTpl>
  4. <!-- 新增分类 标题 -->
  5. <span id="titleAdd" hidden="true"> {{ 'button.add' | translate }}{{ 'material.classification' | translate }} </span>
  6. <!-- 修改分类 -->
  7. <span id="titleUpdate" hidden="true">
  8. {{ 'table.update' | translate }}{{ 'material.classification' | translate }}
  9. </span>
  10. <!-- 产品新增 标题-->
  11. <span id="proTitAdd" hidden="true"> {{ 'button.add' | translate }}{{ 'product' | translate }} </span>
  12. <!-- 产品修改 -->
  13. <span id="proTitUpdate" hidden="true"> {{ 'table.update' | translate }}{{ 'product' | translate }} </span>
  14. <!-- 按钮 新增产品 -->
  15. <button nz-button nzType="primary" (click)="addProduct('')">
  16. {{ 'button.add' | translate }}{{ 'product' | translate }}
  17. </button>
  18. </ng-template>
  19. </page-header>
  20. <div nz-row [nzGutter]="24">
  21. <!-- 左边 card -->
  22. <div nz-col nzMd="24" nzLg="6">
  23. <nz-card>
  24. <!-- 添加一级 -->
  25. <div nz-row [nzGutter]="24" style="margin-bottom: 10px;">
  26. <div nz-col nzMd="24" nzLg="24">
  27. <button nz-button nzType="primary" (click)="addMaterial(0)">{{ 'button.leve.one' | translate }}</button>
  28. </div>
  29. </div>
  30. <!-- 搜索框 -->
  31. <div nz-row [nzGutter]="24">
  32. <div nz-col nzMd="24" nzLg="24">
  33. <nz-input-group [nzSuffix]="suffixIcon" style="width:100%">
  34. <input
  35. type="text"
  36. nz-input
  37. placeholder="{{ 'placeholder' | translate }}{{ 'material.classification.name' | translate }}"
  38. [(ngModel)]="searchValue"
  39. />
  40. </nz-input-group>
  41. <ng-template #suffixIcon>
  42. <i nz-icon type="search"></i>
  43. </ng-template>
  44. </div>
  45. </div>
  46. <!-- 物料 树 -->
  47. <div nz-row [nzGutter]="24">
  48. <div nz-col nzMd="24" nzLg="24">
  49. <nz-tree
  50. [nzData]="materialNodes"
  51. [nzSearchValue]="searchValue"
  52. (nzClick)="treeClick($event)"
  53. (nzDblClick)="openFolder($event)"
  54. >
  55. <!-- 下拉菜单 4个按钮 -->
  56. <ng-template #contextTemplate>
  57. <ul nz-menu nzInDropDown>
  58. <li nz-menu-item (click)="addMaterial(1)">
  59. {{ 'button.add' | translate }}{{ 'material.classification' | translate }}
  60. </li>
  61. <li nz-menu-item (click)="addMaterial(2)">
  62. {{ 'table.update' | translate }}
  63. </li>
  64. <li nz-menu-item (click)="delMaterial()">
  65. {{ 'table.delete' | translate }}
  66. </li>
  67. <li nz-menu-item (click)="addProduct('')">{{ 'button.add' | translate }}{{ 'product' | translate }}</li>
  68. <li nz-menu-item (click)="cancel()">{{ 'button.cancel' | translate }}</li>
  69. </ul>
  70. </ng-template>
  71. <ng-template #nzTreeTemplate let-node>
  72. <span class="custom-node">
  73. <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu(node.key, $event, contextTemplate)">
  74. <span class="folder-name">{{ node.title }}</span>
  75. </span>
  76. <span *ngIf="node.isLeaf" (contextmenu)="contextMenu(node.key, $event, contextTemplate)">
  77. <span class="file-name">{{ node.title }}</span>
  78. </span>
  79. </span>
  80. </ng-template>
  81. </nz-tree>
  82. </div>
  83. </div>
  84. </nz-card>
  85. </div>
  86. <!-- 右边 card -->
  87. <div nz-col nzMd="24" nzLg="18">
  88. <nz-card nz-col nzMd="24" nzLg="24">
  89. <form>
  90. <!--查询 条件-->
  91. <div nz-row nzGutter="24">
  92. <!-- 物料分类名称 -->
  93. <!-- <div nz-col nzMd="24" nzLg="2">
  94. <nz-form-label nzNoColon="false"> {{ 'material.classification' | translate }} </nz-form-label>
  95. </div>
  96. <div nz-col nzMd="24" nzLg="4" *ngIf="materialNodes">
  97. <nz-tree-select
  98. nzAllowClear="false"
  99. [nzNodes]="materialNodes"
  100. nzShowSearch
  101. nzPlaceHolder="{{ 'select.please.choose' | translate }}"
  102. [(ngModel)]="baseMaterialFileProduct.baseMaterialFileClassificationId"
  103. name="baseMaterialFileClassificationId"
  104. >
  105. </nz-tree-select>
  106. </div> -->
  107. <!-- 产品编码 -->
  108. <div nz-col nzMd="24" nzLg="2">
  109. <nz-form-label> {{ 'product' | translate }}{{ 'table.thead.code' | translate }} </nz-form-label>
  110. </div>
  111. <div nz-col nzMd="24" nzLg="4">
  112. <input nz-input [(ngModel)]="baseMaterialFileProduct.code" name="code" />
  113. </div>
  114. <!-- 产品名称 -->
  115. <div nz-col nzMd="24" nzLg="2">
  116. <nz-form-label> {{ 'product' | translate }}{{ 'Name' | translate }} </nz-form-label>
  117. </div>
  118. <div nz-col nzMd="24" nzLg="4">
  119. <input nz-input [(ngModel)]="baseMaterialFileProduct.name" name="name" />
  120. </div>
  121. <!-- 列表查询重置 -->
  122. <div nz-col nzMd="24" nzLg="3">
  123. <button (click)="query()" nz-button nzType="primary">{{ 'button.query' | translate }}</button>
  124. <button (click)="rest()" nz-button nzType="primary">{{ 'button.reset' | translate }}</button>
  125. </div>
  126. </div>
  127. </form>
  128. <!-- 产品数据 表 -->
  129. <div nz-row nzGutter="24">
  130. <div nz-col nzMd="24" nzLg="24">
  131. <nz-table
  132. #basicTable
  133. nzSize="small"
  134. class="tableTdPadding"
  135. [nzData]="proTable"
  136. [nzTotal]="page.total"
  137. [nzPageIndex]="page.current"
  138. [nzFrontPagination]="false"
  139. [nzLoading]="isSpinning"
  140. (nzPageIndexChange)="pageIndexChange($event)"
  141. >
  142. <thead>
  143. <tr>
  144. <!-- 产品编码 -->
  145. <th nzWidth="8vw" nzLeft="0px" nzAlign="center">
  146. {{ 'product' | translate }}{{ 'table.thead.code' | translate }}
  147. </th>
  148. <!-- 名称 -->
  149. <th nzAlign="center" nzLeft="8vw">{{ 'contract.name' | translate }}</th>
  150. <!-- 属性 -->
  151. <th nzAlign="center">{{ 'property' | translate }}</th>
  152. <!-- 状态 -->
  153. <th nzAlign="center">{{ 'state' | translate }}</th>
  154. <!-- 操作 -->
  155. <th nzAlign="center" nzRight="0px">
  156. {{ 'table.operation' | translate }}
  157. </th>
  158. </tr>
  159. </thead>
  160. <tbody>
  161. <tr *ngFor="let data of basicTable.data">
  162. <td style="width: 8vw" nzAlign="center" nzLeft="0px">{{ data.code }}</td>
  163. <td nzAlign="center" nzLeft="8vw">{{ data.name }}</td>
  164. <!-- 属性 1采购 2销售 -->
  165. <td nzAlign="center">
  166. <ng-container *ngIf="data.attribute == 1">
  167. <nz-tag [nzColor]="'#f50'">{{ 'procurement' | translate }}</nz-tag>
  168. </ng-container>
  169. <ng-container *ngIf="data.attribute == 2">
  170. <nz-tag [nzColor]="'#108ee9'"> {{ 'sales' | translate }}</nz-tag>
  171. </ng-container>
  172. </td>
  173. <!-- 状态 0未启用 1启用-->
  174. <td nzAlign="center">
  175. <ng-container *ngIf="data.status == 0">
  176. <nz-tag [nzColor]="'orange'">{{ 'enabled.not' | translate }}</nz-tag>
  177. </ng-container>
  178. <ng-container *ngIf="data.status == 1">
  179. <nz-tag [nzColor]="'green'">{{ 'enabled' | translate }}</nz-tag>
  180. </ng-container>
  181. </td>
  182. <!-- 操作按钮 详情 修改 删除-->
  183. <td nzAlign="center" nzRight="0px" style="width: 30%;">
  184. <a href="javascript:void(0);" (click)="detailProduct(data.id)">
  185. {{ 'table.view' | translate }}
  186. </a>
  187. <nz-divider nzType="vertical"></nz-divider>
  188. <!-- 修改 跟新增同一个抽屉-->
  189. <a href="javascript:void(0);" (click)="addProduct(data.id)">
  190. {{ 'table.update' | translate }}
  191. </a>
  192. <nz-divider nzType="vertical"></nz-divider>
  193. <!-- 删除 -->
  194. <a
  195. nz-popconfirm
  196. nzTitle="{{ 'isdelete' | translate }}"
  197. nzOkText="{{ 'yes' | translate }}"
  198. nzCancelText="{{ 'no' | translate }}"
  199. (nzOnConfirm)="delPro(data.id)"
  200. >
  201. {{ 'table.delete' | translate }}
  202. </a>
  203. </td>
  204. </tr>
  205. </tbody>
  206. </nz-table>
  207. </div>
  208. </div>
  209. </nz-card>
  210. </div>
  211. </div>