<!--
  @description: 系统设置->角色管理
  @author: change by zhangfan
  @routerPath: /sysetemSettings/roleManageList
  @date:  2020/5/9-16:39
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />角色管理
    </div>
    <!--查询-->
    <section class="crud_menu_title p0-16 clearfix">
      <span class="icon-line fl">查询条件</span>
    </section>
    <div class="p0-16 clearfix">
      <div class="SearchContent_leftInput fl">
        <el-form :model="listQuery" inline style="min-width:500px">
          <el-form-item label="角色名称">
            <el-input
              v-model="listQuery.roleName"
              style="width:268px"
              class="filter-item"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <el-form-item label="角色编码">
            <el-input
              v-model="listQuery.roleCode"
              style="width:268px"
              class="filter-item"
              placeholder="请输入角色编码"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="searchCont">
          搜索
        </el-button>
        <el-button plain type="info" @click="resetForm('listQuery')">
          重置
        </el-button>
      </div>
    </div>
    <!--查询结果  表格-->
    <section class="crud_menu_title p0-16 clearfix">
      <span class="icon-line fl">查询结果</span>
    </section>
    <div style="margin-left: 18px">
      <el-button type="primary" @click="handleCreate">
        <i class="el-icon-plus" /> 新增
      </el-button>
      <!--<el-button plain type="danger" @click="handleBatchDelete"><i class="el-icon-delete"/> 删除</el-button>-->
      <!-- <el-button class="powerBtn" plain @click="roleManagePowerDialog.dialog=true"><i class="el-icon-setting"/> 权限设置</el-button>-->
    </div>
    <div class="main" style="margin-top: 20px">
      <el-table
        ref="smallTable"
        :data="tableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        width="100%"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column align="center" label="角色名称">
          <template slot-scope="scope">
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色编码">
          <template slot-scope="scope">
            <span>{{ scope.row.roleCode }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否可用">
          <template slot-scope="scope">
            <span>{{ scope.row.roleType == 1 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click.stop="handleUpdate(scope.row)">
              [编辑]
            </el-link>
            <el-link type="primary" @click.stop="handleDelete(scope.row)">
              [删除]
            </el-link>
            <el-link
              type="primary"
              style="width: 90px;"
              @click="goPowerDialog(scope.row)"
            >
              [设置权限]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <pagination :pagination-data="paginationData" @change="togglePage" />
    <!--新建，编辑弹窗-->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :modal="true"
      :lock-scroll="false"
      :title="textMap[dialogStatus]"
      width="600px"
      custom-class="el-dialog__body-p0"
    >
      <section class="tools p0-16 pt16 clearfix">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          :inline-message="true"
        >
          <div class="block">
            <table class="from_table">
              <tr>
                <td>
                  <el-form-item label="角色名称" prop="roleName" />
                </td>
                <td>
                  <el-input v-model="formData.roleName" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="角色编码" prop="roleCode" />
                </td>
                <td>
                  <el-input v-model="formData.roleCode" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="是否可用" prop="roleType" />
                </td>
                <td>
                  <el-radio-group v-model="formData.roleType">
                    <el-radio label="1">
                      是
                    </el-radio>
                    <el-radio label="0">
                      否
                    </el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="备注" prop="remarks" />
                </td>
                <td>
                  <el-input
                    v-model="formData.remarks"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </td>
              </tr>
            </table>
          </div>
          <!--操作按钮-->
          <div class="but_footer" style="text-align: center;margin:30px 0 50px 0">
            <el-button v-if="dialogStatus == 'create'" type="primary" @click="addRole">
              确定
            </el-button>
            <el-button v-else type="primary" @click="updateData">
              确定
            </el-button>
            <el-button type="primary" @click="dialogFormVisible=false">
              取消
            </el-button>
          </div>
        </el-form>
      </section>
    </el-dialog>
    <!--权限配置-->
    <roleManagePowerDialog v-if="isShow==true" :dialog-data="roleManagePowerDialog" :role-id="roleId" @cancelDialog="cancelDialog" />
  </div>
</template>

<script>
import { getRoleList, addRole, updateRole, deleteRole } from '@api/common/roleManage'
import pagination from '@comp/common/pagination/pagination' // 分页
import { validatorCode } from '@/assets/js/validate' // 校验方法
import roleManagePowerDialog from './roleManage-powerDialog' // 权限弹窗
export default {
  name: 'RoleManageList',
  components: {
    pagination,
    roleManagePowerDialog
  },
  data() {
    return {
      listQuery: {
        // 筛选传的参数
        roleName: '', // 角色名称
        roleCode: '', // 角色编号
        page: 1, // 当前页
        pageSize: 10 // 每页显示的个数
      },
      dialogFormVisible: false, // 新增编辑弹窗
      dialogStatus: '', // 新增编辑弹窗显示的状态
      textMap: {
        update: '编辑角色',
        create: '添加角色'
      },
      formData: {
        // 新增和编辑传的参数
        id: '',
        roleName: '', // 角色名称
        roleCode: '', // 角色编码
        roleType: '1', // 是否可用
        remarks: '' // 备注
      },
      rules: {
        // 校验
        roleCode: [
          { required: true, validator: validatorCode, trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '不为空', trigger: 'blur' }
        ],
        roleType: [{ required: true, message: '是否可用必选', trigger: 'blur' }]
      },
      //  权限弹窗
      roleManagePowerDialog: {
        dialog: false
      },
      paginationData: {
        pageNo: 1, // 当前页
        pageSize: 10, // 每页显示的个数
        total: 0 // 总记录条数
      },
      tableData: [], // 获取角色数据
      multipleSelection: [], // 多选
      roleId: '', // 权限管理弹窗传的id
      isShow: false // 控制权限组件显隐
    }
  },
  created() {
    this.getRolelist()
  },
  methods: {
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取角色列表
    getRolelist() {
      const params = {
        'pageNo': this.paginationData.pageNo, // 当前页
        'pageSize': this.paginationData.pageSize, // 每页显示的个数
        'roleCode': this.listQuery.roleCode, // 角色编码
        'roleName': this.listQuery.roleName // 角色名称
      }
      getRoleList(params).then(res => {
        this.tableData = res.data.results
        this.paginationData.total = res.data.total // 总个数
      }).catch(error => {
        console.log(error)
      })
    },
    // 搜索数据
    searchCont() {
      this.paginationData.pageNo = 1 // 当前页
      this.paginationData.pageSize = 10 // 每页显示的个数
      this.getRolelist()
    },
    // 重置
    resetForm() {
      Object.keys(this.listQuery).forEach(val => {
        this.listQuery[val] = '' // 参数置空
      })
      this.listQuery.pageNo = 1 // 当前页
      this.listQuery.pageSize = 10 // 每页显示的个数
      this.getRolelist()
    },
    // 新增角色，打开弹窗
    handleCreate() {
      this.dialogStatus = 'create' // 弹窗标题改成新建
      this.dialogFormVisible = true // 打开弹窗
      this.$nextTick(() => {
        this.$refs['formData'].clearValidate()
      })
    },
    addRole() {
      // 新增的确定（调用接口）
      this.$refs['formData'].validate(valid => {
        if (valid) {
          addRole(this.formData).then(() => {
            this.dialogFormVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getRolelist() // 重新加载数据列表
            this.resetFormData() // 初始化表单
          })
        }
      })
    },
    handleUpdate(row) {
      // 编辑  打开弹窗合并新旧内容
      this.formData = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update' // 弹窗标题改成编辑
      this.dialogFormVisible = true // 打开弹窗
      this.$nextTick(() => {
        this.$refs['formData'].clearValidate()
      })
    },
    updateData() {
      // 点击编辑确定（调接口）
      this.$refs['formData'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.formData)
          updateRole(tempData).then(() => {
            this.dialogFormVisible = false // 关闭弹窗
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getRolelist()
          })
        }
      })
    },
    resetFormData() {
      // 清空表单
      this.formData = {
        id: '',
        roleName: '',
        roleCode: '',
        roleType: '1',
        remarks: ''
      }
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确认要删除角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteRole(row.id).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getRolelist()
        })
      })
    },
    // 批量删除
    /* handleBatchDelete() {
      const params = {
        'ids': ''
      }
      const IdArray = []
      this.multipleSelection.filter(item => {
        IdArray.push(item.id)
      })
      params.ids = IdArray.join(',')
      batchDeleteRole(params).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getRolelist()
      }).catch(err => {
        console.log(err)
      })
    },*/
    // 权限管理弹窗
    goPowerDialog(row) {
      this.isShow = true // 显示弹窗组件
      this.roleId = row.id // 给弹窗组件传id
      this.roleManagePowerDialog.dialog = true // 打开弹窗
    },
    // 分页点击切换页面
    togglePage() {
      this.getRolelist()
    },
    // 关闭权限弹窗
    cancelDialog(val) {
      this.roleManagePowerDialog.dialog = val
      this.getRolelist()
    }
  }
}
</script>

<style scoped>
</style>

