| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <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" |
| | |
| | | :style="{ width: '100%' }" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="ç»ä¸äººè¯å«å·"> |
| | | <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" |
| | | v-model="queryParams.coal" |
| | | placeholder="请è¾å
¥" |
| | | clearable |
| | | :style="{ width: '100%' }" |
| | |
| | | <el-table :data="tableData" border @selection-change="selectionChange" style="width: 100%"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column label="åºå·" type="index" width="60" align="center" /> |
| | | <el-table-column prop="name" label="ä¾è´§ååç§°" width="180" sortable/> |
| | | <el-table-column prop="type" label="ç
¤ç§" sortable/> |
| | | <el-table-column prop="supplierName" label="ä¾è´§ååç§°" width="180" sortable/> |
| | | <el-table-column prop="coal" label="ç
¤ç§" sortable/> |
| | | <el-table-column prop="unit" label="åä½" width="70"/> |
| | | <el-table-column prop="number" label="åºåæ°é" sortable min-width="110"/> |
| | | <el-table-column prop="money" label="åä»·ï¼å«ç¨ï¼" sortable width="130"/> |
| | | <el-table-column prop="money1" label="æ»ä»·ï¼å«ç¨ï¼" width="130" /> |
| | | <el-table-column prop="money2" label="ææ¬åä»·" /> |
| | | <el-table-column prop="inventoryQuantity" label="åºåæ°é" sortable min-width="110"/> |
| | | <el-table-column prop="priceIncludingTax" label="åä»·ï¼å«ç¨ï¼" sortable width="130"/> |
| | | <el-table-column prop="totalPriceIncludingTax" label="æ»ä»·ï¼å«ç¨ï¼" width="130" /> |
| | | <el-table-column prop="costPerUnit" label="ææ¬åä»·" /> |
| | | <el-table-column label="ç
¤è´¨" align="center" v-if="activeTab=== 'officialInventory'" width="600"> |
| | | <el-table-column v-for="col in columnTitle" :key="col.prop" :prop="col.prop" :label="col.label" align="center" sortable min-width="200"/> |
| | | </el-table-column> |
| | | <el-table-column prop="createUser" label="ç»è®°äºº" width="180"/> |
| | | <el-table-column prop="createTime" label="ç»è®°æ¥æ" width="180"/> |
| | | <el-table-column prop="registrant" label="ç»è®°äºº" width="180"/> |
| | | <el-table-column prop="registrationTime" label="ç»è®°æ¥æ" width="180"/> |
| | | <el-table-column fixed="right" label="æä½" min-width="60" align="center" v-if="activeTab !== 'officialInventory'"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" @click="reviewDia(scope.row)">å®¡æ ¸</el-button> |
| | |
| | | </el-card> |
| | | <!-- å®¡æ ¸å¾
å
¥åºå¼¹æ¡ --> |
| | | <el-dialog title="å®¡æ ¸å
¥åº" v-model="reviewVisible" width="1000px"> |
| | | <el-form :model="form" :rules="rules" ref="userRef" label-width="180px"> |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="180px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ä¾è´§ååç§°" prop="userName"> |
| | | <el-input v-model="form.name" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="ä¾è´§ååç§°" prop="supplierName"> |
| | | <el-input v-model="form.supplierName" placeholder="请è¾å
¥ä¾è´§ååç§°" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç
¤ç§" prop="nickName"> |
| | | <el-input v-model="form.type" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-form-item label="ç
¤ç§" prop="coal"> |
| | | <el-input v-model="form.coal" placeholder="请è¾å
¥ç
¤ç§" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åä½" prop="userName"> |
| | | <el-input v-model="form.unit" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="åä½" prop="unit"> |
| | | <el-input v-model="form.unit" placeholder="请è¾å
¥åä½" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åºåæ°é" prop="nickName"> |
| | | <el-input v-model="form.num" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-form-item label="åºåæ°é" prop="inventoryQuantity"> |
| | | <el-input v-model="form.inventoryQuantity" placeholder="请è¾å
¥åºåæ°é" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åä»·(å«ç¨)" prop="userName"> |
| | | <el-input v-model="form.priceOne" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="åä»·(å«ç¨)" prop="priceIncludingTax"> |
| | | <el-input v-model="form.priceIncludingTax" placeholder="请è¾å
¥åä»·(å«ç¨)" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="æ»ä»·(å«ç¨)" prop="nickName"> |
| | | <el-input v-model="form.priceAll" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-form-item label="æ»ä»·(å«ç¨)" prop="totalPriceIncludingTax"> |
| | | <el-input v-model="form.totalPriceIncludingTax" placeholder="请è¾å
¥æ»ä»·(å«ç¨)" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ææ¬åä»·" prop="userName"> |
| | | <el-input v-model="form.price" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="ææ¬åä»·" prop="costPerUnit"> |
| | | <el-input v-model="form.costPerUnit" placeholder="请è¾å
¥ææ¬åä»·" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç
¤è´¨" prop="userName"> |
| | | <el-input v-model="form.type2" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="ç
¤è´¨æ¹æ¡" prop="qualityPlan"> |
| | | <el-select v-model="form.qualityPlan" placeholder="è¯·éæ©" @change="coalFieldListOption" clearable> |
| | | <el-option |
| | | v-for="dict in qualityPlanOption" |
| | | :key="dict.id" |
| | | :label="dict.plan" |
| | | :value="dict.id" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider></el-divider> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="å
¨æ°´å«éç¾åæ¯ (%)" prop="userName"> |
| | | <el-input v-model="form.value1" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åºå®ç¢³ç¾åæ¯ (%)" prop="nickName"> |
| | | <el-input v-model="form.value2" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ä½ä½åçéï¼åä½ï¼åå¡/åå
ï¼" prop="userName"> |
| | | <el-input v-model="form.value3" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç°åç¾åæ¯ (%)" prop="nickName"> |
| | | <el-input v-model="form.value4" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-col :span="12" v-for="item in filteredList" :key="item.id"> |
| | | <el-form-item :label="item.fieldName"> |
| | | <el-input v-model="form[item.fields]" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-form :model="form" :rules="rules" ref="userRef" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ä¾è´§ååç§°" prop="userName"> |
| | | <el-input v-model="form.userName" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="ä¾è´§ååç§°" prop="supplierName"> |
| | | <el-input v-model="form.supplierName" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç
¤ç§" prop="nickName"> |
| | | <el-input v-model="form.nickName" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-form-item label="ç
¤ç§" prop="coal"> |
| | | <el-input v-model="form.coal" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="åä»·(å«ç¨)" prop="userName"> |
| | | <el-input v-model="form.userName" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | <el-form-item label="åä»·(å«ç¨)" prop="priceIncludingTax"> |
| | | <el-input v-model="form.priceIncludingTax" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ææ¬åä»·" prop="nickName"> |
| | | <el-input v-model="form.nickName" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | <el-form-item label="æ»ä»·(å«ç¨)" prop="totalPriceIncludingTax"> |
| | | <el-input v-model="form.totalPriceIncludingTax" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ææ¬åä»·" prop="costPerUnit"> |
| | | <el-input v-model="form.costPerUnit" placeholder="请è¾å
¥å§å" maxlength="30" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="ç
¤è´¨" prop="userName"> |
| | | <el-input v-model="form.userName" placeholder="请è¾å
¥ææºå·ç " maxlength="30" /> |
| | |
| | | |
| | | <script setup> |
| | | import {onMounted, ref} from "vue"; |
| | | import {Delete, Download, Plus, Refresh} from "@element-plus/icons-vue"; |
| | | import {Delete, Download, Refresh} from "@element-plus/icons-vue"; |
| | | import Pagination from "@/components/Pagination/index.vue"; |
| | | import { |
| | | addOrEditCoalValue, |
| | | coalFieldList, |
| | | coalPlanList, officialInventoryList, |
| | | pendingInventoryList |
| | | } from "@/api/warehouseManagement/index.js"; |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | |
| | | const tableData = ref([]) |
| | | const selectedRows = ref([]) |
| | | const columns = ref([]) |
| | | const qualityPlanOption = ref([]) |
| | | const filteredList = ref([]) |
| | | const tableLoading = ref(false); |
| | | const total = ref(0); |
| | | const pageNum = ref(1); |
| | |
| | | // åå¹¶å¼¹æ¡ |
| | | const mergeVisible = ref(false) |
| | | const data = reactive({ |
| | | form: {}, |
| | | form: { |
| | | supplierName: '', |
| | | coal: '', |
| | | unit: '', |
| | | inventoryQuantity: '', |
| | | priceIncludingTax: '', |
| | | totalPriceIncludingTax: '', |
| | | costPerUnit: '', |
| | | qualityPlan: '', |
| | | planId: '', |
| | | }, |
| | | rules: { |
| | | // userName: [{ required: true, message: "ç»å½è´¦å·ä¸è½ä¸ºç©º", trigger: "blur" }], |
| | | // nickName: [{ required: true, message: "ç¨æ·å§åä¸è½ä¸ºç©º", trigger: "blur" }], |
| | | // roleIds: [{ required: true, message: "è§è²ä¸è½ä¸ºç©º", trigger: "change" }], |
| | | // deptId: [{ required: true, message: "é¨é¨ä¸è½ä¸ºç©º", trigger: "change" }], |
| | | // password: [{ required: true, message: "ç¨æ·å¯ç ä¸è½ä¸ºç©º", trigger: "blur" }], |
| | | supplierName: [{ required: true, message: "请è¾å
¥ä¾åºååç§°", trigger: "blur" }], |
| | | coal: [{ required: true, message: "请è¾å
¥ç
¤ç§", trigger: "blur" }], |
| | | unit: [{ required: true, message: "请è¾å
¥åä½", trigger: "blur" }], |
| | | qualityPlan: [{ required: true, message: "è¯·éæ©", trigger: "change" }], |
| | | } |
| | | }) |
| | | |
| | |
| | | ]); |
| | | // æ¥è¯¢åæ° |
| | | const queryParams = reactive({ |
| | | searchText: "", |
| | | supplierName: "", |
| | | identifyNumber: "", |
| | | address: "", |
| | | coal: "", |
| | | }) |
| | | const columnTitle = ref([]) |
| | | onMounted(() => { |
| | |
| | | }); |
| | | // æ ç¾é¡µç¹å» |
| | | const handleTabClick = (tab) => { |
| | | getList(); |
| | | tableLoading.value = true; |
| | | tabName.value = tab.props.name; |
| | | tableData.value = []; |
| | | getList(); |
| | | // switch (tabName.value) { |
| | | // case "pendingInbound": |
| | | // columns.value = pendingColumns; |
| | | // break; |
| | | // case "officialInventory": |
| | | // columns.value = officialColumns; |
| | | // break; |
| | | // } |
| | | setTimeout(() => { |
| | | tableLoading.value = false; |
| | | }, 500); |
| | | }; |
| | | // ç¹å»æ¥è¯¢ |
| | | const handleQuery = () => { |
| | | tableLoading.value = true; |
| | | setTimeout(() => { |
| | | tableLoading.value = false; |
| | | }, 500); |
| | | pageNum.value = 1 |
| | | pageSize.value = 10 |
| | | getList() |
| | | } |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | |
| | | {prop: 'value2', label: 'ç¾åæ¯2'}, |
| | | {prop: 'value3', label: 'ç¾åæ¯3'}, |
| | | ] |
| | | setTimeout(() => { |
| | | // ææ¶å¼å
¥æµè¯æ°æ® |
| | | tableData.value = [ |
| | | { name: "ä¾åºåA", type: "å¨åç
¤", unit: "å¨", number: 120, money: 500, money1: 200, money2: 200, money3: 300, money4: 'é«ä½', createUser: 'admin', createTime: '2025-06-01', value1: 12, value2: 23, value3: 14 }, |
| | | { name: "ä¾åºåA", type: "å¨åç
¤", unit: "å¨", number: 100, money: 600, money1: 300, money2: 300, money3: 300, money4: 'ä½ä½', createUser: 'admin', createTime: '2025-06-01', value1: 14, value2: 23, value3: 14 }, |
| | | { name: "ä¾åºåB", type: "ç¦ç
¤", unit: "å¨", number: 300, money: 789,money1: 400, money2: 400, money3: 400, money4: 'é«ä½', createUser: 'admin', createTime: '2025-06-01', value1: 12, value2: 13, value3: 23 }, |
| | | { name: "ä¾åºåB", type: "ç¦ç
¤", unit: "å¨", number: 256, money: 800, money1: 420, money2: 420, money3: 420, money4: 'ä½ä½', createUser: 'admin', createTime: '2025-06-01', value1: 14, value2: 23, value3: 14 }, |
| | | { name: "ä¾åºåC", type: "æ çç
¤", unit: "å¨", number: 256, money: 700, money1: 300, money2: 300, money3: 300, money4: 'é«ä½', createUser: 'admin', createTime: '2025-06-01', value1: 12, value2: 13, value3: 32 } |
| | | ]; |
| | | total.value = tableData.value.length; |
| | | tableLoading.value = false; |
| | | }, 500); |
| | | if (tabName.value === "pendingInbound") { |
| | | pendingInventoryList({ ...queryParams }).then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | | }) |
| | | } else { |
| | | officialInventoryList({ ...queryParams }).then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | | }) |
| | | } |
| | | }; |
| | | // éç½®æ¥è¯¢ |
| | | const resetQuery = () => { |
| | |
| | | }); |
| | | handleQuery(); |
| | | }; |
| | | // åå¹¶ç¸åè¡çæ¹æ³ |
| | | const mergeSameRows = ({ row, column, rowIndex, columnIndex }) => { |
| | | const fieldsToMerge = ['number', 'money', 'money1', 'money2', 'money3', 'money4', 'type', 'unit', 'name']; |
| | | |
| | | if (fieldsToMerge.includes(column.property)) { |
| | | const prevRow = tableData.value[rowIndex - 1] |
| | | const nextRow = tableData.value[rowIndex + 1] |
| | | // 夿å½åè¡åä¸ä¸è¡æ¯å¦ç¸ç |
| | | if ( |
| | | (!prevRow || prevRow[column.property] !== row[column.property]) && |
| | | (!nextRow || nextRow[column.property] === row[column.property]) |
| | | ) { |
| | | let count = 1 |
| | | while ( |
| | | tableData.value[rowIndex + count] && |
| | | tableData.value[rowIndex + count][column.property] === row[column.property] |
| | | ) { |
| | | count++ |
| | | } |
| | | return { rowspan: count, colspan: 1 } |
| | | } else if (prevRow && prevRow[column.property] === row[column.property]) { |
| | | // éè被åå¹¶çåå
æ ¼ |
| | | return { rowspan: 0, colspan: 0 } |
| | | } |
| | | return { rowspan: 1, colspan: 1 } |
| | | } |
| | | |
| | | // å
¶ä»åä¸åå¹¶ |
| | | return { rowspan: 1, colspan: 1 } |
| | | } |
| | | // è¡¨æ ¼éæ©æ°æ® |
| | | const selectionChange = (rows) => { |
| | | selectedRows.value = rows |
| | |
| | | // æå¼å®¡æ ¸å¼¹æ¡ |
| | | const reviewDia = (row) => { |
| | | reviewVisible.value = true |
| | | form.value = {...row} |
| | | form.value.planId = form.value.id |
| | | coalPlanListOptions() |
| | | } |
| | | // æ¥è¯¢ç
¤è´¨æ¹æ¡ä¸ææ¡ |
| | | const coalPlanListOptions = () => { |
| | | coalPlanList().then(res => { |
| | | qualityPlanOption.value = res.data |
| | | }) |
| | | } |
| | | // æ¥è¯¢ç
¤è´¨æ¹æ¡å段 |
| | | const coalFieldListOption = (id) => { |
| | | coalFieldList({id: id}).then(res => { |
| | | filteredList.value = res.data |
| | | if (!id) { |
| | | filteredList.value = [] |
| | | } |
| | | }) |
| | | } |
| | | // åå¹¶åºåæ°æ®æ¹æ³ |
| | | const mergeRows = () => { |
| | |
| | | } |
| | | // æäº¤å®¡æ ¸è¡¨å |
| | | const submitReviewForm = () => { |
| | | |
| | | proxy.$refs.formRef.validate((valid) => { |
| | | if (valid) { |
| | | delete form.value.registrationTime |
| | | delete form.value.createTime |
| | | delete form.value.updateTime |
| | | delete form.value.id |
| | | form.value.fieldValue = filteredList.value.map(item => ({ |
| | | [item.fields]: form.value[item.fields] |
| | | })) |
| | | addOrEditCoalValue(form.value).then(() => { |
| | | cancelReview() |
| | | proxy.$modal.msgSuccess('æäº¤æå') |
| | | handleQuery() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | // å
³éå®¡æ ¸å¼¹æ¡ |
| | | const cancelReview = () => { |
| | | proxy.$refs.formRef.resetFields() |
| | | reviewVisible.value = false |
| | | } |
| | | </script> |