Merge branch 'dev' into 'master'

Dev

See merge request !34

package.json

@@ -18,6 +18,7 @@
     "js-md5": "^0.7.3",
     "lodash": "~4.17.20",
     "vue": "^2.6.14",
+    "vue-json-viewer": "^2.2.22",
     "vue-router": "^3.5.1",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",

src/common/api/message.js

+import axios from './axios'
+export function getMqMessagePage(data) {
+  return axios.post('sys/MqMessage/list_page', data)
+}
+export function getMessageDetails(data) {
+  return axios.get('sys/MqMessage/getMessageDetails?id=' + data)
+}
+export function getMessageReSend(data) {
+  return axios.get('sys/MqMessage/reSend?ids=' + data)
+}
\ No newline at end of file

src/components/base/image.vue

+<!--
+ * @Description: 描述
+ * @Author: chd
+ * @Date: 2021-06-07 11:13:02
+ * @LastEditors: chd
+ * @LastEditTime: 2021-07-03 14:42:26
+-->
+<script>
+export default {
+  functional: true,
+  name: 'image-view',
+  props: {
+    proportion: {
+      type: Number,
+      default: 0,
+    },
+    image: {
+      type: String,
+      default: '',
+    },
+  },
+  render(h, { children, listeners, props, data }) {
+    const title = data?.attrs?.title
+    return (
+      <div
+        title={title}
+        class={'image-view'}
+        style={data.style}
+        onClick={(e) => listeners.click && listeners.click(e)}>
+        <div
+          class="before"
+          style={{
+            paddingBottom: props.proportion ? props.proportion + '%' : '100%',
+          }}></div>
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            overflow: 'hidden',
+            textAlign: 'center',
+          }}>
+          <img
+            height="100%"
+            loading="lazy"
+            src={props.image}
+            alt=""
+            onError={(e) => {
+              e.target.title = '加载失败'
+            }}
+          />
+        </div>
+        {children}
+      </div>
+    )
+  },
+}
+</script>
+<style scoped>
+.image-view {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  cursor: pointer;
+}
+.image-view .before {
+  height: 0;
+  padding-bottom: 100%;
+}
+.image-view img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+.image-view img[src=''],
+.image-view img:not([src]) {
+  opacity: 0;
+}
+</style>

src/router/index.js

@@ -133,6 +133,12 @@ const routes = [
         meta: { title: '丢单管理' }
       },
       {
+        path: '/operation/exceptionMessage',
+        component: () => import('@/views/operation/exceptionMessage.vue'),
+        name: 'exceptionMessage',
+        meta: { title: '异常消息' }
+      },
+      {
         path: '/dynamicForm',
         component: () => import('@/components/dynamicForms/index.vue'),
         name: 'system_management',

src/views/home/navMenu.vue

@@ -289,6 +289,14 @@ export default {
               children: []
             },
             {
+              id: 6_2,
+              path: '',
+              label: '异常消息',
+              icon: 'el-icon-bell',
+              index: '/operation/exceptionMessage',
+              children: []
+            },
+            {
               id: 9,
               path: '',
               label: '运维工具',

src/views/operation/exceptionMessage.vue

+<template>
+  <div class="saas-manage card">
+    <div class="search">
+      <el-form :model="searchForm" size="small" :inline="true">
+        <el-form-item label="创建时间">
+          <el-date-picker
+            style="width: 360px"
+            v-model="period"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:ss:mm"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="route">
+          <el-input
+            size="small"
+            style="width: 160px"
+            clearable
+            v-model.trim="searchForm.route"
+            placeholder="请输入route"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-search"
+            @click="search">
+            查询
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="warning"
+            size="small"
+            icon="el-icon-s-promotion"
+            @click="resendMsg()">
+            批量发送
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div
+      class="table_wrap"
+      style="min-height: 50%; max-height: 90%; padding: 0">
+      <table-view
+        :sourceData="messageLists"
+        :serialNumber="true"
+        :tableColumns="tableColumns"
+        ref="multipleTable"
+        @selectionChange="selectionChange"
+        :selection="true"></table-view>
+    </div>
+    <div class="pagination">
+      <el-pagination
+        layout="sizes, total, prev, pager, next, jumper"
+        background
+        :total="total"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="sizeChange"
+        @current-change="onCurrentChange"></el-pagination>
+    </div>
+    <el-dialog
+      title="查看详情"
+      :visible.sync="detailsVisible"
+      :close-on-click-modal="false"
+      width="700px">
+      <json-viewer :value="jsonData" :expand-depth="5"></json-viewer>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getMqMessagePage,
+  getMessageDetails,
+  getMessageReSend
+} from '@/common/api/message'
+import tableView from '@/common/components/base/tableView.vue'
+import JsonViewer from 'vue-json-viewer' // 下载vue-json-viewer插件
+export default {
+  name: 'exceptionMessage',
+  components: { tableView, JsonViewer },
+  data() {
+    return {
+      detailsVisible: false,
+      jsonData: {},
+      period: [],
+      messageLists: [],
+      searchForm: {},
+      editForm: {
+        domain: ''
+      },
+      total: 0,
+      pageSize: 50,
+      currentPage: 1,
+      selection: [],
+      loading: false
+    }
+  },
+  computed: {
+    tableColumns() {
+      return [
+        {
+          label: 'route',
+          key: 'route'
+        },
+        {
+          label: '发送状态',
+          key: 'statusStr'
+        },
+        {
+          label: '创建时间',
+          key: 'createTime'
+        },
+        {
+          label: '操作',
+          width: 150,
+          render: (item) => (
+            <div>
+              <span
+                class="icon-view icon-tools-view"
+                title="详情"
+                onClick={() => this.lookJson(item.id)}>
+                <i class="el-icon-tickets"></i>
+              </span>
+              <span
+                class="icon-view icon-edit-view"
+                title="重新发送"
+                onClick={() => this.resendMsg(item)}>
+                <i class="el-icon-s-promotion"></i>
+              </span>
+            </div>
+          )
+        }
+      ]
+    }
+  },
+  async created() {
+    this.getList()
+  },
+  methods: {
+    async resendMsg(row) {
+      const arr = row ? [row] : this.selection
+      if (arr.length === 0) {
+        this.$message.error('请至少选择一条记录')
+        return
+      }
+      try {
+        await this.$confirm('确认发送？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        const ids = arr.map((item) => item.id)
+
+        const loading = this.$loading({
+          background: 'rgba(0, 0, 0, 0.3)'
+        })
+        try {
+          const res = await getMessageReSend(String(ids))
+          if (res.code === 200) {
+            this.$message.success('发送成功')
+            this.selection = []
+            this.getList()
+          } else {
+            this.$message.error(res.message)
+          }
+        } finally {
+          loading.close()
+        }
+      } catch {}
+    },
+    async lookJson(id) {
+      this.jsonData = {}
+      const res = await getMessageDetails(id)
+      if (res.code === 200) {
+        this.jsonData = res.data || {}
+        this.detailsVisible = true
+      }
+    },
+    async getList() {
+      this.loading = true
+      const params = {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        route: this.searchForm.route,
+        startTime: this.period && this.period[0],
+        endTime: this.period && this.period[1]
+      }
+      try {
+        const res = await getMqMessagePage(params)
+        this.messageLists = res.data.records || []
+        this.total = res.data.total || 0
+      } catch (e) {
+        console.error(e)
+      } finally {
+        this.loading = false
+      }
+    },
+    search() {
+      this.getList()
+    },
+    selectionChange(selection) {
+      this.selection = selection
+    },
+    onCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.getList()
+    },
+    sizeChange(pageSize) {
+      this.pageSize = pageSize
+      this.getList()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .jv-light {
+  background-color: #ececec !important;
+}
+.saas-manage {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &::v-deep {
+    .el-table .el-table__cell {
+      padding: 6px 0;
+    }
+
+    .el-input__inner {
+      padding: 0 4px;
+    }
+
+    .el-input--small .el-input__inner {
+      height: 30px;
+      line-height: 30px;
+    }
+
+    .el-icon-time:before {
+      content: '';
+    }
+
+    .el-dialog__footer {
+      text-align: center;
+
+      .el-button--small {
+        padding: 9px 50px;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 10px 20px;
+    }
+
+    .el-range-editor--small .el-range-separator {
+      line-height: 31px;
+    }
+
+    .header-row-class-name th {
+      background-color: #f8f8f9;
+    }
+
+    .el-input-group__append {
+      padding-left: 0;
+    }
+  }
+}
+
+.search {
+  background: #fff;
+}
+
+.table-wrap {
+  background: #fff;
+  flex: 1;
+  overflow: hidden;
+}
+</style>

src/views/system/app.vue

@@ -101,7 +101,7 @@
           </el-button>
         </el-form-item>
       </el-form>
-      <div
+      <!-- <div
         class="table_wrap"
         style="min-height: 50%; max-height: 82%; padding: 0">
         <table-view
@@ -111,9 +111,103 @@
           ref="multipleTable"
           @selectionChange="selectionChange"
           :selection="true"></table-view>
+      </div> -->
+      <div
+        class="table_wrap scroll"
+        style="min-height: 50%; max-height: 82%; padding: 0 10px">
+        <div class="card-mode" v-if="sourceData.length > 0">
+          <div
+            class="card-item"
+            v-for="(item, index) in sourceData"
+            :key="index"
+            @click="onCardClicked(item)">
+            <app-list
+              :data="item"
+              :index="index"
+              :isFormat="true"
+              isShowHomeSku="bottom"
+              :isSkuImageList="true"
+              :hasWidth="true"
+              :isShowSku="false"
+              :isShowSales="false"
+              :isCustom="true"
+              :selectIds="selectIds">
+              <template slot="operations">
+                <img
+                  :class="{ 'icon-disabled': !item.synthesizeStatus }"
+                  @click.stop="editInfo(item)"
+                  title="编辑"
+                  width="24"
+                  height="24"
+                  :src="require('@/assets/images/edit.png')"
+                  alt="" />
+                <img
+                  title="删除"
+                  width="24"
+                  height="24"
+                  @click.stop="deleteSection(item)"
+                  :src="require('@/assets/images/delete.png')"
+                  alt="" />
+              </template>
+              <template slot="price">
+                <span class="price" :title="item.name">
+                  {{ item.name }}
+                </span>
+              </template>
+              <template slot="synthesizeStatus">
+                <div
+                  title="应用类型"
+                  style="
+                    position: absolute;
+                    right: 0;
+                    width: 36px;
+                    height: 20px;
+                  ">
+                  <el-tag :type="!item.isCollectFee ? 'success' : 'warning'">
+                    {{ !item.isCollectFee ? '免费' : '收费' }}
+                  </el-tag>
+                </div>
+              </template>
+              <template slot="otherContent">
+                <div
+                  :title="item.description"
+                  class="sds-base-sku"
+                  style="font-size: 14px">
+                  <span>简述：{{ item.description }}</span>
+                </div>
+                <div class="sds-keyid">
+                  <div class="product-id" v-show="item.id">
+                    <img
+                      :title="'appId:' + item.id"
+                      height="20"
+                      :src="require('@/assets/images/id.png')"
+                      alt="" />
+                    <span :title="item.id">
+                      {{ item.id }}
+                    </span>
+                  </div>
+
+                  <div class="product-sku">
+                    <span :title="item.categoryName">
+                      {{ item.categoryName }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </app-list>
+          </div>
+        </div>
+        <div class="empty" v-else>暂无数据</div>
       </div>
-      <div slot="footer" style="display: flex; justify-content: center">
-        <!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> -->
+      <div
+        slot="footer"
+        style="display: flex; justify-content: center; align-items: center">
+        <div class="select-number">
+          选中
+          <span style="color: red; font-weight: bold">
+            {{ selection.length }}
+          </span>
+        </div>
         <el-pagination
           layout="sizes, total, prev, pager, next, jumper"
           background
@@ -352,9 +446,9 @@
 </template>
 <script>
 import Editor from '@/components/wangeditor/index.vue'
-import tableView from '@/common/components/base/tableView.vue'
 import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
 // import ImageView from '@/components/base/ImageView.vue'
+import appList from '@/components/app/app-list.vue'
 import pagination from '../../mixins/pagination'
 import { get, post } from '@/common/api/axios'
 import UploadImages from '@/components/base/image-list.vue'
@@ -364,7 +458,7 @@ export default {
   components: {
     UploadImages,
     'v-editor': Editor,
-    tableView,
+    appList,
     layout,
     ChooseTimePeriod
     // ImageView
@@ -444,6 +538,9 @@ export default {
     this.loadTypesData()
   },
   computed: {
+    selectIds() {
+      return this.selection.map((item) => item.id)
+    },
     tableColumns() {
       return [
         {
@@ -512,6 +609,23 @@ export default {
     }
   },
   methods: {
+    onCardClicked(item) {
+      const status = this.isItemSelected(item)
+      if (!status) {
+        this.selection.push(item)
+      } else {
+        const index = this.selection.findIndex((e) => {
+          return e.id === item.id
+        })
+        this.selection.splice(index, 1)
+      }
+    },
+    isItemSelected(item) {
+      const index = this.selection.findIndex((e) => {
+        return item.id === e.id
+      })
+      return index !== -1
+    },
     toggleNodeExpanded(node) {
       node.expanded = !node.expanded
     },
@@ -538,7 +652,7 @@ export default {
       const arr = v ? [v] : this.selection
       if (arr.length === 0) return this.$message('请勾选至少一条记录')
       const ids = arr.map((item) => item.id).join()
-      this.$confirm('确定删除选中的信息？', '提示', {
+      this.$confirm('确定删除选中的应用？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -553,7 +667,7 @@ export default {
               })
               this.getList()
               this.selection = []
-              this.$refs.multipleTable.clearSelectionBox()
+              // this.$refs.multipleTable.clearSelectionBox()
             } else {
               this.$alert(res.message, '错误提示', {
                 dangerouslyUseHTMLString: true
@@ -563,7 +677,7 @@ export default {
         })
         .catch(() => {
           this.selection = []
-          this.$refs.multipleTable.clearSelectionBox()
+          // this.$refs.multipleTable.clearSelectionBox()
         })
     },
     // 分页
@@ -843,7 +957,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .customize-tree-node__label {
   margin-left: 4px;
   flex: 1;
@@ -851,7 +965,83 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+::v-deep .card-mode {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  .price {
+    color: rgba(181, 124, 91, 1);
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 5px;
+  }
+  .sds-base-sku {
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    cursor: pointer;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sds-keyid {
+    height: 30px;
+    align-items: center;
+    display: flex;
+  }
+  .product-id {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+    margin-right: 6px;
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    cursor: pointer;
+  }
 
+  .product-id > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 14px;
+    vertical-align: top;
+    margin-left: 5px;
+    color: #222;
+  }
+
+  .product-sku {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 30px;
+    flex: 1;
+    text-align: right;
+    cursor: pointer;
+  }
+
+  .product-sku > span {
+    font-size: 14px;
+    border: solid 1px #9ac1f5;
+    background-color: #9ac1f5;
+    border-radius: 4px;
+    color: #fff;
+    padding: 2px 6px;
+  }
+}
+::v-deep .el-tag {
+  width: 36px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .customize-tree-node {
   font-size: 14px;
   flex: 1;