index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <script>
  2. import { Columns as TableColumns, SearchColumns } from "./column";
  3. import { LIST, REMOVE } from "@/api/business/purchase/contract";
  4. import { initPage, initLayout, initPageSizes, initParams } from "@/utils/init";
  5. export default {
  6. name: "PuchaseContract",
  7. components: {
  8. AddDialog: () => import("./add/index.vue"),
  9. SeeDialog: () => import("./see/index.vue"),
  10. EditDialog: () => import("./edit/index.vue"),
  11. },
  12. data() {
  13. return {
  14. size: "mini",
  15. loading: false,
  16. searchColumns: SearchColumns,
  17. params: initParams(SearchColumns),
  18. tableData: [],
  19. tableColumns: TableColumns,
  20. page: initPage(),
  21. layout: initLayout(),
  22. pageSizes: initPageSizes(),
  23. };
  24. },
  25. computed: {},
  26. created() {
  27. this.queryList(this.params, this.page);
  28. },
  29. methods: {
  30. //
  31. async fetchList(prop, page) {
  32. try {
  33. this.loading = true;
  34. const { pageNum, pageSize } = page;
  35. const { code, msg, rows, total } = await LIST({
  36. pageNum,
  37. pageSize,
  38. ...prop,
  39. });
  40. if (code === 200) {
  41. this.tableData = rows;
  42. this.page.total = total;
  43. this.$notify.success({ title: msg });
  44. } else {
  45. this.$notify.warning({ title: msg });
  46. }
  47. } catch (err) {
  48. //
  49. } finally {
  50. this.loading = false;
  51. }
  52. },
  53. // 查询操作
  54. queryList(prop, page) {
  55. this.fetchList(prop, page);
  56. },
  57. // 重置操作
  58. resetList() {
  59. this.page = initPage();
  60. this.params = initParams(SearchColumns);
  61. this.queryList(this.params, this.page);
  62. },
  63. // 删除操作
  64. async deleteList(prop) {
  65. try {
  66. this.loading = true;
  67. const { id } = prop;
  68. const { code, msg } = await REMOVE(id);
  69. if (code === 200) {
  70. this.$notify.success({ title: msg });
  71. this.queryList(this.params, this.page);
  72. } else {
  73. this.$notify.warning({ title: msg });
  74. }
  75. } catch (err) {
  76. //
  77. } finally {
  78. this.loading = false;
  79. }
  80. },
  81. // 页大小变
  82. sizeChange(prop) {
  83. this.page.pageSize = prop;
  84. this.queryList(this.params, this.page);
  85. },
  86. // 当前页变
  87. currentChange(prop) {
  88. this.page.pageNum = prop;
  89. this.queryList(this.params, this.page);
  90. },
  91. // 打开新增drawer
  92. async openAddDialog() {
  93. const { open } = this.$refs.AddDialog;
  94. await open();
  95. },
  96. // 打开查看drawer
  97. async openSeeDialog(prop) {
  98. const { id } = prop;
  99. const { open } = this.$refs.SeeDialog;
  100. await open(id);
  101. },
  102. // 打开编辑drawer
  103. async openEditDialog(prop) {
  104. const { id } = prop;
  105. const { open } = this.$refs.EditDialog;
  106. await open(id);
  107. },
  108. },
  109. };
  110. </script>
  111. <template>
  112. <el-card
  113. v-loading="loading"
  114. style="width: calc(100% - 24px); height: 100%; margin: 10px"
  115. :body-style="{ padding: 0 }"
  116. >
  117. <see-dialog ref="SeeDialog"></see-dialog>
  118. <add-dialog ref="AddDialog" @submit-success="resetList"></add-dialog>
  119. <edit-dialog ref="EditDialog" @submit-success="resetList"></edit-dialog>
  120. <el-form
  121. :size="size"
  122. :model="params"
  123. label-width="75px"
  124. label-position="right"
  125. >
  126. <el-row :gutter="24" style="padding: 20px 20px">
  127. <el-col
  128. v-for="column in searchColumns"
  129. :key="column.title"
  130. :xl="4"
  131. :lg="6"
  132. :md="8"
  133. :sm="12"
  134. :xs="24"
  135. >
  136. <el-form-item :prop="column.key" :label="column.title">
  137. <el-input
  138. v-model="params[column.key]"
  139. :placeholder="column.placeholder"
  140. ></el-input>
  141. </el-form-item>
  142. </el-col>
  143. <el-col :xl="4" :lg="6" :md="8" :sm="12" :xs="24">
  144. <el-button
  145. circle
  146. :size="size"
  147. icon="el-icon-search"
  148. @click="queryList(params, page)"
  149. ></el-button>
  150. <el-button
  151. circle
  152. :size="size"
  153. icon="el-icon-refresh"
  154. @click="resetList"
  155. ></el-button>
  156. </el-col>
  157. </el-row>
  158. </el-form>
  159. <el-row :gutter="24" style="padding: 0 20px">
  160. <el-col :span="6">
  161. <el-button :size="size" @click="openAddDialog"> 新 增 </el-button>
  162. </el-col>
  163. </el-row>
  164. <el-table
  165. @row-dblclick="openSeeDialog"
  166. :data="tableData"
  167. :size="size"
  168. style="width: 100%; margin: 20px 0 0 0"
  169. >
  170. <el-table-column
  171. v-for="(column, index) in tableColumns"
  172. :key="index"
  173. :prop="column.key"
  174. :label="column.title"
  175. :width="column.width || 180"
  176. :show-overflow-tooltip="column.showOverflowTooltip || true"
  177. >
  178. </el-table-column>
  179. <el-table-column fixed="right" label="操作" width="120">
  180. <template slot-scope="scope">
  181. <el-button
  182. @click.native.prevent="openEditDialog(scope.row)"
  183. type="text"
  184. size="small"
  185. >
  186. 编 辑
  187. </el-button>
  188. <el-button
  189. @click.native.prevent="deleteList(scope.row)"
  190. type="text"
  191. size="small"
  192. >
  193. 删 除
  194. </el-button>
  195. </template>
  196. </el-table-column>
  197. </el-table>
  198. <el-pagination
  199. @size-change="sizeChange"
  200. @current-change="currentChange"
  201. :total="page.total"
  202. :page-sizes="pageSizes"
  203. :page-size="page.pageSize"
  204. :current-page="page.pageNum"
  205. :layout="layout"
  206. style="margin: 16px 0"
  207. >
  208. </el-pagination>
  209. </el-card>
  210. </template>