foster-pc-vue/src/views/components/GardenMenu.vue

<template>
  <div class="yse-events city_menu">
    <div class="name">{{hideZnxy ? '选择果园' : name}}</div>
<!--    <div class="cascader">-->
<!--      <el-cascader-->
<!--        filterable-->
<!--        v-model="selecteValue"-->
<!--        size="small"-->
<!--        :options="options"-->
<!--        :props="props"-->
<!--        clearable-->
<!--        placeholder="切换"-->
<!--        @change="handleChange"-->
<!--        style="width: 88%"-->
<!--      />-->
<!--    </div>-->
    <div class="btn">
      <span>全部</span>
      <div class="switch" @click="changeGarden">
        <el-icon color="#fff" size="11px"><Switch /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from 'vuex';
const store = useStore()

const gardenId = store.getters.userinfo.curGardenId;
const options = ref([]);
const selecteValue = ref([]);
const props = {
  expandTrigger: "hover",
  checkStrictly: true,
  value: "organId",
  label: "name",
  hideZnxy: {
    type:Boolean,
    default:false,
  },
};
const name = ref('');
const emit = defineEmits(["handleChange","changeGarden"]);

const initList = async () => {
  const { code, data } = await VE_API.organ.gardenData();
  options.value = data;
  // options.value.push({name:'荔枝博览园',organId:766})
  const curName = options.value.find((i) => gardenId == i.organId)
  name.value = curName.name
  selecteValue.value.push(gardenId)
};

const handleChange = async (val) => {
  let data = { organId: val[0], areaId: val[1] };
  let organ = options.value.find((value) => data.organId == value.organId);
  name.value = organ.name
  let user = JSON.parse(sessionStorage.getItem('userinfo'))

  // 更新果园信息
  const res = await VE_API.organ.updateGarden({gardenId:data.organId,userId:user.userId});
  if(res.code===0) {
    const resData = res.data
    user.curGardenId = resData.curGardenId
    user.curGardenName = resData.curGardenName
    user.location = resData.location
    store.commit('app/SET_USER_INFO',JSON.stringify(user))

    // 添加自定义事件
    window.dispatchEvent(new CustomEvent('storageChanged', { detail: data.organId }));
  }

  let area = null;
  // if(data.areaId){
  //   area = organ.children.find(value => data.areaId == value.organId)
  // }
  // emit("handleChange", {organ,area})
  // emit("handleChange", { organ });
}

function changeGarden(){
  emit("changeGarden")
}

initList();

defineExpose({});
</script>

<style lang="scss" scope>
.city_menu {
  background-image: url(@/assets/img/input_bg1.png);
  background-repeat: no-repeat;
  background-size: 100% 13px;
  background-position: 0 100%;
  padding-bottom: 5px;
  box-sizing: border-box;
  width: 240px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  // ::v-deep{
  //   .el-input__wrapper{
  //     box-shadow: none;
  //   }
  //   .el-input__wrapper.is-focus{
  //     box-shadow: none;
  //   }
  //   .el-cascader .el-input.is-focus .el-input__wrapper{
  //     box-shadow: none;
  //   }
  // }
  .name {
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
  }
  .cascader {
    width: 40%;
    margin-right: 2px;
    display: flex;
    margin-left: 10px;
  }
  .btn {
    margin-right: 20px;
    width: 61px;
    height: 23px;
    background: #024155;
    border-radius: 5px;
    border: 1px solid rgba(0, 255, 240, 0.5);
    font-weight: 500;
    font-size: 13px;
    color: #00fff0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    .switch{
      background: #00FFF0;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.city_menu .el-input__wrapper {
  background: transparent;
  width: 200px;
}

.city_menu .el-input--small {
  border-color: transparent;
}
.city_menu .el-input--small .el-input__inner {
  color: #ffffff;
  border: none;
}

.el-input.el-input--small.el-input--suffix {
  border: none;
  background: none;
}
</style>