497 lines
17 KiB
Vue
497 lines
17 KiB
Vue
<template>
|
||
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
|
||
<el-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="formRules"
|
||
label-width="160px"
|
||
v-loading="formLoading"
|
||
>
|
||
<!-- 基础信息 横向布局 -->
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
|
||
</template>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="发票号码" prop="number">
|
||
<el-input :disabled="detailDisabled" class="!w-260px" v-model="formData.number" placeholder="请输入发票号码" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="开票日期" prop="billingDate">
|
||
<el-date-picker
|
||
:disabled="detailDisabled"
|
||
v-model="formData.billingDate"
|
||
type="date"
|
||
value-format="x"
|
||
class="!w-260px"
|
||
placeholder="选择开票日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="发票金额" prop="amount">
|
||
<el-input-number :disabled="detailDisabled" class="!w-260px" :precision="2" :min="0" v-model="formData.amount" placeholder="请输入发票金额" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="发票类型" prop="type">
|
||
<el-select :disabled="detailDisabled" class="!w-260px" v-model="formData.type" placeholder="请选择发票类型">
|
||
<el-option
|
||
v-for="dict in getStrDictOptions(DICT_TYPE.HELI_INVOICE_TYPE)"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="税率（%）" prop="rate">
|
||
<el-input-number :disabled="detailDisabled" class="!w-260px" :precision="0" :min="0" v-model="formData.rate" placeholder="请输入税率" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="对应订单" prop="orderId">
|
||
<el-input disabledclass="!w-260px" v-model="formData.orderCode" readonly>
|
||
<!-- <template #append><el-button disabled :icon="Search" /></template>-->
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="16">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input :disabled="detailDisabled" type="textarea" v-model="formData.remark" show-word-limit maxlength="200" placeholder="请输入备注"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 表格类信息 -->
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">附件信息</span>
|
||
</template>
|
||
<el-row>
|
||
<el-col>
|
||
<el-card class="hl-incard">
|
||
<el-col v-if="active != 'detail'">
|
||
<el-upload
|
||
ref="uploadRef" :file-list="uploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :on-success="handleAvatarSuccess" :data="uploadData" :on-change="uploadChange" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传
|
||
</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
<el-table :key="tableKey" :data="formData.attachments" v-loading.fullscreen.lock="uploading" element-loading-text="附件上传中..." element-loading-background="rgba(122, 122, 122, 0.6)" class="hl-table">
|
||
<el-table-column fixed type="index" width="100" label="序号" align="center" />
|
||
<el-table-column prop="name" label="文件名称" align="center" />
|
||
<el-table-column prop="createTime" align="center" label="上传时间" :formatter="dateFormatter" />
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<el-button v-if="active != 'detail'" link type="danger" size="small" @click="handleDeleteAttachment(scope.$index)">
|
||
删除
|
||
</el-button>
|
||
<el-button v-if="!!scope.row.id" link type="primary" size="small" @click="downloadAttachment(scope.row.name, scope.row.url)">
|
||
下载
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-form>
|
||
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">开票信息</span>
|
||
<el-button type="primary" size="large" @click="submitForm" style="margin-left: 30px">保存</el-button>
|
||
<el-button @click="resetForm"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||
|
||
</template>
|
||
<el-row>
|
||
<el-col>
|
||
<el-card class="hl-incard">
|
||
<el-form ref="OrderYsDetailSubFormRef" :model="list" label-width="0" v-loading="loading1">
|
||
<el-table :data="list" class="hl-table" @row-click="rowClick" >
|
||
<el-table-column type="index" label="序号" align="center" min-width="60" fixed />
|
||
<el-table-column label="发票号码" align="center" prop="number" />
|
||
<el-table-column
|
||
fixed
|
||
label="开票日期"
|
||
align="center"
|
||
prop="billingDate"
|
||
:formatter="dateFormatter2"
|
||
width="140"
|
||
/>
|
||
<el-table-column label="发票金额" align="center" prop="amount" />
|
||
<el-table-column label="发票类型" align="center" prop="type" >
|
||
<template #default="scope">
|
||
<dict-tag :type="DICT_TYPE.HELI_INVOICE_TYPE" :value="scope.row.type" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="税率(%)" align="center" prop="rate" />
|
||
<el-table-column label="订单" align="center" prop="orderCode" />
|
||
<el-table-column label="备注" align="center" prop="remark" />
|
||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
||
<template #default="scope">
|
||
<el-button link type="danger" size="small" @click.prevent="handleDelete(scope.row.id)">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<Pagination
|
||
:total="total"
|
||
v-model:page="queryParams.pageNo"
|
||
v-model:limit="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<template #footer>
|
||
<!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->
|
||
<el-button @click="emits">取 消</el-button>
|
||
</template>
|
||
</Dialog>
|
||
<ProjectDialog v-if="businessType == 'FINANCE_MAKE_INVOICE'" ref="orderDialog" @success="handleSelectedOrder" />
|
||
<PurchaseDialog v-if="businessType == 'FINANCE_RECEIVE_INVOICE'" ref="orderDialog" @success="handleSelectedPurchaseOrder" />
|
||
|
||
</template>
|
||
<script setup lang="ts">
|
||
import {inject, ref} from 'vue'
|
||
import * as InvoiceApi from '@/api/heli/invoice'
|
||
import {useCommonStore} from '@/store/modules/common'
|
||
import {getAccessToken, getTenantId} from '@/utils/auth'
|
||
import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
|
||
import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
|
||
import {UploadUserFile} from 'element-plus'
|
||
import {deleteFileLogic, downloadFile, getFilePage} from '@/api/infra/file'
|
||
import download from '@/utils/download'
|
||
import ProjectDialog from "@/views/heli/invoice/projectDialog.vue"
|
||
import PurchaseDialog from "@/views/heli/invoice/purchaseDialog.vue"
|
||
import type { UploadProps } from 'element-plus'
|
||
import {getList} from "@/api/heli/saleordercost";
|
||
import {getInvoicePages} from "@/api/heli/invoice";
|
||
import * as OrderYsApi from "@/api/heli/orderys";
|
||
|
||
const loading1 = ref(true) // 列表的加载中
|
||
|
||
const list = ref([]) // 列表的数据
|
||
const total = ref(0) // 列表的总页数
|
||
// defineOptions({ name: 'InvoiceDetail' })
|
||
const reload: any = inject('reload')
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
const commonStore = useCommonStore()
|
||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||
|
||
const active = toRef(commonStore.getStore('active'))
|
||
const currentId = toRef(commonStore.getStore('id'))
|
||
const businessType = toRef(commonStore.getStore('businessType'))
|
||
|
||
const formLoading = ref(false)
|
||
const flag = ref(true)
|
||
|
||
const dialogTitle = ref('')
|
||
const detailDisabled = ref(false)
|
||
const queryParams = reactive({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
createTime: [],
|
||
id:undefined,
|
||
type:undefined,
|
||
})
|
||
const formData: any = ref({
|
||
id: undefined,
|
||
businessType: "FINANCE_MAKE_INVOICE",
|
||
orderId: undefined,
|
||
number: undefined,
|
||
type: "2",
|
||
billingDate: undefined,
|
||
amount: undefined,
|
||
rate: 13,
|
||
remark: undefined,
|
||
submitter: undefined,
|
||
submitTime: undefined,
|
||
canceller: undefined,
|
||
cancelTime: undefined,
|
||
status: 1,
|
||
attachments: [],
|
||
active: undefined,
|
||
activeOpinion: ''
|
||
})
|
||
const tableKey = ref(0);
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const detailId = ref()
|
||
const projectCodes = ref()
|
||
const projectIds = ref()
|
||
|
||
const formRef = ref() // 表单 Ref
|
||
const formRules = reactive({
|
||
orderId: [{ required: true, message: '对应订单不能为空', trigger: 'blur' }],
|
||
number: [{ required: true, message: '发票号码不能为空', trigger: 'blur' }],
|
||
type: [{ required: true, message: '发票类型不能为空', trigger: 'change' }],
|
||
billingDate: [{ required: true, message: '开票日期不能为空', trigger: 'blur' }],
|
||
amount: [{ required: true, message: '发票金额不能为空', trigger: 'blur' }],
|
||
rate: [{ required: true, message: '税率不能为空', trigger: 'blur' }],
|
||
})
|
||
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
id: undefined,
|
||
businessType: "FINANCE_MAKE_INVOICE",
|
||
number: undefined,
|
||
type:"2",
|
||
billingDate: undefined,
|
||
amount: undefined,
|
||
rate: 13,
|
||
remark: undefined,
|
||
submitter: undefined,
|
||
submitTime: undefined,
|
||
canceller: undefined,
|
||
cancelTime: undefined,
|
||
status: 1,
|
||
attachments: [],
|
||
active: undefined,
|
||
activeOpinion: '',
|
||
orderId:projectIds.value,
|
||
orderCode:projectCodes.value
|
||
}
|
||
|
||
// formRef.value?.resetFields()
|
||
}
|
||
const getList = async (id) => {
|
||
queryParams.id=id
|
||
queryParams.type="FINANCE_MAKE_INVOICE"
|
||
loading1.value = true
|
||
try {
|
||
const data=await InvoiceApi.getInvoicePages(queryParams)
|
||
list.value = data.list
|
||
total.value = data.total
|
||
flag.value=true
|
||
} finally {
|
||
loading1.value = false
|
||
}
|
||
}
|
||
const emits = async () => {
|
||
dialogVisible.value = false
|
||
emit('success')
|
||
|
||
}
|
||
const queryData = async (id?: number) => {
|
||
resetForm()
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
formLoading.value = true
|
||
try {
|
||
formData.value = await InvoiceApi.getInvoice(id, "FINANCE_MAKE_INVOICE")
|
||
// 附件信息
|
||
let attParams = {
|
||
pageNo: 1,
|
||
pageSize: 99,
|
||
businessId: id,
|
||
businessType: "FINANCE_MAKE_INVOICE",
|
||
businessFileType:"FINANCE_MAKE_INVOICE"
|
||
}
|
||
formData.value.attachments = (await getFilePage(attParams)).list
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
}
|
||
/** 处理某一行的点击 */
|
||
const rowClick = async (row) => {
|
||
queryData(row.id)
|
||
}
|
||
const submitForm = async () => {
|
||
formData.value.active = "SAVE"
|
||
// 校验表单
|
||
await formRef.value.validate()
|
||
// 提交请求
|
||
formLoading.value = true
|
||
try {
|
||
formData.value.cgOrderIdId=detailId.value
|
||
const data = formData.value as unknown as InvoiceApi.InvoiceVO
|
||
let dataId = await InvoiceApi.operateInvoice(data)
|
||
|
||
// 上传附件
|
||
if (uploadFiles.value.length > 0) {
|
||
flag.value=false
|
||
uploadData.value.businessId = dataId
|
||
await uploadRef.value!.submit()
|
||
message.success(t('common.operationSuccess'))
|
||
let jumpActive = 'update'
|
||
commonStore.setStore('id', dataId)
|
||
commonStore.setStore('active', jumpActive)
|
||
commonStore.setStore('businessType', "FINANCE_MAKE_INVOICE")
|
||
uploadFiles.value=[]
|
||
resetForm();
|
||
getList(detailId.value)
|
||
}else{
|
||
message.success(t('common.operationSuccess'))
|
||
let jumpActive = 'update'
|
||
commonStore.setStore('id', dataId)
|
||
commonStore.setStore('active', jumpActive)
|
||
commonStore.setStore('businessType', "FINANCE_MAKE_INVOICE")
|
||
resetForm();
|
||
getList(detailId.value)
|
||
}
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// ====================附件信息 开始=======================================
|
||
const uploading = ref(false)
|
||
const uploadUrl = ref(import.meta.env.VITE_UPLOAD_BATCH_URL)
|
||
const uploadRef = ref()
|
||
const uploadFiles = ref<UploadUserFile[]>([])
|
||
const uploadData = ref({
|
||
businessType: "FINANCE_MAKE_INVOICE",
|
||
businessId: formData.value.id,
|
||
businessFileType:"FINANCE_MAKE_INVOICE"
|
||
})
|
||
const handleAvatarSuccess: UploadProps['onSuccess'] = async (
|
||
response,
|
||
uploadFile
|
||
) => {
|
||
let attParams = {
|
||
pageNo: 1,
|
||
pageSize: 99,
|
||
businessId: null,
|
||
businessType: "FINANCE_MAKE_INVOICE",
|
||
businessFileType:"FINANCE_MAKE_INVOICE"
|
||
}
|
||
uploading.value = true;
|
||
// formData.value.attachments = (await getFilePage(attParams)).list
|
||
// await reload()
|
||
// formData.value.attachments=[]
|
||
|
||
uploading.value = false;
|
||
|
||
}
|
||
|
||
// 下载文件
|
||
const downloadAttachment = async (name, url) => {
|
||
const baseUrl = import.meta.env.VITE_BASE_URL;
|
||
url =baseUrl+'/admin-api/'+ url.split('/admin-api/')[1]; const data = await downloadFile(url)
|
||
download.any(data, name)
|
||
}
|
||
|
||
const uploadChange = (file, files) => {
|
||
uploadFiles.value = files
|
||
refreshAttachments(files)
|
||
}
|
||
|
||
|
||
const open = async (id?: number,projectId,projectCode) => {
|
||
resetForm()
|
||
dialogVisible.value = true
|
||
detailId.value=id
|
||
projectIds.value=projectId
|
||
projectCodes.value=projectCode
|
||
formData.value.orderId = projectId
|
||
formData.value.orderCode = projectCode
|
||
formData.value.cgOrderIdId=id
|
||
uploadFiles.value=[]
|
||
getList(id)
|
||
|
||
}
|
||
/** 删除按钮操作 */
|
||
const handleDelete = async (id: number) => {
|
||
try {
|
||
// 删除的二次确认
|
||
await message.delConfirm()
|
||
// 发起删除
|
||
await InvoiceApi.deleteInvoice(id)
|
||
message.success(t('common.delSuccess'))
|
||
resetForm()
|
||
// 刷新列表
|
||
await getList(detailId.value)
|
||
} catch {}
|
||
}
|
||
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
|
||
const refreshAttachments = (files) => {
|
||
if (flag.value){
|
||
formData.value.attachments = formData.value.attachments.filter((value, index, array) => {
|
||
return value.id
|
||
})
|
||
for (let i = 0; i < files.length; i++) {
|
||
let file = files[i]
|
||
file.createTime = new Date()
|
||
console.log(file)
|
||
formData.value.attachments.push(file)
|
||
}
|
||
// 排序
|
||
formData.value.attachments.sort((v1, v2) => v1.createTime - v2.createTime)
|
||
}
|
||
}
|
||
|
||
// 删除附件
|
||
const handleDeleteAttachment = async (index) => {
|
||
const deletedAttachments = formData.value.attachments.splice(index, 1)
|
||
for (let i = 0; i < deletedAttachments.length; i++) {
|
||
const attachment = deletedAttachments[i]
|
||
if (attachment.id) {
|
||
// 清理已上传文件
|
||
await deleteFileLogic(attachment.id)
|
||
}
|
||
// 清理待上传文件
|
||
uploadFiles.value = uploadFiles.value.filter((file1) => {
|
||
return file1.name != attachment.name
|
||
})
|
||
}
|
||
}
|
||
|
||
const orderDialog = ref()
|
||
// const openOrderDialog = () => {
|
||
// orderDialog.value?.open()
|
||
// }
|
||
|
||
const handleSelectedOrder = (order) => {
|
||
|
||
formData.value.orderId = order.id
|
||
formData.value.orderCode = order.code
|
||
}
|
||
|
||
const handleSelectedPurchaseOrder = (order) => {
|
||
|
||
formData.value.orderId = order.id
|
||
formData.value.orderCode = order.purchaseNo
|
||
}
|
||
|
||
// onMounted(() => {
|
||
// dialogTitle.value = t('action.' + active.value)
|
||
// if ('detail' == active.value) {
|
||
// detailDisabled.value = true
|
||
// }
|
||
// queryData(currentId.value)
|
||
// })
|
||
</script>
|
||
<style scoped>
|
||
.upload-file-uploader {
|
||
margin-bottom: 10px;
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
}
|
||
</style>
|
||
|