QTApp_800/pages/work/log/logList.uvue

<template>
  <view class="container">
    <!-- 列表内容 -->
    <!-- #ifdef APP -->
    <list-view class="list" :bounces="false" :scroll-y="true" :custom-nested-scroll="true"
        @scrolltolower="loadData(null)" associative-container="nested-scroll-view">
	   <list-item class="list-item" type="10">	
    <!-- #endif -->
      <view class="download-card" v-for="(item, index) in logs" :key="index" >
		<view @click="enterItem(item.id)">
			<view class="info-row">
			  <text class="label">模块：</text>
			  <text class="value">{{ item.module }}</text>
			</view>
			<view class="info-row">
			  <text class="label">日志内容：</text>
			  <text class="value">{{ item.title }}</text>
			</view>
			<view class="info-row">
			  <text class="label">操作人员</text>
			  <text class="value">{{ item.createuser }}</text>
			</view>			
			<view class="info-row">
			  <text class="label">操作时间：</text>
			  <text class="value">{{ item.createtime }}</text>
			</view>			
		</view> 
      </view>  
    <!-- #ifdef APP -->
	  </list-item type="20">
	    <list-item class="loading">
	          <uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
	        </list-item>
      </list-view>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { getList, selectPageSql } from '@/api/work';
  import { downloadDataFromAPI, uploadDataToAPI } from '@/utils/dataProcessor';
  
  const backPressOptions = reactive({
    from: 'backbutton'
  } as OnBackPressOptions)

  onBackPress((options : OnBackPressOptions) : boolean | null => {
    console.log('onBackPress', options)
    // 使用reLaunch代替switchTab，避免多层跳转时的闪回问题
    // reLaunch会关闭所有页面并打开到目标页面，适合需要完全重置导航栈的场景
    uni.reLaunch({
      url: `/pages/work/index`,
    })
    // 返回true表示拦截默认返回行为
    return true
  })

  type Log = {
    id : number,
    module : string,
	title : string,
    content : string,
    msg : string,  
	createuser: string,  
    createtime: string   
  }

  var initLog = [] as Log[]
  var logs = ref<Log[]>([]);
  const loading = ref(false)
  const isEnded = ref(false)
  const loadingError = ref('')
  const currentPage = ref(1)
  const map = ref(new Map<number, string>([[1, '未执行'], [2, '执行中'], [3, '执行完'], [4, '有错误']]))

  const loadingText = computed((): string => {
    if (loading.value) {
      return "加载中..."
    } else if (isEnded.value) {
      return "没有更多了"
    } else if (loadingError.value.length > 0) {
      return loadingError.value
    } else {
      return ""
    }
  })
  // #ifdef APP-ANDROID
  
  const loadData = (loadComplete : (() => void) | null) {
    if (loading.value || isEnded.value) {
      return
    }
    loading.value = true
    let offset = currentPage.value === 1 ? 0 : (currentPage.value-1) * 10	
  	selectPageSql('app_operate_log', 'id', offset).then((res : UTSJSONObject) => {
  		console.log(res)
  		let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
  		if (dataList != null && dataList.length > 0) {
  			dataList.forEach(item => {
  			  if (item != null) {
  			    let log = JSON.parse<Log>(item.toJSONString());
  			    if (log != null) {
  			      initLog.push(log)
  			    }
  			  }
  			});
			currentPage.value++			
  		}else{
			isEnded.value = true
		}
  		logs.value = initLog
  		loading.value = false
  		if (loadComplete != null) {
  		    loadComplete()
  		}
  	}) 
   
  }
  
	
  onMounted(() => {
	loadData(null)
  })
  
  // #endif

  // #ifdef H5
  logs = [{
    id: 1,
    module: "app_media_info",
    dataid: 0,
	content : "新增数据成功",
    params: "1CFA1040-00#S",    
	createtime: "2025-06-23",
    updatetime: "2025-06-23",	
    status: 1
  }, {
    id: 2,
    module: "app_media_info",
    dataid: 0,
	content : "新增数据成功",
    params: "1CFA1040-00#S",    
	createtime: "2025-06-23",
    updatetime: "2025-06-23",	
    status: 1
  }] as Log[];

  // #endif
  
  const enterItem = (id : number) => {
    uni.navigateTo({
      url: `/pages/work/log/logDetail?id=${id}`
    });
  }
   
  
  defineExpose({
	loadData,  
    backPressOptions
  })
</script>

<style scope>
  .container {
    padding: 24rpx;
    background-color: #f0f4f8;
    flex: 1;
    display: flex;
    flex-direction: column;
    font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* #ifndef APP-ANDROID */
    min-height: 100vh;
    /* #endif */
    height: 120rpx;
  }

  .search-bar {
	  background-color: #ffffff;
	  border-radius: 10rpx;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 搜索输入框：占满容器剩余空间，放在按钮左侧 */
	.search-input {
	  /* 清除默认输入框样式 */
	  border: none;
	  background: transparent;
	  width: 70%;
	  margin-left: 10rpx;
	}

/* 扫描按钮：放在输入框右侧，距离最右10rpx */
	.scan-btn {
	  justify-content: center;
	  align-items: center; /* 新增：按钮内部图标垂直居中 */
	  /* 关键：右侧10rpx边距，实现"距离最右10rpx" */
	  margin-left: auto; /* 自动推到flex容器最右侧 */
	  margin-right: 10rpx; /* 与容器右边缘保持10rpx间距 */
	}

  .download-card {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 24rpx 32rpx;
    box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
  }

  .download-card .view {
    margin-bottom: 16rpx;
  }

  /* 信息行 */
  .info-row {
    display: flex;
    flex-direction: row;
	/* #ifdef H5 */
    font-size: 28rpx;
    color: #33475b;
	/* #endif */
    align-items: center;
  }

  .info-row>.label {
    margin-left: 10rpx;
  }

  .info-row>.value {
    margin-left: 10rpx;
  }

  .btn-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 5rpx;
    margin-right: 5rpx;
  }

  .label {
    font-weight: bold;
    color: #102a43;
    min-width: 100rpx;
  }

  .value {
	  flex: 1;
	  word-break: break-all;
	  word-wrap: break-word;
  }	

  .btn {
    align-self: flex-end;
    background-color: #00aaff;
    color: #fff;
    border: none;
    border-radius: 32rpx;
    padding: 2rpx 30rpx;
    font-size: 24rpx;
    font-weight: bold;
    /* #ifndef APP-ANDROID */
    transition: background-color 0.3s ease;
    /* #endif */
    margin-top: 30rpx;
  }

  .process-value {
    width: 120rpx;
    min-width: 100rpx;
    text-align: center;
    border-radius: 10rpx;
  }

  .bg-green {
    background-color: seagreen;
  }

  .bg-yellow {
    background-color: yellow;
  }

  .bg-black {
    background-color: #102a43;
  }

  .btn-first {
    margin-left: 5rpx;
  }

  .btn-second {
    margin-right: 5rpx;
	margin-left: auto;
  }
  .loading {
      padding: 30px;
      align-items: center;
  }
  .list {
      flex: 1;
      background-color: #ffffff;
  }
  .list-item {
      flex-direction: column;
      margin-top: 10px;
      padding: 10px;
  }
  
</style>