|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" style="width: 100%;">
|
|
|
+ <el-tabs type="border-card" @tab-click="tabClick" v-model="selectedWorkshop">
|
|
|
+ <el-tab-pane label="南车间计划" name="南车间">
|
|
|
+ <!--表格-->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ ref="tableRef"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ border style="margin-bottom: 10px" >
|
|
|
+ <el-table-column prop="machineId" fixed label="机台号" header-align="center" align="center" min-width="110.5"></el-table-column>
|
|
|
+ <el-table-column label="在机产品" header-align="center">
|
|
|
+ <el-table-column prop="productType" label="产品类别" header-align="center" align="center" min-width="110.5"></el-table-column>
|
|
|
+ <el-table-column prop="currentColorCode" label="色号" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="currentSpecification" label="规格" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="currentLotNumber" label="批号" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="currentSpindleCount" label="锭数" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="startTime" label="上机时间" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="plannedEndTime" label="计划下机时间" header-align="center" align="center"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="待上机产品" header-align="center" align="center">
|
|
|
+ <el-table-column prop="djCurrentColorCode" label="色号" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="djCurrentSpecification" label="规格" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="djNumber" label="数量" header-align="center" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="djCurrentLotNumber" label="原丝批号" header-align="center" align="center"></el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="listOfPendingProduction" label="待生产产品列表" header-align="center" align="center" min-width="300"></el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" header-align="center" align="center" min-width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="primary">
|
|
|
+ 操作
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item @click.native.prevent="handleAddPlan(scope.row)">新增计划</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click.native.prevent="handleEditPlan(scope.row)">修改计划</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!--弹窗-->
|
|
|
+
|
|
|
+ <el-dialog title="新增计划产品" :visible.sync="dialogTableVisible" width="1000px">
|
|
|
+ <el-table :data="tableData2" @row-click.self="handleRowClick">
|
|
|
+ <el-table-column prop="province" label="产品" header-align="center" align="center" width="180px">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-select v-model="scope.row.product" placeholder="请选择待排产产品" @change="selectedChangeDate(scope.row,scope.row.product)">
|
|
|
+ <el-option v-for="product in productsInfo" :key="product.id" :label="product.productName" :value="product.id" ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="currentColorCode" label="色号" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <!-- 如果当前行正在编辑,则显示输入框 -->
|
|
|
+ <el-input v-if="scope.row.isEditing" disabled="disabled" v-model="scope.row.currentColorCode" placeholder="请输入色号" @blur.stop.prevent="handleInputBlur(scope.row)" ></el-input>
|
|
|
+ <!-- 否则显示普通文本 -->
|
|
|
+ <span v-else>{{ scope.row.currentColorCode }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="currentSpecification" label="规格" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <!-- 如果当前行正在编辑,则显示输入框 -->
|
|
|
+ <el-input v-if="scope.row.isEditing" v-model="scope.row.currentSpecification" placeholder="请输入规格" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <!-- 否则显示普通文本 -->
|
|
|
+ <span v-else>{{ scope.row.currentSpecification }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="currentSpecification" label="产品类别" header-align="center" align="center" width="100px">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-select v-model="scope.row.productType" placeholder="请选择产品类别" @change="selectedChangeDate(scope.row,scope.row.product)">
|
|
|
+ <el-option v-for="product in productTypeList" :key="product.value" :label="product.lable" :value="product.value" ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="currentLotNumber" label="批号" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-input v-if="scope.row.isEditing" v-model="scope.row.currentLotNumber" placeholder="请输入批号" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <span v-else>{{ scope.row.currentLotNumber }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="currentSpindleCount" label="锭数" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-input v-if="scope.row.isEditing" v-model="scope.row.currentSpindleCount" placeholder="请输入锭数" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <span v-else>{{ scope.row.currentSpindleCount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="djNumber" label="数量" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-input v-if="scope.row.isEditing" v-model="scope.row.djNumber" placeholder="请输入数量" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <span v-else>{{ scope.row.djNumber }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="startTime" label="上机时间" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-input v-if="scope.row.isEditing" v-model="scope.row.startTime" placeholder="请输入上机时间" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <span v-else>{{ scope.row.startTime }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="plannedEndTime" label="计划下机时间" header-align="center" align="center">
|
|
|
+ <template v-slot:default="scope">
|
|
|
+ <el-input v-if="scope.row.isEditing" :ref="'input'+scope.$index" v-model="scope.row.plannedEndTime" placeholder="请输入计划下机时间" @blur="handleInputBlur(scope.row)">></el-input>
|
|
|
+ <span v-else>{{ scope.row.plannedEndTime }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click.stop.prevent="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ <el-button type="primary" style="width: 100%;margin-top: 30px" @click="addEditableRow">新增计划产品</el-button>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogTableVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="北车间计划" name="北车间">配置管理</el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {ammunitionPlanInfo,getProductsInfo,getMaterielInfo} from "@/api/plan/paln.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //选中的是那个车间
|
|
|
+ selectedWorkshop:"南车间",
|
|
|
+ tableData:[],
|
|
|
+ form: {
|
|
|
+ product:"",
|
|
|
+ },
|
|
|
+ previousMachineId: undefined,
|
|
|
+ currentRowspan: 1,
|
|
|
+ tableData2: [{
|
|
|
+ currentColorCode: '001浅绿',
|
|
|
+ currentSpecification: '15/36',
|
|
|
+ currentLotNumber: '24-1',
|
|
|
+ currentSpindleCount:'100',
|
|
|
+ djNumber:"11",
|
|
|
+ startTime:"03-28-16.40",
|
|
|
+ plannedEndTime:"03-28-16.40",
|
|
|
+ isEditing:false,
|
|
|
+ product:"",
|
|
|
+ productType:""
|
|
|
+ }],
|
|
|
+ dialogTableVisible:false,
|
|
|
+ editingRowIndex: -1,
|
|
|
+ lastEditLine:0,
|
|
|
+ queryParams:{ productionLineDepartment:"加弹部",
|
|
|
+ productionLineWorkshop:"南车间"},
|
|
|
+ isEditLine:false,
|
|
|
+ productsInfo:[],
|
|
|
+ product:{},
|
|
|
+ materiel:{},
|
|
|
+ //产品类别
|
|
|
+ productTypeList:[{value:"1",lable:"A面"},{value:"2",lable:"B面"}],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getAmmunitionPlanInfo();
|
|
|
+ this.getProductsInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //查询排产信息
|
|
|
+ getAmmunitionPlanInfo() {
|
|
|
+ ammunitionPlanInfo(this.queryParams).then((response) => {
|
|
|
+ this.tableData = response.data
|
|
|
+ console.log(response.data)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ // if (columnIndex === 0) {
|
|
|
+ //
|
|
|
+ // if (rowIndex % 2 === 0) {
|
|
|
+ // return {
|
|
|
+ // rowspan: 2,
|
|
|
+ // colspan: 1
|
|
|
+ // };
|
|
|
+ // } else {
|
|
|
+ // return {
|
|
|
+ // rowspan: 0,
|
|
|
+ // colspan: 0
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if (columnIndex === 0 && this.previousMachineId !== undefined) {
|
|
|
+ // 比较当前行的machineId是否与上一行相同
|
|
|
+ if (row.machineId === this.previousMachineId) {
|
|
|
+ // 内容相同,跨行
|
|
|
+ this.currentRowspan++;
|
|
|
+ return {
|
|
|
+ rowspan: this.currentRowspan,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 内容不同,重置跨行计数
|
|
|
+ this.currentRowspan = 1;
|
|
|
+ this.previousMachineId = row.machineId;
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非第一列或者第一次渲染,初始化状态
|
|
|
+ this.previousMachineId = row.machineId;
|
|
|
+ this.currentRowspan = 1;
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //待投产的产品数据
|
|
|
+ getProductsInfo() {
|
|
|
+ getProductsInfo().then((response) => {
|
|
|
+ this.productsInfo = response.data;
|
|
|
+ this.productsInfo.forEach(item => {
|
|
|
+ // item.lotNumber == null ? item.lotNumber = "24-1" : item.lotNumber;
|
|
|
+ item.productName = item.productName+"—"+item.materieEncoding+item.materieColorNumber
|
|
|
+ });
|
|
|
+ console.log(this.productsInfo)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //下拉框数据改变查询色号批号信息
|
|
|
+ selectedChangeDate(row,selectedProduct) {
|
|
|
+ //选择的那个销售产品
|
|
|
+ // console.log(row,selectedProduct)
|
|
|
+ this.product = this.productsInfo.find(product => product.id === selectedProduct);
|
|
|
+ this.form.product=selectedProduct;
|
|
|
+ // console.log(this.product)
|
|
|
+ //通过母粒编码查询到对应的母粒信息
|
|
|
+ let queryParams = {
|
|
|
+ "materielCode": this.product.colourNumber
|
|
|
+ }
|
|
|
+ //得到对应的母粒信息
|
|
|
+ getMaterielInfo(queryParams).then((response) => {
|
|
|
+ if (response.data!=null) {
|
|
|
+ this.materiel = response.data;
|
|
|
+ console.log(this.materiel.materieEncoding)
|
|
|
+ //色号
|
|
|
+ row.currentColorCode = this.materiel.materieEncoding+"("+this.materiel.materieColorNumber+")";
|
|
|
+ //批次
|
|
|
+ // row.currentLotNumber=this.product.lotNumber==null?"XW121":this.product.lotNumber;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //色号
|
|
|
+ // console.log(this.materiel)
|
|
|
+
|
|
|
+ },
|
|
|
+ //新增计划产品信息
|
|
|
+ handleAddPlan(row) {
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ this.tableData2=[]
|
|
|
+ },
|
|
|
+ //修改产品计划
|
|
|
+ handleEditPlan(row) {
|
|
|
+ //弹窗
|
|
|
+ },
|
|
|
+ //tab栏点击切换
|
|
|
+ tabClick(tab, event) {
|
|
|
+ // console.log('当前点击的标签名称:', tab.name);
|
|
|
+ this.selectedWorkshop = tab.name;
|
|
|
+ // productionLineName getProductionLineNo productionLineDepartment productionLineWorkshop
|
|
|
+ this.queryParams.productionLineWorkshop = tab.name;
|
|
|
+ this.getAmmunitionPlanInfo();
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ // console.log(index,row)
|
|
|
+ // this.tableData2[a];
|
|
|
+ this.tableData2.splice(index, 1);
|
|
|
+ // 把上一编辑行置回-1
|
|
|
+ this.editingRowIndex = -1;
|
|
|
+ },
|
|
|
+ //点击编辑行
|
|
|
+ handleRowClick(row) {
|
|
|
+
|
|
|
+ this.isEditLine = true;
|
|
|
+ // alert(this.lastEditLine+"编辑行")
|
|
|
+ //找到当前行的编辑索引
|
|
|
+ var rowIndex = this.tableData2.indexOf(row);
|
|
|
+
|
|
|
+ if (this.lastEditLine != 0 &&
|
|
|
+ this.editingRowIndex !== rowIndex &&
|
|
|
+ this.editingRowIndex !== -1 &&
|
|
|
+ !this.isRowFilled(this.tableData2[this.lastEditLine])) {
|
|
|
+ this.$message({
|
|
|
+ message: '请先完成上一条数据的填写',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ //编辑索引不等于当前编辑行索引
|
|
|
+ if (this.editingRowIndex !== rowIndex) {
|
|
|
+ // alert(this.editingRowIndex);
|
|
|
+ if (this.editingRowIndex !== -1) {
|
|
|
+ //把当前行变成不可编辑的
|
|
|
+ this.tableData2[this.editingRowIndex].isEditing = false;
|
|
|
+ }
|
|
|
+ //把当前行变成可编辑的
|
|
|
+ row.isEditing = true;
|
|
|
+ this.editingRowIndex = rowIndex;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //光标失去焦点变成不可编辑
|
|
|
+ handleInputBlur(row) {
|
|
|
+ let rowIndex = this.tableData2.indexOf(row);
|
|
|
+ //编辑索引不等于当前编辑行索引
|
|
|
+ if (this.editingRowIndex !== rowIndex) {
|
|
|
+ if (this.isRowFilled(row)) {
|
|
|
+ row.isEditing = false;
|
|
|
+ //对于整个表格来说
|
|
|
+ this.isEditLine = false;
|
|
|
+ //当前编辑行置为-1
|
|
|
+ this.editingRowIndex = -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 检查行是否填写完毕的示例方法
|
|
|
+ isRowFilled(row) {
|
|
|
+ return row.currentSpecification && row.currentSpindleCount && row.djNumber && row.startTime && row.plannedEndTime;
|
|
|
+ },
|
|
|
+ // 新增一行标记为可编辑
|
|
|
+ addEditableRow() {
|
|
|
+ // 检查当前编辑行是否已填写完毕
|
|
|
+ if (this.editingRowIndex !== -1 && !this.isRowFilled(this.tableData2[this.editingRowIndex])) {
|
|
|
+ this.$message({
|
|
|
+ message: '请先完成上一条数据的填写',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //新增行之前先让以前的行不能编辑
|
|
|
+ this.tableData2.forEach(item => {
|
|
|
+ item.isEditing = false;
|
|
|
+ })
|
|
|
+ // 新增一行,并标记为可编辑
|
|
|
+ // <!-- // <el-table-column prop="currentColorCode" label="色号" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="currentSpecification" label="规格" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="currentLotNumber" label="批号" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="currentSpindleCount" label="锭数" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="djNumber" label="数量" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="startTime" label="上机时间" header-align="center" align="center"></el-table-column>-->
|
|
|
+// <!-- // <el-table-column prop="plannedEndTime" label="计划下机时间" header-align="center" align="center"></el-table-column>-->
|
|
|
+ this.tableData2.push({
|
|
|
+ currentColorCode: '',
|
|
|
+ currentSpecification: '',
|
|
|
+ currentLotNumber: '',
|
|
|
+ currentSpindleCount: '',
|
|
|
+ djNumber: '',
|
|
|
+ startTime: '',
|
|
|
+ plannedEndTime:'',
|
|
|
+ isEditing: true // 标记为正在编辑状态
|
|
|
+ });
|
|
|
+ this.editingRowIndex = this.tableData2.length - 1; // 更新当前编辑的行索引
|
|
|
+ this.lastEditLine = this.tableData2.length - 1
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-tabs--border-card >>> .el-tabs__content {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__body-wrapper {
|
|
|
+ cursor: grab;
|
|
|
+}
|
|
|
+.el-table__body-wrapper.grabbing {
|
|
|
+ cursor: grabbing;
|
|
|
+}
|
|
|
+</style>
|