settle_down_web/src/views/paymentApplication/index.vue

<template>
  <div class="payment-application">
    <div class="processCode">流程编号：</div>
    <div class="paymentRowBox">
      <div>标题：</div>
      <input v-model="formData.title" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>创建人：</div>
      <input v-model="userinfo.truename" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>创建部门：</div>
      <input v-model="userinfo.deptName" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>是否为无合同付款：</div>
      <input v-model="formData.isNoContractStr" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>付款单位：</div>
      <input v-model="formData.payerName" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>收款单位：</div>
      <input v-model="formData.payeeName" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>资金用途：</div>
      <input v-model="formData.moneyPurpose" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>合同总价：</div>
      <input v-model="formData.contractPrice" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>付款说明：</div>
      <el-input
        v-model="formData.payRemark"
        type="textarea"
        autosize
        rows="5"
        placeholder="请输入内容"
        readonly
      />
    </div>
    <div class="paymentRowBox">
      <div>申请金额（小写）</div>
      <input v-model="formData.applyPayMoney" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>申请金额（大写）</div>
      <input v-model="formData.applyPayMoneyUppercase" readonly class="paymentInput" type="text">
    </div>
    <div class="paymentRowBox">
      <div>相关附件</div>
      <van-uploader v-model="formData.fileUrlList" :deletable="false" :show-upload="false" @click-preview="clickPre3">
        <!--        <img src="../../assets/image/upload.png">-->
      </van-uploader>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <template #title>
          <div style="display: flex;align-items: center;color: rgba(51, 51, 51, 1);font-weight: 600;font-size: 3.6vw">
            <div class="blueBg" />流程历史
          </div>
        </template>
        <div style="background: #FAFAFA" class="container">
          <div v-for="(item, index) in dtList" :key="index" class="itemBox">
            <div class="itemLeft">
              <!--                             <div class="radius"></div>-->
              <img :src="item.auditResult=='-1'?radiusOn:radiusOff" class="radius">
              <div class="itemTitBox">
                <div style="display: flex;margin: 1vw 0">
                  <div style="color: rgba(51, 51, 51, 1)">{{ item.nodeName }}{{ item.auditResultString?'：':'' }}</div>
                  <div :style="{'color':item.auditResultString==='同意'?'#5ABF68':item.auditResultString==='处理中'?'#E08E42':'red'}">{{ item.auditResultString }}</div>
                </div>
                <div v-show="item.auditContent" style="padding: 2vw;background: #F2F2F2;margin: 1vw 0;border-radius: 1vw">{{ item.auditContent }}</div>
                <div style="display: flex;justify-content: space-between;width: 100%;margin: 1vw 0">
                  <div>{{ item.auditUserName }}</div>
                  <div>{{ item.createdAt?item.createdAt:'' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div style="display: flex;align-items: center;color: rgba(51, 51, 51, 1);font-weight: 600;font-size: 3.6vw">
      <div class="blueBg" />处理
    </div>
    <div class="paymentRowBox">
      <div class="handleTit">处理结果</div>
      <van-radio-group v-model="confirmForm.confirmResult" direction="horizontal" checked-color="rgba(41, 64, 150, 1)" icon-size="4vw">
        <van-radio name="1">通过，转下一步</van-radio>
        <van-radio name="2">退回发起人</van-radio>
      </van-radio-group>
    </div>
    <div class="paymentRowBox">
      <div class="handleTit">处理意见</div>
      <el-input
        v-model="confirmForm.confirmContent"
        type="textarea"
        autosize
        rows="5"
        placeholder="请输入处理意见"
        maxlength="2000"
        show-word-limit
      />
    </div>
    <div class="paymentRowBox">
      <div class="handleTit">抄送</div>
      <userSelectForH5
        :default-select="confirmList"
        :multiple="true"
        class="cclist,statistic_base"
        :append-to-body="true"
        :modal-append-to-body="true"
        custom-class="tagdialog"
        @selectValue="parentMethod"
      />
    </div>
    <div class="paymentRowBox" style="margin-top: 0">
      <div class="handleTit">处理人   &nbsp;&nbsp;&nbsp;&nbsp;<span>{{ username }}</span></div>
    </div>
    <div class="paymentBtnBox">
      <el-button class="closeBtn" @click="cancel">关闭</el-button>
      <el-button class="submitBtn" :loading="loadingFlag" @click="handelConfirm">
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
import userSelectForH5 from '@/views/components/userSelectForH5.vue'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
    name: 'Index',
    components: { userSelectForH5 },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['ANSWER_NEED'],
            confirmList: [],
            activeNames: ['1'],
            userinfo: {},
            radio: '1',
            fileList: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
            dtList: [
                {
                    auditContent:
                        null,
                    auditResult:
                        null,
                    auditResultString:
                        null,
                    auditUser:
                        '996375895163797504',
                    auditUserName:
                        '宣胜伟',
                    createdAt:
                        1736321293000,
                    id:
                        'aFdtLdth02lLfk26nMZ',
                    nodeName:
                        '申请人发起'
                },
                {
                    auditContent:
                        '',
                    auditResult:
                        '1',
                    auditResultString:
                        '同意',
                    auditUser:
                        '927859716221042688',
                    auditUserName:
                        '崔伟',
                    createdAt:
                        1735647785000,
                    id:
                        'IrFA28epluWZB3agf6x',
                    nodeName:
                        '直接上级审核'
                },
                {
                    auditContent:
                        '测试一下啊',
                    auditResult:
                        '-1',
                    auditResultString:
                        '退回上一节点',
                    auditUser:
                        '927859716221042688',
                    auditUserName:
                        '章敏',
                    createdAt:
                        1735647785000,
                    id:
                        'IrFA28epluWZB3agf6x',
                    nodeName:
                        '分管领导审核'
                }
            ],
            radiusOn: require('@/assets/image/radiusOn.png'),
            radiusOff: require('@/assets/image/radiusOff.png'),
            confirmForm: {
                confirmContent: '',
                confirmResult: '1'
            },
            formData: {
                proId: '',
                totalAddTime: 0,
                applyReasons: '',
                position: '',
                applyAddWorkTime: [
                    {
                        useTime: 0
                    }
                ]
            },
            username: '',
            loadingFlag: false
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            this.setVisible(this.$route.query)
        })
        this.username = this.$common.currUser().username
        const dayjs = require('dayjs')
        this.dtList.forEach(item => {
            if (item.createdAt) {
                item.createdAt = dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
            }
        })
    },
    methods: {
        parentMethod(val) {
            if (val.length > 0) {
                this.confirmForm.ccList = val.join(',')
            }
        },
        clickPre3(file) {
            if (this.matchType(file.url) !== 'image') {
                window.location.href = file.url
            }
        },
        matchType(fileName) {
            // 后缀获取
            var suffix = ''
            // 获取类型结果
            var result = ''
            try {
                var flieArr = fileName.split('.')
                suffix = flieArr[flieArr.length - 1]
            } catch (err) {
                suffix = ''
            }
            // fileName无后缀返回 false
            if (!suffix) {
                result = false
                return result
            }
            // 图片格式
            var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
            // 进行图片匹配
            result = imglist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'image'
                return result
            }
            // 匹配txt
            var txtlist = ['txt']
            result = txtlist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'txt'
                return result
            }
            // 匹配 excel
            var excelist = ['xls', 'xlsx']
            result = excelist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'excel'
                return result
            }
            // 匹配 word
            var wordlist = ['doc', 'docx']
            result = wordlist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'word'
                return result
            }
            // 匹配 pdf
            var pdflist = ['pdf']
            result = pdflist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'pdf'
                return result
            }
            // 匹配 ppt
            var pptlist = ['ppt']
            result = pptlist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'ppt'
                return result
            }
            // 匹配 视频
            var videolist = ['mp4', 'm2v', 'mkv']
            result = videolist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'video'
                return result
            }
            // 匹配 音频
            var radiolist = ['mp3', 'wav', 'wmv']
            result = radiolist.some(function(item) {
                return item == suffix
            })
            if (result) {
                result = 'radio'
                return result
            }
            // 其他 文件类型
            result = 'other'
            return result
        },
        async getUserInfo(applyUser) {
            const { data: userinfo } = await this.baseRequest1('ApplyPaymentSettleController', 'getUserInfoByUserId', { userId: applyUser })
            this.userinfo = userinfo
            console.log(this.userinfo)
        },
        async setVisible(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.dtList = flowHistroy
            this.formData = data
            if (this.formData.isNoContract || this.formData.isNoContract == 0) {
                this.formData.isNoContract = String(this.formData.isNoContract)
                this.formData.isNoContractStr = this.dc_map.ANSWER_NEED[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'
            }
        },
        async handelConfirm() {
            // console.log(this.confirmForm)
            this.loadingFlag = true
            const { data } = await this.baseRequest1('ApplyPaymentSettleController', 'AddConfirmResult', { ...this.confirmForm })
            if (data.code == 200) {
                this.$message.success('处理成功')
                this.cancel()
            }
        },
        cancel() {
            window.close()
        },
        baseRequest1(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        }
    }
}
</script>

<style lang="scss">
.loading {
    width: 15px;
    height: 15px;
    border: 4px solid rgba(0, 123, 255, 0.5);
    border-top-color: #00bfff;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}
/* 定义旋转动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
    .payment-application{
        padding: 2vw 3vw 10vw 3vw;
        display: flex;
        flex-direction: column;
         .processCode{
             color: rgba(119, 119, 119, 1);
             font-size: 3.4vw;
         }
        .paymentRowBox{
            font-size: 3.5vw;
            color: rgba(51, 51, 51, 1);
            margin-top: 2vw;
            .paymentInput{
                color: rgba(68, 68, 68, 1);
                padding: 2.2vw 2vw;
                width: 100% !important;
                margin: 1vw 0;
                border:1px solid rgba(230, 230, 230, 1);
            }
            .el-textarea__inner{
                padding: 2.2vw 2vw;
                margin: 1vw 0;
            }
            .handleTit{
                font-size: 3.4vw;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 1.5vw;
                margin-top: 4.5vw;
            }
        }
        .paymentBtnBox{
            display: flex;
            justify-content: space-evenly;
            font-size: 3.4vw;
            margin-top: 8vw;
            .closeBtn{
                width: 29.4vw;
                height: 8vw;
                background: rgba(87,106,201,0.15);
                border-radius: 1vw;
                border: 1px solid rgba(42,57,128,0.75);
                color: #2A3980;
            }
            .submitBtn{
                width: 29.4vw;
                height: 8vw;
                background: #2A3980;
                border-radius: 1vw;
                color: #FFFFFF;
            }
        }
        .itemBox {
            display: flex;
            justify-content: space-between;
            padding: 2vw 1vw 1vw 1vw;
            position: relative;
            z-index: 1;
            .itemLeft {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0.5vw 2vw;
                .itemTitBox {
                    //height: 2.3vw;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .timeBox {
                    display: flex;
                    color: #999999;
                    font-size: 16px;
                }
                .radius{
                    width: 5vw;
                    height: 5vw;
                    margin-right: 3vw;
                }
            }
            .itemRight {
                display: flex;
                height: 2.8vw;
                flex-direction: column;
                justify-content: space-between;
                flex-direction: column;
                .tagBox {
                    text-align: right;

                    // margin: 0.5vw 0;
                }
            }
        }
        .blueBg{
            width: 0.6vw;
            height: 4vw;
            background: rgba(76, 92, 168, 1);
            margin-right: 1vw;
        }
        .van-cell{
            padding: 5vw 0 1vw 0;
        }
        .van-collapse-item__content{
            padding: 1vw 0;
        }
    }
</style>