crud.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. import {mapGetters} from "vuex";
  2. export default (app, option = {}) => {
  3. const mixins = {
  4. data() {
  5. return {
  6. selectionList: [],
  7. data: [],
  8. form: {},
  9. params: {},
  10. extraParams: {},
  11. loading: false,
  12. api: require(`@/api/${option.name}`),
  13. option: require(`@/option/${option.name}`).default,
  14. printOption: require(`@/printOption/${option.name}`).default,
  15. page: {
  16. pageSizes: [10, 30, 50, 100, 200],
  17. pageSize: 30
  18. },
  19. }
  20. },
  21. computed: {
  22. ...mapGetters(['userInfo', 'permission', 'roles']),
  23. ids() {
  24. const ids = [];
  25. this.selectionList.forEach(ele => {
  26. ids.push(ele[this.rowKey]);
  27. });
  28. return ids.join(",");
  29. },
  30. bindVal() {
  31. return {
  32. ref: 'crud',
  33. option: this.option,
  34. data: this.data,
  35. tableLoading: this.loading
  36. }
  37. },
  38. onEvent() {
  39. return {
  40. // 'on-load': this.getList,
  41. 'size-change': this.getList,
  42. 'current-change': this.getList,
  43. 'row-save': this.rowSave,
  44. 'row-update': this.rowUpdate,
  45. 'row-del': this.rowDel,
  46. 'selection-change': this.selectionChange,
  47. 'refresh-change': this.refreshChange,
  48. 'date-change': this.dateChange,
  49. 'search-change': this.searchChange,
  50. 'search-reset': this.searchReset
  51. }
  52. },
  53. rowKey() {
  54. return this.option.rowKey || option.rowKey || 'id'
  55. }
  56. },
  57. activated() {
  58. if (this.$refs.crud) {
  59. this.$nextTick(() => {
  60. this.$refs.crud.doLayout();
  61. });
  62. }
  63. },
  64. methods: {
  65. getList() {
  66. this.loadData();
  67. },
  68. getSearchParams() {
  69. return { ...this.params, ...this.extraParams };
  70. },
  71. loadData() {
  72. if (this.year) {}
  73. const searchParams = this.getSearchParams();
  74. this.loading = true;
  75. this.api[option.list || 'getList'](this.page.currentPage, this.page.pageSize, searchParams).then(res => {
  76. let data;
  77. if (option.res) {
  78. data = option.res(res.data, this);
  79. } else {
  80. data = res.data.data;
  81. }
  82. this.page.total = data[option.total || 'total'] || 0;
  83. this.data = data[option.records || 'records'];
  84. if (this.listAfter) {
  85. this.listAfter(data);
  86. }
  87. this.loading = false;
  88. })
  89. if (this.listBefore) {
  90. this.listBefore();
  91. }
  92. },
  93. getFormData() {
  94. return this.form;
  95. },
  96. rowSave(row, done, loading) {
  97. const callback = () => {
  98. delete this.form.params;
  99. this.api[option.add || 'add'](this.getFormData()).then((data) => {
  100. this.getList();
  101. if (this.addAfter) {
  102. this.addAfter(data);
  103. } else {
  104. this.$message.success('新增成功');
  105. }
  106. done();
  107. }).catch(() => {
  108. loading();
  109. })
  110. }
  111. if (this.addBefore) {
  112. this.addBefore(loading, callback);
  113. return;
  114. }
  115. callback();
  116. },
  117. rowUpdate(row, index, done, loading) {
  118. const callback = () => {
  119. delete this.form.params;
  120. this.api[option.update || 'update'](this.getFormData()).then((data) => {
  121. this.getList();
  122. if (this.updateAfter) {
  123. this.updateAfter(data);
  124. } else {
  125. this.$message.success('更新成功');
  126. }
  127. done();
  128. }).catch(() => {
  129. loading();
  130. })
  131. }
  132. if (this.updateBefore) {
  133. this.updateBefore(loading, callback);
  134. return;
  135. }
  136. callback();
  137. },
  138. getDelParams(row) {
  139. return row[this.rowKey];
  140. },
  141. rowDel(row, index) {
  142. const callback = () => {
  143. this.api[option.del || 'remove'](this.getDelParams(row), row).then((data) => {
  144. this.getList();
  145. if (this.delAfter) {
  146. this.delAfter(data, row, index)
  147. } else {
  148. this.$message.success('删除成功');
  149. }
  150. })
  151. }
  152. if (this.delBefore) {
  153. this.delBefore();
  154. callback();
  155. } else {
  156. this.$confirm('确定将选择数据删除?', '提示', {
  157. confirmButtonText: '确定',
  158. cancelButtonText: '取消',
  159. type: 'warning'
  160. }).then(() => {
  161. callback();
  162. })
  163. }
  164. },
  165. getBatchDelParams() {
  166. return this.ids;
  167. },
  168. handleDelete() {
  169. if (this.selectionList.length === 0) {
  170. this.$message.warning("请选择至少一条数据");
  171. return;
  172. }
  173. this.$confirm("确定将选择数据删除?", "提示", {
  174. confirmButtonText: "确定",
  175. cancelButtonText: "取消",
  176. type: "warning"
  177. })
  178. .then(() => {
  179. this.api[option.del || 'remove'](this.getBatchDelParams()).then((data) => {
  180. this.getList();
  181. if (this.delMultiAfter) {
  182. this.delMultiAfter(data, this.getBatchDelParams());
  183. } else {
  184. this.$message.success('删除成功');
  185. }
  186. });
  187. });
  188. },
  189. searchChange(params, done) {
  190. if (done) done();
  191. if (this.validatenull(params)) {
  192. Object.keys(this.params).forEach(ele => {
  193. if (!['createTime_dategt', 'createTime_datelt', 'yearAndMonth', 'xmId'].includes(ele)) {
  194. delete this.params[ele];
  195. }
  196. })
  197. } else {
  198. Object.keys(params).forEach(ele => {
  199. if (this.validatenull(params[ele])) {
  200. delete this.params[ele];
  201. delete params[ele];
  202. }
  203. })
  204. }
  205. this.params = Object.assign(this.params, params);
  206. this.page.currentPage = 1;
  207. this.getList();
  208. },
  209. searchReset() {
  210. Object.keys(this.params).forEach(ele => {
  211. if (!['createTime_dategt', 'createTime_datelt', 'yearAndMonth', 'xmId'].includes(ele)) {
  212. delete this.params[ele];
  213. }
  214. })
  215. if (!!this.extraParams) {
  216. this.extraParams = {};
  217. }
  218. },
  219. dateChange(date) {
  220. if (date) {
  221. this.params.createTime_dategt = date[0];
  222. this.params.createTime_datelt = date[1];
  223. } else {
  224. delete this.params.createTime_dategt;
  225. delete this.params.createTime_datelt;
  226. }
  227. this.page.currentPage = 1;
  228. this.getList();
  229. },
  230. selectionChange(list) {
  231. this.selectionList = list;
  232. },
  233. selectionClear() {
  234. this.selectionList = [];
  235. this.$refs.crud.toggleSelection();
  236. },
  237. refreshChange() {
  238. this.getList();
  239. }
  240. }
  241. }
  242. app.mixins = app.mixins || [];
  243. app.mixins.push(mixins);
  244. return app;
  245. }