settle_down_web/src/views/workflow/components/myProcess/applyPayment.vue

<template>
  <!--    加班申请单 发起付款申请(不要调用接口的)-->

  <el-dialog
    v-loading="loading1"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    title="发起付款申请"
    top="50px"
    width="75%"
    :append-to-body="true"
    :before-close="beforeClose"
    class="statistic_base"
    :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-row type="flex" justify="end">
            <el-col :span="3" class="col-txt"><span>流程编号:</span></el-col>
            <el-col :span="6" class="col-input"><span style="font-size: 14px">{{ formData.flowNum }}</span></el-col>
          </el-row>
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            label-width="150px"
          >

            <el-card shadow="always" style="padding: 15px 5px 5px 15px">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="标题" prop="titlexxx">
                    <el-input v-model="formData.title" placeholder="付款领用单-年月日" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创建人">
                    <el-input v-model="userinfo.truename" placeholder="创建人" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="创建部门">
                    <el-input v-model="userinfo.deptName" placeholder="创建部门" readonly />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="是否为无合同付款">
                    <el-select
                      v-model="formData.isNoContract"
                      clearable
                      filterable
                      placeholder="是否为无合同付款"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in dc_data.ANSWER_NEED"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="付款单位">
                    <el-input v-model="formData.payerName" placeholder="请填写" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="收款单位">
                    <el-input v-model="formData.payeeName" placeholder="请填写" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资金用途">
                    <el-input v-model="formData.moneyPurpose" placeholder="请填写" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="合同总价">
                    <el-input v-model="formData.contractPrice" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请填写" />
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="付款说明">
                    <el-input
                      v-model="formData.payRemark"
                      :autosize="{minRows: 4, maxRows: 4}"
                      :style="{width: '100%'}"
                      placeholder="请填写"
                      type="textarea"
                      maxlength="2000"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="累计付款">
                    <el-input v-model="formData.havePayMoney" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请填写" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请金额（小写）" prop="applyPayMoney">
                    <el-input v-model="formData.applyPayMoney" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请填写" @input="swapper(formData.applyPayMoney)" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请金额（大写）" prop="applyPayMoneyUppercase">
                    <el-input v-model="formData.applyPayMoneyUppercase" placeholder="请填写" />
                  </el-form-item>
                </el-col>
                <!--                  <el-col :span="24">formData.applyPayMoneyUppercase={{formData.applyPayMoneyUppercase}}</el-col>-->

                <el-col :span="24">
                  <el-form-item label="相关附件">
                    <el-upload
                      :action="$constant.BASE_URI+'/FileController/upload'"
                      :file-list="formData.fileUrlList"
                      :http-request="uploadFile"
                      class="upload-demo"
                      multiple
                      :limit="6"
                      :before-upload="$common.beforeUploadJustWordExcel"
                    >
                      <el-button size="small" type="primary">上传附件</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传pdf、doc、docx、xls、xlsx文件，且不超过5MB，数量不超过6</div>
                      <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="handlePictureRemoveXF66(file,formData.fileUrlList)" />
                        </span>
                      </div>
                    </el-upload>

                  </el-form-item>
                </el-col>
                <el-col :span="17" />
              </el-row>
            </el-card>

          </el-form>

        </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="containeraddwork1" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>

      <el-button :loading="loading" type="primary" @click="handelConfirm">确定</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'
import { isPassword } from '@/static/utils/validate'

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

}
const redLinestyle = {
    color: 'red',
    width: 2
}

export default {
    name: 'ApplyPay',
    components: {
        upload, UserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            loading1: false,
            loading: false,
            nodeColor: [
                { name: '审核通过', nodeback: '#2A3980' },
                { name: '未经过', nodeback: '#999999' },
                { name: '退回', nodeback: '#E04242' },
                { name: '审核中', nodeback: '#E08E42' },
                { name: '撤回', nodeback: '#4294E0' }
            ],
            dc_key: ['ANSWER_NEED'],
            dialogVisible: false,

            formData: {
                payerName: '无锡市安居投资发展有限公司',
                fileUrlList: []
            },
            userinfo: {},
            activeName: 'first',
            rules: {

                title: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'change'
                }],
                applyPayMoney: [{
                    required: true,
                    message: '请输入申请金额（小写）',
                    trigger: 'change'
                }
                ],
                applyPayMoneyUppercase: [{
                    required: true,
                    message: '请输入申请金额（大写）',
                    trigger: 'change'
                }]
                // applyReasons: [{
                //     required: true,
                //     message: '请输入加班事由',
                //     trigger: 'change'
                // }],
                // position: [{
                //     required: true,
                //     message: '加班位置不能为空',
                //     trigger: 'change'
                // }]

            },

            positionOptions: [
                {
                    'label': '公司',
                    'value': 1
                },
                {
                    'label': '客户处',
                    'value': 2
                }, {
                    'label': '居家',
                    'value': 3
                }],
            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: '董事长审核',
                    value: [445, 100],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    name: '结束',
                    value: [525, 100],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    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: '#f5f5f5'
                    },
                    name: '  退回发起人   ',
                    value: [100, 200],
                    symbolSize: [20, 20]
                }
            ],
            linesData: [ // 连线

                {
                    lineStyle: lineStyle,
                    coords: [[45, 100], [105, 100]]
                },
                {
                    lineStyle: lineStyle,
                    coords: [[125, 100], [185, 100]]
                },
                {
                    lineStyle: lineStyle,
                    coords: [[205, 100], [265, 100]]
                },
                {
                    lineStyle: lineStyle,
                    coords: [[285, 100], [345, 100]]
                },
                {
                    lineStyle: lineStyle,
                    coords: [[365, 100], [425, 100]]
                },
                {
                    lineStyle: lineStyle,
                    coords: [[445, 100], [505, 100]]
                },
                {
                    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, 100], [50, 400]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[450, 400], [50, 400]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[370, 350], [50, 350]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[290, 300], [50, 300]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[210, 250], [50, 250]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[130, 200], [50, 200]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[50, 150], [50, 150]],
                    symbol: 'none'
                }

            ]
        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
        })
        // this.initProject({ /* signstatus: '2,3'*/ })
    },
    methods: {
        handlePictureRemoveXF66(file, fileUrlList) {
            var index = fileUrlList.indexOf(file)
            this.$nextTick((e) => {
                this.formData.fileUrlList.splice(index, 1)
            })
            const formDataFileUrlList = JSON.parse(JSON.stringify(this.formData.fileUrlList))
            this.formData.fileUrlList = []
            this.formData.fileUrlList = formDataFileUrlList
            this.$forceUpdate()
        },
        uploadFile: function(param) {
            const _this = this
            upload(param, true).then((res) => {
                _this.formData.fileUrlList.push(res)
                console.log(' _this.formData.fileUrlList', _this.formData.fileUrlList)
            })
        },
        swapper(n) {
            // console.log('ddd',n)
            if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) { return '数据非法' }
            var unit = '仟佰拾亿仟佰拾万仟佰拾元角分'; var str = ''
            n += '00'
            var p = n.indexOf('.')
            if (p >= 0) { n = n.substring(0, p) + n.substr(p + 1, 2) }
            unit = unit.substr(unit.length - n.length)
            for (var i = 0; i < n.length; i++) { str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i) }
            // console.log('end',str.replace(/零(仟|佰|拾|角)/g, '零').replace(/(零)+/g, '零').replace(/零(万|亿|元)/g, '$1').replace(/(亿)万|壹(拾)/g, '$1$2').replace(/^元零?|零分/g, '').replace(/元$/g, '元整'))
            this.formData.applyPayMoneyUppercase = str.replace(/零(仟|佰|拾|角)/g, '零').replace(/(零)+/g, '零').replace(/零(万|亿|元)/g, '$1').replace(/(亿)万|壹(拾)/g, '$1$2').replace(/^元零?|零分/g, '').replace(/元$/g, '元整')

            // console.log('end',this.formData.applyPayMoneyUppercase)
            this.$forceUpdate()
        },
        beforeClose() {
            // eslint-disable-next-line no-mixed-spaces-and-tabs
			 this.formData = {
                // payerName: '无锡市安居投资发展有限公司'
                // eslint-disable-next-line no-mixed-spaces-and-tabs
			 }
            this.dialogVisible = false
            this.activeName = 'first'
            this.$forceUpdate()
        },
        handleClick(tab, event) {
            if (this.activeName == 'second') this.createNodeCanvas()
        },
        createNodeCanvas() {
            this.$nextTick(() => {
                const chartDom = document.getElementById('containeraddwork1')
                var myCharts = echarts.init(chartDom)
                const charts = {
                    nodes: this.nodes,
                    linesData: this.linesData
                }
                const option = {
                    xAxis: {
                        min: 0,
                        max: 600,
                        padding: [0, 50, 0, 50],
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        min: 0,
                        max: 450,
                        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()
                })
            })
        },

        getHour(s1, s2) {
            var reDate = /\d{4}-\d{1,2}-\d{1,2} /

            s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'))
            s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'))
            var ms = s2.getTime() - s1.getTime()
            if (ms < 0) return 0
            console.log(ms)

            return (ms / 1000 / 60 / 60).toFixed(1) // 小时
        },

        async getUserInfo() {
            const { data: userinfo } = await this.baseRequest1('ApplyPaymentSettleController', 'getUserInfoByUserId', { userId: '' })
            this.userinfo = userinfo
            this.formData.truename = userinfo.truename
            this.formData.deptName = userinfo.deptName
            console.log(this.userinfo)
        },
        async getMaxNum() {
            const { data: maxNum } = await this.baseRequest1('ApplyPaymentSettleController', 'getMaxNum', { })

            this.formData.title = maxNum
            this.loading1 = false
            console.log(maxNum, this.formData.title)
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },

        setVisible(status) {
            this.loading1 = true
            this.formData = {
                payerName: '无锡市安居投资发展有限公司'

            }
            this.formData.fileUrlList = []
            this.getMaxNum()
            this.getUserInfo()

            this.dialogVisible = status
        },
        onOpen() {
        },
        onClose() {
            this.$refs['elForm'].resetFields()
        },
        close() {
            this.$emit('update:visible', false)
        },
        async handelConfirm() {
            this.$refs['elForm'].validate(async valid => {
                if (!valid) return

                // delete formData.applyAddWorkTime

                if (this.formData.fileUrlList.length > 0) {
                    this.formData.fileDataIds = this.formData.fileUrlList.map((e) => {
                        return e.data
                    }).toString()
                }
                const formData = {
                    ...this.formData
                }
                this.loading = true

                const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'addApplyPaymentSettle', { ...formData })
                if (data.code == 200) {
                    this.loading = false
                    this.$message.success('付款申请发起成功')
                    this.dialogVisible = false
                    this.$emit('getData')
                }
                this.close()
            })
        }
    }
}

</script>
<style lang="scss">
.cclist {
	.col-input {
		padding: 0;
	}
}

#containeraddwork1 {
	height: 600px;
	width: 100%;
	background: #F5F5F5;
}

.pdr10px {
	padding-right: 10px;
}

.mgb10px {
	margin-bottom: 10px;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.totalApplyTime {
	font-size: 16px;
	font-family: 微软雅黑;
	font-weight: 400;
	color: #1890FF;
	text-align: right;
	margin: 15px 0 15px 0;
	width: 100%;
}

.cost_form {
	.col-input {
		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;
	}

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

	}

	.moneydetails:before {
		content: "*";
		color: #ff4949;

	}
}

.txtc {
	text-align: center
}

.ml5 {
	margin-left: 5px;
}

.eltype {
	margin-bottom: 15px;
}

.tabsdom {
	.el-input {
		width: 100%;
	}
    .el-upload {
        width: 100%;
        text-align: left;
    }
	.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;
	}

	.el-upload {
		width: 100%;
	}
}

.feeMoneyTotal {
	width: 100%;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #1890FF;
	margin-top: 31px;
	margin-bottom: 13px;
}
</style>