index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <script>
  2. import { dicts } from "./dicts";
  3. import useColumns from "./columns";
  4. import { LIST } from "@/api/business/purchase/catalogue";
  5. export default {
  6. name: "PuchaseCatalogue",
  7. dicts: dicts,
  8. components: {
  9. SeeButton: () => import("./see/index.vue"),
  10. InvButton: () => import("./invalid/index.vue"),
  11. EnaButton: () => import("./enable/index.vue"),
  12. ExpButton: () => import("./export/index.vue"),
  13. ElSuperTable: () => import("@/components/super-table/index.vue"),
  14. ElSuperSearch: () => import("@/components/super-search/index.vue"),
  15. },
  16. data() {
  17. const { TableColumns, SearchColumns } = useColumns();
  18. const params = this.$init.params(SearchColumns);
  19. return {
  20. size: "mini",
  21. loading: false,
  22. params: params,
  23. tableData: [],
  24. selectData: [],
  25. TableColumns: TableColumns,
  26. SearchColumns: SearchColumns,
  27. page: { pageNum: 1, pageSize: 20, total: 0 },
  28. };
  29. },
  30. computed: {},
  31. created() {
  32. this.useQuery(this.params, this.page);
  33. },
  34. methods: {
  35. //
  36. async fetchList(prop, page) {
  37. try {
  38. this.loading = true;
  39. const { pageNum, pageSize } = page;
  40. const { code, rows, total } = await LIST(
  41. { ...prop },
  42. { pageNum, pageSize }
  43. );
  44. if (code === 200) {
  45. this.tableData = rows.map((item, index) => ({
  46. ...item,
  47. $index: (pageNum - 1) * pageSize + index + 1,
  48. }));
  49. this.page.total = total;
  50. }
  51. } catch (err) {
  52. // catch
  53. } finally {
  54. // finally
  55. this.loading = false;
  56. }
  57. },
  58. // 查 询
  59. useQuery(prop, page) {
  60. this.fetchList(prop, page);
  61. },
  62. // 重 置
  63. useReset() {
  64. this.page.pageNum = 1;
  65. this.page.pageSize = 10;
  66. this.params = this.$init.params(this.SearchColumns);
  67. this.useQuery(this.params, this.page);
  68. },
  69. // 选 择
  70. useSelect(prop) {
  71. this.selectData = prop;
  72. },
  73. // 明 细
  74. async useSee(prop) {
  75. const { open } = this.$refs.SeeButton;
  76. await open([prop]);
  77. },
  78. },
  79. };
  80. </script>
  81. <template>
  82. <el-card
  83. v-loading="loading"
  84. :body-style="{
  85. height: '100%',
  86. padding: 0,
  87. display: 'flex',
  88. 'flex-direction': 'column',
  89. }"
  90. >
  91. <el-super-search
  92. v-model="params"
  93. :size="size"
  94. :dict="dict"
  95. :columns="SearchColumns"
  96. @reset="useReset"
  97. @submit="useQuery(params, page)"
  98. ></el-super-search>
  99. <div class="my-4" style="text-align: right">
  100. <el-button-group>
  101. <ena-button
  102. :size="size"
  103. :select-data="selectData"
  104. status="Y"
  105. @success="useQuery(params, page)"
  106. ></ena-button>
  107. <ena-button
  108. :size="size"
  109. :select-data="selectData"
  110. status="N"
  111. @success="useQuery(params, page)"
  112. ></ena-button>
  113. </el-button-group>
  114. <el-button-group>
  115. <inv-button
  116. ref="InvButton"
  117. :size="size"
  118. :select-data="selectData"
  119. @success="useQuery(params, page)"
  120. ></inv-button>
  121. <see-button
  122. v-show="false"
  123. ref="SeeButton"
  124. :size="size"
  125. :dict="dict"
  126. :select-data="selectData"
  127. @success="useQuery(params, page)"
  128. ></see-button
  129. ></el-button-group>
  130. <el-button-group>
  131. <exp-button
  132. :size="size"
  133. :select-data="selectData"
  134. @success="useQuery(params, page)"
  135. ></exp-button>
  136. </el-button-group>
  137. </div>
  138. <el-super-table
  139. v-model="tableData"
  140. :size="size"
  141. :dict="dict"
  142. :page="page"
  143. :columns="TableColumns"
  144. index
  145. checkbox
  146. pagination
  147. convenitentOperation
  148. storage-key="PuchaseCatalogueSuperTable1"
  149. @row-dblclick="useSee"
  150. @selection-change="useSelect"
  151. @pagination="useQuery(params, page)"
  152. >
  153. </el-super-table>
  154. </el-card>
  155. </template>
  156. <style scoped lang="scss">
  157. .el-card {
  158. width: calc(100% - 32px);
  159. height: calc(100vh - 32px);
  160. margin: 16px;
  161. padding: 16px;
  162. border-radius: 8px;
  163. }
  164. .el-button-group + .el-button-group {
  165. margin: 0 0 0 10px;
  166. }
  167. </style>