index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <basic-container>
  3. <avue-crud :option="option"
  4. :data="dataList"
  5. ref="crud"
  6. v-model="form"
  7. :page.sync="page"
  8. @row-del="rowDel"
  9. @row-update="rowUpdate"
  10. :before-open="beforeOpen"
  11. :before-close="beforeClose"
  12. @row-save="rowSave"
  13. @search-change="searchChange"
  14. @search-reset="searchReset"
  15. @selection-change="selectionChange"
  16. @current-change="currentChange"
  17. @size-change="sizeChange"
  18. @refresh-change="refreshChange"
  19. @on-load="onLoad"
  20. @tree-load="treeLoad">
  21. <template slot-scope="scope" slot="menu">
  22. <el-button
  23. type="text"
  24. icon="el-icon-view"
  25. size="small"
  26. @click.stop="beforeOpenPage(scope.row,scope.index)"
  27. >查看
  28. </el-button>
  29. <el-button
  30. type="text"
  31. icon="el-icon-edit"
  32. size="small"
  33. @click.stop="editOpen(scope.row,scope.index)"
  34. >编辑
  35. </el-button>
  36. <el-button
  37. type="text"
  38. icon="el-icon-delete"
  39. size="small"
  40. @click.stop="rowDel(scope.row,scope.index)"
  41. >删除
  42. </el-button>
  43. </template>
  44. </avue-crud>
  45. </basic-container>
  46. </template>
  47. <script>
  48. import option from "./configuration/mainList.json";
  49. import {customerList, typeSave,detail,deleteDetails} from "@/api/basicData/customerInformation"
  50. export default {
  51. name: "customerInformation",
  52. data() {
  53. return {
  54. form: {},
  55. option: option,
  56. parentId:0,
  57. dataList: [],
  58. page: {
  59. pageSize: 10,
  60. pagerCount: 5,
  61. total: 0,
  62. }
  63. }
  64. },
  65. created() {
  66. console.log('wangbadan')
  67. // this.onLoad()
  68. },
  69. methods: {
  70. //删除列表后面的删除按钮触发触发(row, index, done)
  71. rowDel(row, index, done) {
  72. this.$confirm("确定将选择数据删除?", {
  73. confirmButtonText: "确定",
  74. cancelButtonText: "取消",
  75. type: "warning"
  76. }).then(() => {
  77. return deleteDetails(row.id);
  78. }).then(() => {
  79. this.$message({
  80. type: "success",
  81. message: "操作成功!"
  82. });
  83. // 数据回调进行刷新
  84. done(row);
  85. });
  86. },
  87. //修改时的修改按钮点击触发
  88. rowUpdate(row, index, done, loading) {
  89. typeSave(row).then(() => {
  90. this.$message({
  91. type: "success",
  92. message: "操作成功!"
  93. });
  94. // 数据回调进行刷新
  95. done(row);
  96. }, error => {
  97. window.console.log(error);
  98. loading();
  99. });
  100. },
  101. //新增修改时保存触发
  102. rowSave(row, done, loading) {
  103. // typeSave(row).then(res => {
  104. // console.log(res)
  105. // })
  106. },
  107. //查询全部
  108. initData(){
  109. customerList().then(res => {
  110. console.log(this.form);
  111. const column = this.findObject(this.option.column, "parentId");
  112. column.dicData = res.data.data.records;
  113. });
  114. },
  115. //新增子项触发
  116. handleAdd(row) {
  117. this.parentId = row.id;
  118. const column = this.findObject(this.option.column, "parentId");
  119. column.value = row.id;
  120. column.addDisabled = true;
  121. this.$refs.crud.rowAdd();
  122. },
  123. //查看跳转页面
  124. beforeOpenPage(row,index) {
  125. this.$router.push({
  126. path: "/detailsPageEdit",
  127. query: { id: JSON.stringify(row.id) },
  128. });
  129. },
  130. //新增跳转页面
  131. beforeOpen(row,index) {
  132. this.$router.push({
  133. path: "/detailsPageEdit",
  134. query: { id: JSON.stringify(row.id) },
  135. });
  136. },
  137. editOpen(row,index){
  138. this.$router.push({
  139. path: "/detailsPageEdit",
  140. query: { id: JSON.stringify(row.id) },
  141. });
  142. },
  143. //点击新增时触发
  144. beforeClose(done) {
  145. this.parentId = "";
  146. const column = this.findObject(this.option.column, "parentId");
  147. column.value = "";
  148. column.addDisabled = false;
  149. done();
  150. },
  151. //点击搜索按钮触发
  152. searchChange(params, done) {
  153. console.log(params)
  154. this.page.currentPage = 1;
  155. this.onLoad(this.page, params);
  156. done()
  157. },
  158. searchReset() {
  159. console.log('1')
  160. },
  161. selectionChange() {
  162. console.log('1')
  163. },
  164. currentChange() {
  165. console.log('1')
  166. },
  167. sizeChange() {
  168. console.log('1')
  169. },
  170. refreshChange() {
  171. console.log('1')
  172. },
  173. onLoad(page, params = {parentId:0}) {
  174. let queryParams = Object.assign({}, params, {pageSize: page.pageSize, pageNum: page.currentPage})
  175. customerList(queryParams).then(res => {
  176. this.dataList = res.data.data.records
  177. this.page.total = res.data.data.total
  178. })
  179. },
  180. //树桩列点击展开触发
  181. treeLoad(tree, treeNode, resolve) {
  182. const parentId = tree.id;
  183. customerList({parentId:parentId}).then(res => {
  184. resolve(res.data.data.records);
  185. });
  186. },
  187. }
  188. }
  189. </script>
  190. <style scoped>
  191. </style>