Smart_platform_ui/src/views/maintenance/rebate/index.vue

<template>
  <div>
    <basic-container>
      <avue-crud :option="option" :data="dataList" ref="crud" v-model="form" :page.sync="page" :search.sync="search"
        @search-change="searchChange" @current-change="currentChange" @size-change="sizeChange"
        @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading" @saveColumn="saveColumn"
        @resetColumn="resetColumn" @expand-change="expandChange" @row-update="rowUpdate">
        <template slot-scope="{row,index}" slot="expand">
          <avue-crud :data="row.insideList" :option="expandOption">
            <template slot="headerSerial">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addRow(row)" circle>
              </el-button>
            </template>
            <template slot="menu" slot-scope="{row,index}">
              <el-button size="small" icon="el-icon-edit" type="text" @click.stop="rowCell(row)">
                {{ row.$cellEdit ?
                    "保存" :
                    "修改"
                }}</el-button>
            </template>
          </avue-crud>
          <!-- <el-table :data="scope.row.insideList" v-loading="scope.row.loading">
            <el-table-column  label="订单号" prop="orderNo" align="center" show-overflow-tooltip width="200"></el-table-column>
            <el-table-column  label="变动总返利" prop="changeProfitReturn" align="center" show-overflow-tooltip width="200"></el-table-column>
            <el-table-column  label="变动已用返利" prop="changeUsedProfit" align="center" show-overflow-tooltip width="200">
            </el-table-column>
            <el-table-column  label="变动可用返利" prop="changeSurplusProfit" align="center" show-overflow-tooltip width="200"></el-table-column>
            <el-table-column  label="变动本月待到账返利" prop="changeMonthProfit" align="center" show-overflow-tooltip width="200"></el-table-column>
            <el-table-column  label="变动时间" prop="createTime" align="center" show-overflow-tooltip width="200"></el-table-column>
          </el-table> -->
          <!-- <el-pagination
            :total="page.total"
            small
            hide-on-single-page
            @size-change="insideSizeChange"
            @current-change="insideCurrentChange"
          ></el-pagination> -->
        </template>
        <template slot="corpIdSearch">
          <crop-select v-model="search.corpId" corpType="KH"></crop-select>
        </template>
        <template slot-scope="scope" slot="corpId">
          {{ scope.row.corpName }}
        </template>
        <template slot-scope="{ row, index }" slot="profitReturn">
          <el-input v-if="row.$cellEdit" v-model="row.profitReturn" placeholder="请输入" size="small"
            oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            @change="profitChange(row)"></el-input>
          <span v-else>{{ row.profitReturn }}</span>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import option from './config/mainList.json';
import { customerList, getRebateDetail } from "@/api/basicData/customerInformation";
import { typeSave } from "@/api/basicData/customerInformation";

export default {
  name: "index",
  data() {
    return {
      option: {},
      dataList: [],
      form: {},
      page: {
        pageSize: 10,
        pagerCount: 5,
        total: 0,
      },
      search: {},
      loading: false,
      saveProfit: 0,
      insidePage: {
        total: 0,
        size: 10,
        current: 1,
      },
      expandOption: {
        border: true,
        align: 'center',
        menuAlign: 'center',
        header: false,
        index: true,
        editBtn: false,
        delBtn: false,
        menuWidth: "80",
        dialogClickModal: false,
        indexSlot: true,
        column: [
          {
            label: '订单号',
            prop: 'orderNo',
            width: 100,
            overHidden: true
          }, {
            label: '变动总返利',
            prop: 'changeProfitReturn',
            overHidden: true,
            width: 120,
            cell: true
          }, {
            label: '变动已用返利',
            prop: 'changeUsedProfit',
            width: 120,
            overHidden: true
          }, {
            label: '变动可用返利',
            prop: 'changeSurplusProfit',
            width: 120,
            overHidden: true
          }, {
            label: '变动本月待到账返利',
            prop: 'changeMonthProfit',
            width: 160,
            overHidden: true
          }, {
            label: '变动时间',
            prop: 'createTime',
            width: 120,
            overHidden: true
          }
        ]
      },
    }
  },
  async created() {
    // this.option = option
    this.option = await this.getColumnData(this.getColumnName(68), option);
    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: {
    searchChange(params, done) {
      this.onLoad(this.page, params);
      done();
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    refreshChange() {
      this.dataList.forEach(item => {
        this.$refs.crud.toggleRowExpansion(item, false)
      })
      this.page.currentPage = 1;
      this.onLoad(this.page, this.search);
    },
    onLoad(page, params = { parentId: 0 }) {
      this.dataList.forEach(item => {
        this.$refs.crud.toggleRowExpansion(item, false)
      })
      let queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
        corpsTypeId: '',
        corpType: 'KH'
      });
      this.loading = true;
      customerList(queryParams).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;
        }
        this.dataList.forEach(item => {
          this.$set(item, 'insideList', [])
          this.$set(item, 'loading', true)
        })
      }).finally(() => {
        this.loading = false;
      });
    },
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(68),
        this.option
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    async resetColumn() {
      this.option = option;
      const inSave = await this.delColumnData(
        this.getColumnName(68),
        option
      );
      if (inSave) {
        this.$message.success("重置成功");
        //关闭窗口
        this.$refs.crud.$refs.dialogColumn.columnBox = false;
      }
    },
    //编辑
    rowCell(row) {
      if (row.$cellEdit) {
        typeSave(row).then(res => {
          this.$message.success('保存成功')
          this.$set(row, "$cellEdit", false);
        })
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    // 修改保存调用
    rowUpdate(row, index, done) {
      typeSave(row).then(res => {
        this.$message.success(row.id ? '修改成功' : '新增成功')
      })
      done()
    },
    profitChange(row) {
      if (Number(row.profitReturn) < Number(row.usedProfit)) {
        row.profitReturn = this.saveProfit
        return this.$message.error('总返利不能小于使用返利')
      }
      row.surplusProfit = (Number(row.profitReturn) - Number(row.usedProfit)).toFixed(2)
    },
    expandGetList() {
      // const data = {
      //   corpId: row.id
      // }
      // getRebateDetail({corpId: row.id}).then(res => {
      //   row.insideList = res.data.data? res.data.data.records: []
      //   row.loading = false
      // })
    },
    addRow(row) {
      row.insideList.push({corpId:row.id,$cellEdit: true })
    },
    // 表格展开触发
    expandChange(row, index) {
      if (row.loading) {
        getRebateDetail({ corpId: row.id }).then(res => {
          row.insideList = res.data.data ? res.data.data.records : []
          row.loading = false
        })
      }
    },
    insideSizeChange(val) {
      this.insidePage.size = val
    },
    insideCurrentChange(val) {
      this.insidePage.current = val
    },
  },
}
</script>

<style scoped>
/deep/ .el-table__expanded-cell .el-table__header-wrapper .cell {
  font-size: 8px !important;
}

/deep/ .el-table__body-wrapper .cell {
  font-size: 8px;
}
</style>