yos_web/src/HManagement/roleManage/modules/role_details.vue

<template>
  <div>
    <div class="container normal-panel mb-16">
      <el-button v-if="tool.checkAuth($route.name,'update')" size="small" icon="el-icon-edit" @click="$router.replace({path:'/roleEdit',query:{id:roleid}})">编 辑</el-button>
      <onDel v-if="tool.checkAuth($route.name,'delete')" :data="{roleid:roleid}"></onDel>
    </div>
    <div class="container normal-panel mb-16">
      <p class="normal-title mb-16">角色信息</p>
      <el-row>
        <el-form :inline="true" :model="form" ref="form" size="small" label-position="left" class="demo-form-inline">
          <el-col :span="8">
            <el-form-item label="角色名称:">
              <!-- <el-input v-model="form.rolename" placeholder="输入角色名称"></el-input> -->
              <p>{{form.rolename}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色描述:">
              <!-- <el-input v-model="form.remarks" placeholder="输入角色描述"></el-input> -->
              <p>{{form.remarks}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色类型:">
              <p>{{form.usertypename}}</p>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="container normal-panel mb-16">
      <p class="normal-title mb-16">角色授权</p>
      <el-row :gutter="20">
        <el-col :span="12">
          <tableLayout :layout="tablecols" :data="roleMainInfo.apps" height="500px" :custom="false" @rowClick="appoptionselect">
          </tableLayout>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="40">
            <el-col :span="12">
              <p class="title">功能</p>
              <div class="flex-align-center flex-between option-item" v-for="item in appoptions" :key="item.index">
                <p>{{item.optionname}}</p>
              </div>
            </el-col>
            <el-col :span="12">
              <p class="title">隐藏字段</p>
              <div class="flex-align-center flex-between option-item" v-for="item in hiddenfields" :key="item.index">
                <p>{{item.fieldname}}</p>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import onDel from './delete_role.vue'
export default {
  components:{
    onDel
  },
  data () {
    return{
      form:{
        "roleid":0,
        "rolename":"",
        "remarks":""
      },
      roleMainInfo:{},
      tablecols:[],
      appoptions:[],
      hiddenfields:[],
      roleid:0,
      active_systemappid:''
    }
  },
  created() {
  },
  methods:{
    async roleMain () {
      const res = await this.$api.requested({
        "classname": "webmanage.role.role",
        "method": "query_roleMain",
        "content": {
            "roleid":this.roleid
        }
      })
      this.form = {
        "roleid":res.data.roleid,
        "rolename":res.data.rolename,
        "remarks":res.data.remarks,
        "usertype":res.data.usertype,
        "usertypename":res.data.usertypename
      }
      this.roleMainInfo = res.data
      
      //显示默认授权信息,一般默认信息为第一条数据
      this.appoptionselect(res.data.apps[0])
    },
    async appoptionselect (row) {
      this.active_systemappid = row.systemappid
      this.appoptions = row.options
      this.hiddenfields = row.hiddenfields
    },
  },
  mounted () {
    // 获取应用表结构
    this.tablecols = this.tool.tabelCol(this.$route.name).detailsAppsTable.tablecols

    this.roleid = this.$route.query.id
    this.roleid !== '0'?this.roleMain():''
  }
}

</script>
<style>
</style>
<style scoped>
.mb-16{
  margin-bottom:16px
}
.title{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-indent: 7px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  border-left: 4px solid #3874F6;
}
.option-item{
  color:#333333;
  font-size: 14px;
  border-bottom:1px solid #f1f2f3;
  line-height: 35px;
}
</style>