union-question-web/src/modules/questions/views/data_previllege.vue

<template>
  <div>
    <LinkTitlesCustom :current-paths="['用户管理', '权限设置']" />
    <section class="content">
      <div v-loading.body="loading" class="box box-info">
        <!-- 正文信息 -->
        <div class="box-body">
          <el-form
            ref="form"
            :inline="true"
            :model="form"
            inline-message
            label-position="right"
          >
            <el-row>
              <el-col :span="18"
                ><span>{{ userName }}</span></el-col
              >
              <el-col :span="6"
                ><div style="margin-bottom: 10px">
                  <el-button type="primary" size="small" @click="save"
                    >保存</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-arrow-left"
                    @click="back"
                    >返回</el-button
                  >
                </div></el-col
              >
            </el-row>
            <div class="block-seperator"></div>
            <el-row>
              <el-form-item label="审核权限">
                <el-radio-group v-model="form.auditAuthority" class="input">
                  <el-radio label="FIRST">初级</el-radio>
                  <el-radio label="SECOND">中级</el-radio>
                  <el-radio label="THIRD">高级</el-radio>
                </el-radio-group></el-form-item
              >
              <el-button type="primary" size="small" @click="clear"
                >清空</el-button
              >
            </el-row>
            <div class="block-seperator"></div>
            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="关联课程" name="tab1">
                <el-row class="mb-2">
                  <el-switch
                    v-model="form.defaultStatusCourse"
                    active-text="全部课程"
                    @change="(enabled) => saveDefaultStatus('Course', enabled)"
                  ></el-switch>
                  <div v-if="!form.defaultStatusCourse" class="float-right">
                    <el-button
                      size="small"
                      type="danger"
                      icon="el-icon-delete"
                      :disabled="noBatchSelectedCourse"
                      @click="deleteBatch('Course')"
                      >删除</el-button
                    >
                    <el-button
                      size="small"
                      type="primary"
                      icon="el-icon-plus"
                      @click="addCourse"
                      >添加</el-button
                    >
                  </div>
                </el-row>
                <el-row v-if="!form.defaultStatusCourse">
                  <div>
                    <el-table
                      ref="tableCourse"
                      :data="tableDataCourse"
                      border
                      resizable
                      stripe
                      style="width: 100%"
                      @selection-change="selectChange"
                    >
                      <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                      />
                      <el-table-column width="85" label="课程ID">
                        <span slot-scope="scope">{{ scope.row.courseId }}</span>
                      </el-table-column>
                      <el-table-column width="200" label="课程代码">
                        <span slot-scope="scope">{{
                          scope.row.courseCode
                        }}</span>
                      </el-table-column>
                      <el-table-column label="课程名称">
                        <span slot-scope="scope">{{
                          scope.row.courseName
                        }}</span>
                      </el-table-column>
                      <el-table-column width="100" label="层次">
                        <span slot-scope="scope">{{
                          scope.row.courseLevel
                        }}</span
                        >>
                      </el-table-column>
                    </el-table>
                    <div class="page pull-right">
                      <el-pagination
                        v-if="paginationShow"
                        :current-page="currentPageCourse"
                        :page-size="pageSizeCourse"
                        :page-sizes="[10, 20, 50, 100, 200, 300]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCourse"
                        @current-change="handleCurrentChangeCourse"
                        @size-change="handleSizeChangeCourse"
                      />
                    </div>
                  </div>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </div>
      </div>
    </section>
    <DataPrevillegeAddCourseDialog
      ref="addCourseDialog"
      :user-id="form.userId"
      :root-org-id="form.rootOrgId"
      @reload="init"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { QUESTION_API } from "@/constants/constants.js";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
import { object2QueryString } from "@/utils/utils";
import DataPrevillegeAddCourseDialog from "./data_previllege_add_course";

export default {
  name: "DataPrevillege",
  components: {
    LinkTitlesCustom,
    DataPrevillegeAddCourseDialog,
  },
  data() {
    return {
      userName: "",
      rolePrivileges: {
        user_data_rule_setting: false,
      },
      loading: false,
      style: {
        label_width_tab1: "160px",
        label_width_tab2: "160px",
        label_width_tab3: "160px",
      },
      activeName: "tab1",
      toActiveName: null,
      form: {
        userId: "",
        rootOrgId: null,
        defaultStatusCourse: false,
        auditAuthority: "",
      },
      paginationShow: false,
      selectedChanged: false,
      tableDataCourse: [],
      noBatchSelectedCourse: true,
      currentPageCourse: 1,
      pageSizeCourse: 10,
      totalCourse: 10,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  async created() {
    await this.initPrivileges();
    if (!this.rolePrivileges.user_data_rule_setting) {
      this.$alert("没有权限访问！", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          this.back();
        },
      });
      return;
    }

    this.form.userId = this.$route.params.userId;
    this.form.rootOrgId = this.$route.params.rootOrgId;
    await this.init();
    this.$nextTick(function () {
      this.paginationShow = true;
    });
  },
  methods: {
    async save() {
      try {
        await this.$httpWithMsg.post(
          QUESTION_API + "/user/updateAuditAuthority",
          {
            auditAuthority: this.form.auditAuthority,
            id: this.form.userId,
          }
        );

        this.$notify({
          type: "success",
          message: "保存成功",
        });
        await this.back();
      } catch (error) {
        console.log(error);
      }
    },
    clear() {
      this.form.auditAuthority = null;
    },
    async init() {
      this.$httpWithMsg
        .get(QUESTION_API + "/user/" + this.form.userId)
        .then((res) => {
          this.userName = res.data.name + "(" + res.data.roleNamesStr + ")";
          this.form.auditAuthority = res.data.auditAuthority;
        });
      const reqs = [];
      const defaultPrevilleges = ["COURSE"];
      for (const defP of defaultPrevilleges) {
        let url =
          QUESTION_API +
          "/user/data/rule/default/status?" +
          `userId=${this.form.userId}&type=${defP}`;
        reqs.push(this.$httpWithMsg.post(url));
      }

      const preVillegeList = ["Course"];

      for (const defP of preVillegeList) {
        let url =
          QUESTION_API + "/user/data/rule/list/for/" + defP.toLowerCase();
        const pageNo = this.$data["currentPage" + defP];
        const pageSize = this.$data["pageSize" + defP];
        reqs.push(
          this.$httpWithMsg.post(url, {
            userId: this.form.userId,
            pageNo,
            pageSize,
          })
        );
      }

      try {
        this.loading = true;

        const promiseAll = await Promise.all(reqs);
        // console.log(promiseAll);
        this.form.defaultStatusCourse = promiseAll[0].data;
        this.tableDataCourse = promiseAll[1].data.content;
        this.currentPageCourse = promiseAll[1].data.number + 1;
        this.totalCourse = promiseAll[1].data.totalElements;
      } finally {
        this.loading = false;
      }
    },
    noBatchSelected(type) {
      if (!this.$refs[type + "Table"]) return false;
      console.log(this.$refs[type + "Table"].selection.length);
      return this.$refs[type + "Table"].selection.length;
    },
    selectChange() {
      this.noBatchSelectedCourse =
        this.$refs.tableCourse && !this.$refs.tableCourse.selection.length;
    },
    handleSizeChangeCourse(val) {
      this.pageSizeCourse = val;
      this.currentPageCourse = 1;
      this.init();
    },
    handleCurrentChangeCourse(val) {
      this.currentPageCourse = val;
      this.init();
    },
    back() {
      this.$router.back();
    },
    async saveDefaultStatus(type, enabled) {
      try {
        await this.$httpWithMsg.post(
          QUESTION_API +
            "/user/data/rule/default/status/update?" +
            object2QueryString({
              enabled,
              type: type.toUpperCase(),
              userId: this.form.userId,
            })
        );
        this.$notify({
          type: "success",
          message: "更新成功",
        });
      } catch (error) {
        this.form["defaultStatus" + type] = !enabled;
      }
    },
    async deleteBatch(type) {
      const refIds = this.$refs["table" + type].selection.map((v) => v.refId);

      try {
        await this.$httpWithMsg.post(QUESTION_API + "/user/data/rule/delete", {
          refIds,
          type: type.toUpperCase(),
          userId: this.form.userId,
        });

        this.$notify({
          type: "success",
          message: "删除成功",
        });
        await this.init();
      } catch (error) {
        console.log(error);
      }
    },
    addCourse() {
      this.$refs.addCourseDialog.openDialog();
    },
    async initPrivileges() {
      let params = new URLSearchParams();
      params.append(
        "privilegeCodes",
        Object.keys(this.rolePrivileges).toString()
      );
      var url = QUESTION_API + "/rolePrivilege/checkPrivileges?" + params;
      await this.$httpWithMsg.post(url).then((response) => {
        this.rolePrivileges = response.data;
      });
    },
  },
};
</script>
<style scoped>
.content {
  width: 800px;
}

.input >>> .el-input__inner {
  -webkit-appearance: button;
}
</style>