index.vue 4.3 KB

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