| | |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title">采购合同号:</span> |
| | | <el-input |
| | | v-model="searchForm.purchaseContractNumber" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px" |
| | | >搜索</el-button |
| | | > |
| | | <el-form :model="searchForm" :inline="true"> |
| | | <el-form-item label="供应商名称:"> |
| | | <el-input v-model="searchForm.supplierName" placeholder="请输入" clearable prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="采购合同号:"> |
| | | <el-input |
| | | v-model="searchForm.purchaseContractNumber" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="销售合同号:"> |
| | | <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="项目名称:"> |
| | | <el-input v-model="searchForm.projectName" placeholder="请输入" clearable prefix-icon="Search" |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item label="录入日期:"> |
| | | <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange" |
| | | placeholder="请选择" clearable @change="changeDaterange" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleQuery"> 搜索 </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div> |
| | | |
| | | </div> |
| | | <div class="table_list"> |
| | | <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;"> |
| | | <el-button type="primary" @click="openForm('add')">新增台账</el-button> |
| | | <el-button type="success" @click="openScanAddDialog">扫码新增</el-button> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | <el-button type="danger" plain @click="handleDelete">删除</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | |
| | | show-summary |
| | | :summary-method="summarizeMainTable" |
| | | @expand-change="expandChange" |
| | | height="calc(100vh - 18.5em)" |
| | | height="calc(100vh - 19em)" |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column type="expand"> |
| | |
| | | <el-table-column |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | width="200" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="供应商名称" |
| | | width="240" |
| | | prop="supplierName" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column label="订单状态" width="100" align="center"> |
| | | <template #default="scope"> |
| | | <el-tag v-if="scope.row.isInvalid" type="danger" size="small">失效</el-tag> |
| | | <el-tag v-else type="success" size="small">正常</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="项目名称" |
| | | prop="projectName" |
| | | width="420" |
| | | show-overflow-tooltip |
| | | label="项目名称" |
| | | prop="projectName" |
| | | width="420" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="审批状态" |
| | | prop="approvalStatus" |
| | | width="200" |
| | | show-overflow-tooltip |
| | | > |
| | | <template #default="scope"> |
| | | <el-tag |
| | | size="small" |
| | | > |
| | | {{ approvalStatusText[scope.row.approvalStatus] || '未知状态' }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="签订日期" |
| | | prop="executionDate" |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="付款方式" |
| | | width="100" |
| | |
| | | <el-table-column |
| | | label="录入人" |
| | | prop="recorderName" |
| | | width="100" |
| | | width="120" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | |
| | | <el-table-column |
| | | fixed="right" |
| | | label="操作" |
| | | min-width="60" |
| | | width="180" |
| | | align="center" |
| | | > |
| | | <template #default="scope"> |
| | |
| | | type="primary" |
| | | size="small" |
| | | @click="openForm('edit', scope.row)" |
| | | :disabled="scope.row.receiptPaymentAmount>0 || scope.row.recorderName !== userStore.nickName" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | type="success" |
| | | size="small" |
| | | @click="showQRCode(scope.row)" |
| | | >生成二维码</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | @click="downLoadFile(scope.row)" |
| | | >附件</el-button |
| | | > |
| | | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <el-select |
| | | v-model="form.salesLedgerId" |
| | | placeholder="请选择" |
| | | filterable |
| | | clearable |
| | | @change="salesLedgerChange" |
| | | > |
| | |
| | | <el-select |
| | | v-model="form.supplierId" |
| | | placeholder="请选择" |
| | | filterable |
| | | clearable |
| | | > |
| | | <el-option |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目名称:" prop="projectName"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目名称" prop="projectName"> |
| | | <el-input |
| | | v-model="form.projectName" |
| | | placeholder="请输入" |
| | | clearable |
| | | v-model="form.projectName" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款方式"> |
| | | <el-input |
| | | v-model="form.paymentMethod" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="签订日期:" prop="executionDate"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="form.executionDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="录入人:" prop="recorderId"> |
| | | <el-form-item label="审批人:" prop="approverId"> |
| | | <el-select |
| | | v-model="form.recorderId" |
| | | placeholder="请选择" |
| | | clearable |
| | | disabled |
| | | v-model="form.approverId" |
| | | placeholder="请选择审批人" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in userList" |
| | | :key="item.userId" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="录入人:" prop="recorderId" v-show="false"> |
| | | <el-select |
| | | v-model="form.recorderId" |
| | | placeholder="请选择" |
| | | clearable |
| | | disabled |
| | | > |
| | | <el-option |
| | | v-for="item in userList" |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="录入日期:" prop="entryDate"> |
| | | <el-date-picker |
| | | disabled |
| | | style="width: 100%" |
| | | v-model="form.entryDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款方式"> |
| | | <el-input |
| | | v-model="form.paymentMethod" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | |
| | | >删除</el-button |
| | | > |
| | | </el-form-item> |
| | | <div class="select-button-group" style="width: 220px; margin: 20px 0;" v-if="operationType === 'add'"> |
| | | <el-select |
| | | filterable |
| | | allow-create |
| | | :reserve-keyword="true" |
| | | :default-first-option="false" |
| | | v-model="templateName" |
| | | :input-value="filterInputValue" |
| | | @filter-change="onTemplateFilterChange" |
| | | @change="onTemplateChange" |
| | | style="width: 180px; border-right: none; border-radius: 4px 0 0 4px;" |
| | | placeholder="请选择" |
| | | class="no-arrow-select" |
| | | > |
| | | <el-option |
| | | v-for="item in templateList" |
| | | :key="item.value" |
| | | :label="item.templateName" |
| | | :value="item.templateName" |
| | | ></el-option> |
| | | </el-select> |
| | | <!-- 按钮:与 Select 高度匹配,去掉左侧边框,无缝衔接 --> |
| | | <el-button |
| | | size="small" |
| | | style="height: 32px; border-radius: 0 4px 4px 0; margin-left: -1px;" |
| | | @click="handleButtonClick" |
| | | :disabled="!templateName || templateName.trim() === '' || isTemplateNameDuplicate" |
| | | > |
| | | 保存 |
| | | </el-button> |
| | | </div> |
| | | </el-row> |
| | | <el-table |
| | | :data="productData" |
| | |
| | | <el-table-column label="规格型号" prop="specificationModel" /> |
| | | <el-table-column label="单位" prop="unit" width="70" /> |
| | | <el-table-column label="数量" prop="quantity" width="70" /> |
| | | <el-table-column label="库存预警数量" prop="warnNum" width="120" show-overflow-tooltip /> |
| | | <el-table-column label="税率(%)" prop="taxRate" width="80" /> |
| | | <el-table-column |
| | | label="含税单价(元)" |
| | |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="库存预警数量:" prop="warnNum"> |
| | | <el-input-number |
| | | v-model="productForm.warnNum" |
| | | :precision="2" |
| | | :step="0.1" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 二维码显示对话框 --> |
| | | <el-dialog |
| | | v-model="qrCodeDialogVisible" |
| | | title="采购合同号二维码" |
| | | width="400px" |
| | | center |
| | | > |
| | | <div style="text-align: center;"> |
| | | <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" /> |
| | | <div style="margin: 20px;"> |
| | | <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- 扫码新增对话框 --> |
| | | <el-dialog |
| | | v-model="scanAddDialogVisible" |
| | | title="扫码新增采购台账" |
| | | width="70%" |
| | | @close="closeScanAddDialog" |
| | | > |
| | | <el-form |
| | | :model="scanAddForm" |
| | | label-width="140px" |
| | | label-position="top" |
| | | :rules="scanAddRules" |
| | | ref="scanAddFormRef" |
| | | > |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="扫码内容:"> |
| | | <el-input |
| | | v-model="scanAddForm.scanContent" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="请扫描二维码或手动输入采购合同信息" |
| | | @input="parseScanContent" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="采购合同号:" prop="purchaseContractNumber"> |
| | | <el-input |
| | | v-model="scanAddForm.purchaseContractNumber" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商名称:" prop="supplierName"> |
| | | <el-input |
| | | v-model="scanAddForm.supplierName" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目名称:" prop="projectName"> |
| | | <el-input |
| | | v-model="scanAddForm.projectName" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="合同金额(元):" prop="contractAmount"> |
| | | <el-input-number |
| | | v-model="scanAddForm.contractAmount" |
| | | :precision="2" |
| | | :step="0.1" |
| | | clearable |
| | | style="width: 100%" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="付款方式:"> |
| | | <el-input |
| | | v-model="scanAddForm.paymentMethod" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="录入人:"> |
| | | <el-input v-model="scanAddForm.recorderName" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="备注:"> |
| | | <el-input |
| | | v-model="scanAddForm.remark" |
| | | type="textarea" |
| | | :rows="2" |
| | | placeholder="请输入备注信息" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitScanAdd">确认新增</el-button> |
| | | <el-button @click="closeScanAddDialog">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 扫码登记对话框 --> |
| | | <el-dialog |
| | | v-model="scanDialogVisible" |
| | | title="扫码登记" |
| | | width="60%" |
| | | @close="closeScanDialog" |
| | | > |
| | | <el-form |
| | | :model="scanForm" |
| | | label-width="120px" |
| | | label-position="left" |
| | | :rules="scanRules" |
| | | ref="scanFormRef" |
| | | > |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="采购合同号:"> |
| | | <el-input v-model="scanForm.purchaseContractNumber" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商名称:"> |
| | | <el-input v-model="scanForm.supplierName" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="项目名称:"> |
| | | <el-input v-model="scanForm.projectName" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="扫码时间:"> |
| | | <el-input v-model="scanForm.scanTime" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="扫码人:"> |
| | | <el-input v-model="scanForm.scannerName" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="扫码状态:"> |
| | | <el-tag :type="scanForm.scanStatus === '已扫码' ? 'success' : 'warning'"> |
| | | {{ scanForm.scanStatus }} |
| | | </el-tag> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="扫码备注:"> |
| | | <el-input |
| | | v-model="scanForm.scanRemark" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="请输入扫码备注信息" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="扫码记录:"> |
| | | <el-table :data="scanRecords" border style="width: 100%"> |
| | | <el-table-column label="序号" type="index" width="60" align="center" /> |
| | | <el-table-column label="扫码时间" prop="scanTime" width="180" /> |
| | | <el-table-column label="扫码人" prop="scannerName" width="120" /> |
| | | <el-table-column label="扫码状态" prop="scanStatus" width="100"> |
| | | <template #default="scope"> |
| | | <el-tag :type="scope.row.scanStatus === '已扫码' ? 'success' : 'warning'"> |
| | | {{ scope.row.scanStatus }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="备注" prop="scanRemark" /> |
| | | </el-table> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitScan">确认扫码</el-button> |
| | | <el-button @click="closeScanDialog">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <FileList ref="fileListRef" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { getToken } from "@/utils/auth"; |
| | | import {getToken} from "@/utils/auth"; |
| | | import pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { ref, onMounted } from "vue"; |
| | | import { ref, onMounted, reactive, toRefs, getCurrentInstance, nextTick } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { ElMessageBox,ElMessage } from "element-plus"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | | import FileList from "./fileList.vue"; |
| | | import { |
| | | getSalesLedgerWithProducts, |
| | | addOrUpdateSalesLedgerProduct, |
| | |
| | | } from "@/api/salesManagement/salesLedger.js"; |
| | | import { |
| | | addOrEditPurchase, |
| | | addPurchaseTemplate, |
| | | createPurchaseNo, |
| | | delPurchase, |
| | | getSalesNo, |
| | | purchaseListPage, |
| | | productList, |
| | | getPurchaseById, |
| | | getOptions, |
| | | createPurchaseNo, |
| | | getPurchaseTemplateList |
| | | } from "@/api/procurementManagement/procurementLedger.js"; |
| | | import useFormData from "@/hooks/useFormData.js"; |
| | | import QRCode from "qrcode"; |
| | | |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableData = ref([]); |
| | | const productData = ref([]); |
| | |
| | | const fileList = ref([]); |
| | | import useUserStore from "@/store/modules/user"; |
| | | import { modelList, productTreeList } from "@/api/basicData/product.js"; |
| | | import dayjs from "dayjs"; |
| | | |
| | | const userStore = useUserStore(); |
| | | |
| | | // 二维码相关变量 |
| | | const qrCodeDialogVisible = ref(false); |
| | | const qrCodeUrl = ref(""); |
| | | |
| | | // 订单审批状态显示文本 |
| | | const approvalStatusText = { |
| | | 0: '审批中', |
| | | 1: '审批通过', |
| | | 2: '审批失败' |
| | | }; |
| | | |
| | | |
| | | const templateName = ref(''); |
| | | const filterInputValue = ref(''); |
| | | const templateList = ref([]); |
| | | const isTemplateNameDuplicate = ref(false); // 标记模板名称是否重复 |
| | | |
| | | // 检查模板名称是否重复 |
| | | const checkTemplateNameDuplicate = (name) => { |
| | | if (!name || name.trim() === '') { |
| | | isTemplateNameDuplicate.value = false; |
| | | return false; |
| | | } |
| | | const isDuplicate = templateList.value.some(item => item.templateName === name.trim()); |
| | | isTemplateNameDuplicate.value = isDuplicate; |
| | | return isDuplicate; |
| | | }; |
| | | |
| | | // 防抖定时器 |
| | | let duplicateCheckTimer = null; |
| | | const onTemplateFilterChange = (val) => { |
| | | filterInputValue.value = val ?? ''; |
| | | // 清除之前的定时器 |
| | | if (duplicateCheckTimer) { |
| | | clearTimeout(duplicateCheckTimer); |
| | | } |
| | | // 实时检查模板名称是否重复(防抖处理,避免频繁提示) |
| | | if (val && val.trim()) { |
| | | duplicateCheckTimer = setTimeout(() => { |
| | | const isDuplicate = checkTemplateNameDuplicate(val); |
| | | if (isDuplicate) { |
| | | ElMessage({ |
| | | message: '模板名称已存在,请更换模板名称', |
| | | type: 'warning', |
| | | duration: 2000 |
| | | }); |
| | | } |
| | | }, 300); // 300ms 防抖 |
| | | } else { |
| | | isTemplateNameDuplicate.value = false; |
| | | } |
| | | }; |
| | | |
| | | // allow-create 时,输入不存在的内容会作为 string 值返回;这里同步回输入框以确保文字不丢 |
| | | const onTemplateChange = async (val) => { |
| | | if (typeof val === 'string') { |
| | | filterInputValue.value = val; |
| | | // 选择或输入时检查重复 |
| | | checkTemplateNameDuplicate(val); |
| | | } |
| | | |
| | | // 过滤数据,查找匹配的模板 |
| | | const matchedTemplate = templateList.value.find(item => item.templateName === val); |
| | | |
| | | if (matchedTemplate?.id) { |
| | | // 如果找到模板,加载模板数据 |
| | | form.value = { |
| | | ...form.value, |
| | | ...matchedTemplate, |
| | | }; |
| | | productData.value = matchedTemplate.productData || []; |
| | | // 生成新的采购合同号 |
| | | try { |
| | | const res = await createPurchaseNo(); |
| | | if (res?.data) { |
| | | form.value.purchaseContractNumber = res.data; |
| | | } |
| | | } catch (error) { |
| | | console.error('生成采购合同号失败:', error); |
| | | } |
| | | } else { |
| | | // 如果没有找到模板,重置表单(保持当前表单状态) |
| | | const currentFormData = { ...form.value }; |
| | | const currentProductData = [...productData.value]; |
| | | |
| | | // 如果对话框未打开,先打开 |
| | | if (!dialogFormVisible.value) { |
| | | operationType.value = 'add'; |
| | | dialogFormVisible.value = true; |
| | | } |
| | | |
| | | // 等待下一个 tick 后恢复数据 |
| | | await nextTick(); |
| | | form.value = { |
| | | ...form.value, |
| | | ...currentFormData, |
| | | }; |
| | | productData.value = currentProductData; |
| | | } |
| | | }; |
| | | |
| | | // 用户信息表单弹框数据 |
| | | const operationType = ref(""); |
| | | const dialogFormVisible = ref(false); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | purchaseContractNumber: "", |
| | | supplierName: "", // 供应商名称 |
| | | purchaseContractNumber: "", // 采购合同编号 |
| | | salesContractNo: "", // 销售合同编号 |
| | | projectName: "", // 项目名称 |
| | | entryDate: null, // 录入日期 |
| | | entryDateStart: undefined, |
| | | entryDateEnd: undefined, |
| | | }, |
| | | form: { |
| | | purchaseContractNumber: "", |
| | |
| | | supplierName: "", |
| | | supplierId: "", |
| | | paymentMethod: "", |
| | | executionDate: "", |
| | | }, |
| | | rules: { |
| | | purchaseContractNumber: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | projectName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | approverId:[{ required: true, message: "请选择审批人", trigger: "change" }], |
| | | projectName:[{ required:true, message:"请输入项目名称", trigger:"blur"}], |
| | | supplierId: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | entryDate: [{ required: true, message: "请选择", trigger: "change" }], |
| | | executionDate: [{ required: true, message: "请选择", trigger: "change" }], |
| | | }, |
| | | }); |
| | | const { searchForm, form, rules } = toRefs(data); |
| | | const { form, rules } = toRefs(data); |
| | | const { form: searchForm } = useFormData({ |
| | | ...data.searchForm, |
| | | // 设置录入日期范围为当天 |
| | | entryDate: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')], |
| | | entryDateStart: dayjs().startOf('day').format('YYYY-MM-DD'), |
| | | entryDateEnd: dayjs().endOf('day').format('YYYY-MM-DD') |
| | | }); |
| | | |
| | | // 产品表单弹框数据 |
| | | const productFormVisible = ref(false); |
| | | const productOperationType = ref(""); |
| | |
| | | taxInclusiveTotalPrice: "", |
| | | taxExclusiveTotalPrice: "", |
| | | invoiceType: "", |
| | | warnNum: "", |
| | | }, |
| | | productRules: { |
| | | productId: [{ required: true, message: "请选择", trigger: "change" }], |
| | |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | taxRate: [{ required: true, message: "请选择", trigger: "change" }], |
| | | warnNum: [{ required: true, message: "请选择", trigger: "change" }], |
| | | taxInclusiveTotalPrice: [ |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | }); |
| | | |
| | | const changeDaterange = (value) => { |
| | | if (value) { |
| | | searchForm.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD"); |
| | | searchForm.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD"); |
| | | } else { |
| | | searchForm.entryDateStart = undefined; |
| | | searchForm.entryDateEnd = undefined; |
| | | } |
| | | handleQuery(); |
| | | }; |
| | | |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | }; |
| | |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | |
| | | // 保存模板 |
| | | const handleButtonClick = async () => { |
| | | // 检查模板名称是否为空 |
| | | if (!templateName.value || templateName.value.trim() === '') { |
| | | ElMessage({ |
| | | message: '请输入模板名称', |
| | | type: 'warning', |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 检查模板名称是否重复 |
| | | const isDuplicate = checkTemplateNameDuplicate(templateName.value); |
| | | if (isDuplicate) { |
| | | ElMessage({ |
| | | message: '模板名称已存在,请更换模板名称', |
| | | type: 'warning', |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 检查供应商是否选择 |
| | | if (!form.value.supplierId) { |
| | | ElMessage({ |
| | | message: '请先选择供应商', |
| | | type: 'warning', |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 检查是否有产品数据 |
| | | // if (!productData.value || productData.value.length === 0) { |
| | | // ElMessage({ |
| | | // message: '请先添加产品信息', |
| | | // type: 'warning', |
| | | // }); |
| | | // return; |
| | | // } |
| | | |
| | | try { |
| | | let params = { |
| | | productData: proxy.HaveJson(productData.value), |
| | | supplierId: form.value.supplierId, |
| | | paymentMethod: form.value.paymentMethod, |
| | | recorderId: form.value.recorderId, |
| | | approverId: form.value.approverId, |
| | | templateName: templateName.value.trim() |
| | | }; |
| | | console.log(params); |
| | | let res = await addPurchaseTemplate(params); |
| | | |
| | | if (res && res.code === 200) { |
| | | ElMessage({ |
| | | message: '模板保存成功', |
| | | type: 'success', |
| | | }); |
| | | // 保存成功后重新获取模板列表 |
| | | await getTemplateList(); |
| | | // 清空模板名称输入 |
| | | templateName.value = ''; |
| | | filterInputValue.value = ''; |
| | | isTemplateNameDuplicate.value = false; |
| | | } else { |
| | | ElMessage({ |
| | | message: res?.msg || '模板保存失败', |
| | | type: 'error', |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.error('保存模板失败:', error); |
| | | ElMessage({ |
| | | message: '模板保存失败,请稍后重试', |
| | | type: 'error', |
| | | }); |
| | | } |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeChildrenTable = (param) => { |
| | |
| | | }; |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | purchaseListPage({ ...searchForm.value, ...page }) |
| | | const { entryDate, ...rest } = searchForm; |
| | | purchaseListPage({ ...rest, ...page }) |
| | | .then((res) => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | tableData.value.map((item) => { |
| | | // tableData.value = res.data.records; |
| | | tableData.value = res.data.records.map(record => ({ |
| | | ...record, |
| | | isInvalid: record.isWhite === 1 |
| | | })); |
| | | // 初始化子数据数组 |
| | | tableData.value.forEach((item) => { |
| | | item.children = []; |
| | | }); |
| | | total.value = res.data.total; |
| | |
| | | }; |
| | | const expandedRowKeys = ref([]); |
| | | // 展开行 |
| | | const expandChange = (row, expandedRows) => { |
| | | const expandChange = async (row, expandedRows) => { |
| | | if (expandedRows.length > 0) { |
| | | expandedRowKeys.value = []; |
| | | try { |
| | | productList({ salesLedgerId: row.id, type: 2 }).then((res) => { |
| | | const index = tableData.value.findIndex((item) => item.id === row.id); |
| | | if (index > -1) { |
| | | tableData.value[index].children = res.data; |
| | | } |
| | | const res = await productList({ salesLedgerId: row.id, type: 2 }); |
| | | const index = tableData.value.findIndex((item) => item.id === row.id); |
| | | if (index > -1) { |
| | | tableData.value[index].children = res.data || []; |
| | | expandedRowKeys.value.push(row.id); |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.log(error); |
| | | console.error('加载产品列表失败:', error); |
| | | proxy.$modal.msgError('加载产品列表失败'); |
| | | // 展开失败时,移除展开状态 |
| | | const index = expandedRows.findIndex(item => item.id === row.id); |
| | | if (index > -1) { |
| | | expandedRows.splice(index, 1); |
| | | } |
| | | } |
| | | } else { |
| | | expandedRowKeys.value = []; |
| | |
| | | ]); |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = (type, row) => { |
| | | const openForm = async (type, row) => { |
| | | await getTemplateList() |
| | | operationType.value = type; |
| | | form.value = {}; |
| | | productData.value = []; |
| | | fileList.value = []; |
| | | if (operationType.value == "add") { |
| | | createPurchaseNo().then((res) => { |
| | | form.value.purchaseContractNumber = res.data; |
| | | }); |
| | | } |
| | | userListNoPage().then((res) => { |
| | | userList.value = res.data; |
| | | }); |
| | | getSalesNo().then((res) => { |
| | | salesContractList.value = res; |
| | | }); |
| | | getOptions().then((res) => { |
| | | supplierList.value = res.data; |
| | | }); |
| | | form.value.recorderId = userStore.id; |
| | | form.value.entryDate = getCurrentDate(); |
| | | if (type === "edit") { |
| | | currentId.value = row.id; |
| | | getPurchaseById({ id: row.id, type: 2 }).then((res) => { |
| | | form.value = { ...res }; |
| | | productData.value = form.value.productData; |
| | | if (form.value.salesLedgerFiles) { |
| | | fileList.value = form.value.salesLedgerFiles; |
| | | } else { |
| | | fileList.value = []; |
| | | templateName.value = ''; |
| | | filterInputValue.value = ''; |
| | | isTemplateNameDuplicate.value = false; |
| | | try { |
| | | // 并行加载基础数据 |
| | | const [userRes, salesRes, supplierRes] = await Promise.all([ |
| | | userListNoPage(), |
| | | getSalesNo(), |
| | | getOptions() |
| | | ]); |
| | | |
| | | userList.value = userRes.data || []; |
| | | salesContractList.value = salesRes || []; |
| | | // 供应商过滤出isWhite=0 的数据 |
| | | supplierList.value = (supplierRes.data || []).filter((item) => item.isWhite === 0); |
| | | |
| | | // 设置默认值 |
| | | form.value.recorderId = userStore.id; |
| | | form.value.entryDate = getCurrentDate(); |
| | | |
| | | if (type === "add") { |
| | | // 新增时生成采购合同号 |
| | | try { |
| | | const purchaseNoRes = await createPurchaseNo(); |
| | | if (purchaseNoRes?.data) { |
| | | form.value.purchaseContractNumber = purchaseNoRes.data; |
| | | } |
| | | } catch (error) { |
| | | console.error('生成采购合同号失败:', error); |
| | | proxy.$modal.msgWarning('生成采购合同号失败'); |
| | | } |
| | | }); |
| | | } else if (type === "edit" && row?.id) { |
| | | // 编辑时加载数据 |
| | | currentId.value = row.id; |
| | | try { |
| | | const purchaseRes = await getPurchaseById({ id: row.id, type: 2 }); |
| | | form.value = { ...purchaseRes }; |
| | | productData.value = purchaseRes.productData || []; |
| | | fileList.value = purchaseRes.salesLedgerFiles || []; |
| | | } catch (error) { |
| | | console.error('加载采购台账数据失败:', error); |
| | | proxy.$modal.msgError('加载数据失败'); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | dialogFormVisible.value = true; |
| | | } catch (error) { |
| | | console.error('打开表单失败:', error); |
| | | proxy.$modal.msgError('加载基础数据失败'); |
| | | } |
| | | dialogFormVisible.value = true; |
| | | }; |
| | | // 上传前校检 |
| | | function handleBeforeUpload(file) { |
| | |
| | | } |
| | | } |
| | | // 移除文件 |
| | | function handleRemove(file) { |
| | | async function handleRemove(file) { |
| | | if (!file?.id) { |
| | | return; |
| | | } |
| | | console.log("handleRemove", file.id); |
| | | if (file.size > 1024 * 1024 * 10) { |
| | | // 仅前端清理,不调用删除接口和提示 |
| | | return; |
| | | return; |
| | | } |
| | | if (operationType.value === "edit") { |
| | | let ids = []; |
| | | ids.push(file.id); |
| | | delLedgerFile(ids).then((res) => { |
| | | |
| | | if (operationType.value === "edit" && file.id) { |
| | | try { |
| | | await delLedgerFile([file.id]); |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | }); |
| | | } catch (error) { |
| | | console.error('删除文件失败:', error); |
| | | proxy.$modal.msgError("删除文件失败"); |
| | | } |
| | | } |
| | | } |
| | | // 提交表单 |
| | |
| | | } |
| | | form.value.tempFileIds = tempFileIds; |
| | | form.value.type = 2; |
| | | |
| | | // 如果salesLedgerId为空,则不传递salesContractNo |
| | | if (!form.value.salesLedgerId) { |
| | | form.value.salesContractNo = '' |
| | | } |
| | | |
| | | addOrEditPurchase(form.value).then((res) => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | |
| | | }); |
| | | }; |
| | | const getModels = (value) => { |
| | | productForm.value.productCategory = findNodeById(productOptions.value, value); |
| | | modelList({ id: value }).then((res) => { |
| | | modelOptions.value = res; |
| | | }); |
| | | if (value) { |
| | | productForm.value.productCategory = findNodeById(productOptions.value, value) || ""; |
| | | modelList({ id: value }).then((res) => { |
| | | modelOptions.value = res; |
| | | }); |
| | | } else { |
| | | productForm.value.productCategory = ""; |
| | | modelOptions.value = []; |
| | | } |
| | | }; |
| | | const getProductModel = (value) => { |
| | | const index = modelOptions.value.findIndex((item) => item.id === value); |
| | |
| | | const findNodeById = (nodes, productId) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].value === productId) { |
| | | return nodes[i].label; // 找到节点,返回该节点 |
| | | return nodes[i].label; // 找到节点,返回该节点的label |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | | const foundNode = findNodeById(nodes[i].children, productId); |
| | | if (foundNode) { |
| | | return foundNode.label; // 在子节点中找到,返回该节点 |
| | | return foundNode; // 在子节点中找到,直接返回(已经是label字符串) |
| | | } |
| | | } |
| | | } |
| | |
| | | var index = salesContractList.value.findIndex((item) => item.id == row); |
| | | console.log("index", index); |
| | | if (index > -1) { |
| | | form.value.projectName = salesContractList.value[index].projectName; |
| | | await querygProductInfoByContractNo(); |
| | | } |
| | | }; |
| | |
| | | } |
| | | }; |
| | | |
| | | const fileListRef = ref(null) |
| | | const downLoadFile = (row) => { |
| | | fileListRef.value.open(row.salesLedgerFiles) |
| | | } |
| | | |
| | | // 显示二维码 |
| | | const showQRCode = async (row) => { |
| | | try { |
| | | // 构建二维码内容,只包含采购合同号(纯文本) |
| | | const qrContent = row.purchaseContractNumber || ''; |
| | | // 检查内容是否为空 |
| | | if (!qrContent || qrContent.trim() === '') { |
| | | proxy.$modal.msgWarning("该行没有采购合同号,无法生成二维码"); |
| | | return; |
| | | } |
| | | qrCodeUrl.value = await QRCode.toDataURL(qrContent, { |
| | | width: 200, |
| | | margin: 2, |
| | | color: { |
| | | dark: '#000000', |
| | | light: '#FFFFFF' |
| | | } |
| | | }); |
| | | qrCodeDialogVisible.value = true; |
| | | } catch (error) { |
| | | console.error('生成二维码失败:', error); |
| | | proxy.$modal.msgError("生成二维码失败:" + error.message); |
| | | } |
| | | }; |
| | | |
| | | // 下载二维码 |
| | | const downloadQRCode = () => { |
| | | if (!qrCodeUrl.value) { |
| | | proxy.$modal.msgWarning("二维码未生成"); |
| | | return; |
| | | } |
| | | |
| | | const a = document.createElement('a'); |
| | | a.href = qrCodeUrl.value; |
| | | a.download = `采购合同号二维码_${new Date().getTime()}.png`; |
| | | document.body.appendChild(a); |
| | | a.click(); |
| | | document.body.removeChild(a); |
| | | proxy.$modal.msgSuccess("下载成功"); |
| | | }; |
| | | |
| | | // 扫码新增对话框相关变量 |
| | | const scanAddDialogVisible = ref(false); |
| | | const scanAddForm = reactive({ |
| | | scanContent: "", |
| | | purchaseContractNumber: "", |
| | | supplierName: "", |
| | | projectName: "", |
| | | contractAmount: "", |
| | | paymentMethod: "", |
| | | recorderName: "", |
| | | scanRemark: "", |
| | | }); |
| | | const scanAddRules = { |
| | | purchaseContractNumber: [{ required: true, message: "请输入采购合同号", trigger: "blur" }], |
| | | supplierName: [{ required: true, message: "请输入供应商名称", trigger: "blur" }], |
| | | projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }], |
| | | }; |
| | | |
| | | // 扫码登记对话框相关变量 |
| | | const scanDialogVisible = ref(false); |
| | | const scanForm = reactive({ |
| | | purchaseContractNumber: "", |
| | | supplierName: "", |
| | | projectName: "", |
| | | scanTime: "", |
| | | scannerName: "", |
| | | scanStatus: "未扫码", |
| | | scanRemark: "", |
| | | }); |
| | | const scanRules = { |
| | | scanRemark: [{ required: true, message: "请输入扫码备注", trigger: "blur" }], |
| | | }; |
| | | const scanRecords = ref([]); |
| | | |
| | | // 打开扫码新增对话框 |
| | | const openScanAddDialog = () => { |
| | | scanAddForm.scanContent = ""; |
| | | scanAddForm.purchaseContractNumber = ""; |
| | | scanAddForm.supplierName = ""; |
| | | scanAddForm.projectName = ""; |
| | | scanAddForm.contractAmount = ""; |
| | | scanAddForm.paymentMethod = ""; |
| | | scanAddForm.recorderName = userStore.nickName; |
| | | scanAddForm.scanRemark = ""; |
| | | scanAddDialogVisible.value = true; |
| | | }; |
| | | |
| | | // 解析扫码内容(模拟解析二维码数据) |
| | | const parseScanContent = (content) => { |
| | | if (!content) return; |
| | | |
| | | // 模拟解析二维码内容,这里可以根据实际需求调整解析逻辑 |
| | | // 假设扫码内容格式为:合同号|供应商|金额|付款方式 |
| | | const parts = content.split('|'); |
| | | if (parts.length >= 2) { |
| | | scanAddForm.purchaseContractNumber = parts[0] || ""; |
| | | scanAddForm.supplierName = parts[1] || ""; |
| | | scanAddForm.contractAmount = parts[2] || ""; |
| | | scanAddForm.paymentMethod = parts[3] || ""; |
| | | scanAddForm.projectName = parts[4] || ""; |
| | | // scanAddForm.contractAmount = parts[3] || ""; |
| | | // scanAddForm.paymentMethod = parts[4] || ""; |
| | | } |
| | | }; |
| | | |
| | | // 关闭扫码新增对话框 |
| | | const closeScanAddDialog = () => { |
| | | scanAddDialogVisible.value = false; |
| | | proxy.resetForm("scanAddFormRef"); |
| | | }; |
| | | |
| | | // 提交扫码新增 |
| | | const submitScanAdd = () => { |
| | | proxy.$refs["scanAddFormRef"].validate((valid) => { |
| | | if (valid) { |
| | | // 构建新增数据 |
| | | const newData = { |
| | | purchaseContractNumber: scanAddForm.purchaseContractNumber, |
| | | supplierName: scanAddForm.supplierName, |
| | | projectName: scanAddForm.projectName, |
| | | contractAmount: scanAddForm.contractAmount, |
| | | paymentMethod: scanAddForm.paymentMethod, |
| | | recorderName: scanAddForm.recorderName, |
| | | entryDate: getCurrentDate(), |
| | | remark: scanAddForm.scanRemark, |
| | | type: 2 |
| | | }; |
| | | |
| | | // 模拟新增成功 |
| | | proxy.$modal.msgSuccess("扫码新增成功!"); |
| | | closeScanAddDialog(); |
| | | |
| | | // 可以选择是否刷新列表 |
| | | // getList(); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 打开扫码登记对话框 |
| | | const openScanDialog = (row) => { |
| | | scanForm.purchaseContractNumber = row.purchaseContractNumber; |
| | | scanForm.supplierName = row.supplierName; |
| | | scanForm.projectName = row.projectName; |
| | | scanForm.scanTime = getCurrentDateTime(); |
| | | scanForm.scannerName = userStore.nickName; |
| | | scanForm.scanStatus = "未扫码"; |
| | | scanForm.scanRemark = ""; |
| | | scanRecords.value = []; |
| | | scanDialogVisible.value = true; |
| | | }; |
| | | |
| | | // 关闭扫码登记对话框 |
| | | const closeScanDialog = () => { |
| | | scanDialogVisible.value = false; |
| | | proxy.resetForm("scanFormRef"); |
| | | }; |
| | | |
| | | // 提交扫码登记 |
| | | const submitScan = () => { |
| | | proxy.$refs["scanFormRef"].validate((valid) => { |
| | | if (valid) { |
| | | // 添加扫码记录 |
| | | scanRecords.value.push({ |
| | | ...scanForm, |
| | | id: Date.now(), // 模拟ID |
| | | scanTime: getCurrentDateTime(), |
| | | }); |
| | | scanForm.scanStatus = "已扫码"; |
| | | scanForm.scanRemark = scanForm.scanRemark || "无"; |
| | | proxy.$modal.msgSuccess("扫码登记成功!"); |
| | | closeScanDialog(); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 获取当前日期时间 |
| | | function getCurrentDateTime() { |
| | | const now = new Date(); |
| | | const year = now.getFullYear(); |
| | | const month = String(now.getMonth() + 1).padStart(2, "0"); |
| | | const day = String(now.getDate()).padStart(2, "0"); |
| | | const hours = String(now.getHours()).padStart(2, "0"); |
| | | const minutes = String(now.getMinutes()).padStart(2, "0"); |
| | | const seconds = String(now.getSeconds()).padStart(2, "0"); |
| | | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
| | | } |
| | | |
| | | // 添加行类名方法 |
| | | const tableRowClassName = ({ row }) => { |
| | | return row.isInvalid ? 'invalid-row' : ''; |
| | | }; |
| | | |
| | | // 获取模板信息 |
| | | const getTemplateList =async ()=>{ |
| | | let res = await getPurchaseTemplateList() |
| | | if(res && res.code===200 && Array.isArray(res.data)){ |
| | | templateList.value = res.data |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getTemplateList(); |
| | | |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | .invalid-row { |
| | | opacity: 0.6; |
| | | background-color: #f5f7fa; |
| | | } |
| | | .el-row{ |
| | | justify-content: space-between; |
| | | align-items: center |
| | | } |
| | | .no-arrow-select { |
| | | --el-select-suffix-icon-color: transparent; /* 隐藏默认下拉箭头 */ |
| | | } |
| | | .select-button-group { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | </style> |