greater_wms/templates/src/layouts/MainLayout.vue

<template>
  <q-layout
    view="hHh LpR fFf"
    :style="{ height: $q.screen.height, width: $q.screen.width }"
  >
    <q-header reveal elevated class="bg-primary text-white">
      <q-toolbar class="main-headers text-white shadow-18 rounded-borders">
        <transition appear enter-active-class="animated zoomIn">
          <q-btn flat @click="drawerleft = !drawerleft" round dense icon="menu">
            <q-tooltip
              content-class="bg-amber text-black shadow-4"
              :offset="[15, 15]"
              content-style="font-size: 12px"
              >{{
                drawerleft ? $t("index.hide_menu") : $t("index.open_menu")
              }}</q-tooltip
            >
          </q-btn>
        </transition>
        <transition appear enter-active-class="animated zoomIn">
          <q-toolbar-title
            shrink
            class="text-weight-bold"
            @click="
              $router.push({ name: 'web_index' });
              linkChange('');
            "
          >
            {{ $t("index.title") }}</q-toolbar-title
          >
        </transition>

        <q-space />
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
        <transition appear enter-active-class="animated zoomIn">
          <q-btn
            square
            dense
            flat
            color="white"
            :label="warehouse_name"
            icon="maps_home_work"
            style="margin: 0 10px 0 10px"
          >
            <q-tooltip
              content-class="bg-amber text-black shadow-4"
              :offset="[15, 15]"
              content-style="font-size: 12px"
            >
              {{ $t("index.warehouse_switch") }}
            </q-tooltip>
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item
                  clickable
                  v-close-popup
                  v-for="(warehouse, index) in warehouseOptions"
                  :key="index"
                  @click="warehouseChange(index)"
                >
                  <q-item-section>{{
                    warehouse.warehouse_name
                  }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </transition>
        <q-separator vertical />
        <template v-if="authin === '1'">
          <transition appear enter-active-class="animated zoomIn">
            <q-btn-dropdown stretch flat color="white-8" icon="account_circle">
              <div class="q-pa-md">
                <div class="column items-center">
                  <q-avatar size="72px"
                    ><q-img src="statics/staff/stafftype.png"></q-img
                  ></q-avatar>
                  <div class="text-subtitle1 q-mt-md q-mb-xs">
                    {{ login_name }}
                  </div>

                  <q-btn
                    color="primary"
                    :label="$t('index.change_user')"
                    push
                    size="sm"
                    v-close-popup
                    icon="face"
                    @click="login = true"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("index.change_user") }}</q-tooltip
                    >
                  </q-btn>
                  <q-separator />
                  <q-btn
                    color="primary"
                    :label="$t('index.logout')"
                    push
                    size="sm"
                    v-close-popup
                    icon="img:statics/icons/logout.png"
                    @click="Logout()"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("index.logout") }}</q-tooltip
                    >
                  </q-btn>
                </div>
              </div>
            </q-btn-dropdown>
          </transition>
        </template>
        <template v-if="authin === '0'">
          <transition appear enter-active-class="animated zoomIn">
            <q-btn
              :label="$t('index.login')"
              color="primary"
              @click="login = true"
              style="margin-left: 10px"
            >
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[15, 15]"
                content-style="font-size: 12px"
                >{{ $t("index.login_tip") }}</q-tooltip
              >
            </q-btn>
          </transition>
          <transition appear enter-active-class="animated zoomIn">
            <q-btn
              :label="$t('index.register')"
              color="primary"
              @click="register = true"
              style="margin-left: 10px"
            >
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[15, 15]"
                content-style="font-size: 12px"
                >{{ $t("index.register_tip") }}</q-tooltip
              >
            </q-btn>
          </transition>
        </template>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="drawerleft"
      show-if-above
      :width="200"
      :breakpoint="500"
      bordered
      content-class="bg-grey-3 shadow-24"
    >
      <q-scroll-area class="fit" style="overflow-y: auto">
        <q-list>
          <q-item
            clickable
            :to="{ name: 'management' }"
            @click="linkChange('stock')"
            v-ripple
            exact
            :active="link === 'stock' && link !== ''"
            :class="{ 'my-menu-link': link === 'stock' && link !== '' }"
          >
            <q-item-section avatar
              ><q-icon name="multiline_chart"
            /></q-item-section>
            <q-item-section>{{ $t("menuItem.stock") }}</q-item-section>
          </q-item>

          <q-separator />

          <q-item
            clickable
            :to="{ name: 'erpasn' }"
            @click="linkChange('erp')"
            v-ripple
            exact
            :active="link === 'erp' && link !== ''"
            :class="{
              'my-menu-link': link === 'erp' && link !== '',
            }"
          >
            <q-item-section avatar
              ><q-icon name="img:statics/outbound/outbound.png"
            /></q-item-section>
            <q-item-section>{{ "ERP任务" }}</q-item-section>
            <q-badge
              v-if="ERPTasks > 0"
              color="red-5"
              class="task-badge"
              :class="{ 'high-priority': ERPTasks > 20 }"
            >
              {{ ERPTasks > 99 ? "99+" : ERPTasks }}
            </q-badge>
            <q-badge
              v-if="ERPOutTasks > 0"
              color="blue-5"
              class="outtask-badge"
            >
              {{ ERPOutTasks > 99 ? "99+" : ERPOutTasks }}
            </q-badge>
          </q-item>

          <q-separator />
          <q-item
            clickable
            :to="{ name: 'asn' }"
            @click="linkChange('inbound')"
            v-ripple
            exact
            :active="link === 'inbound' && link !== ''"
            :class="{ 'my-menu-link': link === 'inbound' && link !== '' }"
          >
            <q-item-section avatar
              ><q-icon name="speaker_notes"
            /></q-item-section>
            <q-item-section>{{ $t("menuItem.inbound") }}</q-item-section>
          </q-item>
          <q-item
            clickable
            :to="{ name: 'containerlist' }"
            @click="linkChange('container')"
            v-ripple
            exact
            :active="link === 'container' && link !== ''"
            :class="{
              'my-menu-link': link === 'container' && link !== '',
            }"
          >
            <q-item-section avatar
              ><q-icon name="stay_current_landscape"
            /></q-item-section>
            <q-item-section>托盘管理</q-item-section>
          </q-item>

          <q-item
            clickable
            :to="{ name: 'dn' }"
            @click="linkChange('outbound')"
            v-ripple
            exact
            :active="link === 'outbound' && link !== ''"
            :class="{ 'my-menu-link': link === 'outbound' && link !== '' }"
          >
            <q-item-section avatar>
              <q-icon name="rv_hookup"> </q-icon>
            </q-item-section>
            <q-item-section>{{ $t("menuItem.outbound") }}</q-item-section>

            <q-badge
              v-if="pendingTasks > 0"
              color="red-5"
              class="task-badge"
              :class="{ 'high-priority': pendingTasks > 20 }"
            >
              {{ pendingTasks > 99 ? "99+" : pendingTasks }}
            </q-badge>
          </q-item>

          <q-separator />
          <q-item
            clickable
            :to="{ name: 'task' }"
            @click="linkChange('taskpage')"
            v-ripple
            exact
            :active="link === 'taskpage' && link !== ''"
            :class="{
              'my-menu-link': link === 'taskpage' && link !== '',
            }"
          >
            <q-item-section avatar
              ><q-icon name="img:statics/outbound/picked.png"
            /></q-item-section>
            <q-item-section>任务管理</q-item-section>
          </q-item>
          <q-separator />
          <q-item
            clickable
            :to="{ name: 'inboundAndOutbound' }"
            @click="linkChange('outbounddashboard')"
            v-ripple
            exact
            :active="link === 'outbounddashboard' && link !== ''"
            :class="{
              'my-menu-link': link === 'outbounddashboard' && link !== '',
            }"
          >
            <q-item-section avatar><q-icon name="auto_graph" /></q-item-section>
            <q-item-section>{{ $t("menuItem.dashboard") }}</q-item-section>
          </q-item>
          <q-item
            clickable
            :to="{ name: 'warehouseset' }"
            @click="linkChange('warehouse')"
            v-ripple
            exact
            :active="link === 'warehouse' && link !== ''"
            :class="{ 'my-menu-link': link === 'warehouse' && link !== '' }"
          >
            <q-item-section avatar><q-icon name="settings" /></q-item-section>
            <q-item-section>{{ $t("menuItem.warehouse") }}</q-item-section>
          </q-item>
          <q-item
            clickable
            :to="{ name: 'stafflist' }"
            @click="linkChange('staff')"
            v-ripple
            exact
            :active="link === 'staff' && link !== ''"
            :class="{ 'my-menu-link': link === 'staff' && link !== '' }"
          >
            <q-item-section avatar
              ><q-icon name="assignment_ind"
            /></q-item-section>
            <q-item-section>{{ $t("menuItem.staff") }}</q-item-section>
          </q-item>

          <q-separator />
          <q-item
            clickable
            :to="{ name: 'initializeupload' }"
            @click="linkChange('uploadcenter')"
            v-ripple
            exact
            :active="link === 'uploadcenter' && link !== ''"
            :class="{ 'my-menu-link': link === 'uploadcenter' && link !== '' }"
          >
            <q-item-section avatar
              ><q-icon name="file_upload"
            /></q-item-section>
            <q-item-section>{{ $t("menuItem.uploadcenter") }}</q-item-section>
          </q-item>
          <q-item
            clickable
            :to="{ name: 'downloadinbound' }"
            @click="linkChange('downloadcenter')"
            v-ripple
            exact
            :active="link === 'downloadcenter' && link !== ''"
            :class="{
              'my-menu-link': link === 'downloadcenter' && link !== '',
            }"
          >
            <q-item-section avatar
              ><q-icon name="file_download"
            /></q-item-section>
            <q-item-section>{{ $t("menuItem.downloadcenter") }}</q-item-section>
          </q-item>
          <q-separator />
        </q-list>
      </q-scroll-area>
    </q-drawer>
    <q-page-container
      class="main-page"
      :style="{
        height: container_height,
        width: $q.screen.width,
      }"
    >
      <router-view />
    </q-page-container>
    <q-dialog
      v-model="authid"
      transition-show="jump-down"
      transition-hide="jump-up"
    >
      <q-card style="min-width: 350px">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("index.your_openid") }}</div>
          <q-space></q-space>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip
              content-class="bg-amber text-black shadow-4"
              :offset="[20, 20]"
              content-style="font-size: 12px"
              >{{ $t("index.close") }}</q-tooltip
            >
          </q-btn>
        </q-bar>
        <q-card-section class="q-pt-md"
          ><q-input
            dense
            outlined
            square
            label="Openid"
            v-model="openid"
            readonly
            disable
        /></q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="login"
      transition-show=""
      transition-hide=""
      persistent
      full-width
      full-height
    >
      <div
        class="flex flex-center"
        style="
          height: 100%;
          background-color: #f5f5f5;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        "
      >
        <div
          style="
            font-size: 55px;
            letter-spacing: 10px;
            width: 100%;
            text-align: center;
            margin-top: 10px;
          "
        >
          {{ $t("index.developer") }}
        </div>
        <q-card style="min-width: 350px">
          <q-bar
            class="bg-light-blue-10 text-white rounded-borders"
            style="height: 50px"
          >
            <q-tabs v-model="activeTab" class="tabs">
              <q-tab name="admin" @click="admin = true">
                {{ $t("index.user_login") }}
                <q-tooltip
                  content-class="bg-amber text-black shadow-4"
                  :offset="[5, 5]"
                  content-style="font-size: 12px"
                  >{{ $t("index.user_login") }}</q-tooltip
                >
              </q-tab>
            </q-tabs>
            <q-space />
          </q-bar>
          <q-card-section class="q-pt-md">
            <template v-if="admin">
              <q-input
                dense
                outlined
                square
                :label="$t('index.staff_name')"
                v-model="adminlogin.name"
                autofocus
                @keyup.enter="adminLogin()"
              />
              <q-input
                dense
                outlined
                square
                :label="$t('index.password')"
                :type="isPwd ? 'password' : 'text'"
                v-model="adminlogin.password"
                @keyup.enter="adminLogin()"
                style="margin-top: 5px"
              >
                <template v-slot:append>
                  <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                  />
                </template>
              </q-input>
            </template>
          </q-card-section>
          <q-card-actions align="left" class="text-primary">
            <q-space />
            <template>
              <q-btn
                color="primary"
                :label="$t('index.login')"
                style="font-size: 16px; margin: 0 8px; width: 100%"
                @click="adminLogin()"
              />
            </template>
            <div class="q-mx-auto">
              <q-btn
                flat
                class="text-teal-4 q-mt-sm"
                @click="
                  login = false;
                  register = true;
                "
              >
                {{ $t("index.register_tip") }}
              </q-btn>
            </div>
          </q-card-actions>
        </q-card>
        <lottie-web-cimo
          ref="lottie_web"
          animationName="welcome"
          style="width: 85%; max-width: 95%; height: 12%; margin: auto"
        />
      </div>
    </q-dialog>
    <q-dialog
      v-model="register"
      transition-show=""
      transition-hide=""
      persistent
      full-width
      full-height
    >
      <div
        class="flex flex-center"
        style="
          height: 100%;
          background-color: #f5f5f5;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        "
      >
        <div
          style="
            font-size: 55px;
            letter-spacing: 10px;
            width: 100%;
            text-align: center;
            margin-top: 10px;
          "
        >
          {{ $t("index.developer") }}
        </div>
        <q-card style="min-width: 350px">
          <q-bar
            class="bg-light-blue-10 text-white rounded-borders"
            style="height: 50px"
          >
            <div>{{ $t("index.register_tip") }}</div>
          </q-bar>
          <q-card-section class="q-pt-md">
            <q-input
              dense
              outlined
              square
              :label="$t('index.staff_name')"
              v-model="registerform.name"
              @keyup.enter="Register()"
            />
            <q-input
              dense
              outlined
              square
              :label="$t('index.password')"
              v-model="registerform.password1"
              :type="isPwd ? 'password' : 'text'"
              @keyup.enter="Register()"
              style="margin-top: 5px"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
            <q-input
              dense
              outlined
              square
              :label="$t('index.confirm_password')"
              v-model="registerform.password2"
              :type="isPwd2 ? 'password' : 'text'"
              @keyup.enter="Register()"
              style="margin-top: 5px"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd2 ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd2 = !isPwd2"
                />
              </template>
            </q-input>
          </q-card-section>
          <q-card-actions align="right" class="text-primary q-mx-sm"
            ><q-btn
              class="full-width"
              color="primary"
              :label="$t('index.register')"
              @click="Register()"
          /></q-card-actions>
          <q-card-actions align="center" style="margin-top: -8px">
            <q-btn
              class="text-teal-4"
              flat
              :label="$t('index.return_to_login')"
              @click="
                login = true;
                register = false;
              "
            ></q-btn>
          </q-card-actions>
        </q-card>
        <lottie-web-cimo
          ref="lottie_web"
          animationName="welcome"
          style="width: 85%; max-width: 95%; height: 12%; margin: auto"
        />
      </div>
    </q-dialog>
    <q-dialog v-model="switch_warehouse">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("index.warehouse_switch") }}</div>
          <q-space />
        </q-bar>
        <q-card-section style="max-height: 325px; width: 400px" class="scroll">
          {{
            switch_state
              ? $t("index.switch_state_on")
              : $t("index.switch_state_off")
          }}
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-layout>
</template>
<script>
import { get, getauth, post, baseurl } from 'boot/axios_request'
import { LocalStorage, SessionStorage, openURL } from 'quasar'
import Bus from 'boot/bus.js'
import LottieWebCimo from 'components/lottie-web-cimo'
import Screenfull from 'components/Screenfull'

export default {
  components: {
    LottieWebCimo,
    Screenfull
  },
  data () {
    return {
      device: LocalStorage.getItem('device'),
      device_name: LocalStorage.getItem('device_name'),
      lang: 'zh-hans',
      container_height: this.$q.screen.height + '' + 'px',
      warehouse_name: '',
      warehouseOptions: [],
      warehouseOptions_openid: [],
      langOptions: [{ value: 'zh-hans', label: '中文简体' }],
      title: this.$t('index.webtitle'),
      admin: true,
      adminlogin: {
        name: '',
        password: ''
      },
      openid: '',
      appid: '',
      switch_state: false,
      switch_warehouse: false,
      isPwd: true,
      isPwd2: true,
      authin: '0',
      authid: false,
      left: false,
      drawerleft: false,
      tab: '',
      login: false,
      link: '',
      login_name: '',
      login_id: 0,
      check_code: '',
      register: false,
      registerform: {
        name: '',
        password1: '',
        password2: ''
      },
      needLogin: '',
      activeTab: '',
      ERPTasks: 0,
      ERPOutTasks: 0,
      pendingTasks: 0,
      pollInterval: null,
      timer: null
    }
  },
  methods: {
    linkChange (e) {
      var _this = this
      localStorage.removeItem('menulink')
      localStorage.setItem('menulink', e)
      _this.link = e
      console.log(_this.link)
    },
    drawerClick (e) {
      var _this = this
      if (_this.miniState) {
        _this.miniState = false
        e.stopPropagation()
      }
    },
    brownlink (e) {
      openURL(e)
    },
    apiLink () {
      openURL(baseurl + '/api/docs/')
    },

    adminLogin () {
      var _this = this
      if (!_this.adminlogin.name) {
        _this.$q.notify({
          message: '请输入用户名',
          color: 'negative',
          icon: 'close'
        })
      } else {
        if (!_this.adminlogin.password) {
          _this.$q.notify({
            message: '请输入密码',
            icon: 'close',
            color: 'negative'
          })
        } else {
          SessionStorage.set('axios_check', 'false')
          post('login/', _this.adminlogin)
            .then((res) => {
              if (res.code === '200') {
                _this.authin = '1'
                _this.login = false
                _this.admin = false
                _this.openid = res.data.openid
                _this.appid = res.data.appid

                _this.login_name = res.data.name
                _this.login_id = res.data.user_id
                LocalStorage.set('auth', '1')
                LocalStorage.set('openid', res.data.openid)
                LocalStorage.set('appid', res.data.appid)
                LocalStorage.set('login_name', _this.login_name)
                LocalStorage.set('login_id', _this.login_id)
                LocalStorage.set('login_mode', res.data.staff_type)
                _this.$q.notify({
                  message: 'Success Login',
                  icon: 'check',
                  color: 'green'
                })
                localStorage.removeItem('menulink')
                _this.link = ''
                _this.$router.push({ name: 'web_index' })
                window.setTimeout(() => {
                  location.reload()
                }, 1)
              } else {
                _this.$q.notify({
                  message: res.msg,
                  icon: 'close',
                  color: 'negative'
                })
              }
            })
            .catch((err) => {
              _this.$q.notify({
                message: err.detail,
                icon: 'close',
                color: 'negative'
              })
            })
        }
      }
    },
    Logout () {
      var _this = this
      _this.authin = '0'
      _this.login_name = ''
      LocalStorage.remove('auth')
      SessionStorage.remove('axios_check')
      LocalStorage.set('login_name', '')
      LocalStorage.set('login_id', '')
      LocalStorage.set('appid', '')

      _this.$q.notify({
        message: 'Success Logout',
        icon: 'check',
        color: 'negative'
      })
      // _this.staffType();
      localStorage.removeItem('menulink')
      _this.link = ''
      _this.$router.push({ name: 'web_index' })
      window.setTimeout(() => {
        location.reload()
      }, 1)
    },
    Register () {
      var _this = this
      SessionStorage.set('axios_check', 'false')
      post('register/', _this.registerform)
        .then((res) => {
          if (res.code === '200') {
            _this.register = false
            _this.openid = res.data.openid
            _this.login_name = _this.registerform.name
            _this.login_id = res.data.user_id
            _this.authin = '1'

            LocalStorage.set('auth', '1')
            LocalStorage.set('appid', res.data.appid)
            LocalStorage.set('login_name', res.data.name)
            LocalStorage.set('login_id', res.data.user_id)
            LocalStorage.set('openid', res.data.openid)
            LocalStorage.set('login_mode', 'Admin')

            _this.registerform = {
              name: '',
              password1: '',
              password2: ''
            }
            _this.$q.notify({
              message: res.msg,
              icon: 'check',
              color: 'green'
            })
            _this.staffType()
            localStorage.removeItem('menulink')
            _this.link = ''
            _this.$router.push({ name: 'web_index' })
            window.setTimeout(() => {
              location.reload()
            }, 1)
          } else {
            _this.$q.notify({
              message: res.msg,
              icon: 'close',
              color: 'negative'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    staffType () {
      var _this = this
      getauth('staff/?staff_name=' + _this.login_name).then((res) => {
        LocalStorage.set('staff_type', res.results[0].staff_type)
      })
    },
    warehouseOptionsGet () {
      var _this = this
      get('warehouse/multiple/?max_page=30')
        .then((res) => {
          // if (res.count === 1) {
          //   _this.openid = res.results[0].openid
          //   _this.warehouse_name = res.results[0].warehouse_name
          //   LocalStorage.set('openid', _this.openid)
          // } else {
          _this.warehouseOptions = res.results
          if (LocalStorage.has('openid')) {
            _this.warehouseOptions.forEach((item, index) => {
              if (item.openid === LocalStorage.getItem('openid')) {
                _this.warehouseOptions_openid.push(item)
              }
            })
          }
          _this.warehouse_name = res.results[0].warehouse_name
          localStorage.setItem('warehouse_name', res.results[0].warehouse_name)
          localStorage.setItem('warehouse_code', res.results[0].warehouse_code)
          // }
        })
        .catch((err) => {
          console.log(err)
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    warehouseChange (e) {
      var _this = this
      _this.openid = _this.warehouseOptions[e].openid
      if (_this.openid === LocalStorage.getItem('openid')) {
        _this.warehouse_name = _this.warehouseOptions[e].warehouse_name
        localStorage.setItem(
          'warehouse_name',
          _this.warehouseOptions[e].warehouse_name
        )
        localStorage.setItem(
          'warehouse_code',
          _this.warehouseOptions[e].warehouse_code
        )

        _this.switch_state = true
      } else {
        _this.switch_state = false
      }
      _this.switch_warehouse = true

      // LocalStorage.set('openid', _this.openid)
      // LocalStorage.set('staff_type', 'Admin')
      // _this.login_name = ''
      // LocalStorage.set('login_name', '')
      // _this.authin = '0'
      // _this.isLoggedIn()
      // LocalStorage.remove('auth')
      // SessionStorage.remove('axios_check')
    },
    // langChange(e) {
    //   var _this = this
    //   _this.lang = e
    //   window.setTimeout(() => {
    //     location.reload()
    //   }, 1)
    // },
    isLoggedIn () {
      if (this.$q.localStorage.getItem('openid')) {
        this.login = true
      } else {
        this.register = true
      }
    },
    handleTimer () {
      getauth('/wms/inboundBills/?bound_status=0').then((res) => {
        this.ERPTasks = res.count
      })
      getauth('/wms/outboundBills/?bound_status=0').then((res) => {
        this.ERPOutTasks = res.count
      })
    }
  },
  created () {
    var _this = this
    _this.$i18n.locale = 'zh-hans'

    if (LocalStorage.has('openid')) {
      _this.openid = LocalStorage.getItem('openid')
      _this.activeTab = 'admin'
    } else {
      _this.openid = ''
      LocalStorage.set('openid', '')
    }
    if (LocalStorage.has('login_name')) {
      _this.login_name = LocalStorage.getItem('login_name')
    } else {
      _this.login_name = ''
      LocalStorage.set('login_name', '')
    }
    if (LocalStorage.has('auth')) {
      _this.authin = '1'
      _this.staffType()
    } else {
      LocalStorage.set('staff_type', 'Admin')
      _this.authin = '0'
      _this.isLoggedIn()
    }
  },
  mounted () {
    var _this = this
    _this.warehouseOptionsGet()
    _this.handleTimer()
    _this.link = localStorage.getItem('menulink')
    Bus.$on('needLogin', (val) => {
      _this.isLoggedIn()
    })

    _this.timer = setInterval(() => {
      _this.handleTimer();
    }, 100000);
  },
  // 修改时间 ：10000
  updated () {},
  beforeDestroy () {
    Bus.$off('needLogin')
  },
  destroyed () {},
  watch: {
    login (val) {
      if (val) {
        if (this.activeTab === 'admin') {
          this.admin = true
        } else {
          this.admin = false
        }
      }
    }
  }
}
</script>
<style>
.tabs .q-tab__indicator {
  width: 25%;
  height: 1.5px;
  margin: auto;
  color: #d6d7d7;
}

.tabs .absolute-bottom {
  bottom: 8px;
}

/* 基础定位 */
.menu-item-with-badge {
  position: relative;
}

.task-badge {
  /* 定位 */
  position: absolute;
  top: 12px;
  right: 12px;
  transform: translate(50%, -50%);

  /* 样式 */
  min-width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 2px;
  padding: 2px 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* 动画 */
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

/* 高优先级样式 */
.task-badge.high-priority {
  color: white !important;
  background: linear-gradient(145deg, #ff5252, #ff1744);
}

.outtask-badge {
  /* 定位 */
  position: absolute;
  bottom: -9px;
  right: 12px;
  transform: translate(50%, -50%);

  /* 样式 */
  min-width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 2px;
  padding: 2px 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* 动画 */
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

/* 高优先级样式 */
.outtask-badge.high-priority {
  color: white !important;
  background: linear-gradient(145deg, #982323, #ff1744);
}
</style>