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-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(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: '',
        //归属单位
        companyId: '',
      },
      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>