<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>新建角色</h3>
      <h5>新建角色</h5>
    </div>
    <div class="content">
      <div class="message">
        <div>角色名称：项目经理</div>
        <div>备注：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
        <div class="flex">
          <div>权限</div>
          <el-tree :data="data" :props="defaultProps" show-checkbox node-key="id">
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
export default {
  components: {
    dataBreadcrumb
  },
  data() {
    return {
      breads: ['系统管理', '权限管理'],
      data: [{
        id: 1,
        label: '首页',
        children: [{
          id: 4,
          label: '招标管理',
          children: [{
            id: 9,
            label: '招标项目管理'
          }]
        }]
      }, {
        id: 2,
        label: '平台交货管理',
        children: [{
          id: 5,
          label: '平台交货列表'
        }]
      }, {
        id: 3,
        label: '供应商管理',
        children: [{
          id: 7,
          label: '供应商列表'
        }, {
          id: 8,
          label: '我的供应商'
        }]
      }, {
        id: 10,
        label: '组织管理',
        children: [{
          id: 11,
          label: '单位信息'
        }, {
          id: 12,
          label: '成员管理'
        }, {
          id: 13,
          label: '权限管理'
        }]
      }, {
        id: 14,
        label: '系统管理',
        children: [{
          id: 15,
          label: '绑定CA'
        }, {
          id: 16,
          label: '日志列表'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {

  }

}
</script>


<style scoped>
	.message {
		width: 60%;
		margin-left: 50px;
		margin-top: 20px;
	}

	.message>div {
 margin-bottom: 30px;
	}
</style>
