psychological-competence/src/components/manage/main/GroupAuth.vue

<!-- 分组权限管理 -->
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline search-center">
          <el-form-item label="名称">
            <el-input
              v-model="searchKey"
              placeholder="请输入量表或认知任务名称"
              size="small"
            />
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="type"
              @change="searchList(0)"
              placeholder="请选择类型"
              size="small"
            >
              <el-option label="量表" value="0"></el-option>
              <el-option label="认知任务" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="searchList(0)"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addAuthList">
              新增
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh-left"
              @click="goreturn"
            >
              返回
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 权限列表 -->
    <el-table :data="authList" border class="table-padding center-table" size="small">
      <el-table-column prop="name" label="名称" width="auto" align="center">
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="delAuthItem(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="txt-center mt20">
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        size="small"
      />
    </div>
    <!--新增量表权限-->
    <el-dialog
      :inline="true"
      title="新增权限"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
      append-to-body
    >
      <div>
        <el-form :inline="true" size="small" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="scaleName" size="small" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="aType"
              size="small"
              @change="searchList(1)"
              placeholder="请选择类型"
            >
              <el-option label="量表" value="0"></el-option>
              <el-option label="认知任务" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="searchList(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          ref="tableSe"
          @header-click="headerCli"
          @row-click="clickRow"
          :data="scaleList"
          :row-key="getRowKeys"
          @selection-change="changeHandle"
          border
          style="width: 100%"
          class="table-padding mt20"
          v-loading="loading"
          size="small"
        >
          <el-table-column type="selection" :reserve-selection="true" width="60"> </el-table-column>
          <el-table-column prop="name" label="名称" width="auto" align="center">
          </el-table-column>
        </el-table>
        <div class="mt20 txt-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange2"
            :current-page="scalePageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="scaleTotal"
            size="small"
          />
        </div>
        <div class="btnArea">
          <el-button size="small" @click="cancelSave">取消</el-button>
          <el-button type="primary" size="small" @click="savaNewAuth" :disabled="isdisabled">
            保存
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GroupAuth",

  data() {
    return {
      gId: "", // 组idI
      pageNum: 1,
      pageSize: 10,
      searchKey: "",
      type: "0", // 已有查询type
      authList: [],
      total: 0,
      formInline: {},
      dialogVisible: false,
      scaleList: [],
      aType: "0", // 全量查询type
      scaleName: "",
      checkList: [],
      scalePageNum: 1,
      scalePageSize: 10,
      scaleTotal: 0,
      loading: true, //设置加载读取
      isdisabled: true, //设置保存按钮是否可用
      getRowKeys(row) {
          return row.id;
      },//获取row的key值
    };
  },
  created() {
    this.gId = this.$route.query.gId;
    this.institutionNo = sessionStorage.getItem(
      "f7a42fe7211f98ac7a60a285ac3a9527"
    );
    this.loadData();
  },
  methods: {
    // 查询已有权限列表
    loadData() {
      this.$http.get(
        `group/auth/find?groupId=${this.gId}&type=${this.type}&pageNum=${this.pageNum}&pageSize=${this.pageSize}&searchKey=${this.searchKey}`,
        {},
        (msg) => {
          console.log(msg);
          this.authList = msg.data.content;
          this.total = msg.data.totalElements;
        }
      );
    },
    clickRow(row) {
      this.$refs.tableSe.toggleRowSelection(row);
    },
    //点击表头选中
    headerCli(column, event) {
      this.toggleSelection(this.scaleList);
    },
    toggleSelection(rows) {
      let that = this;
      if (rows) {
        rows.forEach((row) => {
          that.$refs.tableSe.toggleRowSelection(row);
        });
      } else {
        that.$refs.tableSe.clearSelection();
      }
    },
    // 已有权限分页切换
    handleCurrentChange(i) {
      this.pageNum = i;
      this.loadData();
    },
    goreturn() {
      this.$router.push("UserGroupManagement");
    },
    // 全量量表权限切换
    handleCurrentChange2(i) {
      this.scalePageNum = i;
      this.getAllList();
    },

    // 切换类型
    searchList(index) {
      if (index == 0) {
        this.pageNum = 1;
        this.loadData();
      } else {
        this.scalePageNum = 1;
        this.getAllList();
      }
    },
    handleSizeChange1(val) {
      console.log("进入了该方法");
      this.pageSize = val;
      console.log(this.pageSize);
      this.loadData();
    },
    handleSizeChange(val) {
      console.log("进入了该方法");
      this.scalePageSize = val;
      console.log(this.pageSize);
      this.getAllList();
    },
    // 查询全部量表或认知任务
    getAllList() {
      this.loading = true;
      this.isdisabled = true;
      this.$http.get(
        `group/auth/findNoAuth?institutionNo=${this.institutionNo}&groupId=${this.gId}&type=${this.aType}&pageNum=${this.scalePageNum}&pageSize=${this.scalePageSize}&searchKey=${this.scaleName}`,
        {},
        (msg) => {
          console.log(msg);
          this.scaleList = msg.data.data;
          this.scaleTotal = msg.data.allNum;
          this.loading = false;
          this.isdisabled = false;
        }
      );
      // this.$http.post(
      //   "institutionAuth/getInstitutionAuth",
      //   {
      //     pageNum: this.scalePageNum,
      //     pageSize: this.scalePageSize,
      //     institutionNo: this.institutionNo,
      //     type: this.aType,
      //     searchKey: this.searchKey,
      //   },
      //   (msg) => {
      //       console.log(msg);
      //     this.scaleList = msg.data.data;
      //     this.scaleTotal = msg.data.allNum;
      //   }
      // );
    },

    // 多选添加
    changeHandle(selection) {
      console.log(selection);
      this.checkList = selection;
    },

    // 新增
    addAuthList() {
      this.getAllList();
      this.dialogVisible = true;
      //清空选中项数据
      this.$nextTick(()=>{
          this.$refs.tableSe.clearSelection();
      });
      this.checkList = [];
    },

    // 保存新增权限
    savaNewAuth() {
      let arr = [];
      this.checkList.forEach((el) => {
        arr.push({
          bId: el.bid,
          groupId: this.gId,
          type: el.type,
        });
      });

      const loading = this.$loading({
        lock: true,
        fullscreenLoading: true,
        text: "添加权限中，请耐心等待.....",
        // spinner: 'el-icon-loading',
        // background: 'rgba(0, 0, 0, 0.7)'
      });
      console.log(arr);
      if (arr.length == 0) {
        this.$message.info("未添加权限");
        this.dialogVisible = false;
        loading.close();
        this.loadData();
      } else {
        this.$http.post("group/auth/add", arr, (msg) => {
          this.$message.success("权限新增成功");
          this.dialogVisible = false;
          loading.close();
          this.loadData();
        });
      }
    },

    // 取消保存
    cancelSave() {
      this.dialogVisible = false;
    },

    // 删除已有权限
    delAuthItem(id) {
      this.$confirm("此操作将删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post(
            `group/auth/del`,
            {
              ids: [id],
            },
            (msg) => {
              this.$message.success("删除成功");
              this.loadData();
            }
          );
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.btnArea {
  padding: 20px;
  text-align: center;
}
</style>