order-ui-pc/src/views/serviceParam/supplierCat/CatModal.vue

<template>
  <el-dialog class="cat-modal"  top="6vh" width="800px" title="分类列表" :visible="_visible" @close="handleClose" append-to-body center>

    <el-row class="cat-modal__header" gutter="10">
      <el-col :span="8">
        <el-input v-model="params.cat_name" size="mini" placeholder="分类名称" @change="pageInfo.page=1;onSearch()" />
      </el-col>
    </el-row>

    <el-table size="mini" border v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"  />
      <el-table-column label="序号" type="index"  />
      <el-table-column label="分类名称" prop="search"  />
    </el-table>

    <div class="cat-modal__bottom">
      <el-pagination
        size="mini"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
        background
      />
      <el-button size="mini" type="primary" @click="submit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import asyncRequest from '@/apis/service/serviceParam/supplierCat'
export default {
  name: "CatModal",
  props:['visible'],
  computed:{
    _visible:{
      get(){
        return this.visible;
      },
      set(newVal){
        this.$emit('update:visible', newVal);
      }
    }
  },
  watch:{
    visible:{
      handler(newVisible){
        if(!newVisible) return;
        this.onSearch();
      },
      immediate: true
    }
  },
  data(){
    return {
      params:{
        cat_name: ""
      },
      selected:[],
      tableData:[],
      loading: false,
      pageInfo:{
        size: 10,
        page: 1,
        total:0
      },
    }
  },
  methods:{
    submit(){
      if(this.selected.length === 0) {
        this.$message,warning("请选择分类");
        return
      }

      this.$emit("selection-change",this.selected)
      this._visible = false;
    },
    handleSelectionChange(data){
      this.selected = data.map(({ id, search }) => ({ id, search }))
    },
    handleCurrentChange(page){
      this.pageInfo.page = page;
      this.onSearch();
    },
    handleClose(){
      this._visible = false;
    },
    async onSearch(){
      this.loading = true;
      const { size,page } = this.pageInfo;
      const result = await asyncRequest.cat_list({
        size, page,
        ...this.params
      });

      this.loading = false;
      this.tableData = result.data.list;;
      this.pageInfo.total = result.data.count;
    }
  }
}
</script>

<style lang="scss" scoped>
.cat-modal{

  &__header {
    display: flex;
    margin-bottom: 10px;
  }

  &__bottom {
    display: flex;
    justify-content: space-between;
    margin-top:10px;
  }
}
</style>