|
|
@@ -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>
|
YangJian0701