index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <div>
  3. <basic-container
  4. v-if="isShow">
  5. <avue-crud
  6. :data="dataList"
  7. :option="option"
  8. :before-open="beforeOpen"
  9. v-model="form"
  10. :page.sync="page"
  11. >
  12. </avue-crud>
  13. </basic-container>
  14. <detailPage
  15. v-else
  16. ref="detail"
  17. @goBack="goBack"
  18. :detailData="detailData"></detailPage>
  19. </div>
  20. </template>
  21. <script>
  22. import detailPage from "./detailsPage";
  23. export default {
  24. name: "index",
  25. components: {
  26. detailPage
  27. },
  28. data(){
  29. return{
  30. form:{},
  31. dataList:[],
  32. isShow:true,
  33. detailData:{},
  34. page: {
  35. pageSize: 10,
  36. pagerCount:1
  37. },
  38. option:{
  39. "lazy": true,
  40. "tip": false,
  41. "simplePage": true,
  42. "searchShow": true,
  43. "searchMenuSpan": 24,
  44. "dialogWidth": "60%",
  45. "align": "center",
  46. "searchSpan": 8,
  47. "searchMenuPosition": "right",
  48. "tree": true,
  49. "border": true,
  50. "index": true,
  51. "selection": true,
  52. "viewBtn": false,
  53. "editBtn": false,
  54. "delBtn": false,
  55. "menuWidth": 180,
  56. "dialogClickModal": false,
  57. "searchLabelWidth": 100,
  58. "searchIcon": true,
  59. "searchIndex": 2,
  60. "addBtnText": "新单",
  61. "expand": true,
  62. "expandWidth": 38,
  63. "selectionWidth": 40,
  64. column:[
  65. {
  66. label:'年',
  67. prop:'name',
  68. type:'year',
  69. width:100,
  70. search:true
  71. },
  72. {
  73. label:'月',
  74. prop:'name1',
  75. type:'month',
  76. width:100,
  77. search:true
  78. },
  79. {
  80. label:'制单人',
  81. prop:'name2',
  82. type:'month',
  83. width:100,
  84. search:true
  85. },
  86. {
  87. label:'制单日期',
  88. prop:'name3',
  89. type:'month',
  90. width:200,
  91. search:true
  92. },
  93. {
  94. label:'更新人',
  95. prop:'name4',
  96. width:100,
  97. type:'month',
  98. search:true
  99. },
  100. {
  101. label:'更新日期',
  102. prop:'name5',
  103. type:'month',
  104. width:200,
  105. search:true
  106. },
  107. {
  108. label:'备注',
  109. prop:'name6',
  110. search:true
  111. }
  112. ]
  113. }
  114. }
  115. },
  116. methods:{
  117. //查看跳转页面
  118. beforeOpenPage(row, index) {
  119. this.detailData = {
  120. id: row.id,
  121. };
  122. this.isShow = false;
  123. },//新增跳转页面
  124. beforeOpen(row, index) {
  125. this.detailData = {
  126. id: row.id,
  127. };
  128. this.isShow = false;
  129. },
  130. editOpen(row, index) {
  131. this.detailData = {
  132. id: row.id,
  133. };
  134. this.isShow = false;
  135. },
  136. goBack() {
  137. this.detailData=this.$options.data().detailData
  138. this.isShow = true;
  139. },
  140. }
  141. }
  142. </script>
  143. <style scoped>
  144. </style>