vue 前段增删改查代码规范

组件之间的传值使用

 

 1.主组件

<template>
  <a-layout-content>
    <div>{{searchData.zh_name}}</div>
  <!-- 1.面包屑-->
  <a-row>
    <a-col :span="23">
      <BreadCrumb></BreadCrumb>
    </a-col>
    <a-col :span="23" style="margin-top: 20px">
      <h2>角色管理</h2>
    </a-col>
  </a-row>

  <!--2.搜索-->
  <a-row>
    <a-col :span="22">
      <Search style="float: right"
              :searchData.sync="searchData"
              @filterRole="filterRole"
      ></Search>
    </a-col>
  </a-row>

    <!-- 3.弹出框添加 修改 -->
    <a-row style="margin-top: 20px;margin-bottom: 20px">
      <a-button type="primary" @click="showModal">
        新建
      </a-button>
      <a-col :span="23">
        <EditForm
           v-show="visible"
          :visible.sync="visible"
          :editData.sync="editData"
          @addRole="addRole"
         
        ></EditForm>
      </a-col>
    </a-row>


    <!-- 4.table框展示数据 @requestDeleteUser="requestDeleteUser"-->
    <a-row>
      <TableList
        :tableData.sync="tableData"
        :tableColumns="tableColumns"
        :editData.sync="editData"
        :visible.sync="visible"
        @getRole='getRole'
        @requestDeleteUser='requestDeleteUser'
      ></TableList>
    </a-row>

    <!-- 分页 -->
    <a-row>
      <Pagination
        @receivePagition="receivePagition"
        :total.sync="totalCount"
        @getRole='getRole'
      ></Pagination>
    </a-row>
        
       


    </a-layout-content>
</template>


<script>
import BreadCrumb from '@/views/role-manage/components/BreadCrumb'
import TableList from '@/views/role-manage/components/TableList'
import EditForm from '@/views/role-manage/components/EditForm'
import Search from '@/views/role-manage/components/Search'
import Pagination from '@/views/role-manage/components/Pagination'

import { getRoleList } from "@/http/apis";
import { addRole } from "@/http/apis";
import { updateRole } from "@/http/apis";
import { deleteRole } from "@/http/apis";
import { getSearchRole } from "@/http/apis";

const columns = [
    // {
    //     "id": 1,
    //     "zh_name": "总舵主",
    //     "name": "helmsman",
    //     "description": "天地会总舵主，统领80十万江湖好汉，灭清"
    // },
  {
    title: 'Id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '职位',
    dataIndex: 'zh_name',
    key: 'zh_name',
  },
  {
    title: 'English',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '简介',
    key: 'description',
    dataIndex: 'description',
  },
  {
    title: '操作',
    key: 'action1',
    scopedSlots:{customRender:'action'}
  },
 

];

const data = [
    {   
        // "key":'1',
        "id": 1,
        "zh_name": "总舵主",
        "name": "helmsman",
        "description": "天地会总舵主，统领80十万江湖好汉，灭清"
    },
    {
        // "key":'2',
        "id": 2,
        "zh_name": "分舵主",
        "name": "Branch Helm",
        "description": "天地会分舵领导者，顺我者昌，任务：招募"
    },
    // {"key":'3',
    //     "id": 3,
    //     "zh_name": "堂主",
    //     "name": "Hallleader",
    //     "description": "天地会堂主，韦小宝，韦爵爷，卧底王"
    // }
]
;


export default {
    name:'index-rolemanage',
    data(){
        return{
            visible: false,
            editData:{
                    id:0,
                    zh_name: '',
                    name:'',
                    description:'',
                },
            tableData: data,
            tableColumns: columns,
            searchData:{
                zh_name:'',
                },
            tableData: data,
            tableColumns: columns,
            totalCount:0  //后端user表中有多少条数据,
            ,pageData: {
                  page:1,
                  page_size:3,
                },
        }
    },
    components:{
        BreadCrumb,
        TableList,
        EditForm,
        Search,
        Pagination,
    },
    created(){
            this.getRole()
            console.log(1111111)
        },
    methods:{
        //展示
        getRole(){
            getRoleList(this.pageData).then((data)=>{
                // console.log(999999999)
                console.log(data)
                this.tableData =data.results
                this.totalCount=data.count
               
             })
        },
        //弹出框
        showModal() {
             this.visible = true;
        },
        //添加 修改
        addRole() {
            // 根据editData中的id判断是更新还是新增
            // debugger
            console.log(this.editData)
            console.log('999999999999')
            if (this.editData.id) {
                // 如果有id, 修改图书
                // 修改请求
                let params = this.editData
                updateRole(params).then((data)=>{
                console.log(data)
                this.getRole()
                })
            } else {
                // 增加图书
                console.log('1111111111111111111999')
                addRole(this.editData).then((data) => {
                this.getRole()
                })
            }
        },
        //删除
        requestDeleteUser(){
            deleteRole(this.editData).then(res =>{
                this.getRole()
            })
        },
        //搜索
        filterRole(){
            console.log(this.searchData)
            var params=this.searchData
            getSearchRole(params).then(res=>{  
                this.tableData = res
            })
        },
        //分页
        receivePagition(pageParams) {
          console.log(pageParams);
          this.pageData =pageParams;
          this.getRole();
        },
        




},

   
   
}
</script>

1.1 表格子组件 展示

<template>
  <a-table :columns="tableColumns" :data-source="tableData" :rowKey="record => record.id">

    <span slot="action" slot-scope="text, record">

      <a-button type="primary" @click="clickEditButton(record)"> 编辑</a-button>
      <a-button type="danger" @click="clickDeleteButton(record.id)">删除</a-button>
  
    
    
    </span>
  </a-table>
</template>
<script>

// const data = [
//     {   "key":'1',
//         "id": 1,
//         "zh_name": "总舵主",
//         "name": "helmsman",
//         "description": "天地会总舵主，统领80十万江湖好汉，灭清"
//     },
//     {"key":'2',
//         "id": 2,
//         "zh_name": "分舵主",
//         "name": "Branch Helm",
//         "description": "天地会分舵领导者，顺我者昌，任务：招募"
//     },
  
// ]



export default {
  name:'index-tablelist',
  data() {
    return {
    
    };
  },
  props:['tableData','tableColumns','visible','editData',],
  methods:{
  

    clickEditButton(record){
      this.$emit('update:visible',true)
      this.$emit('update:editData',{
        id:record.id,
        zh_name:record.zh_name,
        name:record.name,
        description:record.description,
      })
      console.log(record,'aaaaa')
    },
    clickDeleteButton(userId){
      console.log(userId,222222)
        let isDel = confirm('是否删除' + userId)
        console.log(isDel,111111)
        if(isDel){
          this.$emit('update:editData',{
            id:userId,
          })
          this.$emit('requestDeleteUser')
        }
    }
    

  }




};
</script>

1.2 搜索子组件

<template>
  <div>
    <template>
      <div class="search-input">
        <a-button type="primary" @click="searchSubmit">
          搜索
        </a-button>
      </div>
      <div class="search-input">
        <a-input  v-model="searchData.zh_name" placeholder="职位" />
      </div>



    </template>
  </div>
</template>

<script>
  export default {
    name: "Search02",
    data(){
      return {


      }
    },
    props:['searchData'],
    methods:{
      searchSubmit(){
        // this.$emit('')
        this.$emit('filterRole')
        console.log('ssssssssssssssss1')
      }
    }

  }
</script>

<style scoped>
  .search-input {
    float: right;
    margin-right: 40px
  }

</style>

1.3分页子组件

<template>
  <div>  
    <a-pagination
      v-model="current"
      show-size-changer
      :page-size.sync="pageSize"
      :total="total"
      :page-size-options="pageSizeOptions"
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>



<script>
export default {
  data() {
    return {
      pageSizeOptions: ['1', '3', '5', '10', '20'],
      pageSize: 5,
      current: 1,
    };
  },
  props:['total'],
  watch: {
    pageSize(val) {
//      console.log('pageSize', val);
    },
    current(val) {
//       console.log('current', val);
       this.$emit('receivePagition',{page:val,page_size:this.pageSize})
    },
  },
  methods: {
    onShowSizeChange(current,pageSize) {
      console.log(current, pageSize,"aaaaaa");
      this.$emit('receivePagition',{page:current,page_size:pageSize})
    },
  },
};
</script>

1.4添加和编辑子组件 弹框按钮

<template>
  <div>
    
    <a-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <div>
      <label>职位</label>
        <a-auto-complete
        v-model="editData.zh_name"
        style=" 200px"
        placeholder="input here"
      />
    </div>
     <div>
      <label>English</label>
        <a-auto-complete
        v-model="editData.name"
        style=" 200px"
        placeholder="input here"
      />
    </div> 
    <div>
      <label>简介</label>
        <a-auto-complete
        v-model="editData.description"
        style=" 200px"
        placeholder="input here"
      />
    </div>
    
    </a-modal>
  </div>
</template>

<script>
export default {
  name:'index-EditForm',
  data() {
    return {
      ModalText: 'Content of the modal',
      confirmLoading: false,
      value:""
    };
  },
  props:['visible','editData'],
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
       this.$emit('update:visible',false)
       this.$emit('addRole')
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.$emit('update:visible',false)
    },
  },
};
</script>

1.5 面包屑 子组件

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">列表页</a></a-breadcrumb-item>
    <a-breadcrumb-item><a href="">查询表格</a></a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
    name:"BreadCrumb"
}

</script>

<style scoped>

</style>

2.1 http/apis.js

//将我们http.js中封装好的  get,post.put,delete  导过来
import { axios_get, axios_post, axios_delete, axios_put } from './index.js'


// 书籍管理接口
export const getBookList = (params, headers) => axios_get("/books/book/", params, headers)
export const addBook = (params, headers) => axios_post("/books/book/", params, headers)
export const updateBook = (params, headers) => axios_put("/books/book/", params, headers)
export const delBook = (params, headers) => axios_delete("/books/book/", params, headers)


//用户管理
export const getUserList = (params, headers) => axios_get("/user/user/", params, headers)
export const addUser = (params, headers) => axios_post("/user/user/", params, headers)
export const updateUser = (params, headers) => axios_put("/user/user/"+ params.id +'/', params, headers)
export const deleteUser = (params, headers) => axios_delete("/user/user/"+ params.id +'/', params, headers)
export const getSearchUser = (params, headers) => axios_get("/user/user/", params, headers)


//角色管理
export const getRoleList = (params, headers) => axios_get("/user/role/", params, headers)
export const addRole= (params, headers) => axios_post("/user/role/", params, headers)
export const updateRole= (params, headers) => axios_put("/user/role/"+ params.id +'/', params, headers)
export const deleteRole= (params, headers) => axios_delete("/user/role/"+ params.id +'/', params, headers)
export const getSearchRole= (params, headers) => axios_get("/user/role/", params, headers)


//按照格式确定方法名
export const user_login = p => axios_post("/user/login/", p)  //
export const get_dept_list = p => axios_get("/account/deptManage/", p)  //

2.2 http/index.js