yudao-ui-saas/src/mayout/index.vue

<template>
  <div class="app-wrapper">
    <div class='fixed-header'>
      <homebar />
    </div>
    <section class="app-main">
      <transition name="fade-transform" mode="out-in">
        <router-view />
      </transition>
    </section>
    <el-dialog width="30%" title="联系我们" :visible.sync="dialogVisible">
      <img width="100%" src="@/assets/images/wx.jpg" alt="">
    </el-dialog>
    <el-dialog width="30%" title="切换企业/团队" :visible.sync="teamWorkVisible">
      <div class="switch-corp-pane">
        <div class="corp-block">
          <div class="corp-desc">我创建的企业/团队</div>
          <div class="corp-wrapper" v-for="(item, index) in myTeamList" :key="index" @mouseover="showMyTeam = index"
            @mouseleave="showMyTeam = null">
            <div class="corp-item">
              <div class="corp-name" :class="{ 'is-owner': item.actived }" :title="item.name">{{ item.name }}</div>
              <div class="corp-op">
                <span class="op-current" v-show="item.actived">当前所在企业/团队</span>
                <el-button v-show="!item.actived && showMyTeam == index" type="text" class="style-text"
                  @click.stop="changeTeam(item)">
                  <span>进入企业/团队<i class="el-icon-right"></i></span>
                </el-button>
              </div>
            </div>
          </div>
          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('创建')">
            <span>创建企业/团队</span>
          </el-button>

        </div>
        <div class="corp-block" style="margin-top: 10px;">
          <div class="corp-desc">我加入的企业/团队</div>

          <div class="corp-wrapper" v-for="(item, index) in joinTeamList" :key="index" @mouseover="showJoinTeam = index"
            @mouseleave="showJoinTeam = null">
            <div class="corp-item">
              <div class="corp-name" :title="item.name">{{ item.name }}</div>
              <div class="corp-op">
                <span class="op-current" v-show="item.actived">当前所在企业/团队</span>
                <el-button v-show="!item.actived && showJoinTeam == index" type="text" class="style-text"
                  @click.stop="changeTeam(item)">
                  <span>进入企业/团队<i class="el-icon-right"></i></span>
                </el-button>
              </div>
            </div>
          </div>
          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('加入')">
            <span>加入企业/团队</span>
          </el-button>
        </div>
      </div>
      <el-dialog width="30%" :title="corpTitle + '企业/团队'" :visible.sync="joinOrCreateVisible" append-to-body>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-position="top" label-width="80px" size="small">
          <el-form-item label="企业/团队名称" prop="name" v-if="corpTitle == '创建'">
            <el-input v-model="form.name" placeholder='请输入你的企业/团队名称'></el-input>
          </el-form-item>
          <el-form-item label="邀请码" prop="tenantId" v-if="corpTitle == '加入'">
            <el-input v-model="form.tenantId" placeholder='请输入你的邀请码'></el-input>
          </el-form-item>
          <el-button size="small" type="primary" style="text-align: center;width: 100%;margin-top: 10px;"
            @click="submitForm('ruleForm')">
            <span v-if="!loading"> {{ corpTitle }}</span>
            <span v-else> {{ corpTitle }}中...</span>
          </el-button>
        </el-form>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {setTenantId} from "@/utils/auth";
import { createTenant, joinTenant, getOwnCreateTenants, getOwnJoinTenants } from "@/api/system/tenant";
import store from '@/store'
import Homebar from '@/layout/components/Homebar'

export default {
  name: 'Mayout',
  components: {
    Homebar,
  },
  data() {
    return {
      loading: false,
      showMyTeam: null,
      myTeamList: [],
      showJoinTeam: null,
      joinTeamList: [],
      corpTitle: '',
      form: {
        type: 1,
        name: '',
        tenantId: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入你的企业/团队名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请输入你的邀请码', trigger: 'blur' },
        ],
      },
      dialogVisible: false,
      teamWorkVisible: false,
      joinOrCreateVisible: false,
    }
  },
  computed: {
    ...mapGetters([
      'tenantId',
    ]),
  },
  created() {
    this.getOwnJoinTenantList();
    this.getOwnCreateTenantList();
  },
  methods: {
    // 获取我加入的租户列表
    getOwnJoinTenantList() {
      getOwnJoinTenants().then(response => {
        this.joinTeamList = response.data;
      })
    },
    // 获取我创建的租户列表
    getOwnCreateTenantList() {
      getOwnCreateTenants().then(response => {
        this.myTeamList = response.data;
      })
    },
    //切换企业
    changeTeam(val) {
      console.log(val);
      store.dispatch("ChangeTenant", val).then(() => {
        this.$modal.msgSuccess("切换成功");
        setTenantId(val.id)
        setTimeout(() => {
          location.reload()
        }, 1500)
        .catch(() => {});
      })
      .catch(() => {});
    },
    joinOrCreateCorp(val) {
      this.corpTitle = val;
      this.joinOrCreateVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          console.log(this.form);
          if (this.corpTitle == '创建') {
            createTenant({ status: 0, name: this.form.name }).then(response => {
              this.$modal.msgSuccess("创建成功");
              this.loading = false;
              this.joinOrCreateVisible = false;
              this.getOwnJoinTenantList();
              this.getOwnCreateTenantList();  
            });
            
          }
          else {
            joinTenant({ corpId: this.form.tenantId }).then(response => {
              this.$modal.msgSuccess("加入成功");
              this.loading = false;
              this.joinOrCreateVisible = false;
              this.getOwnJoinTenantList();
              this.getOwnCreateTenantList();  
            });
           
          }
        } else {
          this.loading = false;
          console.log('error submit!!');
          return false;
        }
      });
    },
    fatherMethod() {
      this.dialogVisible = true;
    },
    showTeamWork() {
      this.teamWorkVisible = true;
    },
  }
}
</script>
<style>
.el-drawer__header {
  color: black;
  font-size: 20px;
  font-weight: 500;
}

.el-drawer__open .el-drawer.btt {
  height: auto !important;
  top: 45px;
}
</style>
<style lang="scss" scoped>
.el-empty {
  padding: 10px 0 !important;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  transition: width 0.28s;
}

.app-main {
  background: #f5f6f8;
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 60px;
  padding: 32px;
}

.switch-corp-pane {
  min-height: 400px;

  .corp-block {
    .corp-desc {
      color: #525967;
      margin-bottom: 10px;
    }

    .corp-wrapper {
      border-radius: 4px;
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
      margin-bottom: 12px;
      max-height: 200px;
      overflow: auto;

      .corp-item {
        align-items: center;
        display: flex;
        height: 50px;
        justify-content: space-between;
        line-height: 50px;

        .is-owner {
          font-size: 18px;
          font-weight: 700;
        }

        .corp-name {
          flex: auto;
          max-width: 350px;
          overflow: hidden;
          padding: 0 30px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .corp-op {
          flex: none;

          .style-text {
            padding: 0 16px;
          }

          .op-current {
            color: #838892;
            padding-right: 20px;
          }
        }
      }
    }

    .corp-switch-btn {
      text-align: center;
      width: 100%;
    }

  }
}
</style>