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",
        searchSpan: 8,
        searchIcon: true,
        column:[{
          label: '状态',
          prop: 'itemStatusDetail',
          index: 1,
          width: 140
        }, {
          label: '订单号',
          prop: 'id',
          index: 1,
          overHidden: true,
          width: 160,
          search: true,
        }, {
          label: '客户名称',
          prop: 'corpName',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '所属公司',
          prop: 'corpName',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '提单号',
          prop: 'billNo',
          index: 1,
          overHidden: true,
          width: 140,
          search: true,
        }, {
          label: '货物名称',
          prop: 'goods',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '路线',
          prop: 'id',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '场站',
          prop: 'station',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '到厂时间',
          prop: 'arrivalTime',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '工厂名称',
          prop: 'factory',
          overHidden: true,
          index: 1,
          width: 140,
          search: true,
        }, {
          label: '制单日期',
          overHidden: true,
          prop: 'createTime',
          index: 1,
          width: 140,
          search: true,
        }]
      }
    }
  },
  created() {
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
  },
  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>