230825

src/api/ReimburseMy/index.ts

@@ -0,0 +1,11 @@
+import $http from '../index'
+// 列表 === 我的报销列表
+export const ReimburseMy_List = (params: any) => $http.post('/testapi/salary/Reimburse/User_List', params)
+
+
+//删除报销
+export const ReimburseMy_Del = (params: any) => $http.post('/testapi/salary/Reimburse/Del', params)
+
+
+
+

src/views/salary/ReimburseMy.vue

@@ -1,58 +1,65 @@
 <template>
     <div class="reimburseMy">
         <div class="reimburseMy-table">
+            <el-button type="primary" icon="Plus" style="margin-bottom: 10px;" @click="showDrawer('news')">新增报销</el-button>
             <el-table :data="data.tableData" style="width: 100%" border>
-                <el-table-column :show-overflow-tooltip="true" type="index" width="50" />
-                <el-table-column :show-overflow-tooltip="true" prop="date" label="ID" width="180" />
-                <el-table-column :show-overflow-tooltip="true" prop="address" label="报销总金额" width="180" />
-                <el-table-column :show-overflow-tooltip="true" prop="address" label="打款金额" width="180" />
-                <el-table-column :show-overflow-tooltip="true" prop="date" label="状态" width="150">
-                    <el-tag>已审核</el-tag>
-                    <el-tag>已部分打款</el-tag>
-                    <el-tag>已全部打款</el-tag>
-                    <el-tag class="ml-2" type="warning">待审核</el-tag>
-                    <el-tag class="ml-2" type="danger">未提交审核</el-tag>
+                <el-table-column :show-overflow-tooltip="true" label="序号" type="index" width="70" />
+                <!-- <el-table-column :show-overflow-tooltip="true" prop="Id" label="ID" width="180" /> -->
+                <el-table-column :show-overflow-tooltip="true" prop="T_money" label="报销总金额" width="180" />
+                <el-table-column :show-overflow-tooltip="true" prop="T_remit" label="打款金额" width="180" />
+                <el-table-column :show-overflow-tooltip="true" label="状态" width="150">
+                    <!-- 0 删除 1 未提交审核 2待审核  审核通过  审核不通过 5 已部分打款 6已全部打款 -->
+                    <template #default="scope">
+                        <el-tag v-if="scope.row.T_State == 1" class="ml-2" type="danger">未提交审核</el-tag>
+                        <el-tag v-if="scope.row.T_State == 2" class="ml-2" type="warning">待审核</el-tag>
+                        <el-tag v-if="scope.row.T_State == 3">审核通过</el-tag>
+                        <el-tag v-if="scope.row.T_State == 4" class="ml-2" type="danger">审核不通过</el-tag>
+                        <el-tag v-if="scope.row.T_State == 5" type="warning">已部分打款</el-tag>
+                        <el-tag v-if="scope.row.T_State == 6">已全部打款</el-tag>
+                    </template>
                 </el-table-column>
-                <el-table-column :show-overflow-tooltip="true" prop="name" label="提交日期" width="220" />
+                <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
                 <el-table-column label="操作" fixed="right" min-width="320">
                     <template #default="scope">
                         <el-button @click="showDrawer('det')">详情</el-button>
                         <el-button @click="showDrawer('edi')">编辑</el-button>
-                        <el-button @click="showDrawer('sub')">提交审核</el-button>
+                        <el-button @click="delReimbu(scope.row)" type="danger">删除</el-button>
+                        <el-button @click="showDrawer('sub')" type="primary">提交审核</el-button>
                     </template>
                 </el-table-column>
             </el-table>
-            <el-pagination v-model:current-page="data.currentPage4" layout="total, sizes, prev, pager, next, jumper"
-                :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            <el-pagination v-model:current-page="data.pages.page" layout="total, prev, pager, next, jumper"
+                v-model:page-size="data.pages.page_z" :total="data.total" @current-change="handleCurrentChange"
                 style="margin-top: 20px;" />
         </div>
         <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="95%">
-            <el-form :model="data.formData" label-position="top"> 
+            <el-form :model="data.formData" label-position="top">
                 <el-form-item label="报销总金额">
                     <div style="display: flex;">
                         <el-input v-model="data.formData.name" style="flex: 1;" /><span style="padding-left: 20px;">元</span>
                     </div>
                 </el-form-item>
                 <el-form-item label="报销明细">
-                    <el-table :data="data.tableData" style="width: 100%">
+                    <el-table :data="data.fromData.ReimburseDetails" style="width: 100%">
                         <el-table-column type="index" label="序号" width="70" />
                         <el-table-column label="出差地点">
-                            <el-table-column label="起" width="150">
+                            <el-table-column label="起点站" width="150">
                                 <template #default="scope">
-                                    <el-input v-model="data.value1" placeholder="起点"
+                                    <el-input v-model="scope.row.T_trip_origin" placeholder="起点"
                                         :disabled="data.disabledNum == scope.$index ? false : true" />
                                 </template>
                             </el-table-column>
-                            <el-table-column prop="city" label="止" width="150">
+                            <el-table-column prop="city" label="终点站" width="150">
                                 <template #default="scope">
-                                    <el-input v-model="data.value1" placeholder="起点"
+                                    <el-input v-model="scope.row.T_trip_terminus" placeholder="起点"
                                         :disabled="data.disabledNum == scope.$index ? false : true" />
                                 </template>
                             </el-table-column>
                         </el-table-column>
                         <el-table-column prop="address" label="出差时间起止时间" width="250">
                             <template #default="scope">
-                                <el-date-picker v-model="data.value1" type="daterange" style="width: 220px;"
+                                <el-date-picker v-model="data.value1" type="daterange" style="width: 220px;" @change="changeFun"
+                                value-format="YYYY-MM-DD"
                                     :disabled="data.disabledNum == scope.$index ? false : true" />
                             </template>
 
@@ -115,31 +122,33 @@
                     </el-table>
                     <div class="newMingxi" @click="newAdd">
                         <el-icon color="#409EFC" class="no-inherit">
-                        <Plus />
+                            <Plus />
                         </el-icon>
                         <span style="padding-left: 5px;">新增明细</span>
                     </div>
                 </el-form-item>
-                <el-form-item label="打款明细">
-                    <el-table :data="data.tableData" :header-cell-style="{background:'#f5f7fa'}" border>
+                <el-form-item label="打款明细" v-if="data.drawerTiti == '详情'">
+                    <el-table :data="data.tableData" :header-cell-style="{ background: '#f5f7fa' }" border>
                         <el-table-column type="index" label="序号" fixed width="70" />
                         <el-table-column prop="address" label="打款时间" width="300" />
                         <el-table-column prop="address" label="打款金额" />
                     </el-table>
                 </el-form-item>
             </el-form>
-            <div class="demo-drawer__footer" v-if="data.drawerTiti=='编辑'">
-                <el-button type="primary">立即提交</el-button>
+            <div class="demo-drawer__footer" v-if="data.drawerTiti != '详情'">
+                <el-button type="primary" @click="subData">立即提交</el-button>
                 <el-button @click="data.drawer = false">取消</el-button>
             </div>
         </el-drawer>
         <el-dialog v-model="dialogVisible" :draggable="true" style="width: 500px;max-height: 700px;">
-            <img :src="dialogImageUrl" style="width: 100%;height: auto;object-fit: contain;"/>
+            <img :src="dialogImageUrl" style="width: 100%;height: auto;object-fit: contain;" />
         </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
+import { ReimburseMy_List, ReimburseMy_Del } from '@/api/ReimburseMy/index'
 import { reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from 'element-plus'
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const options = [
@@ -165,38 +174,46 @@ const options = [
     },
 ]
 const data = reactive({
+    pages: {
+        page: 1,
+        page_z: 10
+    },
     fileList: [],
+    total: 0,//列表总页码
     disabledNum: 0,
-    value1: null,
+    value1: '2023-08-10',
     formData: {
         name: ''
     },
     drawer: false,
     drawerTiti: '',
-    currentPage4: 4,
-    tableData: [
-        {
-            date: '2016-05-03',
-            name: '2016-05-03 12:13:00',
-            address: '3000',
-        },
-        {
-            date: '2016-05-02',
-            name: '2016-05-03 12:13:00',
-            address: '6000',
-        },
-        {
-            date: '2016-05-04',
-            name: '2016-05-03 12:13:00',
-            address: '99999999',
-        },
-        {
-            date: '2016-05-01',
-            name: '2016-05-03 12:13:00',
-            address: '10',
-        },
-    ]
+    tableData: [],
+    fromData:{
+        T_money: 0,
+        ReimburseDetails: [{
+            "T_trip_start_time": "2023-08-24",
+            "T_trip_end_time": "2023-08-25",
+            "T_trip_origin": "贵阳",
+            "T_trip_terminus": "毕节1",
+            "T_fee_type": 1,
+            "T_fee_details": 2,
+            "T_money": 100,
+            "T_reasons": "费用事由",
+            "T_project": "涉及项目",
+            "T_img": ""
+        }]
+    }
 })
+const changeFun = (e:any)=>{
+    console.log('s',e)
+}
+const ReimburseMyListApi = async () => {
+    const res: any = await ReimburseMy_List(data.pages)
+    data.tableData = res.Data.Data
+    data.total = res.Data.Num
+
+}
+ReimburseMyListApi()
 
 const handleRemove = (r: any) => {
     console.log('删除', r)
@@ -207,17 +224,39 @@ const handlePictureCardPreview = (uploadFile: any) => {
     dialogImageUrl.value = uploadFile.url!
     dialogVisible.value = true
 }
-
-
-const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
+const subData = ()=>{
+console.log( data.fromData.ReimburseDetails)
+}
+//删除报销列表
+const delReimbu = (data: any) => {
+    console.log('删除', data)
+    ElMessageBox.confirm('删除报销，是否继续?','提示',{
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        center: true,
+    }).then( async () => {
+        const res:any = await ReimburseMy_Del({T_id:data.Id})
+        console.log('返回',res)
+        if(res.Code==200){
+            ElMessage.success('已删除报销')
+        }
+    }).catch(() => {
+        ElMessage.info('已取消删除报销')
+    })
 }
+//分页
 const handleCurrentChange = (val: number) => {
-    console.log(`current page: ${val}`)
+    data.pages.page = val
+    ReimburseMyListApi()
 }
 //显示弹窗
 const showDrawer = (e: string) => {
     switch (e) {
+        case 'news':
+            data.drawer = true
+            data.drawerTiti = '新增'
+            break;
         case 'det':
             data.drawer = true
             data.drawerTiti = '详情'
@@ -242,10 +281,17 @@ const EditFun = (e: any) => {
 }
 //添加任务
 const newAdd = () => {
-    data.tableData.push({
-        date: '',
-        name: '',
-        address: '',
+    data.fromData.ReimburseDetails.push({
+        T_trip_start_time: "2023-08-24",
+        T_trip_end_time: "2023-08-25",
+        T_trip_origin: "贵阳",
+        T_trip_terminus: "毕节2",
+        T_fee_type: 1,
+        T_fee_details: 2,
+        T_money: 100,
+        T_reasons: "费用事由",
+        T_project: "涉及项目",
+        T_img: ""
     })
     data.disabledNum = data.tableData.length - 1
 }
@@ -258,15 +304,16 @@ const newDel = (e: any) => {
 </script>
 <style lang="scss">
 .newMingxi {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #409EFC;
-  cursor: pointer;
-  line-height: 0;
-  padding: 10px 0 2px 0;
-  color: #409EFC;
-  user-select: none;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #409EFC;
+    cursor: pointer;
+    line-height: 0;
+    padding: 10px 0 2px 0;
+    color: #409EFC;
+    user-select: none;
 }
+
 .reimburseMy {
     &-table {
         padding: 20px;
@@ -310,5 +357,4 @@ const newDel = (e: any) => {
     line-height: 50px;
     font-size: 16px;
 }
-
 </style>