ccs-layout-ui

ccs-layout-ui 是项目工程的一个公用组件，包含开发
登录界面、
头部信息、
侧边栏、
tab-view
和封装 CcsLogOut 外部方法供退出操作使用

ccs-layout-ui 引入 main.js引入

import Vue from 'vue'
import App from './App'

import CcsLayout from 'ccs-layout-ui'
Vue.use(CcsLayout)
...

登录组件

登录组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <login title="登录标题" :submit="handleLogin"></login>
</template>
<script>
export default {
  methods: {
    /**
     * @params data 表单参数
     * @function callback 按钮loading回调函数
     */
    handleLogin(data, callback) {
      // 登录操作
    }
  },
  created () {

  },
}
</script>

头部信息组件

头部信息组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <headerTop
      :applicationCode="appCode"
      :cookieCode="TokenKey"
      :personalCenterMenu="extendTemConfig"
      :apiHttpUrl="httpUrl">
      <div slot="tenantDashboard1">
        这是AA应用注入1对应的内容模块
      </div>
      <div slot="tenantDashboard2">
        这是AA应用注入2对应的内容模块
      </div>
    </headerTop>
</template>

<script >
export default {
    data() {
        return {
            TokenKey: 'token',
            extendTemConfig: [
                { //如果需要在个人中心左侧动态扩展选项时
                    id: 'tenantDashboard1',
                    label: 'AA应用注入1',
                },
                {
                    id: 'tenantDashboard2',
                    label: 'AA应用注入2',
                }
            ],
            appCode: 'BASIC_APPLICATION',//应用的code
            httpUrl: "http://loclhost/admin", //用于用户数据 auth删除token等请求的api
        }
    }
}
</script>

侧边栏组件

侧边栏组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
      <sideBar :menuRoutes="menuRoutes" @select="select"></sideBar>
</template>
<script >
export default {
    data() {
        return {
            menuRoutes: [...],
        }
    },
    methods: {
        /**
         * @params path 当前路径
         * @function paths 选中到菜单组
         */
        select(path, paths) {
          console.error(path, paths)
        }
    }
}
</script>

tab-view组件

tab-view组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <tags-view></tags-view>
</template>

CcsLogOut方法调用

CcsLogOut 方法注册全局和window上。

具体使用如下：

CcsLogOut()
// 或者
this.CcsLogOut()

具体参数

• 头部组件headerTop 基本参数

参数|描述|类型|默认值 ---|:---:|:---:|---: applicationCode|当前应用的应用code|String|— cookieCode|保存在cookie中的cookie键名，用于获取该存储的cookie|String|— apiHttpUrl|接口网关地址|String|- personalCenterMenu|个人中心菜单，配合slot使用|Array|-

• 登录组件 login 基本参数

参数|描述|类型|默认值 ---|:---:|:---:|---: cookieCode|获取cookie的key|String|— apiHttpUrl|登录接口的网关地址|String|— title|登录界面标题|String|通福云开发户环境登录 submit|数据提交回调方法，submit存在tokeneName和loginUrl传过来无意义|Function|-

• 侧边栏 sidbar 基本参数

参数|描述|类型|默认值 ---|:---:|:---:|---: menuRoutes|菜单列表|Array|— router|是否开启菜单路由|Boolean|true select|侧边栏选择后，返回两个参数均为路径|Function|-

• menuRoutes 属性

参数|描述|类型|默认值 ---|:---:|:---:|---: path|路由地址|String|- name|标题|String|- icon|图标|String|- children|子集|Array|- meta|描述信息|Object|- hidden|是否隐藏|Boolean|- meta-node|el-menu的index|String|-