mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面秀发i

Browse Source
This commit is contained in:
zmj 2024-01-19 22:39:34 +08:00
parent cab1b44363
commit d1c21243c0
10 changed files with 1347 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/project_expense_reimbursement.ts Normal file
View File

@ -0,0 +1,26 @@
import request from '@/utils/request'
// 项目财务-费用报销列表
export function apiProjectExpenseReimbursementLists(params: any) {
return request.get({ url: '/project.project_expense_reimbursement/lists', params })
}
// 添加项目财务-费用报销
export function apiProjectExpenseReimbursementAdd(params: any) {
return request.post({ url: '/project.project_expense_reimbursement/add', params })
}
// 编辑项目财务-费用报销
export function apiProjectExpenseReimbursementEdit(params: any) {
return request.post({ url: '/project.project_expense_reimbursement/edit', params })
}
// 删除项目财务-费用报销
export function apiProjectExpenseReimbursementDelete(params: any) {
return request.post({ url: '/project.project_expense_reimbursement/delete', params })
}
// 项目财务-费用报销详情
export function apiProjectExpenseReimbursementDetail(params: any) {
return request.get({ url: '/project.project_expense_reimbursement/detail', params })
}

26
src/api/project_expense_reimbursement_detail.ts Normal file
View File

@ -0,0 +1,26 @@
import request from '@/utils/request'
// 项目财务-费用报销-报销明细列表
export function apiProjectExpenseReimbursementDetailLists(params: any) {
return request.get({ url: '/project.project_expense_reimbursement_detail/lists', params })
}
// 添加项目财务-费用报销-报销明细
export function apiProjectExpenseReimbursementDetailAdd(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_detail/add', params })
}
// 编辑项目财务-费用报销-报销明细
export function apiProjectExpenseReimbursementDetailEdit(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_detail/edit', params })
}
// 删除项目财务-费用报销-报销明细
export function apiProjectExpenseReimbursementDetailDelete(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_detail/delete', params })
}
// 项目财务-费用报销-报销明细详情
export function apiProjectExpenseReimbursementDetailDetail(params: any) {
return request.get({ url: '/project.project_expense_reimbursement_detail/detail', params })
}

26
src/api/project_expense_reimbursement_invoice_detail.ts Normal file
View File

@ -0,0 +1,26 @@
import request from '@/utils/request'
// 项目财务-费用报销-发票明细列表
export function apiProjectExpenseReimbursementInvoiceDetailLists(params: any) {
return request.get({ url: '/project.project_expense_reimbursement_invoice_detail/lists', params })
}
// 添加项目财务-费用报销-发票明细
export function apiProjectExpenseReimbursementInvoiceDetailAdd(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_invoice_detail/add', params })
}
// 编辑项目财务-费用报销-发票明细
export function apiProjectExpenseReimbursementInvoiceDetailEdit(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_invoice_detail/edit', params })
}
// 删除项目财务-费用报销-发票明细
export function apiProjectExpenseReimbursementInvoiceDetailDelete(params: any) {
return request.post({ url: '/project.project_expense_reimbursement_invoice_detail/delete', params })
}
// 项目财务-费用报销-发票明细详情
export function apiProjectExpenseReimbursementInvoiceDetailDetail(params: any) {
return request.get({ url: '/project.project_expense_reimbursement_invoice_detail/detail', params })
}

74
src/components/project_expense_reimbursement/index.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="查询" prop="name">
<el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入内容" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<div class="mt-4">
<el-table :data="pager.lists" @cell-click="handleCurrentChange">
<el-table-column label="项目id" prop="project_id" show-overflow-tooltip />
<el-table-column label="报销人" prop="apply_user" show-overflow-tooltip />
<el-table-column label="报销日期" prop="apply_date" show-overflow-tooltip />
<el-table-column label="报销类型" prop="reimbursement_type" show-overflow-tooltip />
<el-table-column label="借款单id" prop="loan_apply_id" show-overflow-tooltip />
<el-table-column label="初始报销金额" prop="reimbursement_amount" show-overflow-tooltip />
<el-table-column label="实际报销金额" prop="actual_reimbursement_amount" show-overflow-tooltip />
<el-table-column label="本次冲抵借款金额" prop="offset_loan_amount" show-overflow-tooltip />
<el-table-column label="收款人姓名" prop="payee_name" show-overflow-tooltip />
<el-table-column label="收款银行" prop="payee_bank" show-overflow-tooltip />
<el-table-column label="收款账号" prop="payee_account" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
<el-table-column label="附件" prop="annex" show-overflow-tooltip />
<el-table-column label="付款银行账户id" prop="bank_account_id" show-overflow-tooltip />
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import { usePaging } from "@/hooks/usePaging"
import { useDictData } from "@/hooks/useDictOptions"
import { apiProjectExpenseReimbursementLists } from '@/api/project_expense_reimbursement'
import { defineEmits } from "vue"
import { timeFormat } from '@/utils/util'
// 查询条件
const queryParams = reactive({
custom_name: '',
project_type: ""
});
const { dictData } = useDictData('contract_type,contract_pricing_method')
// 选中数据
const emits = defineEmits(["customEvent"]);
// 选中数据子父传递
const handleCurrentChange = (value: any) => {
emits("customEvent", value);
};
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiProjectExpenseReimbursementLists,
params: queryParams,
});
getLists();
</script>

451
src/views/project_expense_reimbursement/edit.vue Normal file
View File

@ -0,0 +1,451 @@
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="85vw" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-form-item label="项目名称" prop="project_id">
<el-input v-model="formData.project_name" clearable placeholder="点击选择" readonle
@click="showDialog = true" />
</el-form-item>
<el-form-item label="报销类型" prop="reimbursement_type">
<el-radio-group v-model="formData.reimbursement_type" class="ml-4">
<el-radio :label="item.value" size="large" v-for="item in dictData.reimbursement_type ">{{ item.name
}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="借款单号" prop="loan_apply_id">
<el-input v-model="formData.loan_apply_code" clearable placeholder="点击选择" readonly
@click="showDialog1 = true" />
</el-form-item>
<el-form-item label="冲抵借款金额" prop="offset_loan_amount">
<el-input v-model="formData.offset_loan_amount" clearable placeholder="请输入冲抵借款金额" />
</el-form-item>
<el-form-item label="报销人" prop="apply_user">
<el-input v-model="formData.apply_user" clearable placeholder="请输入报销人" />
</el-form-item>
<el-form-item label="报销日期" prop="apply_date">
<el-input v-model="formData.apply_date" clearable placeholder="请输入报销日期" />
</el-form-item>
<el-form-item label="收款人姓名" prop="payee_name">
<el-input v-model="formData.payee_name" clearable placeholder="请输入收款人姓名" />
</el-form-item>
<el-form-item label="收款银行" prop="payee_bank">
<el-input v-model="formData.payee_bank" clearable placeholder="请输入收款银行" />
</el-form-item>
<el-form-item label="收款账号" prop="payee_account">
<el-input v-model="formData.payee_account" clearable placeholder="请输入收款账号" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" clearable placeholder="请输入备注" />
</el-form-item>
<el-form-item label="附件" prop="field127">
<el-upload
accept="doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv"
class="upload-demo" :show-file-list="false" aria-hidden="true" :headers="{ Token: userStore.token }"
:action="base_url + '/upload/file'" :on-success="handleAvatarSuccess_four" ref="upload">
<el-button type="primary">
上传
</el-button>
</el-upload>
<div>
<div v-for="(item, index) in formData.annex" style="margin-left: 5px;display: block;">
<a style="margin-left: 10px; color: #4a5dff; align-self: flex-start" :href="item.uri"
target="_blank">{{ item.name }}</a>
<span style="cursor: pointer;margin-left: 5px;" @click="delFileFn(index)">x</span>
</div>
</div>
</el-form-item>
<el-form-item label="付款银行账户" prop="bank_account_id">
<el-input v-model="formData.account_name" clearable placeholder="点击选择银行" readonly
@click="showDialog2 = true" />
</el-form-item>
<el-col :span="24">
<div style="margin-bottom: 30px;">报销明细</div>
<div style="margin-bottom: 30px;">
<el-table :data="formData.reimbursement_detail">
<el-table-column label="序号">
<template #default="{ row }">
<el-button @click="handleAdd(row)" size="small">+</el-button>
<el-button @click="handleDelete(row)" size="small">-</el-button>
</template>
</el-table-column>
<el-table-column label="一级科目">
<template #default="scope">
<el-input v-model="scope.row.project_cost_temp_name" @click="openDialog1(scope)"
readonly placeholder="点击选择" />
</template>
</el-table-column>
<el-table-column label="金额">
<template #default="{ row }"> <el-input v-model="row.amount" type="number" />
</template></el-table-column>
<el-table-column label="备注" prop="remark">
<template #default="{ row }">
<el-input v-model="row.remark" />
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="24">
<div style="margin-bottom: 30px;">发票明细</div>
<div style="margin-bottom: 30px;">
<el-table :data="formData.invoice_detail">
<el-table-column label="序号">
<template #default="{ row }">
<el-button @click="handleAdd1(row)" size="small">+</el-button>
<el-button @click="handleDelete1(row)" size="small">-</el-button>
</template>
</el-table-column>
<el-table-column label="发票类型">
<template #default="{ row }">
<el-select v-model="row.invoice_type" placeholder="请选择">
<el-option :label="item.name" :value="item.value"
v-for="item in dictData.invoice_type"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="发票号">
<template #default="{ row }"> <el-input v-model="row.invoice_sn" type="number" />
</template></el-table-column>
<el-table-column label="发票税率">
<template #default="{ row }">
<el-select v-model="row.tax_rate" placeholder="请选择">
<el-option :label="item.name" :value="item.value"
v-for="item in dictData.tax_rate"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="发票形式">
<template #default="{ row }">
<el-select v-model="row.invoice_form" placeholder="请选择">
<el-option :label="item.name" :value="item.value"
v-for="item in dictData.invoice_form"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="发票金额" prop="remark">
<template #default="{ row }">
<el-input v-model="row.invoice_amount" />
</template>
</el-table-column>
<el-table-column label="发票附件" prop="remark">
<template #default="scope">
<el-upload
accept="doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv"
class="upload-demo" :show-file-list="false" aria-hidden="true"
:headers="{ Token: userStore.token }" :action="base_url + '/upload/file'"
:on-success="handleAvatarSuccess_four1" ref="upload">
<el-button type="primary" @click="invoiceIndex = scope.$index">
上传
</el-button>
</el-upload>
<div>
<div v-for="(item, index) in scope.row.annex"
style="margin-left: 5px;display: block;">
<a style="margin-left: 10px; color: #4a5dff; align-self: flex-start"
:href="item.uri" target="_blank">{{ item.name }}</a>
<span style="cursor: pointer;margin-left: 5px;"
@click="scope.row.annex.splice(index, 1)">x</span>
</div>
</div>
</template>
</el-table-column> <el-table-column label="备注" prop="remark">
<template #default="{ row }">
<el-input v-model="row.remark" />
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-form>
<el-dialog v-model="showDialog" title="选择项目" width="70%">
<project @customEvent="customEvent">
</project>
</el-dialog>
<el-dialog v-model="showDialog1" title="选择项目" width="70%">
<projectLoanApply @customEvent="customEvent1"></projectLoanApply>
</el-dialog>
<el-dialog v-model="showDialog2" title="选择账户" width="70%">
<bankaccount @customEvent="customEvent2"></bankaccount>
</el-dialog>
<el-dialog v-model="showDialog3" title="选择科目" width="70%">
<projectcostTemLists @customEvent="customEvent3"></projectcostTemLists>
</el-dialog>
</popup>
</div>
</template>
<script lang="ts" setup name="projectTravelReimbursementEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import type { PropType } from 'vue'
import { apiProjectExpenseReimbursementAdd, apiProjectExpenseReimbursementEdit, apiProjectExpenseReimbursementDetail } from '@/api/project_expense_reimbursement'
import project from "@/components/project/index.vue"
import projectLoanApply from "@/components/project_loan_apply/index.vue"
import bankaccount from "@/components/bankaccount/index.vue"
import projectcostTemLists from '@/components/projectcostTemLists/index.vue'
import configs from "@/config"
import useUserStore from "@/stores/modules/user";
const base_url = configs.baseUrl + configs.urlPrefix
const userStore = useUserStore();
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const showDialog = ref(false)
const showDialog1 = ref(false)
const showDialog2 = ref(false)
const showDialog3 = ref(false)
const customEvent = (e) => {
formData.project_id = e.id
formData.project_name = e.name
console.log(e)
showDialog.value = false
}
const customEvent1 = (e) => {
formData.loan_apply_code = e.loan_apply_code
formData.loan_apply_id = e.id
showDialog1.value = false
}
const customEvent2 = (e) => {
formData.account_name = e.account_name
formData.bank_account_id = e.id
showDialog2.value = false
console.log(e)
}
// 获取点击行的index
let rowIndex = 0
const openDialog1 = (e: any) => {
rowIndex = e.$index
showDialog3.value = true
}
const customEvent3 = (e: any) => {
formData.reimbursement_detail[rowIndex].project_cost_temp_name = e.project_type_name
formData.reimbursement_detail[rowIndex].project_cost_temp_id = e.id
showDialog3.value = false
}
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑项目财务-差旅报销' : '新增项目财务-差旅报销'
})
// 表单数据
const formData = reactive({
id: '',
project_id: "",
project_name: "",
"reimbursement_type": "1,2", //必填，报销类型
"loan_apply_id": "", //借款单id，当报销类型包含借款冲抵选项时必填
"loan_apply_code": "", //借款单id，当报销类型包含借款冲抵选项时必填
"offset_loan_amount": "50", //冲抵借款金额，当报销类型包含借款冲抵选项时必填
"apply_user": "test", //必填，报销人
"apply_date": "2024-01-18", //必填，报销日期
"payee_name": "aaa", //必填，收款人姓名
"payee_bank": "bbb", //必填，收款银行
"payee_account": "ccc", //必填，收款账号
"remark": "", //可选，备注
"annex": [], //可选，附件
"bank_account_id": "1", //必填，付款银行账户id
account_name: "",
"reimbursement_detail": [ //必填，报销明细
{
"project_cost_temp_id": "1", //必填 项目费用模板id
project_cost_temp_name: "",
"amount": "50", //必填 金额
"remark": "aaa",//选填 备注,
}
],
"invoice_detail": [ //必填，发票明细
{
"invoice_type": "1", //必填，发票类型
"invoice_sn": "FPSN-0001", //必填，发票号
"tax_rate": "1", //必填，发票税率
"invoice_form": "1", //必填，发票形式
"invoice_amount": "150", //必填，发票金额
"annex": [], //可选，发票附件
"remark": "test" //可选，备注
}
]
})
// 上传文件
const handleAvatarSuccess_four = (response: any) => {
// @ts-ignore
response.code != 0 ? formData.annex.push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
};
// 删除上传的文件
const delFileFn = (index: number) => {
formData.annex.splice(index, 1)
}
const invoiceIndex = ref(0)
// 上传文件
const handleAvatarSuccess_four1 = (response: any) => {
// @ts-ignore
response.code != 0 ? formData.invoice_detail[invoiceIndex.value].annex.push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
};
// 表单验证
const formRules = reactive<any>({
project_id: [{
required: true,
message: '请输入项目id',
trigger: ['blur']
}],
reimbursement_type: [{
required: true,
message: '请输入报销类型',
trigger: ['blur']
}],
loan_apply_id: [{
required: true,
message: '请输入借款单id',
trigger: ['blur']
}],
reimbursement_amount: [{
required: true,
message: '请输入初始报销金额',
trigger: ['blur']
}],
actual_reimbursement_amount: [{
required: true,
message: '请输入实际报销金额',
trigger: ['blur']
}],
offset_loan_amount: [{
required: true,
message: '请输入冲抵借款金额',
trigger: ['blur']
}],
apply_user: [{
required: true,
message: '请输入报销人',
trigger: ['blur']
}],
apply_date: [{
required: true,
message: '请输入报销日期',
trigger: ['blur']
}],
payee_name: [{
required: true,
message: '请输入收款人姓名',
trigger: ['blur']
}],
payee_bank: [{
required: true,
message: '请输入收款银行',
trigger: ['blur']
}],
payee_account: [{
required: true,
message: '请输入收款账号',
trigger: ['blur']
}],
bank_account_id: [{
required: true,
message: '请输入付款银行账户id',
trigger: ['blur']
}]
})
const handleAdd = (row: any) => {
// 在 row 后面插入一行数据
const index = formData.reimbursement_detail.indexOf(row);
formData.reimbursement_detail.splice(index + 1, 0, {});
};
const handleDelete = (row: any) => {
// 删除 row
if (formData.reimbursement_detail.length <= 1) return
const index = formData.reimbursement_detail.indexOf(row);
formData.reimbursement_detail.splice(index, 1);
};
const handleAdd1 = (row: any) => {
// 在 row 后面插入一行数据
const index = formData.invoice_detail.indexOf(row);
formData.invoice_detail.splice(index + 1, 0,
{
"invoice_type": "1",
"invoice_sn": "FPSN-0001",
"tax_rate": "1",
"invoice_form": "1",
"invoice_amount": "150",
"annex": [],
"remark": "test"
}
);
};
const handleDelete1 = (row: any) => {
// 删除 row
if (formData.invoice_detail.annex <= 1) return
const index = formData.invoice_detail.indexOf(row);
formData.invoice_detail.splice(index, 1);
};
// 获取详情
const setFormData = async (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiProjectExpenseReimbursementDetail({
id: row.id
})
setFormData(data)
}
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
mode.value == 'edit'
? await apiProjectExpenseReimbursementEdit(data)
: await apiProjectExpenseReimbursementAdd(data)
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = (type = 'add') => {
mode.value = type
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
})
</script>

135
src/views/project_expense_reimbursement/index.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="项目id" prop="project_id">
<el-input class="w-[280px]" v-model="queryParams.project_id" clearable placeholder="请输入项目id" />
</el-form-item>
<el-form-item label="报销人" prop="apply_user">
<el-input class="w-[280px]" v-model="queryParams.apply_user" clearable placeholder="请输入报销人" />
</el-form-item>
<el-form-item label="报销类型" prop="reimbursement_type">
<el-input class="w-[280px]" v-model="queryParams.reimbursement_type" clearable placeholder="请输入报销类型" />
</el-form-item>
<el-form-item label="收款人姓名" prop="payee_name">
<el-input class="w-[280px]" v-model="queryParams.payee_name" clearable placeholder="请输入收款人姓名" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<el-button v-perms="['project.project_expense_reimbursement/add']" type="primary" @click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button v-perms="['project.project_expense_reimbursement/delete']" :disabled="!selectData.length"
@click="handleDelete(selectData)">
删除
</el-button>
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="项目id" prop="project_id" show-overflow-tooltip />
<el-table-column label="报销人" prop="apply_user" show-overflow-tooltip />
<el-table-column label="报销日期" prop="apply_date" show-overflow-tooltip />
<el-table-column label="报销类型" prop="reimbursement_type" show-overflow-tooltip />
<el-table-column label="借款单id" prop="loan_apply_id" show-overflow-tooltip />
<el-table-column label="初始报销金额" prop="reimbursement_amount" show-overflow-tooltip />
<el-table-column label="实际报销金额" prop="actual_reimbursement_amount" show-overflow-tooltip />
<el-table-column label="本次冲抵借款金额" prop="offset_loan_amount" show-overflow-tooltip />
<el-table-column label="收款人姓名" prop="payee_name" show-overflow-tooltip />
<el-table-column label="收款银行" prop="payee_bank" show-overflow-tooltip />
<el-table-column label="收款账号" prop="payee_account" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
<el-table-column label="附件" prop="annex" show-overflow-tooltip />
<el-table-column label="付款银行账户id" prop="bank_account_id" show-overflow-tooltip />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button v-perms="['project.project_expense_reimbursement/edit']" type="primary" link
@click="handleEdit(row)">
编辑
</el-button>
<el-button v-perms="['project.project_expense_reimbursement/delete']" type="danger" link
@click="handleDelete(row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
</template>
<script lang="ts" setup name="projectExpenseReimbursementLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiProjectExpenseReimbursementLists, apiProjectExpenseReimbursementDelete } from '@/api/project_expense_reimbursement'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
// 查询条件
const queryParams = reactive({
project_id: '',
apply_user: '',
reimbursement_type: '',
payee_name: ''
})
// 选中数据
const selectData = ref<any[]>([])
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id)
}
// 获取字典数据
const { dictData } = useDictData('reimbursement_type,invoice_type,tax_rate,invoice_form')
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiProjectExpenseReimbursementLists,
params: queryParams
})
// 添加
const handleAdd = async () => {
showEdit.value = true
await nextTick()
editRef.value?.open('add')
}
// 编辑
const handleEdit = async (data: any) => {
showEdit.value = true
await nextTick()
editRef.value?.open('edit')
editRef.value?.setFormData(data)
}
// 删除
const handleDelete = async (id: number | any[]) => {
await feedback.confirm('确定要删除？')
await apiProjectExpenseReimbursementDelete({ id })
getLists()
}
getLists()
</script>

150
src/views/project_expense_reimbursement_detail/edit.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="40vw" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-form-item label="费用报销单" prop="expense_reimbursement_id">
<el-input v-model="formData.project_name" clearable placeholder="请输入费用报销单id"
@click="showDialog = true" />
</el-form-item>
<el-form-item label="项目费用模板id" prop="project_cost_temp_id">
<el-input v-model="formData.project_cost_temp_name" clearable placeholder="请选额项目费用模板" readonly
@click="showDialog3 = true" />
</el-form-item>
<el-form-item label="金额" prop="amount">
<el-input v-model="formData.amount" clearable placeholder="请输入金额" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" clearable placeholder="请输入备注" />
</el-form-item>
</el-form>
<el-dialog v-model="showDialog" title="选择报销单" width="70%">
<projectExpenseReimbursement @customEvent="customEvent"></projectExpenseReimbursement>
</el-dialog>
<el-dialog v-model="showDialog3" title="选择科目" width="70%">
<projectcostTemLists @customEvent="customEvent3"></projectcostTemLists>
</el-dialog>
</popup>
</div>
</template>
<script lang="ts" setup name="projectExpenseReimbursementDetailEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiProjectExpenseReimbursementDetailAdd, apiProjectExpenseReimbursementDetailEdit, apiProjectExpenseReimbursementDetailDetail } from '@/api/project_expense_reimbursement_detail'
import { timeFormat } from '@/utils/util'
import projectcostTemLists from '@/components/projectcostTemLists/index.vue'
import projectExpenseReimbursement from '@/components/project_expense_reimbursement/index.vue'
import type { PropType } from 'vue'
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const showDialog3 = ref(false)
const showDialog = ref(false)
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑项目财务-费用报销-报销明细' : '新增项目财务-费用报销-报销明细'
})
// 表单数据
const formData = reactive({
id: '',
expense_reimbursement_id: '',
project_name: "",
project_cost_temp_id: '',
project_cost_temp_name: "",
amount: '',
remark: '',
})
// 表单验证
const formRules = reactive<any>({
expense_reimbursement_id: [{
required: true,
message: '请输入费用报销单id',
trigger: ['blur']
}],
project_cost_temp_id: [{
required: true,
message: '请输入项目费用模板id',
trigger: ['blur']
}],
amount: [{
required: true,
message: '请输入金额',
trigger: ['blur']
}]
})
const customEvent = (e: any) => {
formData.expense_reimbursement_id = e.id
formData.project_name = e.project_name
showDialog.value = false
}
const customEvent3 = (e: any) => {
formData.project_cost_temp_name = e.project_type_name
formData.project_cost_temp_id = e.id
showDialog3.value = false
}
// 获取详情
const setFormData = async (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiProjectExpenseReimbursementDetailDetail({
id: row.id
})
setFormData(data)
}
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
mode.value == 'edit'
? await apiProjectExpenseReimbursementDetailEdit(data)
: await apiProjectExpenseReimbursementDetailAdd(data)
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = (type = 'add') => {
mode.value = type
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
})
</script>

114
src/views/project_expense_reimbursement_detail/index.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="费用报销单id" prop="expense_reimbursement_id">
<el-input class="w-[280px]" v-model="queryParams.expense_reimbursement_id" clearable
placeholder="请输入费用报销单id" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<el-button v-perms="['project.project_expense_reimbursement_detail/add']" type="primary" @click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button v-perms="['project.project_expense_reimbursement_detail/delete']" :disabled="!selectData.length"
@click="handleDelete(selectData)">
删除
</el-button>
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="费用报销单id" prop="expense_reimbursement_id" show-overflow-tooltip />
<el-table-column label="项目费用模板id" prop="project_cost_temp_id" show-overflow-tooltip />
<el-table-column label="金额" prop="amount" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button v-perms="['project.project_expense_reimbursement_detail/edit']" type="primary" link
@click="handleEdit(row)">
编辑
</el-button>
<el-button v-perms="['project.project_expense_reimbursement_detail/delete']" type="danger" link
@click="handleDelete(row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
</template>
<script lang="ts" setup name="projectExpenseReimbursementDetailLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiProjectExpenseReimbursementDetailLists, apiProjectExpenseReimbursementDetailDelete } from '@/api/project_expense_reimbursement_detail'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
// 查询条件
const queryParams = reactive({
expense_reimbursement_id: ''
})
// 选中数据
const selectData = ref<any[]>([])
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id)
}
// 获取字典数据
const { dictData } = useDictData('')
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiProjectExpenseReimbursementDetailLists,
params: queryParams
})
// 添加
const handleAdd = async () => {
showEdit.value = true
await nextTick()
editRef.value?.open('add')
}
// 编辑
const handleEdit = async (data: any) => {
showEdit.value = true
await nextTick()
editRef.value?.open('edit')
editRef.value?.setFormData(data)
}
// 删除
const handleDelete = async (id: number | any[]) => {
await feedback.confirm('确定要删除？')
await apiProjectExpenseReimbursementDetailDelete({ id })
getLists()
}
getLists()
</script>

213
src/views/project_expense_reimbursement_invoice_detail/edit.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="650px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-form-item label="费用报销单" prop="expense_reimbursement_id">
<el-input v-model="formData.project_name" clearable placeholder="请输入费用报销单id"
@click="showDialog = true" />
</el-form-item>
<el-form-item label="发票类型" prop="invoice_type">
<el-select v-model="formData.invoice_type" placeholder="请选择">
<el-option :label="item.name" :value="item.value" v-for="item in dictData.invoice_type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票号" prop="invoice_sn">
<el-input v-model="formData.invoice_sn" clearable placeholder="请输入发票号" />
</el-form-item>
<el-form-item label="发票税率" prop="tax_rate">
<el-select v-model="formData.tax_rate" placeholder="请选择">
<el-option :label="item.name" :value="item.value" v-for="item in dictData.tax_rate"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票形式" prop="invoice_form">
<el-select v-model="formData.invoice_form" placeholder="请选择">
<el-option :label="item.name" :value="item.value" v-for="item in dictData.invoice_form"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票金额" prop="invoice_amount">
<el-input v-model="formData.invoice_amount" clearable placeholder="请输入发票金额" />
</el-form-item>
<el-form-item label="发票税额" prop="tax_amount">
<el-input v-model="formData.tax_amount" clearable placeholder="请输入发票税额" />
</el-form-item>
<el-form-item label="附件" prop="field127">
<el-upload
accept="doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv"
class="upload-demo" :show-file-list="false" aria-hidden="true" :headers="{ Token: userStore.token }"
:action="base_url + '/upload/file'" :on-success="handleAvatarSuccess_four" ref="upload">
<el-button type="primary">
上传
</el-button>
</el-upload>
<div>
<div v-for="(item, index) in formData.annex" style="margin-left: 5px;display: block;">
<a style="margin-left: 10px; color: #4a5dff; align-self: flex-start" :href="item.uri"
target="_blank">{{ item.name }}</a>
<span style="cursor: pointer;margin-left: 5px;" @click="delFileFn(index)">x</span>
</div>
</div>
</el-form-item>
<el-form-item label="发票备注" prop="remark">
<el-input v-model="formData.remark" clearable placeholder="请输入发票备注" />
</el-form-item>
</el-form>
<el-dialog v-model="showDialog" title="选择报销单" width="70%">
<projectExpenseReimbursement @customEvent="customEvent"></projectExpenseReimbursement>
</el-dialog>
</popup>
</div>
</template>
<script lang="ts" setup name="projectExpenseReimbursementInvoiceDetailEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiProjectExpenseReimbursementInvoiceDetailAdd, apiProjectExpenseReimbursementInvoiceDetailEdit, apiProjectExpenseReimbursementInvoiceDetailDetail } from '@/api/project_expense_reimbursement_invoice_detail'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import projectExpenseReimbursement from '@/components/project_expense_reimbursement/index.vue'
import configs from "@/config"
import useUserStore from "@/stores/modules/user";
const base_url = configs.baseUrl + configs.urlPrefix
const userStore = useUserStore();
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const showDialog = ref(false)
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑项目财务-费用报销-发票明细' : '新增项目财务-费用报销-发票明细'
})
// 表单数据
const formData = reactive({
id: '',
expense_reimbursement_id: '',
project_name: "",
invoice_type: '',
invoice_sn: '',
tax_rate: '',
invoice_form: '',
invoice_amount: '',
tax_amount: '',
annex: [],
remark: '',
})
// 上传文件
const handleAvatarSuccess_four = (response: any) => {
// @ts-ignore
response.code != 0 ? formData.annex.push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
};
// 删除上传的文件
const delFileFn = (index: number) => {
formData.annex.splice(index, 1)
}
const customEvent = (e: any) => {
formData.expense_reimbursement_id = e.id
formData.project_name = e.project_name
showDialog.value = false
}
// 表单验证
const formRules = reactive<any>({
expense_reimbursement_id: [{
required: true,
message: '请输入费用报销单id',
trigger: ['blur']
}],
invoice_type: [{
required: true,
message: '请输入发票类型',
trigger: ['blur']
}],
invoice_sn: [{
required: true,
message: '请输入发票号',
trigger: ['blur']
}],
tax_rate: [{
required: true,
message: '请输入发票税率',
trigger: ['blur']
}],
invoice_form: [{
required: true,
message: '请输入发票形式',
trigger: ['blur']
}],
invoice_amount: [{
required: true,
message: '请输入发票金额',
trigger: ['blur']
}],
tax_amount: [{
required: true,
message: '请输入发票税额',
trigger: ['blur']
}]
})
// 获取详情
const setFormData = async (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiProjectExpenseReimbursementInvoiceDetailDetail({
id: row.id
})
setFormData(data)
}
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
mode.value == 'edit'
? await apiProjectExpenseReimbursementInvoiceDetailEdit(data)
: await apiProjectExpenseReimbursementInvoiceDetailAdd(data)
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = (type = 'add') => {
mode.value = type
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
})
</script>

132
src/views/project_expense_reimbursement_invoice_detail/index.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="费用报销单id" prop="expense_reimbursement_id">
<el-input class="w-[280px]" v-model="queryParams.expense_reimbursement_id" clearable
placeholder="请输入费用报销单id" />
</el-form-item>
<el-form-item label="发票类型" prop="invoice_type">
<el-input class="w-[280px]" v-model="queryParams.invoice_type" clearable placeholder="请输入发票类型" />
</el-form-item>
<el-form-item label="发票号" prop="invoice_sn">
<el-input class="w-[280px]" v-model="queryParams.invoice_sn" clearable placeholder="请输入发票号" />
</el-form-item>
<el-form-item label="发票形式" prop="invoice_form">
<el-input class="w-[280px]" v-model="queryParams.invoice_form" clearable placeholder="请输入发票形式" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<el-button v-perms="['project.project_expense_reimbursement_invoice_detail/add']" type="primary"
@click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button v-perms="['project.project_expense_reimbursement_invoice_detail/delete']"
:disabled="!selectData.length" @click="handleDelete(selectData)">
删除
</el-button>
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="费用报销单id" prop="expense_reimbursement_id" show-overflow-tooltip />
<el-table-column label="发票类型" prop="invoice_type" show-overflow-tooltip />
<el-table-column label="发票号" prop="invoice_sn" show-overflow-tooltip />
<el-table-column label="发票税率" prop="tax_rate" show-overflow-tooltip />
<el-table-column label="发票形式" prop="invoice_form" show-overflow-tooltip />
<el-table-column label="发票金额" prop="invoice_amount" show-overflow-tooltip />
<el-table-column label="发票税额" prop="tax_amount" show-overflow-tooltip />
<el-table-column label="发票附件" prop="annex" show-overflow-tooltip />
<el-table-column label="发票备注" prop="remark" show-overflow-tooltip />
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button v-perms="['project.project_expense_reimbursement_invoice_detail/edit']"
type="primary" link @click="handleEdit(row)">
编辑
</el-button>
<el-button v-perms="['project.project_expense_reimbursement_invoice_detail/delete']"
type="danger" link @click="handleDelete(row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
</template>
<script lang="ts" setup name="projectExpenseReimbursementInvoiceDetailLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiProjectExpenseReimbursementInvoiceDetailLists, apiProjectExpenseReimbursementInvoiceDetailDelete } from '@/api/project_expense_reimbursement_invoice_detail'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
// 查询条件
const queryParams = reactive({
expense_reimbursement_id: '',
invoice_type: '',
invoice_sn: '',
invoice_form: ''
})
// 选中数据
const selectData = ref<any[]>([])
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id)
}
// 获取字典数据
const { dictData } = useDictData('reimbursement_type,invoice_type,tax_rate,invoice_form')
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiProjectExpenseReimbursementInvoiceDetailLists,
params: queryParams
})
// 添加
const handleAdd = async () => {
showEdit.value = true
await nextTick()
editRef.value?.open('add')
}
// 编辑
const handleEdit = async (data: any) => {
showEdit.value = true
await nextTick()
editRef.value?.open('edit')
editRef.value?.setFormData(data)
}
// 删除
const handleDelete = async (id: number | any[]) => {
await feedback.confirm('确定要删除？')
await apiProjectExpenseReimbursementInvoiceDetailDelete({ id })
getLists()
}
getLists()
</script>