| | |
| | | <!-- 操作按钮区 --> |
| | | <el-row :gutter="24" class="table-toolbar"> |
| | | <el-button type="primary" :icon="Plus" @click="handleAdd" |
| | | >新建</el-button |
| | | > |
| | | >新建 |
| | | </el-button> |
| | | <el-button type="danger" :icon="Delete" @click="handleDelete" |
| | | >删除</el-button |
| | | > |
| | | <!-- <el-button type="info" :icon="Download" @click="handleExport">导出</el-button> --> |
| | | >删除 |
| | | </el-button> |
| | | </el-row> |
| | | <!-- 表格组件 --> |
| | | <data-table |
| | |
| | | @delete="handleDeleteSuccess" |
| | | :show-selection="true" |
| | | :border="true" |
| | | :maxHeight="440" |
| | | style="width: 100%; height: calc(100vh - 26em)" |
| | | @viewRow="handleView" |
| | | :operations="['edit', 'viewRow']" |
| | | :operationsWidth="200" |
| | | :show-overflow-tooltip="false" |
| | | /> |
| | | <pagination |
| | | v-if="total > 0" |
| | |
| | | import DataTable from "@/components/Table/ETable.vue"; |
| | | import Pagination from "@/components/Pagination"; |
| | | import ProductionDialog from "./components/ProductionDialog.vue"; |
| | | import { purchaseRegistration } from "@/api/procureMent"; |
| | | import { |
| | | purchaseRegistration, |
| | | getSupplyList, |
| | | getCoalInfoList, |
| | | delPR |
| | | } from "@/api/procureMent"; |
| | | import { useDelete } from "@/hooks/useDelete"; |
| | | |
| | | import useUserStore from "@/store/modules/user"; |
| | | // 引入字典数据 |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | |
| | | // supplier 供应商数据 |
| | | const columns = ref([ |
| | | { prop: "supplierName", label: "供应商名称", minWidth: 200 }, |
| | | { prop: "coal", label: "煤种类型", minWidth: 120 }, |
| | | { prop: "unit", label: "单位", minWidth: 150 }, |
| | | { |
| | | prop: "supplierId", |
| | | label: "供应商名称", |
| | | minWidth: 200, |
| | | formatter: (row) => { |
| | | return MatchQuery(row.supplierId, "supplyRes") || "未知供应商"; |
| | | }, |
| | | }, |
| | | { |
| | | prop: "coalId", |
| | | label: "煤种类型", |
| | | minWidth: 120, |
| | | formatter: (row) => { |
| | | return MatchQuery(row.coalId, "coalRes") || "未知煤种"; |
| | | }, |
| | | }, |
| | | { prop: "purchaseQuantity", label: "采购数量", minWidth: 100 }, |
| | | { prop: "priceIncludingTax", label: "单价(含税)", minWidth: 150 }, |
| | | { prop: "totalPriceIncludingTax", label: "总价(含税)", minWidth: 100 }, |
| | |
| | | { prop: "registrantId", label: "登记人", minWidth: 100 }, |
| | | { prop: "registrationDate", label: "登记日期", minWidth: 100 }, |
| | | ]); |
| | | |
| | | // 匹配查询字段 |
| | | const MatchQuery = (data, name) => { |
| | | const list = name === "supplyRes" ? supplyRes.value.data : coalRes.value.data; |
| | | const item = list.find((items) => items.id == data); |
| | | return item ? item.coal || item.supplierName : ""; |
| | | }; |
| | | // 获取供应商列表 |
| | | const supplyRes = ref([]); |
| | | const coalRes = ref([]); |
| | | |
| | | // 重置查询 |
| | | const resetQuery = () => { |
| | |
| | | const productionDialogs = ref(null); // 添加ref声明 |
| | | |
| | | const handleAddEdit = () => { |
| | | addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑"); |
| | | addOrEdit.value == "add" ? (title.value = "新增") : addOrEdit.value == "viewRow" ? (title.value = "查看") : (title.value = "编辑"); |
| | | title.value = title.value + "采购信息"; |
| | | openDialog(); |
| | | }; |
| | | // 打开弹窗 |
| | | const openDialog = () => { |
| | | if (addOrEdit.value === "edit") { |
| | | if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") { |
| | | // 确保复制一份数据,避免直接引用 |
| | | copyForm.value = JSON.parse(JSON.stringify(form.value)); |
| | | dialogFormVisible.value = true; |
| | | // 触发ref里面的方法 |
| | | return; |
| | | } |
| | | console.log(userInfo.value) |
| | | // 新建时初始化表单 |
| | | form.value = { |
| | | supplierName: "", |
| | | coal: "", |
| | | unit: "", |
| | | purchaseQuantity: "", |
| | | priceExcludingTax: "", |
| | | totalPriceExcludingTax: "", |
| | | priceIncludingTax: "", |
| | | totalPriceIncludingTax: "", |
| | | taxRate: "", |
| | | registrantId: userInfo.value.userName, |
| | | registrantId: userInfo.value.userId, |
| | | registrationDate: new Date().toISOString().split("T")[0], |
| | | }; |
| | | // 新建时也需要设置 copyForm 用于重置功能 |
| | |
| | | addOrEdit.value = "edit"; |
| | | handleAddEdit(); |
| | | }; |
| | | const handleDelete = () => { |
| | | if (selectedRows.value.length === 0) { |
| | | ElMessage.warning("请选择要删除的数据"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm(`确定删除选中的数据吗?`, "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | // 模拟删除操作 |
| | | tableData.value = tableData.value.filter( |
| | | (item) => !selectedRows.value.includes(item) |
| | | ); |
| | | total.value = tableData.value.length; |
| | | ElMessage.success("删除成功"); |
| | | }) |
| | | .catch(() => { |
| | | ElMessage.info("已取消删除"); |
| | | }); |
| | | const handleView = (row) => { |
| | | form.value = JSON.parse(JSON.stringify(row)); |
| | | addOrEdit.value = "viewRow"; |
| | | handleAddEdit(); |
| | | }; |
| | | // 使用删除组合式函数 - 简化版本 |
| | | const { handleDeleteBatch: handleDelete } = useDelete({ |
| | | deleteApi: delPR, |
| | | selectedRows, |
| | | tableData, |
| | | total, |
| | | confirmText: "确定删除选中的采购记录吗?", |
| | | useLocalUpdate: true |
| | | }); |
| | | const handleDeleteSuccess = (row) => { |
| | | ElMessage.success("删除成功:" + row.supplierName); |
| | | }; |
| | | // 导出 |
| | | const handleExport = (row) => { |
| | | proxy.download( |
| | | "system/post/export", |
| | | { |
| | | ...queryParams.value, |
| | | }, |
| | | `post_${new Date().getTime()}.xlsx` |
| | | ); |
| | | ElMessage.success("导出数据:" + row.supplierName); |
| | | }; |
| | | // 成功 |
| | | const handleSuccess = (val) => { |
| | |
| | | const getList = async () => { |
| | | loading.value = true; |
| | | try { |
| | | [supplyRes.value, coalRes.value] = await Promise.all([ |
| | | getSupplyList(), |
| | | getCoalInfoList(), |
| | | ]); |
| | | // 传递分页参数 |
| | | let res = await purchaseRegistration({ |
| | | current: current.value, |
| | |
| | | .app-container { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .search-form { |
| | | background-color: #fff; |
| | | padding: 20px 20px 0 20px; |
| | |
| | | border-radius: 4px; |
| | | box-shadow: var(--el-box-shadow-light); |
| | | } |
| | | |
| | | .search-form :deep(.el-form-item) { |
| | | margin-bottom: 16px; |
| | | width: 100%; |
| | |
| | | width: 50%; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1200px) { |
| | | .search-form :deep(.el-form-item) { |
| | | width: 18%; |
| | | } |
| | | } |
| | | |
| | | .table-toolbar { |
| | | margin-bottom: 20px; |
| | | display: flex; |
| | |
| | | .table-toolbar { |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .table-toolbar .el-button { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | /* 表格工具栏 */ |
| | | .table-toolbar, |
| | | .table-toolbar > * { |
| | | margin: 0 0 0 0 !important; |
| | | } |
| | | |
| | | .table-toolbar { |
| | | margin-bottom: 20px !important; |
| | | } |