tire-platform-ui/src/views/financialManagement/paymentRequest/paymentRequestDetails.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button v-if="!auditDisabled" type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
        <div v-if="!auditDisabled" class="upper_right_button">
          <el-button type="primary"
                     size="small"
                     v-if="viewDisabled"
                     class="el-button--small-yh "
                     :loading="buttonLoading"
                     @click.stop="openEdit()">编辑
          </el-button>

          <el-dropdown style="padding: 0 8px;line-height: 0">
            <el-button
              type="warning"
              :disabled="viewDisabled"
              :loading="buttonLoading"
              size="small"
            >
              审批处理<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :loading="buttonLoading"
                :disabled="checkDisabled || viewDisabled"
                @click.native="paymentCheck">{{form.checkStatus == '审批中'?'审批中':'审批提交'}}
              </el-dropdown-item>
              <el-dropdown-item
                :loading="buttonLoading"
                :disabled="!checkDisabled || viewDisabled"
                @click.native="checkScheduleDialog = true,checkId=form.id">审批进度
              </el-dropdown-item>
              <el-dropdown-item
                :disabled="!recallDisabled || viewDisabled"
                @click.native="cancelAudit">撤销审批
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="warning"
                     size="small"
                     :loading="buttonLoading"
                     class="el-button--small-yh"
                     :disabled="form.checkStatus !== '审批通过' || viewDisabled"
                     @click.stop="settlement">结算
          </el-button>
          <el-button type="primary"
                     size="small"
                     :disabled="viewDisabled"
                     :loading="buttonLoading"
                     class="el-button--small-yh"
                     @click.stop="confirmEdit">保存数据
          </el-button>
        </div>
        <div v-if="auditDisabled" class="upper_right_button">
          <el-button type="primary"
                     size="small"
                     class="el-button--small-yh"
                     :loading="buttonLoading"
                     @click.stop="checkScheduleDialog = true,checkId=detailData.check.srcBillId">
            审批流程
          </el-button>
          <el-button type="primary"
                     size="small"
                     class="el-button--small-yh"
                     :loading="buttonLoading"
                     :disabled="buttonDisabled"
                     @click.stop="openCheckDialog">
            审批
          </el-button>
        </div>
      </div>
    </div>
    <div class="customer-main">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container>
        <avue-form class="trading-form" ref="form" v-model="form" :option="option">
          <template slot="corpId">
            <crop-select
              v-model="form.corpId"
              corpType="KG"
              :disabled="checkDisabled || auditDisabled || viewDisabled"
              @getCorpData="returnBack"
              style="width: 100%"
            ></crop-select>
          </template>
          <template slot="belongToCorpId">
            <crop-select
              v-model="form.belongToCorpId"
              corpType="GS"
              :disabled="checkDisabled || auditDisabled || viewDisabled"
              style="width: 100%"
            ></crop-select>
          </template>
          <template slot="accountNo">
            <el-select v-model="form.accountNo"
                       placeholder="请选择"
                       @change="accountNoChange"
                       :disabled="checkDisabled || auditDisabled || viewDisabled"
                       clearable
                       allow-create
                       default-first-option
                       filterable>
              <el-option v-for="(item,index) in form.bankList"
                         :key="index"
                         :label="item.accountNo"
                         :value="item.accountNo"
                         >
              </el-option>
            </el-select>
          </template>
          <template slot="remark">
            <el-input type="textarea"
                      v-model="form.remark"
                      :disabled="viewDisabled"
                      size="small"
                      rows="2"
                      autocomplete="off"
                      placeholder="">
            </el-input>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="itemOption"
                   :data="dataList"
                   ref="crud"
                   v-model="itemForm"
                   :page.sync="page"
                   @search-reset="searchReset"
                   @row-update="rowUpdate"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @saveColumn="saveColumn"
                   @resetColumn="resetColumn"
                   @refresh-change="refreshChange">
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              :disabled="checkDisabled || auditDisabled || viewDisabled"
              @click="rowCell(scope.row,scope.index)"
            >{{ scope.row.$cellEdit ? '修改完成' : '修改' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              :disabled="checkDisabled || auditDisabled || viewDisabled"
              @click.stop="rowDel(scope.row,scope.index)"
            >删除
            </el-button>
          </template>
          <template slot="costType" slot-scope="{ row }">
            <breakdown-select
              v-if="row.$cellEdit"
              v-model="row.costType"
              :configuration="breakConfiguration">
            </breakdown-select>
            <span v-else>{{ row.itemName }}</span>
          </template>
          <template slot="price" slot-scope="{ row }">
            <el-input
              v-if="row.$cellEdit"
              v-model="row.price"
              placeholder="请输入"
              size="small"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            ></el-input>
            <span v-else>{{ row.price }}</span>
          </template>
          <template slot="currency" slot-scope="{row,index}">
            <el-select v-if="row.$cellEdit"
                       v-model="row.currency"
                       size="small"
                       @change="currencyChange(row)"
                        clearable
                       filterable>
              <el-option v-for="(item,index) in currencyDic"
                         :key="index"
                         :label="item.dictValue"
                         :value="item.dictValue"></el-option>
            </el-select>
            <span v-else>{{ row.currency }}</span>
          </template>
        </avue-crud>
      </basic-container>
    </div>
    <el-dialog
      append-to-body
      title="审批进度"
      class="el-dialogDeep"
      :visible.sync="checkScheduleDialog"
      width="40%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
    >
      <check-schedule
        :checkId="checkId"
        :batchNo="batchNo"
        @choceScheduleFun="choceScheduleFun"
      >
      </check-schedule>
    </el-dialog>
    <el-dialog
      append-to-body
      title="审批"
      class="el-dialogDeep"
      :visible.sync="checkDialog"
      width="50%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
    >
      <check
        :checkData="checkData"
        :checkDetail="false"
        :idList="[]"
        @choceCheckFun="choceCheckFun"
      >
      </check>
    </el-dialog>
  </div>
</template>

<script>
  import itemOption from "./configuration/detailsPage.json";
  import { contrastObj,contrastList } from "@/util/contrastData";
  import { getDetails, paymentCheck,getlistBankBy,saveOrEdit } from "@/api/financialManagement/paymentRequest";
  import checkSchedule from "../../../components/check/checkSchedule";
  import check from "@/components/check/check";
  import { cancelCheck } from "@/api/check/check";
  import option from "./configuration/mainList.json";

  export default {
    name: "paymentDetailsPage",
    props: {
      detailData: {
        type: Object
      }
    },
    components:{
      checkSchedule,
      check
    },
    data() {
      return {
        form:{},
        itemForm: {},
        checkData:{},
        itemOption: itemOption,
        viewDisabled:false,
        checkDisabled:false,
        auditDisabled:false,
        buttonDisabled:true,
        buttonLoading:false,
        checkScheduleDialog:false,
        recallDisabled:false,
        checkDialog:false,
        checkId:'',
        batchNo:'',
        parentId:0,
        id:"",
        dataList: [],
        currencyDic:[],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        breakConfiguration:{
          multipleChoices:false,
          multiple:false,
          disabled:false,
          searchShow:true,
          collapseTags:false,
          placeholder:'请点击右边按钮选择',
          dicData:[]
        },
        query:{},
        option: {
          menuBtn: false,
          labelWidth: 100,
          column: [
            {
              label: '系统号',
              prop: 'sysNo',
              span: 8,
              disabled: true
            },{
              label: '合同号',
              prop: 'srcOrderno',
              span: 8,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '往来单位',
              prop: 'corpId',
              sort:true,
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '银行账号',
              prop: 'accountNo',
              type:"select",
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开户银行',
              prop: 'accountBank',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行户头',
              prop: 'accountName',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '人民币金额',
              prop: 'amount',
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '外币金额',
              prop: 'foreignAmount',
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '所属公司',
              prop: 'belongToCorpId',
              sort:true,
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '申请人',
              prop: 'createUserName',
              span: 8,
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '申请日期',
              prop: 'createTime',
              span: 8,
              type:"date",
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'remark',
              span:24,
              minRows: 2,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
          ],
        },
        oldForm:{},
        oldDataList:[],
      }
    },
    async created() {
      this.itemOption = await this.getColumnData(this.getColumnName(62), itemOption);
      //是否需要根据 登录人所属公司  区分不用option

      //币别
      this.getWorkDicts("currency").then(res =>{
        this.currencyDic = res.data.data
      })
      if(this.detailData.view){
        this.viewDisabled = true
        this.option.disabled = true
      }

      if (this.detailData.id) {
        this.id = this.detailData.id;
        this.buttonLoading = true;
        getDetails(this.id).then(res => {
          this.afterEcho(res.data.data)
        }).finally(()=>{
          this.buttonLoading = false
        })
      }
      if(this.detailData.check){
        //待审批状态才可选择通过或者驳回
        if(this.detailData.check.auditStatus === "S"){
          this.buttonDisabled = false
        }
        this.auditDisabled = true
        this.buttonLoading = true;
        this.batchNo = this.detailData.check.batchNo
        getDetails(this.detailData.check.srcBillId).then(res => {
          this.afterEcho(res.data.data)
        }).finally(()=>{
          this.buttonLoading = false;
        })
      }
    },
    methods: {
      //选择客户
      returnBack(corpValue){
        getlistBankBy(corpValue.id).then(res =>{
          this.form.bankList = res.data
        })
      },
      //选择银行账号
      accountNoChange(value){
        this.form.bankList.forEach(item =>{
          if(item.accountNo == value){
            this.$set(this.form,"accountBank",item.accountBank)
            this.$set(this.form,"accountName",item.accountName)
          }
        })
      },
      //选择币别 带汇率
      currencyChange(row){
        if(row.currency === "CNY"){
            row.exchangeRate = 1
        }else if(row.currency === "USD"){
          row.exchangeRate = 6.384300
        }else{
          row.exchangeRate = 7.174900
        }
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      currentChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      refreshChange() {
        console.log('1')
      },
      rowUpdate(row, index, done, loading) {
        done(row);
      },
      rowCell(row, index) {
        this.$refs.crud.rowCell(row, index)
      },
      rowDel(row,index){
        this.dataList.splice(index, 1);
      },
      //打开审核
      openCheckDialog(){
        this.checkData  = this.detailData.check
        this.checkDialog = true;
      },
      //关闭审核
      choceCheckFun(){
        this.checkDialog = false;
      },
      choceScheduleFun(){
        this.checkScheduleDialog = false
      },
      //审核
      paymentCheck(){
        if(this.verification()){
          this.$confirm("您确定提交此次申请吗？", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(()=>{
            this.buttonLoading = true
            const params ={
              id : this.form.id,
              billType: this.form.billType,
              url:"/financialManagement/paymentRequest/index",
              pageStatus:"this.$store.getters.pqStatus",
              pageLabel:"付费申请",
              checkType: 'ffsq'
            }
            paymentCheck(params).then(res =>{
              if(res.data.success){
                this.$message.success("申请成功!");
                this.afterEcho(res.data.data)
              }
            }).finally(()=>{
              this.buttonLoading = false
            })
          })
        }
      },
      //撤销审核
      cancelAudit(){
        this.buttonLoading = true
        cancelCheck(this.form.id).then(res =>{
          if(res.data.success){
            this.$message.success("操作成功!")
            this.afterEcho(res.data.data)
          }
        }).finally(()=>{
          this.buttonLoading = false
        })
      },
      //结算
      settlement(){
        if(this.verification()){
          if(this.$store.getters.paySettle){
            this.$alert("结算页面已存在,请关闭结算页面再进行操作", "温馨提示", {
              confirmButtonText: "确定",
              type: 'warning',
              callback: action => {
              }
            });
          }else{
            //关闭一下存在的列表页  跳转
            this.$router.$avueRouter.closeTag('/financialManagement/paymentSettle/paymentSettle');
            this.$router.push({
              path: "/financialManagement/paymentSettle/paymentSettle",
              query: {params: this.form.id},
            });
          }
        }
      },
      confirmEdit(status){
        this.$refs["form"].validate((valid,done) => {
          done();
          if(valid){
            this.form.billNo = this.dataList.map(item =>{return item.billNo}).join(",")

            const params = {
              ...this.form,
              billType:"申请",
              itemsList:this.dataList
            }
            this.buttonLoading = true
            saveOrEdit(params).then(res =>{
              this.$message.success("操作成功!")
              this.afterEcho(res.data.data)
            }).finally(()=>{
              this.buttonLoading = false
            })
            if(status === true){
              this.$emit("goBack");
            }
          }
        })
      },
      //验证新旧数据
      verification(){
        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)){
          this.$confirm("您已改动数据,是否先保存在进行操作!", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.confirmEdit()
          }).catch(()=>{
            return  false;   //取消改动数据
          })
        }else{
          return  true;   //没有动过数据
        }
      },
      afterEcho(data){
        this.form = data;
        this.oldForm = Object.assign({},data);

        this.checkDisabled = data.checkStatus === "录入"?false:true;
        this.recallDisabled = data.checkStatus === "审批提交"?true:false;

        this.option.column.forEach(item =>{
          if( item.prop == "remark" ){
            this.$set(item,"disabled",(this.auditDisabled || false))
          }else if( item.prop == "createUserName" ||  item.prop == "createTime" || item.prop == "sysNo"){
            this.$set(item,"disabled",true)
          }else{
            this.$set(item,"disabled",this.checkDisabled)
          }
        })

        if(data.itemsList){
          this.dataList = data.itemsList
          this.oldDataList = this.deepClone(data.itemsList)
        }
      },
      async openEdit() {
        //标签页保存key
        this.inDetailsKey(this.$route.name,this.detailData.lockData);
        //单据是否锁定
        if(!await this.checkLocks(this.detailData.lockData)){
          this.onLock(this.detailData.lockData); //上锁
          this.viewDisabled = false
          this.option = this.$options.data().option;
        }else{
          this.$message.warning('此单据已被锁定,请稍后再进行操作!')
        }
      },

      backToList() {
        //如果为审核页面  则直接返回
        if(this.viewDisabled || this.detailData.check || !this.detailData.lockData){
          this.$emit("goBack");
          return
        }

        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
        ){
          this.$confirm("是否保存当前页面？", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.editCustomer(true)
          }).catch(()=>{
            this.$emit("goBack");
          }).finally(()=>{
            if(this.form.id){
              this.unLock(this.detailData.lockData);
              this.leaveDetailsKey(this.$route.name);
            }
          })
        }else{
          this.$emit("goBack");
          if(this.form.id){
            this.unLock(this.detailData.lockData);
            this.leaveDetailsKey(this.$route.name);
          }
        }
      },
      //列保存触发
      async saveColumn() {
        const inSave = await this.saveColumnData(
          this.getColumnName(62),
          this.itemOption
        );
        if (inSave) {
          this.$message.success("保存成功");
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
      async resetColumn() {
        const inSave = await this.delColumnData(
          this.getColumnName(62),
          itemOption
        );
        if (inSave) {
          this.$message.success("重置成功");
          this.itemOption = itemOption;
          //关闭窗口
          this.$refs.crud.$refs.dialogColumn.columnBox = false;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  .trading-form ::v-deep .el-form-item {
    margin-bottom: 8px !important;
  }
  .upper_right_button{
    display: flex;
    position: fixed;
    right: 12px;
    top: 47px;
  }
</style>