ruoyi-project/java代码/ruoyi-ui/src/views/merits/setting/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-form
            :model="queryParams"
            ref="queryForm"
            v-show="showSearch"
            :inline="true"
          >
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="queryParams.roleName"
                placeholder="请输入角色名称"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" class="two">
          <el-table
            v-loading="loading"
            :data="roleList"
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="角色名称"
              prop="roleName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="权限字符"
              prop="roleKey"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh-right"
                  @click="toRelation(scope.row)"
                  v-hasPermi="['system:role:relation']"
                  >账号等级关联</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      width="30%"
      :before-close="toClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.roleKey" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号等级" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio label="1">一级账号</el-radio>
            <el-radio label="2">二级账号</el-radio>
            <el-radio label="3">三级账号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmit('form')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from "vuex";
import { listRole } from "@/api/system/role";
const { mapActions: role_relation } = createNamespacedHelpers("role_relation");
export default {
  name: "index",
  props: {},
  components: {},
  data: function () {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
      },
      dialog: { title: "账号关联", show: false },
      // 账号关联
      form: {},
      rules: {
        level: [
          { required: true, message: "请选择账号等级", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getDicts("sys_normal_disable").then((response) => {
      this.statusOptions = response.data;
    });
  },
  methods: {
    ...role_relation(["query", "update"]),
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 账号等级关联
    async toRelation(data) {
      // 查询该角色关联信息
      let res = await this.query();
      if (this.$checkRes(res)) {
        let arr = {
          id: res.data.id,
          roleName: data.roleName,
          roleKey: data.roleKey,
        };
        let relation = res.data.relation.find((i) => i.role == data.roleKey);
        if (relation) arr.level = relation.level;
        this.$set(this, `form`, arr);
        this.dialog = { title: "账号关联", show: true };
      }
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = {
            id: this.form.id,
            relation: [{ role: this.form.roleKey, level: this.form.level }],
          };
          let res = await this.update(data);
          if (res.code === 200) {
            this.$message({ type: `success`, message: res.msg });
            this.toClose();
          } else {
            this.$message({ type: `error`, message: res.msg });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 账号关联关闭
    toClose() {
      this.dialog = { title: "账号关联", show: false };
      this.getList();
    },
  },
  computed: {
    ...mapGetters(["roles"]),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 25px 30px 30px;
}
</style>