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>
  

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

  
      <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}`)

      },

      // 归属班组
      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) {

        this.formData.companyId = e.dictLabel

        this.companyId = e.dictValue
        console.log(this.companyId)
        this.deptListQuery()

      },
    }

  }
  </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>