JCSS / yl_miniapp

<template>
  <view class="container">
    <tui-form ref="form" :show-message="false" :model="formData" style="border-bottom: 1px solid #f5f4f4">
      <tui-form-item arrow highlight prop="companyId" :bottom-border="false" @click="pickerShow" label="归属单位" >
        <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled
                   backgroundColor="transparent" v-model="formData.companyId"></tui-input>
      </tui-form-item>
<!--      <tui-form-item prop="roadName" :bottom-border="false" label="道路名称">-->
<!--&lt;!&ndash;        <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"  :clearable="true"  :backgroundColor="#f5f5f5" :inputBorder="true" :radius="30"&ndash;&gt;-->
<!--&lt;!&ndash;                   v-model="formData.roadName" @confirm="searchChange"   :left-icon="Search" >&ndash;&gt;-->
<!--&lt;!&ndash;          <slot :name="left">123</slot>&ndash;&gt;-->
<!--&lt;!&ndash;        </tui-input>&ndash;&gt;-->

<!--        <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"   @confirm="searchChange"-->
<!--                   v-model="formData.roadName">-->
<!--&lt;!&ndash;          <template v-slot:left>&ndash;&gt;-->
<!--&lt;!&ndash;            <tui-icon name="search" :size="15" ></tui-icon>&ndash;&gt;-->
<!--&lt;!&ndash;          </template>&ndash;&gt;-->
<!--        </tui-input>-->
<!--        <template v-slot:right>-->
<!--          <tui-icon name="search" :size="20" @click="searchChange"></tui-icon>-->
<!--&lt;!&ndash;          <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"&ndash;&gt;-->
<!--&lt;!&ndash;                           bold radius="12rpx">获取验证码</tui-form-button>&ndash;&gt;-->
<!--        </template>-->

<!--      </tui-form-item>-->


    </tui-form>

    <tui-searchbar radius="40rpx" height="64rpx" placeholder="请输入道路名称" @search="getSeach" @clear="setSeach"></tui-searchbar>

    <!--    <tui-row marginTop="10px" :gutter="5" class="full-height-row">-->
    <!--      <tui-col :span="8" class="left-con full-height-col" >-->
    <!--        <view class="full-height-col left-con">1</view>-->
    <!--      </tui-col>-->
    <!--      <tui-col :span="16" class="right-con full-height-col" >-->
    <!--        <view class="full-height-col">2</view>-->
    <!--      </tui-col>-->
    <!--    </tui-row>-->

    <view class="full-height-row">
      <view class="full-height-col left-con">
        <view v-for="(i,index) in depts" class="teamsItem" :key="index"
              @click="teamsChange(index)"
              :class="{teamsActive:index==currentIndex}"
        >
          <view class="fs-ellipsis fs-pt16 fs-pb16  fs-pl8 fs-pr8">{{ i.deptName }}</view>

        </view>
      </view>
      <view class="full-height-col right-con">
        <view class="nodata-wrap" v-if="roads.length==0">
          <img src="/static/images/nodata.png" alt="">
          <view style="color: #aaa">暂无数据</view>

          <!--          <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>-->
        </view>
        <view v-else>
          <view v-for="i in roads" class="card-wrap cad-box-shadow" @click="toNewPage(i.roadId, i.treeCount)">

            <p class="fs-flex__between">
              <span class="fs-ellipsis">{{ i.roadName }}</span>
              <span class="treeCount  ">{{ i.treeCount }}棵</span>
            </p>

            <p class="fs-ellipsis fs-my8">已录入行道树：{{ i.recordedCount }}棵</p>
            <p class="fs-ellipsis fs-my8" style="color: #999;font-size: 12px">起点：{{ i.startRemark }}</p>
            <p class="fs-ellipsis " style="color: #999;font-size: 12px">终点：{{ i.endRemark }}</p>

          </view>
        </view>
        
      </view>
    </view>

    <tui-picker :show="show" :pickerData="belongCompanyData" textField="dictLabel" valueField="dictValue"
                @hide="pickerHide" @change="pickerChange">
    </tui-picker>

  </view>
</template>


<script>
import { belongCompanyreq, deptListReq, treeRoadReq } from "@/subPackages/common/api/tree.js";
export default {
  name: "treeFiles",
  data() {
    return {
      belongCompanyData: [],  // 归属公司
      show: false,
      currentIndex: 0,
      formData: {
        //道路
        roadName: '',
        //归属单位
        companyId: '',
      },
      companyId: '',// 归属公司
      depts: [],// 归属班组
      roads: [], // 道路树

    }
  },
  onLoad() {

  },
  onShow(){
    // 归属公司
    belongCompanyreq().then(res => {
      this.belongCompanyData = res.data
      if (this.belongCompanyData.length > 0) {
        this.formData.companyId = this.belongCompanyData[0].dictLabel
        this.companyId = (this.belongCompanyData[0].dictValue).toString()
        this.deptListQuery()
      }
    })
  },
  methods: {
    // 获取搜索结果
    getSeach(e) {
      this.formData.roadName = e.value
      this.deptListQuery()
    },
    // 清空搜索数据
    setSeach() {
      this.formData.roadName = ''
      this.deptListQuery()
    },
    // 前往历史页面
    toNewPage(roadId, treeCount) {
      console.log(treeCount)
      uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${roadId}&count=${treeCount}`)
    },
    // 搜索
    searchChange() {
      this.deptListQuery()
    },
    // 归属班组
    deptListQuery() {
      deptListReq({data: {companyId: this.companyId, roadName: this.formData.roadName}}).then(res => {
        if (res.data.length == 0) {
          this.depts = []
          this.roads = []
        } else {
          this.depts = res.data[0].depts
          this.roads = this.depts[this.currentIndex].roads
        }
        // this.treeRoadQuery()
      })
    },

    // 班组切换
    teamsChange(i) {
      console.log(i)
      this.currentIndex = i
      this.roads = this.depts[this.currentIndex].roads
    },
    pickerShow() {
      this.show = true
    },
    pickerHide() {
      this.show = false
    },
    pickerChange(e) {
      console.log(e)
      this.formData.companyId = e.dictLabel
    },
  }
}
</script>


<style scoped lang="scss">
::v-deep .tui-form__item-wrap {
  padding-top: 8px !important; /* 原可能是 12px/16px，按需减小 */
  padding-bottom: 8px !important;
  min-height: auto !important; /* 清除默认最小高度限制 */
}


.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* tui-row 设置100%高度 */
.full-height-row {
  /* 确保row使用flex布局 */
  display: flex;
  flex: 1
}

/* tui-col 设置100%高度 */
.full-height-col {
  height: 100%;
  background-color: #f0f0f0;
}


.left-con {
  width: 220rpx;
  height: 100%;
  background: #f3f3f3;
  font-size: 14px;
}

.right-con {
  flex: 1;
  height: 100%;
  background: #fff;
  overflow: hidden;
  font-size: 14px;
}

.teamsItem {
}

.teamsActive {
  background: #fff;
}

.card-wrap {
  margin: 15px 10px 0;
  padding: 20rpx;
  border-radius: 14rpx;
}

.nodata-wrap {
  margin: 20px auto;
  text-align: center;

  image {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }
}

.treeCount {
  color: #5f5fe2;
  min-width: 70px;
  text-align: right;
}
::v-deep tui-search-bar__labe{
  justify-content: left!important;
  padding-left: 15px!important;

}
.custom-searchbar ::v-deep .tui-searchbar__input {
  text-align: left !important;
  justify-content: left;
  padding-left: 15px;
}
</style>

<style>
/* 单独写一个不带 scoped 的 style 来设置 page */
page {
  height: 100%;
  background: #fff;
}
</style>