MaterialDetail.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div class="wrapper flex column layout-gap">
  3. <el-card shadow="hover" class="filter-card">
  4. <el-form label-width="100px">
  5. <el-row :gutter="$$Constant.LAYOUT_GAP">
  6. <el-col :span="8">
  7. <el-form-item label="物料名称">
  8. <el-input v-model="query.name" placeholder="输入物料名称"></el-input>
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="8">
  12. <el-form-item label="物料编码">
  13. <el-input v-model="query.materielCode" placeholder="输入物料编码"></el-input>
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="8">
  17. <el-form-item label="大类">
  18. <my-select
  19. v-model="query.bigCategoryId"
  20. :options="optionGroup.MaterialCategory ? optionGroup.MaterialCategory.list : []"
  21. @change="onChangeBigCategoryBtnClick"
  22. >
  23. <el-option label="全部" value=""></el-option>
  24. </my-select>
  25. </el-form-item>
  26. </el-col>
  27. </el-row>
  28. <el-row :gutter="$$Constant.LAYOUT_GAP" :style="{
  29. 'margin-top': `${$$Constant.LAYOUT_GAP}px`
  30. }">
  31. <el-col :span="8">
  32. <el-form-item label="中类">
  33. <my-select
  34. v-model="query.middleCategoryId"
  35. :options="middleCategories"
  36. @change="onChangeMiddleCategoryBtnClick"
  37. >
  38. <el-option label="全部" value=""></el-option>
  39. </my-select>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="8">
  43. <el-form-item label="小类">
  44. <my-select
  45. v-model="query.smallCategoryId"
  46. :options="middleCategories"
  47. @change="onSearchBtnClick"
  48. >
  49. <el-option label="全部" value=""></el-option>
  50. </my-select>
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="8" class="text-right">
  54. <el-button
  55. plain
  56. class="filter-button"
  57. @click="onResetBtnClick"
  58. >重置</el-button>
  59. <el-button
  60. type="primary"
  61. class="filter-button"
  62. @click="onSearchBtnClick"
  63. >查询</el-button>
  64. </el-col>
  65. </el-row>
  66. </el-form>
  67. </el-card>
  68. <el-card
  69. shadow="hover"
  70. class="z-card flex column flex-1 fit-size"
  71. >
  72. <div class="wrapper flex column layout-gap">
  73. <div class="flex-1 fit-size">
  74. <el-table
  75. ref="table"
  76. :data="list"
  77. stripe
  78. border
  79. highlight-current-row
  80. height="100%"
  81. size="small"
  82. class="custom-el-table-style"
  83. >
  84. <el-table-column
  85. type="index"
  86. label="序号"
  87. width="60"
  88. align="center"
  89. fixed
  90. ></el-table-column>
  91. <el-table-column
  92. label="物料商品编码"
  93. prop="goodsCode"
  94. align="center"
  95. min-width="80"
  96. header-align="center"
  97. fixed
  98. ></el-table-column>
  99. <el-table-column
  100. label="物料名称"
  101. prop="name"
  102. min-width="150"
  103. header-align="center"
  104. align="left"
  105. fixed
  106. ></el-table-column>
  107. <el-table-column
  108. label="物料编码"
  109. prop="materielCode"
  110. min-width="80"
  111. header-align="center"
  112. align="center"
  113. ></el-table-column>
  114. <el-table-column
  115. label="大类"
  116. prop="bigCategoryName"
  117. min-width="80"
  118. header-align="center"
  119. align="left"
  120. ></el-table-column>
  121. <el-table-column
  122. label="中类"
  123. prop="middleCategoryName"
  124. min-width="80"
  125. header-align="center"
  126. align="left"
  127. ></el-table-column>
  128. <el-table-column
  129. label="小类"
  130. prop="smallCategoryName"
  131. min-width="80"
  132. header-align="center"
  133. align="left"
  134. ></el-table-column>
  135. <el-table-column
  136. label="物料描述"
  137. prop="materielDescribe"
  138. min-width="150"
  139. header-align="center"
  140. align="left"
  141. ></el-table-column>
  142. <el-table-column
  143. label="品牌"
  144. prop="brand"
  145. align="left"
  146. min-width="100"
  147. header-align="center"
  148. ></el-table-column>
  149. <el-table-column
  150. label="生产商名称"
  151. prop="manufacturer"
  152. min-width="100"
  153. header-align="center"
  154. align="left"
  155. ></el-table-column>
  156. <el-table-column
  157. label="操作栏"
  158. min-width="80"
  159. header-align="center"
  160. align="center"
  161. >
  162. <template v-slot="{ row }">
  163. <div class="flex center layout-gap">
  164. <edit-button :data="row" :on-click="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
  165. </div>
  166. </template>
  167. </el-table-column>
  168. </el-table>
  169. </div>
  170. <my-pagination
  171. :total="total"
  172. :pagination="pagination"
  173. @current-change="currentPageNoChange"
  174. />
  175. </div>
  176. </el-card>
  177. <dialog-material-detail
  178. ref="editor"
  179. @saved="loadList"
  180. ></dialog-material-detail>
  181. </div>
  182. </template>
  183. <script>
  184. import BaseCurdList from '@@/utils/BaseCurdList'
  185. import MaterialDetail from '@@/entries/MaterialDetail'
  186. import materialCategoryApi from '@@/api/MaterialCategoryApi'
  187. export default {
  188. name: 'MaterialDetail',
  189. extends: BaseCurdList(MaterialDetail),
  190. data: () => ({
  191. middleCategories: [],
  192. smallCategories: []
  193. }),
  194. methods: {
  195. onChangeBigCategoryBtnClick (id) {
  196. this.$$request(materialCategoryApi.getList, {parentId: id}).then(dataList => {
  197. this.middleCategories = Object.freeze(dataList)
  198. }).catch(console.error)
  199. },
  200. onChangeMiddleCategoryBtnClick (id) {
  201. this.$$request(materialCategoryApi.getList, {parentId: id}).then(dataList => {
  202. this.middleCategories = Object.freeze(dataList)
  203. }).catch(console.error)
  204. },
  205. onOpenDetailEditorBtnClick (data) {
  206. this.onOpenEditorBtnClick(data, true)
  207. }
  208. }
  209. }
  210. </script>
  211. <style lang="scss" scoped></style>