框架调整

src/App.vue

@@ -43,12 +43,12 @@ export default {
   transition: color 0.2s ease;
 }
 /* 全局设置 element ui dialog水平垂直居中 */
-/* .el-dialog {
+.el-dialog {
   left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  top: 20%;
+  transform: translate(-50%, -20%);
   margin: 0px !important;
-} */
+}
 .el-dialog {
     border-radius: 8px;
 }

src/layout/components/Homebar.vue

@@ -9,7 +9,7 @@
           trigger="click">
           <div class="corp-switch">
             <div class="current-corp">sunny</div>
-            <el-button type="text" style="color: #00B899;">
+            <el-button type="text" style="color: #00B899;" @click="showProcessInstance()">
               <i class="el-icon-s-operation"></i>
               切换企业/团队
             </el-button>
@@ -120,6 +120,9 @@ export default {
     }
   },
   methods: {
+    showProcessInstance() {
+      this.$parent.showTeamWork();
+    },
     childMethod() {
         this.$parent.fatherMethod();
     },

src/views/index.vue

@@ -107,11 +107,7 @@
           </div>
         </div>
       </div>
-      <el-dialog
-        width="30%"
-        title="创建空白应用"
-        :visible.sync="innerVisible"
-        append-to-body>
+      <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>
@@ -126,24 +122,59 @@
         </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-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>
+          <el-button size="small" type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('创建')">
+            <span>创建企业/团队</span>
+          </el-button>
+          <!-- <div class="corp-wrapper">
+            <div class="corp-item is-owner">
+              <div class="corp-name" title="sunny">sunny</div>
+              <div class="corp-op">
+                <span class="op-current">当前所在企业/团队</span>
+              </div>
+            </div>
+          </div> -->
+        </div>
+        <div class="corp-block">
+          <div class="corp-desc">我加入的企业/团队</div>
+          <el-button size="small" 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="地址" v-show="form.type==1">
-            <el-input v-model="form.url" placeholder='应用访问地址，例如‘‘https://www.baidu.com/’’'></el-input>
+          <el-form-item label="邀请链接" prop="url" 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>
-        <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>
   </div>
 </template>
 
@@ -172,11 +203,21 @@ export default {
   },
   data() {
     return {
+      corpTitle:'',
       form: {
-        type:1,
+        type: 1,
         name: '',
         url: '',
       },
+      rules: {
+          name: [
+            { required: true, message: '请输入你的企业/团队名称', trigger: 'blur' },
+            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          url: [
+            { required: true, message: '请输入你的邀请链接', trigger: 'blur' },
+          ],
+      },
       // 遮罩层
       loading: false,
       // 列表
@@ -201,8 +242,10 @@ export default {
       src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
       dialogVisible: false,
       dialogVisibleApp: false,
-      innerVisible:false,
-      editVisible:false,
+      innerVisible: false,
+      editVisible: false,
+      teamWorkVisible: false,
+      joinOrCreateVisible:false,
     }
   },
   computed: {
@@ -216,20 +259,34 @@ export default {
 
   },
   methods: {
-    confirmAdd(){
+    joinOrCreateCorp(val){
+      this.corpTitle = val;
+      this.joinOrCreateVisible = true;
+    },
+    submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+    confirmAdd() {
       this.$confirm('确定添加此应用?', '添加应用', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '添加成功!'
-          });
-        }).catch(() => {
-                 
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '添加成功!'
         });
+      }).catch(() => {
+
+      });
     },
-    editApp(val){
+    editApp(val) {
       console.log(val);
       this.form.type = val.type;
       this.form.name = val.title;
@@ -254,18 +311,68 @@ export default {
     fatherMethod() {
       this.dialogVisible = true;
     },
+    showTeamWork() {
+      this.teamWorkVisible = true;
+    },
   }
 }
 </script>
-<style>
-
-</style>
+<style></style>
 <style lang="scss" scoped>
+.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;
+          .corp-name {
+              font-size: 18px;
+              font-weight: 700;
+             
+              flex: auto;
+              max-width: 350px;
+              overflow: hidden;
+              padding: 0 30px;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+          }
+          .corp-op {
+              flex: none;
+            .op-current {
+                color: #838892;
+                padding-right: 20px;
+            }
+          }
+      }
+    }
+    .corp-switch-btn {
+        text-align: center;
+        width: 100%;
+    }
+   
+  }
+}
+
 .scene-container {
   // max-height: 500px;
   height: 500px;
+
   .scene-wrapper {
     margin-bottom: -10px;
+
     .title-wrapper {
       align-items: center;
       display: flex;
@@ -291,6 +398,7 @@ export default {
         }
       }
     }
+
     .grid-row {
       margin-left: -10px;
       margin-right: -10px;