|
@@ -0,0 +1,375 @@
|
|
|
|
|
+<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="50%" title="新建应用" :visible.sync="dialogVisibleApp">
|
|
|
|
|
+ <div class="scene-container">
|
|
|
|
|
+ <div class="scene-wrapper">
|
|
|
|
|
+ <!-- <div class="title-wrapper">
|
|
|
|
|
+ <div class="icon-text">
|
|
|
|
|
+ <i class="el-icon-thumb title-icon"></i>
|
|
|
|
|
+ <span class="title-text">猜你想要</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ <div class="grid-row">
|
|
|
|
|
+ <div class="grid-col">
|
|
|
|
|
+ <div class="card-item create-blank-app" @click="innerVisible = true">
|
|
|
|
|
+ <i class="el-icon-plus create-icon"></i>
|
|
|
|
|
+ <div class="create-text">创建空白应用</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="grid-col">
|
|
|
|
|
+ <div class="card-item scene-item" @click="confirmAdd()">
|
|
|
|
|
+ <img src="https://g.jdycdn.com/app/pc/fc125acb88ce.png">
|
|
|
|
|
+ <div class="item-info">
|
|
|
|
|
+ <div class="item-title">任务</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-dialog width="30%" title="创建空白应用" :visible.sync="innerVisible" append-to-body>
|
|
|
|
|
+ <el-form :model="form" label-position="top" label-width="80px" size="small">
|
|
|
|
|
+ <el-form-item label="名称">
|
|
|
|
|
+ <el-input v-model="form.name" placeholder='给应用命名,例如‘‘客户管理系统’’'></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="地址">
|
|
|
|
|
+ <el-input v-model="form.url" placeholder='应用访问地址,例如‘‘https://www.baidu.com/’’'></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
|
+ <el-button @click="innerVisible = false" size="small">取 消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="innerVisible = false" size="small">确 定</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ <el-dialog width="30%" title="编辑" :visible.sync="editVisible">
|
|
|
|
|
+ <el-form :model="form" label-position="top" label-width="80px" size="small">
|
|
|
|
|
+ <el-form-item label="名称">
|
|
|
|
|
+ <el-input v-model="form.name" placeholder='给应用命名,例如‘‘客户管理系统’’'></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="地址" v-show="form.type == 1">
|
|
|
|
|
+ <el-input v-model="form.url" placeholder='应用访问地址,例如‘‘https://www.baidu.com/’’'></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
|
+ <el-button type="danger" @click="editVisible = false" size="small" style="float: left;">删 除</el-button>
|
|
|
|
|
+ <el-button @click="editVisible = false" size="small">取 消</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="editVisible = false" size="small">确 定</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </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')">
|
|
|
|
|
+ {{ corpTitle }}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ <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.url" placeholder='请输入你的邀请码'></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-button size="small" type="primary" style="text-align: center;width: 100%;margin-top: 10px;"
|
|
|
|
|
+ @click="submitForm('ruleForm')">
|
|
|
|
|
+ {{ corpTitle }}
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+
|
|
|
|
|
+ <el-drawer
|
|
|
|
|
+ title="消息管理"
|
|
|
|
|
+ :visible.sync="messageTable"
|
|
|
|
|
+ direction="btt"
|
|
|
|
|
+ size="50%">
|
|
|
|
|
+ <message-table/>
|
|
|
|
|
+ </el-drawer>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
|
+import { createTenant, joinTenant,getOwnCreateTenants,getOwnJoinTenants } from "@/api/system/tenant";
|
|
|
|
|
+import store from '@/store'
|
|
|
|
|
+import Homebar from '@/layout/components/Homebar'
|
|
|
|
|
+import MessageTable from '@/components/MessageTable'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'Mayout',
|
|
|
|
|
+ components: {
|
|
|
|
|
+ Homebar,
|
|
|
|
|
+ MessageTable
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ 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,
|
|
|
|
|
+ dialogVisibleApp: false,
|
|
|
|
|
+ innerVisible: false,
|
|
|
|
|
+ editVisible: false,
|
|
|
|
|
+ teamWorkVisible: false,
|
|
|
|
|
+ joinOrCreateVisible: false,
|
|
|
|
|
+ messageTable: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.$router.push({ path: "/" }).catch(() => {
|
|
|
|
|
+ });
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ joinOrCreateCorp(val) {
|
|
|
|
|
+ this.corpTitle = val;
|
|
|
|
|
+ this.joinOrCreateVisible = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ submitForm(formName) {
|
|
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
|
|
+ if (valid) {
|
|
|
|
|
+ console.log(this.form);
|
|
|
|
|
+ if(this.corpTitle=='创建'){
|
|
|
|
|
+ createTenant({status:0,name:this.form.name}).then(response => {
|
|
|
|
|
+ this.$modal.msgSuccess("创建成功");
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ else{
|
|
|
|
|
+ joinTenant({tenantId:this.form.tenantId}).then(response => {
|
|
|
|
|
+ this.$modal.msgSuccess("加入成功");
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.joinOrCreateVisible = false;
|
|
|
|
|
+ this.getOwnJoinTenantList();
|
|
|
|
|
+ this.getOwnCreateTenantList();
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log('error submit!!');
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ confirmAdd() {
|
|
|
|
|
+ this.$confirm('确定添加此应用?', '添加应用', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ }).then(() => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: '添加成功!'
|
|
|
|
|
+ });
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ editApp(val) {
|
|
|
|
|
+ console.log(val);
|
|
|
|
|
+ this.form.type = val.type;
|
|
|
|
|
+ this.form.name = val.title;
|
|
|
|
|
+ this.form.url = val.path;
|
|
|
|
|
+ this.editVisible = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ openAppList() {
|
|
|
|
|
+ this.dialogVisibleApp = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ 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>
|