tire-platform-ui/src/views/workManagement/receipt/settleAccounts.vue

<template>
  <div>
  <basic-container  v-show="show">
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      :page.sync="page"
      :search.sync="search"
      :table-loading="loading"
      @row-del="rowDel"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @on-load="getList"
      @saveColumn="saveColumn"
    >
      <template slot="corpIdSearch">
        <select-component
          v-model="search.corpId"
          :configuration="configuration"
        ></select-component>
      </template>
      <template slot-scope="scope" slot="corpId">
        {{ scope.row.corpNames }}
      </template>
      <template slot="corpAttnSearch">
        <el-select v-model="search.corpAttn"
                   remote
                   filterable
                   clearable
                   :remote-method="remoteMethod"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.realName"
            :value="item.realName">
          </el-option>
        </el-select>
      </template>
      <template slot-scope="{row,index}" slot="menuLeft">
        <el-button
          icon="el-icon-printer"
          size="small"
          type="primary"
          @click.stop="downFile"
        >报 表
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          icon="el-icon-edit"
          size="small"
          @click.stop="settleAccounts(scope.row, scope.index)"
        >编 辑
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
  <detail-page
    v-if="!show"
    ref="detail"
    @goBack="goBack"
    :detailData="detailData"
  ></detail-page>
  </div>
</template>

<script>
  import option from "./configuration/settleAccounts.json";
  import { getList } from "@/api/workManagement/mainProject";
  import detailPage from "./settleAccountsDetailsPage.vue";
  import { getUserList } from "@/api/workManagement/mainProject";

  export default {
    data() {
      return {
        loading: false,
        show:true,
        detailData:{},
        data: [],
        options:[],
        option: option,
        search:{},
        configuration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          clearable:true,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 10
        }
      };
    },
    components:{
      detailPage
    },
    created() {
      if(this.$route.query.itemId){
        this.detailData={
          itemId:this.$route.query.itemId
        }
        this.show = false;
        this.$store.commit("MAIN_IN_DETAIL");
      }
      getUserList().then(res=>{
        res.data.data.map((item,index)=>{
          if(index <= 20){
            this.options.push(item)
          }
        })
      })
    },
    mounted() {
      // option.height = window.innerHeight - 340 ;
    },
    methods: {
      downFile(){
        let  searchParams = Object.assign({},this.search);
        let param = this.paramsAdjustment(searchParams)

        getList(1, 10000,param).then(res =>{
          const fileData = this.deepClone(res.data.data.records)
          fileData.map(item =>{
            item.corpId = item.corpNames
          })
          this.$Export.excel({
            title: "结算",
            columns: option.column,
            data: fileData,
          });
        })
      },
      //远程模糊
      remoteMethod(query){
        let params = {
          realName : query
        }
        getUserList(params).then(res=>{
          this.options = res.data.data
        })
      },
      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')
        }
        params.flag = 1;
        return params
      },
      getList(page,params) {
        params =  this.paramsAdjustment(params)
        this.loading = true;
        getList(page.currentPage, page.pageSize,params).then(res =>{
          this.data = res.data.data.records
          this.page.total = res.data.data.total
        }).finally(()=>{
          this.loading = false
        })
      },
      //结算
      settleAccounts(row){
        this.detailData = {
          id: row.id
        };
        this.show = false;
        this.$store.commit("MAIN_IN_DETAIL");
      },
      searchChange(params, done) {
        this.getList(this.page, params);
        done();
      },
      sizeChange(val) {
        this.page.pageSize = val;
        this.getList();
      },
      currentChange(val) {
        this.page.currentPage = val;
        this.getList(this.page);
      },
      refreshChange() {
        this.getList(this.page);
      },
      //删除列表后面的删除按钮触发触发(row, index, done)
      rowDel(row, index, done) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        });
      },
      saveColumn(row, column) {
        console.log(row, column);
      },
      goBack() {
        this.detailData=this.$options.data().detailData
        this.show = true;
        this.getList(this.page,this.search)
      },
    }
  };
</script>

<style></style>