programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/applyLxSjWork.vue

<template>
    <!--    发起付款申请 -->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="dialogTitle"
        append-to-body
        :visible.sync="dialogLxVisible"
        top="50px"
        width="75%"
        :before-close="beforeClose"
    >
        <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"
                        >
                            <h3 style="margin-top: 0"><span style="color: red">*</span> 基本信息</h3>
                            <el-card style="padding:0px 20px;margin-bottom: 25px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="关联项目" prop="proId">
                                            <el-select v-model="formData.proId" filterable placeholder="关联项目名称" @change="proChange">
                                                <el-option
                                                    v-for="item in ProjectData"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                    <span style="float: left">{{ item.label }}</span>
                                                    <span style="float: right; color: #8492a6; font-size: 13px">{{
                                                            item.custname
                                                        }}</span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="项目类型">
                                            <div style="line-height: 40px;height: 40px">{{ formData.protype }}</div>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="储备项目状态">
                                            <div style="line-height: 40px;height: 40px">{{ formData.signStatus }}</div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="预计销售金额(元)">
                                            <div style="line-height: 40px;height: 40px">{{ formData.presales ? formData.presales + '（元）' : '' }}</div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <h3 style="margin-top: 0"><span style="color: red">*</span> 立项内容</h3>
                            <el-card style="padding:0px 20px;margin-bottom: 25px">
                                <el-row :gutter="15">
                                    <el-col :span="24">
                                        <el-form-item label="*项目概述" label-width="160px">
                                            <el-input type="textarea" v-model="formData.approval.proOverview" :rows="3"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="*是否实现盈利" label-width="160px">
                                            <el-select v-model="formData.approval.isProfit"   filterable clearable placeholder="是否实现盈利" >
                                                <el-option v-for="item in billTypeOptions" :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.approval.rate"  />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="*项目实施计划" label-width="160px">
                                            <el-input v-model="formData.approval.implementationContent"  type="textarea" :raws="2"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="*项目工作实施方案" label-width="160px" prop="proId">

                                            <el-upload
                                                class="upload-demo"
                                                :action="$constant.BASE_URI + '/FileController/upload'"
                                                :http-request="upload"
                                                :before-remove="beforeRemove"
                                                :file-list="fileUrlList"
                                            >
                                                <el-button v-if="!isView" size="small" type="primary">点击上传</el-button>
                                                <div v-if="!isView" slot="tip" class="el-upload__tip">请上传50MB以内的文件</div>
                                                <div slot="file" slot-scope="{file}">
                                                    <a :href="file.url">{{ file.name }}</a>
                                                    <span class="el-upload-list__item-actions">
                        <i v-if="!isView" class="el-icon-delete" @click="handlePictureRemove(file,fileUrlList)" />
                      </span>
                                                </div>
                                            </el-upload>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="*调研报告" label-width="160px" prop="proId">

                                            <el-upload
                                                class="upload-demo"
                                                :action="$constant.BASE_URI + '/FileController/upload'"
                                                :http-request="upload2"
                                                :before-remove="beforeRemove"
                                                :file-list="fileUrlList2"
                                            >
                                                <el-button v-if="!isView" size="small" type="primary">点击上传</el-button>
                                                <div v-if="!isView" slot="tip" class="el-upload__tip">请上传50MB以内的文件</div>
                                                <div slot="file" slot-scope="{file}">
                                                    <a :href="file.url">{{ file.name }}</a>
                                                    <span class="el-upload-list__item-actions">
                        <i v-if="!isView" class="el-icon-delete" @click="handlePictureRemove(file,fileUrlList2)" />
                      </span>
                                                </div>
                                            </el-upload>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="其他附件" label-width="160px" prop="proId">

                                            <el-upload
                                                class="upload-demo"
                                                :action="$constant.BASE_URI + '/FileController/upload'"
                                                :http-request="upload3"
                                                :before-remove="beforeRemove"
                                                :file-list="fileUrlList3"
                                            >
                                                <el-button v-if="!isView" size="small" type="primary">点击上传</el-button>
                                                <div v-if="!isView" slot="tip" class="el-upload__tip">请上传50MB以内的文件</div>
                                                <div slot="file" slot-scope="{file}">
                                                    <a :href="file.url">{{ file.name }}</a>
                                                    <span class="el-upload-list__item-actions">
                        <i v-if="!isView" class="el-icon-delete" @click="handlePictureRemove(file,fileUrlList3)" />
                      </span>
                                                </div>
                                            </el-upload>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <span class="card_title">*回款计划</span>
                                        <el-card shadow="always">
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-table
                                                        v-loading="planLoading"
                                                        :data="SalsReturnPlanData"
                                                        stripe
                                                        row-class-name="g_table_row"
                                                    >
                                                        <el-table-column type="index" width="60" />
                                                        <el-table-column label="应收日期" prop="ardateStr" />
                                                        <el-table-column label="提醒日期" prop="noticedateStr" />
                                                        <el-table-column label="应收金额（元）" prop="aramountStr" header-align="center" align="center" />
                                                        <el-table-column label="已收金额（元）" prop="rcamountStr" header-align="center" align="center" />
                                                        <el-table-column label="收款名称" prop="arname" header-align="center" align="center" />
                                                        <el-table-column label="收款状态" prop="statusStr" header-align="center" align="center" />
                                                        <el-table-column align="right" width="160">
                                                            <template slot="header">
                                                                <el-button
                                                                    size="mini"
                                                                    class="ch-button-warning"
                                                                    @click="addPlan(ctrId)"
                                                                >添加回款计划</el-button>
                                                            </template>
                                                            <template scope="scope">
                                                                <el-button
                                                                    size="mini"
                                                                    type="danger"
                                                                    @click="deletePlan(scope.row.index) "
                                                                >删除</el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </el-col>
                                            </el-row>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <h3 style="margin-top: 0"><span style="color: red">*</span> 预算信息</h3>
                            <el-card style="padding:0px 20px;margin-bottom: 25px">
                                <el-row :gutter="15">
                                    <el-col :span="24">
                                        <bug-get ref="bids" :key="keys" :pro-id="formData.proId" :is-audit="isView?'true':''"    @handleInfo="handleChange"  />
                                    </el-col>
                                </el-row>
                            </el-card>
                            <h3 style="margin-top: 0">
                                申请内容
                            </h3>
                            <el-card style="padding:0px 20px;margin-bottom: 25px">
                                <el-row :gutter="15">
                                    <el-col :span="24">
                                        <el-form-item label="申请理由" label-width="160px" prop="reason">
                                            <el-input
                                                v-model="formData.reason"
                                                :style="{width: '100%'}"
                                                clearable
                                                placeholder="请输入申请理由"
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="备注说明" label-width="160px" prop="comment">
                                            <el-input
                                                v-model="formData.comment"
                                                :style="{width: '100%'}"
                                                clearable
                                            />
                                        </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 class="dis_flex" v-for="item in nodeColor">
                                        <div class="node_class" :style="{backgroundColor: item.nodeback}"></div>
                                        {{ item.name }}

                                    </div>
                                </div>
                                <div id="containerPay" style="width: 100%" v-show="true"></div>
                            </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 :title="dialogPlanTitle" :visible.sync="dialogPlanVisible" width="70%" top="50px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body @open="dlgPlanCRUDOpen">
            <el-form ref="planForm" :model="planForm" style="width: 100%;padding: 5px" :rules="planRules">
                <el-row>
                    <el-col style="padding-bottom: 10px">
                        <span class="card_title">基本信息</span>
                        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
                            <el-row>
                                <el-col :span="24">
                                    <el-row>
                                        <el-col :span="3" class="col-txt"><span>应收日期</span></el-col>
                                        <el-col :span="8" class="col-input">
                                            <el-form-item prop="ardate">
                                                <el-date-picker
                                                    v-model="planForm.ardate"
                                                    style="width: 100%"
                                                    type="date"
                                                    placeholder="应收日期"
                                                    @change="arDateChange"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="4" class="col-txt"><span>提醒日期</span></el-col>
                                        <el-col :span="8" class="col-input">
                                            <el-form-item prop="noticedate">
                                                <el-date-picker
                                                    v-model="planForm.noticedate"
                                                    style="width: 100%"
                                                    type="date"
                                                    placeholder="提醒日期"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="3" class="col-txt"><span>应收金额</span></el-col>
                                        <el-col :span="8" class="col-input">
                                            <el-form-item prop="aramount">
                                                <el-input v-model="planForm.aramount" placeholder="0" type="number">
                                                    <template slot="prepend">￥</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="4" class="col-txt"><span>收款名称</span></el-col>
                                        <el-col :span="8" class="col-input">
                                            <el-form-item prop="arname">
                                                <el-input v-model="planForm.arname" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col style="padding-bottom: 10px">
                        <span class="card_title">其他信息</span>
                        <el-card shadow="always" style="padding: 15px 5px 5px 15px">
                            <el-row>
                                <el-col :span="3" class="col-txt"><span>更新日期</span></el-col>
                                <el-col :span="8" class="col-input">
                                    <el-form-item>
                                        <el-input v-model="planForm.updatedatStr" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" class="col-txt"><span>更新人</span></el-col>
                                <el-col :span="9" class="col-input">
                                    <el-form-item>
                                        <el-input v-model="planForm.updatedname" disabled />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogPlanVisible = false">取 消</el-button>
                <el-button v-preventReClick type="primary" @click.native="confirmPlanSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </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'
import Constant from '@/static/utils/constant'
import BugGet from '@/views/workflow/components/myProcess/applyBudgetingApprove.vue'
const lineStyle = {
    color: '#00116a',
    width: 2

}
const redLinestyle = {
    color: 'red',
    width: 2
}
const intiData = {}
export default {
    name: 'ApplyPay',
    components: {
        UserSelect,
        BugGet
    },
    mixins: [Base, BaseData],
    data() {
        return {
            ProjectData: [],
            SalsReturnPlanData:[],
            formData: this.initForm(),
            dc_sign_status: Constant.dc_sign_status_2,
            hasRecord: false,
            planLoading: false,
            ysInfo:true,
            keys: 0,
            ctrId:'',
            fileUrlList:[],
            fileUrlList2:[],
            fileUrlList3:[],
            planForm: {
                id: '',
                planno: '',
                ctrid: '',
                ardate: '',
                aramount: '',
                arname: '',
                noticedate: '',
                updatedby: '',
                updatedname: '',
                updatedatStr: ''
            },
            planRules:{},
            isAdd:false,
            isView: false,
            dialogPlanVisible:false,
            dialogPlanTitle:'新增计划',
            hasNewTemplate:false,
            referenceId: '',
            fileError: false,
            bizByList: [],
            selectList: [],
            detailsForm: {},
            buttonLoading: false,
            // 查询的时候用的字典========================================
            dc_key: ['PAY_TYPE', 'BUDGET_CB', 'RECEIPT_TYPE'],
            fileDataIdsAction: 'https://jsonplaceholder.typicode.com/posts/',

            billTypeOptions: [
                { 'label': '是', 'value': '是' },
                { 'label': '否', 'value': '否'}
            ],
            nodeColor: [
                { name: '审核通过', nodeback: '#2A3980' },
                { name: '未经过', nodeback: '#999999' },
                { name: '退回', nodeback: '#E04242' },
                { name: '审核中', nodeback: '#E08E42' },
                { name: '撤回', nodeback: '#4294E0' }
            ],
            onlineForm: {},
            dialogTitle: '立项申请',
            dialogLxVisible: false,
            form: {},
            activeName: 'first',
            OutOrderList: [],
            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'}],

            }
        }
    },
    mounted() {
        this.initProType()
        this.generateDcMap()
        this.initDict(this.dc_key).then((res) => {
            // this.initProject({ signstatus: '2,3,6',realValidStatus:'0,3' })
            this.initPro()
        })

        // /webServer/BugLibraryController/listBizUserAll
    },
    methods: {
        generateDcMap: function() {
            this.dc_map['dc_sign_status'] = this.$common.transDcMap(Constant.dc_sign_status_2)
        },
        upload(param){
            this.uploadRp(param,'fileUrlList')
        },
        upload2(param){
            this.uploadRp(param,'fileUrlList2')
        },
        upload3(param){
            this.uploadRp(param,'fileUrlList3')
        },
        uploadRp: function(param,fileName) {
            const _this = this
            _this.fileError = true
            upload(param, true).then((res) => {
                if (res.key === 200) {
                    if('fileUrlList'===fileName){
                        _this.fileUrlList.push(res)
                    }else if('fileUrlList2'===fileName){
                        _this.fileUrlList2.push(res)
                    }else if('fileUrlList3'===fileName){
                        _this.fileUrlList3.push(res)
                    }
                    this.$message.info('文件上传成功')
                } else {
                    this.$message.error('文件上传失败')
                }
                _this.fileError = false
            })
        },
        initPro(){
            const _this = this
            this.proMainRequest('listAllByUserRole',{ signstatus: '2,3,6',realValidStatus:'0,3' }).then(res=>{
                if(res.data){
                    res.data.forEach(function(item) {
                        const json = {
                            label: item.proname,
                            value: item.id,
                            protype: item.protype,
                            prostatus: item.prostatus,
                            signstatus: item.signstatus,
                            realValidStatus: item.realValidStatus,
                            custname: item.custname,
                            closingItemStatus: item.closingItemStatus,
                            createdAt: item.createdat,
                            validstatus: item.validstatus,
                            managedby: item.managedby,
                            presales: item.presales
                        }
                        _this.ProjectData.push(json)
                        _this.ProjectMap[json.value] = json
                    })
                }
            })
        },
        initForm(){
            return{
                id:'',
                proId:'',
                ctrId:'',
                approvalId:'',
                workReceivableId:'',
                reason:'',
                comment:'',
                status:'',
                approvalForm:'',
                approval:{},
                workReceivableForm:''
            }
        },
        ctrMainByProId(proId){
            const _this = this
          this.ctrMainRequest('getByProId',{proId:proId}).then(res=>{
              if(res.data){
                  _this.ctrId = res.data.id
                 _this.getPlanData(res.data.id)
              }
          })
        },
        getPlanData: function(ctrId) {
            const _this = this
            this.SalsReturnPlanData = []
            if (ctrId) {
                this.planLoading = true
                const postData = this.$qs.stringify({
                    ctrid: ctrId,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                })
                console.log(postData)
                this.$axios({
                    headers: {
                        'MVVM-Key': String(new Date().getTime()),
                        'xx': 'anything'
                    },
                    method: 'post',
                    url: _this.$constant.BASE_URI + '/AccountReceivableController/list',
                    data: postData
                }).then((res) => {
                    console.log('sales return plan list', res)
                    _this.$common.checkLoginStatus(res.data.statusCode)
                    if (res.data.rows) {
                        res.data.rows.forEach(function(item) {
                            const json = {
                                planstatus: item.planstatus,
                                arname: item.arname,
                                // aramountStr: '￥' + _this.$common.formatMoney(item.aramount),
                                // rcamountStr: '￥' + _this.$common.formatMoney(item.receiveamount),
                                ardateStr: _this.$common.transDate(item.ardate),
                                noticedateStr: _this.$common.transDate(item.noticedate),
                                id: item.id
                            }

                            const ra = _this.$common.formatMoney(item.receiveamount)
                            json.rcamountStr = ra ? '￥' + ra : ''
                            item.ysAmount = parseInt(item.aramount || 0)
                            const sr = _this.$common.formatMoney(item.ysAmount)
                            json.ysAmountStr = sr ? '￥' + sr : ''
                            item.aramount = parseInt(item.aramount || 0) + parseInt(item.adjustamount || 0)
                            const r = _this.$common.formatMoney(item.aramount)
                            json.aramountStr = r ? '￥' + r : ''

                            json.statusStr = '未收款'
                            if (item.planstatus === '1') {
                                json.statusStr = '收款中'
                            } else if (item.planstatus === '2') {
                                json.statusStr = '收款完成'
                            }

                            _this.SalsReturnPlanData.push(json)
                        })
                    }
                    _this.planLoading = false
                }).catch((err, x) => {
                    console.log('sales return plan list error', err, x)
                })
            }
        },
        arDateChange: function(val) {
            // console.log('contract date change:' + val)
            if (!val) return
            const time = new Date(val)
            time.setTime(time.getTime() - 3600 * 1000 * 24 * 15)
            this.planForm.noticedate = time
        },
        confirmPlanSubmit: function() {
            const _this = this

            this.$refs.planForm.validate(valid => {
                if (valid) {
                    var acting = this.$notify({
                        title: '正在上传信息,喝杯咖啡等等',
                        type: 'warning'
                    })
                    const postData = {
                        id: this.planForm.id,
                        ctrid: this.ctrId,
                        ardate: this.$common.transDate(this.planForm.ardate, Constant.DATE_PATTERN.DATE_TIME_h),
                        aramount: this.planForm.aramount,
                        arname: this.planForm.arname,
                        noticedate: this.$common.transDate(this.planForm.noticedate, Constant.DATE_PATTERN.DATE_TIME_h),
                        updatedby: this.planForm.updatedby,
                        updatedat: this.$common.transDate(new Date(), Constant.DATE_PATTERN.DATE_TIME_h)
                    }
                    postData.ardateStr= postData.ardate.split(' ')[0]
                    postData.noticedateStr= postData.noticedate.split(' ')[0]
                    const r = _this.$common.formatMoney(postData.aramount)
                    postData.aramountStr = r ? '￥' + r : ''
                    postData.planno = this.planForm.planno
                    postData.planstatus = '0'
                    postData.groupId = this.$common.currUser() ? this.$common.currUser().groupId : ''
                    postData.statusStr = '未收款'
                    _this.SalsReturnPlanData.push(postData)
                    _this.dialogPlanVisible = false
                    _this.$notify({
                        title: '添加成功',
                        type: 'info'
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        /* 删除*/
        deletePlan: function(pId,index) {
             this.SalsReturnPlanData.splice(index,1)
        },
        /* 新增*/
        addPlan: function(ctrId) {
            this.planForm = {
                id: '',
                planno: 'PLN-' + new Date().Format('yyyyMMddhhmm'),
                ctrid: ctrId,
                ardate: '',
                aramount: '',
                arname: '',
                noticedate: '',
                updatedby: '',
                updatedname: '',
                updatedatStr: ''
            }
            const currUser = this.$common.currUser()
            if (currUser) {
                this.planForm.updatedatStr = this.$common.transDate(new Date().getTime())
                this.planForm.updatedname = currUser.truename
                this.planForm.updatedby = currUser.id
            }
            this.isAdd = true
            this.dialogPlanVisible = true
            this.dialogPlanTitle = '新增计划'
        },
        getBudgetData() {
            const _this = this
            this.budGetingRequest('checkRecordApproval', { proId:this.formData.proId }).then(res => {

                if (res.data.hasRecord) {
                    _this.hasRecord = true
                    if (res.data.templateId) {
                        const postData = {
                            proId: _this.formData.proId,
                            templateId: res.data.templateId
                        }
                        _this.budGetingRequest('checkNewTemplate', postData).then(res => {
                            _this.hasNewTemplate = !res.data;
                            _this.keys++
                            _this.$nextTick(() => {
                                this.$refs.bids.initData(_this.hasNewTemplate)
                            })
                        })
                    }else {
                        _this.keys++
                        _this.$nextTick(() => {
                            this.$refs.bids.initData(_this.hasNewTemplate)
                        })
                    }
                }else{
                    _this.keys++
                    _this.$nextTick(() => {
                        this.$refs.bids.initData(_this.hasNewTemplate)
                    })
                }
            })
        },

        proChange(){
            const _this = this
            _this.ProjectData.forEach(item=>{
                if(item.value===_this.formData.proId){
                    _this.formData.protype =  _this.ProTypeMap[item.protype]
                    _this.formData.signStatus = _this.dc_map.dc_sign_status[item.signstatus]
                    _this.formData.presales = item.presales
                    _this.formData.proName = item.label
                }
            })
            _this.getBudgetData()
            _this.ctrMainByProId(_this.formData.proId)
        },
        beforeClose() {
            // this.formData = {
            //     fileUrlList: []
            // }
            this.dialogLxVisible = false
        },
        handleClick(tab, event) {
            if (this.activeName == 'second') this.createNodeCanvas()
        },
        createNodeCanvas() {
            this.$nextTick(() => {
                let chartDom = document.getElementById('containerPay')
                var myCharts = echarts.init(chartDom)
                let charts = {
                    nodes: [ // 节点
                        {
                            name: '申请人发起',
                            value: [45, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '直接上级审核',
                            value: [125, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '部门负责人审核',
                            value: [205, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '财务负责人',
                            value: [285, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '分管领导审核',
                            value: [365, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '上级分管领导\n审核',
                            value: [445, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '总经理（董事长）\n审核',
                            value: [605, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            name: '结束',
                            value: [685, 100],
                            symbol: 'image://' + require('../asste/huifangkuai.png'),
                            symbolSize: [110, 60]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '  退回发起人    ',
                            value: [450, 500],
                            symbolSize: [70, 20]
                        },
                        // {
                        //     label: {
                        //         show: true,
                        //         color: 'red', // 节点文字颜色
                        //         backgroundColor: '#f5f5f5'
                        //     },
                        //     itemStyle: {
                        //         color: '#f5f5f5'
                        //     },
                        //     name: '退回发起人  ',
                        //     value: [400, 450],
                        //     symbolSize: [70, 20]
                        // },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '退回发起人 ',
                            value: [350, 400],
                            symbolSize: [70, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '  退回发起人  ',
                            value: [300, 350],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人 ',
                            value: [250, 300],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人  ',
                            value: [250, 300],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: ' 退回发起人   ',
                            value: [175, 250],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: 'rgb(0,0,0,0)'
                            },
                            name: ' 项目金额<200万 ',
                            value: [525, 40],
                            symbolSize: [20, 20]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: 'rgb(0,0,0,0)'
                            },
                            name: ' 项目金额≥200万 ',
                            value:  [525, 100],
                            symbolSize: [110, 60]
                        },
                        {
                            label: {
                                show: true,
                                color: 'red', // 节点文字颜色
                                backgroundColor: '#f5f5f5'
                            },
                            itemStyle: {
                                color: '#f5f5f5'
                            },
                            name: '  退回发起人   ',
                            value: [100, 200],
                            symbolSize: [20, 20]
                        }
                    ],
                    linesData: [ // 连线

                        {
                            lineStyle: lineStyle,
                            coords: [[45, 100], [100, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[125, 100], [180, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[205, 100], [260, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[285, 100], [340, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[365, 100], [420, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[445, 100], [580, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[600, 100], [660, 100]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[610, 100], [610, 500]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 70], [450, 40]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 40], [685, 40]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[685, 40], [685, 70]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 100], [450, 400]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[370, 100], [370, 350]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[290, 100], [290, 300]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[210, 100], [210, 250]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[130, 100], [130, 200]],
                            symbol: 'none'
                        },
                        // {
                        //     lineStyle: lineStyle,
                        //     coords: [[50, 500],[50, 130]]
                        // },
                        {
                            lineStyle: lineStyle,
                            coords: [[610, 500], [50, 500]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 500],[50, 130]]
                        },
                        // {
                        //     lineStyle: lineStyle,
                        //     coords: [[530, 450], [50, 450]],
                        //     symbol: 'none'
                        // },
                        {
                            lineStyle: lineStyle,
                            coords: [[450, 400], [50, 400]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 400],[50, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[370, 350], [50, 350]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 350],[50, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[290, 300], [50, 300]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 300],[50, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[210, 250], [50, 250]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 250],[50, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[130, 200], [50, 200]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 200],[50, 130]]
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 150], [50, 150]],
                            symbol: 'none'
                        },
                        {
                            lineStyle: lineStyle,
                            coords: [[50, 150],[50, 130]]
                        },

                    ]
                }
                let option = {
                    xAxis: {
                        min: 0,
                        max: 760,
                        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
            let 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 })
            let 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.custName + '-' + data.orderNo
            this.formData.orderId = e
            this.formData.totalReturnMoney = res.data.data
            this.formData.totalPayMoney = res2.data.data
            // this.formData.fileUrlList = []
        },
        // /webServer/OutOrderMainController/list
        async getOutOrderList() {
            // 获取采购订单号下拉数据
            const postData = {
                pageNum: 1,
                pageSize: 10000,
                shouldAmount: 0
            }
            const { data } = await this.baseRequest1('OutOrderMainController', 'list', postData)
            this.OutOrderList = data.rows
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },
        async confirmSubmit() {
            this.$refs.elformData.validate(async(valid) => {
                if(!this.formData.proId){
                    this.$message.warning('请选择项目')
                    return
                }
                if(!this.formData.approval.proOverview){
                    this.$message.warning('请输入项目概述')
                    return
                }
                if(!this.formData.approval.isProfit){
                    this.$message.warning('请选择是否实现盈利')
                    return
                }
                if(!this.formData.approval.rate){
                    this.$message.warning('请输入税率')
                    return
                }
                if(!this.formData.approval.implementationContent){
                    this.$message.warning('请输入项目实施计划')
                    return
                }
                if(this.fileUrlList&&this.fileUrlList.length>0){
                    this.formData.approval.implementationProgramme=JSON.stringify(this.fileUrlList)
                }else{
                    this.$message.warning('请上传实施方案')
                    return
                }
                if(this.fileUrlList2&&this.fileUrlList2.length>0){
                    this.formData.approval.researchReport=JSON.stringify(this.fileUrlList2)
                }else{
                    this.$message.warning('请上传调研报告')
                    return
                }
                if(this.fileUrlList3&&this.fileUrlList3.length>0){
                    this.formData.approval.otherFile=JSON.stringify(this.fileUrlList3)
                }
                if(this.SalsReturnPlanData&&this.SalsReturnPlanData.length>0){
                    this.formData.workReceivableForm= JSON.stringify(this.SalsReturnPlanData)
                }else{
                    this.$message.warning('请添加回款计划')
                    return
                }
                if(this.ysInfo){
                    this.$message.warning('请添加预算信息')
                    return
                }
                this.formData.ctrId = this.ctrId
                this.formData.approval.status = '0'
                this.formData.approval.proId = this.formData.proId
                this.formData.approval.groupId =  this.$common.currUser().groupId
                this.formData.groupId = this.$common.currUser().groupId
                this.formData.approvalForm = JSON.stringify(this.formData.approval)
                // this.formData.approval ={}
                if (valid) {
                    this.$refs.bids.toSave('1')
                    let formData = { ...this.formData }
                    formData.approval={}
                    this.buttonLoading = true
                    const { data } = await this.baseRequest1(
                        'ApplyLxSjWorkController',
                        'addApplyLxWork',
                        { ...formData })
                    this.buttonLoading = false
                    if (data.code == 200) {
                        this.$message.success('流程已发起')
                        this.dialogLxVisible = false
                        this.formData= this.initForm()
                        this.fileUrlList = []
                        this.fileUrlList2 = []
                        this.fileUrlList3 = []
                        this.ctrId =''
                        this.SalsReturnPlanData = []
                        this.$emit('getData')
                    }
                    //
                } else {

                }
            })
        },
        handleChange(val){
            this.ysInfo = val
        },
        initLxWork(proId,status){
            this.formData.proId = proId
            this.proChange()
            this.setVisible(status)
        },
        setVisible(status, data) {
            this.dialogLxVisible = status
            if (this.$refs.elformData) {
                this.$refs.elformData.clearValidate()
            }
        },
        budGetingRequest(opUrl, postData) {
            return this.$channel.globleRequest('BudgetMakingController', opUrl, postData, 'project')
        },
        ctrMainRequest(opUrl, postData) {
            return this.$channel.globleRequest('CtrMainController', opUrl, postData, 'project')
        },
        proMainRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProMainController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">
#containerPay {
    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>