HSW_WX/pages/subPackages/companyHouse/companyHouse.vue

<template>
  <div class="companyhouse">
    <div class="searchbox">

      <div style="display: flex;align-items: center;justify-content: space-around;">
        <uni-search-bar style="width: 40%" placeholder="请输入公司名称" @confirm="confirm" clearButton="none"
          cancelButton="none" v-model="search.qymc">

        </uni-search-bar>
        <div style="width: 40%" @click="openParkSelect">
          <uni-search-bar style="width: 100%" class="parkIconHidden" placeholder="请所属园区" clearButton="none"
            cancelButton="none" v-model="search.parkInfoName" readonly searchIcon="none">
          </uni-search-bar>
        </div>
        <img @click="jumpAddCompanyPage()" src="../../../static/add_company.png" style="height: 50rpx; width: 50rpx;"
          alt="" />
      </div>

    </div>
    <van-tabs :active="active" @change="onChange">
      <van-tab title="全部" :name="null"></van-tab>
      <van-tab title="在园" :name="1"></van-tab>
      <van-tab title="挂靠" :name="2"></van-tab>
      <van-tab title="异地生产" :name="3"></van-tab>
      <van-tab title="飞地" :name="4"></van-tab>
    </van-tabs>
    <div style="display: flex; background: white; padding: 0rpx 16rpx">
      <uni-data-checkbox v-model="entryArray" mode="tag" :multiple="true" :localdata="dic_SelectList.SETTLE_IN_STATUS"
        selectedTextColor="#1D18BC" selectedColor="rgba(29,24,188,0.05);" @change="getCompanyList">
      </uni-data-checkbox>
    </div>
    <div class="list">
      <div v-if="companyList.length != 0">
        <div class="list-row" v-for="(item, index) in companyList" :key="index">
          <div class="cell_1 width90">
            <div class="width70 height44rpx mb8rpx float_left">
              <div class="first_title chaochuyincang">{{ item.qymc }}</div>
            </div>
            <div class="width30 height44rpx mb8rpx float_left" @click="jumpPage(item.id)">
              <div class="roomstatus1 txt_center" style="font-size: 24rpx">
                {{ getDicType(item.settleInType) }}
              </div>
            </div>
            <div class="width100 height40rpx mb8rpx clear_both">
              <div class="second_title width50 height40rpx float_left" style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                ">
                所属楼盘：{{
                  item.area == null || !item.area ? "未知" : item.area
                }}
              </div>
              <div class="second_title_1 width50 height40rpx float_left" @click="jumpPage(item.id)">
                注册资金：{{ !item.zczj ? "暂无" : item.zczj + "万" }}
              </div>
            </div>
            <div @click="jumpPage(item.id)" class="width100 height28rpx font24rpx fontcolor251FCA chaochuyincang">
              {{ item.qybq == null || !item.qybq ? "暂无标签" : item.qybq }}
            </div>
          </div>
          <div class="cell_3 width10" @click="jumpPage(item.id)">
            <img src="../../../static/mine/youjiantou.png" alt="" />
          </div>
        </div>
      </div>
      <div v-else>
        <van-empty class="disblock marginauto" style="background: white" description="暂无数据" />
      </div>
    </div>

    <van-popup :show="show" @close="onClose" position="bottom" round>
      <van-cascader :value="treeData3List" :title="null" :field-names="{ text: 'label', value: 'value' }"
        :options="treeData3List" @close="onClose" @finish="onFinish" />
    </van-popup>
  </div>
</template>

<script>
import { listVo, getByCodes, getUserLocalStorageInfo, getTreeData3 } from "@/js_sdk/http";
import vanEmpty from "../../../wxcomponents/weapp/dist/empty/index";
import vanCascader from '../../../wxcomponents/weapp/dist/cascader/index';

export default {
  components: {
    vanEmpty,
    vanCascader,
  },
  data() {
    return {
      cascaderValue: '',
      treeData3List: [],
      show: false,
      entryArray: [],
      dic_key: ["MNP_BUILDING_TYPE", "SETTLE_IN_STATUS"],
      dic_SelectList: {},
      active: 0,
      form: {
        entryStatus: [],
      },
      statusList: [
        { label: "全部", value: null },
        { label: "在园", value: "1" },
        { label: "挂靠", value: "2" },
        { label: "异地生产", value: "3" },
        { label: "飞地", value: "4" },
      ],
      companyList: [],
      search: {
        pageSize: 10,
        userId: "",
        pageNum: 1,
      },
    };
  },
  onShow() {
    this.search.userId = getUserLocalStorageInfo().user.id;
    this.getByCodes();
    this.getCompanyList();
    this.getTreeData3()
  },
  methods: {
    onFinish(e) {
      console.log(e)
      console.log(e.detail.selectedOptions[e.detail.selectedOptions.length - 1].id)
      console.log(e.detail.selectedOptions[e.detail.selectedOptions.length - 1].label)
      this.search.parkInfoId = e.detail.selectedOptions[e.detail.selectedOptions.length - 1].id
      this.search.parkInfoName = e.detail.selectedOptions[e.detail.selectedOptions.length - 1].label
      this.show = false
      this.getCompanyList();
      // search
      // this.form.parkInfoId = e.detail.selectedOptions[e.detail.selectedOptions.length - 1].id
      // this.form.parkInfoName = e.detail.selectedOptions[e.detail.selectedOptions.length - 1].label
      // this.treeData3DialogVisible = false
    },
    openParkSelect() {
      console.log(123123123)
      this.show = true
    },
    onClose() {
      this.show = false
    },
    async getMoreListData() {
      let that = this;

      that.search.pageNum = that.search.pageNum + 1;
      let list = await listVo(that.search);

      if (list.rows == 0) {
        that.$showToast("没有更多数据了");
      } else {
        list.rows.forEach((e) => {
          that.companyList.push(e);
        });
      }
    },
    async getTreeData3() {
      let that = this
      let datdepartmentList = await getTreeData3()
      console.log(datdepartmentList)
      that.treeData3List = datdepartmentList.data
    },
    onReachBottom() {
      this.getMoreListData();
    }, //下拉执行的时候触发 （下拉刷新）
    onChange(e) {
      this.search.settleInType = e.detail.name == null ? "" : e.detail.name;
      this.getCompanyList();
    },
    getDicType(value) {
      if (this.dic_SelectList.MNP_BUILDING_TYPE) {
        let MNP_BUILDING_TYPE = this.dic_SelectList.MNP_BUILDING_TYPE;
        let index = MNP_BUILDING_TYPE.findIndex((e) => e.value == value);

        if (index != -1) return MNP_BUILDING_TYPE[index].label;
        else return "暂无";
      }
    },
    async getByCodes() {
      this.search.pageNum = 1;
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.dic_SelectList.SETTLE_IN_STATUS =
        this.dic_SelectList.SETTLE_IN_STATUS.map((e) => {
          return {
            text: e.label,
            value: e.value,
          };
        });
    },
    async getCompanyList() {
      this.search.entryStatus = this.entryArray.toString();
      this.search.pageSize = 10;
      this.search.pageNum = 1;
      let list = await listVo(this.search);

      this.companyList = list.rows;
    },
    jumpAddCompanyPage() {
      uni.navigateTo({
        url: "/pages/subPackages/addCompany/addCompany",
      });
    },
    blur(e) { },
    focus(e) {
      //   pages / subPackages / merchants / merchants;
    },
    input(e) { },
    cancel(e) { },
    change(e) { },
    clear(e) { },
    confirm(e) {
      this.getCompanyList();
    },
    jumpPage(e) {
      uni.navigateTo({
        url: "/pages/subPackages/companyDetails/companyDetails?id=" + e,
      });
    },
  },
};
</script>


<style lang="scss">
.companyhouse {
  .uni-searchbar {
    padding: 0;
  }
}

.searchbox {
  display: block;
  background: white;
}

.parkIconHidden {
  .uni-searchbar__box-icon-search {
    display: none;
  }

  .uni-searchbar__box {
    justify-content: left;
    padding: 5px 8px 5px 15px;
  }
}

.chaochuyincang {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.labelcolmt26 {
  input {
    font-size: 24rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #cccccc;
    text-align: center;
  }

  .van-col {
    margin-top: 26rpx !important;
  }

  label {
    color: #333333;
    font-size: 30rpx;
    margin: 0;
    margin-top: 0 !important;
  }

  .uni-data-checklist {
    margin-top: -10rpx !important;
  }
}
</style>