commission-Payment.vue

<template>
  <div style="padding: 20px">
    <el-card  class="box-card">
      <div slot="header" class="clearfix" style="font-size: 20px;">
        {{$t('佣金付款单')}}
      </div>
      <el-form  label-width="80px" label-position="left">
        <el-row :gutter="30">
          <el-col :span="7">
            <el-form-item :label="$t('付款单号')">
              <el-input :placeholder="$t('请输入付款单号')" v-model="queryParams.paymentNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('客户')">
              <el-input :placeholder="$t('请输入客户')" v-model="queryParams.searchKey"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('状态')">
              <dict-selector clearable :type="DICT_TYPE.ECW_PAYMENT_STATE" v-model="queryParams.state" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="$t('业务员')">
              <el-select v-model="queryParams.salesmanName" :placeholder="$t('请选择业务员')">
                <el-option
                  v-for="item in creatorData"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.nickname"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="7">
            <el-form-item :label="$t('创建时间')">
                <el-date-picker
                  style="width:100%;"
                  v-model="selectDate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  :start-placeholder="$t('开始日期')"
                  :end-placeholder="$t('结束日期')">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('发票状态')">
              <el-select
                clearable
                v-model="queryParams.invoiceStatus"
                :placeholder="$t('请选择是否开票')">
                <el-option :label="$t('未开票')" value="0" />
                <el-option :label="$t('已开票')" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('账单号')">
              <el-input :placeholder="$t('请输入账单号')" v-model="queryParams.accountNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button size="mini" type="primary" @click="queryParams.page = 1;getList()">{{$t('查找')}}</el-button>
              <el-button type="success" size="mini" @click="$router.push({path:'/financial/commission-requestFunds',query:{payableId:0}})"  v-has-permi="['ecw:commission-Payment:add']" >{{$t('新增请款单')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-table border  :data="list" style="margin-top: 30px">
      <el-table-column align="center" type="index" :label="$t('序号')"></el-table-column>
      <el-table-column align="center"  prop="paymentNo" :label="$t('付款单号')">
        <template v-slot="{row}">
          <router-link :to="{path:'/financial/commission-requestFunds',query:{[[0].includes(row.state) ? 'id' : 'lookId' ]:row.id}}">{{row.paymentNo}} </router-link>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="customerName" :label="$t('客户')"></el-table-column>
      <el-table-column align="center" :label="$t('创建时间')">
        <template v-slot="{row}">
          {{parseTime(row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('最后付款时间')">
        <template v-slot="{row}">
          {{parseTime(row.latestPayAt)}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="invoiceStatus" :label="$t('发票')">
        <template v-slot="{row}">
          {{row.invoiceStatus ? $t('已开票') : $t('未开票')}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('状态')" prop="state" >
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.ECW_PAYMENT_STATE"
            :value="scope.row.state"
          />
          <span v-if="[2,4,6].includes(scope.row.state) && scope.row.comment" :title="scope.row.comment"><i class="el-icon-question"></i></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')">
       <template v-slot="{row}">
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:edit']" v-if="[0,2].includes(row.state)" @click="$router.push({path:'/financial/commission-requestFunds',query:{id:row.id}})" >{{$t('编辑')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:delete']" @click="deleteFn(row)" v-if="[0,2].includes(row.state)" > {{$t('删除')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:details']"  v-if="[7,3,1,5].includes(row.state)" @click="$router.push({path:'/bpm/process-instance/detail',query:{id:row.bmpId}})"   >{{$t('审核详情')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:Unapprove']" v-if="[1].includes(row.state)" @click="bridgeFn($t('取消审核'),7, row, $t('取消审核') )"  >{{$t('取消审核')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:De-approval']" v-if="[4,].includes(row.state)" @click="bridgeFn($t('佣金付款单反审核'), 1, row, $t('提交反审核'),)" >{{$t('反审核')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:Write-off']" v-if="[4,].includes(row.state)" @click="bridgeFn($t('佣金付款单核销申请'), 2, row, $t('提交核销'))"  >{{$t('核销')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:print']" v-if="[4,6].includes(row.state)" @click="$router.push({path:'/financial/printPaymentVoucherCommission',query:{id:row.id}})"  >{{$t('打印')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:CancelWrite-off']" v-if="[6,].includes(row.state)" @click="bridgeFn($t('佣金付款单反核销申请'), 3, row, $t('提交反核销'))" >{{$t('反核销')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:CancelDe-approval']" v-if="[3].includes(row.state)" @click="bridgeFn($t('取消佣金付款单反审核'),4, row, $t('提交取消反审核') )" >{{$t('取消反审核')}}</el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:CancelWrite-off']" v-if="[5].includes(row.state)"  @click="bridgeFn($t('取消佣金付款单核销'),5, row, $t('取消付款单核销') )" > {{$t('取消核销')}} </el-button>
         <el-button type="text" size="mini" v-has-permi="['ecw:commission-Payment:CancelCancellingWrite-off']"  v-if="[7].includes(row.state)"  @click="bridgeFn($t('取消佣金付款单反核销'),6, row, $t('取消付款单反核销') )" > {{$t('取消反核销')}} </el-button>
       </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
    <!--对话框 审核 -->
    <el-dialog @close="paymentValue = ''"  width="30%" :title="paymentTitle" :visible.sync="paymentShow">
      <div class="cancel_content">
        <span>{{ $t('申请理由') }}</span>
        <el-input type="textarea" :rows="6" v-model="paymentValue" :placeholder="[1,2,3].includes(paymentIndex) ? $t('请输入申请理由') : $t('请输入取消理由')"></el-input>
      </div>
      <span slot="footer" class="dialog-footers">
        <el-button type="primary" @click="cancelWriteOffClick()">{{ $t(butTitle) }}</el-button>
        <el-button @click="paymentShow = false; paymentValue = ''">{{ $t('取消') }}</el-button>
      </span>
    </el-dialog>
<!--    <commission-payment-details :id="6"></commission-payment-details>-->
  </div>
</template>

<script>
import {listSimpleUsers} from "@/api/system/user";
import {
  commissionPaymentCancelFinancePaymentApproval,
  commissionPaymentCancelFinancePaymentApprovalNo,
  commissionPaymentCancelFinancePaymentWriteOff,
  commissionPaymentCancelFinancePaymentWriteOffNo,
  commissionPaymentDelete,
  commissionPaymentPage,
  commissionPaymentVerification,
  commissionPaymentVerificationCancel,
  commissionPaymentVerifyCancel
} from "@/api/ecw/financial";
import {parseTime} from "../../../utils/ruoyi";
import Template from "@/views/cms/template/index.vue";
import commissionPaymentDetails from "@/views/ecw/financial/components/commissionPaymentDetails.vue";

export default {
  name: "EcwFinancialCommission-payment",
  components: {Template,commissionPaymentDetails},
  activated(){
    this.getList()
  },
  created() {
    // 业务员
    listSimpleUsers().then((res) => (this.creatorData = res.data));
    this.getList();
    },
  watch:{
    selectDate(val){
      if(val !== null && val.length){
         this.queryParams.beginCreateTime = val[0]
         this.queryParams.endCreateTime = val[1]
      }else {
        this.queryParams.beginCreateTime = null;
        this.queryParams.endCreateTime = null;
      }
    }
  },
  data(){
    return {
      queryParams:{
        accountNumber:null,
        invoiceStatus:null,
        state:null,
        salesmanName:null,
        searchKey:null,
        paymentNo:null,
        beginCreateTime:null,
        endCreateTime:null,
        page:1,
        rows:10,
      },
      selectDate:[],
      creatorData:[],
      list:[],
      total:0,
      paymentRow:{},
      paymentIndex:0,
      paymentTitle:'',
      butTitle:'',
      paymentShow:false,
      paymentValue:''
    }
  },
  methods:{
    parseTime,
    getList(){
      commissionPaymentPage(this.queryParams).then(r => {
         this.list = r.data.list
        this.total = r.data.total
      })
    },
  // 删除
    deleteFn(row){
      this.$confirm(this.$t('是否删除此条佣金付款单'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        commissionPaymentDelete({id:row.id}).then(r => {
          this.$message({
            type: 'success',
            message:this.$t('删除成功!')
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('已取消删除')
        });
      });
    },
    bridgeFn(title, index ,row, butTitle = '提交'){
      this.paymentTitle =  title;
      this.butTitle = butTitle;
      this.paymentIndex = index;
      this.paymentRow = row;
      this.paymentShow = true;
    },
  //提交
    cancelWriteOffClick(){
      if(!this.paymentValue) return this.$message.warning(this.$t('请输入理由！'))
      let resolve = (val = '操作成功')=>{
        this.getList();
        this.paymentShow = false;
        this.paymentValue = ''
        this.$message.success(val);

      }
      let reject = ()=>{
        this.paymentShow = false;
        this.paymentValue = ''
      }
      let p = {
        "paymentId": this.paymentRow.id,
        "paymentNo": this.paymentRow.paymentNo,
        "remark":this.paymentValue,
         "reason":this.paymentValue
      }
      switch (this.paymentIndex){
        case 1:
          // 反审核佣金付款单
          commissionPaymentVerifyCancel(p).then(()=>resolve(this.$t('提交佣金付款单反审核成功，请耐心等待审核结果!')), reject)
          break;
        case 2:
          // 佣金付款单核销
          commissionPaymentVerification(p).then(() =>resolve(this.$t('提交佣金付款单核销成功，请耐心等待审核结果!')), reject)
          break;
        case 3:
          // 付款单反核销申请
          commissionPaymentVerificationCancel(p).then(() =>resolve(this.$t('提交佣金付款单反核销申请成功，请耐心等待审核结果')), reject)
          break;
        case 4:
          // 取消付款单反审核
          commissionPaymentCancelFinancePaymentApprovalNo(p).then(() =>resolve(this.$t('取消佣金付款单反审核成功！')), reject)
          break;
        case 5:
          // 取消付款单核销
          commissionPaymentCancelFinancePaymentWriteOff(p).then(() =>resolve(this.$t('取消佣金付款单核销成功！')), reject)
          break
        case 6:
          // 取消付款单反核销
          commissionPaymentCancelFinancePaymentWriteOffNo(p).then(() =>resolve(this.$t('取消佣金付款单反核销成功！')), reject)
          break;
        case 7:
          // 取消付款单审核
          commissionPaymentCancelFinancePaymentApproval(p).then(() =>resolve(this.$t('取消佣金付款单审核成功！')), reject)
          break;
      }

    }
  }
}
</script>

<style scoped>

</style>