index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div id="index">
  3. <el-row>
  4. <el-col :span="24" class="main animate__animated animate__backInRight">
  5. <el-col :span="24" class="one"> <span>广告图</span> </el-col>
  6. <el-col :span="24" class="two">
  7. <search-1 :form="searchForm" :typeList="typeList" @onSubmit="search" @toReset="toClose"></search-1>
  8. </el-col>
  9. <el-col :span="24" class="thr">
  10. <el-button type="primary" size="mini" @click="toAdd()">新增</el-button>
  11. </el-col>
  12. <el-col :span="24" class="four">
  13. <data-table
  14. :select="true"
  15. :selected="selected"
  16. @handleSelect="handleSelect"
  17. :fields="fields"
  18. :opera="opera"
  19. @query="search"
  20. :data="list"
  21. :total="total"
  22. @edit="toEdit"
  23. @del="toDel"
  24. >
  25. </data-table>
  26. </el-col>
  27. </el-col>
  28. </el-row>
  29. </div>
  30. </template>
  31. <script>
  32. const _ = require('lodash');
  33. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  34. const { mapActions } = createNamespacedHelpers('banner');
  35. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  36. export default {
  37. name: 'index',
  38. props: {},
  39. components: {
  40. search1: () => import('./parts/search-1.vue'),
  41. },
  42. data: function () {
  43. const that = this;
  44. return {
  45. // 列表
  46. opera: [
  47. { label: '修改', method: 'edit' },
  48. { label: '删除', method: 'del', confirm: true, type: 'danger' },
  49. ],
  50. fields: [
  51. { label: '名称', model: 'name' },
  52. {
  53. label: '类型',
  54. model: 'type',
  55. format: (i) => {
  56. let data = that.typeList.find((f) => f.value == i);
  57. if (data) return data.label;
  58. else return '暂无';
  59. },
  60. },
  61. { label: '跳转到', model: 'to' },
  62. {
  63. label: '是否正在使用',
  64. model: 'status',
  65. format: (i) => {
  66. let data = that.statusList.find((f) => f.value == i);
  67. if (data) return data.label;
  68. else return '暂无';
  69. },
  70. },
  71. ],
  72. list: [],
  73. total: 0,
  74. // 查询
  75. searchForm: {},
  76. // 多选值
  77. selected: [],
  78. // 类型列表
  79. typeList: [],
  80. // 是否使用
  81. statusList: [],
  82. };
  83. },
  84. async created() {
  85. await this.searchOther();
  86. await this.search();
  87. },
  88. methods: {
  89. ...dictData({ dictQuery: 'query' }),
  90. ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
  91. // 查询
  92. async search({ skip = 0, limit = 10, ...info } = {}) {
  93. const condition = _.cloneDeep(this.searchForm);
  94. let res = await this.query({ skip, limit, ...condition, ...info });
  95. if (this.$checkRes(res)) {
  96. this.$set(this, 'list', res.data);
  97. this.$set(this, 'total', res.total);
  98. }
  99. },
  100. // 新增
  101. toAdd() {
  102. this.$router.push({ path: '/system/banner/detail', query: { status: '0' } });
  103. },
  104. // 修改
  105. async toEdit({ data }) {
  106. this.$router.push({ path: '/system/banner/detail', query: { id: data.id } });
  107. },
  108. // 删除
  109. async toDel({ data }) {
  110. let res = await this.delete(data._id);
  111. if (this.$checkRes(res)) {
  112. this.$message({ type: `success`, message: `刪除信息成功` });
  113. this.search();
  114. }
  115. },
  116. // 重置
  117. toClose() {
  118. this.searchForm = {};
  119. this.search();
  120. },
  121. // 多选
  122. handleSelect(data) {
  123. this.$set(this, `selected`, data);
  124. },
  125. // 查询其他信息
  126. async searchOther() {
  127. let res;
  128. // 类型
  129. res = await this.dictQuery({ code: 'banner_type' });
  130. if (this.$checkRes(res)) {
  131. this.$set(this, `typeList`, res.data);
  132. }
  133. // 是否使用
  134. res = await this.dictQuery({ code: 'status' });
  135. if (this.$checkRes(res)) {
  136. this.$set(this, `statusList`, res.data);
  137. }
  138. },
  139. },
  140. computed: {
  141. ...mapState(['user']),
  142. },
  143. metaInfo() {
  144. return { title: this.$route.meta.title };
  145. },
  146. watch: {
  147. test: {
  148. deep: true,
  149. immediate: true,
  150. handler(val) {},
  151. },
  152. },
  153. };
  154. </script>
  155. <style lang="less" scoped>
  156. .main {
  157. .one {
  158. margin: 0 0 10px 0;
  159. span:nth-child(1) {
  160. font-size: 20px;
  161. font-weight: 700;
  162. margin-right: 10px;
  163. }
  164. }
  165. .two {
  166. margin: 0 0 10px 0;
  167. }
  168. .thr {
  169. margin: 0 0 10px 0;
  170. }
  171. }
  172. </style>