nsgk_mobile/src/views/yinnong/bankAgriculture/paymentApproval/approvalApproval12.vue

<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    >
      <template #title>
        <p style="font-weight: bold;">汇票支出申请审批</p>
      </template>
      <template #right>
        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
      </template>
    </van-nav-bar>
    <p class="main_title">基础信息</p>
    <div class="main_box">
      <van-field readonly label="申请时间" v-model="form.applyDate" input-align="right" />
      <van-field readonly label="资金支出类别" v-model="capitalExpenditureType" input-align="right" label-width="auto" />
      <van-field name="radio" label="审批模式" input-align="right" autocomplete="off" readonly>
        <template #input>
          <van-radio-group v-model="form.paymentState" direction="horizontal">
            <van-radio name="1">线上支付</van-radio>
            <van-radio name="2">线下支付</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-field readonly label="付款事由" v-model="form.remark" type="textarea" input-align="right" rows="3" label-width="auto"/>
    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-field readonly label="说明情况" v-model="form.explainSituation" type="textarea" input-align="right" rows="3" label-width="auto"/>
    </div>

    <div class="main_box" v-if="capitalExpenditureOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
      <van-field readonly label="项目名称" v-model="projectForm.projectName" input-align="right" />
      <van-field readonly label="承建单位" v-model="projectForm.projectContractor" input-align="right" label-width="auto"/>
      <van-field readonly label="合同价款（元）" v-model="projectForm.projectAmount" input-align="right" label-width="auto"/>
      <van-field readonly label="工程款类型" v-model="projectFundType" input-align="right" />
      <van-field readonly label="工程发票号" v-model="projectForm.projectBillNum" input-align="right" label-width="auto"/>
    </div>

    <p class="main_title">出票方信息</p>
    <div class="main_box">
      <van-field readonly label="付款方" v-model="form.payer" input-align="right" label-width="auto"/>
      <van-field :rules="[{ required: true , message:'请输入汇票号码' }]" required label="汇票号码" v-model="form.payerAccount" placeholder="请输入汇票号码" input-align="right" label-width="auto"/>
      <van-field
        readonly
        label="出票金额（元）"
        v-model="form.expenditureAmount"
        placeholder=""
        input-align="right"
        label-width="auto"
        required
        :rules="[{ required: true , message:'出票金额不能为空！' }]"
      />
      <van-field
        readonly
        label="汇票类型"
        v-model="orderTypeName"
        placeholder=""
        input-align="right"
        label-width="auto"
        required
        :rules="[{ required: true , message:'汇票类型不能为空！' }]"
      />
      <van-field
        readonly
        label="汇票类型"
        v-model="form.orderType"
        placeholder=""
        input-align="right"
        label-width="auto"
        style="display: none"
        required
        :rules="[{ required: true , message:'汇票类型不能为空！' }]"
      />
      <van-field
        readonly
        label="开票日"
        v-model="form.startTime"
        placeholder=""
        input-align="right"
        label-width="auto"
        required
        :rules="[{ required: true , message:'开票日不能为空！' }]"
      />
      <van-field
        readonly
        label="到期日"
        v-model="form.endTime"
        placeholder=""
        input-align="right"
        label-width="auto"
        required
        :rules="[{ required: true , message:'到期日不能为空！' }]"
      />
    </div>

    <p class="main_title">收票方信息</p>

    <div :style="{position:'relative',padding: index == 0 ? '':'10px 0 0 0'}" v-for="(item, index) in chargeItme" :key="index">
      <div class="main_box" style="margin-bottom: 10px;position:relative;">
        <van-field readonly label="收款方" v-model="item.payee" input-align="right" />
        <van-field readonly label="联系方式" v-model="item.phone" input-align="right" label-width="auto"/>
        <van-field readonly label="所属单位" v-model="item.unit" input-align="right" label-width="auto"/>
        <van-field readonly label="负责人全称" v-model="item.leader" input-align="right" label-width="auto"/>
        <van-field readonly label="资金用途" v-model="item.remark" input-align="right" />
      </div>
    </div>
    <p class="main_title">上传附件</p>
    <div class="main_box" style="padding: 5px 0 0 8px;">
      <van-uploader v-model="fileList" v-if="fileList==null||fileList.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'"></van-uploader>
      <van-uploader v-model="fileList" v-if="fileList!=null&&fileList.length>0" :deletable="false" :max-count="fileList.length"  ></van-uploader>
    </div>
    <p style="margin-top:20px;padding: 0 10px">附件下载{{fileList&&fileList.length==0?':暂无可下载文件':''}}</p>
    <van-cell v-for="(item,index) in fileList" :key="index">
      <a :href="item.url">{{index+1}}.{{item.fileName}}</a>
    </van-cell>
    <div class="main_box examine_box" v-if="this.$route.query.type != 'done'">
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="5">审批<br/>意见</van-col>
        <van-col span="19">
          <van-radio-group v-model="pass" direction="horizontal">
            <van-radio name="true">同意</van-radio>
            <van-radio name="false">驳回</van-radio>
          </van-radio-group>
          <van-field rows="2" autosize v-model="comment" type="textarea" placeholder="同意申请宅基地"/>
        </van-col>
      </van-row>
    </div>

    <div style="margin: 16px 2%;" v-if="this.$route.query.type != 'done'">
      <van-row>
        <van-col span="24" align="center">
          <van-button type="info" native-type="submit" @click="submitForm" class="submitButton">提交</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
  import { getTransfer , queryTransferDetail , listPayee , updateTransfer , getProjectto , listProject , addProjectto , customSubmit} from "@/api/onlineHome/bankAgriculture/paymentApproval";
  import request from '@/utils/request'
  import {
    approval,
    attachmentList,
    commonAttach,
    getCash,
    listCashdetailByCashId
  } from "../../../../api/onlineHome/bankAgriculture/paymentApproval";
  export default {
    name: "approvalDetail12",
    data() {
      return {
        showcapital:false,
        showpayee:false,
        showlasj:false,
        showbankType:false,
        showproject:false,
        showFundType:false,

        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        form:{},
        fileList:[],
        capitalExpenditureType:'',
        payee:'',
        bankType:'',

        wfydlxDictionaries:[],
        jglxDictionaries:[],
        sysDictionaries:[],
        capitalExpenditureTypeOptions:[],
        bankTypeDictionaries:[],
        projectList:[],
        projectFundTypeOptions:[],
        projectFundTypeDictionaries:[],
        projectListShow:[],

        chargeItme:[],
        chargeItmeShow:[],

        payeeList:[],
        // 查询参数
        queryParams: {
          transferType:"",
          orderByColumn: "id",
          isAsc: "desc",
        },
        capitalExpenditureOpen:false,
        projectForm:{
          projectId:null,
          projectName:null,
          projectContractor:null,
          projectAmount:null,
          projectBillNum:null,
          projectFundType:'1',
          outId:null,
          ynType:'1'
        },
        projectFundType:'',
        orderTypeName:'',
        orderTypeOptions:[],
        // 审核意见默认值
        pass: "true",
        comment: "同意",
      };
    },
    created() {
      let queryParams={
        pageNum: 1,
        pageSize: 100,
      }
      listProject(queryParams).then(response => {
        console.log(response)
        this.projectList = response.rows;
        for (var i = 0; i < response.rows.length; i++) {
          this.projectListShow.push({text: response.rows[i].projectName, value: response.rows[i].id});
        }
      });
      this.getDicts("project_fund_type").then((response) => {
        for (var i = 0; i < response.data.length; i++) {
          this.projectFundTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.projectFundTypeDictionaries = response.data;
      });
      this.getDicts("order_type").then(response => {
        this.orderTypeOptions = response.data;
      });
      this.getDictionaries();
      this.getFileList();
    },
    methods: {
      goFlow(){
        window.location='approvalProcess2?id='+this.$route.query.id;
      },
      getDictionaries(){
        getCash(this.$route.query.id).then((response) => {
          this.getDicts("capital_expenditure_type").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.capitalExpenditureTypeOptions.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
            this.capitalExpenditureType = this.selectDictLabel(res.data, response.data.capitalExpenditureType);
          });
          if(response.data.capitalExpenditureType==2){
            this.capitalExpenditureOpen = true
            let param={
              'outId' : response.data.id,
              'ynType' : '2'
            }
            getProjectto(param).then(res => {
              this.projectFundType = this.selectDictLabel(this.projectFundTypeDictionaries, res.data.projectFundType);
              this.projectForm = res.data
            })
          }else{
            this.showproject = false
          }
          this.form = response.data;
          this.orderTypeOptions.map(res => {
            console.log(this.orderTypeOptions)
            if(res.dictValue==this.form.orderType){
              this.orderTypeName = res.dictLabel
            }
          })
        });
        console.log(this.$route.query.id)
        listCashdetailByCashId(this.$route.query.id).then((response) => {
          this.chargeItme = response.data;
          console.log(response.data)
          this.getPayeeList();
        });
      },
      addChargeItme(index){
        this.chargeItme.splice(index + 1, 0, {
          payeeId: "", //收款方ID
          payee: "", //收款方
          payeeAccount: "", //收款账户
          bankDeposit: "", //开户银行
          incomeAmount: "", //收入金额
          bankType: "", //所属银行
        });
      },
      getPayeeList() {
        //普通转账
        this.queryParams.accountType = this.form.accountType
        this.queryParams.status = "0"
        listPayee(this.queryParams).then((response) => {
          for (var i = 0; i < response.rows.length; i++) {
            this.payeeList.push({text: response.rows[i].payee, value: response.rows[i].id});
          }
        });
      },
      payeeDictLabel(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
          if (datas[key].payeeId == ('' + value)) {
            actions.push(datas[key].payee);
            return true;
          }
        })
        return actions.join('');
      },
      onConfirmCapital(data){
        console.log(data)
        if (data.value != 2){
          this.capitalExpenditureOpen = false;
          this.projectForm = [];
        }else{
          this.capitalExpenditureOpen = true;
        }
        this.capitalExpenditureType = data.text;
        this.form.capitalExpenditureType = data.value;
        this.showcapital = false;
      },
      onConfirmFundType(data){
        console.log(data)
        this.projectForm.projectFundType = data.value;
        this.projectFundType = data.text;
        this.showFundType = false;
      },
      onConfirmProject(data){
        console.log(data)
        this.projectList.map(res => {
          console.log(res)
          if(res.projectName==data.text){
            this.projectForm.projectId = res.id
            this.projectForm.projectName = res.projectName
            this.projectForm.projectContractor = res.projectContractor
            this.projectForm.projectAmount = res.projectAmount
            console.log(this.projectForm)
          }
        })
        this.showproject = false;
      },
      onConfirmPayee(data){
        // this.chargeItme[this.chargeItme.length-1].payeeText = data.text;
        this.chargeItme[this.chargeItme.length-1].payee = data.text;
        this.chargeItme[this.chargeItme.length-1].payeeId = data.value;
        console.log(this.chargeItme)
        this.showpayee = false;
      },
      onConfirmBankType(data){
        console.log(this.chargeItme)
        this.chargeItme[this.chargeItme.length-1].bankTypeText = data.text;
        this.chargeItme[this.chargeItme.length-1].bankType = data.value;
        this.showbankType = false;
      },
      onConfirmLasj(data){
        this.form.applyDate = this.getNowFormatDate(data).substr(0,10);
        this.showlasj = false;
      },
      accountTypeChange(e){
        console.log(e)
        this.payeeList = [];
        this.queryParams.accountType = this.form.accountType
        this.queryParams.status = "0"
        listPayee(this.queryParams).then((response) => {
          for (var i = 0; i < response.rows.length; i++) {
            this.payeeList.push({text: response.rows[i].payee, value: response.rows[i].id});
          }
        });
      },
      goAdd(){
        if(this.form.remark != null && this.form.remark.indexOf("|")!=-1){
          this.$toast.error("付款事由禁止包含|。");
          return;
        }
        if(this.form.capitalExpenditureType==2){
          if(this.projectForm.projectName==""||this.projectForm.projectName==null){
            this.$toast.error('请选择项目名称！');
            return;
          }
          if(this.projectForm.projectBillNum==""||this.projectForm.projectBillNum==null){
            this.$toast.error('请输入工程发票号！');
            return;
          }
        }
        this.$set(this.form, "payeeList", this.chargeItme);
        this.$set(this.form, "bankTypeList", this.chargeItme);
        this.$set(this.form, "accountTypeList", this.chargeItme);
        this.$set(this.form, "transferStatusList", this.chargeItme);
        console.log(this.form);
        updateTransfer(this.form).then(response => {
          console.log(response);
          this.projectForm.outId = this.form.id
          this.$set(this.projectForm, "ynType", '1');
          console.log(this.projectForm)
          if(this.form.capitalExpenditureType==2){
            addProjectto(this.projectForm).then(res => {
              customSubmit(this.form.id).then(res => {
                this.$toast.success('提交成功');
                setTimeout(function(){
                  history.go(-1)
                },2000)
              })
            })
          }else{
            customSubmit(this.form.id).then(res => {
              this.$toast.success('提交成功');
              setTimeout(function(){
                history.go(-1)
              },2000)
            })
          }
        });
      },
      goUpdate(){
        if(this.form.remark != null && this.form.remark.indexOf("|")!=-1){
          this.$toast.error("付款事由禁止包含|。");
          return;
        }
        if(this.form.capitalExpenditureType==2){
          if(this.projectForm.projectName==""||this.projectForm.projectName==null){
            this.$toast.error('请选择项目名称！');
            return;
          }
          if(this.projectForm.projectBillNum==""||this.projectForm.projectBillNum==null){
            this.$toast.error('请输入工程发票号！');
            return;
          }
        }
        this.$set(this.form, "payeeList", this.chargeItme);
        this.$set(this.form, "bankTypeList", this.chargeItme);
        this.$set(this.form, "accountTypeList", this.chargeItme);
        this.$set(this.form, "transferStatusList", this.chargeItme);
        this.projectForm.outId = this.form.id
        updateTransfer(this.form).then((response) => {
          this.projectForm.outId = this.form.id
          this.$set(this.projectForm, "ynType", '1');
          if(this.form.capitalExpenditureType==2){
            addProjectto(this.projectForm).then(res => {
              this.$toast.success('修改成功');
              setTimeout(function(){
                history.go(-1)
              },2000)
            })
          }else{
            this.$toast.success('修改成功');
            setTimeout(function(){
              history.go(-1)
            },2000)
          }
        });
      },
      beforeRead(file) {
        this.uploadFiles.push(file.file);
      },
      deleteFile(file){
        this.uploadFiles.map((response,index) => {
          if(file.file == response){
            this.uploadFiles.splice(index,1)
          }
        })
      },
      getFileList(){
        let oData= {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_cash",
          bizPath: "yinnong",
          fileType: "",
        }
        attachmentList(oData).then(res => {
          console.log(res)
          console.log(location.protocol+"//"+location.host+request.defaults.baseURL)
          res.rows.map(r => {
            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
            this.fileList.push({"url":baseUrl + r.fileUrl,"file":new File([],r.fileName,{}),"id":r.id,"fileName":r.fileName})
            console.log(r)
          })
        })
      },
      goBack(){
        window.history.go(-1)
      },
      //删除家庭成员
      deleteChargeItme(index){
        this.chargeItme.splice(index,1)
      },
      /** 提交按钮 */
      submitForm() {
        const data = {
          taskId: this.$route.query.taskId,
          instanceId: this.form.instanceId,
          variables: JSON.stringify({
            comment: this.comment,
            pass: this.pass,
          }),
        };
        console.log(data);
        approval(data).then((response) => {
          if(response.code==200 && response.msg=="操作成功"){
            this.$toast.success("操作成功");
            setTimeout(function(){
              history.go(-1)
            },2000)
          } else{
            this.$toast.success("操作失败");
          }
        });
      },
    },watch: {
      pass: function (val) {
        this.comment = val === "true" ? "同意" : "驳回";
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 96%;
    margin: 0 auto;
  }

  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
  .deleteFamily{
    position: absolute;
    top: 0rem;
    right: 6%;
    z-index: 9;
    border-radius: 50%;
  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
  }
  .examine_box .van-col:first-child{
    color: #FFF!important;
    font-size: 0.45rem!important;
    text-align: center!important;
  }
  .examine_box .van-col:last-child{
    background-color: #FFF!important;
    border-radius: 0.15rem!important;
    overflow: hidden!important;
    .van-radio-group--horizontal{
      padding: 0.2rem 0;
      border-bottom: 1px solid #eee;
    }
  }
  /deep/.van-radio--horizontal{
    margin-left: 20px;
    margin-right: 0;
  }
</style>