feat: the power log page is ready

web/src/views/PowerLog.vue

@@ -1,31 +1,149 @@
 <template>
-  <div class="power-log" :style="{ height: winHeight + 'px' }">
+  <div class="power-log" v-loading="loading">
     <div class="inner">
       <h2>消费日志</h2>
+
+      <div class="list-box" :style="{height: listBoxHeight + 'px'}">
+        <div class="handle-box">
+          <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
+          <el-date-picker
+              v-model="query.date"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin: 0 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
+        </div>
+
+        <el-row v-if="items.length > 0">
+          <el-table :data="items" :row-key="row => row.id" table-layout="auto" border>
+            <el-table-column prop="username" label="用户"/>
+            <el-table-column prop="model" label="模型"/>
+            <el-table-column prop="type" label="类型">
+              <template #default="scope">
+                <el-tag size="small" :type="tagColors[scope.row.type]">{{ scope.row.type_str }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="数额">
+              <template #default="scope">
+                <div>
+                  <el-text type="success" v-if="scope.row.mark === 1">+{{ scope.row.amount }}</el-text>
+                  <el-text type="danger" v-if="scope.row.mark === 0">-{{ scope.row.amount }}</el-text>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="balance" label="余额"/>
+            <el-table-column label="发生时间">
+              <template #default="scope">
+                <span>{{ dateFormat(scope.row['created_at']) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注"/>
+          </el-table>
+
+          <div class="pagination">
+            <el-pagination v-if="total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="page"
+                           v-model:page-size="pageSize"
+                           @current-change="fetchData()"
+                           :total="total"/>
+
+          </div>
+        </el-row>
+        <el-empty :image-size="100" v-else/>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {onMounted, ref} from "vue"
+import {dateFormat} from "@/utils/libs";
+import {Back, DocumentCopy, Search} from "@element-plus/icons-vue";
+import Clipboard from "clipboard";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+
+const items = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+const loading = ref(false)
+const listBoxHeight = window.innerHeight - 117
+const query = ref({
+  model: "",
+  date: []
+})
+const tagColors = ref(["", "success", "primary", "danger", "info", "warning"])
+
+onMounted(() => {
+  fetchData()
+  const clipboard = new Clipboard('.copy-order-no');
+  clipboard.on('success', () => {
+    ElMessage.success("复制成功！");
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+// 获取数据
+const fetchData = () => {
+  loading.value = true
+  httpPost('/api/powerLog/list', {
+    model: query.value.model,
+    date: query.value.date,
+    page: page.value,
+    page_size: pageSize.value
+  }).then((res) => {
+    if (res.data) {
+      items.value = res.data.items
+      total.value = res.data.total
+      page.value = res.data.page
+      pageSize.value = res.data.page_size
+    }
+    loading.value = false
+  }).catch(e => {
+    loading.value = false
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
 
-const winHeight = ref(window.innerHeight)
 </script>
 
 <style lang="stylus" scoped>
 .power-log {
-  display: flex;
-  justify-content: center;
-  background-color: #282c34;
-  color #ffffff
+  background-color #ffffff
 
   .inner {
-    display flex
-    justify-content left
-    width 100%
     padding 0 20px 20px 20px
 
-  }
+    .list-box {
+      .handle-box {
+        padding 20px 0
 
+        .el-input {
+          max-width 150px
+        }
+
+        .el-date-editor {
+          max-width 200px;
+        }
+      }
+
+      .pagination {
+        display flex
+        justify-content center
+        width 100%
+        padding 20px
+      }
+    }
+  }
 }
 </style>