SMAirports/src/views/newRole/index.vue

<template>
  <div class="newService">
    <div class="newService-head flex-wrap">
      <div class="manageTitle">{{ title }}</div>
    </div>
    <div class="newService-content flex-wrap">
      <div class="newService-content-left">
        <div class="newService-content-left-top">
          <div class="flex head">
            <div class="title">角色列表</div>
            <el-button @click="handleAdd" class="serButton" size="small">新增</el-button>
          </div>
          <div class="search">
            <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
            </el-input>
          </div>
        </div>
        <div class="newService-content-left-bottom">
          <template v-if="dataList.length">
            <el-scrollbar ref="scroll" style="height: 100%">
              <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
                  <div class="left">
                    <span class="txt">{{ item.role_name }}</span>
                  </div>
                  <div v-show="activeIndex == index" class="right">
                    <span @click.stop="handleError" class="error">删除</span>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </template>
          <template v-else>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </div>
      </div>
      <div class="newService-content-right">
        <div class="newService-content-right-top">
          <div class="flex">
            <div class="title">角色信息 {{ dataObj.role_name }}</div>
            <el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
          </div>
          <div class="demo-form">
            <el-form :inline="true" :model="formInline" class="flex-wrap">
              <el-form-item label="角色名称">
                <el-input style="width:250px" clearable v-model="formInline.role_name" :disabled="activeIndex == null" size="small" placeholder="请输入角色名称"></el-input>
              </el-form-item>
              <el-form-item class="flex1" label="角色描述">
                <el-input style="width:600px;" clearable v-model="formInline.comment" :disabled="activeIndex == null" size="small" placeholder="请输入角色描述"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="height: calc(100% - 180px)" class="flex newService-content-right-new">
          <div class="newService-content-right-bottom contents1 flex1">
            <div class="newService-content-left-top">
              <div class="flex head">
                <div class="title">权限列表</div>
              </div>
              <div class="search">
                <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" :filter-node-method="filterNode" v-model="filterText">
                </el-input>
              </div>
            </div>
            <div class="newService-content-left-bottom">
              <el-scrollbar ref="scroll" style="height: 100%">
                <div class="newService-content-left-bottom-tree">
                  <el-tree ref="tree" show-checkbox :data="treeData" :props="defaultProps" highlight-current :filter-node-method="filterNode" default-expand-all node-key="auth_id" @check="checkChange" @node-click="handleNodeClick" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span class="customTxt">{{ node.label }}</span>
                      <span v-show="treeCheckId == data.auth_id" class="customBtn">
                        <span @click="setItem(node,data)" v-if="data.auth_id != 0 && data.auth_type == 4" class="ym">列授权</span>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="newService-content-right-bottom contents2 flex1">
            <div class="newService-content-left-top">
              <div class="flex head">
                <div class="title">列授权</div>
              </div>
            </div>
            <div class="newService-content-left-bottom">
              <template v-if="checkArrs.length">
                <el-scrollbar ref="scroll" style="height: 100%">
                  <el-checkbox-group @change="groupChange" v-model="checkGroup" size="small">
                    <el-row :gutter="20">
                      <el-col v-for="(item,index) in checkArrs" :key="index" :span="8">
                        <el-checkbox :label="item.columnName" border>{{ item.columnLabel }}</el-checkbox>
                      </el-col>
                    </el-row>
                  </el-checkbox-group>
                </el-scrollbar>
              </template>
              <template v-else>
                <el-empty description="暂无数据"></el-empty>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Table from '@/views/newTable/index.vue'
import { Query, newData, modifyData, moveData } from "@/api/webApi"
import { setTree } from '@/utils/validate'
import pb from '@/layout/mixin/getPublicData'
import * as _ from 'lodash'
export default {
  name: 'NewService',
  components: { Table },
  mixins: [pb],
  data () {
    return {
      title: '服务设置',
      search: '',
      filterText: '',
      arrs: [],
      flag: true,
      formInline: {
        role_name: '',
        comment: ''
      },
      activeIndex: null,
      pageIndex: 0,
      pageSize: 9999,
      dataContent: {},
      queryId: '',
      dataObj: {},
      dataType: 'edit',
      noMore: false,
      loading: false,
      treeData: [
        {
          auth_name: '中小型机场系统',
          auth_id: 0,
          children: [],
          up_auth_id: -1
        }
      ],
      treeCheckId: '',
      treeCheckObj: {},
      defaultProps: {
        children: 'children',
        label: 'auth_name'
      },
      checkGroup: [],
      checkArrs: [],
      checkDatas: [],
      checkGroups: []
    }
  },
  computed: {
    dataList () {
      return this.arrs.filter(data => !this.search || data.role_name.toLowerCase().includes(this.search.toLowerCase()))
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  created () {
    const { title, qid } = this.$route.meta
    this.title = title
    this.queryId = qid
    this.getQueryList(qid)
    this.setTreeData()
  },
  updated () {
    this.scrollDown()
  },
  methods: {
    //获取tree数据
    async setTreeData () {
      const result = await this.getQuery(SERVICE_ID.sysMenuId)
      const treeMenu = setTree(result, 'up_auth_id', 'auth_id')
      this.treeData[0].children = treeMenu
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.auth_name.indexOf(value) !== -1;
    },
    async getQueryList (id) {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          serviceId: id,
          page: ++this.pageIndex,
          pageSize: this.pageSize,
          dataContent: this.dataContent,
        })
        if (code == 0) {
          if (returnData.length === 0) {
            this.pageIndex--;
            this.noMore = true;
          }
          this.arrs.push(...returnData)
          if (this.dataType == 'add') {
            const item = this.arrs[this.arrs.length - 1]
            if (Object.keys(item).length) {
              this.dataObj = item
              this.flag = false
            }
          }
          this.loading = false;
        } else {
          this.pageIndex--;
          this.loading = false;
        }
      } catch (error) {
        this.pageIndex--;
        this.loading = false;
      }
    },
    load () {
      if (!this.noMore) {
        this.getQueryList(this.queryId);
      }
    },
    scrollDown () {
      if (this.$refs['scroll'] && this.dataType == 'add') {
        this.$refs['scroll'].wrap.scrollTop = this.$refs['scroll'].wrap.scrollHeight
      }
    },
    resetTable () {
      this.pageIndex = 0;
      this.noMore = false;
      this.arrs = [];
    },
    //服务列表-新增
    handleAdd () {
      this.dataType = 'add'
      this.flag = false
      this.dataObj.role_name = '新建角色'
      this.arrs.push({ role_name: '新建角色' })
      this.activeIndex = this.arrs.length - 1
      for (const key in this.formInline) {
        if (Object.hasOwnProperty.call(this.formInline, key)) {
          this.formInline[key] = null
        }
      }
    },
    //获取角色已有权限
    async getRoleQuth (item) {
      const result = await this.getQuery(SERVICE_ID.authTreeId, false, { role_id: item.role_ID })
      this.checkDatas.push(result)
      if (result && result.length) {
        const datas = []
        result.forEach(item => {
          datas.push(item.auth_id)
        })
        this.$refs.tree.setCheckedKeys(datas)
        const treeDatas = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
        const res = [...treeDatas, ...result].filter((item) => !(treeDatas.some((p) => item.auth_id == p.auth_id) && result.some((c) => item.auth_id == c.auth_id)))
        setTimeout(() => {
          res.forEach((item) => {
            this.$refs.tree.setChecked(item.auth_id, false, false);
          });
        }, 50);
      }
    },
    //服务列表-点击
    handleClick (item, index) {
      this.dataType = 'edit'
      this.dataObj = _.cloneDeep(item)
      this.formInline = _.cloneDeep(item)
      this.activeIndex = index
      this.flag = false
      this.getRoleQuth(item)
    },
    //服务列表-保存
    handleSave () {
      if (this.dataObj.role_ID && this.dataType == 'edit') {
        this.generalDataReception(this.queryId, 2, this.formInline)
      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].role_ID) {
        this.formInline.role_ID = this.arrs[this.arrs.length - 1].role_ID
        this.generalDataReception(this.queryId, 2, this.formInline)
      } else if (this.dataType == 'add') {
        this.generalDataReception(this.queryId, 1, this.formInline)
      }
      else {
        this.$message.error('请先选中服务后再操作')
      }
    },
    //服务列表-删除
    handleError () {
      if (this.dataObj.role_ID && this.dataType == 'edit') {
        this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.generalDataReception(this.queryId, 3, this.dataObj)
          this.activeIndex = null;
          this.dataObj = {};
          for (const key in this.formInline) {
            if (Object.hasOwnProperty.call(this.formInline, key)) {
              this.formInline[key] = null
            }
          }
          this.flag = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].role_ID) {
        this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.generalDataReception(this.queryId, 3, this.arrs[this.arrs.length - 1])
          this.activeIndex = null;
          this.dataObj = {};
          for (const key in this.formInline) {
            if (Object.hasOwnProperty.call(this.formInline, key)) {
              this.formInline[key] = null
            }
          }
          this.flag = true
          this.dataType = 'edit'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      else {
        this.arrs.splice(this.activeIndex, 1)
        this.activeIndex = null
        this.flag = true
        this.dataObj = {}
      }
    },
    //服务列表-增/删/改
    async generalDataReception (id = this.queryId, event, data, type) {
      try {
        const params = {
          serviceId: id,
          dataContent: data,
          event: `${event}`,
        };
        const { code } =
          event == 1
            ? await newData(params)
            : event == 2
              ? await modifyData(params)
              : await moveData(params);
        if (code == 0) {
          this.$message.success("操作成功");
          if (type) {

          } else {
            this.resetTable();
            this.getQueryList(this.queryId);
          }
        } else {
          this.$message.error("操作失败");
        }
      } catch (error) {
        this.$message.error("操作失败");
      }
    },
    handleNodeClick (data) {
      this.treeCheckId = data.auth_id
      this.treeCheckObj = data
    },
    checkChange () {
      if (this.dataObj.role_ID) {
        const datas = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
        const arrs = datas.filter(item => item.auth_id != 0)
        this.checkDatas.push(arrs)
        const data1 = this.checkDatas[this.checkDatas.length - 1]; //最后一条数据
        const data2 = this.checkDatas[this.checkDatas.length - 2]; //倒数第二条数据
        if (data1.length > data2.length) {
          this.checksBoxTs(data1, data2, "add");
        } else {
          this.checksBoxTs(data2, data1, "del");
        }
      } else {
        this.$message.error('请选中角色后再操作');
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    async checksBoxTs (datas, arr, type) {
      const res = [...datas, ...arr].filter((item) => !(datas.some((p) => item.auth_id == p.auth_id) && arr.some((c) => item.auth_id == c.auth_id)));
      const msgs = []
      res.forEach(item => {
        msgs.push({
          ID: item.ID
        })
        item.role_id = this.dataObj.role_ID
        item.role_name = this.dataObj.role_name
        item.role_status = this.dataObj.role_status
      })
      if (type == 'add') {
        this.generalDataReception(SERVICE_ID.authTreeId, 1, res, true)
        this.getRoleQuth(this.dataObj)
      } else {
        this.generalDataReception(SERVICE_ID.authTreeId, 3, msgs, true)
      }
    },
    async setItem (node, data) {
      if (this.dataObj.role_ID) {
        const result = await this.getQuery(SERVICE_ID.getTableColumnId, false, { serviceOutPutId: data.auth_id })
        if (result && result) {
          this.checkArrs = result
          const res = await this.getQuery(SERVICE_ID.authTreeId, false, { auth_id: data.auth_id, role_id: this.dataObj.role_ID })
          if (res && res.length) {
            const datas = []
            res.forEach(item => {
              if (item.columnname) {
                datas.push(item.columnname)
              }
            })
            if (datas.length) {
              this.checkGroups.push(datas)
            }
            this.checkGroup = datas
          }
        }
      } else {
        this.$message.error('请选中角色后再操作');
      }
    },
    groupChange (val) {
      this.checkGroups.push(val)
      if (this.checkGroups.length == 1) {
        const res = this.getColName(val)
        const result = this.sendCheckData(res)
        this.generalDataReception(SERVICE_ID.authTreeId, 1, result, true)
      } else if (this.checkGroups.length > 1) {
        const data1 = this.checkGroups[this.checkGroups.length - 1]; //最后一条数据
        const data2 = this.checkGroups[this.checkGroups.length - 2]; //倒数第二条数据
        const msg = [...data1, ...data2].filter((item) => !(data1.some((p) => item == p) && data2.some((c) => item == c)));
        const cap = this.getColName(msg)
        const result = this.sendCheckData(cap)
        if (data1.length > data2.length) {
          this.generalDataReception(SERVICE_ID.authTreeId, 1, result, true)
        } else {
          this.generalDataReception(SERVICE_ID.authTreeId, 3, result, true)
        }
      }
    },
    sendCheckData (arr) {
      const newData = []
      arr.forEach(item => {
        const obj = {
          "role_id": this.dataObj.role_ID,
          "role_name": this.dataObj.role_name,
          "role_status": this.dataObj.role_status,
          "auth_id": this.treeCheckObj.auth_id,
          "auth_type": this.treeCheckObj.auth_type,
          "queryTemplateColumnSetID": item.queryTemplateColumnSetID,
          "columnLabel": item.columnLabel,
          "columnname": item.columnName
        }
        newData.push(obj)
      })
      return newData
    },
    getColName (arr) {
      const res = []
      this.checkArrs.forEach(item => {
        arr.forEach(p => {
          if (item.columnName == p) {
            res.push(item)
          }
        })
      })
      return res
    },
    handleRemove (node, data) {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "./css/index.scss";
</style>