角色模板前端

角色模板

说明
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 {
   400px;
  margin-left: 35%;

}

.components-input-demo-size .ant-input {
   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 {
   400px;
  margin-left: 35%;

}

.components-input-demo-size .ant-input {
   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>

相关阅读:
悲悯心洞悉真相
 查看逍遥模拟器端口号
 delphi中Tstringlist分割字符串的用法
 delphi中httpencode使用注意事项
 DELPHI常用类型及定义单元
 左旋转字符串
 链表中倒数第k个节点
 二叉树镜像
 用两个栈实现队列
 从尾到头打印链表
原文地址：https://www.cnblogs.com/wyx-zy/p/14059291.html