From 7cbb7f38ef17b57b0af2ffe6688ac920f7ad5632 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Wed, 15 Apr 2026 16:51:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E6=89=B9=E9=87=8F=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B9=A6=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/basicData/bigBatch/addBatch.vue | 206 +++++++++++++++++++
 src/views/basicData/bigBatch/index.vue    | 235 ++++++++++++++++++++++
 2 files changed, 441 insertions(+)
 create mode 100644 src/views/basicData/bigBatch/addBatch.vue
 create mode 100644 src/views/basicData/bigBatch/index.vue

diff --git a/src/views/basicData/bigBatch/addBatch.vue b/src/views/basicData/bigBatch/addBatch.vue
new file mode 100644
index 0000000..3a84361
--- /dev/null
+++ b/src/views/basicData/bigBatch/addBatch.vue
@@ -0,0 +1,206 @@
+<template>
+    <el-dialog :title="title" append-to-body :modelValue="openShow" width="75%" @close="closeDialog()">
+        <div style="margin-bottom: 12px" v-if="moldAddMore">
+            <el-button type="primary" @click="addTable">插入一行</el-button>
+            <el-button type="danger" @click="delTable">删除选中行</el-button>
+        </div>
+        <!-- 单个 Form 包裹整个表格 -->
+        <el-form 
+            ref="tableForm" 
+            :model="form"  
+            :rules="formRules"
+            label-width="0px"
+        >
+            <!-- 全局错误提示 -->
+            <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
+                {{ formError }}
+            </div>
+            <el-table :data="form.tableData" @select="selectChange" border>
+                <el-table-column type="selection" width="55"></el-table-column>
+                <!-- 工艺能力（绑定数组字段） -->
+                <el-table-column align="center" label="工艺能力" width="200">
+                    <template #header>
+                        <span><i style="color: red">*</i>工艺能力</span>
+                    </template>
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].wcId`" :rules="formRules.wcId">
+                            <el-select 
+                                v-model="scope.row.wcId" 
+                                placeholder="请选择"
+                                style="width: 100%"
+                            >
+                                <el-option
+                                    v-for="item in wcData"
+                                    :key="item.id"
+                                    :value="item.id"
+                                    :label="item.wcName"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <!-- 单批面积 -->
+                <el-table-column align="center" label="单批面积" width="200">
+                    <template #header>
+                        <span><i style="color: red">*</i>单批面积</span>
+                    </template>
+                    <template #default="scope">
+                        <el-form-item :prop="`tableData[${scope.$index}].batchNo`" :rules="formRules.batchNo">
+                            <el-input-number v-model="scope.row.batchNo" controls-position="right" style="width:99%;"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="零件号" width="200">
+                    <template #default="scope">
+                        <el-form-item :prop="`tableData[${scope.$index}].partcode`" :rules="formRules.partcode">
+                            <el-input v-model="scope.row.partcode"></el-input>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="单件面积" width="200">
+                    <template #default="scope">
+                        <el-form-item :prop="`tableData[${scope.$index}].area`" :rules="formRules.area">
+                            <el-input-number v-model="scope.row.area" controls-position="right" style="width:99%;"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="描述" >
+                    <template #default="scope">
+                        <el-form-item :prop="`tableData[${scope.$index}].remark`" :rules="formRules.remark">
+                            <el-input v-model="scope.row.remark" ></el-input>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="closeDialog()">取 消</el-button>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    props:{
+        showDialog:{
+            type:Boolean,
+            default:false
+        },
+        title:{
+            type:String,
+            default:''
+        },
+        moldAddMore:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data(){
+        return{
+            openShow:false,
+            formError:"",
+            form:{
+                tableData:[]
+            },
+            formRules:{}
+        }
+    },
+    created(){
+        this.openShow = this.showDialog
+        if(this.title == '新增'){
+            if(this.form.tableData.length === 0){
+                this.addTable()
+            }
+        }
+    },
+    methods:{
+        selectChange(list, row) {
+            row._select = !row._select;
+        },
+        addTable(){
+            this.form.tableData.push({
+                _select:false,
+                wcId: '',
+                batchNo: '',
+            })
+        },
+        // 删除选中行
+        delTable() {
+            this.form.tableData = this.form.tableData.filter(row => !row._select);
+        },
+        // 提交表单（单次校验所有行）
+        submitForm() {
+            this.formError = '';
+
+            // 调用单个 Form 的校验方法
+            this.$refs.tableForm.validate((isValid, invalidFields) => {
+                if (!isValid) {
+                    // 校验失败：显示提示并滚动到第一个错误字段
+                    this.formError = '存在未完善的字段，请检查表格中的红色提示';
+                    
+                    this.$nextTick(() => {
+                        // 找到第一个错误字段并滚动到视图
+                        const firstError = document.querySelector('.el-form-item.is-error');
+                        if (firstError) {
+                            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        }
+                    });
+                    return;
+                }
+
+                // 校验通过：准备提交数据（过滤无用字段）
+                const submitData = this.form.tableData.map(row => {
+                    const { _select, ...validData } = row; // 剔除选择状态字段
+                    return validData;
+                });
+                this.closeDialog(true)
+            })
+        },
+        closeDialog(val) {
+            this.openShow = false
+            this.$emit('closeDialog',val);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// 优化表单字段样式
+:deep(.el-table .el-form-item) {
+  margin-bottom: 0; // 去掉默认边距
+}
+
+// 错误提示样式优化
+:deep(.el-form-item__error) {
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  background: #fff;
+  padding: 2px 4px;
+  border: 1px solid #f56c6c;
+  border-radius: 4px;
+}
+
+// 表格行高适配 textarea
+.el-table__row {
+  height: 80px !important;
+}
+
+.el-table__cell {
+  vertical-align: middle !important;
+}
+
+.error-message {
+  font-size: 14px;
+  line-height: 1.5;
+}
+:deep(.el-table .el-table__cell) {
+  height: 50px !important;
+  padding: 0 !important;
+  line-height: 50px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/basicData/bigBatch/index.vue b/src/views/basicData/bigBatch/index.vue
new file mode 100644
index 0000000..0df86d1
--- /dev/null
+++ b/src/views/basicData/bigBatch/index.vue
@@ -0,0 +1,235 @@
+<template>
+    <basic-container>
+        <!-- 大批量配置 -->
+        <avue-crud
+            :option="option"
+            :table-loading="loading"
+            :data="data"
+            v-model="form"
+            v-model:page="page"
+            ref="crud"
+            @row-del="rowDel"
+            @search-change="searchChange"
+            @search-reset="searchReset"
+            @selection-change="selectionChange"
+            @current-change="currentChange"
+            @size-change="sizeChange"
+            @refresh-change="refreshChange"
+            @on-load="onLoad"
+        >
+        <template #menu-left>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+        </template>
+        </avue-crud>
+        <add-batch 
+            v-if="showDialog" 
+            :show-dialog="showDialog" 
+            @closeDialog="closeDialog"
+            :title="title"
+            :moldAddMore="moldAddMore"
+        ></add-batch>
+    </basic-container>
+
+</template>
+
+<script>
+import addBatch from "./addBatch.vue"
+export default {
+    components:{
+        addBatch
+    },
+    data(){
+        return{
+            loading:false,
+            showDialog:false,
+            moldAddMore:false,
+            data:[],
+            form:{},
+            query:{},
+            title:"",
+            page:{
+                pageSize: 10,
+                currentPage: 1,
+                total: 0,
+            },
+            option:{
+                columnSort: true,
+                tip: false,
+                height: 'auto',
+                calcHeight: 32,
+                simplePage: false,
+                searchShow: true,
+                searchMenuSpan: 18,
+                searchIcon: true,
+                searchIndex: 3,
+                tree: false,
+                border: true,
+                index: false,
+                selection: true,
+                viewBtn: false,
+                delBtn: false,
+                editBtn: false,
+                addBtnIcon: ' ',
+                viewBtnIcon: ' ',
+                delBtnIcon: ' ',
+                editBtnIcon: ' ',
+                addBtn: false,
+                labelWidth: 120,
+                searchLabelWidth: 120,
+                menu: false,
+                menuWidth: 200,
+                dialogWidth: 600,
+                dialogClickModal: false,
+                searchEnter: true,
+                excelBtn: true,
+                gridBtn: false,
+                searchShowBtn: false,
+                showOverflowTooltip: true,
+                searchLabelPosition: 'left',
+                filterBtn: true,
+                searchLabelPosition: 'left',
+                searchGutter: 24,
+                searchSpan: 6,
+                menuAlign: 'center',
+                gridBtn: false,
+                searchMenuPosition: 'right',
+                align: 'center',
+                column: [
+                    {
+                        label: '工艺能力',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入工艺能力',
+                            }
+                        ]
+                    },
+                    {
+                        label: '单批面积(dm²)',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入单批面积(dm²)',
+                            }
+                        ]
+                    },
+                    {
+                        label: '零件号(XXX-XXX)',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入零件号(XXX-XXX)',
+                            }
+                        ]
+                    },
+                    {
+                        label: '单件面积(dm²)',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入单件面积(dm²)',
+                            }
+                        ]
+                    },
+                    {
+                        label: '描述',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入描述',
+                            }
+                        ]
+                    },
+                    {
+                        label: '维护人',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入维护人',
+                            }
+                        ]
+                    },
+                    {
+                        label: '维护时间',
+                        prop: 'ypCode',
+                        span: 24,
+                        overflow: true,
+                        search: false,
+                        headerAlign: 'center',
+                        align: 'center',
+                        searchLabelWidth: 80,
+                        rules: [
+                            {
+                                required: true,
+                                message: '请输入维护时间',
+                            }
+                        ]
+                    },
+                ]
+            }
+        }
+    },
+    created(){
+
+    },
+    methods:{
+        closeDialog(val){
+            this.showDialog = false
+            if(val){
+                this.onLoad()
+            }
+        },
+        handleAdd(){
+            this.title = '新增'
+            this.moldAddMore = true
+            this.showDialog = true
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file