|
|
@@ -0,0 +1,238 @@
|
|
|
+<template>
|
|
|
+ <div class="reimburseMy">
|
|
|
+ <div class="reimburseMy-table">
|
|
|
+ <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>
|
|
|
+ <el-table-column :show-overflow-tooltip="true" prop="name" 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>
|
|
|
+ </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"
|
|
|
+ style="margin-top: 20px;" />
|
|
|
+ </div>
|
|
|
+ <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="90%">
|
|
|
+
|
|
|
+ <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-column type="index" label="序号" width="70" />
|
|
|
+ <el-table-column label="出差地点">
|
|
|
+ <el-table-column label="起" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="data.value1" placeholder="起点"
|
|
|
+ :disabled="data.disabledNum == scope.$index ? false : true" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="止" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="data.value1" 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;"
|
|
|
+ :disabled="data.disabledNum == scope.$index ? false : true" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="address" label="费用类型" width="150">
|
|
|
+
|
|
|
+ <template #default="scope">
|
|
|
+ <el-select v-model="data.value1" class="m-2" placeholder="费用类型" size="large"
|
|
|
+ :disabled="data.disabledNum == scope.$index ? false : true">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="费用明细" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-select v-model="data.value1" class="m-2" placeholder="费用明细" size="large"
|
|
|
+ :disabled="data.disabledNum == scope.$index ? false : true">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="费用金额" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="data.value1" placeholder="费用金额" :disabled="data.disabledNum == scope.$index ? false : true" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="费用事由" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="data.value1" placeholder="费用事由" :disabled="data.disabledNum == scope.$index ? false : true" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="涉及项目" width="150">
|
|
|
+
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="data.value1" placeholder="涉及项目" :disabled="data.disabledNum == scope.$index ? false : true" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="address" label="附件" width="150" />
|
|
|
+ <el-table-column prop="address" fixed="right" width="300">
|
|
|
+ <template #header>
|
|
|
+ <el-button type="danger" @click="newAdd">新增明细</el-button>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" @click="EditFun(scope)">编辑</el-button>
|
|
|
+ <el-button @click="newDel(scope)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="打款明细">
|
|
|
+ <el-table :data="data.tableData" style="width: 30%" border>
|
|
|
+ <el-table-column type="index" label="序号" fixed width="60" />
|
|
|
+ <el-table-column prop="address" label="打款时间" />
|
|
|
+ <el-table-column prop="address" label="打款金额" />
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="demo-drawer__footer">
|
|
|
+ <el-button type="primary">立即提交</el-button>
|
|
|
+ <el-button @click="data.drawer = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive } from "vue";
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+]
|
|
|
+const data = reactive({
|
|
|
+ disabledNum: 0,
|
|
|
+ value1: null,
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+})
|
|
|
+const handleSizeChange = (val: number) => {
|
|
|
+ console.log(`${val} items per page`)
|
|
|
+}
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ console.log(`current page: ${val}`)
|
|
|
+}
|
|
|
+//显示弹窗
|
|
|
+const showDrawer = (e: string) => {
|
|
|
+ switch (e) {
|
|
|
+ case 'det':
|
|
|
+ data.drawer = true
|
|
|
+ data.drawerTiti = '详情'
|
|
|
+ break;
|
|
|
+ case 'edi':
|
|
|
+ data.drawer = true
|
|
|
+ data.drawerTiti = '编辑'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ console.log('提交审核')
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+//关闭弹窗
|
|
|
+const handleClose = () => {
|
|
|
+ data.drawer = false
|
|
|
+}
|
|
|
+//点击了编辑
|
|
|
+const EditFun = (e:any)=>{
|
|
|
+ data.disabledNum = e.$index
|
|
|
+}
|
|
|
+//添加任务
|
|
|
+const newAdd = () => {
|
|
|
+ data.tableData.push({
|
|
|
+ date: '',
|
|
|
+ name: '',
|
|
|
+ address: '',
|
|
|
+ })
|
|
|
+ data.disabledNum = data.tableData.length-1
|
|
|
+}
|
|
|
+//删除任务
|
|
|
+const newDel = (e: any) => {
|
|
|
+
|
|
|
+ data.tableData.splice(e.$index, 1)
|
|
|
+ console.log('e', data.tableData)
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.reimburseMy {
|
|
|
+ &-table {
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid var(--el-card-border-color);
|
|
|
+ box-shadow: var(--el-box-shadow-light);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+}</style>
|
YangJian0701