exceltab.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. :option="option"
  5. :table-loading="loading"
  6. :data="data"
  7. :page.sync="page"
  8. :permission="permissionList"
  9. :before-open="beforeOpen"
  10. v-model="form"
  11. ref="crud"
  12. @row-update="rowUpdate"
  13. @row-save="rowSave"
  14. @row-del="rowDel"
  15. @search-change="searchChange"
  16. @search-reset="searchReset"
  17. @selection-change="selectionChange"
  18. @current-change="currentChange"
  19. @size-change="sizeChange"
  20. @refresh-change="refreshChange"
  21. @on-load="onLoad"
  22. >
  23. <template slot="menuLeft">
  24. <el-button
  25. type="danger"
  26. size="small"
  27. icon="el-icon-delete"
  28. plain
  29. v-if="permission.exceltab_delete"
  30. @click="handleDelete"
  31. >删 除
  32. </el-button>
  33. </template>
  34. <template
  35. slot-scope="scope"
  36. slot="menu"
  37. >
  38. <el-button
  39. type="text"
  40. icon="el-icon-circle-plus-outline"
  41. size="small"
  42. @click.stop="handleAdd(scope.row, scope.index)"
  43. >清表模版
  44. </el-button>
  45. <el-button
  46. type="text"
  47. icon="el-icon-s-opportunity"
  48. size="small"
  49. @click.stop="ElementIdentification(scope.row, scope.index)"
  50. >元素识别
  51. </el-button>
  52. </template>
  53. <template
  54. slot-scope="{row}"
  55. slot="source"
  56. >
  57. <div style="text-align:center">
  58. <i :class="row.source" />
  59. </div>
  60. </template>
  61. </avue-crud>
  62. </basic-container>
  63. </template>
  64. <script>
  65. import { getList, getDetail, add, update, remove } from "@/api/exctab/exceltab";
  66. import { mapGetters } from "vuex";
  67. export default {
  68. data () {
  69. return {
  70. form: {},
  71. query: {},
  72. loading: true,
  73. page: {
  74. pageSize: 10,
  75. currentPage: 1,
  76. total: 0
  77. },
  78. selectionList: [],
  79. option: {
  80. height: 'auto',
  81. calcHeight: 30,
  82. tip: false,
  83. searchShow: true,
  84. searchMenuSpan: 6,
  85. border: true,
  86. index: true,
  87. viewBtn: true,
  88. selection: true,
  89. menuWidth: 400,
  90. dialogClickModal: false,
  91. column: [
  92. {
  93. label: '创建时间',
  94. prop: 'createTime',
  95. width: 300,
  96. editDisplay: false,
  97. addDisplay: false,
  98. },
  99. {
  100. label: "模版名称",
  101. prop: "name",
  102. search: true,
  103. rules: [{
  104. required: true,
  105. message: "请输入名称",
  106. trigger: "blur"
  107. }]
  108. },
  109. {
  110. label: "表数量",
  111. prop: "tabCout",
  112. width: 300,
  113. editDisplay: false,
  114. addDisplay: false,
  115. rules: [{
  116. message: "请输入表数量",
  117. trigger: "blur",
  118. }]
  119. }
  120. ]
  121. },
  122. data: []
  123. };
  124. },
  125. computed: {
  126. ...mapGetters(["permission"]),
  127. permissionList () {
  128. return {
  129. addBtn: this.vaildData(this.permission.exceltab_add, false),
  130. viewBtn: this.vaildData(this.permission.exceltab_view, false),
  131. delBtn: this.vaildData(this.permission.exceltab_delete, false),
  132. editBtn: this.vaildData(this.permission.exceltab_edit, false)
  133. };
  134. },
  135. ids () {
  136. let ids = [];
  137. this.selectionList.forEach(ele => {
  138. ids.push(ele.id);
  139. });
  140. return ids.join(",");
  141. }
  142. },
  143. methods: {
  144. handleAdd (row) {
  145. this.$router.push('/excel/excelmodel/' + row.id);
  146. },
  147. ElementIdentification (row) {
  148. this.$router.push('/excels/ElementIdentification/' + row.id);
  149. },
  150. rowSave (row, done, loading) {
  151. add(row).then(() => {
  152. this.onLoad(this.page);
  153. this.$message({
  154. type: "success",
  155. message: "操作成功!"
  156. });
  157. done();
  158. }, error => {
  159. loading();
  160. window.console.log(error);
  161. });
  162. },
  163. rowUpdate (row, index, done, loading) {
  164. update(row).then(() => {
  165. this.onLoad(this.page);
  166. this.$message({
  167. type: "success",
  168. message: "操作成功!"
  169. });
  170. done();
  171. }, error => {
  172. loading();
  173. console.log(error);
  174. });
  175. },
  176. rowDel (row) {
  177. this.$confirm("确定将选择数据删除?", {
  178. confirmButtonText: "确定",
  179. cancelButtonText: "取消",
  180. type: "warning"
  181. })
  182. .then(() => {
  183. return remove(row.id);
  184. })
  185. .then(() => {
  186. this.onLoad(this.page);
  187. this.$message({
  188. type: "success",
  189. message: "操作成功!"
  190. });
  191. });
  192. },
  193. handleDelete () {
  194. if (this.selectionList.length === 0) {
  195. this.$message.warning("请选择至少一条数据");
  196. return;
  197. }
  198. this.$confirm("确定将选择数据删除?", {
  199. confirmButtonText: "确定",
  200. cancelButtonText: "取消",
  201. type: "warning"
  202. })
  203. .then(() => {
  204. return remove(this.ids);
  205. })
  206. .then(() => {
  207. this.onLoad(this.page);
  208. this.$message({
  209. type: "success",
  210. message: "操作成功!"
  211. });
  212. this.$refs.crud.toggleSelection();
  213. });
  214. },
  215. beforeOpen (done, type) {
  216. if (["edit", "view"].includes(type)) {
  217. getDetail(this.form.id).then(res => {
  218. this.form = res.data.data;
  219. });
  220. }
  221. done();
  222. },
  223. searchReset () {
  224. this.query = {};
  225. this.onLoad(this.page);
  226. },
  227. searchChange (params, done) {
  228. this.query = params;
  229. this.page.currentPage = 1;
  230. this.onLoad(this.page, params);
  231. done();
  232. },
  233. selectionChange (list) {
  234. this.selectionList = list;
  235. },
  236. selectionClear () {
  237. this.selectionList = [];
  238. this.$refs.crud.toggleSelection();
  239. },
  240. currentChange (currentPage) {
  241. this.page.currentPage = currentPage;
  242. },
  243. sizeChange (pageSize) {
  244. this.page.pageSize = pageSize;
  245. },
  246. refreshChange () {
  247. this.onLoad(this.page, this.query);
  248. },
  249. onLoad (page, params = {}) {
  250. console.log(page.currentPage, params.pageSize);
  251. this.query.parentId = 0;
  252. this.loading = true;
  253. getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
  254. const data = res.data.data;
  255. this.page.total = data.total;
  256. this.data = data.records;
  257. this.loading = false;
  258. this.selectionClear();
  259. });
  260. }
  261. }
  262. };
  263. </script>
  264. <style>
  265. </style>