备用金模块

src/api/pettyMoney.js

+import request from '@/utils/request'
+//插入一条记录
+export const insertPettyMoneyRecord = (data) => {
+    return request({
+        url: '/pettyCash/insert',
+        method: 'post',
+        data
+    })
+}
+
+//再未被审批之前可以修改
+export const updatePettyMoneyRecord = (data) => {
+    return request({
+        url: '/pettyCash/update',
+        method: 'post',
+        data
+    })
+}
+
+//财务人员审批列表
+export const selectCompanyPettyRecord = (data) => {
+    return request({
+        url: '/pettyCash/selectPagecompany',
+        method: 'post',
+        data
+    })
+}
+
+//个人申请记录
+export const selectSelfPettyRecord = (data) => {
+    return request({
+        url: '/pettyCash/selectPageuser',
+        method: 'post',
+        data
+    })
+}
+
+//某条申请详细记录
+export const selctByPettyId = (data) => {
+    return request({
+        url: '/pettyCash/selctByPettyId',
+        method: 'post',
+        data
+    })
+}
+
+//未偿还的记录
+export const selectUnrepay = (data) => { //未还款
+    return request({
+        url: '/pettyCash/selectUnapproved',
+        method: 'post',
+        data
+    })
+}
+
+//同意审批
+export const agreePetty = (data) => {
+    return request({
+        url: '/pettyCash/agree',
+        method: 'post',
+        data
+    })
+}
+
+// 拒绝审批
+export const rejectPetty = (data) => {
+    return request({
+        url: '/pettyCash/reject',
+        method: 'post',
+        data
+    })
+}
+
+/******还款********/
+
+
+
+// 同意还款
+export const agreeRepay = (data) => {
+    return request({
+        url: '/pettyRepayment/agree',
+        method: 'post',
+        data
+    })
+}
+
+// 申请还款
+export const repayMoney = (data) => {
+    return request({
+        url: '/pettyRepayment/insert',
+        method: 'post',
+        data
+    })
+}
+
+// 查询还款记录
+export const repayRecordsByPettyId = (data) => {
+    return request({
+        url: '/pettyRepayment/selectAllBypettyId',
+        method: 'post',
+        data
+    })
+}
+// 驳回还款
+export const rejectRepay = (data) => {
+    return request({
+        url: '/pettyRepayment/reject',
+        method: 'post',
+        data
+    })
+}
+
+// 修改还款信息
+export const updateRepay = (data) => {
+    return request({
+        url: '/pettyRepayment/update',
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

src/router/index.js

@@ -87,6 +87,10 @@ export const componentMap = {
   'contract_type':()=>import('@/views/contract/contractType').then(m=>m.default),
   'add_contract':()=>import('@/views/contract/components/addContract').then(m=>m.default),
 
+  'examine_approve':()=>import('@/views/pettyMoney/examineApprove').then(m=>m.default),
+  'add_petty_money_record':()=>import('@/views/pettyMoney/addPettyMoneyRecord').then(m=>m.default),
+  'petty_money_record':()=>import('@/views/pettyMoney/pettyMoneyRecord').then(m=>m.default),
+
 }
 
 /**

src/styles/element-ui.scss

@@ -106,3 +106,16 @@
         }
     }
 }
+.petty-data-simple{
+  .el-badge__content.is-fixed{
+    position: relative;
+    float: left;
+    top: 10px;
+    left: -5px;
+    font-size: 11px;
+    font-weight: 400;
+    transform: none;
+    height: auto;
+    // background: #4fc08d;
+  }
+}

src/views/contract/components/addContract.vue

@@ -179,6 +179,7 @@ export default {
             contractNatures: deepClone(contractNatures),
             isEdit: false,
             action: '',
+            uploadChange: false
         }
     },
     computed: {
@@ -197,12 +198,12 @@ export default {
     mounted() {
         const { contractId } = this.$route.query
         this.getContractTypeList()  //获取合同类型
-        this.getContractFiles(contractId)  //获取合同文件
 
         // 编辑
         if (this.$route.path.indexOf('/editContract') >= 0 && contractId) {
             this.isEdit = true;
             this.getContractDetail(contractId)
+            this.getContractFiles(contractId)  //获取合同文件
          // 添加
         } else if (this.$route.path.indexOf('/addContract') >= 0 && this.$route.query.checkedContractNature !== undefined) {
             this.isEdit = false;
@@ -273,11 +274,11 @@ export default {
 
         },
         uploadOnchange(file, fileList) {
-            console.log(file, fileList)
+            this.uploadChange = true
         },
         addContractFile(contractId) {
             this.fileParams.Id = String(contractId)
-            this.$refs.uploadContractFile.submit()
+            this.uploadChange && this.$refs.uploadContractFile.submit()
         },
         getContractTypeList() {
             const params = {

src/views/contract/contractList.vue

@@ -17,38 +17,35 @@
                 </el-form-item>
                 <el-form-item>
                     <el-select v-model="contractQuery.contractNature" placeholder="合同状态">
-                        <el-option v-for="(item,index) in contractNatures"
-                            :key="index"
-                            :label="item"
-                            :value="index">
+                        <el-option v-for="(item, index) in contractNatures" :key="index" :label="item" :value="index">
                         </el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item>
                     <el-button type="primary" icon="el-icon-search" @click="getContractList(true)">查询</el-button>
                     <el-button type="primary" icon="el-icon-refresh-right" @click="contractQuery = {}">重置</el-button>
-                    <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button>
+                    <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同
+                    </el-button>
                 </el-form-item>
             </el-form>
         </div>
         <div class="container">
-            <el-table
-                :data="contractList"
-                style="width: 100%;text-align: center;"
-                border>
-                <el-table-column  label="编号" width="50px">
+            <el-table :data="contractList" style="width: 100%;text-align: center;" border>
+                <el-table-column label="编号" width="50px">
                     <template slot-scope="scope">
                         {{ (contractPageQuery.pageNum - 1) * contractPageQuery.pageSize + scope.$index + 1 }}
                     </template>
                 </el-table-column>
                 <!-- <el-table-column prop="companyName" label="状态"/> -->
-                <el-table-column prop="contractNumber" label="合同编号" width="120px"/>
-                <el-table-column prop="contractName" label="合同名称"  width="200px"/>
-                <el-table-column  label="合同类型" >
+                <el-table-column prop="contractNumber" label="合同编号" width="120px" />
+                <el-table-column prop="contractName" label="合同名称" width="200px" />
+                <el-table-column label="合同类型">
                     <template slot-scope="scope">
                         <!-- {{Object.values(contractTypeList.find(item => item.id === scope.row.typeId)).toString()}} -->
                         <!-- {{Object.values(contractTypeList.find(item => item.id === scope.row.typeId))}} -->
-                        {{ contractTypeList.find(item => item.id === scope.row.typeId) && contractTypeList.find(item => item.id === scope.row.typeId).name}}
+                        {{ contractTypeList.find(item => item.id === scope.row.typeId) && contractTypeList.find(item =>
+                                item.id === scope.row.typeId).name
+                        }}
                     </template>
                 </el-table-column>
                 <el-table-column prop="contractNature" label="合同性质">
@@ -56,19 +53,21 @@
                         {{ contractNatures[scope.row.contractNature] }}
                     </template>
                 </el-table-column>
-                <el-table-column prop="contractMoney" label="合同金额/元"/>
-                <el-table-column prop="partybName" label="签定人" width="100px"/>
-                <el-table-column prop="safekeeping" label="保管人" width="100px"/>
-                <el-table-column prop="contractStartTime" label="签订时间"/>
+                <el-table-column prop="contractMoney" label="合同金额/元" />
+                <el-table-column prop="partybName" label="签定人" width="100px" />
+                <el-table-column prop="safekeeping" label="保管人" width="100px" />
+                <el-table-column prop="contractStartTime" label="签订时间" />
                 <el-table-column prop="companyCreateTime" label="操作">
                     <template slot-scope="scope">
-                        <el-button type="text" icon="el-icon-edit" @click="$router.push({path: '/editContract', query: {contractId: String(scope.row.contractId)}})">编辑
+                        <el-button type="text" icon="el-icon-edit"
+                            @click="$router.push({ path: '/editContract', query: { contractId: String(scope.row.contractId) } })">
+                            编辑
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
         </div>
-        
+
         <div class="footer">
             <el-pagination @current-change="getContractList" :current-page.sync="contractPageQuery.pageNum"
                 :page-size="contractPageQuery.pageSize" layout="total, prev, pager, next" :total="total">
@@ -77,10 +76,12 @@
 
         <el-dialog title="添加合同" :visible.sync="dialogTableVisible">
             <el-radio-group v-model="checkedContractNature">
-                <el-radio v-for="(item, index) in contractNatures" :key="index" :label="index" >{{item}}</el-radio>
+                <el-radio v-for="(item, index) in contractNatures" :key="index" :label="index">{{ item }}</el-radio>
             </el-radio-group>
             <span slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="$router.push({path: '/addContract', query: {checkedContractNature: String(checkedContractNature)}})">下一步</el-button>
+                <el-button type="primary"
+                    @click="$router.push({ path: '/addContract', query: { checkedContractNature: String(checkedContractNature) } })">
+                    下一步</el-button>
                 <el-button @click="dialogTableVisible = false">取消</el-button>
             </span>
         </el-dialog>
@@ -92,7 +93,7 @@
 import { selectContractList, selectAllContractTypeList } from "@/api/contract"
 import { deepClone } from "@/utils"
 import { mapGetters } from 'vuex'
-import {contractNatures as contractNatureList} from './contractStaticData'
+import { contractNatures as contractNatureList } from './contractStaticData'
 export default {
     // components: {
     //     AddConctract
@@ -113,7 +114,7 @@ export default {
                 typeId: '',
                 contractNature: '',
                 contractName: '',
-                contractNumber:''
+                contractNumber: ''
             },
             contractPageQuery: {
                 pageSize: 10,
@@ -125,7 +126,7 @@ export default {
             // drawerVisible: false,
         }
     },
-    mounted(){
+    mounted() {
         this.getContractTypeList()
         this.getContractList()
     },
@@ -151,10 +152,10 @@ export default {
             }
             isCondition && Object.assign(params, this.contractQuery)
             selectContractList(params).then(res => {
-                if(res.success){
+                if (res.success) {
                     this.total = res.data.total
                     this.contractList = res.data.list
-                }else{
+                } else {
                     this.$message.error("获取数据失败")
                 }
             })
@@ -165,8 +166,12 @@ export default {
     }
 }
 </script>
-<style scoped>
-    .main {
-        padding: 15px;
+<style scoped lang="scss">
+.main {
+    padding: 15px;
+    .footer {
+        text-align: right;
     }
+}
+
 </style>

src/views/contract/contractType.vue

@@ -37,22 +37,19 @@
             </el-pagination>
         </div>
 
-        <el-dialog :title="(isEdit ? '修改' : '添加') + '合同类型'" :visible.sync="dialogFormVisible"
-            @closed="resetData">
+        <el-dialog :title="(isEdit ? '修改' : '添加') + '合同类型'" :visible.sync="dialogFormVisible" @closed="resetData">
             <el-form ref="form" :model="dynamicValidateForm" label-width="130px">
-                <el-form-item label="合同类型名称" prop="name" :rules="[{ required: true, message: '请输入合同类型名称'}]">
+                <el-form-item label="合同类型名称" prop="name" :rules="[{ required: true, message: '请输入合同类型名称' }]">
                     <el-input v-model="dynamicValidateForm.name" autocomplete="off"></el-input>
-                </el-form-item> 
+                </el-form-item>
 
-                <el-form-item v-show="!isEdit" v-for="(name, index) in dynamicValidateForm.names" 
-                    :label="'合同类型名称' + (parseInt(index) + 1)"
-                    :prop="'names.' + index + '.value'"
-                    :key="index" 
-                    :rules="[{
+                <el-form-item v-show="!isEdit" v-for="(name, index) in dynamicValidateForm.names"
+                    :label="'合同类型名称' + (parseInt(index) + 1)" :prop="'names.' + index + '.value'" :key="index" :rules="[{
                         required: true, message: '合同类型名称不能为空', trigger: 'blur'
                     }]">
                     <el-input v-model="name.value">
-                        <el-button slot="append" icon="el-icon-delete" @click.prevent="dynamicValidateForm.names.splice(index, 1)">删除
+                        <el-button slot="append" icon="el-icon-delete"
+                            @click.prevent="dynamicValidateForm.names.splice(index, 1)">删除
                         </el-button>
                     </el-input>
                 </el-form-item>
@@ -90,7 +87,7 @@ export default {
             contractTypeList: [],
             typeList: [],
             dialogFormVisible: false,
-            dynamicValidateForm: {names: []},
+            dynamicValidateForm: { names: [] },
             isEdit: false
         }
     },
@@ -98,10 +95,10 @@ export default {
         this.getContractTypeList()
     },
     methods: {
-        resetData(){
-            this.isEdit = false; 
+        resetData() {
+            this.isEdit = false;
             this.dialogFormVisible = false
-            this.dynamicValidateForm = {names: [], name: ''}
+            this.dynamicValidateForm = { names: [], name: '' }
             this.$refs.form.resetFields();
         },
         edit(data) {
@@ -144,16 +141,16 @@ export default {
                     }
                 })
             }
-            if(this.$refs.form) {
+            if (this.$refs.form) {
                 this.$refs.form.validate((valida) => {
-                    if(valida){
+                    if (valida) {
                         updateCore.call(this)
                     }
                 })
-            }else{
+            } else {
                 updateCore.call(this)
             }
-            
+
         },
         addContractType() {
             this.$refs.form.validate((valida) => {
@@ -191,5 +188,9 @@ export default {
     .header {
         margin-bottom: 10px;
     }
+
+    .footer {
+        text-align: right;
+    }
 }
 </style>

src/views/permission/role.vue

@@ -105,7 +105,7 @@ export default {
   },
   computed: {
     routesData() {
-      console.log(this.routes)
+      // console.log(this.routes)
       return this.routes
     },
   },

src/views/personal/personal.vue

@@ -39,10 +39,12 @@
                   <el-tag v-for="item in userData.roleList" :key="item.rlId">{{item.rlName}}</el-tag>
                 </template>
               </el-form-item>
+              <el-form-item>
+                <el-button type="info" v-if="userupdata" icon="el-icon-edit" @click="userupdata = false">修改</el-button>
+                <el-button type="warning" v-if="!userupdata" @click="cancelUpdateUser">取消</el-button>
+                <el-button type="success" v-if="!userupdata" icon="el-icon-upload2" @click="updateUser">提交</el-button>
+              </el-form-item>
             </el-form>
-            <el-button type="info" v-if="userupdata" icon="el-icon-edit" @click="userupdata = false">修改</el-button>
-            <el-button type="warning" v-if="!userupdata" @click="cancelUpdateUser">取消</el-button>
-            <el-button type="success" v-if="!userupdata" icon="el-icon-upload2" @click="updateUser">提交</el-button>
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -60,9 +62,12 @@
               <el-form-item label="确认密码" prop="confirmPassword">
                 <el-input type="password" show-password v-model="passwordData.confirmPassword"></el-input>
               </el-form-item>
+              <el-form-item >
+                <el-button type="primary" icon="el-icon-refresh-left" @click="passReset">重置信息</el-button>
+                <el-button type="success" icon="el-icon-upload2" @click="changePassword">更换密码</el-button>
+              </el-form-item>
             </el-form>
-            <el-button type="primary" icon="el-icon-refresh-left" @click="passReset">重置信息</el-button>
-            <el-button type="success" icon="el-icon-upload2" @click="changePassword">更换密码</el-button>
+            
           </el-col>
         </el-row>
       </el-tab-pane>

src/views/pettyMoney/addPettyMoneyRecord.vue

+<template>
+    <div class="main">
+        <div class="container">
+            <el-form :model="formData" ref="form" label-width="120px" :rules="rules"
+                class="petty-form contract-description-form">
+                <el-form-item label="借款缘由" prop="pettyReason">
+                    <el-input placeholder="请输入借款缘由" v-model="formData.pettyReason"></el-input>
+                </el-form-item>
+                <el-form-item label="借款详情" prop="pettyDetails">
+                    <el-input placeholder="请输入借款详情" v-model="formData.pettyDetails"></el-input>
+                </el-form-item>
+                <el-form-item label="借款金额" prop="pettyMoney">
+                    <el-input placeholder="请输入借款金额" type="number" v-model="formData.pettyMoney"></el-input>
+                </el-form-item>
+                <el-form-item label="借款时间" prop="pettyTime">
+                    <el-date-picker v-model="formData.pettyTime" align="right" type="datetime" placeholder="请输入借款时间"
+                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="备注" prop="pettyRemarks">
+                    <el-input placeholder="请输入备注" v-model="formData.pettyRemarks"></el-input>
+                </el-form-item>
+                <el-form-item label="申请附件">
+                    <el-upload ref="uploadPettyFile" list-type="picture-card" :action="action" :file-list="fileList"
+                        :on-change="uploadOnchange" :data="fileParams" :auto-upload="false" multiple accept='.pdf'
+                        :limit="1" class='el-contract-upload'>
+                        <i slot="default" class="el-icon-plus"></i>
+                        <div slot="file" slot-scope="{file}" class="file-list">
+                            <div class="avator"><i class="el-icon-document"></i></div>
+                            <div class="file-content" :title="file.name">{{ file.name }}</div>
+                            <div class="file-operate">
+                                <span class="" @click="handleDownload(file)">
+                                    <i class="el-icon-download"></i>
+                                </span>
+                            </div>
+                        </div>
+                        <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                        <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过500kb</div> -->
+                    </el-upload>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="addPettyMoneyRecord">{{isEdit ? '确认修改' : '确认申请'}}</el-button>
+                </el-form-item>
+            </el-form>
+
+        </div>
+    </div>
+</template>
+<script>
+import { insertPettyMoneyRecord, selctByPettyId, updatePettyMoneyRecord } from '@/api/pettyMoney'
+import { deepClone } from '@/utils'
+// import { contractNatures } from '../contractStaticData'
+import { mapGetters } from 'vuex'
+import { downloadPDFFile } from '@/utils/download'
+import { addRecordRules as rules, staticParams } from './pettyMoneyStaticData'
+export default {
+    // props: ['drawerVisible'],
+    computed: {
+        ...mapGetters([
+            'companyId',
+            'urId'
+        ]),
+    },
+    data() {
+        return {
+            rules: rules,
+            formData: {
+                ...staticParams,
+                userId: this.urId, //谁借的
+                companyId: this.companyId, //公司id
+                pettyState: 2,//状态0待还款1已还清2无需偿还
+                pettyApproval: 0, //0待审批1通过2驳回
+            },
+            fileList: [],
+            fileParams: {},
+            action: '',
+            uploadChange: false,
+            isEdit: false
+        }
+    },
+    created() {
+        this.action = process.env.VUE_APP_BASE_API + '/file/updataPettyFile'
+    },
+    mounted() {
+        const { pettyId } = this.$route.query
+        // 编辑
+        if (this.$route.path.indexOf('/editPetty') >= 0 && pettyId) {
+            this.isEdit = true;
+            this.getPettytDetail(pettyId)
+            this.getPettyFiles(pettyId)  //获取合同文件
+            // 添加
+        } else if (this.$route.path.indexOf('/addPettyMoneyRecord') >= 0) {
+            this.isEdit = false;
+        } else {
+            this.$router.back()
+        }
+        console.log(1)
+    },
+    methods: {
+        addPettyMoneyRecord() {
+            this.$refs.form.validate(valida => {
+                if (valida) {
+                    const params = {
+                        ...this.formData,
+                        userId: this.urId,
+                        companyId: this.companyId,
+                        pettySurplus: this.formData.pettyMoney
+                    }
+                    // [pettyMoney为空, userId为空, companyId为空, pettyApproval为空, pettyState为空]
+                    if (this.isEdit) {
+                        updatePettyMoneyRecord(params).then(res => {
+                            if (res.success) {
+                                this.addPettyFile(params.pettyId)
+                                this.$message.success("修改成功")
+                                setTimeout(() => {
+                                    this.$router.push('/pettyMoneyRecord')
+                                }, 1000);
+                            } else {
+                                this.$message.error(res.msg)
+                            }
+                        })
+                    } else {
+                        insertPettyMoneyRecord(params).then(res => {
+                            if (res.success) {
+                                this.addPettyFile(res.data)
+                                this.$message.success("申请成功")
+                                setTimeout(() => {
+                                    this.$router.push('/pettyMoneyRecord')
+                                }, 1000);
+                            } else {
+                                this.$message.error(res.msg)
+                            }
+                        })
+                    }
+                }
+            })
+        },
+        uploadOnchange(file, fileList) {
+            this.uploadChange = true
+        },
+        addPettyFile(pettyId) {
+            this.fileParams.Id = pettyId
+            this.uploadChange && this.$refs.uploadPettyFile.submit()
+        },
+        handleDownload(file) {
+            let { name, filePath } = file
+            let url = process.env.VUE_APP_BASE_API + filePath;
+            downloadPDFFile(url, name)
+        },
+        getPettytDetail(pettyId) {
+            if (pettyId) {
+                const params = {
+                    pettyId,
+                    userId: this.urId
+                }
+                selctByPettyId(params).then(res => {
+                    if (res.success) {
+                        this.formData = Object.assign({}, this.formData, res.data)
+                        const { pettyEnclosure } = res.data
+                        pettyEnclosure && (this.fileList = [{
+                            name: pettyEnclosure.slice(pettyEnclosure.lastIndexOf('/') + 1, pettyEnclosure.length),
+                            filePath: pettyEnclosure
+                        }])
+                    } else {
+                        this.$message.warning("获取备用金详情失败")
+                    }
+                })
+                // get()
+            }
+        },
+        getPettyFiles(pettyId) {
+            const params = {
+                pettyId
+            }
+            // selectContractFiles(params).then(res => {
+            //     if (res.success) {
+            //         this.fileList = res.data.map(item => {
+            //             item.name = item.filePath.slice(item.filePath.lastIndexOf('/') + 1, item.filePath.length)
+            //             return item
+            //         })
+            //     } else {
+            //         this.fileList = []
+            //     }
+            // })
+        },
+    }
+}
+</script>
+<style scoped lang="scss">
+.main {
+    .header {
+        padding: 25px 15px;
+    }
+
+    .container {
+        padding: 15px 0;
+
+        .petty-form {
+            width: 50%;
+        }
+
+    }
+}
+
+
+
+.file-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 250px;
+    padding: 0 5px;
+
+    .avator {
+        width: 10%;
+        font-size: 32px;
+        color: #d75b5b;
+    }
+
+    .file-content {
+        width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-left: 10px;
+    }
+
+    .file-operate {
+        width: 15%;
+        font-size: 16px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        span {
+            cursor: pointer;
+        }
+
+    }
+
+}
+</style>
\ No newline at end of file

src/views/pettyMoney/components/examinePetty.vue

+<template>
+    <div class="main">
+        <el-form :inline="true" :model="examineQuery" v-if="tag === 'overview'">
+            <el-form-item>
+                <el-input v-model="examineQuery.pettyName" placeholder="请输入备用金名称" />
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="examineQuery.username" placeholder="请输入借款人" />
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="examineQuery.pettyApproval" placeholder="请选择审批状态">
+                    <el-option v-for="(item, index) in approveResult" :key="index" :value="index" :label="item.text">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="examineQuery.pettyState" placeholder="请选择还款状态">
+                    <el-option v-for="(item, index) in pettyStates" :key="index" :value="index" :label="item.text">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button size="medium" type="primary" icon="el-icon-search" @click="getexamineList(true)">
+                    查询
+                </el-button>
+                <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="examineQuery = {}">重置
+                </el-button>
+                <!-- <el-button size="medium" type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button> -->
+            </el-form-item>
+        </el-form>
+        <el-table :data="examineList" style="width: 100%;text-align: center;" border>
+            <el-table-column label="编号" width="50px">
+                <template slot-scope="scope">
+                    {{ (examinePageQuery.pageNum - 1) * examinePageQuery.pageSize + scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="pettyName" label="备用金名称" width="120px" v-if="tag === 'overview'">
+                <template slot-scope="scope">
+                    {{ parseInt(scope.row.pettyApproval) === 1 ? scope.row.pettyName : '暂未通过' }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="pettyReason" label="借款缘由" />
+            <el-table-column prop="userName" label="借款人" width="120px" />
+            <el-table-column prop="pettyMoney" label="借款金额" width="120px" />
+            <el-table-column prop="pettySurplus" label="待还金额" width="120px" />
+            <el-table-column prop="pettyTime" label="借款日期" width="180px" />
+            <el-table-column prop="pettyApproval" label="申请状态" width="100px" v-if="tag === 'overview'">
+                <template slot-scope="scope">
+                    <el-tag size="small" :type="approveResult[scope.row.pettyApproval].type">
+                        {{ approveResult[scope.row.pettyApproval].text }}</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="pettyState" label="还款状态" width="100px" v-if="tag === 'overview'">
+                <template slot-scope="scope">
+                    <el-tag size="mini" :type="pettyStates[scope.row.pettyState].type">
+                        {{ pettyStates[scope.row.pettyState].text }}</el-tag>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="操作" :width="tag === 'overview' ? '120px' : '200px'">
+                <template slot-scope="scope">
+                    <el-button-group>
+                        <el-button v-if="tag === 'unapprove'" type="success" size="mini"
+                            @click="controlDialogVisible('agree', scope.row)">同意
+                        </el-button>
+                        <el-button v-if="tag === 'unapprove'" type="warning" size="mini"
+                            @click="controlDialogVisible('reject', scope.row)">驳回
+                        </el-button>
+                        <el-button size="mini" v-if="tag === 'overview'"
+                            :style="{ background: '#5782df', color: '#fff', border: '1px solid #5782df' }"
+                            @click="controlDialogDrawerVisible('drawerVisible', scope.row)">
+                            详情</el-button>
+                    </el-button-group>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="footer">
+            <el-pagination @current-change="getexamineList" :current-page.sync="examinePageQuery.pageNum"
+                :page-size="examinePageQuery.pageSize" layout="total, prev, pager, next"
+                :total="examinePageQuery.total">
+            </el-pagination>
+        </div>
+
+        <el-dialog :title="dialogVisible === 'agree' ? '同意审批' : '拒绝审批'" :visible="Boolean(dialogVisible)" width="40%"
+            :show-close="false">
+            <el-form label-position="left" :model="checkedRow" label-width="100px" ref="dialogForm">
+                <el-form-item v-if="dialogVisible === 'agree'" label="备用金名称"
+                    :rules="{ required: true, message: '请输入备用金名称' }" prop="pettyName">
+                    <el-input v-model="checkedRow.pettyName" placeholder="请选择备用金名称" />
+                </el-form-item>
+                <el-form-item v-else label="驳回理由" :rules="{ required: true, message: '请输入驳回理由' }" prop="pettyReject">
+                    <el-input v-model="checkedRow.pettyReject" placeholder="请选择驳回理由" />
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="controlDialogVisible('')">取 消</el-button>
+                <el-button type="primary" @click="operateConfirm">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-drawer :visible.sync="drawerVisible" size="50%" :with-header="false" @closed="">
+            <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, index) 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>
+        </el-drawer>
+
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { selectCompanyPettyRecord, agreePetty, rejectPetty, repayRecordsByPettyId } from '@/api/pettyMoney'
+import { approveResult, pettyStates } from '../pettyMoneyStaticData'
+import { parseTime } from '@/utils'
+export default {
+    props: ['tag'],
+    computed: {
+        ...mapGetters([
+            'companyId',
+            'urId'
+        ]),
+    },
+    data() {
+        return {
+            examineQuery: {
+                pettyName: '',
+                pettyApproval: '',
+            },
+            examinePageQuery: {
+                pageNum: 1,
+                pageSize: 10,
+                total: 0
+            },
+            approveResult,
+            pettyStates,
+            examineList: [],
+            checkedPettyMoney: {},
+            dialogVisible: false,
+            checkedRow: {},
+            drawerVisible: false,
+            repayDetailList: []
+        }
+    },
+    mounted() {
+        this.getexamineList()
+    },
+    methods: {
+        getexamineList(isCondition) {
+            const params = {
+                ...this.examinePageQuery,
+                companyId: this.companyId
+            }
+            this.tag === 'unapprove' && (params.pettyApproval = 0)
+            isCondition && Object.assign(params, this.examineQuery)
+            selectCompanyPettyRecord(params).then(res => {
+                if (res.success) {
+                    const { list, total, repaymentCount, approvalPending } = res.data
+                    this.examinePageQuery.total = total
+                    this.examineList = list
+                    this.$emit("setTagNumbers", { repaymentCount, approvalPending })
+                } else {
+                    this.$message.error("获取数据失败")
+                }
+            })
+        },
+        controlDialogDrawerVisible(dialogVisible, data) {
+            if (dialogVisible) {
+                this.checkedRow = { ...data }
+            } else {
+                this.checkedRow = {}
+            }
+            if (dialogVisible === 'drawerVisible') {
+                this.drawerVisible = true
+                this.getRepayDetailList()
+                return
+            }
+            this.dialogVisible = dialogVisible
+        },
+        getRepayDetailList() {
+            const params = {
+                pettyId: this.checkedRow.pettyId
+            }
+            repayRecordsByPettyId(params).then(res => {
+                if (res.success) {
+                    this.repayDetailList = res.data
+                } else {
+                    this.$message.error("获取还款记录失败")
+                }
+            })
+        },
+        operateConfirm() {
+            this.dialogVisible === 'agree' ? this.agreeExaminePetty() : this.rejectExaminePetty()
+        },
+        agreeExaminePetty() {
+            this.$refs.dialogForm.validate((valida) => {
+                if (valida) {
+                    const params = { ...this.checkedRow, financeId: this.urId, pettyApproval: 1, pettyState: 0, pettyApprovalTime: parseTime(new Date()) }
+                    agreePetty(params).then(res => {
+                        if (res.success) {
+                            this.$message.success("操作成功")
+                            this.getexamineList()
+                            this.dialogVisible = false
+                        } else {
+                            this.$message.error("操作失败")
+                        }
+                    })
+                }
+            })
+        },
+        rejectExaminePetty() {
+            this.$refs.dialogForm.validate((valida) => {
+                if (valida) {
+                    const params = { ...this.checkedRow, financeId: this.urId, pettyApproval: 2, pettyApprovalTime: parseTime(new Date()) }
+                    rejectPetty(params).then(res => {
+                        if (res.success) {
+                            this.$message.success("操作成功")
+                            this.getexamineList()
+                            this.controlDialogVisible('')
+                        } else {
+                            this.$message.error("操作失败")
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</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;
+}
+</style>
\ No newline at end of file

src/views/pettyMoney/components/examineRepay.vue

+<template>
+    <div>
+        <el-form :inline="true" :model="examineQuery">
+            <el-form-item>
+                <el-input v-model="examineQuery.pettyName" placeholder="请选择备用金名称" />
+            </el-form-item>
+            <el-form-item>
+                <el-select v-model="examineQuery.pettyApproval" placeholder="请选择审批状态">
+                    <el-option v-for="(item, index) in approveResult" :key="index" :value="index" :label="item.text">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <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 = {}">重置
+                </el-button>
+                <!-- <el-button size="medium" type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button> -->
+            </el-form-item>
+        </el-form>
+        <el-table :data="examineList" style="width: 100%;text-align: center;" border>
+            <!-- <el-table-column label="编号" width="50px" type="index" /> -->
+            <el-table-column label="编号" width="50px">
+                <template slot-scope="scope">
+                    {{ (examinePageQuery.pageNum - 1) * examinePageQuery.pageSize + scope.$index + 1 }}
+                </template> 
+            </el-table-column>
+            <el-table-column prop="pettyName" label="备用金名称" width="120px">
+                <template slot-scope="scope">
+                    {{ Boolean(scope.row.pettyApproval) ? scope.row.pettyName : '暂未通过' }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="pettyReason" label="借款缘由" />
+            <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="userName" label="借款人" width="120px" />
+            <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">
+                        {{ approveResult[scope.row.pettyApproval].text }}</el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="pettyState" label="还款状态"  width="100px">
+                <template slot-scope="scope">
+                    <el-tag size="mini" :type="pettyStates[scope.row.pettyState].type">
+                        {{ pettyStates[scope.row.pettyState].text }}</el-tag>
+                </template>
+            </el-table-column> -->
+            <el-table-column label="操作" width="200px">
+                <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">驳回</el-button>
+                        <!-- <el-button type="primary" size="mini">详情</el-button> -->
+                    </el-button-group>
+                    <!-- <el-button type="text"
+                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
+                        同意
+                    </el-button>
+                    <el-button type="text"
+                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
+                        驳回
+                    </el-button>
+                    <el-button type="text"
+                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
+                        
+                    </el-button> -->
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="footer">
+            <el-pagination @current-change="getexamineRepayList" :current-page.sync="examinePageQuery.pageNum"
+                :page-size="examinePageQuery.pageSize" layout="total, prev, pager, next"
+                :total="examinePageQuery.total">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { selectUnrepay, agreeRepay } from '@/api/pettyMoney'
+import { approveResult, pettyStates } from '../pettyMoneyStaticData'
+export default {
+    props:['pettyApproval'],
+    computed: {
+        ...mapGetters([
+            'companyId',
+            'urId'
+        ]),
+    },
+    data(){
+        return {
+            examineQuery: {
+                pettyName: '',
+                pettyApproval: '',
+            },
+            examinePageQuery: {
+                pageNum: 1,
+                pageSize: 10,
+                total: 0
+            },
+            approveResult,
+            pettyStates,
+            examineList: [],
+            checkedPettyMoney: {},
+        }
+    },
+    mounted() {
+        this.getexamineRepayList()
+    },
+    methods: {
+        getexamineRepayList(isCondition) {
+            const params = {
+                ...this.examinePageQuery,
+                companyId: this.companyId
+            }
+            isCondition && Object.assign(params, this.examineQuery)
+            selectUnrepay(params).then(res => {
+                if (res.success) {
+                    const {list, total} = res.data
+                    this.examinePageQuery.total = total
+                    this.examineList = list
+                    this.$emit("setTagNumbers",{repaymentCount: total})
+                } else {
+                    this.$message.error("获取数据失败")
+                }
+            })
+        },
+        // distinguishState({ pettyApproval, pettyState }){
+        //     // pettyState: '', //状态0待还款1已还清2无需偿还
+        //     // pettyApproval: '', //0待审批1通过2驳回
+
+        //     pettyState = parseInt(pettyState)
+        //     pettyApproval = parseInt(pettyApproval)
+        //     //申请金审批未通过
+        //     if(pettyState === 0 || pettyState === 2){
+        //         return 
+        //     }
+        //     return
+        // }
+        agree(data){
+            const {repaymentId, repaymentApproval, pettyId} = data
+            const params = {
+                operationId: this.urId,
+                repaymentId,
+                repaymentApproval: 1,
+                pettyId,
+            }
+            agreeRepay(params).then(res => {
+                if (res.success) {
+                    this.getexamineRepayList()
+                } else {
+                    this.$message.error("操作失败")
+                }
+            })
+
+        }
+    }
+}
+</script>
+<style>
+.footer {
+        text-align: right;
+    }
+</style>
\ No newline at end of file

src/views/pettyMoney/examineApprove.vue

+<template>
+    <div class="main">
+        <div class="container">
+            <el-tabs tab-position="left">
+                <el-tab-pane label="备用金申请总览">
+                    <examine-petty @setTagNumbers="setTagNumbers" tag="overview"></examine-petty>
+                </el-tab-pane>
+                <el-tab-pane :lazy="true">
+                    <span slot="label" class="petty-data-simple">
+                        <span v-if="tagNumbers.approvalPending"><el-badge :value="tagNumbers.approvalPending" :max="99" class="badges">备用金待审批
+                        </el-badge></span>
+                        <span v-else>备用金待审批</span>
+                    </span>
+                    <examine-petty @setTagNumbers="setTagNumbers" tag="unapprove"></examine-petty>
+                </el-tab-pane>
+                <!-- <el-tab-pane :lazy="true">
+                    <span slot="label" class="petty-data-simple">
+                        <el-badge :value="tagNumbers.approvalPending" :max="99" class="badges">备用金已审批
+                        </el-badge>
+                    </span>
+                    <examine-petty @setTagNumbers="setTagNumbers" pettyApproval="1"></examine-petty>
+                </el-tab-pane> -->
+                <el-tab-pane :lazy="true">
+                    <span slot="label" class="petty-data-simple">
+                        <span v-if="tagNumbers.repaymentCount"><el-badge :value="tagNumbers.repaymentCount" :max="99" class="badges">还款待审批
+                        </el-badge></span>
+                        <span v-else>还款待审批</span>
+                    </span>
+                    <examine-repay @setTagNumbers="setTagNumbers"></examine-repay>
+                </el-tab-pane>
+            </el-tabs>
+
+        </div>
+    </div>
+</template>
+<script>
+import ExaminePetty from "./components/examinePetty"
+import ExamineRepay from "./components/examineRepay.vue"
+export default {
+    components: {
+        ExaminePetty,
+        ExamineRepay
+    },
+    
+    data() {
+        return {
+            tagNumbers: {
+                approvalPending: 0,
+                repaymentCount: 0
+            },
+            
+            drawerVisible: true
+
+        }
+    },
+    methods: {
+        setTagNumbers(data){
+            this.tagNumbers = {...this.tagNumbers,...data}
+        }
+    }
+    
+}
+</script>
+<style scoped lang="scss">
+.main {
+    padding: 15px;
+
+    .footer {
+        text-align: right;
+    }
+
+    .drawerHeader,
+    .drawerContainer {
+        padding: 15px 15px 0;
+    }
+}
+</style>
\ No newline at end of file

src/views/pettyMoney/pettyMoneyRecord.vue

+<template>
+    <div class="main">
+        <div class="header">
+            <el-form :inline="true" :model="pettyMoneyQuery">
+                <!-- 合同名称，合同编号，合同类型，合同性质 -->
+                <!-- <el-form-item>
+                    <el-input v-model="pettyMoneyQuery.contractName" placeholder="请选择备用金名称" />
+                </el-form-item> -->
+                <el-form-item>
+                    <el-select v-model="pettyMoneyQuery.pettyApproval" placeholder="请选择审批状态">
+                        <el-option v-for="(item, index) in approveResult" :key="index" :value="index"
+                            :label="item.text"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-select v-model="pettyMoneyQuery.pettyState" placeholder="请选择还款状态">
+                        <el-option v-for="(item, index) in pettyStates" :key="index" :value="index"
+                            :label="item.text"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" @click="getPettyMoneyList(true)">查询</el-button>
+                    <el-button type="primary" icon="el-icon-refresh-right" @click="pettyMoneyQuery = {}">重置</el-button>
+                    <!-- <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button> -->
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="container">
+            <el-table :data="pettyMoneyList" style="width: 100%;text-align: center;" border>
+                <el-table-column label="编号" width="50px">
+                    <template slot-scope="scope">
+                        {{ (pettyMoneyPageQuery.pageNum - 1) * pettyMoneyPageQuery.pageSize + scope.$index + 1 }}
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column prop="companyName" label="状态"/> -->
+                <el-table-column prop="pettyName" label="备用金名称" width="120px">
+                    <template slot-scope="scope">
+                        {{ parseInt(scope.row.pettyApproval) === 1 ? scope.row.pettyName : '暂未通过' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="pettyReason" label="借款缘由" />
+                <el-table-column prop="pettyMoney" label="借款金额" width="120px" />
+                <el-table-column prop="pettySurplus" label="待还金额" width="120px" />
+                <el-table-column prop="pettyTime" label="借款日期" width="180px" />
+                <el-table-column prop="pettyApproval" label="审批状态" width="100px">
+                    <template slot-scope="scope">
+                        <el-tag :type="approveResult[scope.row.pettyApproval].type">
+                            {{ approveResult[scope.row.pettyApproval].text }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="pettyState" label="还款状态" width="100px">
+                    <template slot-scope="scope">
+                        <el-tag size="mini" :type="pettyStates[scope.row.pettyState].type">
+                            {{ pettyStates[scope.row.pettyState].text }}</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                    <template slot-scope="scope">
+                        <el-button-group>
+                            <el-button type="success" size="mini" v-if="parseInt(scope.row.pettyApproval) === 1"
+                                @click="controlDialogDrawerVisible('agree', scope.row)">还款
+                            </el-button>
+                            <el-button type="primary" size="mini" v-if="parseInt(scope.row.pettyApproval) === 0"
+                                @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
+                                编辑</el-button>
+                            <el-button size="mini" :style="{background: '#5782df',color: '#fff',border: '1px solid #5782df'}"
+                                @click="controlDialogDrawerVisible('drawerVisible', scope.row)">
+                                详情</el-button>
+                        </el-button-group>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="footer">
+            <el-pagination @current-change="getPettyMoneyList" :current-page.sync="pettyMoneyPageQuery.pageNum"
+                :page-size="pettyMoneyPageQuery.pageSize" layout="total, prev, pager, next"
+                :total="pettyMoneyPageQuery.total">
+            </el-pagination>
+        </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 }"
+                    prop="repaymentMoney">
+                    <el-input v-model="checkedRow.repaymentMoney" placeholder="请选择备用金名称" type="number" />
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="controlDialogDrawerVisible('')">取 消</el-button>
+                <el-button type="primary" @click="repay">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-drawer :visible.sync="drawerVisible" size="50%" :with-header="false" @closed="">
+            <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, index) 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>
+        </el-drawer>
+    </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { selectSelfPettyRecord, repayMoney, repayRecordsByPettyId } from '@/api/pettyMoney'
+import { approveResult, pettyStates } from './pettyMoneyStaticData'
+import { parseTime } from '@/utils'
+export default {
+    computed: {
+        ...mapGetters([
+            'companyId',
+            'urId'
+        ]),
+    },
+    data() {
+        return {
+            pettyMoneyQuery: {},
+            pettyMoneyPageQuery: {
+                pageSize: 10,
+                pageNum: 1,
+                total: 0
+            },
+            pettyMoneyList: [],
+            approveResult,
+            pettyStates,
+            checkedRow: {},
+            dialogVisible: '',
+            drawerVisible: false,
+            repayDetailList: []
+
+        }
+    },
+    mounted() {
+        this.getPettyMoneyList()
+    },
+    methods: {
+        checkRepayMoney(rule, value, callback) {
+            if (!value) {
+                return callback(new Error('还款金额不能为空'));
+            }
+            if (value > this.checkedRow.pettySurplus) {
+                callback(new Error('超出应还款金额'));
+            } else {
+                callback();
+            }
+        },
+        getPettyMoneyList(isCondition = false) {
+            const params = {
+                ...this.pettyMoneyPageQuery,
+                companyId: this.companyId,
+                userId: this.urId
+            }
+            isCondition && Object.assign(params, this.pettyMoneyQuery)
+            selectSelfPettyRecord(params).then(res => {
+                if (res.success) {
+                    this.pettyMoneyPageQuery.total = res.data.total
+                    this.pettyMoneyList = res.data.list
+                } else {
+                    this.$message.error("获取数据失败")
+                }
+            })
+        },
+
+        controlDialogDrawerVisible(dialogVisible, data) {
+            if (dialogVisible) {
+                this.checkedRow = { ...data }
+            } else {
+                this.checkedRow = {}
+            }
+            if (dialogVisible === 'drawerVisible') {
+                this.drawerVisible = true
+                parseInt(data.pettyApproval) === 1 && this.getRepayDetailList()
+                return
+            }
+            this.dialogVisible = dialogVisible
+        },
+        getRepayDetailList() {
+            const params = {
+                pettyId: this.checkedRow.pettyId
+            }
+            repayRecordsByPettyId(params).then(res => {
+                if (res.success) {
+                    this.repayDetailList = res.data
+                } else {
+                    this.$message.error("获取还款记录失败")
+                }
+            })
+        },
+        repay() {
+            this.$refs.dialogForm.validate((valida) => {
+                if (valida) {
+                    const { pettyId, repaymentMoney } = this.checkedRow
+                    const params = {
+                        // companyId: this.companyId,
+                        operationId: this.urId,
+                        pettyId,
+                        repaymentMoney,
+                        repaymentApproval: 0,
+                        repaymentTime: parseTime(new Date()),
+                        repaymentReason: ''
+                    }
+                    repayMoney(params).then(res => {
+                        if (res.success) {
+                            this.$message.success("还款成功")
+                            this.getPettyMoneyList()
+                            this.controlDialogDrawerVisible('')
+                        } else {
+                            this.$message.error(res.msg)
+                        }
+                    })
+                }
+            })
+
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.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 {
+    text-align: right;
+}
+</style>
\ No newline at end of file

src/views/pettyMoney/pettyMoneyStaticData.js

+//申请金状态
+export const approveResult = [
+    {
+        text: '待审批',
+        type: 'info'
+    },
+    {
+        text: '通过',
+        type: 'success'
+    },
+    {
+        text: '驳回',
+        type: 'danger'
+    }
+]
+//还款状态
+export const pettyStates = [
+    {
+        text: '待还款',
+        type: 'info'
+    },
+    {
+        text: '已还清',
+        type: 'success'
+    },
+    {
+        text: '无需偿还',
+        type: 'warning'
+    }
+]
+
+
+export const addRecordRules = {
+    pettyReason:[
+        { required: true, message: '请输入借款缘由', trigger: 'blur' },
+    ],
+    pettyDetails:[
+        { required: true, message: '请输入借款详情', trigger: 'blur' },
+    ],
+    pettyMoney:[
+        { required: true, message: '请输入借款金额', trigger: 'blur' },
+    ],
+    pettyTime:[
+        { required: true, message: '请输入借款时间', trigger: 'blur' },
+    ],
+}
+
+export const staticParams = {
+    pettyId: '', //表id
+    financeId: '', //审批人
+    pettyName: '', //备用金名称
+    pettyMoney: '', //借款金额
+    pettySurplus: '', //待还金额
+    pettyReason: '', //借款缘由.
+    pettyTime: '', //借的日期
+    pettyRemarks: '', //备注
+    pettyDetails: '', //详情
+    pettyState: '', //状态0待还款1已还清2无需偿还
+    pettyEnclosure: '', //附件
+    pettyApproval: '', //0待审批1通过2驳回
+    pettyReject: '', //驳回理由，
+}
+
+export const repayParams = {
+    operationId: '',
+    pettyId: '',
+    repaymentApproval: '',
+    repaymentDetails: '',
+    repaymentEnclosure: '',
+    repaymentId: '',
+    repaymentMoney: '',
+    repaymentReason: '',
+    repaymentReject: '',
+    repaymentRemarks: '',
+    repaymentTime: ''
+  }
\ No newline at end of file