<template>
|
<basicContainer>
|
<avue-crud :option="option" :table-loading="pageF.loading" :data="tableData" :page="page"
|
:permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crudRef" @row-update="rowUpdate"
|
@row-save="rowSave" @refresh-change="refreshChange" @row-del="rowDel" @search-change="searchChange"
|
@search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
|
@size-change="sizeChange" @on-load="onLoad">
|
<template #menu-left>
|
<el-button type="primary" icon="Plus" v-hasPermi="['cwgl:invoiceManage:add']" @click="handleAdd">新增
|
</el-button>
|
<!-- <el-button type="success" icon="Edit" :disabled="pageF.single" v-hasPermi="['cwgl:invoiceManage:edit']"
|
@click="handleUpdate">修改1
|
</el-button> -->
|
<el-button type="danger" icon="Delete" :disabled="pageF.multiple" @click="handleDelete"
|
v-hasPermi="['cwgl:invoiceManage:remove']">删除
|
</el-button>
|
<el-button type="warning" plain icon="Download" @click="handleExport"
|
v-hasPermi="['cwgl:invoiceManage:export']">导出
|
</el-button>
|
</template>
|
<template #menu="{ size, row, index }">
|
<el-link class="link-btn" v-if="[0,3].includes(row.status)" type="primary" icon="Edit" :underline="false" plain :size="size"
|
@click="handleFy(row)" v-hasPermi="['cwgl:invoiceManage:edit']"> 修改
|
</el-link>
|
<el-link class="link-btn" v-if="[1,2].includes(row.status)" type="primary" icon="Edit" :underline="false" plain :size="size"
|
@click="lookOver(row)" v-hasPermi="['cwgl:invoiceManage:edit']"> 查看
|
</el-link>
|
<el-link class="link-btn" v-if="[0,3].includes(row.status)" type="primary" icon="Position" :underline="false" plain :size="size"
|
@click="makeInvoice(row)" v-hasPermi="['cwgl:invoiceManage:apply']"> 申请开票
|
</el-link>
|
<el-button type="text" icon="View" @click="handleFlow(row)"
|
v-hasPermi="['cwgl:invoiceManage:flow']">日志</el-button>
|
<el-button type="text" v-if="[1,2].includes(row.status)" icon="Position" @click="linkedBills(row)"
|
v-hasPermi="['cwgl:invoiceManage:flow']">关联账单</el-button>
|
<el-link type="primary" v-if="[0,3].includes(row.status)" icon="Delete" @click="deleteRow(row)"
|
v-hasPermi="['cwgl:invoiceManage:remove']">删除
|
</el-link>
|
<!-- <el-link type="primary" v-if="[2].includes(row.status)" @click="download_qr_code(row)"
|
v-hasPermi="['cwgl:invoiceManage:remove']">下载发票
|
</el-link> -->
|
|
|
</template>
|
</avue-crud>
|
</basicContainer>
|
<OperationLogModal ref="logModalRef" />
|
<InvoiceFormDialog ref="invoiceDialogRef" :title="titleInvoice" @submit="handleFinalSubmit" />
|
</template>
|
|
<script setup name="invoiceManage" lang="ts">
|
import { InvoiceManageI, addInvoiceManage, delInvoiceManage, exportInvoiceManage, getInvoiceManage, listInvoiceManage, updateInvoiceManage,
|
cwglInvoiceManageApply
|
} from "@/api/cwgl/invoiceManage";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { computed, reactive, ref, toRefs,onUnmounted } from "vue";
|
import { PagesInterface, PageQueryInterface } from "@/utils/globalInterface";
|
import { usePagePlus } from "@/hooks/usePagePlus";
|
import { hasPermission } from "@/utils/permissionUtils";
|
import InvoiceFormDialog from '@/components/InvoiceFormDialog/index'
|
import OperationLogModal from '@/components/OperationLogModal/index.vue';
|
import { listInvoiceManageLog} from "@/api/cwgl/invoiceManageLog";
|
import { getToken } from "@/utils/auth";
|
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["cwgl:invoiceManage:add"]),
|
delBtn: hasPermission(["cwgl:invoiceManage:remove"]),
|
editBtn: hasPermission(["cwgl:invoiceManage:edit"]),
|
viewBtn: hasPermission(["cwgl:invoiceManage:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <InvoiceManageI>{},
|
queryParams: <InvoiceManageI & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
titleInvoice: ''
|
|
})
|
const { queryParams, form, page, selectionList, titleInvoice } = toRefs(data);
|
const option = ref({
|
pageKey: 'InvoiceManage',
|
rowKey: 'id',
|
searchSpan: 5,
|
labelWidth: 180,
|
searchLabelWidth: 150,
|
addBtn: false,
|
viewBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column: {
|
// id: {
|
// label: '主建',
|
// },
|
// invoiceInfoId: {
|
// label: '发票抬头id',
|
// },
|
// invoiceSellerId: {
|
// label: '发票销售方id',
|
// },
|
invoiceNo: {
|
label: '发票号码',
|
search: true,
|
|
},
|
invoiceDate: {
|
label: '开票时间',
|
},
|
invoiceDateArray: {
|
label: '开票时间',
|
search: true,
|
searchRange: true,
|
type: 'daterange',
|
startPlaceholder: '开始日期',
|
endPlaceholder: '结束日期',
|
valueFormat: 'YYYY-MM-DD',
|
hide: true,
|
addDisplay: false,
|
editDisplay: false,
|
},
|
invoiceAmount: {
|
label: '发票金额',
|
},
|
invoiceCompanyName: {
|
label: '购买方名称',
|
search: true,
|
|
},
|
invoiceSellerName: {
|
label: '销售方名称',
|
search: true,
|
|
},
|
|
// customerName: {
|
// label: '客户名称',
|
// },
|
|
// invoiceSellerName: {
|
// label: '发票销售方名称',
|
// },
|
// invoiceCompanyName: {
|
// label: '抬头公司',
|
// },
|
// invoiceCreditCode: {
|
// label: '统一社会信用代码',
|
// },
|
// invoiceSellerCreditCode: {
|
// label: '销售方统一社会信用代码',
|
// },
|
// invoiceBankName: {
|
// label: '开户银行名称',
|
// },
|
// invoiceBankNo: {
|
// label: '基本开户账号',
|
// },
|
// invoiceOperatingLicenseAddress: {
|
// label: '注册场所地址',
|
// },
|
// invoiceOperatingLicensePhone: {
|
// label: '注册固定电话',
|
// },
|
// invoiceOperatingLicenseEmail: {
|
// label: '邮箱',
|
// },
|
status: {
|
label: '状态',
|
search: true,
|
minWidth: 120,
|
dataType: 'string',
|
type: 'select',
|
|
dicUrl: '/system/dict/data/type/sys_make_invoice',
|
// formatter: (row, value) => {
|
// // 自定义格式化逻辑（如果需要）
|
// return value;
|
// }
|
},
|
// createBy: {
|
// label: '创建人',
|
// },
|
// updateBy: {
|
// label: '更新人',
|
// },
|
// createTime: {
|
// label: '创建时间',
|
// },
|
// updateTime: {
|
// label: '更新时间',
|
// },
|
// invoiceType: {
|
// label: '发票类型',
|
// },
|
// enterpriseType: {
|
// label: '企业类型',
|
// },
|
}
|
})
|
|
const { tableData, pageF, rowSave, rowUpdate, rowDel, beforeOpen, searchChange,
|
searchReset, selectionChange, onLoad, currentChange, sizeChange, handleDelete, handleExport, handleUpdate, refreshChange } = usePagePlus({
|
form: form,
|
option: option,
|
queryParams: queryParams,
|
idKey: 'id',
|
page: page.value,
|
getListApi: listInvoiceManage,
|
getDetailApi: getInvoiceManage,
|
exportApi: exportInvoiceManage,
|
deleteApi: delInvoiceManage,
|
addApi: addInvoiceManage,
|
updateApi: updateInvoiceManage,
|
handleUpdateFunc: () => {
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
},
|
getBeginListFunc: (params = {}) => {
|
let newParams = { ...params };
|
newParams = proxy.addDateRangeNew(newParams, newParams?.invoiceDateArray, 'invoiceDate') || [];
|
delete newParams.invoiceDateArray;
|
queryParams.value = newParams;
|
|
return newParams
|
}
|
})
|
|
|
const invoiceDialogRef = ref(null)
|
|
const handleAdd = () => {
|
// 也可以传入初始数据
|
titleInvoice.value = '新增发票'
|
invoiceDialogRef.value.open()
|
}
|
|
const handleFinalSubmit = (data) => {
|
console.log('最终提交给API的数据:', data)
|
if(titleInvoice.value === '新增发票'){
|
|
addInvoiceManage(data).then((res) => {
|
if (res.code === 200) {
|
proxy.$message.success('添加成功');
|
invoiceDialogRef.value.handleClose()
|
onLoad(page.value);
|
}
|
})
|
}else if(titleInvoice.value === '修改发票'){
|
updateInvoiceManage(data).then((res) => {
|
if (res.code === 200) {
|
proxy.$message.success('修改成功');
|
invoiceDialogRef.value.handleClose()
|
onLoad(page.value);
|
}
|
})
|
}else if(titleInvoice.value === '关联账单'){
|
updateInvoiceManage(data).then((res) => {
|
if (res.code === 200) {
|
proxy.$message.success('关联成功');
|
invoiceDialogRef.value.handleClose()
|
onLoad(page.value);
|
}
|
})
|
}
|
}
|
const handleFy = (row) => {
|
getInvoiceManage(row.id).then((res) => {
|
if (res.code === 200) {
|
titleInvoice.value = '修改发票'
|
invoiceDialogRef.value.open(res.data)
|
|
}
|
})
|
|
}
|
const makeInvoice = (row) => {
|
proxy.$modal.confirm('是否确认申请开票号码为"' + row.invoiceNo + '"?').then(function() {
|
return cwglInvoiceManageApply(row.id);
|
}).then(() => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("申请开票成功");
|
}).catch(() => {});
|
}
|
const deleteRow = (row) => {
|
proxy.$modal.confirm('是否确认删除发票号码为"' + row.invoiceNo + '"的记录?').then(function() {
|
return delInvoiceManage(row.id);
|
}).then(() => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
}
|
/* 日志 */
|
const logModalRef = ref(null);
|
const handleFlow = (row: any) => {
|
listInvoiceManageLog({ invoiceManageId: row.id }).then((res) => {
|
if (res.code == 200) {
|
logModalRef.value.open(res.rows, 'receivable');
|
|
}
|
});
|
}
|
/* 关联账单 */
|
const linkedBills = (row) => {
|
getInvoiceManage(row.id).then((res) => {
|
if (res.code === 200) {
|
titleInvoice.value = '关联账单'
|
invoiceDialogRef.value.open(res.data)
|
|
}
|
})
|
}
|
const lookOver = (row) => {
|
getInvoiceManage(row.id).then((res) => {
|
if (res.code === 200) {
|
titleInvoice.value = '查看关联账单'
|
invoiceDialogRef.value.open(res.data)
|
|
}
|
})
|
|
}
|
|
|
const download_qr_code = (row: any) => {
|
// window.location.href = baseURL + "/common/download/resource?resource=" + encodeURI(row.url);
|
downloadFile(row.url);
|
}
|
const baseURL = import.meta.env.VITE_APP_BASE_API
|
// 创建一个点击事件触发下载
|
function downloadFile(row: any) {
|
// 文件下载地址
|
const fileUrl = baseURL + "/common/download/resource?resource=" + encodeURI(row);
|
// 设置请求头
|
const headers = new Headers();
|
headers.append('Authorization', 'Bearer ' + getToken()); // 设置授权头，替换YourAccessToken为实际的访问令牌
|
// 发起 Fetch 请求
|
fetch(fileUrl, {
|
method: 'GET',
|
headers: headers,
|
})
|
.then(response => response.blob())
|
.then(blob => {
|
// 创建一个虚拟的链接元素，模拟点击下载
|
const link = document.createElement('a');
|
link.href = window.URL.createObjectURL(blob);
|
link.download = row; // 设置下载文件名，替换filename.ext为实际的文件名和扩展名
|
document.body.appendChild(link);
|
// 模拟点击
|
link.click();
|
|
// 移除虚拟链接元素
|
document.body.removeChild(link);
|
})
|
.catch(error => console.error('下载失败：', error));
|
}
|
|
onUnmounted(() => {
|
// 在组件卸载时移除事件监听器，以避免内存泄漏
|
resizeObserver.disconnect();
|
})
|
</script>
|
