角色模板前端

角色模板

• 说明
  index（父组件）
  TableCopponentes(子组件 表格 修改按钮 删除按钮 自带分页)
  SearchComponentes（子组件 搜索）
  Crumbs（子组件 面包屑）
  ButtonComponentes（子组件 添加按钮）
  
  

1. views/role-manage/index.vue

   1. <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>
      
      

2. views/role-manage/componentes/TableComponentes.vue

   1. <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>
      
      

3. views/role-manage/componentes/SearchComponentes.vue

   1. <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 {
         400px;
        margin-left: 35%;
      
      }
      
      .components-input-demo-size .ant-input {
         200px;
        margin: 0 30px 30px 0;
      }
      </style>
      
      

4. views/role-manage/componentes/Crumbs.vue

   1. <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 {
         400px;
        margin-left: 35%;
      
      }
      
      .components-input-demo-size .ant-input {
         200px;
        margin: 0 30px 30px 0;
      }
      </style>
      
      

5. views/role-manage/componentes/ButtonComponentes.vue

   1. <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>