| | |
| | | <el-form :inline="true" :model="queryParams" class="search-form"> |
| | | <el-form-item label="搜索"> |
| | | <el-input |
| | | v-model="queryParams.searchText" |
| | | placeholder="请输入关键词" |
| | | clearable |
| | | :style="{ width: '100%' }" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="供应商名称"> |
| | | <el-input |
| | | v-model="queryParams.supplierName" |
| | | placeholder="请输入" |
| | | clearable |
| | | :style="{ width: '100%' }" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="统一人识别号"> |
| | | <el-input |
| | | v-model="queryParams.identifyNumber" |
| | | placeholder="请输入" |
| | | clearable |
| | | :style="{ width: '100%' }" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="经营地址"> |
| | | <el-input |
| | | v-model="queryParams.address" |
| | | placeholder="请输入" |
| | | v-model="queryParams.searchAll" |
| | | placeholder="请输入供应商/煤种" |
| | | clearable |
| | | :style="{ width: '100%' }" |
| | | /> |
| | |
| | | <!-- 操作按钮区 --> |
| | | <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 |
| | |
| | | :columns="columns" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="handleEdit" |
| | | :showOverflowTooltip="false" |
| | | @delete="handleDeleteSuccess" |
| | | :show-selection="true" |
| | | :border="true" |
| | |
| | | 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, |
| | | } from "@/api/procureMent"; |
| | | |
| | | import useUserStore from "@/store/modules/user"; |
| | | // 引入字典数据 |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | const copyForm = ref({}); |
| | | // 查询参数 |
| | | const queryParams = reactive({ |
| | | searchText: "", |
| | | searchAll: "", |
| | | supplierName: "", |
| | | identifyNumber: "", |
| | | address: "", |
| | |
| | | |
| | | // 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: "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 = () => { |
| | | Object.keys(queryParams).forEach((key) => { |
| | | if (key !== "current" && key !== "pageSize") { |
| | | queryParams[key] = ""; |
| | | } |
| | | }); |
| | | queryParams.searchAll = ""; |
| | | queryParams.supplierName = ""; |
| | | queryParams.identifyNumber = ""; |
| | | queryParams.address = ""; |
| | | current.value = 1; |
| | | pageSize.value = 10; |
| | | queryParams.current = current.value; |
| | | queryParams.pageSize = pageSize.value; |
| | | getList(); |
| | | }; |
| | | // 新增 |
| | | const handleAdd = () => { |
| | |
| | | form.value = { |
| | | supplierName: "", |
| | | coal: "", |
| | | unit: "", |
| | | unit: "吨", |
| | | purchaseQuantity: "", |
| | | priceExcludingTax: "", |
| | | totalPriceExcludingTax: "", |
| | |
| | | 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) => { |
| | | tableData.value.push(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; |
| | | } |