reportlist.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <basic-container>
  3. <avue-crud :option="option"
  4. :table-loading="loading"
  5. :data="data"
  6. ref="crud"
  7. v-model="form"
  8. :page.sync="page"
  9. :permission="permissionList"
  10. @row-del="rowDel"
  11. @search-change="searchChange"
  12. @search-reset="searchReset"
  13. @selection-change="selectionChange"
  14. @current-change="currentChange"
  15. @size-change="sizeChange"
  16. @refresh-change="refreshChange"
  17. @on-load="onLoad">
  18. <template slot="menuLeft">
  19. <el-button type="danger"
  20. size="small"
  21. icon="el-icon-delete"
  22. plain
  23. @click="handleDelete">删 除
  24. </el-button>
  25. </template>
  26. <template slot-scope="scope" slot="menu">
  27. <el-button
  28. type="text"
  29. icon="el-icon-edit-outline"
  30. size="small"
  31. @click.stop="handleDesign(scope.row.name)"
  32. v-if="userInfo.role_name.includes('admin')"
  33. >设计
  34. </el-button>
  35. <el-button
  36. type="text"
  37. icon="el-icon-view"
  38. size="small"
  39. @click.stop="handlePreview(scope.row.name)"
  40. v-if="userInfo.role_name.includes('admin')"
  41. >预览
  42. </el-button>
  43. </template>
  44. <template slot-scope="{row}" slot="name">
  45. <el-tag style="cursor:pointer" @click="handlePreview(row.name)">{{ row.name }}</el-tag>
  46. </template>
  47. </avue-crud>
  48. </basic-container>
  49. </template>
  50. <script>
  51. import {getList, remove} from "@/api/report/report";
  52. import {mapGetters} from "vuex";
  53. export default {
  54. data() {
  55. return {
  56. form: {},
  57. selectionList: [],
  58. query: {},
  59. loading: true,
  60. page: {
  61. pageSize: 10,
  62. currentPage: 1,
  63. total: 0
  64. },
  65. option: {
  66. height: 'auto',
  67. calcHeight: 30,
  68. tip: false,
  69. searchShow: true,
  70. searchMenuSpan: 6,
  71. border: true,
  72. index: true,
  73. selection: true,
  74. viewBtn: true,
  75. dialogClickModal: false,
  76. column: [
  77. {
  78. label: "文件名",
  79. prop: "name",
  80. search: true,
  81. slot: true,
  82. },
  83. {
  84. label: "创建时间",
  85. prop: "createTime",
  86. },
  87. {
  88. label: "更新时间",
  89. prop: "updateTime",
  90. }
  91. ]
  92. },
  93. data: []
  94. };
  95. },
  96. computed: {
  97. ...mapGetters(["userInfo", "permission"]),
  98. permissionList() {
  99. return {
  100. addBtn: false,
  101. viewBtn: false,
  102. delBtn: true,
  103. editBtn: false
  104. };
  105. },
  106. ids() {
  107. let ids = [];
  108. this.selectionList.forEach(ele => {
  109. ids.push(ele.id);
  110. });
  111. return ids.join(",");
  112. }
  113. },
  114. methods: {
  115. handlePreview(name) {
  116. this.$router.push({path: `/myiframe/urlPath?name=preview-${name}&src=${this.website.design.reportUrl}/preview?_u=kd-${name}`});
  117. },
  118. handleDesign(name) {
  119. this.$router.push({path: `/myiframe/urlPath?name=designer-${name}&src=${this.website.design.reportUrl}/designer?_u=kd-${name}`});
  120. },
  121. rowDel(row) {
  122. this.$confirm("确定将选择数据删除?", {
  123. confirmButtonText: "确定",
  124. cancelButtonText: "取消",
  125. type: "warning"
  126. })
  127. .then(() => {
  128. return remove(row.id);
  129. })
  130. .then(() => {
  131. this.onLoad(this.page);
  132. this.$message({
  133. type: "success",
  134. message: "操作成功!"
  135. });
  136. });
  137. },
  138. searchReset() {
  139. this.query = {};
  140. this.onLoad(this.page);
  141. },
  142. searchChange(params, done) {
  143. this.query = params;
  144. this.page.currentPage = 1;
  145. this.onLoad(this.page, params);
  146. done();
  147. },
  148. selectionChange(list) {
  149. this.selectionList = list;
  150. },
  151. selectionClear() {
  152. this.selectionList = [];
  153. this.$refs.crud.toggleSelection();
  154. },
  155. handleDelete() {
  156. if (this.selectionList.length === 0) {
  157. this.$message.warning("请选择至少一条数据");
  158. return;
  159. }
  160. this.$confirm("确定将选择数据删除?", {
  161. confirmButtonText: "确定",
  162. cancelButtonText: "取消",
  163. type: "warning"
  164. })
  165. .then(() => {
  166. return remove(this.ids);
  167. })
  168. .then(() => {
  169. this.onLoad(this.page);
  170. this.$message({
  171. type: "success",
  172. message: "操作成功!"
  173. });
  174. this.$refs.crud.toggleSelection();
  175. });
  176. },
  177. currentChange(currentPage) {
  178. this.page.currentPage = currentPage;
  179. },
  180. sizeChange(pageSize) {
  181. this.page.pageSize = pageSize;
  182. },
  183. refreshChange() {
  184. this.onLoad(this.page, this.query);
  185. },
  186. onLoad(page, params = {}) {
  187. this.loading = true;
  188. getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
  189. const data = res.data.data;
  190. this.page.total = data.total;
  191. this.data = data.records;
  192. this.loading = false;
  193. this.selectionClear();
  194. });
  195. }
  196. }
  197. };
  198. </script>
  199. <style>
  200. </style>