<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="销售日期">
|
<el-date-picker
|
v-model="queryParams.saleDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable
|
style="width: 100%"
|
placeholder="请选择日期"
|
/>
|
</el-form-item>
|
<el-form-item label="煤种">
|
<el-input
|
v-model="queryParams.coal"
|
placeholder="请输入煤种"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-card>
|
<!-- 标签页 -->
|
<el-tabs v-model="activeTab" class="info-tabs">
|
<el-tab-pane
|
v-for="tab in tabs"
|
:key="tab.name"
|
:label="tab.label"
|
:name="tab.name"
|
/>
|
</el-tabs>
|
<!-- 操作按钮区 -->
|
<el-space>
|
<el-button type="primary" @click="openForm('add')">新增应收</el-button>
|
<el-button type="primary" :icon="Plus" @click="openDia(undefined, 'add')">新建</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
|
<el-button type="info" plain :icon="Download" @click="handleExport">导出</el-button>
|
</el-space>
|
<!-- 表格组件 -->
|
<div>
|
<ETable :loading="tableLoading"
|
:table-data="tableData"
|
:columns="columns"
|
@selection-change="handleSelectionChange"
|
:show-selection="true"
|
:border="true"
|
:operations="operationsArr"
|
style="width: 100%;height: calc(100vh - 30em)"
|
@edit="(row) => openDia(row, 'edit')"
|
@viewRow="(row) => openDia(row, 'view')"
|
></ETable>
|
</div>
|
<pagination
|
v-if="total>0"
|
:page="pageNum"
|
:limit="pageSize"
|
:total="total"
|
@pagination="handlePagination"
|
:layout="'total, prev, pager, next, jumper'"
|
/>
|
</el-card>
|
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
|
|
<!-- 新增应收弹窗 -->
|
<el-dialog
|
v-model="dialogFormVisible"
|
title="新增应收"
|
width="70%"
|
@close="closeDia"
|
>
|
<el-form
|
:model="former"
|
label-width="140px"
|
label-position="top"
|
:rules="rules"
|
ref="formRef"
|
>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="客户名称：" prop="customer">
|
<el-input
|
v-model="former.customer"
|
placeholder="自动填充"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="煤种：" prop="coal">
|
<el-input
|
v-model="former.coal"
|
placeholder="自动填充"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="销售总金额(元)：" prop="totalAmount">
|
<el-input
|
type="number"
|
v-model="former.totalAmount"
|
placeholder="自动填充"
|
:step="0.01"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="本次应收金额：" prop="receiptPaymentAmount">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
:precision="2"
|
v-model="former.receiptPaymentAmount"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="回款形式：" prop="receiptPaymentType">
|
<el-select
|
v-model="former.receiptPaymentType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="item in receipt_payment_type"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="登记人：" prop="registrant">
|
<el-input
|
v-model="former.registrant"
|
placeholder="请输入"
|
clearable
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="来款日期：" prop="receiptPaymentDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="former.receiptPaymentDate"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, reactive, onMounted, nextTick} from "vue";
|
const { proxy } = getCurrentInstance()
|
const { receipt_payment_type } = proxy.useDict("receipt_payment_type");
|
import {Delete, Download, Plus} from "@element-plus/icons-vue";
|
import { ElMessage } from "element-plus";
|
import ETable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
import FormDia from "@/views/salesOutbound/components/formDia.vue";
|
import {delSalesRecord, salesRecordList} from "@/api/salesOutbound/index.js";
|
import {
|
receiptPaymentSaveOrUpdate,
|
bindInvoiceNoRegPage,
|
invoiceInfo,
|
receiptPaymentHistoryListNoPage,
|
receiptPaymentDel,
|
} from "@/api/salesManagement/receiptPayment.js";
|
|
|
const formDia = ref()
|
const activeTab = ref("out");
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "out", label: "销售出库" },
|
]);
|
// 表格数据
|
const operationsArr = ref(['edit', 'viewRow']);
|
const tableLoading = ref(false);
|
const dialogFormVisible = ref(false);
|
const tableData = ref([]);
|
const columns = ref([
|
{ prop: "saleDate", label: "销售日期", minWidth: 160 },
|
{ prop: "customer", label: "客户", minWidth: 120 },
|
{ prop: "coal", label: "煤种", minWidth: 150 },
|
{ prop: "unit", label: "单位", minWidth: 150 },
|
{ prop: "priceIncludingTax", label: "单价(含税)", minWidth: 150 },
|
{ prop: "inventoryQuantity", label: "库存数量", minWidth: 120 },
|
{ prop: "saleQuantity", label: "销售数量", minWidth: 120 },
|
{ prop: "salePrice", label: "销售单价(含税)", minWidth: 150 },
|
{ prop: "totalAmount", label: "销售总价(含税)", minWidth: 120 },
|
{ prop: "salesFreight", label: "销售运费", minWidth: 90 },
|
{ prop: "purchasingFreight", label: "采购运费", minWidth: 90 },
|
{ prop: "taxCoal", label: "购销煤税率(%)", minWidth: 120 },
|
{ prop: "taxTrans", label: "运输税率(%)", minWidth: 120 },
|
{ prop: "grossProfit", label: "毛利润", minWidth: 90 },
|
{ prop: "netProfit", label: "净利润", minWidth: 90 },
|
{ prop: "registrant", label: "登记人", minWidth: 100 },
|
{ prop: "registrationDate", label: "登记日期", minWidth: 100 },
|
]);
|
const selectedRows = ref([]);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const former = ref({})
|
|
// 查询参数
|
const queryParams = reactive({
|
saleDate: "",
|
coal: "",
|
})
|
onMounted(() => {
|
handleQuery()
|
});
|
// 点击查询
|
const handleQuery = () => {
|
pageNum.value = 1
|
pageSize.value = 10
|
getList()
|
}
|
const getList = () => {
|
tableLoading.value = true;
|
salesRecordList({...queryParams, current: pageNum.value, size: pageSize.value}).then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
total.value = res.data.total;
|
})
|
}
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
// 分页处理
|
const handlePagination = (val) => {
|
pageNum.value = val.page;
|
pageSize.value = val.limit;
|
getList();
|
};
|
// 新增出库
|
const openDia = (row, type) => {
|
console.log(row)
|
nextTick(() => {
|
formDia.value?.openDialog(type, row)
|
})
|
};
|
// 删除出库
|
const handleDelete = () => {
|
if (selectedRows.value.length === 0) {
|
proxy.$modal.msgWarning("请选择要删除的数据");
|
return;
|
}
|
const deleteIds = selectedRows.value.map(item => item.id);
|
proxy.$modal.confirm('是否确认删除所选数据项？').then(function() {
|
return delSalesRecord(deleteIds)
|
}).then(() => {
|
handleQuery()
|
proxy.$modal.msgSuccess("删除成功")
|
}).catch(() => {})
|
};
|
// 导出出库
|
const handleExport = () => {
|
const config = { api: "/salesRecord/export", name: "销售出库" };
|
proxy.$modal
|
.confirm(
|
"是否要导出" +
|
(selectedRows.value.length > 0
|
? `选中的${selectedRows.value.length}条`
|
: "全部") +
|
"数据？"
|
)
|
.then((res) => {
|
if (!res) return;
|
exportData(config.api, config.name);
|
})
|
.catch(() => {
|
ElMessage.error("导出失败，请重试");
|
});
|
};
|
const exportData = (api, name) => {
|
proxy.download(
|
api,
|
{ exportIds: selectedRows.value.map((row) => row.id) },
|
`${new Date().getTime()}${name}${new Date().toLocaleDateString("en-CA")}.xlsx`
|
);
|
ElMessage.success("导出数据：" + name);
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 打开弹框
|
const openForm = () => {
|
if (selectedRows.value.length !== 1) {
|
proxy.$modal.msgError("请选择一条数据");
|
return;
|
}
|
invoiceInfo({ id: selectedRows.value[0].id }).then((res) => {
|
console.log(res.data)
|
former.value = { ...res.data };
|
former.value.salesRecordId = former.value.id;
|
former.value.id = "";
|
// form.value.registrant = userStore.nickName;
|
});
|
dialogFormVisible.value = true;
|
};
|
// 提交表单
|
const submitForm = () => {
|
proxy.$refs["formRef"].validate((valid) => {
|
if (valid) {
|
receiptPaymentSaveOrUpdate(former.value).then((res) => {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
getList();
|
});
|
}
|
});
|
};
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef");
|
dialogFormVisible.value = false;
|
};
|
</script>
|
|
<style scoped>
|
|
</style>
|
