settle_down_web/src/views/workflow/components/myProcess/applyAgainInvoiceRed.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-form-item>
                      <el-cascader
                        v-model="formData.houseIds"
                        :append-to-body="false"
                        style="width: 100%;"
                        :options="TreeData"
                        :props="{ multiple: true}"
                      />
                    </el-form-item>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="发票红冲说明">
                    <el-input
                      v-model="formData.remark"
                      :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-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="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: 'ApplyAgainContract',
    components: {
        upload, UserSelect
    },
    mixins: [Base, BaseData],
    data() {
        return {
            row: {},
            loading: false,
            dc_key: ['ANSWER_NEED'],
            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
                }],
            TreeData: []
        }
    },
    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('ApplyInvoiceRedController', '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)
            this.findRoomTree()
            const { data } = await this.baseRequest1('ApplyInvoiceRedController', 'getInfoByFlowMainId', { flowMainId: row.id })
            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.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

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

                const formData = {
                    ...this.formData
                }
                console.error('formDataformDataformDataformDataformData', formData)
                this.loading = true
                formData.flowMainCcList = []

                const { data } = await this.baseRequest1('ApplyInvoiceRedController', 'addApplyInvoiceRedAgain', { ...formData })
                this.loading = false
                if (data.code == 200) {
                    this.$message.success('发票红冲申请发起成功')
                    this.dialogVisible = false
                    this.$emit('getData')
                }
                this.close()
            })
        },
        findRoomTree: function() {
            const _this = this
            this.pubRequest('getTreeData1', '').then((res) => {
                _this.TreeData = res.data.data
            }).catch(() => {
            })
        },
        pubRequest(opUrl, postData) {
            return this.$channel.globeRequest('ParkInfoController', opUrl, postData, 'project')
        }
    }
}

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