feeApplication.vue

<template>
    <el-dialog :visible.sync="dialogVisible"    width="80%" :before-close="()=>{
    $emit('update:dialogVisible',false)
  }">
    <div class="fee-application">
      <h1>{{$t('费用申请')}}-{{orderDetails.orderNo}}
      </h1>
      <el-divider></el-divider>
      <el-form label-width="100px" inline>
        <el-form-item :label="$t('订单号')+':'"><div class="content">
          {{orderDetails.orderNo}}
        </div></el-form-item>
        <el-form-item :label="$t('发货人')+'：'"><div class="content">{{orderDetails.consignorVO ? orderDetails.consignorVO.name :''}}</div></el-form-item>
        <el-form-item :label="$t('唛头')"><div class="content">{{orderDetails.marks}}</div></el-form-item>
        <el-form-item> <el-button :disabled="!!processInstanceId || editMode" @click="addCost">{{$t('添加申请')}}</el-button></el-form-item>
      </el-form>
      <el-table :data="list">
         <el-table-column :label="$t('序号')" type="index"></el-table-column>
         <el-table-column :label="$t('费用类型')">
           <template  v-slot:default = "scope">
             <dict-selector  :disabled="!scope.row.editMode && !!scope.row.status"  :type="DICT_TYPE.FEE_TYPE" v-model="scope.row.feeType" />
           </template>
         </el-table-column>
         <el-table-column :label="$t('金额')">
           <template v-slot:default = 'scope'>
             <el-input  :disabled="!scope.row.editMode && !!scope.row.status" v-model.number="scope.row.applicationFee" ></el-input>
           </template>
         </el-table-column>
         <el-table-column :label="$t('货币类型')">
           <template v-slot:default = 'scope'>
             <el-select :disabled="!scope.row.editMode && !!scope.row.status"  v-model="scope.row.applicationFeeCurrency">
               <el-option v-for="item in JSON.parse(currencys)" :key="item.id" :label="item.titleZh" :value="item.id" />
             </el-select>
           </template>
         </el-table-column>
         <el-table-column :label="$t('付款类型')">
           <template v-slot = {row}>
             <dict-selector  :disabled="!row.editMode && !!row.status" :type="DICT_TYPE.PAYMENT_TYPE" v-model="row.payType" />
           </template>
         </el-table-column>
         <el-table-column :label="$t('备注')">
           <template v-slot:default="scope">
             <el-input  :disabled="!scope.row.editMode && !!scope.row.status" v-model="scope.row.remarks" type="textarea"></el-input>
           </template>
         </el-table-column>
         <el-table-column :label="$t('确认收款')">
           <template v-slot:default ="scope">
             <dict-tag :type="DICT_TYPE.ECW_RECEIVABLE_STATE" :value="scope.row.receiveFlag" />
           </template>
         </el-table-column>
         <el-table-column :label="$t('申请人')">
           <template v-slot:default ="scope">
             {{scope.row.status === 0 ? $t('未提交'): scope.row.applicationAuthor}}
           </template>
         </el-table-column>
         <el-table-column :label="$t('操作')">
           <template v-slot:default = 'scope'>
             <el-tag v-if="scope.row.status !== 0 && !scope.row.editMode">{{STATUS[scope.row.status]}}</el-tag>
             <!--el-button type="text" v-if="scope.row.status == 1" @click="examineFn">{{$t('审核中')}}</el-button-->
             <el-button type="text" v-if="modifable(scope.$index)" @click="modify(scope.row)">{{$t('修改')}}</el-button>
             <el-button type="text" v-if="scope.row.status === 0" @click="del(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
      </el-table>
      <div style="padding: 20px">
        <work-flow xmlkey="free_apply" v-model="selectedUsers"  />
      </div>
      <div style="text-align: center;margin-top: 20px;">
        <el-button type="primary" v-if="!processInstanceId" style="margin-right: 30px;" :disabled="!feeList.length && !editMode" @click="submit">{{$t('提交')}}</el-button>
        <el-button type="primary" v-if="processInstanceId" style="margin-right: 30px;" @click="goProcessDetail">{{$t('审核中')}}</el-button>
        <el-button type="primary" v-if="processInstanceId" style="margin-right: 30px;" @click="cancel">{{$t('取消审核')}}</el-button>
        <el-button @click="$emit('update:dialogVisible',false)">{{$t('返回')}}</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
import {
  getOrder,
  feeApplicationCreateBatch,
  ApplicationListByOrderId,
  applicationUpdate,
  feeApplicationListByOrderId,
  feeApplicationCancel,
  getFeeApplicationApproveByOrderId,
  getBatchFeeByProcessId,
  qetBatchFeeByBusinessId, getBatchFeeByBusinessId
} from "@/api/ecw/order";
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import workFlow from "@/components/WorkFlow";
export default {
  name: "feeApplication",
  components: {workFlow},
  props:{
    orderId:[Number, String],
    dialogVisible:{
      type:Boolean,
      default:false,
    },
    currencys:String
  },
  data(){
    return {
      orderDetails:{},
      // 费用列表
      list:[],
      // 审核ID，没有则表示不在审核中
      processInstanceId: null,

      DICT_TYPE,
      getDictDatas,
      STATUS:{},
      selectedUsers:[]
    }
  },
    computed:{
      feeList(){
          return this.list.filter(item => item.status === 0)
      },
      // 正在编辑的费用申请
      currentItem(){
          return this.list.find(item => item.editMode)
      },
      // 是否修改模式
      editMode(){
        return !!this.currentItem
      },
      modifable(){
          return (index) => {
              // 审核中不允许修改
              if(this.processInstanceId) return false
              // 有未提交的不允许修改
              if(this.feeList.length) return false
              // 有修改中的不允许修改
              if(this.list.findIndex(item => item.editMode) > -1) return false
              return true
          }
      }
    },
  created() {
    this.getDictDatas(this.DICT_TYPE.AUDIT_STATUS).forEach( e =>{
      this.STATUS[e.value] = e.label
    })

    getOrder(this.orderId).then(res => {
      this.orderDetails = res.data
    })

      // 查询历史申请
      feeApplicationListByOrderId({orderId: this.orderId}).then(res => {
        this.list = res.data
      })

    // 查询是否有审核中的费用申请
    getFeeApplicationApproveByOrderId(this.orderId).then(res => {
      if(res.data.formId){
        this.processInstanceId = res.data.formId
        /*getBatchFeeByBusinessId(res.data.orderApprovalId).then(res => {
          this.list = res.data
        })*/
      }
    })
  },
  methods:{
    del(index){
      this.$confirm(this.$t("确定要删除此条费用申请么？")).then(() => {
        this.list.splice(index, 1)
      })
    },
    // 修改
    modify(item){
      this.$set(item, 'editMode', true)
    },
    addCost(){
        this.list.push({
            orderId:this.orderId,
            feeType:undefined,//费用申请类型
            applicationFee:undefined,//金额
            applicationFeeCurrency:undefined,//	费用申请货币类型
            remarks:undefined,
            receiveFlag:0,
            applicationAuthor:undefined,
            status:0,
          })
    },
    submit(){
        // 判断费用申请是否有未填项
        const errList = this.feeList.filter(item => {
            return !item['feeType'] || !item['applicationFee'] || !item['applicationFeeCurrency'] || !item['payType']
        })
        if(errList.length){
            return this.$message.error('请填写完整费用申请信息')
        }
        if(this.editMode){
            // 要提交status=1,否则保持原状态
            const data = {...this.currentItem,status:1, copyUserId:this.selectedUsers}
            return applicationUpdate(data).then(r => {
                this.$message.success(this.$t('修改成功'));
                this.$emit('update:dialogVisible',false)
            })
        }

        feeApplicationCreateBatch( {
          orderFeeApplicationCreateReqVOList: this.feeList,
          copyUserId:this.selectedUsers,
          orderId: this.orderId
        }).then(r=>{
          if(r.code === 0){
            this.$emit('update:dialogVisible',false)
            this.$message.success(this.$t('添加成功'));
            this.selectedUsers = [];
          }
        })
    },
    goProcessDetail(){
      this.$emit('update:dialogVisible',false)
      this.$router.push('/bpm/process-instance/detail?id=' + this.processInstanceId)
    },
    cancel(){
      this.$prompt(this.$t('请输入取消原因'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
      }).then(({ value }) => {
        let item =  this.list.find(e => e.status === 1);
        feeApplicationCancel({huifu:value,bpmProcessId: this.processInstanceId}).then(r => {
          this.$message({
            type: 'success',
            message:this.$t('取消成功')
          });
          this.$emit('update:dialogVisible',false)
        })
      }).catch(() => {
      });
    }
  },
  watch:{
    dialogVisible(val){
       if(val){
         this.getOrderList()
         getOrder(this.orderId).then(r =>{
           if(r.code === 0){
             this.orderDetails = r.data
           }
         })
       }
    },
  }
}
</script>

<style scoped lang="scss">
.fee-application {
  padding: 0 20px;
  h1{
    font-weight: 600;
    font-size: 20px;
  }
  .content{
    width: 200px;
  }
}
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>