<template>
  <div class="powerEdit">
    <div class="bread ">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <h3>新建角色</h3>
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="最多输入20个字符" type="textarea" maxlength="20" style="width:400px"></el-input>
        </el-form-item>
      </el-form>
      <div class="flex power">
        <div>权限</div>
        <el-tree 
          :data="data" 
          :default-expanded-keys="[2, 3]" 
          :default-checked-keys="[5]" 
          :props="defaultProps"
          show-checkbox 
          node-key="id">
        </el-tree>
      </div>
      <div class="button">
        <el-button style="margin-right:50px" @click="back">取消</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'powerEdit',
  data() {
    return {
      form: {
        name: '',
        remark: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }]
      },
      data: [{
        id: 1,
        label: '首页'
      }, {
        id: 2,
        label: '采购商管理',
        children: [{
          id: 3,
          label: '采购商列表'
        }, {
          id: 4,
          label: '待审批采购商'
        }, {
          id: 5,
          label: '用户信息管理'
        }, {
          id: 6,
          label: '平台交货列表'
        }, {
          id: 7,
          label: '采购商权限管理'
        }
        ]
      }, {
        id: 8,
        label: '供应商管理',
        children: [{
          id: 9,
          label: '供应商列表'
        }, {
          id: 10,
          label: '待审批供应商'
        }, {
          id: 11,
          label: '用户信息管理'
        }, {
          id: 12,
          label: '供应商权限管理'
        }]
      }, {
        id: 13,
        label: '找投标管理',
        children: [{
          id: 11,
          label: '招标项目列表'
        }, {
          id: 12,
          label: '询价公告列表'
        }, {
          id: 13,
          label: '招标公告列表'
        }, {
          id: 14,
          label: '投标邀请书列表'
        }, {
          id: 15,
          label: '中标候选人公示列表'
        }, {
          id: 16,
          label: '中标公告列表'
        }, {
          id: 17,
          label: '变更公告列表'
        }, {
          id: 18,
          label: '流标公告列表'
        }, {
          id: 19,
          label: '供应商中标统计'
        }]
      }, {
        id: 20,
        label: '费用管理',
        children: [{
          id: 21,
          label: '标书费缴纳管理'
        }, {
          id: 22,
          label: '投标保证金缴纳管理'
        }]
      }, {
        id: 23,
        label: '基础信息管理',
        children: [{
          id: 24,
          label: '营销位管理'
        }, {
          id: 25,
          label: '客服设置'
        }]
      }, {
        id: 26,
        label: '信息公告管理',
        children: [{
          id: 27,
          label: '信息公告列表'
        }, {
          id: 28,
          label: '分类管理'
        }]
      }, {
        id: 29,
        label: '系统管理',
        children: [{
          id: 30,
          label: '用户管理'
        }, {
          id: 31,
          label: '权限管理'
        }, {
          id: 31,
          label: '日志列表'
        }, {
          id: 31,
          label: '邮件发送'
        }, {
          id: 31,
          label: '短信发送'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    back() {
      this.$router.go(-1); s
    }
  }
}
</script>

<style scoped>
	.powerEdit h3 {
		margin: 10px 0;
	}

	.power {
		margin-left: 50px;
		margin-top: 30px;
	}
	.button{
		margin-left:200px;
		margin-top:50px
	}
</style>

