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="area" @click="pickerShow">
          <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled
                     backgroundColor="transparent" v-model="formData.area"></tui-input>
        </tui-form-item>
        <tui-form-item prop="name" :bottom-border="false">
          <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"

                     v-model="formData.roadName" @confirm="searchChange"></tui-input>

        </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(i)"
                :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 {

        cardList: [],
        belongCompanyData: [],

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

          roadName: '',

          //归属单位
          area: '',
        },

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

        card: {
          title: {
            text: '白菜湾四街'
          },
          tag: {
            text: '153颗'
          },
          header: {
            bgcolor: '#F7F7F7',
            line: true
          }
        }
      }
    },

    onLoad() {
      // 归属公司
      belongCompanyreq().then(res => {
        this.belongCompanyData = res.data
        if (this.belongCompanyData.length > 0) {
          this.formData.area = this.belongCompanyData[0].dictLabel
          this.companyId = (this.belongCompanyData[0].dictValue).toString()
          this.deptListQuery()
        }
      })
    },

    methods: {

      toNewPage(params) {

        console.log('123312')
        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[0].roads
          }
          // this.treeRoadQuery()
        })
      },
      // 树列表
      treeRoadQuery() {
        treeRoadReq({data: {road: ''}}).then(res => {
          console.log(res)
        })
      },
      // 归属公司

      teamsChange(i) {
        console.log(i)
        this.currentIndex = i
      },
      pickerShow() {
        this.show = true
      },
      pickerHide() {
        this.show = false
      },
      pickerChange(e) {
        console.log(e)
        this.formData.area = e.text
      },
    }

  }
  </script>
  

  <style scoped lang="scss">
  .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;
    padding-top: 20rpx;

    overflow: hidden;

  }
  
  .teamsItem {

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

    //height: 200rpx;

    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx;

    border-radius: 10rpx;
  }

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