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

<template>
  <!--    加班申请单-详情改造 发起付款申请(要调用接口的)-->
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    title="发起付款申请"
    top="50px"
    width="75%"
    :append-to-body="true"
    :before-close="closeDialog"
    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="title">
                    <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%"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                    >
                      <el-option
                        v-for="item in dc_data.ANSWER_NEED"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :popper-append-to-body="false"
                        popper-class="statistic_base"
                      />
                    </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="请填写" @change="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
                        :disabled="true"
                      :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-row>
              <h3>流程历史</h3>
              <div class="tableDom">
                <el-table
                  :data="tableData"
                  :header-cell-style="{
                    background:'#1890FF !important',
                    color:'white'
                  }"
                  border
                  style="width: 100%"
                >
                  <el-table-column fixed label="序号" type="index" width="60" />
                  <el-table-column
                    label="节点名称"
                    prop="nodeName"
                    width="180"
                  />
                  <el-table-column
                    label="处理人"
                    prop="auditUserName"
                    width="180"
                  />
                  <el-table-column
                    label="审核结果"
                    prop="auditResultString"
                  />
                  <el-table-column
                    label="审核意见"
                    prop="auditContent"
                  />
                  <el-table-column
                    label="发起/审核时间"
                    prop="createdAt"
                  >
                    <template slot-scope="scope">
                      {{ $common.transTime(scope.row.createdAt) }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>

          </el-form>

        </el-tab-pane>
        <el-tab-pane label="流程图" name="second">
          <payment-canvas ref="PaymentCanvas" id="paymanetDetail"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer">
      <el-button @click="closeDialog">关闭</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 PaymentCanvas from '@/views/workflow/components/myProcess/paymentCanvas.vue'

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

}
const redLinestyle = {
    color: 'red',
    width: 2
}
const applyAddWorkTime = { useTime: 0 }
export default {
    name: 'ApplyPay',
    components: {
        PaymentCanvas,
        upload,
        UserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            row: {},
            argeeBackStatus: false,
            argeeNoStatus: false,
            tableData: [],
            flowHistroy: [],
            confirmForm: {
                confirmContent: ''
            },
            dc_key: ['ANSWER_NEED'],
            ProjectData: [],
            dialogVisible: false,
            applyAddWorkTime: [{ ...applyAddWorkTime }],
            formData: {
                proId: '',
                totalAddTime: 0,
                applyReasons: '',
                position: '',
                applyAddWorkTime: [
                    {
                        useTime: 0
                    }
                ]
            },

            userinfo: {},
            activeName: 'first',
            rules: {
                title: [{
                    required: true,
                    message: '请输入标题',
                    trigger: 'change'
                }],
                applyPayMoney: [{
                    required: true,
                    message: '请输入申请金额（小写）',
                    trigger: 'change'
                }
                ],
                applyPayMoneyUppercase: [{
                    required: true,
                    message: '请输入申请金额（大写）',
                    trigger: 'change'
                }]
            },
            positionOptions: [
                {
                    'label': '公司',
                    'value': 1
                },
                {
                    'label': '客户处',
                    'value': 2
                }, {
                    'label': '居家',
                    'value': 3
                }]

        }
    },
    computed: {},
    watch: {
        'applyAddWorkTime': {
            deep: true,
            handler(newValue, oldValue) {
                let totalAddTime = 0
                for (let i = 0; i < this.applyAddWorkTime.length; i++) {
                    if (this.applyAddWorkTime[i].useTime === 0 || this.applyAddWorkTime[i].useTime) {
                        totalAddTime = totalAddTime + Number(this.applyAddWorkTime[i].useTime)
                    }
                }
                console.log(totalAddTime)
                this.changeAddWorkTime(totalAddTime.toFixed(1))
            }
        }
    },
    created() {
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
        })
        // this.initProject({ /* signstatus: '2,3'*/ })
    },
    methods: {
        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)
            })
        },
        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()
        },
        closeDialog() {
            this.dialogVisible = false
            this.$emit('close')
        },
        handleClick(tab, event) {
            if (this.activeName == 'second') this.$refs.PaymentCanvas.createNodeCanvas(this.row)
        },
        async getIMGFlowHistroyByFlowMainId(row) {
            console.log(row)
            // return
            const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
            console.log(data)
            for (let i = 0; i < data.length; i++) {
                switch (data[i].nodeKey) {
                    case 'curr_user':
                        if (i == 0 && data[i].type == 1) {
                            // 审核人审核
                            this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
                        }

                        break
                    case 'dept_superior_1_0_1':
                        if (i == 0 && data[i].type == 3) {
                            this.node[0].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
                        }
                        if (i == 0 && data[i].type == 1) {
                            this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
                        }
                        break
                    default:
                }
            }
        },
        createNodeCanvas() {
            this.$nextTick(() => {
                const chartDom = document.getElementById('containeraddworkdetail')
                var myCharts = echarts.init(chartDom)
                const charts = {
                    nodes: this.node,
                    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()
                })
            })
        },
        selectCommonPhrases(e) {
            if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
            this.confirmForm.confirmContent += e
        },
        changeAddWorkTime(totalAddTime) {
            this.formData.totalAddTime = totalAddTime
        },
        async getUserInfo(applyUser) {
            const { data: userinfo } = await this.baseRequest1('ApplyPaymentSettleController', 'getUserInfoByUserId', { userId: applyUser })
            this.userinfo = userinfo
            console.log(this.userinfo)
        },
        spliceListRow(index) {
            this.formData.workTimeList.splice(index, 1)
        },
        async setVisible(status, row) {
            this.row = row
            this.activeName = 'first'
            this.getUserInfo(row.applyUser)
            this.confirmForm.flowMainPushId = row.flowMainPushId
            const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'getInfoByFlowMainId', { flowMainId: row.id })
            const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
            this.tableData = flowHistroy
            this.formData = data
            if (this.formData.isNoContract || this.formData.isNoContract == 0) {
                this.formData.isNoContract = String(this.formData.isNoContract)
            }
            if (data.fileDataIds) {
                const { data: fileTaoTaoList } = await this.baseRequest1('FileZtController', 'findFileInfoByIds/' + data.fileDataIds, '')
                console.log(fileTaoTaoList.data)
                this.formData.fileUrlList = fileTaoTaoList.data.map((e) => {
                    return {
                        url: this.$constant.BASE_URI + '/FileController/download/' + e.id,
                        name: e.fileName,
                        data: e.id,
                        uid: new Date().getTime()
                    }
                })
                console.log(this.formData.fileUrlList)
            } else {
                this.formData.fileUrlList = []
            }
            // this.applyAddWorkTime = data.applyAddWorkTimeList.map((e) => {
            //     return {
            //         useTime: e.useTime,
            //         startDay: this.$common.transDate(e.startDay),
            //         startTime: this.$common.transMinute(e.startTime),
            //         endTime: this.$common.transMinute(e.endTime)
            //     }
            // })

            this.dialogVisible = status
            this.row = row
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },

        async handelConfirm() {
            this.dialogVisible = false
        }
    }
}

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

.cclist {
	.col-input {
		padding: 0;
	}
}

.pdr10px {
	padding-right: 10px;
}

.mgb10px {
	margin-bottom: 10px;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.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-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>