tire-platform-ui/src/components/bill/billDetails.vue

<template>
  <div>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :search.sync="search"
               ref="crud"
               @refresh-change="refreshChange"
               @selection-change="selectionChange"
               @search-change="searchChange"
               @saveColumn="saveColumn"
               @resetColumn="resetColumn"
               :page.sync="page"
               @on-load="onLoad">
      <template slot="costTypeSearch">
        <breakdown-select
            v-model="search.costType"
            :configuration="breakConfiguration"
        ></breakdown-select>
      </template>
      <template slot="corpNameSearch">
        <crop-select v-model="search.corpId" corpType="KH"/>
      </template>
      <template slot-scope="scope" slot="costType">
        <span>{{ scope.row.itemName }}</span>
      </template>
    </avue-crud>
    <div class="dialogButton">
       <span slot="footer" class="dialog-footer" >
           <el-button @click="$emit('closeFun')">取 消</el-button>
           <el-button type="primary" @click="importProMent" :disabled="selectList.length == 0">导入</el-button>
       </span>
    </div>
  </div>
</template>

<script>
import option from './config/details.json'
import { getBillList,getBillListTwo } from "@/api/financialManagement/zpaymentRequest";
import {fleetList} from "@/api/basicData/customerInformation";

export default {
  name: "index",
  props: {
    billType:{
      type: String
    },
    flag:{
      type: Number
    },
    params:{
      type: Object
    },
    itemId: {
      type: String
    },
    closeFun: {
      type: Function
    }
  },
  data(){
    return {
      option:option,
      loading:false,
      search:{},
      data:[],
      selectList:[],
      page: {
        pageSize: 10,
        pagerCount: 5,
        total: 0,
      },
      breakConfiguration:{
        multipleChoices:false,
        multiple:false,
        disabled:false,
        searchShow:true,
        collapseTags:false,
        clearable:true,
        placeholder:'请点击右边按钮选择',
        dicData:[]
      },
    }
  },
  watch:{
    'params.corpId' (newVal,oldVal){
      if(newVal != oldVal){
        this.onLoad(this.page, this.search)
      }
    }
  },
  async created() {
    // this.option = await this.getColumnData(this.getColumnName(45), option);
    fleetList().then(res => {
      this.findObject(this.option.column, "fleetName").dicData = res.data.data
    })
  },
  methods:{
    refreshChange(){
      this.onLoad(this.page);
    },
    searchChange(params,done){
      if (params.createStart){
        params.createStartDate = params.createStart[0]
        params.createEndDate = params.createStart[1]
      }
      this.onLoad(this.page, params);
      done()
    },
    selectionChange(row){
      this.selectList = row
    },
    onLoad(page, params){
      this.loading = true;
      params = {
        ...params,
        ...this.params
      }
      params.billType = this.billType
      if (this.$store.getters.userInfo.tenant_id === "673511") {
        params.type = "CMY"
      }
      params.flag = this.flag
      if (this.billType === "申请" || this.billType === "付费"){
        getBillList(page.currentPage, page.pageSize,params).then(res=>{
          this.data = res.data.data.records
          this.page.total = res.data.data.total
        }).finally(()=>{
          this.loading = false;
        })
      }else if (this.billType === "收费") {
        getBillListTwo(page.currentPage, page.pageSize,params).then(res=>{
          this.data = res.data.data.records
          this.page.total = res.data.data.total
        }).finally(()=>{
          this.loading = false;
        })
      }
    },
    importProMent(){
      this.$emit('importProMent',this.selectList);
    },
    async resetColumn() {
      const inSave = await this.delColumnData(
          this.getColumnName(45),
          option
      );
      if (inSave) {
        this.$message.success("重置成功");
        this.option = option;
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(
          this.getColumnName(45),
          this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
  }
}
</script>
<style scoped>

</style>