index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <div id="goods">
  3. <el-row>
  4. <el-col
  5. :span="24"
  6. class="main animate__animated animate__backInRight"
  7. v-loading="loadings"
  8. element-loading-text="拼命加载中"
  9. element-loading-spinner="el-icon-loading"
  10. >
  11. <span v-if="view === 'list'">
  12. <el-col :span="24" class="one"> <span>系统消息管理</span> </el-col>
  13. <data-search :fields="searchFields" v-model="searchInfo" @query="search">
  14. <template #source>
  15. <el-option v-for="i in sourceList" :key="i.label" :label="i.label" :value="i.value"></el-option>
  16. </template>
  17. </data-search>
  18. <data-btn :fields="btnList" @add="toAdd"></data-btn>
  19. <el-col :span="24" class="two">
  20. <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView"></data-table>
  21. </el-col>
  22. </span>
  23. <notice v-if="view === 'info'" :id="id" @toBack="toBack"></notice>
  24. <detail v-if="view === 'infos'" :id="id" @goBack="toBack"></detail>
  25. </el-col>
  26. </el-row>
  27. </div>
  28. </template>
  29. <script>
  30. const _ = require('lodash');
  31. import { mapState, createNamespacedHelpers } from 'vuex';
  32. const { mapActions: msgList } = createNamespacedHelpers('msgList');
  33. const { mapActions: notice } = createNamespacedHelpers('notice');
  34. const { mapActions: dictData } = createNamespacedHelpers('dictData'); // 字典
  35. export default {
  36. name: 'index',
  37. props: {},
  38. components: {
  39. notice: () => import('./notice.vue'),
  40. detail: () => import('./detail.vue'),
  41. },
  42. data: function () {
  43. return {
  44. loadings: true,
  45. loading: false,
  46. view: 'list',
  47. fields: [
  48. { label: '发送时间', model: 'time' },
  49. { label: '来源id', model: '_id' },
  50. {
  51. label: '信息来源',
  52. model: 'source',
  53. format: (i) => {
  54. let data = this.sourceList.find((f) => f.value == i);
  55. if (data) return data.label;
  56. else return '暂无';
  57. },
  58. },
  59. ],
  60. btnList: [{ label: '添加', method: 'add' }],
  61. opera: [{ label: '查看', method: 'view' }],
  62. searchFields: [{ label: '信息来源', model: 'source', type: 'select' }],
  63. searchInfo: {},
  64. list: [],
  65. total: 0,
  66. id: '',
  67. // 信息来源
  68. sourceList: [],
  69. };
  70. },
  71. created() {
  72. this.searchOthers();
  73. this.search();
  74. },
  75. methods: {
  76. ...dictData({ dictQuery: 'query' }),
  77. ...notice(['query', 'delete', 'fetch', 'update', 'create']),
  78. ...msgList({ msgQuery: 'query' }),
  79. // 查询
  80. async search({ skip = 0, limit = this.$limit, ...others } = {}) {
  81. let query = { skip, limit, ...others };
  82. if (Object.keys(this.searchInfo).length > 0) query = { ...query, ...this.searchInfo };
  83. const res = await this.msgQuery(query);
  84. if (this.$checkRes(res)) {
  85. this.$set(this, `list`, res.data);
  86. this.$set(this, `total`, res.total);
  87. }
  88. this.loadings = false;
  89. },
  90. // 新增
  91. toAdd() {
  92. let id = '';
  93. this.$set(this, `id`, id);
  94. this.$set(this, `view`, 'infos');
  95. },
  96. // 查看
  97. async toView({ data }) {
  98. this.$set(this, `id`, data._id);
  99. this.$set(this, `view`, 'info');
  100. },
  101. // 执行返回
  102. toBack() {
  103. this.view = 'list';
  104. },
  105. // 查询其他信息
  106. async searchOthers() {
  107. let res;
  108. // 信息来源
  109. res = await this.dictQuery({ code: 'notice_source' });
  110. if (this.$checkRes(res)) this.$set(this, `sourceList`, res.data);
  111. },
  112. },
  113. computed: {
  114. ...mapState(['user']),
  115. },
  116. };
  117. </script>
  118. <style lang="less" scoped>
  119. .main {
  120. .one {
  121. margin: 0 0 10px 0;
  122. span:nth-child(1) {
  123. font-size: 20px;
  124. font-weight: 700;
  125. margin-right: 10px;
  126. }
  127. }
  128. .two {
  129. margin: 20px 0 10px 0;
  130. }
  131. .thr {
  132. margin: 0 0 10px 0;
  133. }
  134. }
  135. .el-col {
  136. margin: 10px 0;
  137. }
  138. </style>