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
            v-show="showSearch"
            ref="queryForm"
            :model="queryParams"
            :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
                  v-hasPermi="['system:role:relation']"
                  size="mini"
                  type="text"
                  icon="el-icon-refresh-right"
                  <<<<<<<
                  h-e-a-d
                  @click="toRelation(scope.row)"
                >账号等级关联</el-button>
                =======
                >账号等级关联</el-button
                >
                >>>>>>> b8ad5e67a5de874abca06f3e9ae1247ae844ea55
              </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-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.roleKey" disabled />
        </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')
import _ from 'lodash'
export default {
  name: 'Index',
  components: {},
  props: {},
  data: function() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined
      },
      dialog: { title: '账号关联', show: false },
      // 账号关联
      form: {},
      info: {},
      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) {
      // 查询该角色关联信息
      const res = await this.query()
      if (this.$checkRes(res)) {
        this.$set(this, `info`, res.data)
        const arr = { roleName: data.roleName, roleKey: data.roleKey }
        const relation = res.data.relation.find((i) => i.roleKey == 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) {
          const data = this.info
          const relation = [this.form, ...data.relation]
          data.relation = _.uniqBy(relation, 'roleName')
          console.log(data)
          const 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>