Yi.Vue2.x.Vuetify/src/views/AdmUser.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <material-card color="primary" icon="mdi-account-outline">
    <template #title>
      用户管理 — <small class="text-body-1">用户可拥有多个角色</small>
    </template>
    <ccCombobox headers="设置角色" :items="roleItems" @select="getSelect" itemText="roleName">
      <template v-slot:save>
        <v-btn @click="setRole" color="blue darken-1" text> 保存</v-btn>
      </template>
    </ccCombobox>
    <ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" :btnEnable="btnEnable"
      @selected="getTableSelect">
      <template v-slot:action="{ item }">
        <v-icon small class="mr-2" @click="showItem(item)"> mdi-eye </v-icon>
      </template>
    </ccTable>
  </material-card>
</template>
<script>
import userApi from "../api/userApi";
import roleApi from "../api/roleApi";
import { getBtn } from "../util/btnHandle";
export default {
  created() {
    this.init();
  },

  methods: {
    async showItem(item) {
      var strInfo = "";
      userApi.GetRoleListByUserId(item.id).then(async (resp) => {
        var roleData = resp.data;
        strInfo += "拥有的角色:<br>";
        if (roleData != null) {
          roleData.forEach((u) => {
            strInfo += u.roleName + "<br>";
          });
        }

        strInfo += "<hr>";
        Object.keys(item).forEach(async function (key) {
          strInfo += key + ":" + item[key] + "<br>";
        });

        await this.$dialog.confirm({
          text: strInfo,
          title: "信息详情",
          actions: {
            true: "关闭",
          },
        });
      });
    },
    init() {
      //这里可以遍历后台的菜单code，根据对应的菜单code来给axiosUrls的增删改查赋值即可
      this.btnEnable = getBtn("user")
      this.axiosUrls = {
        get: "/user/GetList",
        update: "/user/Update",
        del: "/user/DeleteList",