PCS-FrontEnd/src/views/dataPermission/index.vue

<template>
  <div class="admin-department">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="" :disabled="!$permission('/admin/role/permissionCheck')" size="small" @click="getList">查询</el-button>
        <el-butto :disabled="!$permission('/admin/role/permissionAdd')" type="primary" size="small" @click="handleAdd(func.fun.id)">新增</el-butto>
      </el-form-item>
    </el-form>
    <el-table
        row-key="id"
        ref="dataTable"
        v-loading="loading"
        :data="tableData"
        max-height="370"
        border
        @expand-change="getNode"
        @select="changeData"
        header-row-class-name="custom-table-header"

    >
      <el-table-column type="selection" width="60" align="center" ></el-table-column>
      <el-table-column prop="name" label="数据权限名称" align="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="tenant" label="条件" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-dropdown split-button type="primary" size="small">
          <p v-if="$permission('/admin/role/permissionModify')" @click="handleEdit(scope.row)">编辑</p>
            <p v-else :disabled="true">编辑</p>
            <el-dropdown-menu slot="dropdown" class="text-align_center">
              <el-dropdown-item :disabled="!$permission('/admin/role/permissionDelete')" class="color-red" @click.native="handleDelete(scope.row)" divided>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="visible" width="900px" :before-close="close" :append-to-body="true">
      <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
          <el-form-item label="所属功能" prop="func">
            <el-input v-model="func.fun.name" size="small" :readonly="true" placeholder="请输入所属功能"></el-input>
        </el-form-item>
        <el-form-item label="数据权限名称" prop="function">
            <el-input v-model="ruleForm.name" size="small" placeholder="请输入数据权限名称"></el-input>
        </el-form-item>
        <el-form-item label="数据权限">
             <template>
              <div class="add">
                <el-button type="primary" @click="addList()">添加</el-button>
              </div>
                <div style="border:1px solid #C0C0C0;border-radius:4px;overflow:auto;min-height:200px;padding: 10px 20px">
                  <el-row :gutter="24" v-for="(item,i) in list" :key="i" class="listItem">
                    <el-col :span="4" style="padding:0">
                      <span>
                        <span v-if="i==0" style="opacity: 0;"> 内容 </span>
                        <el-select v-else v-model="item.logicOpr">
                          <el-option
                            v-for="item in dictionaries.LOGIC_OPERATOR"
                            :key="item.dictChildValue"
                            :label="item.dictChildLabel"
                            :value="item.dictChildValue">
                          </el-option>
                        </el-select>
                      </span>
                    </el-col>

                    <el-col :span="7">
                      <el-select v-model="item.field">
                        <el-option
                        v-for="item in dictionaries.dataDict"
                        :key="item.dataSourceField"
                        :label="item.dataSourceName"
                        :value="item.dataSourceField">
                      </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="3" style="padding:0">
                      <el-select v-model="item.opr">
                        <el-option
                        v-for="item in dictionaries.OPERATOR"
                        :key="item.dictChildValue"
                        :label="item.dictChildLabel"
                        :value="item.dictChildValue">
                        </el-option>
                      </el-select>
                    </el-col>
                      <el-col :span="7">
                        <el-select v-model="item.value"
                          filterable
                          allow-create
                          default-first-option
                          placeholder="请选择">
                             <el-option
                             :value="userinfo.tenantName"
                             >
                               <el-tooltip class="item" effect="dark" :content="userinfo.tenantName" placement="top">
                                 <span style="float: left;width:100px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">{{userinfo.tenantName}}</span>
                                </el-tooltip> 
                                <span style="float: right; color: #8492a6; font-size: 13px;margin-left:30px">租户</span>
                              </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="3">
                      <el-button @click="deleteList(i)"><i class="el-icon-delete"></i> </el-button>
                      </el-col>
                    </el-row>
                  </div>
                </template>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
     <!-- <el-table
    ref="multipleTable"
    :data="option"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([option[1], option[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div> -->
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import TreeItem from './components/TreeItem'
export default {
  components: {
    Treeselect,
    TreeItem
  },
  props: [
    'fun',
    // 'functionName',
    // 'functionInfo'
  ],
  data() {
    name: 'DataPermission'
    return {
       option: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      options:[{label:'你好',value:1},{label:'你好1',value:2},{label:'你好2',value:3}],   
      visible: false,
      loading: false,
      btnLoading: false,
      total: 0,
      tableData: [],
      title: '',
      show:false,
      disabled: false,
      lastName: '',
      func: this.fun,
      // funName: this.functionName,
      // funInfo: this.functionInfo,
      functionLis: [],
      multipleSelection: [],
      queryParams: {
        name: ''
      },
      data:[],
      ruleForm: {},
      roleList:[],
      rules: {
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
        parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' },],
      },
      list:[],
      times:0
    }
  },
  created(){
    
  },
 
  mounted() {
    this.getList()
    this.getFunctionList()
    // console.log(this.fun)
    // this.func=this.fun
    // this.funId = 6
    // this.$emit('getPremissData', this.funId)
  },
  computed: {
    dictionaries() {
      // console.log(this.$store.state.admin.dictionaries)
      return this.$store.state.admin.dictionaries
    },
    userinfo() {
      return this.$store.state.admin.userinfo
    }
  },
  watch:{
    fun(val){
      // console.log(val)
        // this.$refs.dataTable.clearSelection()
      this.func = val
      this.getList()
      
    },
    // func(val,oldval){
    //   if(val!=oldval){
    //     this.getList()
    //   }
      
    // }
  },
  methods: {
      // toggleSelection(rows) {
      //   console.log(rows)
      //   if (rows) {
      //     this.$nextTick(()=>{
      //      rows.forEach(row => {
      //       console.log(row)
      //       this.$refs.dataTable.toggleRowSelection(row);
      //     });
      //     })
         
      //   } else {
      //     this.$refs.multipleTable.clearSelection();
      //   }
      // },
      // handleSelectionChange(val) {
      //   this.multipleSelection = val;
      // },
    changeData(selection,row){
      if (selection.length > 1) {
        const del_row = selection.shift()
        this.$refs.dataTable.toggleRowSelection(del_row, false)
        // console.log(del_row)
      }
      this.multipleSelection = selection[0]
      this.$emit('getPremissData', this.fun.fun.id, this.fun.fun.name,this.multipleSelection)
      // console.log(this.multipleSelection)

    },
    // getDataList(){
     
    //   // var functionList = {
    //   //   functions:this.ruleForm.function 
    //   // }
   
    //     this.$api.getDataList({functionId:this.fun.id}).then(response => {
    //     this.tableData = response.data
    //   })
    // },
    addList() {
      this.list.push({})
    },
    deleteList(i) {
      this.list.splice(i, 1)
    },
    ListToTree(){
      var a =[]
      if(this.list.length==1){
        // a[0]={}
        // a[0].nodeType='logic'
        // a[0].logicOpr = 'and'
        // a[0].left=this.list[0]
        // a[0].right = {
        //   field: "1",
        //   nodeType: "exp",
        //   opr: "=",
        //   value: "1"
        // }
        a[0]=this.list[0]
        //  a.nodeType='logic'
      }else{
        a[0]=this.list[0]
          a[0].nodeType='exp'
        for(var i =1;i<this.list.length;i++){
          this.list[i].nodeType='exp'
          a[i]={}
          a[i].left=a[i-1]
          a[i].nodeType='logic'
          a[i].right=this.list[i]
          a[i].logicOpr = this.list[i].logicOpr
        }
      }
      // console.log(a)
      this.ruleForm.rule = JSON.stringify(a[a.length-1])
    },
    TreeToList(data){
       var root = data
    var a=[]
     const result = [];
    function l(root){
      const stack = [];
      let last = null;
      let current = root;
      while (current || stack.length > 0) {
        while (current) {
          stack.push(current);
          current = current.left;
        }
        current = stack[stack.length - 1];
        if (!current.right || current.right == last) {
          current = stack.pop();
          result.push(current);
          last = current;
          current = null;
        } else {
          current = current.right;
        }
      }
      // console.log(result)
      return result;

    }
    l(root)
          // console.log(result)
        var i=0
        var c=0
        function s(i){
        if(i<result.length){
          if(i==0){
            a.push(result[i])
            i+=1
            c+=1
          }
          if(i%2==1){
            a.push(result[i])
            // console.log(a[c])
            a[c]['logicOpr'] = result[i+1].logicOpr
            i+=2
             c+=1
          }
          s(i)
        }
      }
      s(i)
      // console.log(a)
      this.list= a
    },
    getNode(node){
      // console.log(node)
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
      }
    },
    handleAdd(id) {
      // console.log(id)
      this.title = '新增数据权限'
      this.visible = true
      this.ruleForm={}
      this.list=[]
    },
    handleEdit(row) {
      this.title = '编辑数据权限'
      this.visible = true

      if(JSON.parse(row.rule).hasOwnProperty('left')){
        this.TreeToList(JSON.parse(row.rule))
      }else{
        this.list[0]=JSON.parse(row.rule)
      }
      
      this.ruleForm = { ...row }
    },
    close() {
      this.visible = false
    },
     handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    getList() {
      this.times+=1
      this.loading = true
      this.queryParams.functionId = this.func.fun.id
      this.$api.getDataList(this.queryParams).then(response => {
        this.tableData = response.data
    
       this.$nextTick(()=>{
       if(this.func.permission){
          this.$refs.dataTable.toggleRowSelection(this.tableData.find(item=>{
      		return this.func.permission.id == item.id;  
   		}),true)
        }
       })
        // console.log(response.data)
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },
    getFunctionList() {
      this.$api.getFunctionList().then(response => {
        this.functionList = response.data
      })
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.functionId=this.fun.fun.id
          this.btnLoading = true
          this.ListToTree()
          if (this.ruleForm.id) {
            this.$api.editData(this.ruleForm).then(response => {
              this.$message.success('编辑成功')
              this.btnLoading = false
              this.getList()
              this.close()
            }).catch(error => {
              this.btnLoading = false
            })
          } else {
            this.ruleForm.tenant=this.userinfo.tenantId
            this.$api.addData(this.ruleForm).then(response => {
              this.$message.success('新增成功')
              this.btnLoading = false
              this.getList()
              this.close()
            }).catch(error => {
              this.btnLoading = false
            })
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$refs.dataTable.clearSelection();
        delete this.func.permission
        this.multipleSelection = {}
        this.$emit('getPremissData', this.fun.fun.id, this.fun.fun.name,this.multipleSelection)
        this.$api.deleteData({ id: row.id }).then(response => {
          
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    }
  }
}
</script>
<style lang="scss">
  .el-table__header-wrapper  .el-checkbox{
	display:none
}

</style>
<style lang="scss" scoped>

.admin-department {

}
.add {
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.listItem {
  margin: 10px 0;
}
.normal {

}
.hidden {
 opacity: 0;
}
</style>