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

<template>
  <div style="display:inline">
    <el-button type="primary" size="mini" @click="onShow" icon="el-icon-thumb">授 权</el-button>
    <el-dialog class="auth-container" title="授权应用列表" append-to-body :visible.sync="dialogTableVisible" width="90%">
      <div class="flex-align-center normal-margin">
        <p style="width:50px">搜索:&nbsp;</p>
        <el-input style="width:250px" v-model="value" size="small" @keyup.native.enter="query_all_auth(param.content.where.condition = value)" @clear="query_all_auth(param.content.where.condition = '')" placeholder="应用名称" clearable></el-input>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-table
            :data="list"
            style="width: 100%"
            size="small"
            highlight-current-row
            border
            stripe
            :header-cell-style="{background:'#f1f2f3',color:'#333'}"
            @row-click="onRowClick">
            <el-table-column
              prop="systemclientname"
              label="端口">
            </el-table-column>
            <el-table-column
              prop="systemname"
              label="系统名称">
            </el-table-column>
            <el-table-column
              prop="systemmodulename"
              label="模块名称">
            </el-table-column>
            <el-table-column
              prop="systemappname"
              label="应用名称">
            </el-table-column>
          </el-table>
          <div style="margin:20px 0">
            <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="param.content.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <!-- 功能区域 -->
          <div>
            <el-button-group style="margin-bottom:10px">
              <el-button size="mini" type="primary" icon="el-icon-plus" :disabled="func_selection.length === 0" @click="insert_opt_hid_select">添加功能</el-button>
              <el-button size="mini" type="primary" icon="el-icon-plus" :disabled="field_selection.length === 0" @click="insert_opt_hid_select">添加隐藏字段</el-button>
            </el-button-group>
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
              <el-tab-pane label="功能添加" name="first">
                <el-table
                  ref="multipleTable"
                  :data="fun_list"
                  style="width: 100%"
                  size="mini"
                  stripe
                  :header-cell-style="{background:'#f1f2f3',color:'#333'}"
                  @selection-change="onFuncSelection">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="optionname"
                    label="功能描述">
                  </el-table-column>
                  <el-table-column
                    prop="option"
                    label="名称">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="隐藏字段添加" name="second">
                <!-- 隐藏字段区域 -->
                <el-table
                  ref="multipleTable2"
                  :data="hide_field_list"
                  style="width: 100%"
                  size="mini"
                  :header-cell-style="{background:'#f1f2f3',color:'#333'}"
                  @selection-change="onFieldSelection">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="fieldname"
                    label="字段描述">
                  </el-table-column>
                  <el-table-column
                    prop="field"
                    label="字段名">
                    <template slot-scope="scope">
                      <el-tag size="mini" type="primary" effect="dark">{{scope.row.field}}</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      dialogTableVisible:false,
      activeName:'first',
      param:{
        "classname": "webmanage.role.role",
        "method": "query_appselect",
        "content": {
            "pageNumber": 1,
            "pageSize": 10,
            "where":{
              "condition":"",
              "systemname":"",
              "systemagentname":"",
              "systemmodulename":"",
              "systemappname":""
            }
        }
      },
      list:[],
      total:0,
      currentPage:0,
      systemappid:0,
      fun_list:[],
      hide_field_list:[],
      func_selection:[],
      field_selection:[],
      value:'',
      row:''
    }
  },
  methods:{
    onShow () {
      console.log(this.$route.query)
      if (!this.$route.query.id) return this.$message({
        message:'请先保存角色信息',
        type:'error'
      })
      this.dialogTableVisible = true
      this.query_all_auth()
    },
    handleClick(val) {
      this.func_selection.length > 0 ? this.$refs.multipleTable.clearSelection():''
      this.field_selection.length > 0 ? this.$refs.multipleTable2.clearSelection():''
    },
    query_all_auth() {
      // this.param.content.roleid = this.data.roleid
      this.$api.requested(this.param).then(res=>{
        this.list = res.data        
        this.total = res.total
        this.currentPage = res.pageNumber
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.query_all_auth()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.query_all_auth()
    },
    onRowClick (row) {
      this.systemappid = row.systemappid
      this.query_function_list(row)
      this.query_field_list(row)
      this.row = row
    },
    query_function_list (row) {
      this.$api.requested({
        "classname": "webmanage.role.role",
        "method": "query_appoptionselect",
        "content": {
          "roleid":this.$route.query.id,
          "systemappid": row.systemappid
        }
      }).then(res=>{
        this.fun_list = res.data
        console.log(this.fun_list);
        
      })
    },
    query_field_list (row) {
      this.$api.requested({
        "classname": "webmanage.role.role",
        "method": "query_apphiddenfieldselect",
        "content": {
          "roleid":this.$route.query.id,
          "systemappid": row.systemappid
        }
      }).then(res=>{
        this.hide_field_list = res.data
        console.log(this.hide_field_list);
      })
    },
    onFuncSelection (selection) {
      this.func_selection = selection
    },
    onFieldSelection (selection) {
      this.field_selection = selection
    },
    insert_opt_hid_select () {
      let filterid =  (array,idname) => {
        let arr = []
        array.filter(e=>{
          arr.push(e[idname])
        })
        return arr
      }
      console.log(filterid(this.func_selection,'optionid'))
      this.$api.requested({"classname": "webmanage.role.role",
        "method": "add_appauth",
        "content": {
          "roleid":this.$route.query.id,
          "systemapps": [
            {
              "systemappid": this.systemappid,
              "optionids": this.func_selection.length > 0?filterid(this.func_selection,'optionid'):[],
              "hiddenfields":this.field_selection.length > 0?filterid(this.field_selection,'hiddenfieldid'):[]
            }
          ]
        }
      }).then(res=>{
        if (res.code === 1) {
          this.$notify({
            title: '成功',
            message: this.activeName === 'first'?'功能授权成功':'设置成功',
            type: 'success'
          });
          this.query_function_list(this.row)
          this.$emit('onSuccess')
        } else {
          this.$notify({
            title: '失败',
            message: res.data,
            type: 'error'
          });
        }
      })
    }
  }
}

</script>
<style>
.auth-container .el-tabs--border-card{
  box-shadow: none !important;
}
.auth-container .el-tabs--border-card>.el-tabs__content{
  padding: 0;
}
</style>