JCSS / jcss-miniprogram

<template>
  <view class="container">
    <!-- 筛选条：归属单位 + 道路搜索（设计稿 .filter / .search-bar） -->
    <view class="filter-bar">
      <view class="sel" @click="showActionSheet = true">
        <text class="sel-text up-line-1">{{ formData.companyId || '归属单位' }}</text>
        <up-icon name="arrow-down" size="12" color="#9CA3AF"></up-icon>
      </view>
      <view class="sbox">
        <up-icon name="search" size="12" color="#9CA3AF"></up-icon>
        <input
            v-model="searchValue"
            class="sbox-input"
            placeholder="请输入道路名称"
            placeholder-class="sbox-placeholder"
            confirm-type="search"
            @confirm="handleSearch"
        />
      </view>
      <text class="sbox-go" @click="handleSearch">搜索</text>
    </view>

    <!-- ✅ 核心：uview-plus up-row+up-col 实现左右布局【无u-scroll-list，无任何多余组件】 -->
    <up-row type="flex" class="cate-layout" align="flex-start">
      <!-- 左侧：班组列表 (uview栅格列 + 原生滚动) -->
      <up-col span="3" class="cate-left">
        <!-- 补滚动容器：班组数量多时可滚动（.left-scroll 样式原本已定义但未挂载） -->
        <scroll-view scroll-y class="left-scroll">
          <view
              class="left-item"
              :class="{ active: currentIndex === index }"
              v-for="(item, index) in cateTabList"
              :key="item.deptId"
              @click="cateTabChange(index)"
          >
            {{ item.deptName }}
          </view>
        </scroll-view>
      </up-col>

      <!-- 右侧：道路列表 (uview栅格列 + 原生滚动) -->
      <up-col span="9" class="cate-right">
        <scroll-view scroll-y class="right-scroll">
          <!-- 暂无数据 -->
<!--          <empty-view v-if="!hasValidRoadId" style="margin-top: 100px"></empty-view>-->
          <up-empty v-if="!hasValidRoadId" marginTop="100" mode="list"></up-empty>
          <!-- 道路数据列表 -->
          <view v-else class="road-list-wrap">
            <view
                v-for="item in roads"
                class="card-wrap cad-box-shadow"
                :key="item.roadId"
                @click="toNewPage(item.roadId, item.treeCount)"
            >
              <view class="card-head">
                <text class="card-title up-line-1">{{ item.roadName }}</text>
                <view class="tag-pending">{{ item.treeCount }} 棵</view>
              </view>
              <view class="card-body">
                <view class="kv">
                  <text class="k">已录入行道树</text>
                  <text class="v up-line-1">{{ item.recordedCount }} / {{ item.treeCount }} 棵</text>
                </view>
                <!-- 录入进度：占总数比例，纯模板计算未新增 JS -->
                <view class="progress">
                  <view
                      class="progress-bar"
                      :style="{ width: (item.treeCount ? (item.recordedCount / item.treeCount * 100) : 0) + '%' }"
                  ></view>
                </view>
                <view class="kv">
                  <text class="k">起点</text>
                  <text class="v up-line-1">{{ item.startRemark }}</text>
                </view>
                <view class="kv">
                  <text class="k">终点</text>
                  <text class="v up-line-1">{{ item.endRemark }}</text>
                </view>
              </view>
              <view class="card-foot">
                <text class="card-link">查看树木记录</text>
                <up-icon name="arrow-right" size="10" color="#2563EB"></up-icon>
              </view>
            </view>
          </view>
        </scroll-view>
      </up-col>
    </up-row>

    <!-- ActionSheet 底部弹出选择菜单 -->
    <up-action-sheet
        :show="showActionSheet"
        :actions="belongCompanyData"
        title="请选择归属单位"
        @select="actionSheetSelect"
        @close="showActionSheet = false"
    ></up-action-sheet>

  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { getCompanyList } from "@/api/common";
import { deptListReq } from '@/api/tree-archive/tree-archive'


const formRef = ref(null)
const showActionSheet = ref(false)
const currentIndex = ref(0)
const hasValidRoadId = ref(false)
const searchValue = ref('') // 搜索关键词 独立绑定

// 表单数据
const formData = reactive({
  companyId: '',
})

// 接口数据变量
const companyId = ref('')
const belongCompanyData = ref([])  // 归属单位下拉数据
const depts = ref([])              // 归属班组列表
const roads = ref([])              // 当前选中班组的道路列表
const cateTabList = ref([])        // 左侧tab数据源

// 生命周期
onShow( async() => {
  const res = await getCompanyList()
  belongCompanyData.value = res
  if (belongCompanyData.value.length > 0) {
    formData.companyId = belongCompanyData.value[0].name
    companyId.value = belongCompanyData.value[0].id.toString()
    deptListQuery()
  }
})

// 监听 CateTab 选中下标 数据联动
watch(currentIndex, () => {
  if(depts.value.length > 0) {
    roads.value = depts.value[currentIndex.value].roads
    checkRoadDataValid()
  }
})

// 搜索事件 - 点击搜索按钮/回车触发
const handleSearch = () => {
  deptListQuery()
}

// 跳转道路档案记录页
const toNewPage = (roadId, treeCount) => {
  uni.navigateTo({
    url: `/pages-sub/data/tree-archive/treeRecord?roadId=${roadId}&count=${treeCount}`
  })
}

// 查询班组+道路数据 & 格式化CateTab的数据源
const deptListQuery = async () => {
  const params = {
    companyId: companyId.value,
    roadName: searchValue.value
  }
  currentIndex.value=0
  const res = await deptListReq(params)
  if (res.length ==0) {
    depts.value = []
    roads.value = []
    cateTabList.value = []
    hasValidRoadId.value = false
  } else {
    depts.value = res[0].depts
    cateTabList.value = depts.value
    roads.value = depts.value[0].roads
    checkRoadDataValid()
  }
}

// 左侧班组切换事件
const cateTabChange = (index) => {
  currentIndex.value = index
  roads.value = depts.value[index].roads
  checkRoadDataValid()
}

// ActionSheet 选择归属单位的确认事件
const actionSheetSelect = (val) => {
  formData.companyId = val.name
  companyId.value = val.id.toString()
  showActionSheet.value = false // 关闭弹窗
  deptListQuery() // 重新查询数据
}

// 校验是否有有效道路数据
const checkRoadDataValid = () => {
  hasValidRoadId.value = roads.value && roads.value.length > 0 && roads.value.some(item => {
    return item.roadId !== null && item.roadId !== undefined && item.roadId
  })
}
</script>

<style scoped lang="scss">
// 页面容器 满高布局（页面底 #F4F6FA，设计稿 --page-bg）
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F4F6FA;
  box-sizing: border-box;
}

// 筛选条：白底 + 1rpx 分隔线（设计稿 .filter / .search-bar）
.filter-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #F0F0F0;
}

// 归属单位选择框
.sel {
  flex: 0 0 200rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  border: 1rpx solid #E8EBF0;
  border-radius: 8rpx;
  background-color: #ffffff;
}
.sel-text {
  flex: 1;
  min-width: 0;
  font-size: 26rpx;
  color: #4B5563;
}

// 道路搜索框
.sbox {
  flex: 1;
  min-width: 0;
  height: 60rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #F4F6FA;
  border-radius: 8rpx;
}
.sbox-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 26rpx;
  color: #1F2937;
}
.sbox-placeholder {
  font-size: 26rpx;
  color: #9CA3AF;
}
.sbox-go {
  flex-shrink: 0;
  font-size: 26rpx;
  color: #2563EB;
}

.cate-layout {
  flex: 1;
  min-height: 0;
  width: 100%;
}


.cate-left {
  height: 100%;
  padding: 0;
  background: #F4F6FA;
  border-right: 1rpx solid #F0F0F0;
  box-sizing: border-box;
  .left-scroll {
    width: 100%;
    height: 100%;
  }
  // 左侧列表项
  .left-item {
    padding: 24rpx 20rpx;
    font-size: 26rpx;
    color: #4B5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  // 选中项高亮
  .left-item.active {
    background: #ffffff;
    color: #2563EB;
    font-weight: 500;
    border-left: 4rpx solid #2563EB;
  }
}

.cate-right {
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  background: #F4F6FA;
  .right-scroll {
    width: 100%;
    height: 100%;
  }
}

// 道路列表容器：左右 20rpx、上 24rpx、下 48rpx 留白（设计稿 .right）
.road-list-wrap {
  padding: 24rpx 20rpx 48rpx;
}

// 道路卡片：白底 16rpx 圆角 + 浅投影（设计稿 .tcard）
.card-wrap {
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
  margin: 0 0 24rpx;
}
.card-wrap:last-child {
  margin-bottom: 0;
}

// 卡片标题行
.card-head {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.card-title {
  flex: 1;
  min-width: 0;
  font-size: 32rpx;
  font-weight: 500;
  color: #1F2937;
}
// 树木数量标签（设计稿 .tag.pending）
.tag-pending {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 40rpx;
  padding: 0 16rpx;
  border-radius: 8rpx;
  background-color: #EBF3FF;
  color: #2563EB;
  font-size: 22rpx;
  font-weight: 500;
  line-height: 1;
}

// 键值行（设计稿 .kv）
.card-body {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  margin-top: 20rpx;
}
.kv {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
  padding: 2rpx 0;
  font-size: 26rpx;
  line-height: 1.5;
}
.kv .k {
  flex-shrink: 0;
  color: #9CA3AF;
}
.kv .v {
  flex: 1;
  min-width: 0;
  color: #4B5563;
  text-align: right;
}

// 录入进度条：直观呈现「已录入 / 总数」
.progress {
  height: 8rpx;
  border-radius: 4rpx;
  background-color: #F4F6FA;
  overflow: hidden;
  margin: 8rpx 0 4rpx;
}
.progress-bar {
  height: 100%;
  border-radius: 4rpx;
  background-color: #2563EB;
  transition: width 0.3s ease;
}

// 卡片底部操作区（设计稿 .tcard-foot）
.card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #F0F0F0;
}
.card-link {
  font-size: 24rpx;
  color: #2563EB;
}
</style>