programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyPay.vue

<template>
  <!--    发起付款申请 -->
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    top="50px"
    width="75%"
    :before-close="beforeClose"
    class="statistic_base"
    :append-to-body="true"
    :modal-append-to-body="true"
    custom-class="tagdialog"
  >
    <div class="tabsdom">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="付款申请" name="first">
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">

            <el-form
              ref="elformData"
              :model="formData"
              :rules="rules"
              class="payform"
              label-width="200px"
              size="medium"
            >
              <el-card style="padding:0px 20px;margin-bottom: 25px">
                <h3 style="margin-top: 0"><span style="color: red">*</span> 订单详情</h3>

                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item
                      :style="{width: '100%'}"
                      clearable
                      label="采购单号"
                      label-width="160px"
                    >
                      <el-select
                        v-model="formData.orderNo"
                        filterable
                        placeholder="采购单号"
                        @change="selectOutOrderDetails"
                      >
                        <el-option
                          v-for="(item,index) in OutOrderList"
                          :key="index"
                          :label="item.supplierName+item.orderNo"
                          :value="item.id"
                        >
                          <span style="float: left">{{ item.supplierName }}
                          </span>
                          <span style="float: right; color: #8492a6; font-size: 13px">
                            {{ item.orderNo }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="关联项目名称" label-width="160px" prop="proId">

                      <el-input v-model="formData.proName" readonly />

                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户名称" label-width="160px">
                      <el-input v-model="formData.custName" readonly />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发包日期" label-width="160px">
                      <el-date-picker
                        v-model="formData.dealAt"
                        placeholder="发包日期"
                        readonly
                        style="width: 100%"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="要求完成时间" label-width="160px">
                      <el-date-picker
                        v-model="formData.outTimeline"
                        placeholder="要求完成时间"
                        readonly
                        style="width: 100%"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="供应商" label-width="160px" prop="bizId">
                      <el-input v-model="formData.supplierName" readonly />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系人" label-width="160px" prop="bizBy">
                        <el-input v-model="formData.contactUser" readonly />
<!--                      <el-select-->
<!--                        v-model="formData.bizBy"-->
<!--                        disabled-->
<!--                      >-->
<!--                        <el-option-->
<!--                          v-for="item in bizByList"-->
<!--                          :key="item.id"-->
<!--                          :label="item.username"-->
<!--                          :value="item.id"-->
<!--                        />-->
<!--                      </el-select>-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="订单总金额" label-width="160px" prop="orderAmount">
                      <el-input v-model="formData.orderAmount" readonly type="number" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="税率(%)" label-width="160px" prop="taxRate">
                      <el-input v-model="formData.taxRate" readonly type="number" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支付方式" label-width="160px">
                      <el-select v-model="formData.payType" disabled placeholder="支付方式">
                        <el-option
                          v-for="item in dc_data.PAY_TYPE"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="下单人" label-width="160px">
                      <el-input v-model="formData.dealBy" readonly />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="支付说明" label-width="160px">
                      <el-input
                        v-model="formData.remark"
                        :rows="3"
                        readonly
                        type="textarea"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--								<el-row>-->
                <!--									<el-col style="padding-bottom: 10px">-->
                <!--										<span class="card_title">支付列表</span>-->
                <!--										<el-card shadow="always" style="padding:0px 20px 20px 20px">-->
                <!--											<el-row>-->
                <!--												<el-col :span="24">-->
                <!--													<el-table-->
                <!--													 row-class-name="g_table_row"-->
                <!--													 stripe-->
                <!--													>-->
                <!--														<el-table-column label="支付日期" prop="payAt"/>-->
                <!--														<el-table-column label="付款名称" prop="payName"/>-->
                <!--														<el-table-column label="付款金额" prop="payAmount"/>-->
                <!--														<el-table-column label="发票号" prop="invoiceNo"/>-->
                <!--														<el-table-column label="发票金额" prop="invoiceAmount"/>-->
                <!--														<el-table-column label="申请人" prop="applyByName"/>-->
                <!--														<el-table-column label="申请日期" prop="applyTime"/>-->
                <!--													</el-table>-->
                <!--												</el-col>-->
                <!--											</el-row>-->
                <!--										</el-card>-->
                <!--									</el-col>-->
                <!--								</el-row>-->

              </el-card>
              <el-card style="padding:0px 20px;margin-bottom: 25px">
                <h3 style="margin-top: 0"><span style="color: red">*</span> 支付信息</h3>
                <el-row :gutter="15">
                  <el-col :span="12">
                    <el-form-item
                      label="项目累计已回款金额（元）"
                    >
                      <div style="line-height: 40px;height: 40px">{{ formData.totalReturnMoney }}</div>
                      <!--                      <el-input-->
                      <!--                       v-model="formData.totalReturnMoney"-->
                      <!--                       :style="{width: '100%'}"-->
                      <!--                       clearable-->
                      <!--                       placeholder="请输入项目累计已回款金额（元）"-->
                      <!--                       readonly-->
                      <!--                      />-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="订单累计已支付金额（元）" prop="totalPayMoney">
                      <div style="line-height: 40px;height: 40px">{{ formData.totalPayMoney }}</div>
                      <!--                      <el-input-->
                      <!--                       v-model="formData.totalPayMoney"-->
                      <!--                       :style="{width: '100%'}"-->
                      <!--                       clearable-->
                      <!--                       placeholder="请输入订单累计已支付金额（元）"-->
                      <!--                       readonly-->
                      <!--                      />-->
                    </el-form-item>
                  </el-col>

                  <el-col :span="24" style="padding-bottom: 10px">
                    <el-table
                      ref="payDetailTable"
                      :data="payDetailData"
                      stripe
                      row-class-name="g_table_row"
                      @select="setSelectRow"
                      @select-all="selectAll"
                    >
                      <el-table-column width="55" type="selection" />
                      <el-table-column label="计划付款日期" prop="planPayTime" />
                      <el-table-column label="提醒日期" prop="remindTime" />
                      <el-table-column label="付款名称" prop="payName" />
                      <el-table-column label="付款金额/元" prop="payAmount" />
                      <el-table-column label="更新时间" prop="updatedAt" />
                      <el-table-column label="付款状态" prop="statusName" />
                      <el-table-column label="实际付款日期" prop="payAt" />
                    </el-table>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="付款名称" prop="payName">
                      <el-input
                        v-model="formData.payName"
                        :style="{width: '100%'}"
                        clearable
                        placeholder="请勾选付款计划"
                        readonly
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款金额" prop="payMoney">
                      <el-input
                        v-model="formData.payMoney"
                        :style="{width: '100%'}"
                        clearable
                        placeholder="请勾选付款计划"
                        readonly
                      />
                    </el-form-item>
                  </el-col>
                  <!--								<el-col :span="24">-->
                  <!--									<el-form-item label="费用成本归属" prop="costsType">-->
                  <!--										<el-select-->
                  <!--										 v-model="formData.costsType"-->
                  <!--										 clearable-->
                  <!--										 filterable-->
                  <!--										 placeholder="请选择"-->
                  <!--										>-->
                  <!--											<el-option-->
                  <!--											 v-for="item in dc_data.BUDGET_CB"-->
                  <!--											 :key="item.value"-->
                  <!--											 :label="item.label"-->
                  <!--											 :value="item.value"-->
                  <!--											/>-->
                  <!--										</el-select>-->
                  <!--									</el-form-item>-->
                  <!--								</el-col>-->
                </el-row>
              </el-card>
              <el-card style="padding:0px 20px;margin-bottom: 25px">
                <h3 style="margin-top: 0">
                  发票信息
                </h3>
                <el-row :gutter="15">
                  <el-col :span="12">
                    <el-form-item label="发票类型" label-width="160px" prop="billType">
                      <el-radio-group v-model="formData.billType" size="mini">
                        <el-radio
                          v-for="(item, index) in billTypeOptions"
                          :key="index"
                          :disabled="item.disabled"
                          :label="item.value"
                        >
                          {{ item.label }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开票金额" label-width="160px" prop="billMoney">
                      <el-input
                        v-model="formData.billMoney"
                        :style="{width: '100%'}"
                        clearable
                        placeholder="请输入开票金额"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发票号" label-width="160px" prop="billNumber">
                      <el-input
                        v-model="formData.billNumber"
                        :style="{width: '100%'}"
                        clearable
                        placeholder="请输入发票号"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="税率(%)" label-width="160px" prop="billRate">
                      <el-select v-model="formData.billRate" placeholder="请选择">
                        <el-option
                          v-for="item in dc_data.PURCHASE_TAX_RATE"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="上传" label-width="160px" prop="fileDataIds">
                      <el-upload
                        :action="$constant.BASE_URI+'/FileController/upload'"
                        :file-list="formData.fileUrlList"
                        :http-request="uploadFile"
                        class="upload-demo"
                        multiple
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="file" slot-scope="{file}">
                          <a :href="file.url">{{ file.name }}</a>
                          <span class="el-upload-list__item-actions">
                            <i class="el-icon-delete" @click="handlePictureRemove(file,formData.fileUrlList)" />
                          </span>
                        </div>
                      </el-upload>

                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="抄送" label-width="160px" prop="field119">
                      <user-select
                        :default-select="selectList"
                        :multiple="true"
                        width="700"
                        @selectValue="parentMethod"
                      />

                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-form>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="流程图  " name="second">
          <div style="width: 100%">
            <el-row>
              <el-col :span="24">
                <div class="node_info">
                  <div>节点说明：</div>
                  <div v-for="item in nodeColor" class="dis_flex">
                    <div class="node_class" :style="{backgroundColor: item.nodeback}" />
                    {{ item.name }}

                  </div>
                </div>
                <div v-show="true" id="containerPay1" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer">
      <el-button @click="setVisible(false,'')">取 消</el-button>
      <el-button :loading="buttonLoading" type="primary" @click="confirmSubmit()">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { upload } from '@/static/utils/channel'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import UserSelect from '@/views/components/UserSelect'
import * as echarts from 'echarts'

const lineStyle = {
    color: '#00116a',
    width: 2

}
const redLinestyle = {
    color: 'red',
    width: 2
}
const intiData = {}
export default {
    name: 'ApplyPay',
    components: {
        UserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            fileError: false,
            bizByList: [],
            selectList: [],
            detailsForm: {},
            buttonLoading: false,
            // 查询的时候用的字典========================================
            dc_key: ['PAY_TYPE', 'BUDGET_CB', 'RECEIPT_TYPE', 'PURCHASE_TAX_RATE'],
            fileDataIdsAction: 'https://jsonplaceholder.typicode.com/posts/',
            formData: {
                fileUrlList: []
            },
            billTypeOptions: [
                { 'label': '增票', 'value': 1 },
                { 'label': '普票', 'value': 2 },
                { 'label': '发票候补', 'value': 3 }
            ],
            nodeColor: [
                { name: '审核通过', nodeback: '#2A3980' },
                { name: '未经过', nodeback: '#999999' },
                { name: '退回', nodeback: '#E04242' },
                { name: '审核中', nodeback: '#E08E42' },
                { name: '撤回', nodeback: '#4294E0' }
            ],
            onlineForm: {},
            dialogTitle: '发起付款申请1111',
            dialogVisible: false,
            form: {},
            activeName: 'first',
            OutOrderList: [],
            shouldAmount: 0,
            rules: {
                fileDataIds: [{ required: false, message: '请上传发票文件', trigger: 'change' }],
                totalPayMoney: [{ required: true, message: '请输入订单累计已支付金额', trigger: 'change' }],
                payName: [{ required: true, message: '付款名称不能为空', trigger: 'change' }],
                payMoney: [{ required: true, message: '付款金额不能为空', trigger: 'change' }]
                // costsType: [{required: true, message: '请选择', trigger: 'change'}],

            },
            payDetailData: [],
            zhidanStatus:true,
            zffhStatus:true,
            confirmForm: {},
        }
    },
    mounted() {
        const _this = this
        _this.initDict(_this.dc_key).then((res) => {
        })
        _this.getOutOrderList()
        _this.getBizeUserList()

        // /webServer/BugLibraryController/listBizUserAll
    },
    methods: {
        beforeClose() {
            this.formData = {
                fileUrlList: []
            }
            this.dialogVisible = false
        },
        handleClick(tab, event) {
            if (this.activeName == 'second') this.createNodeCanvas()
        },
        createNodeCanvas() {
            this.$nextTick(() => {
                const chartDom = document.getElementById('containerPay1')
                var myCharts = echarts.init(chartDom)
                const charts = {
                    nodes: [ // 节点
                        {
                            name: '申请人发起',
                            value: [45, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '直接上级审核',
                            value: [125, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '部门负责人审核',
                            value: [205, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '分管领导审核',
                            value: [285, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '上级分管领导\n审核',
                            value: [365, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '主要领导\n审核',
                            value: [445, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '出纳支付',
                            value: [525, 250],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '支付审核',
                            value: [525, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '结束',
                            value: [445, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '返回上一节点',
                            value: [550, 180]
                        },

                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '退回发起人   ',
                            value: [450, 600],
                            symbolSize: [70, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '退回发起人',
                            value: [350, 550],
                            symbolSize: [70, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '  退回发起人  ',
                            value: [300, 500],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人 ',
                            value: [250, 450],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人  ',
                            value: [250, 450],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人   ',
                            value: [175, 400],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '  退回发起人   ',
                            value: [100, 350],
                            symbolSize: [20, 20]
                        }

                    ],
                    linesData: [ // 连线
                        {
                            lineStyle: lineStyle,
                            coords: [[45, 250], [105, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[125, 250], [185, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[205, 250], [265, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[285, 250], [345, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[365, 250], [425, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[445, 250], [505, 250]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 250], [450, 550]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[370, 250], [370, 500]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[290, 250], [290, 450]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[210, 250], [210, 400]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[130, 250], [130, 350]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 250], [50, 600]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 550], [50, 550]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[370, 500], [50, 500]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[290, 450], [50, 450]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[210, 400], [50, 400]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[130, 350], [50, 350]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 600], [530, 600]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[530, 600], [530, 250]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[530, 250], [530, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[535, 130], [535, 220]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[525, 100], [475, 100]]
                        }

                    ]
                }
                const option = {
                    xAxis: {
                        min: 0,
                        max: 600,
                        padding: [0, 50, 0, 50],
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        min: 0,
                        max: 650,
                        show: false,
                        type: 'value'
                    },
                    grid: {
                        left: 50,
                        right: 0,
                        bottom: 0,
                        top: 0
                    },

                    series: [
                        {
                            type: 'graph',
                            coordinateSystem: 'cartesian2d',
                            symbol: 'rect',
                            symbolSize: [80, 40],
                            itemStyle: {
                                color: 'rgb(225,7,7)'
                            },
                            symbolOffset: [10, 0],
                            // force: {
                            // 	edgeLength: 100,//连线的长度
                            // 	repulsion: 200 //子节点之间的间距
                            // },

                            label: {
                                show: true,
                                color: 'white' // 节点文字颜色
                            },

                            data: charts.nodes

                        },

                        {
                            type: 'lines',
                            polyline: false,
                            coordinateSystem: 'cartesian2d',
                            symbol: ['', 'arrow'],
                            symbolSize: 10,
                            data: charts.linesData

                        }

                    ]

                }
                myCharts.clear()

                myCharts.setOption(option)
                window.addEventListener('resize', () => {
                    myCharts.resize()
                })
            })
        },
        handlePictureRemove(file, fileUrlList) {
            var index = fileUrlList.indexOf(file)
            fileUrlList.splice(index, 1)
        },
        uploadFile: function(param) {
            const _this = this
            upload(param, true).then((res) => {
                _this.formData.fileUrlList.push(res)
            })
        },
        downloadFaPiao(url) {
            window.open(url)
        },
        parentMethod(val) {
            if (val.length > 0) {
                this.formData.ccList = val.join(',')
            }
        },
        async getBizeUserList() {
            const { data } = await this.baseRequest1('BugLibraryController', 'listBizUserAll', {})
            this.bizByList = data
        },
        async selectOutOrderDetails(e) {
            const postData = { id: e }
            const { data } = await this.baseRequest1('OutOrderMainController', 'getVoById', postData)
            // ApplyPaymentController/getTotalMoneyByProId
            const index = this.OutOrderList.findIndex((a) => a.id == e)
            const res = await this.baseRequest1('ApplyPaymentController', 'getTotalMoneyByProId', { proId: this.OutOrderList[index].proId })
            const res2 = await this.baseRequest1('ApplyPaymentController', 'getTotalPayMoneyByOrderNo', { orderNo: this.OutOrderList[index].orderNo })
            const fileUrlList = this.formData.fileUrlList
            this.formData = { ...data, fileUrlList: fileUrlList }
            this.formData.projectName = data.proName
            this.formData.customerName = data.custName
            // this.formData.supplierName = data.bizName
            this.formData.bizBy = data.bizBy
            this.formData.dealAt = this.$common.transServDate(data.dealAt)
            this.formData.outTimeline = this.$common.transServDate(data.outTimeline)
            this.formData.orderNo = data.supplierName + '-' + data.orderNo
            this.formData.orderId = e
            this.formData.totalReturnMoney = res.data.data
            this.formData.totalPayMoney = res2.data.data
            this.shouldAmount = data.shouldAmount
            // this.formData.fileUrlList = []
            this.getPayDetail(e)
        },
        getPayDetail: function(id) {
            const _this = this
            _this.payDetailData = []
            this.basePayDetailRequest('listForAudit', { outOrderMainId: id }).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const jsonMap = _this.getPayItemJson(item)
                        _this.payDetailData.push(jsonMap)
                    })
                }
            })
        },
        getPayItemJson: function(item) {
            item.payAt = this.$common.transDate(item.payAt, this.$constant.DATE_PATTERN.DATE)
            item.applyTime = item.applyTime ? this.$common.transDate(item.applyTime, this.$constant.DATE_PATTERN.DATE) : ''
            item.updatedAt = item.updatedAt ? this.$common.transDate(item.updatedAt, this.$constant.DATE_PATTERN.DATE) : ''
            item.planPayTime = item.planPayTime ? this.$common.transDate(item.planPayTime, this.$constant.DATE_PATTERN.DATE) : ''
            item.remindTime = item.remindTime ? this.$common.transDate(item.remindTime, this.$constant.DATE_PATTERN.DATE) : ''
            item.statusName = item.status === '2' ? '已付款' : '待付款'
            item.applyBy = this.UserMap[item.applyBy]
            return item
        },
        setSelectRow(selection) {
            if (selection.length > 1) {
                const del_row = selection.shift()
                this.$refs.payDetailTable.toggleRowSelection(del_row, false)
            }
            if (selection.length) {
                this.formData.payName = selection[0].payName
                this.formData.payMoney = selection[0].payAmount
                this.formData.outOrderPayId = selection[0].id
            } else {
                this.formData.payName = ''
                this.formData.payMoney = ''
                this.formData.outOrderPayId =''
            }
            this.formData = JSON.parse(JSON.stringify(this.formData))
        },
        selectAll() {
            this.$message.warning('该列表只能单选')
            this.$refs.payDetailTable.clearSelection()
        },
        // /webServer/OutOrderMainController/list
        async getOutOrderList() {
            // 获取采购订单号下拉数据
            const postData = {
                shouldAmount: 0
            }
            const { data } = await this.baseRequest1('OutOrderMainController', 'listAllVo', postData)
            this.OutOrderList = data
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },
        async confirmSubmit() {
            this.$refs.elformData.validate(async(valid) => {
                if (valid) {
                    if (this.shouldAmount === 0) {
                        this.$message.error('采购订单结余为0，不能提交!')
                        return
                    }
                    if (this.shouldAmount < this.formData.payMoney) {
                        this.$message.error('付款已大于采购订单结余，不能提交!')
                        return
                    }
                    if (this.formData.fileUrlList.length > 0) {
                        this.formData.fileDataIds = this.formData.fileUrlList.map((e) => {
                            return e.data
                        }).toString()
                    }
                    const formData = { ...this.formData }
                    delete formData.fileUrlList
                    this.buttonLoading = true
                    const { data } = await this.baseRequest1(
					 'ApplyPaymentController',
					 'addApplyPayment',
					 { ...formData })
                    this.buttonLoading = false
                    if (data.code == 200) {
                        this.$message.success('流程已发起')
                        this.dialogVisible = false
                        this.$refs.elformData.clearValidate()
                        this.$emit('getData')
                    }
                    //
                } else {

                }
            })
        },
        setVisible(status, data) {
            this.dialogVisible = status
            if (this.$refs.elformData) {
                this.$refs.elformData.clearValidate()
            }
        },
        basePayDetailRequest(opUrl, postData) {
            return this.$channel.globleRequest('OutOrderPayController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">
#containerPay1 {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.elformdom {
	label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		-webkit-font-smoothing: antialiased;
		color: #303133;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.el-radio {
		height: 15px;
		margin-top: -19px;
	}
}

.payform {
	.el-form-item__label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		font-weight: 400;
	}
}

.tabsdom {
	.el-tabs__header {
		text-align: center !important;
		width: 139px !important;
		text-align: center !important;
		display: block !important;
		margin: auto !important;
		margin-bottom: 15px !important;
	}

	.el-tabs__nav-wrap::after {
		display: none;
	}
}

.cost_form {
	.col-input {
		font-weight: 400;
	}

	.el-form-item__label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.el-form-item__label .moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}
}

</style>