irc_web/.svn/pristine/95/95f5095735779788cf27f5af15b591d075f36f72.svn-base

<template>
  <div class="role">
    <div ref="leftContainer" class="left">
      <el-form :inline="true">
        <el-form-item label="关键字">
          <el-input
            v-model="queryParams.SearchFilter"
            placeholder="请输入关键字"
            clearable
            size="small"
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.GroupId" placeholder="角色组" clearable size="small">
            <el-option
              v-for="item of dict.type.UserTypeGroup"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button v-hasPermi="['system:role:add']" type="primary" icon="el-icon-plus" size="mini" @click="handleAddRole">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" size="small" :data="list" class="table">
        <el-table-column type="index" width="50" />
        <el-table-column label="User Type" prop="UserTypeName" min-width="220" show-overflow-tooltip />
        <el-table-column label="Shortname" prop="UserTypeShortName" min-width="120" show-overflow-tooltip />
        <el-table-column label="Group" prop="Note" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.UserTypeGroupList.map(v => {return v.GroupName}).toString() }}
          </template>
        </el-table-column>
        <el-table-column label="PermissionStr" prop="PermissionStr" min-width="220" show-overflow-tooltip />
        <el-table-column label="Description" prop="Description" min-width="220" show-overflow-tooltip />
        <el-table-column label="Action" width="280">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['system:role:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEditRole(scope.row)"
            >Edit</el-button>
            <el-button
              v-hasPermi="['system:role:delete']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteRole(scope.row)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="right">
      <RoleMenu ref="roleMenu" />
    </div> -->
    <role-form v-if="model_cfg.visible" :data="editRow" @close="closeModal" />
  </div>
</template>
<script>
import { role_columns, model_cfg } from './role'
import { getUserTypeRoleList, deleteUserTypeRole } from '@/api/admin'
// import { getDictionary } from '@/api/dictionary/dictionary'
import RoleForm from './components/RoleForm'
import tableMixins from '@/mixins/table'

export default {
  name: 'Role',
  components: { RoleForm },
  dicts: ['UserTypeGroup'],
  mixins: [tableMixins],
  data() {
    return {
      role_columns,
      model_cfg,
      list: [],
      total: 0,
      loading: false,
      treeData: [],
      defaultProps: {
        label: 'MenuName',
        children: 'Children'
      },
      // 查询参数
      queryParams: {
        GroupId: undefined,
        SearchFilter: undefined
      },
      dialogVisible: false,
      editRow: {},
      expandedKeys: [],
      treeLoading: false,
      funcListLoading: false,
      funcList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getDictionary() {

    },
    getList() {
      this.loading = true
      getUserTypeRoleList(this.queryParams).then((res) => {
        this.loading = false
        this.list = res.Result
      }).catch(() => {
        this.loading = false
      })
    },
    handleAddRole() {
      this.editRow = {}
      this.model_cfg.visible = true
      this.model_cfg.title = 'Add'
    },
    handleEditRole(row) {
      this.editRow = row
      this.model_cfg.visible = true
      this.model_cfg.title = 'Edit'
    },
    // 分配权限，获取菜单树，并勾选已有菜单权限
    handlePermission(row) {
      // this.roleId = row.Id
      // this.$nextTick(function() {
      //   this.$refs['roleMenu'].getMenus(row.Id)
      // })
    },
    handleDeleteRole(row) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      }).then(() => {
        deleteUserTypeRole(row.Id).then((res) => {
          if (res.IsSuccess) {
            this.list.splice(this.list.findIndex((item) => item.Id === row.Id), 1)
            this.$message.success('Deleted successfully!')
          }
        })
      })
    },
    closeModal() {
      this.model_cfg.visible = false
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.role {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 10px;
  border-radius: 5px;
  .left {
    display: flex;
    flex-direction: column;
    width: 0;
    flex-grow: 4;
    // border-right: 1px solid #ccc;
    .filter-container {
      display: flex;
      align-items: center;
      margin: 5px;
    }
    .data-table {
      flex: 1;
      padding: 5px 0px;
    }
    .pagination-container {
      text-align: right;
    }
  }
  .right {
    width: 0;
    flex-grow: 6;
    overflow-y: auto;
    border-right: 1px solid #ccc;
  }
  .selected-row{
    background-color: cadetblue;
  }
}
</style>