init

src/views/cai/guardLog/guard-log-info.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-dialog title="守护流水详情" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
+    <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
+      <el-descriptions-item label="赠送蜜瓜号">
+        {{info.fromUsercode}}
+      </el-descriptions-item>
+      <el-descriptions-item label="赠送手机号" :span="2">
+        {{info.fromMobile}}
+      </el-descriptions-item>
+      <el-descriptions-item label="接受蜜瓜号">
+        {{info.toUsercode}}
+      </el-descriptions-item>
+      <el-descriptions-item label="接受手机号" :span="2">
+        {{info.toMobile}}
+      </el-descriptions-item>
+      <el-descriptions-item label="发生时间">
+        {{info.createTime}}
+      </el-descriptions-item>
+      <el-descriptions-item label="个数">
+        {{info.guardNum}}
+      </el-descriptions-item>
+      <el-descriptions-item label="守护值">
+        {{info.guardValue}}
+      </el-descriptions-item>
+      <el-descriptions-item label="单价">
+        {{info.guardPrice}}
+      </el-descriptions-item>
+      <el-descriptions-item label="链路号">
+        {{info.traceId}}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script>
+import {userGiftTypeList} from '@/constant/statusMap'
+import {getGuardLog} from "@/api/cai/guardLog";
+
+export default {
+  name: "UserInfo",
+  data() {
+    return {
+      userGiftTypeList,
+      CS: {
+        'text-align': 'center',  //文本居中
+        'min-width': '250px',   //最小宽度
+        'word-break': 'break-all'  //过长时自动换行
+      },
+      LS: {
+        // 'color': '#000',
+        'text-align': 'center',
+        // 'font-weight': '600',
+        'height': '40px',
+        // 'background-color': 'rgba(255, 97, 2, 0.1)',
+        'min-width': '110px',
+        'word-break': 'keep-all'
+      },
+      open:false,
+      info:{},
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    init(id){
+      this.open = true;
+      getGuardLog(id).then(response => {
+        this.info = response.data;
+      });
+    },
+    traceIdInit(traceId){
+      this.open = true;
+      getGuardLogByTraceId(traceId).then(response => {
+        this.info = response.data;
+      });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: -15px;
+  display: flex;
+  flex-wrap: wrap
+}
+
+/* .el-card {
+   min-width: 100%;
+   height: 80%;  // 高度要设置百分比才可以
+   margin-right: 20px;
+   transition: all .5s;
+ }*/
+</style>

src/views/cai/guardLog/index.vue

@@ -33,6 +33,14 @@
             @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="链路号" prop="traceId">
+        <el-input
+            v-model="queryParams.traceId"
+            placeholder="请输入链路号"
+            clearable
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -53,16 +61,23 @@
       <el-table-column label="个数" align="center" prop="guardNum" />
       <el-table-column label="守护值" align="center" prop="guardValue" />
       <el-table-column label="单价" align="center" prop="guardPrice" />
+      <el-table-column label="链路号" align="center" prop="traceId" show-overflow-tooltip/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button
               size="mini"
               type="text"
               icon="el-icon-info"
-              v-if="scope.row.consumerLogId"
+              v-if="scope.row.traceId"
               @click="handleConsumerLog(scope.row)"
           >分销记录
           </el-button>
+          <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-info"
+              @click="handleInfo(scope.row)"
+          >详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -75,21 +90,24 @@
       @pagination="getList"
     />
     <consume-log-info v-if="consumeLogInfoVisible" ref="consumeLogInfo" />
+    <guard-log-info v-if="guardLogInfoVisible" ref="guardLogInfo"/>
   </div>
 </template>
 
 <script>
 import {listGuardLog} from "@/api/cai/guardLog";
 import ConsumeLogInfo from "@/views/cai/consumeLog/consume-log-info";
+import GuardLogInfo from "@/views/cai/guardLog/guard-log-info";
 
 export default {
   name: "GuardLog",
   components: {
-    ConsumeLogInfo
+    ConsumeLogInfo,GuardLogInfo
   },
   data() {
     return {
       consumeLogInfoVisible: false,
+      guardLogInfoVisible: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -112,6 +130,7 @@ export default {
         toMobile: undefined,
         fromUsercode: undefined,
         fromMobile: undefined,
+        traceId:undefined,
       },
     };
   },
@@ -147,9 +166,15 @@ export default {
     handleConsumerLog(row) {
       this.consumeLogInfoVisible = true
       this.$nextTick(() => {
-        this.$refs.consumeLogInfo.init(row.consumerLogId)
+        this.$refs.consumeLogInfo.traceIdInit(row.traceId)
       })
     },
+    handleInfo(row){
+      this.guardLogInfoVisible = true
+      this.$nextTick(() => {
+        this.$refs.guardLogInfo.init(row.id)
+      })
+    }
   }
 };
 </script>