角色模板
-
说明 index（父组件） TableCopponentes(子组件 表格 修改按钮 删除按钮 自带分页) SearchComponentes（子组件 搜索） Crumbs（子组件 面包屑） ButtonComponentes（子组件 添加按钮）
-
views/role-manage/index.vue
-
<template> <div> <div id="components-layout-demo-basic"> <a-layout> <a-layout-header style="background: #F0F2F5"> <Crumbs></Crumbs> <!-- 页内标题--> <!-- 添加按钮--> <ButtonComponent @addRole="addRole" :visible=false > </ButtonComponent> </a-layout-header> <a-layout-content> <!-- 搜索组件--> <SearchComponent @onSearch="onSearch" ></SearchComponent> </a-layout-content> <a-layout-footer> <!-- 展示 删除按钮 修改按钮--> <TableComponent @showRole="showRole" @delRole="delRole" @upRole="upRole" :data="data" :pagination.sync="pagination" @pageRole="pageRole" > </TableComponent> </a-layout-footer> </a-layout> </div> </div> </template> <script> import Crumbs from "./componentes/Crumbs"; import SearchComponent from "./componentes/SearchComponent"; import ButtonComponent from "./componentes/ButtonComponent"; import TableComponent from "./componentes/TableComponent"; import {delRole, getRole, postAddRole, upRole} from "../../http/apis"; const key = 'updatable'; export default { components: { //面包屑 Crumbs, //搜索框 SearchComponent, //添加按钮 ButtonComponent, //展示信息 删除 修改按钮 TableComponent, }, name: "RoleManage", data() { return { //控制弹窗 visible: false, //展示数据 data: [], //分页 pagination: { total: 0, pageSize: 10,//每页中显示10条数据 showSizeChanger: true, pageSizeOptions: ["5", "10", "30", "50", "100"],//每页中显示的数据 showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据 }, filterData: {} } }, methods: { // 分页 pageRole(filterData) { var filterData2 = {} for (var key in filterData) { filterData2[key] = filterData[key] } for (var key in this.filterData) { filterData2[key] = this.filterData[key] } this.showRole(filterData2) }, //展示用户 showRole(filterData) { getRole(filterData).then(res => { console.log(res) this.data = res.results this.pagination.total = res.count }) }, //删除用户 delRole(text) { const isDel = confirm("确定删除吗") if (isDel) { delRole({id: text}).then(res => { console.log(res) this.showRole() this.$message.info('删除成功'); }).catch(err => { console.log(err) }) } else { } }, //搜索name ch_name并展示 onSearch(value) { console.log(value); var regex = new RegExp("^[a-zA-Z]+$"); if (value == '') { delete this.filterData["zh_name"] delete this.filterData["name"] } else if (regex.test(value)) { this.filterData["name"] = value } else { this.filterData["zh_name"] = value } console.log(this.filterData) this.showRole(this.filterData) }, //添加用户 addRole(params) { console.log(params.id) postAddRole(params).then(res => { console.log(res) this.showRole() this.visible = false; this.$message.loading({content: '添加中...', key}); setTimeout(() => { this.$message.success({content: '添加成功!', key, duration: 2}); }, 1000); }) this.visible = false; }, //修改用户 upRole(params) { upRole(params).then(res => { console.log(res) this.showRole() this.visible = false; }) this.visible = false; }, }, //钩子方法 mounted() { }, created() { //加载时调用展示用户 this.showRole() }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .h3 { font-weight: 800; margin-left: -3%; margin-top: -20px; } </style>
-
-
views/role-manage/componentes/TableComponentes.vue
-
<template> <div> <a-table :columns="columns" :data-source="data" :rowKey="record => record.id" :pagination.sync="pagination" @change="onShowSizeChange" > <a slot="name" slot-scope="text">{{ text }}</a> <span slot="customTitle"><a-icon type="smile-o"/> 角色</span> <span slot="tags" slot-scope="tags"> <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'" > {{ tag.toUpperCase() }} </a-tag> </span> <span slot="action" slot-scope="text, record"> <a-button type="primary" @click="showModal(text)" style="margin-left: 5px"> 修改 </a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk(text)"> 英文名称 <a-input placeholder="" v-model="name"/> 中文名称 <a-input placeholder="" v-model="zh_name"/> 描述 <a-input placeholder="" v-model="description"/> </a-modal> <a-button type="danger" @click="delRole(text.id)">删除</a-button> </span> </a-table> </div> </template> <script> import {delRole, getRole} from "../../../http/apis"; const columns = [ { dataIndex: 'name', // key: 'Rolename', slots: {title: 'customTitle'}, scopedSlots: {customRender: 'name'}, }, { title: '中文名称', dataIndex: 'zh_name', // key: 'email', }, { title: '描述', // key: 'last_login', dataIndex: 'description', // scopedSlots: {customRender: 'tags'}, }, { title: '操作', // key: 'last_login', scopedSlots: {customRender: 'action'}, }, ]; export default { name: "TableComponent", props: ['data', 'pagination',], data() { return { // data: [], columns, visible: false, zh_name: '', name: '', description: '', pk: '', uid: localStorage.getItem("uid"), } }, //方法 methods: { //分页 onShowSizeChange(pagination) { let pageData = { page_size:pagination.pageSize, page:pagination.current, } this.$emit('pageRole',pageData) }, //修改展示输入框内详情 showModal(text) { this.visible = true; this.name = text.name this.zh_name = text.zh_name this.description = text.description this.pk = text.id }, //调用删除方法 传送text(id) delRole(text) { this.$emit('delRole', text) }, //调用修改方法 并传送数据 以及修改谁（id） handleOk(record) { console.log(this.pk) let params = { name: this.name, zh_name: this.zh_name, description: this.description, id: this.pk, } this.$emit('upRole', params) this.visible = false; }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> </style>
-
-
views/role-manage/componentes/SearchComponentes.vue
-
<template> <div> <div> <a-input-search class="a-input-search" placeholder="请输入角色中文名或英文名" enter-button @search="onSearch"/> <br/><br/> </div> </div> </template> <script> export default { name: "SearchComponent", data() { return {} }, methods: { onChange(date, dateString) { console.log(date, dateString); }, //调用搜索方法 并传送value（输入框内容） onSearch(value) { this.$emit('onSearch', value) }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .a-input-search { width: 400px; margin-left: 35%; } .components-input-demo-size .ant-input { width: 200px; margin: 0 30px 30px 0; } </style>
-
-
views/role-manage/componentes/Crumbs.vue
-
<template> <div> <div> <a-input-search class="a-input-search" placeholder="请输入角色中文名或英文名" enter-button @search="onSearch"/> <br/><br/> </div> </div> </template> <script> export default { name: "SearchComponent", data() { return {} }, methods: { onChange(date, dateString) { console.log(date, dateString); }, //调用搜索方法 并传送value（输入框内容） onSearch(value) { this.$emit('onSearch', value) }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> .a-input-search { width: 400px; margin-left: 35%; } .components-input-demo-size .ant-input { width: 200px; margin: 0 30px 30px 0; } </style>
-
-
views/role-manage/componentes/ButtonComponentes.vue
-
<template> <div> <a-button type="primary" @click="showModal" style="margin-left: 15px;"> + 创建角色 </a-button> <a-modal v-model="visible" title="Basic Modal" @ok="handleOk"> 英文角色名 <a-input placeholder="" v-model="name"/> 中文角色名 <a-input placeholder="" v-model="zh_name"/> 描述 <a-input placeholder="" v-model="description"/> </a-modal> </div> </template> <script> export default { name: "ButtonComponent", data() { return { visible: false, name: '', zh_name: '', description: '', } }, methods: { //调用visible展示弹出框 showModal() { this.visible = true; }, //添加数据并 调用添加用户函数 handleOk() { let params = { name: this.name, description: this.description, zh_name: this.zh_name, } this.$emit('addRole', params) this.visible = false; }, }, //钩子方法 mounted() { }, created() { }, //监听属性 watch: {}, //计算属性 computed: {} } </script> <style scoped> </style>
-