| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-table ref="multipleTable" |
| | | v-loading="tableLoading" |
| | | :border="border" |
| | | :data="tableData" |
| | | :header-cell-style="{ background: '#F0F1F5', color: '#333333' }" |
| | | :height="height" |
| | | :highlight-current-row="highlightCurrentRow" |
| | | :row-class-name="rowClassName" |
| | | :row-style="rowStyle" |
| | | :row-key="rowKey" |
| | | :style="tableStyle" |
| | | tooltip-effect="dark" |
| | | :expand-row-keys="expandRowKeys" |
| | | :show-summary="isShowSummary" |
| | | :summary-method="summaryMethod" |
| | | @row-click="rowClick" |
| | | @current-change="currentChange" |
| | | @selection-change="handleSelectionChange" |
| | | @expand-change="expandChange" |
| | | @select-all="handleSelectAll" |
| | | class="lims-table"> |
| | | <el-table-column align="center" |
| | | type="selection" |
| | | width="55" |
| | | v-if="isSelection" |
| | | :selectable="selectable" /> |
| | | <el-table-column align="center" |
| | | label="åºå·" |
| | | type="index" |
| | | width="60" /> |
| | | <el-table-column v-for="(item, index) in column" |
| | | :key="index" |
| | | :column-key="item.columnKey" |
| | | :filter-method="item.filterHandler" |
| | | :filter-multiple="item.filterMultiple" |
| | | :filtered-value="item.filteredValue" |
| | | :filters="item.filters" |
| | | :fixed="item.fixed" |
| | | :label="item.label" |
| | | :prop="item.prop" |
| | | :show-overflow-tooltip="item.dataType !== 'action' && item.dataType !== 'slot'" |
| | | :align="item.align" |
| | | :sortable="!!item.sortable" |
| | | :type="item.type" |
| | | :width="item.width"> |
| | | <template #header="scope"> |
| | | <div class="pim-table-header-cell"> |
| | | <div class="pim-table-header-title"> |
| | | {{ item.label }} |
| | | </div> |
| | | <div v-if="item.headerSlot" |
| | | class="pim-table-header-extra"> |
| | | <slot :name="item.headerSlot" |
| | | :column="scope.column" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template v-if="item.hasOwnProperty('colunmTemplate')" |
| | | #[item.colunmTemplate]="scope"> |
| | | <slot v-if="item.theadSlot" |
| | | :name="item.theadSlot" |
| | | :index="scope.$index" |
| | | :row="scope.row" /> |
| | | </template> |
| | | <template #default="scope"> |
| | | <!-- ææ§½ --> |
| | | <div v-if="item.dataType == 'slot'"> |
| | | <slot v-if="item.slot" |
| | | :index="scope.$index" |
| | | :name="item.slot" |
| | | :row="scope.row" /> |
| | | </div> |
| | | <!-- è¿åº¦æ¡ --> |
| | | <div v-else-if="item.dataType == 'progress'"> |
| | | <el-progress :percentage="Number(scope.row[item.prop])" /> |
| | | </div> |
| | | <!-- å¾ç --> |
| | | <div v-else-if="item.dataType == 'image'"> |
| | | <img :src="javaApi + '/img/' + scope.row[item.prop]" |
| | | alt="" |
| | | style="width: 40px; height: 40px; margin-top: 10px" /> |
| | | </div> |
| | | <!-- tag --> |
| | | <div v-else-if="item.dataType == 'tag'"> |
| | | <el-tag v-if=" |
| | | typeof dataTypeFn(scope.row[item.prop], item.formatData) === |
| | | 'string' |
| | | " |
| | | :title="formatters(scope.row[item.prop], item.formatData)" |
| | | :type="formatType(scope.row[item.prop], item.formatType)"> |
| | | {{ formatters(scope.row[item.prop], item.formatData) }} |
| | | </el-tag> |
| | | <el-tag v-for="(tag, index) in dataTypeFn( |
| | | scope.row[item.prop], |
| | | item.formatData |
| | | )" |
| | | v-else-if=" |
| | | typeof dataTypeFn(scope.row[item.prop], item.formatData) === |
| | | 'object' |
| | | " |
| | | :key="index" |
| | | :title="formatters(scope.row[item.prop], item.formatData)" |
| | | :type="formatType(tag, item.formatType)"> |
| | | {{ item.tagGroup ? tag[item.tagGroup.label] ?? tag : tag }} |
| | | </el-tag> |
| | | <el-tag v-else |
| | | :title="formatters(scope.row[item.prop], item.formatData)" |
| | | :type="formatType(scope.row[item.prop], item.formatType)"> |
| | | {{ formatters(scope.row[item.prop], item.formatData) }} |
| | | </el-tag> |
| | | </div> |
| | | <!-- æé® --> |
| | | <div v-else-if="item.dataType == 'action'" |
| | | @click.stop> |
| | | <template v-for="(o, key) in item.operation" |
| | | :key="key"> |
| | | <el-button v-show="o.type != 'upload'" |
| | | v-if="o.showHide ? o.showHide(scope.row) : true" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | :plain="o.plain" |
| | | type="primary" |
| | | :style="{ |
| | | color: |
| | | o.name === 'å é¤' || o.name === 'delete' |
| | | ? '#f56c6c' |
| | | : o.color, |
| | | }" |
| | | link |
| | | @click.stop="o.clickFun(scope.row)" |
| | | :key="key"> |
| | | {{ o.name }} |
| | | </el-button> |
| | | <el-upload :action=" |
| | | javaApi + |
| | | o.url + |
| | | '?id=' + |
| | | (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id) |
| | | " |
| | | ref="uploadRef" |
| | | :multiple="o.multiple ? o.multiple : false" |
| | | :limit="1" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false" |
| | | :accept=" |
| | | o.accept |
| | | ? o.accept |
| | | : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' |
| | | " |
| | | v-if="o.type == 'upload'" |
| | | style="display: inline-block; width: 50px" |
| | | v-show="o.showHide ? o.showHide(scope.row) : true" |
| | | :headers="uploadHeader" |
| | | :before-upload="(file) => beforeUpload(file, scope.$index)" |
| | | :on-change=" |
| | | (file, fileList) => handleChange(file, fileList, scope.$index) |
| | | " |
| | | :on-error=" |
| | | (error, file, fileList) => |
| | | onError(error, file, fileList, scope.$index) |
| | | " |
| | | :on-success=" |
| | | (response, file, fileList) => |
| | | handleSuccessUp(response, file, fileList, scope.$index) |
| | | " |
| | | :on-exceed="onExceed" |
| | | :show-file-list="false"> |
| | | <el-button link |
| | | type="primary" |
| | | :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button> |
| | | </el-upload> |
| | | </template> |
| | | </div> |
| | | <!-- å¯ç¹å»çæå --> |
| | | <div v-else-if="item.dataType == 'link'" |
| | | class="cell link" |
| | | style="width: 100%" |
| | | @click="goLink(scope.row, item.linkMethod)"> |
| | | <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span> |
| | | </div> |
| | | <!-- é»è®¤çº¯å±ç¤ºæ°æ® --> |
| | | <div v-else |
| | | class="cell" |
| | | style="width: 100%"> |
| | | <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span> |
| | | <span v-else>{{ |
| | | formatters(scope.row[item.prop], item.formatData) |
| | | }}</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination v-if="isShowPagination" |
| | | :total="page.total" |
| | | :layout="page.layout" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationSearch" /> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import pagination from "../../../../components/PIMTable/Pagination.vue"; |
| | | import { ref, inject, getCurrentInstance } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | |
| | | // è·åå
¨å±ç uploadHeader |
| | | const { proxy } = getCurrentInstance(); |
| | | const uploadHeader = proxy.uploadHeader; |
| | | const javaApi = proxy.javaApi; |
| | | |
| | | const emit = defineEmits([ |
| | | "pagination", |
| | | "expand-change", |
| | | "selection-change", |
| | | "row-click", |
| | | ]); |
| | | |
| | | // Filters |
| | | const typeFn = (val, row) => { |
| | | return typeof val === "function" ? val(row) : val; |
| | | }; |
| | | |
| | | const formatters = (val, format) => { |
| | | return typeof format === "function" ? format(val) : val; |
| | | }; |
| | | |
| | | // Propsï¼ä½¿ç¨ defineProps çé TS å½¢å¼ï¼ |
| | | const props = defineProps({ |
| | | tableLoading: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | height: { |
| | | type: [Number, String], |
| | | default: "calc(100vh - 22em)", |
| | | }, |
| | | expandRowKeys: { |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | summaryMethod: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | rowClick: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | currentChange: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | border: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | isSelection: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | selectable: { |
| | | type: Function, |
| | | default: () => true, |
| | | }, |
| | | isShowPagination: { |
| | | type: Boolean, |
| | | default: true, |
| | | }, |
| | | isShowSummary: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | highlightCurrentRow: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | headerCellStyle: { |
| | | type: Object, |
| | | default: () => ({}), |
| | | }, |
| | | column: { |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | rowClassName: { |
| | | type: Function, |
| | | default: () => "", |
| | | }, |
| | | rowStyle: { |
| | | type: [Object, Function], |
| | | default: () => ({}), |
| | | }, |
| | | tableData: { |
| | | type: Array, |
| | | default: () => [], |
| | | }, |
| | | rowKey: { |
| | | type: String, |
| | | default: "id", |
| | | }, |
| | | page: { |
| | | type: Object, |
| | | default: () => ({ |
| | | total: 0, |
| | | current: 0, |
| | | size: 10, |
| | | layout: "total, sizes, prev, pager, next, jumper", |
| | | }), |
| | | }, |
| | | total: { |
| | | type: Number, |
| | | default: 0, |
| | | }, |
| | | tableStyle: { |
| | | type: [String, Object], |
| | | default: () => ({ width: "100%" }), |
| | | }, |
| | | }); |
| | | |
| | | // Data |
| | | const multipleTable = ref(null); |
| | | const uploadRefs = ref([]); |
| | | const currentFiles = ref({}); |
| | | const uploadKeys = ref({}); |
| | | |
| | | const indexMethod = index => { |
| | | return (props.page.current - 1) * props.page.size + index + 1; |
| | | }; |
| | | |
| | | // ç¹å» link äºä»¶ |
| | | const goLink = (row, linkMethod) => { |
| | | if (!linkMethod) { |
| | | return ElMessage.warning("请é
ç½® link äºä»¶"); |
| | | } |
| | | const parentMethod = getParentMethod(linkMethod); |
| | | if (typeof parentMethod === "function") { |
| | | parentMethod(row); |
| | | } else { |
| | | console.warn(`ç¶ç»ä»¶ä¸æªæ¾å°æ¹æ³: ${linkMethod}`); |
| | | } |
| | | }; |
| | | |
| | | // è·åç¶ç»ä»¶æ¹æ³ï¼ç¤ºä¾å®ç°ï¼ |
| | | const getParentMethod = methodName => { |
| | | const parentMethods = inject("parentMethods", {}); |
| | | return parentMethods[methodName]; |
| | | }; |
| | | |
| | | const dataTypeFn = (val, format) => { |
| | | if (typeof format === "function") { |
| | | return format(val); |
| | | } else return val; |
| | | }; |
| | | |
| | | const formatType = (val, format) => { |
| | | if (typeof format === "function") { |
| | | return format(val); |
| | | } else return ""; |
| | | }; |
| | | |
| | | // æä»¶ååå¤ç |
| | | const handleChange = (file, fileList, index) => { |
| | | if (fileList.length > 1) { |
| | | const earliestFile = fileList[0]; |
| | | uploadRefs.value[index]?.handleRemove(earliestFile); |
| | | } |
| | | currentFiles.value[index] = file; |
| | | }; |
| | | |
| | | // æä»¶ä¸ä¼ åæ ¡éª |
| | | const beforeUpload = (rawFile, index) => { |
| | | currentFiles.value[index] = {}; |
| | | if (rawfile.size > 1024 * 1024 * 10 * 10) { |
| | | ElMessage.error("ä¸ä¼ æä»¶ä¸è¶
è¿10M"); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | |
| | | // ä¸ä¼ æå |
| | | const handleSuccessUp = (response, file, fileList, index) => { |
| | | if (response.code == 200) { |
| | | if (uploadRefs[index]) { |
| | | uploadRefs[index].clearFiles(); |
| | | } |
| | | currentFiles[index] = file; |
| | | ElMessage.success("ä¸ä¼ æå"); |
| | | resetUploadComponent(index); |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | }; |
| | | |
| | | const resetUploadComponent = index => { |
| | | uploadKeys[index] = Date.now(); |
| | | }; |
| | | |
| | | // ä¸ä¼ 失败 |
| | | const onError = (error, file, fileList, index) => { |
| | | ElMessage.error("æä»¶ä¸ä¼ 失败ï¼è¯·éè¯"); |
| | | if (uploadRefs.value[index]) { |
| | | uploadRefs.value[index].clearFiles(); |
| | | } |
| | | }; |
| | | |
| | | // æä»¶æ°éè¶
éæç¤º |
| | | const onExceed = () => { |
| | | ElMessage.warning("è¶
åºæä»¶ä¸ªæ°"); |
| | | }; |
| | | |
| | | const paginationSearch = ({ page, limit }) => { |
| | | emit("pagination", { page: page, limit: limit }); |
| | | }; |
| | | |
| | | const rowClick = row => { |
| | | emit("row-click", row); |
| | | }; |
| | | |
| | | const expandChange = (row, expandedRows) => { |
| | | emit("expand-change", row, expandedRows); |
| | | }; |
| | | |
| | | const handleSelectionChange = newSelection => { |
| | | emit("selection-change", newSelection); |
| | | }; |
| | | |
| | | // å¤çå
¨éæä½ |
| | | const handleSelectAll = selection => { |
| | | if (selection.length) { |
| | | console.log(selection, "selection"); |
| | | // å
¨éæ¶ï¼åªéæ©å¯éæ©çè¡ |
| | | const selectableRows = props.tableData.filter(row => props.selectable(row)); |
| | | // æ¸
空å½åéæ© |
| | | multipleTable.value.clearSelection(); |
| | | // åªéæ©å¯éæ©çè¡ |
| | | selectableRows.forEach(row => { |
| | | multipleTable.value.toggleRowSelection(row, true); |
| | | }); |
| | | } else { |
| | | // åæ¶å
¨éæ¶ï¼åªåæ¶å¯éæ©çè¡çéæ© |
| | | props.tableData.forEach(row => { |
| | | if (props.selectable(row)) { |
| | | multipleTable.value.toggleRowSelection(row, false); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .cell { |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | padding-right: 0 !important; |
| | | padding-left: 0 !important; |
| | | } |
| | | |
| | | .pim-table-header-extra :deep(.el-input), |
| | | .pim-table-header-extra :deep(.el-select) { |
| | | width: 100%; |
| | | } |
| | | </style> |
| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <el-form :model="searchForm" |
| | | :inline="true"> |
| | | <el-form-item label="车é´:"> |
| | | <el-select v-model="searchForm.workshop" |
| | | placeholder="è¯·éæ©" |
| | | clearable |
| | | style="width: 160px;" |
| | | @change="handleQuery"> |
| | | <el-option label="车é´1" |
| | | value="1" /> |
| | | <el-option label="车é´2" |
| | | value="2" /> |
| | | <el-option label="车é´3" |
| | | value="3" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ç¶æ:"> |
| | | <el-select v-model="searchForm.status" |
| | | placeholder="è¯·éæ©" |
| | | clearable |
| | | style="width: 160px;" |
| | | @change="handleQuery"> |
| | | <el-option label="å¾
å¤ç" |
| | | value="pending" /> |
| | | <el-option label="è¿è¡ä¸" |
| | | value="processing" /> |
| | | <el-option label="已宿" |
| | | value="completed" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" |
| | | @click="handleQuery">æç´¢</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div> |
| | | <el-button type="primary" |
| | | @click="handleMerge">åå¹¶ä¸å</el-button> |
| | | <el-button type="info" |
| | | @click="showCategorySummaryDialog = true">产åç±»å«æ±æ»</el-button> |
| | | <!-- <el-button type="danger" |
| | | @click="handleDelete">å é¤</el-button> --> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <PIMTable rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :tableLoading="tableLoading" |
| | | :isSelection="true" |
| | | :selectable="isSelectable" |
| | | @selection-change="handleSelectionChange" |
| | | @pagination="pagination"> |
| | | </PIMTable> |
| | | </div> |
| | | <!-- åå¹¶ä¸åå¼¹çª --> |
| | | <el-dialog v-model="isShowNewModal" |
| | | title="åå¹¶ä¸å" |
| | | width="500px"> |
| | | <el-form :model="mergeForm" |
| | | label-width="120px"> |
| | | <el-form-item label="ç产计åå·"> |
| | | <el-input v-model="mergeForm.productionPlanNo" |
| | | disabled /> |
| | | </el-form-item> |
| | | <el-form-item label="çäº§è®¡åæ°é"> |
| | | <el-input-number v-model="mergeForm.totalManufactureQuantity" |
| | | :min="1" |
| | | :step="1" |
| | | style="width: 100%" /> |
| | | </el-form-item> |
| | | <el-form-item label="夿³¨"> |
| | | <el-input v-model="mergeForm.remark" |
| | | type="textarea" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="isShowNewModal = false">åæ¶</el-button> |
| | | <el-button type="primary" |
| | | @click="handleMergeSubmit">ç¡®å®ä¸å</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <!-- 产åç±»å«æ±æ»å¼¹çª --> |
| | | <el-dialog v-model="showCategorySummaryDialog" |
| | | title="产åç±»å«æ±æ»ç»è®¡" |
| | | width="400px"> |
| | | <el-table :data="categorySummary" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column prop="productCategory" |
| | | label="产åç±»å«" |
| | | align="center" |
| | | width="150" /> |
| | | <el-table-column prop="totalManufactureQuantity" |
| | | label="æ»å¶é æ°é" |
| | | align="center" /> |
| | | </el-table> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="showCategorySummaryDialog = false">å
³é</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted, ref } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | import { productOrderListPage } from "@/api/productionManagement/productionOrder.js"; |
| | | import PIMTable from "./components/PIMTable.vue"; |
| | | |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "æ¥æº", |
| | | prop: "source", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | label: "ç¶æ", |
| | | prop: "status", |
| | | width: "80px", |
| | | }, |
| | | { |
| | | label: "å®¡æ ¸ç¶æ", |
| | | prop: "auditStatus", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | label: "订åå·", |
| | | prop: "orderNo", |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "ç产计åå·", |
| | | prop: "productionPlanNo", |
| | | width: "140px", |
| | | }, |
| | | { |
| | | label: "é¶ä»¶å·", |
| | | prop: "partNo", |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "é¶ä»¶", |
| | | prop: "partName", |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "产åç±»å«", |
| | | prop: "productCategory", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | label: "å·¥èºæä»¶å·", |
| | | prop: "processFileNo", |
| | | width: "140px", |
| | | }, |
| | | { |
| | | label: "é宿°é", |
| | | prop: "salesQuantity", |
| | | width: "100px", |
| | | align: "right", |
| | | }, |
| | | { |
| | | label: "å¶é æ°é", |
| | | prop: "manufactureQuantity", |
| | | width: "100px", |
| | | align: "right", |
| | | }, |
| | | { |
| | | label: "é¶ä»¶åä½", |
| | | prop: "partUnit", |
| | | width: "80px", |
| | | }, |
| | | { |
| | | label: "主计åéæ±æ¥æ", |
| | | prop: "mainPlanDemandDate", |
| | | formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""), |
| | | width: "140px", |
| | | }, |
| | | { |
| | | label: "æ¿è¯ºæ¥æ", |
| | | prop: "commitmentDate", |
| | | formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""), |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "å¶é 屿§", |
| | | prop: "manufactureProperty", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | label: "夿³¨", |
| | | prop: "remark", |
| | | width: "150px", |
| | | }, |
| | | { |
| | | label: "æ´æ°æ¶é´", |
| | | prop: "updateTime", |
| | | formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""), |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "æ´æ°äºº", |
| | | prop: "updateBy", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | label: "å建æ¶é´", |
| | | prop: "createTime", |
| | | formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""), |
| | | width: "120px", |
| | | }, |
| | | { |
| | | label: "å建人", |
| | | prop: "createBy", |
| | | width: "100px", |
| | | }, |
| | | { |
| | | dataType: "action", |
| | | label: "æä½", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 200, |
| | | operation: [ |
| | | { |
| | | name: "ä¸å", |
| | | type: "text", |
| | | clickFun: row => { |
| | | // åç¬ä¸åæä½ |
| | | // è®¾ç½®è¡¨åæ°æ® |
| | | mergeForm.productionPlanNo = row.productionPlanNo; |
| | | mergeForm.totalManufactureQuantity = row.manufactureQuantity; |
| | | mergeForm.remark = ""; |
| | | |
| | | // æå¼å¼¹çª |
| | | isShowNewModal.value = true; |
| | | }, |
| | | }, |
| | | { |
| | | name: "追踪è¿åº¦", |
| | | type: "text", |
| | | clickFun: row => { |
| | | // 追踪è¿åº¦æä½ |
| | | ElMessage.warning("追踪è¿åº¦åè½å¾
å¼å"); |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | total: 0, |
| | | }); |
| | | const selectedRows = ref([]); |
| | | |
| | | // 产åç±»å«æ±æ»ç»è®¡æ°æ® |
| | | const categorySummary = ref([]); |
| | | // 产åç±»å«æ±æ»å¼¹çªæ§å¶ |
| | | const showCategorySummaryDialog = ref(false); |
| | | |
| | | // åå¹¶ä¸åå¼¹çªæ§å¶ |
| | | const isShowNewModal = ref(false); |
| | | // åå¹¶ä¸åè¡¨åæ°æ® |
| | | const mergeForm = reactive({ |
| | | productionPlanNo: "", |
| | | totalManufactureQuantity: 0, |
| | | remark: "", |
| | | }); |
| | | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | customerName: "", |
| | | salesContractNo: "", |
| | | projectName: "", |
| | | productCategory: "", |
| | | specificationModel: "", |
| | | }, |
| | | }); |
| | | const { searchForm } = toRefs(data); |
| | | |
| | | // æ¥è¯¢å表 |
| | | /** æç´¢æé®æä½ */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const pagination = obj => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | // 计ç®äº§åç±»å«æ±æ»ç»è®¡ |
| | | const calculateCategorySummary = () => { |
| | | const summary = {}; |
| | | |
| | | // éåè¡¨æ ¼æ°æ®ï¼æäº§åç±»å«æ±æ» |
| | | tableData.value.forEach(row => { |
| | | const category = row.productCategory; |
| | | if (!summary[category]) { |
| | | summary[category] = { |
| | | productCategory: category, |
| | | totalManufactureQuantity: 0, |
| | | }; |
| | | } |
| | | summary[category].totalManufactureQuantity += row.manufactureQuantity; |
| | | }); |
| | | |
| | | // 转æ¢ä¸ºæ°ç»æ ¼å¼ |
| | | categorySummary.value = Object.values(summary); |
| | | }; |
| | | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | // æé ä¸ä¸ªæ°ç对象ï¼ä¸å
å«entryDateåæ®µ |
| | | const params = { ...searchForm.value, ...page }; |
| | | params.entryDate = undefined; |
| | | tableData.value = [ |
| | | { |
| | | id: 1, |
| | | source: "éå®è®¢å", |
| | | status: "å¾
å¤ç", |
| | | auditStatus: "å·²å®¡æ ¸", |
| | | orderNo: "SO20260301001", |
| | | productionPlanNo: "PP20260301001", |
| | | partNo: "P001", |
| | | partName: "é¶ä»¶A", |
| | | productCategory: "ç±»å«1", |
| | | processFileNo: "PF20260301001", |
| | | salesQuantity: 100, |
| | | manufactureQuantity: 105, |
| | | partUnit: "个", |
| | | mainPlanDemandDate: "2026-03-15", |
| | | commitmentDate: "2026-03-10", |
| | | manufactureProperty: "常è§", |
| | | remark: "", |
| | | updateTime: "2026-03-01", |
| | | updateBy: "admin", |
| | | createTime: "2026-03-01", |
| | | createBy: "admin", |
| | | }, |
| | | { |
| | | id: 2, |
| | | source: "éå®è®¢å", |
| | | status: "å¾
å¤ç", |
| | | auditStatus: "å·²å®¡æ ¸", |
| | | orderNo: "SO20260301002", |
| | | productionPlanNo: "PP20260301001", |
| | | partNo: "P002", |
| | | partName: "é¶ä»¶B", |
| | | productCategory: "ç±»å«1", |
| | | processFileNo: "PF20260301002", |
| | | salesQuantity: 200, |
| | | manufactureQuantity: 210, |
| | | partUnit: "个", |
| | | mainPlanDemandDate: "2026-03-15", |
| | | commitmentDate: "2026-03-10", |
| | | manufactureProperty: "常è§", |
| | | remark: "", |
| | | updateTime: "2026-03-01", |
| | | updateBy: "admin", |
| | | createTime: "2026-03-01", |
| | | createBy: "admin", |
| | | }, |
| | | { |
| | | id: 3, |
| | | source: "éå®è®¢å", |
| | | status: "è¿è¡ä¸", |
| | | auditStatus: "å·²å®¡æ ¸", |
| | | orderNo: "SO20260301003", |
| | | productionPlanNo: "PP20260301002", |
| | | partNo: "P003", |
| | | partName: "é¶ä»¶C", |
| | | productCategory: "ç±»å«2", |
| | | processFileNo: "PF20260301003", |
| | | salesQuantity: 150, |
| | | manufactureQuantity: 155, |
| | | partUnit: "个", |
| | | mainPlanDemandDate: "2026-03-20", |
| | | commitmentDate: "2026-03-15", |
| | | manufactureProperty: "常è§", |
| | | remark: "", |
| | | updateTime: "2026-03-01", |
| | | updateBy: "admin", |
| | | createTime: "2026-03-01", |
| | | createBy: "admin", |
| | | }, |
| | | { |
| | | id: 4, |
| | | source: "éå®è®¢å", |
| | | status: "è¿è¡ä¸", |
| | | auditStatus: "å·²å®¡æ ¸", |
| | | orderNo: "SO20260301004", |
| | | productionPlanNo: "PP20260301002", |
| | | partNo: "P004", |
| | | partName: "é¶ä»¶D", |
| | | productCategory: "ç±»å«2", |
| | | processFileNo: "PF20260301004", |
| | | salesQuantity: 300, |
| | | manufactureQuantity: 315, |
| | | partUnit: "个", |
| | | mainPlanDemandDate: "2026-03-20", |
| | | commitmentDate: "2026-03-15", |
| | | manufactureProperty: "常è§", |
| | | remark: "", |
| | | updateTime: "2026-03-01", |
| | | updateBy: "admin", |
| | | createTime: "2026-03-01", |
| | | createBy: "admin", |
| | | }, |
| | | { |
| | | id: 5, |
| | | source: "éå®è®¢å", |
| | | status: "已宿", |
| | | auditStatus: "å·²å®¡æ ¸", |
| | | orderNo: "SO20260301005", |
| | | productionPlanNo: "PP20260301003", |
| | | partNo: "P005", |
| | | partName: "é¶ä»¶E", |
| | | productCategory: "ç±»å«3", |
| | | processFileNo: "PF20260301005", |
| | | salesQuantity: 250, |
| | | manufactureQuantity: 260, |
| | | partUnit: "个", |
| | | mainPlanDemandDate: "2026-03-10", |
| | | commitmentDate: "2026-03-05", |
| | | manufactureProperty: "常è§", |
| | | remark: "", |
| | | updateTime: "2026-03-01", |
| | | updateBy: "admin", |
| | | createTime: "2026-03-01", |
| | | createBy: "admin", |
| | | }, |
| | | ]; |
| | | tableLoading.value = false; |
| | | page.total = tableData.value.length; |
| | | // 计ç®äº§åç±»å«æ±æ»ç»è®¡ |
| | | calculateCategorySummary(); |
| | | // productOrderListPage(params) |
| | | // .then(res => { |
| | | // tableLoading.value = false; |
| | | |
| | | // tableData.value = res.data.records; |
| | | // page.total = res.data.total; |
| | | // // 计ç®äº§åç±»å«æ±æ»ç»è®¡ |
| | | // calculateCategorySummary(); |
| | | // }) |
| | | // .catch(() => { |
| | | // tableLoading.value = false; |
| | | // }); |
| | | }; |
| | | |
| | | // éä¸çç产计åå· |
| | | const selectedProductionPlanNo = ref(""); |
| | | |
| | | // è¡¨æ ¼éæ©æ°æ® |
| | | const handleSelectionChange = selection => { |
| | | selectedRows.value = selection; |
| | | // 妿æéä¸çè¡ï¼è®°å½ç¬¬ä¸ä¸ªéä¸è¡çç产计åå· |
| | | if (selection.length > 0) { |
| | | selectedProductionPlanNo.value = selection[0].productionPlanNo; |
| | | } else { |
| | | // å¦ææ²¡æéä¸çè¡ï¼æ¸
空ç产计åå· |
| | | selectedProductionPlanNo.value = ""; |
| | | } |
| | | }; |
| | | |
| | | // å¤æè¡æ¯å¦å¯éæ© |
| | | const isSelectable = row => { |
| | | // å¦ææ²¡æéä¸çè¡ï¼ææè¡é½å¯éæ© |
| | | if (!selectedProductionPlanNo.value) { |
| | | return true; |
| | | } |
| | | // 妿æéä¸çè¡ï¼åªæç产计åå·ç¸åçè¡æå¯éæ© |
| | | return row.productionPlanNo === selectedProductionPlanNo.value; |
| | | }; |
| | | |
| | | // å¤çåå¹¶ä¸åæé®ç¹å» |
| | | const handleMerge = () => { |
| | | if (selectedRows.value.length === 0) { |
| | | ElMessage.warning("è¯·éæ©è¦åå¹¶ä¸åçç产计å"); |
| | | return; |
| | | } |
| | | |
| | | // è®¡ç®æ»å¶é æ°é |
| | | const totalQuantity = selectedRows.value.reduce((sum, row) => { |
| | | return sum + row.manufactureQuantity; |
| | | }, 0); |
| | | |
| | | // è®¾ç½®è¡¨åæ°æ® |
| | | mergeForm.productionPlanNo = selectedProductionPlanNo.value; |
| | | mergeForm.totalManufactureQuantity = totalQuantity; |
| | | mergeForm.remark = ""; |
| | | |
| | | // æå¼å¼¹çª |
| | | isShowNewModal.value = true; |
| | | }; |
| | | |
| | | // å¤çåå¹¶ä¸åæäº¤ |
| | | const handleMergeSubmit = () => { |
| | | // è¿éå¯ä»¥æ·»å ä¸åé»è¾ |
| | | ElMessage.success("åå¹¶ä¸åæå"); |
| | | isShowNewModal.value = false; |
| | | // å¯ä»¥éæ©å·æ°å表æå
¶ä»æä½ |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .search_form { |
| | | align-items: start; |
| | | } |
| | | |
| | | .summary-section { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .horizontal-summary { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | padding: 10px 0; |
| | | } |
| | | |
| | | .summary-item { |
| | | flex: 1; |
| | | min-width: 120px; |
| | | text-align: center; |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | border-radius: 4px; |
| | | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .summary-label { |
| | | font-size: 14px; |
| | | color: #606266; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .summary-value { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #303133; |
| | | } |
| | | |
| | | ::v-deep .yellow { |
| | | background-color: #faf0de; |
| | | } |
| | | |
| | | ::v-deep .pink { |
| | | background-color: #fae1de; |
| | | } |
| | | |
| | | ::v-deep .red { |
| | | background-color: #f80202; |
| | | } |
| | | |
| | | ::v-deep .purple { |
| | | background-color: #f4defa; |
| | | } |
| | | </style> |
| | |
| | | const { VITE_APP_ENV } = env; |
| | | const baseUrl = |
| | | env.VITE_APP_ENV === "development" |
| | | ? "http://1.15.17.182:9003" |
| | | ? "http://192.168.1.248:9090" |
| | | : env.VITE_BASE_API; |
| | | const javaUrl = |
| | | env.VITE_APP_ENV === "development" |