programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyPaymentConfirm.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"
    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>
              <h3>处理</h3>
              <el-card shadow="always" style="padding: 0px 5px 5px 15px">
                <el-form
                  ref="confirmForm"
                  :model="confirmForm"
                  class="cost_form"
                  label-width="100px"
                  style="width: 100%;padding: 5px"
                >
                  <el-row :gutter="10">
                    <el-col :span="24">
                      <el-form-item label="处理结果" style="margin-bottom: 15px" prop="confirmResult">
                        <el-radio-group v-model="confirmForm.confirmResult">
                          <el-radio :label="1">同意</el-radio>
                          <el-radio  :label="2">退回发起人</el-radio>
                          <el-radio  :label="3">退回上节点</el-radio>
                          <!--	c<el-radio :label="4">结束流程</el-radio>-->

                        </el-radio-group>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="处理意见">
                        <el-input v-model="confirmForm.confirmContent" style="margin-top:10px" type="textarea" />
                        <!--                                    <el-dropdown size="mini" split-button trigger="hover" type="primary">-->
                        <!--                                        常用语选择-->
                        <!--                                        <el-dropdown-menu slot="dropdown">-->
                        <!--                                            <el-dropdown-item-->
                        <!--                                                v-for="item in dc_data.COMMON_PHRASES"-->
                        <!--                                                @click.native="selectCommonPhrases(item.label)"-->
                        <!--                                            >-->
                        <!--                                                {{ item.label }}-->
                        <!--                                            </el-dropdown-item>-->

                        <!--                                        </el-dropdown-menu>-->
                        <!--                                    </el-dropdown>-->
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-col :span="24">
                    <el-form-item label="审核人抄送">
                      <user-select
                        :default-select="confirmList"
                        :multiple="true"
                        class="cclist,statistic_base"
                        :append-to-body="true"
                        :modal-append-to-body="true"
                        custom-class="tagdialog"
                        @selectValue="parentMethod"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-card>
            </el-card>

          </el-form>

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

const applyAddWorkTime = { useTime: 0 }
export default {
    name: 'ApplyPay',
    components: {
        upload,
        UserSelect,
        PaymentCanvas
    },
    mixins: [Base, BaseData],
    data() {
        return {
            row: {},
            confirmList: [],
            selectList: [],

            argeeBackStatus: false,
            argeeNoStatus: false,
            tableData: [],
            flowHistroy: [],
            confirmForm: {
                confirmContent: '',
                confirmResult: 1
            },
            dc_key: ['ANSWER_NEED'],
            ProjectData: [],
            dialogVisible: false,
            applyAddWorkTime: [{ ...applyAddWorkTime }],
            formData: {
                proId: '',
                totalAddTime: 0,
                applyReasons: '',
                position: '',
                applyAddWorkTime: [
                    {
                        useTime: 0
                    }
                ]
            },

            userinfo: {},
            activeName: 'first',
            rules: {
                confirmResult: [{
                    required: true,
                    message: '请选择处理意见',
                    trigger: 'change'
                }],
                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()
        },
        handleClick(tab, event) {
            this.canVasStatus = false
            if (this.activeName == 'second') {
                this.canVasStatus = true
                this.$nextTick(() => {
                    this.$refs.PaymentCanvas.createNodeCanvas(this.row)
                })
            }
        },
        parentMethod(val) {
            if (val.length > 0) {
                this.confirmForm.ccList = val.join(',')
            }
        },
        selectCommonPhrases(e) {
            if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
        },
        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.activeName = 'first'
            this.row = row
            this.getUserInfo(row.applyUser)
            this.confirmForm.flowMainPushId = row.flowMainPushId
            const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'getInfoByFlowMainPushId', { flowMainPushId: row.flowMainPushId })
            const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
            const noAndbackstatus = await this.baseRequest1('FlowMainController', 'getOutgoingFlowsByFlowMainPushId', { flowMainPushId: row.flowMainPushId })
            for (let i = 0; i < noAndbackstatus.data.length; i++) {
                if (noAndbackstatus.data[i].conditionExpression == '${agree==\'no\'}') this.argeeNoStatus = true
                if (noAndbackstatus.data[i].conditionExpression == '${agree==\'back\'}') this.argeeBackStatus = true
            }
            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 = []
            }
            if (!this.confirmForm.confirmResult) {
                this.confirmForm.confirmResult = '1'
            }
            // 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)
            //     }
            // })
            // console.log(this.applyAddWorkTime)
            // flowMainPushId
            this.dialogVisible = status
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },

        async handelConfirm() {
            this.$refs['elForm'].validate(async valid => {
                // if (!valid) return
                // ApplyAddWorkController/AddConfirmResultAddWork
                console.log(this.confirmForm)

                const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'AddConfirmResult', { ...this.confirmForm })
                if (data.code == 200) {
                    this.$message.success('处理成功')
                    this.form = {}
                    this.confirmForm = { confirmContent: '' }
                    this.dialogVisible = false
                    this.$emit('getData')
                }
            })
        }
    }
}

</script>
<style lang="scss">
.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>