vue后台管理

删除

//删除按钮
<el-button type="danger" class="el-but" @click="remove(scope.row)">
 <i class="el-icon-delete"></i>删除</el-button>

//弹框
<!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>是否确定删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="removess()">确 定</el-button>
      </span>
    </el-dialog>

//data数据
//角色删除
      dialogVisible: false,
      //删除的id
      rem: 0,

//事件
// 删除弹出框显示
    remove(row) {
      this.dialogVisible = true;
      this.rem = row.id;
      console.log(row);
    },
    // 删除角色
    removess() {
      this.dialogVisible = false;
      rolessanc(this.rem).then((res) => {
        this.roles();
      });
    },

编辑

<!-- 编辑提示框 -->
    <div class="yinchang" v-show="bianjier">
      <div class="tckuang" v-show="bianjier">
        <p><a>编辑角色</a><a class="cuo" @click="bianjier = false">×</a></p>
        <div class="inp">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              hide-required-asterisk="true"
              label="角色名称"
              prop="email"
            >
              <el-input
                type="username"
                v-model="ruleForm.roleName"
                autocomplete="off"
                class="el-inputss"
              ></el-input>
            </el-form-item>
            <el-form-item
              hide-required-asterisk="true"
              label="角色描述"
              prop="mobile"
            >
              <el-input
                type="username"
                v-model="ruleForm.roleDesc"
                autocomplete="off"
                class="el-inputss"
              ></el-input>
            </el-form-item>
            <el-form-item class="el-butts">
              <el-button @click="bianjier = false">取消</el-button>
              <el-button type="primary" @click="submitForm(ruleForm)"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

//数据
//编辑框是否显示
      bianjier: false,
      //编辑框input显示数据
      ruleForm: {},
      //角色编辑
      jsbianjier: [],
rules: {
        // 编辑框判断格式
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 100, message: "请输入正确的格式", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          { min: 2, max: 100, message: "请输入正确的格式", trigger: "blur" },
        ],
      },


//事件
// 编辑
    compild(row) {
      //console.log(row);
      this.bianjier = true;
      this.jsbianjier = row;
      this.ruleForm = row;
    },
    // 编辑弹框
    submitForm() {
      // console.log(this.ruleForm);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var id = this.ruleForm.id;
          var roleName = this.ruleForm.roleName;
          var roleDesc = this.ruleForm.roleDesc;
          rolesbianj(id, {
            roleName,
            roleDesc,
          }).then((res) => {
            this.roles();
          });
          this.bianjier = false;
        } else {
          return false;
        }
      });
    },

用户、角色和权限的关系

1. 用户：使用者；

2. 角色：身份

3. 权限：有权利做什么事情

添加

<!-- 添加提示框 -->
    <div class="yinchang" v-show="tianjiaer">
      <div class="tckuang" v-show="tianjiaer">
        <p><a>添加角色</a><a class="cuo" @click="tianjiaer = false">×</a></p>
        <div class="inp">
          <el-form
            :model="reFrom"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              hide-required-asterisk="true"
              label="角色名称"
              prop="email"
            >
              <el-input
                type="username"
                v-model="reFrom.roleName"
                autocomplete="off"
                class="el-inputss"
              ></el-input>
            </el-form-item>
            <el-form-item
              hide-required-asterisk="true"
              label="角色描述"
              prop="mobile"
            >
              <el-input
                type="username"
                v-model="reFrom.roleDesc"
                autocomplete="off"
                class="el-inputss"
              ></el-input>
            </el-form-item>
            <el-form-item class="el-butts">
              <el-button @click="tianjiaer = false">取消</el-button>
              <el-button type="primary" @click="jstianjia(reFrom)"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>


//data数据
//添加角色 隐藏-显示
      tianjiaer: false,
      //添加角色
      reFrom: {
        roleName: "",
        roleDesc: "",
      },
rules: {
        //添加框判断格式
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 100, message: "请输入正确的格式", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          { min: 2, max: 100, message: "请输入正确的格式", trigger: "blur" },
        ],
      },


//事件
// 添加
    tianjia() {
      this.tianjiaer = true;
    },
    // 添加角色
    jstianjia(reFrom) {
      console.log(reFrom);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var roleName = this.reFrom.roleName;
          var roleDesc = this.reFrom.roleDesc;
          rolestianj({
            roleName,
            roleDesc,
          }).then((res) => {
            this.roles();
          });
          console.log();
          this.tianjiaer = false;
        } else {
          return false;
        }
      });
      this.reFrom.roleName = "";
      this.reFrom.roleDesc = "";
    },