programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyAgainPayment.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="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="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="7">
                                  <el-form-item label="相关附件">
                                      <el-upload
                                          :action="$constant.BASE_URI+'/FileController/upload'"
                                          :file-list="formData.fileUrlList"
                                          :http-request="uploadFile"
                                          class="upload-demo"
                                          multiple
                                      >
                                          <el-button size="small" type="primary">上传附件</el-button>
                                          <div slot="file" slot-scope="{file}">
                                              <a :href="file.url">{{ file.name }}</a>
                                              <span class="el-upload-list__item-actions">
                          <i class="el-icon-delete" @click="handlePictureRemove(file,formData.fileUrlList)" />
                        </span>
                                          </div>
                                      </el-upload>

                                  </el-form-item>
                              </el-col>
                              <el-col :span="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="containeraddwork" 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'

const applyAddWorkTime = { useTime: 0 }
export default {
    name: 'ApplyPay',
    components: {
        upload, UserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            row: {},
            loading: false,
            dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY'],
            ProjectData: [],
            dialogVisible: false,
            applyAddWorkTime: [{ ...applyAddWorkTime }],
            formData: {
                proId: '',
                totalAddTime: 0,
                applyReasons: '',
                position: '',
                applyAddWorkTime: [
                    {
                        useTime: 0
                    }
                ]
            },
            userinfo: {},
            activeName: 'first',
            rules: {

                proId: [{
                    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
                }]
        }
    },
    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()
        },
        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) {
            this.canVasStatus = false
            if (this.activeName == 'second') {
                this.canVasStatus = true
                this.$nextTick(() => {
                    this.$refs.addWorkCanvas.createNodeCanvas(this.row)
                })
            }
        },
        changeAddWorkTime(totalAddTime) {
            this.formData.totalAddTime = totalAddTime
        },
        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) // 小时
        },
        getTimeRange(event, i) {
            this.$nextTick(() => {
                this.applyAddWorkTime[i].startTime = this.applyAddWorkTime[i].startDay + ' ' + event[0] + ':00'
                this.applyAddWorkTime[i].endTime = this.applyAddWorkTime[i].startDay + ' ' + event[1] + ':00'
                const timeRang = this.getHour(event[0], event[1])
                this.applyAddWorkTime[i].useTime = timeRang
            })
        },
        async getUserInfo() {
            const { data: userinfo } = await this.baseRequest1('ApplyPaymentSettleController', 'getUserInfoByUserId', { userId: '' })
            this.userinfo = userinfo
            console.log(this.userinfo)
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },
        addListRow() {
            this.applyAddWorkTime.push({ ...applyAddWorkTime })
        },
        spliceListRow(index) {
            this.applyAddWorkTime.splice(index, 1)
        },
        async setVisible(status, row) {
            this.row = row
            this.activeName = 'first'
            this.getUserInfo(row.applyUser)
            const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'getInfoByFlowMainId', { flowMainId: row.id })
            this.formData = data
            this.formData.flowMainId = data.flowMainId
            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
                const formData = {
                    ...this.formData,
                    applyAddWorkTimeString: JSON.stringify(this.applyAddWorkTime)
                }
                delete formData.applyAddWorkTime
                delete formData.applyAddWorkTimeList
                console.error('formDataformDataformDataformDataformData', formData)
                this.loading = true
                const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'addApplyPaymentSettleAgain', { ...formData })
                this.loading = false
                if (data.code == 200) {
                    this.$message.success('加班申请发起成功')
                    this.dialogVisible = false
                    this.$emit('getData')
                }
                this.close()
            })
        }
    }
}

</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;
}

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