| | |
| | | <template> |
| | | <div> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div style="margin-left: 10px;margin-top:10px;display: flex;flex-direction: column"> |
| | | <div style="padding-top: 10px;display: flex;flex-direction: column"> |
| | | <div style="margin-bottom: 15px;font-size: 14px"> |
| | | <i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />扫码信息 |
| | | </div> |
| | | <div style="display: flex;align-items: center"> |
| | | <div style="width: 90px">扫描条码:</div> |
| | | <div style="width: 90px;display: flex"> |
| | | <div style="color: red;width:10px">*</div> |
| | | 扫描条码: |
| | | </div> |
| | | <el-input |
| | | v-model="form.orderstepqrcode" |
| | | name="GXproduceCode" |
| | |
| | | /> |
| | | </div> |
| | | <!-- 六项信息 --> |
| | | <div style="display:flex;margin-top: 10px;align-items: center; line-height: 50px"> |
| | | <div style="display: flex;"> |
| | | <div v-if="!isIpad" style="background:#f8f8fa ;display:flex;margin-top: 10px;align-items: center; line-height: 50px"> |
| | | <div style="display: flex; margin-left: 10px"> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">工单编码:</div> |
| | | <div style="width: 200px">{{ form.wo_code }}</div> |
| | |
| | | <div style=" display: flex;margin-left: 30px;"> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">工序编码:</div> |
| | | <div>{{ form.stepcode }}</div> |
| | | <div style="width: 100px">{{ form.stepcode }}</div> |
| | | </div> |
| | | <div style="display: flex;"> |
| | | <div style="width: 90px">工序名称:</div> |
| | | <div>{{ form.stepname }}</div> |
| | | <div style="width: 100px">{{ form.stepname }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | v-if="isIpad" |
| | | style="display:flex;margin-top: 10px;align-items: center;line-height: 30px; flex-direction: column" |
| | | > |
| | | <div style="display: flex; justify-content: flex-start;width: 100%"> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">工单编码:</div> |
| | | <div style="width: 200px">{{ form.wo_code }}</div> |
| | | </div> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">产品编码:</div> |
| | | <div style="width: 200px">{{ form.partcode }}</div> |
| | | </div> |
| | | <div style="display: flex;"> |
| | | <div style="width: 90px">产品名称:</div> |
| | | <div style="width: 200px">{{ form.partname }}</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style=" display: flex; justify-content: flex-start;margin-top: 10px;width: 100%"> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">产品规格:</div> |
| | | <div style="width: 200px">{{ form.partspec }}</div> |
| | | </div> |
| | | <div style="display: flex;margin-right: 50px"> |
| | | <div style="width: 90px">工序编码:</div> |
| | | <div style="width: 200px">{{ form.stepcode }}</div> |
| | | </div> |
| | | <div style="display: flex;"> |
| | | <div style="width: 90px">工序名称:</div> |
| | | <div style="width: 200px">{{ form.stepname }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div style="margin: 15px 0;font-size: 14px"> |
| | | <i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />检验标准信息 |
| | | </div> |
| | | <div style="display: flex;align-items: center"> |
| | | <div style="width: 90px">检验标准:</div> |
| | | <div style="width: 90px;display: flex"> |
| | | <div style="color: red;width:10px">*</div> |
| | | 检验标准: |
| | | </div> |
| | | <el-select |
| | | v-model="checkStandard" |
| | | style="width: 200px;" |
| | |
| | | :value="item.code" |
| | | /> |
| | | </el-select> |
| | | <div style="width: 90px;margin-left: 50px;">检验人员:</div> |
| | | <div style="width: 90px;margin-left: 50px;display: flex"> |
| | | <div style="color: red;width:10px">*</div> |
| | | 检验人员: |
| | | </div> |
| | | <el-select |
| | | v-model="checkUser" |
| | | style="width: 200px;" |
| | |
| | | <el-table |
| | | ref="multipleTable" |
| | | :data="JYTableData" |
| | | :height="(tableHeight-195)+'px'" |
| | | :height="tableHeight+'px'" |
| | | border |
| | | stripe |
| | | :row-class-name="tableRowClassName" |
| | | :style="{width: 100+'%',height:tableHeight+'px',}" |
| | | highlight-current-row |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | @selection-change="handleSelectionChange" |
| | | @cell-dblclick="cellDblclick" |
| | | > |
| | | <el-table-column |
| | | type="index" |
| | | label="序号" |
| | | width="100" |
| | | fixed |
| | | /> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="code"--> |
| | |
| | | prop="stepcheckitem_desc" |
| | | label="检验标准描述" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <el-input v-if="row.isVisible===1" v-model="row.stepcheckitem_desc" placeholder="请输入" /> |
| | | <div v-else> {{ row.stepcheckitem_desc }}</div> |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-if="scope.row.isVisible===1||scope.row.index === tabClickIndex && tabClickLabel === '检验标准描述'" |
| | | v-model="scope.row.stepcheckitem_desc" |
| | | placeholder="请输入" |
| | | @keyup.enter.native="val=>keyUpEnterNative(val,scope.row)" |
| | | /> |
| | | <div |
| | | v-else |
| | | > {{ scope.row.stepcheckitem_desc }} |
| | | </div> |
| | | |
| | | </template> |
| | | </el-table-column> |
| | | |
| | |
| | | <div style="display: flex;margin-top: 20px;align-items: center"> |
| | | |
| | | <div style="display: flex;margin-right: 50px;align-items: center"> |
| | | <div style="width: 90px">检验结果:</div> |
| | | <div style="width: 90px;display: flex"> |
| | | <div style="color: red;width:10px">*</div> |
| | | 检验结果: |
| | | </div> |
| | | <el-select |
| | | v-model="checkResult" |
| | | style="width: 200px;" |
| | |
| | | // const SER_HZ = /^[\u4e00-\u9fa5]+$/ |
| | | import $ from 'jquery' |
| | | import { |
| | | DeleteStepCheckStaned, |
| | | MesOrderStepCheckItemList, |
| | | MesOrderStepCheckSearch, |
| | | MesOrderStepCheckSelect, SaveMesOrderStepCheckItem, |
| | |
| | | // }, |
| | | data() { |
| | | return { |
| | | isIpad: false, |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { // 工序 |
| | |
| | | JYTableData: [], // 检验项信息表格 |
| | | JYSelectArr: [], // 检验下拉数组 |
| | | JYSelectedArr: [], // 已选检验项目数组 |
| | | multipleSelection: []// 表格多选框 |
| | | multipleSelection: [], // 表格多选框 |
| | | tabClickIndex: null, // 点击的单元格 |
| | | tabClickLabel: '', // 当前点击的列名 |
| | | isCancel: false// 是否点击取消按钮 |
| | | } |
| | | }, |
| | | created() { |
| | | this.getMesOrderStepCheckSelect() |
| | | this.getMesOrderSelectUser() |
| | | this.getJYSelectArr() |
| | | this.handleRequest() |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('resize', this.getHeight) |
| | |
| | | this.getFocus() |
| | | }, |
| | | methods: { |
| | | handleRequest() { |
| | | this.getMesOrderStepCheckSelect().then(res => { |
| | | if (res.code === '200') { |
| | | this.getMesOrderSelectUser() |
| | | this.getJYSelectArr() |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | // 获取聚焦 |
| | | getFocus() { |
| | | this.$nextTick(() => { |
| | |
| | | }, |
| | | // 获取检验标准下拉数组 |
| | | async getMesOrderStepCheckSelect() { |
| | | const { data: res } = await MesOrderStepCheckSelect() |
| | | this.checkStandardSelect = res |
| | | const res = await MesOrderStepCheckSelect() |
| | | this.checkStandardSelect = res.data |
| | | return { code: res.code } |
| | | }, |
| | | // 获取检验人员下拉 |
| | | async getMesOrderSelectUser() { |
| | |
| | | }, |
| | | // 检验标准下拉值改变 |
| | | async changeCheckStandard(val) { |
| | | this.isCancel = false |
| | | this.JYSelectedArr = [] |
| | | const { data: res } = await MesOrderStepCheckItemList({ checkstandcode: val }) |
| | | this.JYTableData = res |
| | |
| | | number = number === 0 ? (10 + Math.random()) : number |
| | | |
| | | // item.result = 0 // 0合格 1不良 |
| | | item.result = 'NG' |
| | | item.result = 'OK' |
| | | |
| | | item.isVisible = 0 |
| | | item.number = number |
| | | this.JYSelectedArr.push(item.code) |
| | | }) |
| | | this.$refs.multipleTable.toggleAllSelection() |
| | | }, |
| | | // changeRadioValue(val, row) { |
| | | // console.log(val, row.result, 20000) |
| | |
| | | it.result = 'NG' |
| | | } |
| | | }) |
| | | if (this.multipleSelection.length > 0) { |
| | | if (this.multipleSelection.length === this.JYTableData.length) { |
| | | this.checkResult = 'OK' |
| | | } else { |
| | | this.checkResult = 'NG' |
| | | } |
| | | |
| | | if (this.multipleSelection.length > 0 && this.multipleSelection.length === this.JYTableData.length) { |
| | | this.checkResult = 'OK' |
| | | } else { |
| | | this.checkResult = 'NG' |
| | | } |
| | | if (this.isCancel) { |
| | | this.checkResult = '' |
| | | } |
| | | }, |
| | |
| | | |
| | | let number = Math.random() * Math.random()// 作为删除时的标识符 |
| | | number = number === 0 ? (10 + Math.random()) : number |
| | | const data = { result: 'NG', code: '', name: '', stepcheckitem_desc: '', isVisible: 1, number } |
| | | const data = { result: 'OK', code: '', name: '', stepcheckitem_desc: '', isVisible: 1, number } |
| | | this.JYTableData.push(data) |
| | | this.$refs.multipleTable.toggleRowSelection(data, true) |
| | | }, |
| | | |
| | | // 确认 |
| | |
| | | } |
| | | }) |
| | | |
| | | if (this.multipleSelection.length > 0) { |
| | | if (this.multipleSelection.length === this.JYTableData.length) { |
| | | this.checkResult = 'OK' |
| | | } else { |
| | | this.checkResult = 'NG' |
| | | } |
| | | if (this.multipleSelection.length > 0 && this.multipleSelection.length === this.JYTableData.length) { |
| | | this.checkResult = 'OK' |
| | | } else { |
| | | this.checkResult = '' |
| | | this.checkResult = 'NG' |
| | | } |
| | | }, |
| | | // 取消 |
| | |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | // 删除 |
| | | del(row) { |
| | | this.JYTableData.forEach((item, index) => { |
| | |
| | | }, |
| | | // 提交 |
| | | submitButton(val) { |
| | | console.log(val) |
| | | if (val !== 'Cancel') { |
| | | if (this.form.orderstepqrcode.length < 1) { |
| | | return this.$message.info('扫描条码不能为空!') |
| | | } |
| | | if (this.checkStandard.length < 1) { |
| | | return this.$message.info('检验标准不能为空!') |
| | | } |
| | | if (this.checkUser.length < 1) { |
| | | return this.$message.info('检验人员不能为空!') |
| | | } |
| | | if (this.JYTableData.length < 1) { |
| | | return this.$message.info('检验项信息不能为空!') |
| | | } |
| | | if (this.checkResult.length < 1) { |
| | | return this.$message.info('检验结果不能为空!') |
| | | } |
| | | |
| | | const text = val === 'FirstCheck' ? '首检保存' : (val === 'PatroCheck' ? '巡检保存' : '完工检保存') |
| | | this.$confirm('是否确认' + text + '?', '提示', { |
| | | confirmButtonText: '确定', |
| | |
| | | 'checkdescr': this.checkdescr, // 检验描述 |
| | | 'data': arr |
| | | } |
| | | const res = SaveMesOrderStepCheckItem(data) |
| | | if (res.code === '200') { |
| | | this.$message.success(text + '成功!') |
| | | this.clearContent() |
| | | this.getFocus() |
| | | } |
| | | SaveMesOrderStepCheckItem(data).then(res => { |
| | | if (res.code === '200') { |
| | | this.$message.success(text + '成功!') |
| | | this.clearContent() |
| | | this.getFocus() |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message.info('已取消保存') |
| | | }) |
| | |
| | | clearContent() { |
| | | this.JYTableData = [] |
| | | this.multipleSelection = [] |
| | | this.JYSelectedArr = [] |
| | | this.checkdescr = '' |
| | | this.checkUser = '' |
| | | this.checkResult = '' |
| | |
| | | this.form.partspec = '' |
| | | this.form.stepcode = '' |
| | | this.form.stepname = '' |
| | | |
| | | this.isCancel = true |
| | | }, |
| | | |
| | | // 单元格被点击时 |
| | | cellDblclick(row, column, cell, event) { |
| | | console.log(row, column, cell, event) |
| | | console.log(column.label) |
| | | console.log(row.index) |
| | | switch (column.label) { |
| | | case '检验标准描述': |
| | | this.tabClickIndex = row.index |
| | | this.tabClickLabel = column.label |
| | | break |
| | | // case '判责金额(元)': |
| | | // this.tabClickIndex = row.index |
| | | // this.tabClickLabel = column.label |
| | | // break |
| | | default: |
| | | return |
| | | } |
| | | }, |
| | | // 回车事件 |
| | | keyUpEnterNative(val, row) { |
| | | this.tabClickLabel = '' |
| | | }, |
| | | |
| | | tableRowClassName({ row, rowIndex }) { |
| | | // 把每一行的索引放进row |
| | | row.index = rowIndex |
| | | return 'custom-row' |
| | | }, |
| | | // 获取页面高度 |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | this.mainHeight = window.innerHeight - 250 |
| | | this.tableHeight = this.mainHeight - 100 |
| | | this.mainHeight = window.innerHeight - 85 |
| | | this.tableHeight = this.mainHeight - 450 |
| | | |
| | | this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367 |
| | | }) |
| | | } |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep .el-select .el-input .el-select__caret { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | </style> |
| | | <!--公共页面样式--> |
| | | <style lang="scss" scoped> |
| | | $main_color: #42b983; |
| | | .el-button--text { |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .el-icon-share, .el-icon-delete, .el-icon-edit-outline { |
| | | color: $main_color; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .el-icon-edit-outline { |
| | | margin-right: 15px; |
| | | } |
| | | |
| | | ::v-deep .el-button--primary, .el-button--default, .el-button--info { |
| | | height: 34px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 15px; |
| | | } |
| | | |
| | | ::v-deep .el-button--primary { |
| | | background-color: $main_color !important; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | //border: 1px solid $main_color; |
| | | border: none; |
| | | padding: 0 20px; |
| | | //background-color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-button--primary:hover { |
| | | ::v-deep .el-button--default { |
| | | background-color: #f8f8fa; |
| | | border: none; |
| | | } |
| | | |
| | | ::v-deep .el-button--info { |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | ::v-deep .el-input__inner { |
| | | height: 34px; |
| | | line-height: 34px; |
| | | //color: #a7a7a7; |
| | | } |
| | | |
| | | ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
| | | background-color: $main_color !important; |
| | | ::v-deep .el-dialog__body { |
| | | padding: 20px 100px !important; |
| | | } |
| | | |
| | | ::v-deep .dialogVisibleRoles .el-dialog__body { |
| | | padding: 20px 20px !important; |
| | | } |
| | | |
| | | ::v-deep .importPickerClass .el-dialog__body { |
| | | padding: 20px 20px !important; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__footer { |
| | |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .footerButton { |
| | | display: flex; |
| | | justify-content: end; |
| | | } |
| | | |
| | | ::v-deep .el-button--default { |
| | | background-color: #ffffff !important; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | ::v-deep .el-button--default:hover { |
| | | color: #606266; |
| | | } |
| | | |
| | | ::v-deep .el-dialog__body { |
| | | padding: 20px 100px !important; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | | background-color: $main_color; |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked + .el-radio__label { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner { |
| | | border-color: $main_color; |
| | | background-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-table .caret-wrapper { |
| | | transform: scale(0.8); |
| | | } |
| | | |
| | | ::v-deep .cell { |
| | | display: flex !important; |
| | | align-items: center !important; |
| | | justify-content: space-between !important; |
| | | } |
| | | |
| | | ::v-deep .el-button--text { |
| | | color: $main_color; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .operationClass { |
| | | height: 23px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .el-icon-share { |
| | | color: $main_color; |
| | | cursor: pointer; |
| | | ::v-deep .el-table::before { |
| | | height: 0; |
| | | } |
| | | |
| | | .el-checkbox.is-bordered.is-checked { |
| | | border-color: $main_color; |
| | | ::v-deep .el-table__body-wrapper { |
| | | background-color: #f8f8fa; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked .el-radio__inner { |
| | | border-color: $main_color; |
| | | background: $main_color; |
| | | ::v-deep .el-table__body .el-table__row.hover-row td { |
| | | background-color: #eaecef; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
| | | border-color: $main_color; |
| | | background: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | } |
| | | |
| | | ::v-deep .el-radio__input.is-checked + .el-radio__label { |
| | | color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-radio.is-bordered + .el-radio.is-bordered { |
| | | margin: 10px 30px 0px 0; |
| | | ::v-deep .el-form--inline .el-form-item__label { |
| | | color: #a7a7a7; |
| | | } |
| | | |
| | | .body ::v-deep .el-divider { |
| | |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | .userDialogVisible ::v-deep .el-form-item { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | ::v-deep .el-select .el-input__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | </style> |
| | | <style> |
| | | |
| | | ::v-deep .el-select-dropdown__item.selected { |
| | | color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-checkbox__inner:hover { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-textarea__inner:focus { |
| | | border-color: $main_color; |
| | | } |
| | | |
| | | ::v-deep .el-select .el-input .el-select__caret { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .el-table .custom-row { |
| | | background: #f8f8fa; |
| | | } |
| | | </style> |