index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <div>
  3. <basic-container>
  4. <avue-crud
  5. :option="option"
  6. :data="dataList"
  7. ref="crud"
  8. v-model="form"
  9. :page.sync="page"
  10. :search.sync="search"
  11. @search-change="searchChange"
  12. @current-change="currentChange"
  13. @size-change="sizeChange"
  14. @refresh-change="refreshChange"
  15. @on-load="onLoad"
  16. :table-loading="loading"
  17. >
  18. <template slot="moudleNameSearch">
  19. <el-select
  20. v-model="search.moudleName"
  21. clearable
  22. filterable
  23. >
  24. <el-option
  25. v-for="(item, index) in moudleOption"
  26. :label="item.label"
  27. :value="item.value"
  28. :key="item.value"
  29. ></el-option>
  30. </el-select>
  31. </template>
  32. <template slot-scope="scope" slot="moudleName">
  33. <span>{{ scope.row.moudleName | moudleNameFormat(moudleOption) }}</span>
  34. </template>
  35. <template slot="menu" slot-scope="{ row, index }">
  36. <el-button
  37. type="text"
  38. icon="el-icon-unlock"
  39. size="small"
  40. @click="rowUnlock(row, index)"
  41. >解锁</el-button>
  42. </template>
  43. </avue-crud>
  44. </basic-container>
  45. </div>
  46. </template>
  47. <script>
  48. import option from "./config/mainList.json";
  49. import {lockList, lockRemove} from "@/api/lock/lock";
  50. export default {
  51. name: "index",
  52. data() {
  53. return {
  54. option: {},
  55. dataList: [],
  56. form: {},
  57. page: {
  58. pageSize: 10,
  59. pagerCount: 5,
  60. total: 0,
  61. },
  62. search: {},
  63. loading: false,
  64. moudleOption: [
  65. {
  66. label: '销售',
  67. value: 'xs'
  68. },
  69. {
  70. label: '采购',
  71. value: 'cg'
  72. },
  73. {
  74. label: '发货',
  75. value: 'fh'
  76. },
  77. {
  78. label: '收货',
  79. value: 'sh'
  80. },
  81. {
  82. label: '收费',
  83. value: 'sf'
  84. },
  85. {
  86. label: '付费',
  87. value: 'ff'
  88. },
  89. {
  90. label: '进项',
  91. value: 'jx'
  92. },
  93. {
  94. label: '销项',
  95. value: 'xx'
  96. },
  97. ]
  98. }
  99. },
  100. created() {
  101. this.option = option
  102. let i = 0;
  103. this.option.column.forEach(item => {
  104. if (item.search) i++
  105. })
  106. if (i % 3 !== 0){
  107. const num = 3 - Number(i % 3)
  108. this.option.searchMenuSpan = num * 8;
  109. this.option.searchMenuPosition = "right";
  110. }
  111. },
  112. filters: {
  113. moudleNameFormat(row, moudleOption) {
  114. let name;
  115. moudleOption.map((e) => {
  116. if (row == e.value) {
  117. name = e.label
  118. }
  119. });
  120. return name;
  121. },
  122. },
  123. methods: {
  124. searchChange(params, done) {
  125. this.onLoad(this.page, params);
  126. done();
  127. },
  128. currentChange(val) {
  129. this.page.currentPage = val;
  130. },
  131. sizeChange(val) {
  132. this.page.currentPage = 1;
  133. this.page.pageSize = val;
  134. },
  135. refreshChange() {
  136. this.dataList.forEach(item => {
  137. this.$refs.crud.toggleRowExpansion(item, false)
  138. })
  139. this.page.currentPage = 1;
  140. this.onLoad(this.page, this.search);
  141. },
  142. onLoad(page, params) {
  143. this.dataList.forEach(item => {
  144. this.$refs.crud.toggleRowExpansion(item, false)
  145. })
  146. this.loading = true;
  147. lockList(page.currentPage, page.pageSize, params)
  148. .then(res => {
  149. this.dataList = res.data.data.records ? res.data.data.records : [];
  150. this.page.total = res.data.data.total;
  151. if (this.page.total) {
  152. this.option.height = window.innerHeight - 260;
  153. }
  154. this.dataList.forEach(item => {
  155. this.$set(item,'insideList',[])
  156. this.$set(item,'loading', true)
  157. })
  158. })
  159. .finally(() => {
  160. this.loading = false;
  161. });
  162. },
  163. // 解锁
  164. rowUnlock(row, index) {
  165. this.$confirm('是否确认解锁?', '提示', {
  166. confirmButtonText: "确定",
  167. cancelButtonText: "取消",
  168. type: "warning"
  169. }).then(() => {
  170. return lockRemove({ids: row.id})
  171. }).then(() => {
  172. this.$message({
  173. type: "success",
  174. message: "操作成功!"
  175. });
  176. this.page.currentPage = 1;
  177. this.onLoad(this.page, {parentId: 0});
  178. })
  179. },
  180. },
  181. }
  182. </script>
  183. <style scoped>
  184. </style>