item-management-web/src/views/market/payment/list.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <el-tabs v-model="activeName" type="border-card" style="margin-top: 30px;" @tab-click="tabClick">
      <el-tab-pane label="回款认领" name="retPayment">
        <y-page-list-layout :page-list="pageRetData" :page-para="listQuery1" :get-page-list="getRetList">
          <template slot="left">
            <el-input v-model="listQuery1.keyword" placeholder="关键字搜索..." clearable
              style="margin-left: 20px;width: 500px;float: left;">
            </el-input>
            <el-date-picker style="margin-left: 20px;float: left;" v-model="payDate" type="daterange" align="center"
              unlink-panels range-separator="至" start-placeholder="到账时日（开始）" end-placeholder="到账时日（结束）"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-date-picker style="margin-left: 20px;float: left;" v-model="orderDate" type="daterange" align="center"
              unlink-panels range-separator="至" start-placeholder="录入时间（开始）" end-placeholder="录入时间（结束）"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchRetList"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="success" @click="resetRetSearch()">重置
            </el-button>
          </template>
          <parentTable :data="pageRetData.records" slot="table" style="width: 100%;">
            <el-table-column label="付款方" align="center" width='200'>
              <template slot-scope="{row}">
                <span>{{ row.payer }}</span>
              </template>
            </el-table-column>
            <el-table-column label="付款银行" align="center" width='130'>
              <template slot-scope="{row}">
                <span>{{ row.payerBank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="付款金额(元)" align="center">
              <template slot-scope="{row}">
                <span>{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时日" align="center">
              <template slot-scope="{row}">
                <span>{{ row.payDatetime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="已认领(元)" align="center">
              <template slot-scope="{row}">
                <span style="color:green">{{ row.claimAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="未认领(元)" align="center">
              <template slot-scope="{row}">
                <span style="color:red">{{ row.notClaimAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入人" align="center">
              <template slot-scope="{row}">
                <span>{{ row.creator }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" align="center" width='160'>
              <template slot-scope="{row}">
                <span>{{ row.created }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="全部认领" align="center">
              <template slot-scope="{row}">
                <i v-if="row.notClaimAmount <= 0" style="font-size:20px; color:green" class="el-icon-success"></i>
                <i v-else style="font-size:20px; color:RGB(255,106,106)" class="el-icon-warning"></i>
              </template>
            </el-table-column> -->
            <el-table-column label="备注" align="center" width='170'>
              <template slot-scope="{row}">
                <span>{{ row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column label="认领" align="center" width="200">
              <template slot-scope="{row}">
                  <el-button type="success" round @click="openOrders(row.payer,row.amount,row.id)">选择订单</el-button>
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="项目回款" name="first">
        <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
          <template slot="left">
            <el-input v-model="listQuery.itemName" placeholder="项目名称" clearable
              style="margin-left: 20px;width: 320px;float: left;">
            </el-input>
            <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="resetSearch()">重置
            </el-button>
          </template>
          <template slot="right">
            <PermissionButton menu-code="_views_payment_collection_export" class-name="filter-item" round type="primary"
              name="导出" @click="paymentExport">
            </PermissionButton>
          </template>
          <parentTable v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
            <el-table-column label="事业部流水号" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.businessNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目编号" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.oaNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="委托单位" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.clientUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合同签订时间" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.signDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合同金额（元）" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="已收款金额（元）" align="center" width="100">
              <template slot-scope="{row}">
                <span style="color: green">{{ row.payedAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="未收款金额（元）" align="center" width="100">
              <template slot-scope="{row}">
                <span style="color: red">{{ row.notPayedAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250" fixed="right">
              <template slot-scope="{row}">
                <PermissionButton menu-code="_views_market_payment_detailList" class-name="filter-item" type="primary"
                  :page-jump="true" :page-query="{ id: row.id }" round size="mini" />
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
      <el-tab-pane label="认领记录" name="sec">
        <y-page-list-layout :page-list="pageXData" :page-para="listQuery" :get-page-list="getXList">
          <template slot="left">
            <el-input v-model="listQuery.itemName" placeholder="项目名称" clearable
              style="margin-left: 20px;width: 320px;float: left;">
            </el-input>
            <el-input v-model="listQuery.name" placeholder="回款名称" clearable
              style="margin-left: 20px;width: 320px;float: left;">
            </el-input>
            <el-date-picker style="margin-left: 20px;float: left;" v-model="selectDate" type="daterange"
              :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
            </el-date-picker>
            <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchXList"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="resetSearch()">重置
            </el-button>
            <el-button class="filter-item" round type="success" @click="exportPaymentCollect()"
              :disabled="!listQuery.startDate && !listQuery.endDate">导出
            </el-button>
          </template>
          <parentTable v-loading="listLoading" :data="pageXData.records" slot="table" style="width: 100%;">
            <el-table-column label="项目名称" align="center" width="center">
              <template slot-scope="{row}">
                <span>{{ row.itemName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回款名称" align="center" width="310">
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="认领金额" align="center" width="310">
              <template slot-scope="{row}">
                <span>{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="认领日期" align="center" width="310">
              <template slot-scope="{row}">
                <span>{{ row.paymentDate }}</span>
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
      </el-tab-pane>
    </el-tabs>

    <el-dialog width="600px" title="新增回款" :visible.sync="dialogFormVisible"
      custom-class="paymentDialog">
      <el-form ref="dataForm" v-loading="dialogLoading" :model="temp" label-position="right" label-width="110px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="项目名称：" prop="itemName">
          <el-input v-model="temp.itemName" class="filter-item" readonly disabled />
        </el-form-item>

        <el-form-item label="回款名称：" prop="name" :rules="{ required: true, message: '请填写回款名称', trigger: 'blur' }">
          <el-select v-model="temp.name" style="width: 100%;">
            <el-option label="一次性付款" value="一次性付款"></el-option>
            <el-option label="预付款" value="预付款"></el-option>
            <el-option label="尾款" value="尾款"></el-option>
            <el-option label="第一次回款" value="第一次回款"></el-option>
            <el-option label="第二次回款" value="第二次回款"></el-option>
            <el-option label="第三次回款" value="第三次回款"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="回款金额：" prop="amount" :rules="{ required: true, message: '请填写回款金额', trigger: 'blur' }">
          <el-input v-model.number="temp.amount" class="filter-item" type="number">
            <i slot="suffix" style="font-size:normal;margin-right: 10px;line-height: 30px">元</i>
          </el-input>
        </el-form-item>
        <el-form-item label="回款日期：" prop="paymentDate" :rules="{ required: true, message: '请选择日期', trigger: 'blur' }"
          class="filter-item">
          <el-date-picker v-model="temp.paymentDate" type="date" value-format="yyyy-MM-dd" style="width: 100%"
            placeholder="选择日期" class="filter-item" />
        </el-form-item>
        <el-form-item label="">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="save()">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog width="95%" :visible.sync="dialogOrders" center >
      <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
          <template slot="left">
            <el-input v-model="listQuery.itemName" placeholder="项目名称" clearable
              style="margin-left: 20px;width: 320px;float: left;">
            </el-input>
            <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList"
              round>搜索
            </el-button>
            <el-button class="filter-item" style="float: left;" round type="warning" @click="resetSearch()">重置
            </el-button>
            <el-button plain type="danger">付款方：{{ payer }} 付款金额：{{ paymentAmount }}元</el-button>
          </template>
          <parentTable v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
            <el-table-column label="事业部流水号" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.businessNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目编号" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.oaNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center">
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{ row.clientManager }}</span>
              </template>
            </el-table-column>
            <el-table-column label="委托单位" align="center" width="160">
              <template slot-scope="{row}">
                <span>{{ row.clientUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合同签订时间" align="center" width="110">
              <template slot-scope="{row}">
                <span>{{ row.signDate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合同金额（元）" align="center" width="100">
              <template slot-scope="{row}">
                <span>{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="已收款金额（元）" align="center" width="100">
              <template slot-scope="{row}">
                <span style="color: green">{{ row.payedAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="{row}">
                <PermissionButton menu-code="_views_market_payment_add" class-name="filter-item" type="success" round
                size="mini" @click="handleAdd(row.id, row.name,row.orderFundId)" />
              </template>
            </el-table-column>
          </parentTable>
        </y-page-list-layout>
    </el-dialog>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import PermissionButton from '@/components/PermissionButton/PermissionButton'

export default {
  name: 'ViewsMarketPaymentList',
  components: {
    Breadcrumb,
    YPageListLayout,
    PermissionButton,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      isDisable: false,
      tableKey: 0,
      pageData: { records: [] },
      total: 20,
      listLoading: true,
      dialogLoading: false,
      dialogFormVisible: false,
      listQuery: {
        page: 1,
        size: 10,
        descs: 'id',
        itemName: null,
        // 开始时间
        startDate: null,
        // 结束时间
        endDate: null
      },
      listQueryKey: 'keyword',
      importLoading: false,
      temp: {
        name: '',
        amount: '',
        itemName: '',
        itemId: '',
        realAmountId:null,
        orderFundId:null
      },
      activeName: 'retPayment',
      pageXData: { records: [] },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      selectDate: '',
      listQuery1:{
        page: 1,
        size: 10,
        descs: 'id',
        keyword: null,
        startDate: null,
        endDate: null,
        notFinished:true
      },
      pageRetData:{ records: [] },
      orderDate: '',
      payDate: '',
      dialogOrders:false,
      payer:null,
      paymentAmount:null
    }
  },
  created() {
    const that = this;
    if (that.$route.query.current && !isNaN(that.$route.query.current)) {
      that.listQuery.current = parseInt(that.$route.query.current);
    }
    that.getRetList();
  },
  methods: {
    save() {
      if (this.temp.itemId && this.temp.realAmountId) {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$api.payment.add(Object.assign({}, this.temp, {
            })).then(res => {
              if (res.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '新增成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
                this.temp.itemId = null;
                this.temp.name = null;
                this.temp.amount = null;
                this.temp.paymentDate = null;
                this.dialogFormVisible = false
              }
            }).catch(() => {
              this.dialogFormVisible = false
            })
          }
        })
      }
    },
    handleAdd(itemId, itemName,orderFundId) {
      const that = this;
      that.temp.itemId = itemId;
      that.temp.itemName = itemName;
      that.temp.amount = this.paymentAmount;
      that.temp.realAmountId = this.realAmountId;
      that.temp.orderFundId = orderFundId;
      that.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    resetSearch() {
      this.selectDate = '';
      this.$router.push({ query: {} });
      this.listQuery = {
        current: 1,
        size: 10,
        descs: 'id',
        me: false
      }
      this.getList();
      this.getXList();
    },
    searchList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 20
      this.getList();
    },
    searchXList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 20
      this.getXList();
    },
    getList() {
      const that = this
      this.listLoading = true
      const key = {}
      this.$api.payment.itemPayment(Object.assign({}, that.listQuery, key)).then((res) => {
        that.pageData = res.data
        setTimeout(() => {
          that.listLoading = false
        }, 200)
      })
        .catch(() => {
          that.listLoading = false
        })
    },
    getXList() {
      if (this.selectDate) {
        this.listQuery.startDate = this.selectDate[0] + ' 00:00:00';
        this.listQuery.endDate = this.selectDate[1] + ' 23:59:59';
      }
      const that = this;
      this.listLoading = true;
      // console.log(that.listQuery)
      const key = {}
      key[this.listQueryKey] = this.listQuery.description;
      this.$api.payment
        .list(Object.assign({}, that.listQuery, key))
        .then((res) => {
          that.pageXData = res.data
          setTimeout(() => {
            that.listLoading = false
          }, 200)
        })
        .catch(() => {
          that.listLoading = false
        })
    },
    paymentExport() {
      this.$utils.exportUtil(
        "/paymentCollection/item/export", this.listQuery,
        "导出"
      );
    },
    // 回款记录导出
    exportPaymentCollect() {
      this.$utils.exportUtil(
        "/paymentCollection/export", this.listQuery,
        "导出"
      );
    },
    getRetList() {
      this.listQuery1.notFinished = true;
      this.$api.financeRealFund.claimList(Object.assign({}, this.listQuery1)).then(res => {
        if (res.code === 200) {
          this.pageRetData = res.data;
        }
      })
    },
    searchRetList() {
      // 重置分页
      this.listQuery1.page = 1
      this.listQuery1.size = 10
      if (this.payDate) {
        this.listQuery1.startDate = this.payDate[0];
        this.listQuery1.endDate = this.payDate[1];
      }
      if (this.orderDate) {
        this.listQuery1.xStartDate = this.orderDate[0] + ' 00:00:00';
        this.listQuery1.xEndDate = this.orderDate[1] + ' 23:59:59';
      }
      this.getRetList()
    },
    resetRetSearch() {
      this.$router.push({ query: {} });
      this.orderDate = '';
      this.payDate = '';
      this.listQuery1 = {
        current: 1,
        size: 10,
        descs: 'id',
      }
      this.getRetList()
    },
    openOrders(payer,paymentAmount,id){
        this.dialogOrders = true;
        this.payer = payer;
        this.paymentAmount = paymentAmount;
        this.realAmountId = id;
        this.getList();
    },
    tabClick(tab){
      if (tab.name ==  'retPayment'){
          this.getRetList();
      }
      if (tab.name ==  'first'){
          this.getList();
      }
      if (tab.name ==  'sec'){
          this.getXList();
      }

    }
  },
}
</script>
<style lang="scss" scoped>
.right {
  flex: 1;

  .title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 35px;
    margin-bottom: 8px;
  }

  .menu-2-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .menu-2-item {
    display: flex;
    align-items: center;
    color: #656565;
    font-size: 12px;
    width: 230px;
    height: 101px;
    background: rgb(255, 185, 129);
    border-radius: 3px;
    padding-left: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    .text {
      margin-left: 16px;
    }
  }
}

/deep/.paymentDialog {
  border-radius: 20px;
}
</style>