提取公共组件，修复驳回bug，表单校验之后文字未消失bug，增加返回

src/views/pettyMoney/addPettyMoneyRecord.vue

@@ -40,6 +40,7 @@
                 </el-form-item>
                 <el-form-item>
                     <el-button type="primary" @click="addPettyMoneyRecord">{{isEdit ? '确认修改' : '确认申请'}}</el-button>
+                    <el-button @click="back" v-if="isEdit">返回</el-button>
                 </el-form-item>
             </el-form>
 
@@ -97,6 +98,10 @@ export default {
         console.log(1)
     },
     methods: {
+        back(){
+            this.$router.back();
+            this.$store.dispatch("tagsView/delView", this.$route);
+        },
         addPettyMoneyRecord() {
             this.$refs.form.validate(valida => {
                 if (valida) {

src/views/pettyMoney/components/applicateDetail.vue

+<template>
+    <div>
+        <div class="drawerHeader">
+            申请详情
+        </div>
+        <div class="drawerContainer">
+            <el-descriptions :column="3" border>
+                <el-descriptions-item label="备用金名称" span="3">{{ checkedRow.pettyName || '暂未通过' }}</el-descriptions-item>
+                <el-descriptions-item label="借款缘由" span="3">{{ checkedRow.pettyReason }}</el-descriptions-item>
+                <el-descriptions-item label="借款详情" span="3">{{ checkedRow.pettyDetails }}</el-descriptions-item>
+                <el-descriptions-item label="借款金额">{{ checkedRow.pettyMoney }}</el-descriptions-item>
+                <el-descriptions-item label="审批人">{{ checkedRow.financeName || '无' }}</el-descriptions-item>
+                <el-descriptions-item label="审批状态">
+                    <el-tag size="mini"
+                        :type="approveResult[checkedRow.pettyApproval] && approveResult[checkedRow.pettyApproval].type">
+                        {{ approveResult[checkedRow.pettyApproval] &&
+                                approveResult[checkedRow.pettyApproval].text
+                        }}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="审批时间">{{ checkedRow.pettyApprovalTime || '无' }}</el-descriptions-item>
+                <el-descriptions-item label="待还金额">{{ checkedRow.pettySurplus }}</el-descriptions-item>
+                <el-descriptions-item label="还款状态">
+                    <el-tag size="mini"
+                        :type="pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].type">
+                        {{ pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].text }}
+                    </el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="驳回原因" span="3" v-if="checkedRow.pettyApproval === 2">{{
+                    checkedRow.pettyReject
+                }}</el-descriptions-item>
+                <el-descriptions-item label="借款日期">{{ checkedRow.pettyTime}}</el-descriptions-item>
+            </el-descriptions>
+        </div>
+        <div v-if="checkedRow.pettyApproval === 1">
+            <div class="drawerHeader">
+                还款记录
+            </div>
+            <!-- "repaymentId":1,"pettyId":1,"operationId":53,"repaymentTime":"2022-08-13 01:30:18","repaymentMoney":1.0,"repaymentRemarks":null,"repaymentDetails":null,"repaymentReason":"","repaymentEnclosure":null,"repaymentApproval":0,"repaymentReject":null,"operationName":"chenxin"} -->
+            <div class="drawerContainer ">
+                <div class="repay-timeline">
+                    <el-timeline>
+                        <el-timeline-item v-for="item in repayDetailList" :key="item.repaymentId"
+                            :type="approveResult[item.repaymentApproval].type" :timestamp="item.repaymentTime">
+                            <div>
+                                <span>
+                                    <el-tag
+                                        :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
+                                        {{ approveResult[item.repaymentApproval] &&
+                                                approveResult[item.repaymentApproval].text
+                                        }}</el-tag>
+                                    {{ (item.repaymentApproval === 2 && item.repaymentReject) &&
+                                            `驳回原因：${item.repaymentReject}`
+                                    }}
+                                </span>
+                                <span>还款金额：{{ item.repaymentMoney }}</span>
+                                <span>审批人：{{ item.operationName }}</span>
+                            </div>
+                        </el-timeline-item>
+                    </el-timeline>
+                    <el-empty :image-size="200" v-if="!Boolean(repayDetailList.length)"></el-empty>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { approveResult, pettyStates } from '../pettyMoneyStaticData'
+export default {
+    props: {
+        checkedRow: {
+            reuqired: true,
+            type: Object
+        },
+        repayDetailList: {
+            reuqired: true,
+            type: Array
+        },
+    },
+    data() {
+        return {
+            approveResult,
+            pettyStates,
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.drawerHeader,
+.drawerContainer {
+    padding: 15px 15px 0;
+
+    .repay-timeline {
+        height: 400px;
+        padding-top: 5px;
+        overflow-y: scroll;
+
+        span {
+            margin-right: 10px;
+            color: #616161;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/views/pettyMoney/components/examinePetty.vue

@@ -99,60 +99,7 @@
         </el-dialog>
 
         <el-drawer :visible.sync="drawerVisible" size="50%" :with-header="false" >
-            <div class="drawerHeader">
-                申请详情
-            </div>
-            <div class="drawerContainer">
-                <el-descriptions :column="3" border>
-                    <el-descriptions-item label="备用金名称" span="3">{{ checkedRow.pettyName || '暂未通过' }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="借款缘由" span="3">{{ checkedRow.pettyReason }}</el-descriptions-item>
-                    <el-descriptions-item label="借款详情" span="3">{{ checkedRow.pettyDetails }}</el-descriptions-item>
-                    <el-descriptions-item label="借款金额">{{ checkedRow.pettyMoney }}</el-descriptions-item>
-                    <el-descriptions-item label="审批人">{{ checkedRow.financeName }}</el-descriptions-item>
-                    <el-descriptions-item label="审批状态">
-                        <el-tag size="mini"
-                            :type="approveResult[checkedRow.pettyApproval] && approveResult[checkedRow.pettyApproval].type">
-                            {{ approveResult[checkedRow.pettyApproval] &&
-                                    approveResult[checkedRow.pettyApproval].text
-                            }}</el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="审批时间">{{ checkedRow.pettyApprovalTime }}</el-descriptions-item>
-                    <el-descriptions-item label="待还金额">{{ checkedRow.pettySurplus }}</el-descriptions-item>
-                    <el-descriptions-item label="还款状态">
-                        <el-tag size="mini"
-                            :type="pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].type">
-                            {{ pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].text }}
-                        </el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="驳回原因" span="3" v-if="checkedRow.pettyApproval === 2">{{ checkedRow.pettyReject }}</el-descriptions-item>
-                    <el-descriptions-item label="借款日期">{{ checkedRow.pettyTime }}</el-descriptions-item>
-                </el-descriptions>
-            </div>
-            <div v-if="checkedRow.pettyApproval === 1">
-                <div class="drawerHeader">
-                    还款记录
-                </div>
-                <!-- "repaymentId":1,"pettyId":1,"operationId":53,"repaymentTime":"2022-08-13 01:30:18","repaymentMoney":1.0,"repaymentRemarks":null,"repaymentDetails":null,"repaymentReason":"","repaymentEnclosure":null,"repaymentApproval":0,"repaymentReject":null,"operationName":"chenxin"} -->
-                <div class="drawerContainer">
-                    <div class="repay-timeline">
-                        <el-timeline>
-                            <el-timeline-item v-for="item in repayDetailList" :key="item.repaymentId"
-                                :type="approveResult[item.repaymentApproval].type" :timestamp="item.repaymentTime">
-
-                                <el-tag
-                                    :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
-                                    {{ approveResult[item.repaymentApproval] &&
-                                            approveResult[item.repaymentApproval].text
-                                    }}</el-tag>
-                                <span>还款金额：{{ item.repaymentMoney }}</span>
-                                <span>审批人：{{ item.operationName }}</span>
-                            </el-timeline-item>
-                        </el-timeline>
-                        <el-empty :image-size="200" v-if="!Boolean(repayDetailList.length)"></el-empty>
-                    </div>
-                </div>
-            </div>
+            <applicate-detail :checkedRow="checkedRow" :repayDetailList="repayDetailList"></applicate-detail>
         </el-drawer>
 
     </div>
@@ -161,6 +108,7 @@
 import { mapGetters } from 'vuex'
 import { selectCompanyPettyRecord, agreePetty, rejectPetty, repayRecordsByPettyId } from '@/api/pettyMoney'
 import { approveResult, pettyStates } from '../pettyMoneyStaticData'
+import applicateDetail from './applicateDetail'
 import { parseTime } from '@/utils'
 export default {
     props: ['tag'],
@@ -170,6 +118,9 @@ export default {
             'urId'
         ]),
     },
+    components: {
+        applicateDetail
+    },
     data() {
         return {
             examineQuery: {
@@ -237,6 +188,7 @@ export default {
                 return
             }
             this.dialogVisible = dialogVisible
+            this.$refs.dialogForm.resetFields()
         },
 
         getRepayDetailList() {
@@ -290,26 +242,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.main {
-
-    .drawerHeader,
-    .drawerContainer {
-        padding: 15px 15px 0;
-
-        .repay-timeline {
-            height: 400px;
-            padding-top: 5px;
-            overflow-y: scroll;
-
-            span {
-                margin-right: 10px;
-                color: #616161;
-            }
-        }
-    }
-
-}
-
 .footer {
     text-align: right;
 }

src/views/pettyMoney/components/examineRepay.vue

@@ -14,7 +14,8 @@
                 <el-button size="medium" type="primary" icon="el-icon-search" @click="getexamineRepayList(true)">
                     查询
                 </el-button>
-                <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="examineQuery = {}; getexamineRepayList(false)">重置
+                <el-button size="medium" type="primary" icon="el-icon-refresh-right"
+                    @click="examineQuery = {}; getexamineRepayList(false)">重置
                 </el-button>
                 <!-- <el-button size="medium" type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button> -->
             </el-form-item>
@@ -32,15 +33,15 @@
                 </template>
             </el-table-column>
             <el-table-column prop="pettyReason" label="借款缘由" />
-            <el-table-column prop="pettyMoney" label="借款金额" width="120px"/>
+            <el-table-column prop="pettyMoney" label="借款金额" width="120px" />
             <el-table-column prop="repaymentMoney" label="还款金额" width="120px">
                 <template slot-scope="scope">
                     <el-tag type="danger">{{ scope.row.repaymentMoney }}</el-tag>
                 </template>
             </el-table-column>
-            <el-table-column prop="pettySurplus" label="待还金额" width="120px"/>
+            <el-table-column prop="pettySurplus" label="待还金额" width="120px" />
             <el-table-column prop="userName" label="借款人" width="120px" />
-            <el-table-column prop="pettyTime" label="借款日期"   width="180px"/>
+            <el-table-column prop="pettyTime" label="借款日期" width="180px" />
             <!-- <el-table-column prop="pettyApproval" label="申请状态"  width="100px">
                 <template slot-scope="scope">
                     <el-tag size="small" :type="approveResult[scope.row.pettyApproval].type">
@@ -57,7 +58,8 @@
                 <template slot-scope="scope">
                     <el-button-group>
                         <el-button type="success" size="mini" @click="agree(scope.row)">同意</el-button>
-                        <el-button type="warning" size="mini" @click="disagree(scope.row)">驳回</el-button>
+                        <el-button type="warning" size="mini" @click="dialogVisible = true; checkedRow = scope.row">驳回
+                        </el-button>
                         <!-- <el-button type="primary" size="mini">详情</el-button> -->
                     </el-button-group>
                     <!-- <el-button type="text"
@@ -81,6 +83,19 @@
                 :total="examinePageQuery.total">
             </el-pagination>
         </div>
+
+        <el-dialog title="驳回理由" :visible.sync="dialogVisible" width="40%" :before-close="cancel">
+            <el-form label-position="left" :model="checkedRow" label-width="100px" ref="dialogForm">
+                <el-form-item label="驳回理由" :rules="{ required: true, message: '请输入驳回理由', trigger: 'blur' }"
+                    prop="repaymentReject">
+                    <el-input v-model="checkedRow.repaymentReject" placeholder="请选择驳回理由" />
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="cancel">取 消</el-button>
+                <el-button type="primary" @click="disagree">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -88,14 +103,14 @@ import { mapGetters } from 'vuex'
 import { selectUnrepay, agreeRepay, rejectRepay } from '@/api/pettyMoney'
 import { approveResult, pettyStates } from '../pettyMoneyStaticData'
 export default {
-    props:['pettyApproval'],
+    props: ['pettyApproval'],
     computed: {
         ...mapGetters([
             'companyId',
             'urId'
         ]),
     },
-    data(){
+    data() {
         return {
             examineQuery: {
                 pettyName: '',
@@ -111,6 +126,8 @@ export default {
             pettyStates,
             examineList: [],
             checkedPettyMoney: {},
+            checkedRow: {},
+            dialogVisible: false
         }
     },
     mounted() {
@@ -123,11 +140,11 @@ export default {
                 companyId: this.companyId
             }
             //不能确定是不是条件查询，则根据上一个查询方式进行条件查询或者一般查询，=== 切换分页时候
-            if(isConditionSelect === undefined || isConditionSelect === ''){
+            if (isConditionSelect === undefined || isConditionSelect === '') {
                 this.isConditionSelect && Object.assign(params, this.examineQuery)
                 Object.assign(params, this.examinePageQuery)
                 //确定是某种查询方式，则更新标记，作为下一次查询的标准
-            }else{
+            } else {
                 this.isConditionSelect = isConditionSelect
                 isConditionSelect && Object.assign(params, this.examineQuery)
                 params.pageNum = 1
@@ -135,10 +152,10 @@ export default {
             }
             selectUnrepay(params).then(res => {
                 if (res.success) {
-                    const {list, total} = res.data
+                    const { list, total } = res.data
                     this.examinePageQuery.total = total
                     this.examineList = list
-                    this.$emit("setTagNumbers",{repaymentCount: total})
+                    this.$emit("setTagNumbers", { repaymentCount: total })
                 } else {
                     this.$message.error("获取数据失败")
                 }
@@ -156,8 +173,8 @@ export default {
         //     }
         //     return
         // }
-        agree(data){
-            const {repaymentId, pettyId} = data
+        agree(data) {
+            const { repaymentId, pettyId } = data
             const params = {
                 operationId: this.urId,
                 repaymentId,
@@ -167,33 +184,46 @@ export default {
             agreeRepay(params).then(res => {
                 if (res.success) {
                     this.getexamineRepayList()
+                    this.$message.success("操作成功")
                 } else {
                     this.$message.error("操作失败")
                 }
             })
 
         },
-        disagree(data){
-            const {repaymentId, pettyId} = data
+        disagree() {
+            this.$refs.dialogForm.validate((valida) => {
+                if (valida) {
+                    const { repaymentId, pettyId, repaymentReject } = this.checkedRow
                     const params = {
                         operationId: this.urId,
                         repaymentId,
                         repaymentApproval: 2,
                         pettyId,
+                        repaymentReject
                     }
                     rejectRepay(params).then(res => {
                         if (res.success) {
+                            this.cancel()
                             this.getexamineRepayList()
+                            this.$message.success("操作成功")
                         } else {
                             this.$message.error("操作失败")
                         }
                     })
                 }
+            })
+
+        },
+        cancel() {
+            this.dialogVisible = false
+            this.$refs.dialogForm.resetFields()
+        }
     }
 }
 </script>
 <style>
 .footer {
     text-align: right;
-    }
+}
 </style>
\ No newline at end of file

src/views/pettyMoney/pettyMoneyRecord.vue

@@ -79,9 +79,9 @@
         </div>
         <el-dialog title="还款金额" :visible="Boolean(dialogVisible)" width="40%" :show-close="false">
             <el-form label-position="left" :model="checkedRow" label-width="100px" ref="dialogForm">
-                <el-form-item label="还款金额" :rules="{ required: true, validator: checkRepayMoney }"
+                <el-form-item label="还款金额" :rules="{ validator: checkRepayMoney, trigger: 'change' }"
                     prop="repaymentMoney">
-                    <el-input v-model="checkedRow.repaymentMoney" placeholder="请选择备用金名称" type="number" />
+                    <el-input v-model="checkedRow.repaymentMoney" placeholder="请选择备用金名称" type="number" :min="1"/>
                 </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
@@ -91,59 +91,7 @@
         </el-dialog>
 
         <el-drawer :visible.sync="drawerVisible" size="50%" :with-header="false">
-            <div class="drawerHeader">
-                申请详情
-            </div>
-            <div class="drawerContainer">
-                <el-descriptions :column="3" border>
-                    <el-descriptions-item label="备用金名称" span="3">{{ checkedRow.pettyName || '暂未通过' }}</el-descriptions-item>
-                    <el-descriptions-item label="借款缘由" span="3">{{ checkedRow.pettyReason }}</el-descriptions-item>
-                    <el-descriptions-item label="借款详情" span="3">{{ checkedRow.pettyDetails }}</el-descriptions-item>
-                    <el-descriptions-item label="借款金额">{{ checkedRow.pettyMoney }}</el-descriptions-item>
-                    <el-descriptions-item label="审批人">{{ checkedRow.financeName }}</el-descriptions-item>
-                    <el-descriptions-item label="审批状态">
-                        <el-tag size="mini"
-                            :type="approveResult[checkedRow.pettyApproval] && approveResult[checkedRow.pettyApproval].type">
-                            {{ approveResult[checkedRow.pettyApproval] &&
-                                    approveResult[checkedRow.pettyApproval].text
-                            }}</el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="审批时间">{{ checkedRow.pettyApprovalTime }}</el-descriptions-item>
-                    <el-descriptions-item label="待还金额">{{ checkedRow.pettySurplus }}</el-descriptions-item>
-                    <el-descriptions-item label="还款状态">
-                        <el-tag size="mini"
-                            :type="pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].type">
-                            {{ pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].text }}
-                        </el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item label="驳回原因" span="3" v-if="checkedRow.pettyApproval === 2">{{ checkedRow.pettyReject }}</el-descriptions-item>
-                    <el-descriptions-item label="借款日期">{{ checkedRow.pettyTime }}</el-descriptions-item>
-                </el-descriptions>
-            </div>
-            <div v-if="checkedRow.pettyApproval === 1">
-                <div class="drawerHeader">
-                    还款记录
-                </div>
-                <!-- "repaymentId":1,"pettyId":1,"operationId":53,"repaymentTime":"2022-08-13 01:30:18","repaymentMoney":1.0,"repaymentRemarks":null,"repaymentDetails":null,"repaymentReason":"","repaymentEnclosure":null,"repaymentApproval":0,"repaymentReject":null,"operationName":"chenxin"} -->
-                <div class="drawerContainer ">
-                    <div class="repay-timeline">
-                        <el-timeline>
-                            <el-timeline-item v-for="item in repayDetailList" :key="item.repaymentId"
-                                :type="approveResult[item.repaymentApproval].type" :timestamp="item.repaymentTime">
-
-                                <el-tag
-                                    :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
-                                    {{ approveResult[item.repaymentApproval] &&
-                                            approveResult[item.repaymentApproval].text
-                                    }}</el-tag>
-                                <span>还款金额：{{ item.repaymentMoney }}</span>
-                                <span>审批人：{{ item.operationName }}</span>
-                            </el-timeline-item>
-                        </el-timeline>
-                        <el-empty :image-size="200" v-if="!Boolean(repayDetailList.length)"></el-empty>
-                    </div>
-                </div>
-            </div>
+            <applicate-detail :checkedRow="checkedRow" :repayDetailList="repayDetailList"></applicate-detail>
         </el-drawer>
     </div>
 </template>
@@ -152,6 +100,7 @@ import { mapGetters } from 'vuex'
 import { selectSelfPettyRecord, repayMoney, repayRecordsByPettyId } from '@/api/pettyMoney'
 import { approveResult, pettyStates } from './pettyMoneyStaticData'
 import { parseTime } from '@/utils'
+import applicateDetail from './components/applicateDetail'
 export default {
     computed: {
         ...mapGetters([
@@ -159,6 +108,9 @@ export default {
             'urId'
         ]),
     },
+    components: {
+        applicateDetail
+    },
     data() {
         return {
             pettyMoneyQuery: {},
@@ -183,10 +135,12 @@ export default {
     },
     methods: {
         checkRepayMoney(rule, value, callback) {
-            if (!value) {
-                return callback(new Error('还款金额不能为空'));
-            }
-            if (value > this.checkedRow.pettySurplus) {
+            // console.log(1)
+            if ( value === null || value === undefined || value === '') {
+                callback(new Error('还款金额不能为空'));
+            }else if(parseFloat(value) <= 0){
+                callback(new Error('请输入大于0的金额'));
+            }else if (value > this.checkedRow.pettySurplus) {
                 callback(new Error('超出应还款金额'));
             } else {
                 callback();
@@ -231,6 +185,7 @@ export default {
                 return
             }
             this.dialogVisible = dialogVisible
+            this.$refs['dialogForm'].resetFields();
         },
         getRepayDetailList() {
             const params = {
@@ -277,21 +232,6 @@ export default {
 .main {
     padding: 15px;
 
-    .drawerHeader,
-    .drawerContainer {
-        padding: 15px 15px 0;
-
-        .repay-timeline {
-            height: 400px;
-            padding-top: 5px;
-            overflow-y: scroll;
-
-            span {
-                margin-right: 10px;
-                color: #616161;
-            }
-        }
-    }
 }
 
 .footer {