<template>
  <div>
    <el-card>
      <div class="filter">
        菜单名称:
        <el-input v-model="queryModuleInfo.menuName" clearable placeholder="请输入菜单名称" style="width: 300px;">
        </el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="addPermissionDialog=true"
          v-permission="('role:permission:add')">新增</el-button>
      </div>
      <el-table :data="permissionList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="permissionName" label="权限名称" width="200px"></el-table-column>
        <el-table-column prop="permissionCode" label="权限编码" width="200px"></el-table-column>
        <el-table-column prop="menuName" label="菜单名称" width="200px"></el-table-column>
        <el-table-column prop="menuCode" label="菜单路径" width="200px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="openPermissionDialog(scope.row)"
              v-permission="('role:permission:edit')">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delPermissionFrom(scope.row)"
              v-permission="('role:permission:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
        layout="total, prev, pager, next" :total="totalNum">
      </el-pagination>
    </el-card>
    <!-- 添加权限对话框 -->
    <el-dialog title="添加权限" :visible.sync="addPermissionDialog" width="30%" @close="closeAddDialog">
      <el-form ref="addPermissionFormRef" :rules="rules" :model="addPermissionForm" label-width="90px">
        <el-form-item label="权限名称:" prop="permissionName" style="width:350px">
          <el-input v-model="addPermissionForm.permissionName"></el-input>
        </el-form-item>
        <el-form-item label="权限编码:" prop="permissionCode" style="width:350px">
          <el-input v-model="addPermissionForm.permissionCode"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称:" prop="menuName" style="width:350px">
          <el-input v-model="addPermissionForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径:" prop="menuCode" style="width:350px">
          <el-input v-model="addPermissionForm.menuCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPermissionDialog=false">取 消</el-button>
        <el-button type="primary" @click="addPermissionFrom">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑权限对话框 -->
    <el-dialog title="添加权限" :visible.sync="editPermissionDialog" width="30%">
      <el-form ref="editPermissionFormRef" :rules="rules" :model="editPermissionForm" label-width="90px">
        <el-form-item label="权限名称:" prop="permissionName" style="width:350px">
          <el-input v-model="editPermissionForm.permissionName"></el-input>
        </el-form-item>
        <el-form-item label="权限编码:" prop="permissionCode" style="width:350px">
          <el-input v-model="editPermissionForm.permissionCode"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称:" prop="menuName" style="width:350px">
          <el-input v-model="editPermissionForm.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径:" prop="menuCode" style="width:350px">
          <el-input v-model="editPermissionForm.menuCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPermissionDialog=false">取 消</el-button>
        <el-button type="primary" @click="editSavePermissionForm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getPermissionListPaging,
  addPermissionForm,
  delPermissionForm,
  editPermissionForm
} from '@/api/getUser'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10,
        menuName: ''
      },

      permissionList: [],
      addPermissionForm: {
        permissionCode: '',
        permissionName: '',
        menuName: '',
        menuCode: ''
      },
      editPermissionForm: {
        id: '',
        permissionCode: '',
        permissionName: '',
        menuName: '',
        menuCode: ''
      },
      totalNum: 0,
      addPermissionDialog: false,
      editPermissionDialog: false,
      rules: {
        permissionName: [
          {
            required: true,
            message: '权限名称不能为空！',
            trigger: 'blur'
          }
        ],
        permissionCode: [
          {
            required: true,
            message: '权限编码不能为空！',
            trigger: 'blur'
          }
        ],
        menuName: [
          {
            required: true,
            message: '菜单名称不能为空！',
            trigger: 'blur'
          }
        ],
        menuCode: [
          {
            required: true,
            message: '菜单路径不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 查询方法
    queryData() {
      this.getPermissionList()
    },
    // 获取权限列表
    getPermissionList() {
      getPermissionListPaging(this.queryModuleInfo).then((resp) => {
        this.permissionList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 保存权限信息
    addPermissionFrom() {
      this.$refs.addPermissionFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          addPermissionForm(this.addPermissionForm)
            .then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('添加成功！')
                this.addPermissionDialog = false
                this.getPermissionList()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
            .catch((error) => {
              this.$message({ type: 'error', message: error })
            })
        }
      })
    },
    // 数据回显
    openPermissionDialog(row) {
      this.editPermissionDialog = true
      this.editPermissionForm.id = row.id
      this.editPermissionForm.permissionName = row.permissionName
      this.editPermissionForm.permissionCode = row.permissionCode
      this.editPermissionForm.menuName = row.menuName
      this.editPermissionForm.menuCode = row.menuCode
    },
    // 修改后保存权限
    editSavePermissionForm() {
      this.$refs.editPermissionFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          editPermissionForm(this.editPermissionForm)
            .then((resp) => {
              if (resp.data.data === true) {
                this.$message.success('修改成功！')
                this.editPermissionDialog = false
                this.getPermissionList()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
            .catch((error) => {
              this.$message({ type: 'error', message: error })
            })
        }
      })
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除权限
    delPermissionFrom(row) {
      this.openMessage('您确定要删除吗？', '删除', () => {
        delPermissionForm({ permissionId: row.id })
          .then((resp) => {
            if (resp.data.data === true) {
              this.$message.success('删除成功！')
              this.getPermissionList()
            } else if (resp.data.data === false) {
              this.$message.error(resp.data.msg)
            }
          })
          .catch((error) => {
            this.$message({ type: 'error', message: error })
          })
      })
    },
    closeAddDialog() {
      this.$refs.addPermissionFormRef.resetFields()
    },
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getPermissionList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getPermissionList()
    }
  }
}
</script>
