logpm_page/src/page/index/top/index.vue

<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        class="avue-breadcrumb"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal"
      >
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <div v-if="setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <div v-if="setting.theme" class="">
        <top-theme></top-theme>
      </div>
      <div class="top-bar__item">
        <top-lang></top-lang>
      </div>
      <div class="top-bar__item" v-if="setting.fullscren">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="setting.debug">
        <top-logs></top-logs>
      </div>
      <!-- 仓库名称  -->

      <div class="top-bar__item">
        <view>{{ dataName || '' }}</view>
      </div>

      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar" />
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.real_name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="showcl(true)">切换仓库</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided
                >{{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>
  </div>
  <el-dialog v-model="isshow" title="切换仓库" width="30%">
    <div style="display: flex; flex-direction: column; align-items: center">
      <el-select
        @change="warehouseChange"
        class="selecin"
        v-model="warehousevalue"
        filterable
        placeholder="请选择切换的仓库"
      >
        <el-option
          v-for="(item, index) in datalist"
          :key="item.id"
          :label="item.name"
          :value="index"
        />
      </el-select>
      <div class="copnbx">
        <el-button @click="showcl(false)">取消</el-button>
        <el-button type="primary" @click="confirmcks">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topLogs from './top-logs.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';
import {
  getMyWarehouseList,
  preserveCurrentWarehouse,
  getclearWarehouseCache,
  getMyCurrentWarehouse,
} from '@/api/work/work';
import { AddressClosed } from '@/utils/util';
export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topLang,
    topFull,
    topSetting,
  },
  name: 'top',
  data() {
    return {
      isshow: false,
      datalist: [],
      warehousevalue: '',
      checkwarehousevalue: 0,
      dataName: null,
      warehouseList: [], //仓库列表
    };
  },
  mounted() {
    // getMyWarehouseList().then(res => {
    //   let arr = [{ name: this.dataName ? this.dataName : '', id: '0' }];
    //   this.datalist = arr.concat(res.data.data);
    // });
    this.checkwarehousevalue = Number(localStorage.getItem('checkwarehousevalue'));
  },
  filters: {},

  created() {
  
    getMyCurrentWarehouse().then(res => {
      if (res.data.data == null) {
        console.log('当前没有数据');
        localStorage.setItem('WarehouseName', void 0);
        return;
      }
      localStorage.setItem('WarehouseName', res.data.data.name);
      if(!res.data.data.name){
        this.dataName = '';
      }else{
        this.dataName   = res.data.data.name;//仓库名字
      }
    });

  },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal',
    ]),
  },
  methods: {
    // 确定切换仓库
    async confirmcks() {
      if (typeof this.warehousevalue != 'number') {
        return;
      }
      console.log(this.warehousevalue);
      if (
        this.datalist[this.warehousevalue].id == '0' &&
        this.datalist[this.warehousevalue].name == '全部'
      ) {
        let res = await getclearWarehouseCache({});
        if (res.data.code == 200) {
          this.$message({ message: '切换成功', type: 'success' });
          localStorage.setItem('checkwarehousevalue', this.warehousevalue);
          this.$router.push({
            path: '/',
          });
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.dataName = '全部';
          localStorage.setItem('WarehouseName', this.dataName);
        } else {
          this.$message({ message: res.data.msg, type: 'error' });
        }
      } else {
        let res = await preserveCurrentWarehouse(this.datalist[this.warehousevalue]);
        if (res.data.code == 200) {
          this.$message({ message: '切换成功', type: 'success' });
          localStorage.setItem('checkwarehousevalue', this.warehousevalue);
          this.$router.push({
            path: '/',
          });
          setTimeout(() => {
            window.location.reload();
          }, 1000);
          this.dataName = this.warehouseList[this.warehousevalue - 1].name;
          localStorage.setItem('WarehouseName', this.dataName);
        } else {
          this.$message({ message: res.data.msg, type: 'error' });
        }
      }
      // this.$store.commit('SET_WAREHOUSELIST', this.warehouseList);
      this.$store.commit('DEL_TAG_CURRENT');
      this.$store.commit('DEL_TAG_OTHER');
    },
    warehouseChange(val) {
      console.log(val);
    },
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' });
        });
      });
    },
    showcl(flg) {
      console.log(this.datalist[this.warehousevalue], '当前选择的仓库');
      this.isshow = flg;
      if (this.isshow) {
        getMyWarehouseList().then(res => {
          console.log(res.data.data, 'getMyWarehouseList');
          let arr = [{ name: '全部', id: '0' }];
          this.datalist = arr.concat(res.data.data);
          this.warehouseList = res.data.data;
          console.log(this.warehouseList, '存储的仓库');
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.copnbx {
  margin-top: 30px;
  button {
    width: 120px;
    height: 40px;
  }
}
.selecin {
  width: 60%;
}
</style>