Smart_platform_ui/src/components/bill/selectOrderDetailList.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"
      @search-reset="searchReset" @saveColumn="saveColumn" @current-change="currentChange" @size-change="sizeChange"
      :summaryMethod="summaryMethod" :page.sync="page" @on-load="onLoad">
      <template slot="costTypeSearch">
        <breakdown-select v-model="search.costType" :configuration="breakConfiguration"></breakdown-select>
      </template>
      <template slot="menuLeft">
        <el-tabs v-model="activeName" @tab-click="tabHandle">
          <el-tab-pane label="查询结果" name="searchList"></el-tab-pane>
          <el-tab-pane label="已选定数据" name="importStaging"></el-tab-pane>
        </el-tabs>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text" icon="el-icon-edit" size="small" @click.stop="importStagList(scope.row, scope.index)"
          v-if="activeName == 'searchList'" :disabled="goodsListSave.findIndex(item => item.id == scope.row.id) !== -1">选择
        </el-button>
        <el-button type="text" icon="el-icon-delete" size="small" @click.stop="removeStagList(scope.row, scope.index)"
          v-else>移除
        </el-button>
      </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="goodsListSave.length == 0">导入</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import option from './config/mainLists.json'
import { getListOrder, orderListBySettlement } from "@/api/financialManagement/paymentRequest";

export default {
  name: "index",
  props: {
    billType: {
      type: String
    },
    flag: {
      type: Number
    },
    params: {
      type: Object
    },
    itemId: {
      type: String
    },
    closeFun: {
      type: Function
    }
  },
  data() {
    return {
      activeName: "searchList",
      option: option,
      loading: false,
      search: {},
      data: [],
      selectList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [20, 200, 300, 500, 700, 1000]
      },
      breakConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
      goodsListShow: [],
      goodsListSave: []
    }
  },
  watch: {
    'params.corpId'(newVal, oldVal) {
      console.log(newVal, 87)
      if (newVal != oldVal) {
        this.onLoad(this.page, this.search)
      }
    },
  },
  async created() {
    // this.option = await this.getColumnData(this.getColumnName(281), option);
  },
  mounted() {
    this.onLoad(this.page, this.params)
  },
  methods: {
    importStagList(row, index) {
      // this.goodsListSave.push(row);
      this.$refs.crud.toggleSelection([row]);
    },
    removeStagList(row, index) {
      this.goodsListSave.splice(row.$index, 1);
    },
    // 标签页切换
    tabHandle(data) {
      if (data.name == "searchList") {
        this.goodsListSave = this.data;
        this.data = this.goodsListShow;
        this.page.total = this.page.totalTwo
      } else if (data.name == "importStaging") {
        this.goodsListShow = this.data;
        this.data = this.goodsListSave;
        this.page.totalTwo = this.page.total;
        this.page.total = 0;
      }
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    searchReset() {
      this.onLoad(this.page, this.params);
    },
    searchChange(params, done) {
      if (params.createStart) {
        params.createStartDate = params.createStart[0]
        params.createEndDate = params.createStart[1]
      }
      params = {
        ...this.params,
        ...params,
      }
      this.onLoad(this.page, params);
      done()
    },
    selectionChange(row) {
      // this.selectList = row
      this.goodsListSave = row
    },
    summaryMethod({ columns, data }) {
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          let prop = column.property
          if (['goodsTotalNum', 'totalMoney', 'returnsNumber', 'returnsAmount', 'balanceAmount', 'returnsBalanceAmount'].includes(prop)) {
            if (this.goodsListSave.length > 0) {
              let values = this.goodsListSave.map(item => Number(item[prop] || 0));
              let all = values.length !== 0 ? sums[index] = values.reduce((a, b) => {
                return a + b;
              }) : 0
              if (prop == 'goodsTotalNum' || prop == 'totalMoney' || prop == 'returnsNumber' || prop == 'returnsAmount' || prop == 'balanceAmount' || prop == 'returnsBalanceAmount') {
                sums[index] = all
              }
            } else {
              let values = this.data.map(item => Number(item[prop] || 0));
              let all = values.length !== 0 ? sums[index] = values.reduce((a, b) => {
                return a + b;
              }) : 0
              if (prop == 'goodsTotalNum' || prop == 'totalMoney' || prop == 'returnsNumber' || prop == 'returnsAmount' || prop == 'balanceAmount' || prop == 'returnsBalanceAmount') {
                sums[index] = all
              }
            }
          } else {
            sums[index] = ''
          }
        });
      }
      return sums;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params) {
      params = {
        ...this.params,
        ...params,
      }
      if (params && params.rentStartDate) {
        params.createStartDate = params.rentStartDate[0] + " " + "00:00:00" ? params.rentStartDate[0] + " " + "00:00:00" : '';
        params.createEndDate = params.rentStartDate[1] + " " + "23:59:59" ? params.rentStartDate[1] + " " + "23:59:59" : '';
        this.$delete(params, 'rentStartDate')
      }
      this.loading = true;
      // 把老数据进行更新  从父组件调用的子组件方法
      if (params.customerId != this.params.customerId) {
        this.params = params
      }
      // params = {
      //   // ...params,
      //     ...page,
      //     ...this.params
      // }

      // ...this.params 使用之前的老数据 回请求之前的ID造成数据不对
      params.billType = this.billType
      if (this.$store.getters.userInfo.tenant_id === "673511") {
        params.type = "CMY"
      }
      params.flag = this.flag
      if (this.params.bsType == 'XS,TKXS') {
        params.settlementType = 'd'
      } else {
        params.settlementType = 'c'
      }
      orderListBySettlement(page.currentPage, page.pageSize, params).then(res => {
        this.data = res.data.data.records
        this.page.total = res.data.data.total
      }).finally(() => {
        this.loading = false;
      })
      // getListOrder(page.currentPage, page.pageSize, params).then(res => {
      //     console.log(res,155)
      //     this.data = res.data.data.records
      //     this.page.total = res.data.data.total
      // }).finally(() => {
      //     this.loading = false;
      // })
    },
    importProMent() {
      this.$emit('importProMent', this.goodsListSave);
    },
    //列保存触发
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(281),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
  }
}
</script>
<style scoped></style>