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" @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="道路名称">
  <!--        <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"  :clearable="true"  :backgroundColor="#f5f5f5" :inputBorder="true" :radius="30"-->
  <!--                   v-model="formData.roadName" @confirm="searchChange"   :left-icon="Search" >-->
  <!--          <slot :name="left">123</slot>-->
  <!--        </tui-input>-->
  
          <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"   @confirm="searchChange"
                     v-model="formData.roadName">
  <!--          <template v-slot:left>-->
  <!--            <tui-icon name="search" :size="15" ></tui-icon>-->
  <!--          </template>-->
          </tui-input>
          <template v-slot:right>

            <tui-icon name="search" :size="20" @click="searchChange"></tui-icon>
  <!--          <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"-->
  <!--                           bold radius="12rpx">获取验证码</tui-form-button>-->

          </template>
  

        </tui-form-item>

      </tui-form>
  
      <!--    <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)">

              <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">起点：{{ i.startRemark }}</p>
              <p class="fs-ellipsis " style="color: #999">终点：{{ 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 "@/api/tree";

  export default {

    name: "treeFiles",
    data() {
      return {

        belongCompanyData: [],  // 归属公司

        show: false,
        currentIndex: 0,
        formData: {
          //道路

          roadName: '',

          //归属单位

          companyId: '',

        },

        companyId: '',// 归属公司
        depts: [],// 归属班组
        roads: [], // 道路树

      }
    },

    onLoad() {
      // 归属公司
      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: {

      // 前往历史页面

      toNewPage(params) {

        uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${params}`)

      },

      // 搜索

      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.text

      },
    }

  }
  </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;
  }
  
  .right-con {
    flex: 1;
    height: 100%;
    background: #fff;

    overflow: hidden;

  }
  
  .teamsItem {

  }
  
  .teamsActive {
    background: #fff;
  }
  
  .card-wrap {

    margin: 20px 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;
  }
  

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

  </style>