tire-platform-ui/src/views/financialManagement/billDetails/billDetails.vue

<template>
  <basic-container>
    <avue-crud :option="option"
               :data="dataList"
               ref="crud"
               v-model="form"
               :page.sync="page"
               :search.sync="search"
               :table-loading="loading"
               :cell-style="cellStyle"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               :row-style="rowStyle"
               :key="key"
               v-if="key>0"
               @on-load="onLoad"
               @saveColumn="saveColumn"
               @resetColumn="resetColumn"
               @search-criteria-switch="searchCriteriaSwitch"
    >
      <template slot="corpIdSearch">
        <select-component
          v-model="search.corpId"
          :configuration="configuration"
        ></select-component>
      </template>
      <template slot="costTypeSearch">
        <breakdown-select
          v-model="search.costType"
          :configuration="breakConfiguration"
        ></breakdown-select>
      </template>
      <template slot-scope="scope" slot="corpId">
        <span>{{ scope.row.corpName }}</span>
      </template>
      <template slot-scope="scope" slot="costType">
        <span>{{ scope.row.itemName }}</span>
      </template>
      <template slot-scope="scope" slot="billType">
        <span>{{ scope.row.billType == "申请"?"付费":"收费" }}</span>
      </template>
      <template slot-scope="{type,size,row,$index}" slot="menuLeft">
        <el-button class="el-icon-download" type="warning" size="small" @click="outExport">导出</el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          icon="el-icon-delete"
          size="small"
          :disabled="scope.row.billType === '申请' ||  scope.row.settlementAmount != 0"
          @click.stop="rowDel(scope.row)"
        >删除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import option from "./configuration/mainList.json";
  import { getBillList, removeDetail } from "@/api/financialManagement/paymentRequest";
  import _ from "lodash";
  import {getToken} from "@/util/auth";

  export default {
    data() {
      return {
        loading : false,
        form: {},
        search:{},
        detailData:{},
        option: {},
        parentId:0,
        dataList: [],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        key:0,
        query:{},
        configuration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          clearable:true,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        breakConfiguration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          clearable:true,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
      }
    },
    async created() {
      this.option = await this.getColumnData(this.getColumnName(60), option);
      this.key++
    },
    mounted() {
      // option.height = window.innerHeight - 200 ;
    },
    methods: {
      rowStyle(data){
        if(_.subtract(data.row.settlementAmount, data.row.amount) < 0){
          return  {
            color: "rgba(220,0,0,0.56)"
          }
        }
      },
      //新单打开
      addReceipt(row){
        console.log(1)
      },
      //编辑打开
      editOpen(row){
        console.log(1)
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      currentChange(val) {
        this.page.currentPage = val
      },
      refreshChange(params) {
        this.onLoad(this.page,params);
      },
      //点击搜索按钮触发
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done()
      },

      paramsAdjustment(params) {
        params = Object.assign({}, this.search);
        if (params.createTime &&  params.createTime.length !==0 ) {  //合同
          params.createStartDate = params.createTime[0]+ " " + "00:00:00";
          params.createEndDate = params.createTime[1] + " " + "23:59:59";
          this.$delete(params,'createTime')
        }
        return params
      },
      outExport() {
        let params = {...this.search}
        if (params.createTime &&  params.createTime.length !==0 ) {  //合同
          params.createStartDate = params.createTime[0]+ " " + "00:00:00";
          params.createEndDate = params.createTime[1] + " " + "23:59:59";
          this.$delete(params,'createTime')
        }
        const routeData = this.$router.resolve({
          path: '/api/trade-finance/acc/exportAccOut',      //跳转目标窗口的地址
          query: {
            ...params    //括号内是要传递给新窗口的参数
          }
        })
        window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        params = this.paramsAdjustment(params)
        getBillList(page.currentPage, page.pageSize,params).then(res=>{
          this.dataList = res.data.data.records
          this.page.total = res.data.data.total
          if (this.page.total) {
            this.option.height = window.innerHeight - 240;
          }
        }).finally(()=>{
          this.loading = false;
        })
      },
      searchCriteriaSwitch(type){
        if (type){
          this.option.height = this.option.height - 96
        }else {
          this.option.height = this.option.height + 96
        }
        this.$refs.crud.getTableHeight()
      },
      cellStyle() {
        return "padding:0;height:40px;";
      },
      //列保存触发
      async saveColumn() {
        const inSave = await this.saveColumnData(
          this.getColumnName(60),
          this.option
        );
        if (inSave) {
          this.$message.success("保存成功");
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
      async resetColumn() {
        const inSave = await this.delColumnData(
          this.getColumnName(60),
          option
        );
        if (inSave) {
          this.$message.success("重置成功");
          this.option = option;
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
      rowDel(row){
        this.$confirm("确定删除数据?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (row.id) {
            removeDetail({ids: row.id}).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.dataList.splice(row.$index, 1);
            })
          } else {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.dataList.splice(row.$index, 1);
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>