O acima é a renderização do gerenciamento de funções
A. Crie a página primeiro
<modelo>
<div class="container" v-if="tabIndex === 2">
<!-- Pesquisar -->
<div class="role-header">
<el-botão
tipo = "primário"
icon="el-icon-circle-plus-outline"
simples
tamanho = "pequeno"
@click="OnAdd(' ')" //A diferença entre isso e modificação é que quando SrId está vazio, ele é adicionado, e se não estiver vazio, ele é modificado
>Adicionar</el-botão
>
<div>
<el-entrada
v-model="roleName" //Para ser definido no retorno dos dados, a busca aqui é filtrar de acordo com a interface
placeholder="Por favor insira o nome da função"
style="largura: 220px; margem direita: 20px"
</el-input>
<el-button type="primary" @click="onSubmit()" >查询</el-button>
</div>
</div>
<!-- Corpo da tabela -->
<el-tabela
:dados="lista"
altura="calc(100vh - 270px )"
fronteira
listra
estilo = "largura: 100%"
>
<!-- <el-table-column type="index" width="55" /> -->
<el-table-column type="seleção" largura="55" />
<el-table-column prop=" SrName " label="nome da função" width="220">
</el-table-column>
//De acordo com o nome da interface
<el-table-column prop=" SrDescribe " label="角色描述"> </el-table-column>
//Aqui está o estado do formato Switch padrão para TRUE ou FALSE, Boolean, mas a interface real é 1 e 2, digital
<el-table-column prop=" SrStatus " label="状态">
<template slot-scope="escopo">
<el-switch
v-model=" scope.row.SrStatus "
:valor ativo="1"
:valor inativo = "2"
cor ativa = "#13ce66"
cor inativa = "#ff4949"
>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="date" label="操作">
<template slot-scope="scope">//Deve haver aqui, na verdade, este é o slot --- v-slot
<el-botão
tipo = "primário"
icon="el-icon-edit"
simples
@click="OnAdd(scope.row.SrId)"
tamanho = "pequeno"
>Modificar</el-button
>
<el-botão
tipo = "primário"
icon="el-icon-delete"
simples
@click="deleteaccount(scope.row.SrId)" //Passe o SrId da linha a ser excluída
tamanho = "pequeno"
>Excluir</el-botão
>
</template>
</el-table-column>
</el-table>
<!-- Paginação -->
<el-paginação
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:página atual = "página"
:tamanhos de página="[15, 30, 45, 60, 75, 100]"
:page-size.sync="linhas"
layout = "total, tamanhos, anterior, pager, próximo, jumper"
:total="total"
estilo = "margem superior: 20px"
>
</el-paginação>
<!-- Janela pop-up -->
<o-diálogo
:title="dialogTitle ? 'Adicionar informações da função' : 'Modificar informações da função'" // Redefinir nos dados
:visible.sync="dialogFormVisible"
:modal="modal"//Remove a camada de máscara
largura = "30%"
>
<el-formulário
:model="ruleForm"
:regras="regras"
ref="ruleForm"
largura do rótulo = "100px"
class="demo-ruleForm"
>
<el-form-item label="nome da função" prop=" SrNome ">
<el-selecionar
v-model=" regraForm.SrName "
filtrável
eliminável
placeholder="Selecione uma função"
>
<el-opção
v-for="(item, índice) em opções"
:key="índice"
:label="item. SrNome "
:value="item.SrName "// SrId foi escrito aqui na época, e o conteúdo da caixa suspensa apareceu e não pôde ser salvo. Na verdade, deveria ser SrName
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Status da função" prop="SrStatus">
<a caixa de seleção
label="Ativar função"
nome="tipo"
:value="this.ruleForm.SrStatus === 1"
v-bind:true-value="checka"
v-bind:false-value="checkb"
@change="changeRememberMe"
</el-checkbox>
</el-form-item>
<el-form-item label="Descrição da função" prop="SrDescribe">
<el-input v-model=" regraForm.SrDescribe "></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addaccount()" >确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<roteiro>
padrão de exportação {
nome: "Função",
adereços: {
tabIndex: {
tipo: [String, Número],
padrão: "2",
},
},
dados() {
retornar {
lista: [], //lista de dados
roleName: "", //Pesquisar
total: 0, //número total
página: 1, //página atual
linhas: 15, //Número de itens exibidos em uma página
dialogFormVisible: false, //A janela pop-up está oculta
dialogTitle: true, //Nome da janela pop-up, true significa nova adição, false significa modificação
//A caixa de entrada pop-up na verdade não usa muitos dados aqui. É melhor escrever todos os campos na interface. (Quando eu estava escrevendo, pensei apenas em novas adições, e escrevi apenas as três primeiras. Mais tarde, quando modifiquei, ocorreu um erro porque a modificação adicionou mais campos do que o novo)
regraForm: {
SrNome: "", //nome
SrStatus: "", //Status
SrDescribe: "", //Descrição
SrId: "",
SrGrupo: "",
SrMenus: "",
SrBotões: "",
SrCreateTime: "",
},
//Verificação de regras
regras: {
// SrNome: [
// { obrigatório: verdadeiro, mensagem: "Por favor, insira um nome de personagem", trigger: "desfoque" },
//],
SrId: [
{ obrigatório: verdadeiro, mensagem: "Digite o nome de um personagem", gatilho: "desfoque" },
],
},
modal: false, //fecha a camada da máscara
// O status da janela pop-up é 1 se estiver marcada e 0 se não estiver marcada
verificar: 1,
verificaçãob: 0,
opções: [], // dados da caixa suspensa na janela pop-up
};
},
montado() {
// Obtém dados de gerenciamento de funções
this.getQuerySysRole();
},
métodos: {
//Adiciona e modifica o botão OK da janela pop-up
adicionar Conta() {
var tipo = "editar";
if (this.dialogTitle) {
tipo = "adicionar";
}
var novoFormData = new FormData();
newFormData.append("SrNome", this.ruleForm.SrNome);
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, type).then((res) => {
//console.log(res);
if (res.código == 200) {
this.getQuerySysRole();
this.dialogFormVisible = falso;
if (tipo == "adicionar") {
this.$message.success("Adicionado com sucesso");
} outro {
this.$message.success("modificado com sucesso");
}
}
});
},
// Adicionar/modificar informações de função --- usar SrId para determinar se deseja adicionar ou modificar
OnAdd( srId ) {
if (srID == "") {
//Esvazia uma vez
this.ruleForm = {
SrNome: "", //nome
SrStatus: "", //Status
SrDescribe: "", //Descrição
SrId: "",
SrGrupo: "",
SrMenus: "",
SrBotões: "",
SrCreateTime: "",
};
this.dialogFormVisible = verdadeiro;
this.dialogTitle = verdadeiro;
} outro {
//Outra interface é ajustada aqui. Ao clicar para modificar, SrId é usado para obter toda a linha de dados.
var novoFormData = new FormData();
newFormData.append("SrId", srId);
this.$api.QueryGetRoleByID(newFormData).then((res) => {
//console.log(res);
this.ruleForm = res.data;
});
this.dialogTitle = falso;
this.dialogFormVisible = verdadeiro;
}
},
//Status na janela pop-up
alterarLembrarMe(valor) {
se (valor) {
this.ruleForm.SrStatus = this.checka;
} outro {
this.ruleForm.SrStatus = this.checkb;
}
},
// número de páginas
handleSizeChange(val) {
isto.rows = val;
},
// pagina atual
handleCurrentChange(val) {
esta.página = val;
},
// Delete-- delete para chamar a interface de exclusão
deletar conta( srid ) {
var novoFormData = new FormData();
newFormData.append( "id",srid) ;
this.$api.QueryDeleteSysRole(newFormData).then((res) => {
if ( res.código == 200) {
this.$message.success("Excluído com sucesso");
this.getQuerySysRole();
} else if (res.código == 97) {
this.$message.success("Esta função possui usuários");
}
});
},
// A consulta foi filtrada na interface e é consultada com base no nome da função.
onSubmit() {
// Aqui você precisa chamar a interface dos dados do formulário uma vez
this.getQuerySysRole();
},
// Obtenha dados de gerenciamento de função --- e então chame o método modificado em montado(). Os dados serão exibidos quando a página for atualizada.
--- A interface geralmente está no formato json, não deste tipo, escrever esse tipo de interface significa que é muito cansativo
getQuerySysRole() {
var novoFormData = new FormData();
newFormData.append( "página", this.page );
newFormData.append( "linhas", this.rows );
newFormData.append("nomedatabela", "sysrole");
newFormData.append("paginação", "1");
//Pesquisa e filtra
if (this.roleName! = "") {
novoFormData.append(
"Onde está a",
"[{'campo':'SrNome','relação':'Contém','valor':'" +
this.roleName +
"'}]"
);
}
this.$api.QuerySysRole(newFormData).then((res) => {
//console.log(res);
esta.lista = res.dados;
this.total = res.total; //Total de dados da página
this.options = res.data;//Dados na caixa suspensa na janela pop-up
});
},
},
};
</script>
<estilo lang="menos">
.role-header {
exibição: flexível;
margem inferior: 10px;
justificar-conteúdo: espaço entre;
}
</estilo>