<!--
  @description: 系统设置->数据权限
  @author: change by zhangfan
  @routerPath: /sysetemSettings/dataManageList
  @date:  2020/5/12-11:12
-->
<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 SearchContent" style="margin-top: 30px">
      <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.roleOtherName"
              style="width:268px"
              class="filter-item"
              placeholder="请输入菜单编号"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="getTreeDataSearch">
          搜索
        </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="goAddDialog">
        <i class="el-icon-plus" /> 新增
      </el-button>
      <el-button plain type="danger" @click="deleteData()">
        <i class="el-icon-delete" /> 删除
      </el-button>
    </div>
    <div class="main" style="margin-top: 20px">
      <el-table
        ref="smallTable"
        :load="load"
        :data="tableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        style="width: 100%"
        row-key="id"
        lazy
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="interfaceName"
          label="菜单名称"
          width="180"
        />
        <el-table-column
          prop="interfacePath"
          label="路由地址"
          width="180"
        />
        <el-table-column
          prop="name"
          label="菜单图标"
          width="180"
        />
        <el-table-column
          prop="name"
          label="菜单编号"
          width="180"
        />
        <el-table-column
          prop="address"
          label="菜单别名"
        />
        <el-table-column
          prop="interfaceSort"
          label="菜单排序"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="goDetail(scope.row.id)">
              [查看]
            </el-link>
            <el-link type="primary" @click="goEditDialog(scope.row.id)">
              [编辑]
            </el-link>
            <el-link type="primary" @click="deleteData(scope.row)">
              [删除]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新建弹窗-->
    <el-dialog
      :visible.sync="AddDatadialog"
      :modal="true"
      :lock-scroll="false"
      title="新增"
      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="interfaceName" />
                </td>
                <td>
                  <el-input v-model="formData.interfaceName" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="权限编号" prop="route" />
                </td>
                <td>
                  <el-input v-model="formData.route" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="权限字段" prop="column" />
                </td>
                <td>
                  <el-input v-model="formData.column" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="规则类型" prop="value" />
                </td>
                <td>
                  <el-select v-model="formData.value" style="width: 100%" filterable placeholder="请选择">
                    <el-option
                      v-for="item in ruleType"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="指定表" prop="table" />
                </td>
                <td>
                  <el-input v-model="formData.table" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="指定别名" prop="alias" />
                </td>
                <td>
                  <el-input v-model="formData.alias" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="类型" prop="effect" />
                </td>
                <td>
                  <el-radio-group v-model="formData.effect">
                    <el-radio label="0" value="0">
                      用于树图
                    </el-radio>
                    <el-radio label="1" value="1">
                      有效接口
                    </el-radio>
                  </el-radio-group>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="备注" prop="roleDesc" />
                </td>
                <td>
                  <el-input v-model="formData.roleDesc" />
                </td>
              </tr>
            </table>
          </div>
          <!--操作按钮-->
          <div class="but_footer" style="text-align: center;margin:30px 0 50px 0">
            <el-button type="primary" @click="submitForm('formData')">
              确认
            </el-button>
            <el-button type="primary" @click="AddDatadialog=false">
              取消
            </el-button>
          </div>
        </el-form>
      </section>
    </el-dialog>
    <!--查看-->
    <dataManageDetailDialog :dialog-data="dataManageDetailDialog" :detail-id="detailId" />
    <!--编辑-->
    <dataManageEditDialog :dialog-data="dataManageEditDialog" :editl-id="editlId" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import { getAuthInterfaceTree, getAuthInterfaceTreeBySearch, saveAuthData, remove } from '@api/common/roleManage'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
import dataManageDetailDialog from './dataManage-detailDialog' // 查看弹窗
import dataManageEditDialog from './dataManage-editDialog' // 编辑弹窗
export default {
  name: 'DataManageList',
  components: {
    dataManageDetailDialog,
    dataManageEditDialog
  },
  data() {
    return {
      AddDatadialog: false, // 新增弹窗显隐
      formData: {
        // 表单字段
        interfaceName: '', // 权限名称
        route: '', // 权限编号
        column: '', // 权限字段
        value: '', // 规则类型
        table: '', // 指定表
        alias: '', // 指定别名
        effect: '' // 类型
      },
      rules: {
        // 校验
        interfaceName: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        route: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        column: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        value: [{ required: true, message: '不为空', trigger: 'change' }],
        table: [{ required: true, message: '不为空', trigger: 'blur' }],
        alias: [{ required: true, message: '不为空', trigger: 'blur' }],
        effect: [{ required: true, message: '不为空', trigger: 'change' }]
      },
      ruleType: [{ // 下拉框数据
        value: '0',
        label: '全部可见'
      }, {
        value: '1',
        label: '本人可见'
      }, {
        value: '2',
        label: '所在机构可见'
      }, {
        value: '3',
        label: '所在机构及子级可见'
      }],
      listQuery: {
        // 筛选字段
        roleName: '', // 菜单名称
        roleOtherName: '', // 菜单编号
        page: 1,
        pageSize: 10
      },
      //  查看弹窗
      dataManageDetailDialog: {
        dialog: false
      },
      //  编辑弹窗
      dataManageEditDialog: {
        dialog: false
      },
      // 分页
      paginationData: {
        pageNo: 1, // 当前页
        pageSize: 10, // 每页显示的个数
        total: 0 // 总记录条数
      },
      tableData: [], // 数据列表
      multipleSelection: [], // 复选框多选数据
      parentId: '', // 勾选传的id
      interfaceSort: '', // 勾选传的菜单排序
      detailId: '', // 传给查看的弹窗id
      editlId: '', // 传给编辑的弹窗id
      maps: new Map(), // 存储节点信息
      pid: '' // 获取树节点id
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    // 勾选表格多选框
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.parentId = this.multipleSelection[0].id // 勾选传的id
      this.interfaceSort = this.multipleSelection[0].interfaceSort // 勾选传的菜单排序
    },
    // 关闭编辑弹窗
    closeDialog(val) {
      this.dataManageEditDialog.dialog = val
    },
    // 获取树状表格列表
    getTreeData() {
      const params = {
        'interfaceName': '', // 菜单名称
        'parentInterfacePath': '' // 菜单编号
      }
      getAuthInterfaceTree(params).then(res => {
        this.tableData = res.data
        this.tableData.filter(item => {
          if (item.existLeaf === true) {
            item.hasChildren = true // 判断是否有子节点
          }
        })
      }).catch(() => {
      })
    },
    // 加载表格子节点
    load(tree, treeNode, resolve) { // 开展子节点
      this.pid = tree.id
      this.maps.set(this.pid, { tree, treeNode, resolve }) // 将当前选中节点数据存储到maps中
      const params = {
        'interfaceName': '', // 菜单名称
        'parentInterfacePath': tree.interfacePath // 菜单编号
      }
      getAuthInterfaceTree(params).then(res => {
        res.data.filter(item => {
          if (item.existLeaf === true) {
            item.hasChildren = true // 判断是否有子节点
          }
        })
        resolve(res.data)
      }).catch(() => {
      })
    },
    // 搜索数据列表
    getTreeDataSearch() {
      const params = {
        'interfaceName': this.listQuery.roleName, // 菜单名称
        'parentInterfacePath': this.listQuery.roleOtherName // 菜单编号
      }
      getAuthInterfaceTreeBySearch(params).then(res => {
        this.tableData = res.data
      }).catch(() => {
      })
    },
    // 重置
    resetForm() {
      Object.keys(this.listQuery).forEach(val => {
        this.listQuery[val] = '' // 参数置空
      })
      this.listQuery.pageNo = 1 // 当前页
      this.listQuery.pageSize = 10 // 每页显示的个数
      this.getTreeData()
    },
    // 查询条件
    getQueryParams() { // 提交
      const param = Object.assign({}, this.formData) // copy obj
      param.parentId = this.parentId || '' // 勾选传的id
      param.interfaceSort = this.interfaceSort || '' // 勾选传的菜单排序
      param.pendingName = ''
      return filterObj(param)
    },
    // 打开新增弹窗
    goAddDialog() {
      if (this.multipleSelection.length > 1) { // 如果选择多个，让其清空从新选
        this.$message({
          message: '新增只能选择一条数据',
          type: 'warning'
        })
        this.$refs.smallTable.clearSelection() // 清空原选的数据
      } else {
        this.AddDatadialog = true // 打开新增弹窗
      }
    },
    // 新增
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = this.getQueryParams() // 查询条件
          saveAuthData(params).then(res => {
            if (res.header.ret === '0') {
              this.$message({
                message: '添加成功！',
                type: 'success'
              })
              this.AddDatadialog = false // 关闭弹窗
              this.getTreeData()
            } else {
              this.$message.error('添加失败！')
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 单条数据删除和批量删除
    deleteData(item) {
      const params = {
        'ids': '',
        'type': '0'
      }
      if (item) { // 判断是单条删除还是多条数据删除
        params.ids = item.id
      } else {
        const IdArray = []
        this.multipleSelection.filter(item => {
          IdArray.push(item.id) // 将勾选的id添加到新数组里面
        })
        params.ids = IdArray.join(',')
      }
      if (params.ids) { // 判断是否勾选了数据
        remove(params).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.getTreeData()
            const { tree, treeNode, resolve } = this.maps.get(this.pid) // 根据pid取出对应的节点数据
            this.$set(this.$refs.smallTable.store.states.lazyTreeNodeMap, this.pid, []) // 将对应节点下的数据清空，从而实现数据的重新加载
            this.load(tree, treeNode, resolve)
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.$message({ // 若没有勾选加一个提示
          message: '请选择要删除的数据',
          type: 'warning'
        })
      }
    },
    // 打开查看弹窗
    goDetail(id) {
      this.detailId = id // 传给弹窗的id
      this.dataManageDetailDialog.dialog = true
    },
    // 打开编辑弹窗
    goEditDialog(id) {
      this.editlId = id // 传给弹窗的id
      this.dataManageEditDialog.dialog = true
    }
  }
}
</script>

<style scoped>

</style>

