HSW_WX/pages/subPackages/addZaiti/index.vue

<template>
  <div class="addcompany">
    <div class="form">
      <div
        class="form_row pdt32 pdb32 border_bottom_ccc width100"
        style="display: flex; height: auto; align-items: center"
        @click="openZaitiTree()"
      >
        <div class="width30 first_title" style="height: auto">关联载体</div>
        <div style="width: 65%; color: #777" class="float_left font28rpx">
          {{ form.socialCarrierName ? form.socialCarrierName : "请选择" }}
        </div>
        <img
          class="height40rpx width40rpx"
          src="../../../static/mine/youjiantou.png"
          alt=""
        />
      </div>
      <div
        class="form_row pdt32 pdb32 border_bottom_ccc width100"
        style="display: flex; height: auto; align-items: center"
      >
        <div class="width30 first_title" style="height: auto">区域</div>
        <div style="width: 65%" class="float_left font28rpx color292d98">
          <picker
            style="float: left; width: 360rpx; height: 40rpx; color: #777"
            @change="getLcmcqyIndex"
            :range="lcqymcList"
          >
            <div style="width: 315rpx; float: left">
              {{ lcqymcIndex != null ? lcqymcList[lcqymcIndex] : "请选择" }}
            </div>
          </picker>
        </div>
        <img
          class="height40rpx width40rpx"
          src="../../../static/mine/youjiantou.png"
          alt=""
        />
      </div>
      <div
        class="form_row pdt32 pdb32 border_bottom_ccc width100"
        style="display: flex; height: auto; align-items: center"
      >
        <div class="width30 first_title" style="height: auto">楼层</div>
        <div style="width: 65%" class="float_left font28rpx color292d98">
          <picker
            style="float: left; width: 360rpx; height: 40rpx; color: #777"
            @change="getLcmcIndex"
            :range="lcmcList"
          >
            <div style="width: 315rpx; float: left">
              {{ lcmcIndex != null ? lcmcList[lcmcIndex] : "请选择" }}
            </div>
          </picker>
        </div>
        <img
          class="height40rpx width40rpx"
          src="../../../static/mine/youjiantou.png"
          alt=""
        />
      </div>
      <div
        class="form_row pdt32 pdb32 border_bottom_ccc width100"
        style="display: flex; height: auto; align-items: center"
      >
        <div class="width30 first_title" style="height: auto">房间号</div>
        <div style="width: 65%" class="float_left font28rpx color292d98">
          <input
            style="color: #777"
            class="input_value float_left"
            placeholder="请输入"
            v-model="form.roomNo"
          />
        </div>
      </div>

      <div
        class="form_row pdt32 pdb32 border_bottom_ccc width100"
        style="display: flex; height: auto; align-items: center"
      >
        <div class="width30 first_title" style="height: auto">面积</div>
        <div style="width: 65%" class="float_left font28rpx color292d98">
          <input
            style="color: #777"
            class="input_value float_left"
            placeholder="请输入"
            v-model="form.size"
          />
        </div>
      </div>
    </div>
    <div class="save_button" @click="save()">保存</div>
    <!-- 载体树 -->
    <zaiti-tree2
      ref="zaitiTree"
      :multiple="false"
      :range="range"
      :selectParent="false"
      :foldAll="true"
      rangeKey="label"
      idKey="id"
      @confirm="selectZaiti"
    />
  </div>
</template>
        
    <script>
const form = {
  socialCarrierName: "",
};
import zaitiTree2 from "@/components/zaiti-tree2/index.vue";
import tools from "../../subPackages/components/tkitree/tools.js";
import { getTreeData2, getBuildDetails, addZaiti } from "@/js_sdk/http";
export default {
  components: {
    zaitiTree2,
  },
  data() {
    return {
      parentId1: "",
      parentId2: "",
      lcmcIndex: null,
      lcqymcIndex: null,
      range: [],
      zaitiList: [],
      imageStyles: {},
      listStyles: {},
      fileLists: [],
      activeNames: [],
      StatusBar: 0,
      lcmcList: [],
      lcqymcList: [],
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: { ...form },
    };
  },
  onLoad() {},
  onShow() {},
  methods: {
    async save() {
      let form = {
        floor: this.lcmcList[this.lcmcIndex],
        region: this.lcqymcList[this.lcqymcIndex],
        groudId: this.form.socialCarrierStr,
        discId: this.parentId1,
        buildId: this.parentId2,
        size: this.form.size,
        roomNo: this.form.roomNo,
      };
      let data = await addZaiti(form);
      if (data.code == 200) {
        uni.navigateBack({});
        this.$showToast("载体创建成功");
      }
      console.log(data);
    },
    getLcmcqyIndex(e) {
      console.log(Number(e.detail.value));
      this.lcqymcIndex = Number(e.detail.value);
      console.log(this.lcqymcIndex);
    },
    getLcmcIndex(e) {
      console.log(Number(e.detail.value));
      this.lcmcIndex = Number(e.detail.value);
      console.log(this.lcmcIndex);
    },
    async openZaitiTree() {
      console.log(123123);
      try {
        let that = this;
        let departmentList = await getTreeData2("");
        that.range = tools.transData(
          departmentList.data,
          "id",
          "parentid",
          "children"
        );
        that.$refs.zaitiTree._show();
      } catch (error) {
        console.log(error);
      }
    },
    async selectZaiti(e) {
      if (!e[0].parentId1 || !e[0].parentId1) {
        this.$showToast("关联载体结构不完整请重新选择");
        return;
      }
      this.lcmcIndex = null;
      this.lcqymcIndex = null;
      console.log("selectZaitiselectZaitiselectZaiti", e);
      this.form.socialCarrierStr = e[0].id;
      this.form.socialCarrierName = e[0].label;
      this.parentId1 = e[0].parentId1;
      this.parentId2 = e[0].parentId2;
      let data = await getBuildDetails({ id: e[0].id });
      this.lcmcList = data.lcmc.split(",");
      this.lcqymcList = data.lcqymc.split(",");
    },
  },
};
</script>   
    <style scoped lang="scss" scpoed>
.save_button {
  width: calc(100% - 64rpx);
  margin: 64rpx 32rpx 0 32rpx;
  background: #1d18bc;
  border-radius: 50rpx;
  height: 88rpx;
  color: white;
  text-align: center;
  line-height: 88rpx;
}
.form {
  width: calc(100% - 64rpx);
  background: #ffffff;
  padding: 32rpx;
  margin-top: 64rpx;
  .label {
    height: 53rpx;
    line-height: 53rpx;
  }
}
.form_row {
  height: 40rpx;
  font-weight: 400;
  font-size: 24rpx;
}
.zaiti_list {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
}
.idclass {
  width: 147rpx;
  height: 100rpx;
}
.dengjibutton {
  margin-top: 24rpx;
  margin-left: 60rpx;
  margin-right: 60rpx;
  width: calc(100% - 120rpx);
  height: 60rpx;
  text-align: center;
  background: #1d18bc;
  color: white;
  line-height: 60rpx;
}
.addcompany {
  margin-bottom: 200rpx;
}
.addcompany {
  .detailstitle {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    padding-bottom: 16rpx;
  }
  .typestitle {
    height: 42rpx;
    font-size: 24rpx;
    font-weight: 500;
    padding-bottom: 16rpx;
    margin-bottom: 16rpx;
  }
}
</style>
     <style lang="scss">
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}
::v-deep .uni-collapse-item__wrap-content {
  height: auto !important;
}
.pageconfig {
  background: #ffffff;
  padding: 32rpx;
}
.input_title {
  width: 40%;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #333333;
}
.input_value {
  width: 60%;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #777777;
}
.uni-collapse-item__title-box {
  padding: 0 !important;
}
.uni-collapse-item__title-text {
  color: #1d18bc !important;
  font-size: 32rpx !important;
}
</style>
  <style lang="scss">
.example-body {
  padding: 10px;
  padding-top: 0;
}

.custom-image-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
  color: #333;
}
.uni-file-picker__item {
  display: none;
}
.uploadbutton {
  width: 162rpx;
  height: 44rpx;
}
</style>