nsgk_mobile/src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalDetail11.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 readonly label="支出总金额" v-model="form.expenditureAmount" 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.approvalMode" direction="horizontal">
            <van-radio name="1">线上审批</van-radio>
            <van-radio name="2">线下审批</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-if="form.approvalMode==1" readonly label="审批流程" :value="tempalteFormat(form.approvalTemplateId)" input-align="right" label-width="auto"/>
    </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>

    <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 readonly label="付款方账户" v-model="form.payerAccount" input-align="right" 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>
    <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
      <van-field readonly label="合同名称" v-model="infoForm.name" input-align="right" />
      <van-field readonly label="合同编码" v-model="infoForm.code" input-align="right" label-width="auto"/>
      <van-field readonly label="合同价款（元）" v-model="infoForm.totalAmount" input-align="right" label-width="auto"/>
    </div>
    <p class="main_title">收款方信息</p>

    <div style="position:relative;">
      <div class="main_box" style="margin-bottom: 10px;position:relative;" v-for="(item, index) in chargeItme" :key="index" v-if="index<listLength">
        <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.incomeAmount" input-align="right" label-width="auto"/>
        <van-field readonly label="资金用途" v-model="item.remark" input-align="right" label-width="auto"/>
      </div>
      <p class="main_more" v-if="chargeItme.length>1 && showbtn" @click="listLength = chargeItme.length,showbtn=false">查看更多</p>
      <p class="main_more" v-if="chargeItme.length>1 && !showbtn" @click="listLength = 1,showbtn=true">收起列表</p>
    </div>

    <p class="main_title">上传附件</p>
    <div class="main_box" style="padding: 5px 0 0 0;">
      <van-cell value="收据" />
      <van-uploader v-model="fileList1" v-if="fileList1==null||fileList1.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
      <van-uploader v-model="fileList1" v-if="fileList1!=null&&fileList1.length>0" :deletable="false"  @click-preview="previewPreview" :max-count="fileList1.length"  style="margin-left:8px;">
        <template #preview-cover="file">
          <div class="preview-cover">
            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
          </div>
        </template>
      </van-uploader>
      <van-cell value="发票" />
      <van-uploader v-model="fileList2" v-if="fileList2==null||fileList2.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
      <van-uploader v-model="fileList2" v-if="fileList2!=null&&fileList2.length>0" :deletable="false"  @click-preview="previewPreview"  :max-count="fileList2.length"  style="margin-left:8px;">
        <template #preview-cover="file">
          <div class="preview-cover">
            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
          </div>
        </template>
      </van-uploader>
      <van-cell value="其他" />
      <van-uploader v-model="fileList3" v-if="fileList3==null||fileList3.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
      <van-uploader v-model="fileList3" v-if="fileList3!=null&&fileList3.length>0" :deletable="false"  @click-preview="previewPreview" :max-count="fileList3.length" style="margin-left:8px;" >
        <template #preview-cover="file">
          <div class="preview-cover">
            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
          </div>
        </template>
      </van-uploader>
    </div>
  </div>
</template>

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

        listLength:1,

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

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

        chargeItme:[],
        chargeItmeShow:[],

        payeeList:[],
        // 查询参数
        queryParams: {
          transferType:11,
          orderByColumn: "id",
          isAsc: "desc",
        },
        capitalExpenditureOpen:false,
        contractOpen:false,
        projectForm:{
          projectId:null,
          projectName:null,
          projectContractor:null,
          projectAmount:null,
          projectBillNum:null,
          projectFundType:'1',
          outId:null,
          ynType:'1'
        },
        infoForm:{
          infoId:null,
          name:null,
          code:null,
          totalAmount:null,
          contractionId:null,
          transferId:null
        },
        projectFundType:'',
        templateList:[],
      };
    },
    created() {
      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.getDictionaries();
      this.getFileList();
      this.getTemplateList();
    },
    methods: {
      getTemplateList(){
        let templateQueryParams = {
          // 分页
          pageNum: 1,
          pageSize: 999,
        };
        listTemplate(templateQueryParams).then(response => {
          this.templateList = response.rows;
        });
      },
      tempalteFormat(id){
        let name = ""
        this.templateList.map(res => {
          if(res.id==id){
            name =  res.name
          }
        })
        return name
      },
      goFlow(){
        window.location='approvalProcess?id='+this.$route.query.id+'&auditbatchNo='+this.$route.query.auditbatchNo;
      },
      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 if(response.data.capitalExpenditureType==4){
            this.contractOpen = true
            let param={
              'transferId' : response.data.id
            }
            getInfoto(param).then(res => {
              this.infoForm = res.data
            })
          }else{
            this.showproject = false
          }
          this.form = response.data;
        });
        listCashdetailByCashId(this.$route.query.id).then((response) => {
          this.chargeItme = response.data;
          console.log(response)
          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});
          }
        });
      },
      previewPreview(file, index, len) {
        const baseImgUrl = this.$store.getters.baseRoutingUrl;
        if (file.url) {
          //已上传文件
          let fileName = file.file.name || file.url;
          let subIndex = fileName.lastIndexOf(".");
          let ext = fileName.substring(subIndex + 1, fileName.length);
          let imgi = file.listIndex
          //console.log(ext)
          let allUrl = file.url;
          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
            const link = document.createElement("a");
            link.style.display = "none";
            link.target = "_blank"
            link.href = allUrl;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }

        } else {
          //新上传文件
          let fileName = file.file.name;
          // console.info(file.file.name)
          let subIndex = fileName.lastIndexOf(".");
          let ext = fileName.substring(subIndex + 1, fileName.length);
          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
            let type = this.getfileType(ext);
            // 将文件转换为base64编码
            this.fileToBase64(file.file, ext).then(res => {
              this.downloadFile(res, fileName, ext, type);
            })
          }
        }
      },
      getfileType(type) {
        switch (type) {
          case 'txt':
            return 'text/plain';
          case 'doc':
            return 'application/msword';
          case 'docx':
            return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
          case 'xls':
            return 'application/vnd.ms-excel';
          case 'xlsx':
            return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          case 'pdf':
            return 'application/pdf';
          case 'pptx':
            return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
          case 'png':
            return 'image/png';
          case 'jpg':
            return 'image/jpeg';
          case 'gif':
            return 'image/gif';
          case 'svg':
            return 'image/svg+xml';
          case 'ico':
            return 'image/x-icon';
          case 'bmp':
            return 'image/bmp,';
        }
      },
      downloadFile(base64, fileName, fileType, mimetype) {
        const typeHeader = 'data:application/' + fileType + ';base64,';
        const blob = this.base64ToBlob(base64, mimetype);
        this.downloadFileDownload(blob, fileName, fileType);
      },
      base64ToBlob(base64, mime) {
        //解码base64得到二进制字符串

        let raw = window.atob(base64.substring(base64.indexOf(',') + 1));
        let rawLength = raw.length
        //创建8位无符号整数值的类型化数组
        let uInt8Array = new Uint8Array(rawLength)
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: mime})
      },
      downloadFileDownload(blob, fileName, fileType) {
        const downloadElement = document.createElement('a');
        let href = blob;
        if (typeof blob === 'string') {
          downloadElement.target = '_blank'
        } else {
          href = window.URL.createObjectURL(blob)
        }
        downloadElement.href = href;
        downloadElement.download = fileName + '.' + fileType;//下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement)
        if (typeof blob !== 'string') {
          window.URL.revokeObjectURL(href)
        }
      },
      fileToBase64(file,fileType){
        return new Promise((resolve,reject)=>{
          //创建一个新的FileReader 对象
          const reader = new FileReader();
          //读取file对象
          reader.readAsDataURL(file);
          reader.onload=function () {
            const base64String =  reader.result.split(",")[1];
            resolve('data:application/' + fileType + ';base64,'+base64String);
          }
          reader.onerror=function () {
            reject(new Error("Failed to load file") )
          }
        })
      },
      getFileList(){
        let oData1= {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "yinnong",
          fileType: "1",
        }
        attachmentList(oData1).then(res => {
          res.rows.map(r => {
            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            this.fileList1.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
        })
        let oData2= {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "yinnong",
          fileType: "2",
        }
        attachmentList(oData2).then(res => {
          res.rows.map(r => {
            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            this.fileList2.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
        })
        let oData3= {
          tableId: this.$route.query.id,
          tableName: "t_yinnong_transfer",
          bizPath: "yinnong",
          fileType: "3",
        }
        attachmentList(oData3).then(res => {
          res.rows.map(r => {
            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
            let subIndex = r.fileName.lastIndexOf(".");
            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
            this.fileList3.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
          })
        })
      },
      goBack(){
        window.history.go(-1)
      },
      //删除家庭成员
      deleteChargeItme(index){
        this.chargeItme.splice(index,1)
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_more{
    width: 96%;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
    text-align: center;
    padding: 10PX 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: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;
  }

  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
  .deleteFamily{
    position: absolute;
    top: 0rem;
    right: 6%;
    z-index: 9;
    border-radius: 50%;
  }
</style>