sgxt_web/src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/czModel.vue

<template>
  <div class="backinfo-container">
    <div class="headClass">
      <h3>操作日志</h3>
    </div>
    <!-- 列表区域 -->
    <div class="list-container">
      <div v-loading="loading" class="behavior-list">
          <div class="behavior-list-inner">
            <div
              v-for="(item, index) in behaviorList"
              :key="item.id"
              class="behavior-item"
            >
              <div class="behavior-item-header">
                <span class="behavior-index">{{ index + 1 }}.</span>
                <el-tag :type="getTagType(item.behaviorType)">{{ item.zhmc }}</el-tag>
                <span class="behavior-time">{{ item.czsj }}</span>
              </div>
              <div class="behavior-item-content">
                <p class="behavior-description">{{ item.czjl }}</p>
                <p class="behavior-location"><i class="el-icon-location-outline"></i> {{ item.bz }}</p>
              </div>
            </div>
            <div v-if="!loading && behaviorList.length === 0" class="empty-state">
              <el-empty description="暂无操作记录" />
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted,watch } from 'vue'
import GdMap from "@/components/GdMap/index.vue";
import {tbGsxtZdryCzrzSelectCzrz} from '@/api/zdr'
const { proxy } = getCurrentInstance();
const props = defineProps({
  dataList: {
    type: Object,
    default: () => { },
  }, disabled: {
    type: Boolean,
    default: false
  },
  showBut: {
    type: Boolean,
    default: false
  },
})
const listData = ref({})
watch(() => props.dataList, (val) => {
  if (val) {
    listData.value = val
    fetchData()
  }
}, { deep: true })
// 列表数据
const behaviorList = ref([])
const loading = ref(false)

// 获取数据
const fetchData = () => {
  loading.value = true
  tbGsxtZdryCzrzSelectCzrz({ zdrid: listData.value.id }).then(res => {
    behaviorList.value = res
  }).finally(() => {
    loading.value = false
  })
}

// 页面加载时获取数据
onMounted(() => {
})
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.backinfo-container {
  padding-top: 20px;
width: 100%;
  background-color: #f5f7fa;
}

.headClass {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #409eff;
  position: relative;
}

h3 {
  margin: 0;
}

.search-container {
  background-color: #fff;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}

.demo-form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.list-container {
    background-color: #fff;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .behavior-list {
    max-height: 600px;
    overflow: hidden; /* 完全禁止滚动条 */
    position: relative;
  }

  .behavior-list-inner {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px; /* 为滚动条留出空间但不显示 */
  }

  .behavior-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
    left: 0; /* 初始位置 */
  }

  .behavior-item:hover {
    background-color: #fafafa;
    left: 5px; /* 使用left属性代替transform，避免触发滚动条 */
  }

  .behavior-item:last-child {
    border-bottom: none;
  }

  .behavior-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .behavior-index {
    font-weight: 600;
    color: #606266;
    margin-right: 12px;
    min-width: 20px;
  }

  .behavior-time {
    margin-left: auto;
    color: #909399;
    font-size: 13px;
  }

  .behavior-item-content {
    padding-left: 32px;
  }

  .behavior-description {
    margin: 0 0 8px 0;
    color: #303133;
    line-height: 1.5;
  }

  .behavior-location {
    margin: 0;
    color: #606266;
    font-size: 13px;
    line-height: 1.5;
  }

  .empty-state {
    padding: 60px 0;
    text-align: center;
  }

::v-deep .el-tag {
  margin-right: 0;
}

::v-deep .el-date-editor .el-range-separator {
  color: #606266;
}

@media (max-width: 768px) {
  .backinfo-container {
    padding: 10px;
  }

  .demo-form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .demo-form-inline .el-form-item {
    margin-bottom: 10px;
  }

  .pagination-container {
    justify-content: center;
  }
}
</style>