行情期限-操作日志

src/api/userPermissions.js

@@ -19,6 +19,15 @@ export function userMListApi(params) {
   });
 }
 
+// 行情期限--操作日志
+export function logMListApi(params) {
+  return request({
+    url: base_url + "/admin/market/loglist",
+    method: "post",
+    data: params,
+  });
+}
+
 // 获取导出列表
 export function exportListApi(params) {
   return request({

src/views/UserPermissions/LogMarket.vue

@@ -1,13 +1,213 @@
 <template>
-  
+  <div class="page-container">
+    <!-- 头部 -->
+    <div class="button-group">
+      <el-button type="danger" @click="goback">返回上一页</el-button>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table 
+      :data="tableData"
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header"
+      @sort-change="handleSortChange"
+      :default-sort="{ prop: null, order: null }" 
+      class="table-rounded" 
+      :loading="tableLoading" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" type="index" width="60"/>
+      <el-table-column prop="dccode" label="账号" align="center" header-align="center" width="100"/>
+      <el-table-column prop="dcname" label="姓名" align="center" header-align="center" width="150"/>
+      <el-table-column label="模块名称" align="center" header-align="center" width="100">
+        行情权限
+      </el-table-column>
+      <el-table-column prop="created_at" label="操作时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="note" label="备注" align="center" header-align="center">
+        <template #default="scope">
+            <el-tooltip :content="scope.row.note" placement="top">
+                <span class="note-ellipsis">
+                    {{ scope.row.note }}
+                </span>
+            </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="datatotal"
+      />
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref, onMounted } from 'vue';
+import { logMListApi } from '../../api/userPermissions'
+import { useRoute, useRouter } from 'vue-router'; 
 
-}
+//获取路由实例
+const route = useRoute();
+const router = useRouter();
+
+// 全局id
+const targetId = ref(0);
+
+// 排序参数
+const sortProp = ref(null);
+const sortOrder = ref(null);
+
+// 表格数据
+const tableData = ref([]);
+const tableLoading = ref(false);
+const datatotal = ref(0);
+
+// 分页参数
+const currentPage = ref(1); 
+const pageSize = ref(10); 
+
+// 获取表格数据
+const logTableData = async (id) => {
+  try {
+    tableLoading.value = true;
+    const requestParams = {
+      id: id, 
+      sort_field: sortProp.value,
+      sort_order: sortOrder.value,
+      page: currentPage.value,
+      page_size: pageSize.value     
+    };
+    const data = await logMListApi(requestParams);
+    tableData.value = data.list
+    datatotal.value = data.total
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableData.value = [];
+    datatotal.value = 0;
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 组件挂载时
+onMounted(() => {
+  targetId.value = route.query.id;
+  logTableData(targetId.value)
+});
+
+// 返回按钮
+const goback = () => {
+  router.go(-1);
+};
+
+// 分页方法
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  logTableData(targetId.value);
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  logTableData(targetId.value);
+  console.log(`当前页: ${val}`);
+};
+
+// 排序事件
+const handleSortChange = (sort) => {
+  const { prop, order } = sort;
+
+  if (!['created_at', 'expire_time'].includes(prop)) return;
+
+  // 覆盖排序状态（实现二选一）
+  sortProp.value = prop; // 保存当前排序字段
+  sortOrder.value = order; // 保存当前排序方式
+  
+  logTableData(targetId.value);
+};
 </script>
 
-<style>
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
 
+/* 按钮组 */
+.button-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+/* 按钮样式 */
+.button-group .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
+
+/* 表格样式 */
+.table-rounded {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
+
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+/* 备注 */
+.note-ellipsis {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  padding: 0 4px;
+}
+
+/* 分页组件 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
 </style>