Lo anterior es la representación de la gestión de roles.
A. Construya la página primero
<plantilla>
<div class="contenedor" v-if="tabIndex === 2">
<!-- Buscar -->
<div class="rol-encabezado">
<el-botón
tipo="primario"
icon="el-icon-circulo-mas-esquema"
plano
tamaño = "pequeño"
@click="OnAdd(' ')" // Esto es diferente de la modificación. Cuando SrId está vacío, se agrega y cuando SrId no está vacío, se modifica.
>Nuevo</el-botón
>
<div>
<el-entrada
v-model="roleName" // Para definir en la devolución de datos, la búsqueda aquí se filtra según la interfaz
placeholder="Por favor ingrese el nombre del rol"
estilo="ancho: 220px; margen derecho: 20px"
>>el-entrada>
<el-button type="primary" @click="onSubmit()" >查询</el-button>
</div>
</div>
<!-- Cuerpo de la tabla -->
<el-tabla
:datos="lista"
altura="calcular(100vh - 270px)"
borde
raya
estilo="ancho: 100%"
>
<!-- <el-table-column tipo="index" ancho="55" /> -->
<el-table-column tipo="selección" ancho="55" />
<el-table-column prop=" NombreSr " etiqueta="Nombre de rol" ancho="220">
</el-tabla-columna>
//Según el nombre de la interfaz
<el-table-column prop=" SrDescribe " label="角色描述"> </el-table-column>
//Este es el estado del formulario. Cambie el valor predeterminado a VERDADERO o FALSO, tipo booleano, pero las interfaces reales son 1 y 2, tipo digital.
<el-table-column prop=" SrStatus " label="状态">
<plantilla slot-scope="alcance">
<el-interruptor
v-model=" alcance.fila.SrStatus "
:valor-activo="1"
:valor-inactivo="2"
color-activo="#13ce66"
color-inactivo="#ff4949"
>
</el-switch>
</plantilla>
</el-tabla-columna>
<el-table-column prop="fecha" etiqueta="操作">
<template slot-scope="scope">// Debe estar aquí, de hecho, esta es la ranura--- v-slot
<el-botón
tipo="primario"
icono="el-icono-editar"
plano
@click="OnAdd(alcance.row.SrId)"
tamaño = "pequeño"
>Modificar</el-botón
>
<el-botón
tipo="primario"
icono="el-icono-eliminar"
plano
@click="deleteaccount(scope.row.SrId)" //Pase el SrId de la fila modificada que se eliminará
tamaño = "pequeño"
>Eliminar</el-botón
>
</plantilla>
</el-tabla-columna>
</el-tabla>
<!-- Paginación -->
<el-paginación
@cambio-tamaño="manejarCambioTamaño"
@cambio-actual="manejarCambioCurrent"
:página-actual="página"
:tamaños de página="[15, 30, 45, 60, 75, 100]"
:tamaño de página.sync="filas"
diseño="total, tamaños, anterior, buscapersonas, siguiente, puente"
:total="total"
estilo="margen-superior: 20px"
>
</el-paginación>
<!-- Ventana emergente -->
<el-dialog
:title="dialogTitle ? 'Agregar información de rol' : 'Modificar información de rol'" // Redefinir en datos
:visible.sync="dialogFormVisible"
:modal="modal"//Eliminar la capa de máscara
ancho="30%"
>
<el-formulario
:model="formulario de regla"
:reglas="reglas"
ref="formulario de regla"
ancho de etiqueta = "100 px"
clase="demo-ruleForm"
>
<el-form-item label="Nombre de rol" prop=" NombreSr ">
<el-seleccionar
v-model=" reglaForm.SrName "
filtrable
borrable
placeholder="Por favor seleccione un rol"
>
<el-opción
v-for="(elemento, índice) en opciones"
:clave="índice"
:label="elemento. SrName "
:value="item. SrName "// Lo que estaba escrito aquí era SrId y apareció un mensaje que indicaba que el contenido del cuadro desplegable no se podía guardar. De hecho, debería ser SrName.
>
</el-opción>
</el-select>
</el-form-item>
<el-form-item label="Estado del rol" prop="SrStatus">
<el-checkbox
etiqueta="Habilitar rol"
nombre="tipo"
:valor="this.ruleForm.SrStatus === 1"
v-bind:true-value="checka"
v-bind:false-value="verificarb"
@cambio="cambiarRecuérdame"
>>el-casilla de verificación>
</el-form-item>
<el-form-item label="Descripción del rol" prop="SrDescribe">
<el-input v-model=" ruleForm.SrDescribe "></el-input>
</el-form-item>
</el-form>
<div slot="pie de página" clase="pie de página de diálogo">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addaccount()" >确 定</el-button>
</div>
</el-diálogo>
</div>
</plantilla>
<guión>
exportar predeterminado {
nombre: "Rol",
accesorios: {
índice de pestaña: {
tipo: [Cadena, Número],
predeterminado: "2",
},
},
datos() {
devolver {
lista: [], //lista de datos
Nombre de rol: "", //Buscar
total: 0, //número total
página: 1, //página actual
filas: 15, //Número de filas mostradas en una página
dialogFormVisible: false, //La ventana emergente está oculta
dialogTitle: true, //Nombre de la ventana emergente, true significa nueva adición, false significa modificación
// El cuadro de entrada emergente en realidad no usa tantos datos aquí, es mejor escribir todos los campos en la interfaz. (Cuando estaba escribiendo, solo pensé en nuevas adiciones y solo escribí las tres primeras. Luego, cuando lo modifiqué, ocurrió un error porque la modificación agregó más campos que el nuevo)
formulario de regla: {
NombreSr: "", //nombre
EstadoSr: "", //Estado
SrDescribe: "", //Descripción
SrId: "",
Grupo Sr: "",
SrMenús: "",
SrBotones: "",
SrCreateTime: "",
},
// verificación de reglas
normas: {
// NombreSr: [
// {requerido: verdadero, mensaje: "Ingrese el nombre del rol", disparador: "desenfoque" },
// ],
SrId: [
{requerido: verdadero, mensaje: "Ingrese el nombre del rol", activador: "desenfoque" },
],
},
modal: false, //Cerrar la capa de máscara
// El estado marcado de la ventana emergente es 1 y el estado no marcado es 0
comprobar: 1,
marca de verificación: 0,
opciones: [],// datos del cuadro desplegable en la ventana emergente
};
},
montado() {
// Obtener datos de gestión de roles
this.getQuerySysRole();
},
métodos: {
// Agrega y modifica el botón Aceptar de la ventana emergente
añadir cuenta() {
tipo var = "editar";
si (this.dialogTitle) {
tipo = "agregar";
}
var newFormData = nuevo FormData();
newFormData.append("NombreSr", this.ruleForm.NombreSr);
newFormData.append("SrStatus", this.ruleForm.SrStatus);
newFormData.append("SrDescribe", this.ruleForm.SrDescribe);
newFormData.append("SrId", this.ruleForm.SrId);
newFormData.append("SrGroup", this.ruleForm.SrGroup);
newFormData.append("SrMenus", this.ruleForm.SrMenus);
newFormData.append("SrButtons", this.ruleForm.SrButtons);
newFormData.append("SrCreateTime", this.ruleForm.SrCreateTime);
this.$api.QueryAddSysRole(newFormData, tipo).luego((res) => {
// consola.log(res);
si (código res. == 200) {
this.getQuerySysRole();
this.dialogFormVisible = falso;
si (tipo == "agregar") {
this.$message.success("Agregado exitosamente");
} demás {
this.$message.success("Modificación exitosa");
}
}
});
},
// Agregar/modificar información de rol --- usar SrId para determinar si agregar o modificar
AlAgregar( srId ) {
si (srId == "") {
//Borrar una vez
this.ruleForm = {
NombreSr: "", //nombre
EstadoSr: "", //Estado
SrDescribe: "", //Descripción
SrId: "",
Grupo Sr: "",
SrMenús: "",
SrBotones: "",
SrCreateTime: "",
};
this.dialogFormVisible = verdadero;
this.dialogTitle = verdadero;
} demás {
// Aquí se ajusta otra interfaz. Cuando hace clic para modificar, use SrId para obtener la fila completa de datos
var newFormData = nuevo FormData();
newFormData.append("SrId", srId);
this.$api.QueryGetRoleByID(newFormData).luego((res) => {
// consola.log(res);
this.ruleForm = res.data;
});
this.dialogTitle = falso;
this.dialogFormVisible = verdadero;
}
},
//Estado en la ventana emergente
cambiarRecuérdame(valor) {
si (valor) {
this.ruleForm.SrStatus = this.checka;
} demás {
this.ruleForm.SrStatus = this.checkb;
}
},
// número de páginas
manejarTamañoCambio(val) {
this.filas = val;
},
// página actual
manejarCurrentChange(val) {
esta.página = val;
},
// Eliminar-- eliminar para llamar a la interfaz de eliminación
eliminar cuenta ( srid ) {
var newFormData = nuevo FormData();
newFormData.append( "id", srid) ;
this.$api.QueryDeleteSysRole(newFormData).luego((res) => {
si ( res.código == 200) {
this.$message.success("Eliminación exitosa");
this.getQuerySysRole();
} si no (res.código == 97) {
this.$message.success("Este rol tiene usuarios");
}
});
},
// La consulta se ha filtrado en la interfaz y se basa en la consulta del nombre del rol.
enEnviar() {
// Aquí necesitas ajustar la interfaz de datos del formulario una vez
this.getQuerySysRole();
},
// Obtenga los datos de administración de roles --- luego llame al método de modificación en montado (), y la página mostrará los datos cuando se actualice
--- La interfaz generalmente está en formato json, no este tipo, escribir este tipo de interfaz significa que es muy agotador
getQuerySysRole() {
var newFormData = nuevo FormData();
newFormData.append ( "página", esta.página );
newFormData.append( "filas", this.rows );
newFormData.append("tableName", "sysrole");
newFormData.append("paginación", "1");
//Buscar y filtrar
si (this.roleName! = "") {
nuevoFormData.append(
"dónde",
"[{'campo':'NombreSr','relación':'Contiene','valor':'" +
este.nombredefunción +
"'}]"
);
}
this.$api.QuerySysRole(newFormData).luego((res) => {
// consola.log(res);
esta.lista = res.data;
this.total = res.total;//Datos totales de la página
this.options = res.data;//Datos en el cuadro desplegable de la ventana emergente
});
},
},
};
</script>
<estilo lang="menos">
.encabezado de rol {
pantalla: flexible;
margen inferior: 10px;
justificar contenido: espacio entre;
}
</estilo>