Source/UBCS-WEB/src/views/integration/systemInfo.vue

@@ -1,13 +1,16 @@
<template>
  <basic-container>
    <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :search.sync="search" :table-loading="loading"
    <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :permission="permissionList"
               :search.sync="search"
               :table-loading="loading"
               @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit"
               @refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage"
               @selection-change="selectionChange" @row-click="handleRowClick">
      <template slot="menuLeft">
        <!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">查 询
        </el-button> -->
        <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 除
        <el-button v-if="permissionList.delBtn" icon="el-icon-delete" size="small" type="danger"
                   @click="handleDeleteByIds">删 除
        </el-button>
      </template>
      <template slot="search" slot-scope="{row,size}">
@@ -19,42 +22,63 @@
                  :size="size" clearable style="width:300px;margin-left: 10px;"
                  @clear="handleClear" @keyup.enter.native="handleEnter"></el-input>
      </template>
      <template #menu="{row,index,size}">
        <el-button type="text" icon="el-icon-menu" size="small" @click="classifyHandler">分类授权</el-button>

      <template v-if="permissionList.empower" #menu="{row,index,size}">
        <el-button icon="el-icon-menu" size="small" type="text" @click="classifyHandler(row)">分类授权</el-button>
      </template>


    </avue-crud>
    <el-dialog :visible.sync="dialogVisible" append-to-body title="分类授权">
    <el-dialog :visible.sync="dialogVisible" append-to-body class="avue-dialog avue-dialog--top" title="分类授权"
               top="-50px">

      <el-row>
        <el-col :span="14">
        <el-col :span="10">
          <avue-tree ref="tree"
                     :option="TreeOption"
                     :data="TreeData"
                     v-model="TreeForm"
                     :data="TreeData"
                     :option="TreeOption"
                     @check-change="checkChange">
          </avue-tree>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer" style="height: 50px;line-height: 50px">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="empower">授 权</el-button>
        <el-button icon="el-icon-close" size="small" type="danger" @click="resetting">重 置</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>
<script>
import {getSysInfoList, sysInfoAdd, sysInfoEdit, sysInfoDel} from '@/api/integration/sysInfo.js'
import {
  getSysInfoList,
  sysInfoAdd,
  sysInfoEdit,
  sysInfoDel,
  sysInfoTree,
  batchAddSave
} from '@/api/integration/sysInfo.js'
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      TreeOption:{
        defaultExpandAll: true,
      checkAll: {},
      ParentList: [],
      ParentRemoveList: [],
      //避免缓存
      reload: Math.random(),
      TreeLoading: false,
      TreeOption: {
        defaultExpandAll: false,
        multiple: true,
        addBtn:false,
        filter:false
        addBtn: false,
        filter: false
      },
      TreeData:[],
      TreeForm:{},
      TreeData: [],
      TreeForm: {},
      loading: false,
      dialogVisible:false,
      dialogVisible: false,
      page: {
        currentPage: 1,
        pageSize: 10,
@@ -71,7 +95,23 @@
      search: {},
      delIds: [],
      data: [],
      option: {

    }
  },
  created() {
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.systemInfo.systemInfo_add, false),
        editBtn: this.vaildData(this.permission.systemInfo.systemInfo_edit, false),
        delBtn: this.vaildData(this.permission.systemInfo.systemInfo_delete, false),
        empower: this.vaildData(this.permission.systemInfo.systemInfo_empower, false),
      }
    },
    option() {
      return {
        height: "auto",
        tip: false,
        border: true,
@@ -115,22 +155,175 @@
            type: 'textarea'
          }
        ]
      },
      }
    }
  },
  methods: {
    //重置
    resetting() {
      this.$refs.tree.setCheckedKeys([])
      // console.log(this.ParentList)
    },
    empower() {
      batchAddSave(this.checkAll.oid, this.checkAll.id, this.ParentList).then(res => {
        // console.log(res.data)
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.dialogVisible = false;
        }
      })
    },
    //分类授权多选回调
    checkChange(){

    checkChange(row, checked) {
      if (checked) {
        this.addAllChildren(row.children);
        this.addToParentList(row);
        // 勾选行时将所有节点添加到ParentList中
      } else {
        this.removeAllChildren(row.children);
        this.removeFromParentList(row);
        // 取消勾选将所有节点添加从ParentList中移除
      }
      // console.table(this.ParentList);
    },
    //子节点添加
    addAllChildren(children) {
      for (let child of children) {
        this.addToParentList(child);
        // 将子节点添加到 ParentList 中
        if (child.children && child.children.length > 0) {
          this.addAllChildren(child.children);
        }
      }
    },
    //子节点移除
    removeAllChildren(children) {
      for (let child of children) {
        this.removeFromParentList(child);
        // 将子节点从 ParentList 中移除
        if (child.children && child.children.length > 0) {
          this.removeAllChildren(child.children);
        }
      }
    },
    //当前父节点添加
    addToParentList(item) {
      const classifyOid = item.attributes.classifyOid;
      if (!this.isClassifyOidExists(classifyOid)) {
        const record = {
          oid: item.oid,
          classifyId: item.attributes.classifyId,
          classifyOid: classifyOid,
        };
        this.ParentList.push(record);
      }
    },
    //当前父节点移除
    removeFromParentList(item) {
      const classifyOid = item.attributes.classifyOid;
      if (this.isClassifyOidExists(classifyOid)) {
        const index = this.findIndexByClassifyOid(classifyOid);
        if (index !== -1) {
          this.ParentList.splice(index, 1);
        }
      }
    },
    //判重-ParentList
    isClassifyOidExists(classifyOid) {
      return this.ParentList.some(item => item.classifyOid === classifyOid);
    },
    //查找index位置
    findIndexByClassifyOid(classifyOid) {
      return this.ParentList.findIndex(item => item.classifyOid === classifyOid);
    },
    //分类授权
    classifyHandler(){
      this.dialogVisible=true;
    classifyHandler(row) {
      this.loading = true;
      this.checkAll = row
      sysInfoTree({systemOid: row.oid, systemId: row.id}).then(res => {
        let List = [];
        let value = 0;
        let NumberList = [];

        function traverse(obj, parent) {
          //重新构建一次选中当前row的数据
          const record = {
            label: obj.text,
            oid: obj.oid,
            attributes: {
              classifyId: obj.attributes.classifyId,
              classifyOid: obj.attributes.classifyOid,
              selected: obj.attributes.selected
            },
            classParentOid: obj.parentId,
            value: value,
            children: []
          };
          //当前已选择数据回填
          if (record.attributes.selected == 'true') {
            NumberList.push(record.value);
          }
          if (parent) {
            const stingChild = parent.children.find(child => child.label === record.label);
            if (stingChild) {
              record.value = stingChild.value; // 使用已存在的子节点的value值
            } else {
              parent.children.push(record);
              value++;
            }
          } else {
            const stingRecord = List.find(item => item.label === record.label);
            if (stingRecord) {
              record.value = stingRecord.value; // 使用已存在的顶层节点的value值
            } else {
              List.push(record);
              value++;
            }
          }
          if (obj.children && obj.children.length > 0) {
            for (let child of obj.children) {
              traverse(child, record);
            }
          }
        }

        for (let item of res.data) {
          traverse(item, null);
        }
        // console.log('list', List);
        this.TreeData = List;
        // this.ModifyProperties(this.TreeData, 'text', 'label');
        // 根据this.TreeData的长度计算延迟时间
        const delayTime = this.TreeData.length * 1;
        console.log(delayTime)
        setTimeout(() => {
          this.loading = false;
          this.reload = Math.random();
          this.dialogVisible = true;

          this.$nextTick(() => {
            if (this.$refs.tree) {
              this.$refs.tree.setCheckedKeys(NumberList);
            }
          });
        }, delayTime);
      });
    },
    //定义一个修改数据属性名的方法
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
          obj[newName] = obj[key];
          delete obj[key];
        }
        if (typeof obj[key] === 'object') {
          this.ModifyProperties(obj[key], oldName, newName);
        }
      }
    },
    async getDataList() {
      this.loading = true;
      console.log(this.search);
      const { pageSize, currentPage } = this.page;
      const {pageSize, currentPage} = this.page;
      const conditions = {};
      if (Object.keys(this.search).length > 0) {
        for (const key in this.search) {
@@ -141,7 +334,7 @@
      }
      const response = await getSysInfoList(pageSize, currentPage, conditions);
      if (response.status === 200) {
        console.log(response);
        // console.log(response);
        this.loading = false;
        const data = response.data.data;
        this.data = data.records;
@@ -160,6 +353,7 @@
            message: '新增数据成功！'
          })
          done(row)
          await this.getDataList();
          // this.$refs.crud.refreshTable()
          // this.getDataList()
        }
@@ -180,6 +374,7 @@
          })
          done(row)
        }
        await this.getDataList();
      } catch {
        loading()
      }
@@ -210,12 +405,12 @@
      }).then(async () => {
        const response = await sysInfoDel(param)
        if (response.status === 200) {
          console.log(response)
          // console.log(response)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDataList()
          await this.getDataList()
        }
      })
    },
@@ -232,9 +427,7 @@
    },
    // enter搜索
    handleEnter() {
      if (this.search[this.selectValue] === '') return
      else this.getDataList()

      this.getDataList()
    },
    // 输入框清空
    handleClear() {
@@ -257,13 +450,12 @@
    },
    // 多选
    selectionChange(list) {
      console.log(list)
      let newData = list.map(item => {
        const {oid} = item
        return oid
      })
      this.delIds = {oids: newData.toString()}
      console.log(this.delIds)
      // console.log(this.delIds)
    },
  }
}