Smart_platform_ui/src/views/landTransportation/dispatchingCars/index.vue

<template>
  <div>
    <basic-container v-if="show">
      <avue-crud
          :table-loading="loading"
          :data="dataList"
          :page.sync="page"
          ref="crud"
          :option="option"
          @on-load="onLoad"
          @row-del="rowDel"
          @search-change="searchChange">
        <template slot="menuLeft" slot-scope="{size}">
          <el-button type="primary" :size="size" @click="rowSave">新增</el-button>
        </template>
        <template slot-scope="{row,index}" slot="menu">
          <el-button type="text"
                     icon="el-icon-edit"
                     size="small"
                     @click.stop="rowCell(row,index)">编辑</el-button>
          <el-button type="text"
                     icon="el-icon-delete"
                     size="small"
                     @click.stop="$refs.crud.rowDel(row,index)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <detail-page v-else @backToList="backToList" :id="id"></detail-page>
  </div>
</template>

<script>
import detailPage from './detailPage'
import {removeDelegationList, selectInvoiceList} from "@/api/landTransportation";
export default {
  name: "index",
  components: {
    detailPage
  },
  data(){
    return{
      id:'',
      show:true,
      loading:false,
      dataList:[],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10,50,100,200,300]
      },
      option:{
        align:'center',
        index: true,
        addBtn: false,
        editBtn: false,
        delBtn:false,
        height:"auto",
        column:[{
          label: '订单号',
          prop: 'id',
          index: 1,
          width: 140,
          cell: true,
          overHidden: true,
          search:true,
        }]
      }
    }
  },
  methods:{
    onLoad(page, params) {
      let queryParams = {
        size: page.pageSize,
        current: page.currentPage,
        kind: '2',
        ...params
      }
      this.loading = true;
      selectInvoiceList(queryParams).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
      }).finally(() => {
        this.loading = false;
      })
    },
    //搜索
    searchChange(params,done) {
      this.onLoad(this.page,params)
      done();
    },
    //列表删除
    rowDel(row){
      this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeDelegationList({ids:row.id}).then(res=>{
          this.$message.success('删除成功');
          this.onLoad(this.page)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //行编辑
    rowCell(row,index){
      console.log(row.id)
      this.id = row.id
      this.show = false
    },
    rowSave(){
      this.show = false
    },
    backToList(){
      this.show = true
    }
  }
}
</script>

<style scoped>

</style>