Skip to content

T
template_vue
Commit 07fc2ad6 authored by 罗林杰's avatar 罗林杰
Browse files
Options

初始化B1，B2两种类型

parent 10a7e4fb
Hide whitespace changes
Inline Side-by-side
Showing with 964 additions and 11 deletions
src/views/sample/chCheckOrder/CheckOrders/B1CheckOrders.vue 0 → 100644
View file @ 07fc2ad6
<template>
<el-form>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
:span-method="arraySpanMethod"
>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:label="item.label"
:prop="item.prop"
:show-overflow-tooltip="true"
fixed
>
<template slot-scope="scope">
<div v-if="index < fixedColumnCount">
{{ scope.row[index] }}
</div>
<el-input
v-else-if="index !== tableHeader.length - 1"
v-model="scope.row[index]"
:class="{ 'custom-input': dataVerify(scope.row,scope.row[index],scope.column,scope.$index) }"
style="background-color: transparent;"
@input="handleInput(scope.row,scope.row[index],scope.column,scope.$index)"
/>
<div
v-else
:class="{ 'custom-span': verifyResult(scope.row, scope.row[index], scope.column, scope.$index) === 'NG' }"
>
{{
verifyResult(scope.row, scope.row[index], scope.column, scope.$index) === null ? '' : verifyResult(scope.row, scope.row[index], scope.column, scope.$index)
}}
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script>
import { getDict } from '@/api/system/dict/data'
export default {
props: {
// ocr识别的数据
ocrArray: {
default: () => [],
type: Array
},
// 校验结果列 true为需要校验 false为不需要校验
verifyResultFlag: {
default: () => {},
type: Object
},
// 是否是修改
updateFlag: {
default: () => false,
type: Boolean
},
// 列表表头数据
returnTableHeader: {
default: () => [],
type: Array
},
// 一键确认标志
oneKeyFlag: {
default: () => false,
type: Boolean
},
// 备注数据
remarks: {
default: () => [],
type: Array
}
},
data() {
return {
// 校验结果标志的本地副本
localVerifyResultFlag: {},
// 加载loading
loading: false,
// 列表表头长度
tableHeaderLength: 0,
// 固定的列数据数
fixedColumnCount: 0,
// 列表数据
tableData: [
// {
// 0: 'A',
// 1: '180+0/-0.5',
// 2: '天津威晟',
// 3: '卡尺',
// 4: undefined,
// 5: undefined,
// 6: undefined,
// 7: undefined,
// 8: undefined,
// 9: undefined,
// 10: undefined,
// 11: undefined,
// 12: undefined,
// 13: undefined,
// 14: undefined,
// 15: undefined
// }
],
// 列表列头数据
tableHeader: [
// { label: '项目', prop: '0' },
// { label: '规格', prop: '1' },
// { label: '区分', prop: '2' },
// { label: '测定器', prop: '3' },
// { label: '1', prop: '4' },
// { label: '2', prop: '5' },
// { label: '3', prop: '6' },
// { label: '4', prop: '7' },
// { label: '5', prop: '8' },
// { label: '6', prop: '9' },
// { label: '7', prop: '10' },
// { label: '8', prop: '11' },
// { label: '9', prop: '12' },
// { label: '10', prop: '13' },
// { label: 'X', prop: '14' },
// { label: 'R', prop: '15' },
// { label: '结果', prop: '16' }
],
// 列表备注数据
tableRemarks: []
}
},
watch: {
// 接收父组件传递过来的table列表数据
ocrArray: {
handler(newValue, oldValue) {
if (this.updateFlag === true) {
this.tableData = Array.from({ length: newValue.length }, () => [])
// 修改
// 循环this.tableData i代表第几行
for (let i = 0; i < newValue.length; i++) {
for (let j = 0; j < newValue[i].length; j++) {
// 使用 Vue.set 确保响应式更新（Vue 2）
this.$set(this.tableData[i], j, newValue[i][j])
// 或者在 Vue 3 中可以直接赋值
// this.tableData[i][this.fixedColumnCount + j] = newValue[i][j];
}
}
this.tableHeader = JSON.parse(JSON.stringify(this.returnTableHeader))
this.tableHeaderLength = this.tableHeader.length
// 找出列表表头为1的索引号
const index = this.tableHeader.findIndex(item => item.label === '1')
this.fixedColumnCount = index
} else {
if (this.oneKeyFlag === true) {
// 去掉前三个
for (let i = 0; i < this.tableData.length; i++) {
const keys = Object.keys(this.tableData[i]) // 获取对象的所有键
for (let j = 0; j < Math.min(3, keys.length); j++) {
delete this.tableData[i][keys[j]] // 删除前四个键值对
}
}
}
// 循环this.tableData i代表第几行
for (let i = 0; i < this.tableData.length; i++) {
for (let j = 0; j < newValue[i].length; j++) {
// 使用 Vue.set 确保响应式更新（Vue 2）
this.$set(this.tableData[i], this.fixedColumnCount + j, newValue[i][j])
// 或者在 Vue 3 中可以直接赋值
// this.tableData[i][this.fixedColumnCount + j] = newValue[i][j];
}
}
// 重新排序
this.tableData = this.tableData.map(row => {
// 获取对象的键，并按升序排序
const sortedKeys = Object.keys(row).map(Number).sort((a, b) => a - b)
// 创建一个新对象，重新映射键
const newRow = {}
sortedKeys.forEach((key, index) => {
newRow[index] = row[key] // 从 0 开始映射
})
return newRow
})
}
},
deep: true
},
// 监听table列表数据 发送给父组件
tableData: {
handler(newValue, oldValue) {
// 在newValue里再插入一条数据
this.$emit('afterUpdate', newValue)// table列表数据
this.$emit('tableHeader', this.tableHeader)// table列表表头
this.$emit('tableRemarks', this.tableRemarks)
},
deep: true
},
// 结果列的校验标志 数组 包含了每行的校验标志
verifyResultFlag: {
handler(newValue, oldValue) {
this.localVerifyResultFlag = JSON.parse(JSON.stringify(newValue))
},
deep: true
},
// 修改的时候 接收父组件传递过来的备注信息
remarks: {
handler(newValue, oldValue) {
this.tableRemarks = JSON.parse(JSON.stringify(newValue))
},
deep: true
}
},
created() {
this.tableData = []
// 获取OCR模版1配置 新增的时候才调
if (this.updateFlag === false) {
this.getDictOcrTemplate1()
}
},
methods: {
verifyResult(rowData, columnData, column, index) {
if (this.localVerifyResultFlag[index] === true) {
// 校验整行数据，只要有一个数据不符合条件 就将结果改为NO
const keys = Object.keys(rowData).map(Number)
// 过滤出第4个及其以后的键（索引从0开始，所以"3"是第4个）
const startIndex = 3
const endIndex = keys.length - 3 // 最后 2 个数据之前的结束索引
const filteredKeys = keys.slice(startIndex, endIndex)
// 根据过滤后的键名数组提取对应的值，并生成数组
const result = filteredKeys.map(key => rowData[key])
// 遍历result
let allInRange = 'OK' // 假设所有值都在范围内
for (let i = 0; i < result.length; i++) {
const upperBound = this.tableRemarks[index][1] // 上限
const lowerBound = this.tableRemarks[index][0]// 下限
if (upperBound === undefined && lowerBound !== '') {
// remarks只填了一个值
if (result[i] !== lowerBound) {
allInRange = 'NG'
}
} else if (upperBound === undefined && lowerBound === '') {
// remarks没填值
allInRange = 'OK'
} else {
// remarks填了范围
// 如果 columnData 不是数字，直接返回 true
if (isNaN(Number(result[i]))) {
allInRange = 'NG'
} else {
if (Number(result[i]) < Number(lowerBound) || Number(result[i]) > Number(upperBound)) {
// 不在范围之间
allInRange = 'NG'
}
}
}
}
// 新增时 判断表格中是否有数据 只有有数据的时候，才改变最后一列的值
if (this.updateFlag === false) {
if (Object.keys(rowData).length - 1 > this.fixedColumnCount) {
this.$set(rowData, Object.keys(rowData).length - 1, allInRange)
}
} else {
// 修改时 不跟新增写一样的 是因为这样可以避免无限循环
// 判断是否是最后一行 如果是最后一行 value返回的是输入的值
if (rowData[0] === this.tableData[this.tableData.length - 1][0]) {
const params = {
rowData: rowData,
value: rowData[rowData.length - 1]
}
this.$emit('updateTableData', params)
} else {
const params = {
rowData: rowData,
value: allInRange
}
this.$emit('updateTableData', params)
}
}
return allInRange
} else if (this.localVerifyResultFlag[index] === false) {
// 当为修改时 并且不需要校验的时候 直接返回数据的结果
if (this.updateFlag === true) {
return rowData[rowData.length - 1]
}
return 'OK'
} else {
return null
}
},
// 处理输入事件 一旦输入 就把当前行改为需要校验结果列的行
handleInput(rowData, columnData, column, index) {
// 通知父组件进行修改校验结果列标志
const data = JSON.parse(JSON.stringify(this.verifyResultFlag))
data[index] = true
this.localVerifyResultFlag = data
this.$emit('update:verify-result-flag', data)
// 校验结果列
this.verifyResult(rowData, columnData, column, index)
},
// 合并最后一行到倒数第四行第二列的单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 计算表格中的总行数
const totalRows = this.tableData.length
// 检查是否是倒数第四行的第二列
if (rowIndex === totalRows - 4 && columnIndex === 1) {
// 返回合并的行数和列数，这里我们只关心合并行数
return {
rowspan: 4, // 合并两行
colspan: 1 // 不合并列
}
}
// 如果是最后一行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 1 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 如果是倒数二行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 2 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 如果是倒数三行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 3 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 默认返回值，表示不做合并
return {
rowspan: 1,
colspan: 1
}
},
// 初始化时 整个表格的数据校验
dataVerify(rowData, columnData, column, index) {
// 判断该列是否需要校验,R列和结果列不需要校验
if (column.label === 'MAX' || column.label === 'MIN' || column.label === '结果') {
return false
}
// 数据为空
if (columnData === '' || columnData === null || columnData === undefined) {
return false
}
// 校验表格数据
const upperBound = this.tableRemarks[index][1] // 上限
const lowerBound = this.tableRemarks[index][0]// 下限
if (upperBound === undefined && lowerBound !== '') {
// 只填了一个值 直接判断当前输入的值是否与这一个值相等即可 相等返回OK 不等返回NG
if (columnData === lowerBound) {
// 等于 返回false
return false
} else {
// 不等 返回true
return true
}
} else if (lowerBound === '') {
// lowerBound为''证明没填remarks 不需要校验
return false
} else {
// 检查 columnData 是否为数字
if (isNaN(Number(columnData))) {
return true // 如果 columnData 不是数字，直接返回 true
} else {
if (upperBound !== '' && upperBound !== '') {
if (Number(columnData) < Number(lowerBound) || Number(columnData) > Number(upperBound)) {
// 不在范围之间
return true
} else {
return false
}
}
}
}
},
// 获取OCR模版配置
getDictOcrTemplate1() {
this.loading = true
getDict('ocr_template2').then(res => {
if (res.code === 200) {
const templateData = res.data
// 遍历templateData
for (let i = 0; i < templateData.length; i++) {
const rowData = templateData[i]
// 按逗号分割rowData的dictValue
const values = rowData.dictValue.split('，')
const remarksValues = rowData.remarks.split('，')
this.fixedColumnCount = values.length
// 往table表格里放值，但排除row1表头
if (rowData.dictLabel !== 'row1') {
const result = {}
for (let j = 0; j < values.length; j++) {
result[j] = values[j]
}
this.tableData.push(result)
const remarks = {}
for (let j = 0; j < remarksValues.length; j++) {
remarks[j] = remarksValues[j]
}
this.tableRemarks.push(remarks)
}
if (rowData.dictLabel === 'row1') {
// 获取表头数据 循环values
for (let i = 0; i < values.length; i++) {
const params = {
label: values[i],
prop: i + ''
}
this.tableHeader.push(params)
}
this.tableHeaderLength = this.tableHeader.length
}
}
this.loading = false
} else {
this.$message.error(res.msg)
}
}).catch((error) => {
this.$message.error(error.msg)
})
}
}
}
</script>
<style scoped lang="scss">
/* 错误提示样式 */
.error-message {
color: #ff0000;
font-size: 12px;
}
::v-deep .el-input__inner {
padding-left: 5px;
padding-right: 0px;
}
.custom-input ::v-deep input {
border-color: red !important; /* 确保覆盖默认样式 */
color: red !important;;
}
.custom-span{
color: red !important;;
}
</style>
src/views/sample/chCheckOrder/CheckOrders/B2CheckOrders.vue 0 → 100644
View file @ 07fc2ad6
<template>
<el-form>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%"
:span-method="arraySpanMethod"
>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:label="item.label"
:prop="item.prop"
:show-overflow-tooltip="true"
fixed
>
<template slot-scope="scope">
<div v-if="index < fixedColumnCount">
{{ scope.row[index] }}
</div>
<el-input
v-else-if="index !== tableHeader.length - 1"
v-model="scope.row[index]"
:class="{ 'custom-input': dataVerify(scope.row,scope.row[index],scope.column,scope.$index) }"
style="background-color: transparent;"
@input="handleInput(scope.row,scope.row[index],scope.column,scope.$index)"
/>
<div
v-else
:class="{ 'custom-span': verifyResult(scope.row, scope.row[index], scope.column, scope.$index) === 'NG' }"
>
{{
verifyResult(scope.row, scope.row[index], scope.column, scope.$index) === null ? '' : verifyResult(scope.row, scope.row[index], scope.column, scope.$index)
}}
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script>
import { getDict } from '@/api/system/dict/data'
export default {
props: {
// ocr识别的数据
ocrArray: {
default: () => [],
type: Array
},
// 校验结果列 true为需要校验 false为不需要校验
verifyResultFlag: {
default: () => {},
type: Object
},
// 是否是修改
updateFlag: {
default: () => false,
type: Boolean
},
// 列表表头数据
returnTableHeader: {
default: () => [],
type: Array
},
// 一键确认标志
oneKeyFlag: {
default: () => false,
type: Boolean
},
// 备注数据
remarks: {
default: () => [],
type: Array
}
},
data() {
return {
// 校验结果标志的本地副本
localVerifyResultFlag: {},
// 加载loading
loading: false,
// 列表表头长度
tableHeaderLength: 0,
// 固定的列数据数
fixedColumnCount: 0,
// 列表数据
tableData: [
// {
// 0: 'A',
// 1: '180+0/-0.5',
// 2: '天津威晟',
// 3: '卡尺',
// 4: undefined,
// 5: undefined,
// 6: undefined,
// 7: undefined,
// 8: undefined,
// 9: undefined,
// 10: undefined,
// 11: undefined,
// 12: undefined,
// 13: undefined,
// 14: undefined,
// 15: undefined
// }
],
// 列表列头数据
tableHeader: [
// { label: '项目', prop: '0' },
// { label: '规格', prop: '1' },
// { label: '区分', prop: '2' },
// { label: '测定器', prop: '3' },
// { label: '1', prop: '4' },
// { label: '2', prop: '5' },
// { label: '3', prop: '6' },
// { label: '4', prop: '7' },
// { label: '5', prop: '8' },
// { label: '6', prop: '9' },
// { label: '7', prop: '10' },
// { label: '8', prop: '11' },
// { label: '9', prop: '12' },
// { label: '10', prop: '13' },
// { label: 'X', prop: '14' },
// { label: 'R', prop: '15' },
// { label: '结果', prop: '16' }
],
// 列表备注数据
tableRemarks: []
}
},
watch: {
// 接收父组件传递过来的table列表数据
ocrArray: {
handler(newValue, oldValue) {
if (this.updateFlag === true) {
this.tableData = Array.from({ length: newValue.length }, () => [])
// 修改
// 循环this.tableData i代表第几行
for (let i = 0; i < newValue.length; i++) {
for (let j = 0; j < newValue[i].length; j++) {
// 使用 Vue.set 确保响应式更新（Vue 2）
this.$set(this.tableData[i], j, newValue[i][j])
// 或者在 Vue 3 中可以直接赋值
// this.tableData[i][this.fixedColumnCount + j] = newValue[i][j];
}
}
this.tableHeader = JSON.parse(JSON.stringify(this.returnTableHeader))
this.tableHeaderLength = this.tableHeader.length
// 找出列表表头为1的索引号
const index = this.tableHeader.findIndex(item => item.label === '1')
this.fixedColumnCount = index
} else {
if (this.oneKeyFlag === true) {
// 去掉前三个
for (let i = 0; i < this.tableData.length; i++) {
const keys = Object.keys(this.tableData[i]) // 获取对象的所有键
for (let j = 0; j < Math.min(3, keys.length); j++) {
delete this.tableData[i][keys[j]] // 删除前四个键值对
}
}
}
// 循环this.tableData i代表第几行
for (let i = 0; i < this.tableData.length; i++) {
for (let j = 0; j < newValue[i].length; j++) {
// 使用 Vue.set 确保响应式更新（Vue 2）
this.$set(this.tableData[i], this.fixedColumnCount + j, newValue[i][j])
// 或者在 Vue 3 中可以直接赋值
// this.tableData[i][this.fixedColumnCount + j] = newValue[i][j];
}
}
// 重新排序
this.tableData = this.tableData.map(row => {
// 获取对象的键，并按升序排序
const sortedKeys = Object.keys(row).map(Number).sort((a, b) => a - b)
// 创建一个新对象，重新映射键
const newRow = {}
sortedKeys.forEach((key, index) => {
newRow[index] = row[key] // 从 0 开始映射
})
return newRow
})
}
},
deep: true
},
// 监听table列表数据 发送给父组件
tableData: {
handler(newValue, oldValue) {
// 在newValue里再插入一条数据
this.$emit('afterUpdate', newValue)// table列表数据
this.$emit('tableHeader', this.tableHeader)// table列表表头
this.$emit('tableRemarks', this.tableRemarks)
},
deep: true
},
// 结果列的校验标志 数组 包含了每行的校验标志
verifyResultFlag: {
handler(newValue, oldValue) {
this.localVerifyResultFlag = JSON.parse(JSON.stringify(newValue))
},
deep: true
},
// 修改的时候 接收父组件传递过来的备注信息
remarks: {
handler(newValue, oldValue) {
this.tableRemarks = JSON.parse(JSON.stringify(newValue))
},
deep: true
}
},
created() {
this.tableData = []
// 获取OCR模版1配置 新增的时候才调
if (this.updateFlag === false) {
this.getDictOcrTemplate1()
}
},
methods: {
verifyResult(rowData, columnData, column, index) {
if (this.localVerifyResultFlag[index] === true) {
// 校验整行数据，只要有一个数据不符合条件 就将结果改为NO
const keys = Object.keys(rowData).map(Number)
// 过滤出第4个及其以后的键（索引从0开始，所以"3"是第4个）
const startIndex = 3
const endIndex = keys.length - 3 // 最后 2 个数据之前的结束索引
const filteredKeys = keys.slice(startIndex, endIndex)
// 根据过滤后的键名数组提取对应的值，并生成数组
const result = filteredKeys.map(key => rowData[key])
// 遍历result
let allInRange = 'OK' // 假设所有值都在范围内
for (let i = 0; i < result.length; i++) {
const upperBound = this.tableRemarks[index][1] // 上限
const lowerBound = this.tableRemarks[index][0]// 下限
if (upperBound === undefined && lowerBound !== '') {
// remarks只填了一个值
if (result[i] !== lowerBound) {
allInRange = 'NG'
}
} else if (upperBound === undefined && lowerBound === '') {
// remarks没填值
allInRange = 'OK'
} else {
// remarks填了范围
// 如果 columnData 不是数字，直接返回 true
if (isNaN(Number(result[i]))) {
allInRange = 'NG'
} else {
if (Number(result[i]) < Number(lowerBound) || Number(result[i]) > Number(upperBound)) {
// 不在范围之间
allInRange = 'NG'
}
}
}
}
// 新增时 判断表格中是否有数据 只有有数据的时候，才改变最后一列的值
if (this.updateFlag === false) {
if (Object.keys(rowData).length - 1 > this.fixedColumnCount) {
this.$set(rowData, Object.keys(rowData).length - 1, allInRange)
}
} else {
// 修改时 不跟新增写一样的 是因为这样可以避免无限循环
// 判断是否是最后一行 如果是最后一行 value返回的是输入的值
if (rowData[0] === this.tableData[this.tableData.length - 1][0]) {
const params = {
rowData: rowData,
value: rowData[rowData.length - 1]
}
this.$emit('updateTableData', params)
} else {
const params = {
rowData: rowData,
value: allInRange
}
this.$emit('updateTableData', params)
}
}
return allInRange
} else if (this.localVerifyResultFlag[index] === false) {
// 当为修改时 并且不需要校验的时候 直接返回数据的结果
if (this.updateFlag === true) {
return rowData[rowData.length - 1]
}
return 'OK'
} else {
return null
}
},
// 处理输入事件 一旦输入 就把当前行改为需要校验结果列的行
handleInput(rowData, columnData, column, index) {
// 通知父组件进行修改校验结果列标志
const data = JSON.parse(JSON.stringify(this.verifyResultFlag))
data[index] = true
this.localVerifyResultFlag = data
this.$emit('update:verify-result-flag', data)
// 校验结果列
this.verifyResult(rowData, columnData, column, index)
},
// 合并最后一行到倒数第四行第二列的单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 计算表格中的总行数
const totalRows = this.tableData.length
// 检查是否是倒数第四行的第二列
if (rowIndex === totalRows - 4 && columnIndex === 1) {
// 返回合并的行数和列数，这里我们只关心合并行数
return {
rowspan: 4, // 合并两行
colspan: 1 // 不合并列
}
}
// 如果是最后一行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 1 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 如果是倒数二行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 2 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 如果是倒数三行，则不渲染它在指定的列上（因为已经被合并了）
if (rowIndex === totalRows - 3 && columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
// 默认返回值，表示不做合并
return {
rowspan: 1,
colspan: 1
}
},
// 初始化时 整个表格的数据校验
dataVerify(rowData, columnData, column, index) {
// 判断该列是否需要校验,R列和结果列不需要校验
if (column.label === 'MAX' || column.label === 'MIN' || column.label === '结果') {
return false
}
// 数据为空
if (columnData === '' || columnData === null || columnData === undefined) {
return false
}
// 校验表格数据
const upperBound = this.tableRemarks[index][1] // 上限
const lowerBound = this.tableRemarks[index][0]// 下限
if (upperBound === undefined && lowerBound !== '') {
// 只填了一个值 直接判断当前输入的值是否与这一个值相等即可 相等返回OK 不等返回NG
if (columnData === lowerBound) {
// 等于 返回false
return false
} else {
// 不等 返回true
return true
}
} else if (lowerBound === '') {
// lowerBound为''证明没填remarks 不需要校验
return false
} else {
// 检查 columnData 是否为数字
if (isNaN(Number(columnData))) {
return true // 如果 columnData 不是数字，直接返回 true
} else {
if (upperBound !== '' && upperBound !== '') {
if (Number(columnData) < Number(lowerBound) || Number(columnData) > Number(upperBound)) {
// 不在范围之间
return true
} else {
return false
}
}
}
}
},
// 获取OCR模版配置
getDictOcrTemplate1() {
this.loading = true
getDict('ocr_template2').then(res => {
if (res.code === 200) {
const templateData = res.data
// 遍历templateData
for (let i = 0; i < templateData.length; i++) {
const rowData = templateData[i]
// 按逗号分割rowData的dictValue
const values = rowData.dictValue.split('，')
const remarksValues = rowData.remarks.split('，')
this.fixedColumnCount = values.length
// 往table表格里放值，但排除row1表头
if (rowData.dictLabel !== 'row1') {
const result = {}
for (let j = 0; j < values.length; j++) {
result[j] = values[j]
}
this.tableData.push(result)
const remarks = {}
for (let j = 0; j < remarksValues.length; j++) {
remarks[j] = remarksValues[j]
}
this.tableRemarks.push(remarks)
}
if (rowData.dictLabel === 'row1') {
// 获取表头数据 循环values
for (let i = 0; i < values.length; i++) {
const params = {
label: values[i],
prop: i + ''
}
this.tableHeader.push(params)
}
this.tableHeaderLength = this.tableHeader.length
}
}
this.loading = false
} else {
this.$message.error(res.msg)
}
}).catch((error) => {
this.$message.error(error.msg)
})
}
}
}
</script>
<style scoped lang="scss">
/* 错误提示样式 */
.error-message {
color: #ff0000;
font-size: 12px;
}
::v-deep .el-input__inner {
padding-left: 5px;
padding-right: 0px;
}
.custom-input ::v-deep input {
border-color: red !important; /* 确保覆盖默认样式 */
color: red !important;;
}
.custom-span{
color: red !important;;
}
</style>
src/views/sample/chCheckOrder/index.vue
View file @ 07fc2ad6
...@@ -236,6 +236,34 @@ ...@@ -236,6 +236,34 @@
@tableRemarks="getTableRemarks" @tableRemarks="getTableRemarks"
/> />
</div> </div>
<div v-if="showModelTypeB1">
<B1CheckOrders
:ocr-array="ocrArray"
:verify-result-flag.sync="verifyResultFlag"
:update-flag="updateFlag"
:return-table-header="tableHeader"
:one-key-flag="oneKeyFlag"
:remarks="subModalRemarks"
@afterUpdate="getAfterUpdateData"
@tableHeader="getTableHeader"
@updateTableData="updateTableData"
@tableRemarks="getTableRemarks"
/>
</div>
<div v-if="showModelTypeB2">
<B2CheckOrders
:ocr-array="ocrArray"
:verify-result-flag.sync="verifyResultFlag"
:update-flag="updateFlag"
:return-table-header="tableHeader"
:one-key-flag="oneKeyFlag"
:remarks="subModalRemarks"
@afterUpdate="getAfterUpdateData"
@tableHeader="getTableHeader"
@updateTableData="updateTableData"
@tableRemarks="getTableRemarks"
/>
</div>
<div <div
slot="footer" slot="footer"
class="dialog-footer" class="dialog-footer"
...@@ -259,10 +287,12 @@ import { queryList, getOcrData, addOcrData, deleteLogical, getDetailById, update ...@@ -259,10 +287,12 @@ import { queryList, getOcrData, addOcrData, deleteLogical, getDetailById, update
import { parseTime } from '@/utils' import { parseTime } from '@/utils'
import A2CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/A2CheckOrders.vue' import A2CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/A2CheckOrders.vue'
import A1CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/A1CheckOrders.vue' import A1CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/A1CheckOrders.vue'
import B1CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/B1CheckOrders.vue'
import B2CheckOrders from '@/views/sample/chCheckOrder/CheckOrders/B2CheckOrders.vue'
export default { export default {
name: 'Index', name: 'Index',
components: { A1CheckOrders, A2CheckOrders }, components: { A1CheckOrders, A2CheckOrders, B1CheckOrders, B2CheckOrders },
data() { data() {
return { return {
dialogLoading: false, dialogLoading: false,
...@@ -311,6 +341,10 @@ export default { ...@@ -311,6 +341,10 @@ export default {
showModelTypeA1: false, showModelTypeA1: false,
// 模版A2展示 // 模版A2展示
showModelTypeA2: false, showModelTypeA2: false,
// 模板B1展示
showModelTypeB1: false,
// 模板B2展示
showModelTypeB2: false,
// 总识别结果下拉框 // 总识别结果下拉框
ocrResultSelect: [ ocrResultSelect: [
{ value: '1', label: 'OK' }, { value: '1', label: 'OK' },
...@@ -328,20 +362,19 @@ export default { ...@@ -328,20 +362,19 @@ export default {
SubTypeModalOptions: [ SubTypeModalOptions: [
{ label: 'AType1', value: 'a1' }, { label: 'AType1', value: 'a1' },
{ label: 'AType2', value: 'a2' }, { label: 'AType2', value: 'a2' },
{ label: 'AType3', value: 'a3' },
{ label: 'BType1', value: 'b1' }, { label: 'BType1', value: 'b1' },
{ label: 'BType2', value: 'b2' } { label: 'BType2', value: 'b2' }
], ],
// A类型的子模版总数据 // A类型的子模版总数据
ATypeSubModalOptions: [ ATypeSubModalOptions: [
{ label: 'AType1', value: 'a1' }, { label: 'AType1', value: 'a1' },
{ label: 'AType2', value: 'a2' }, { label: 'AType2', value: 'a2' }
{ label: 'AType3', value: 'a3' }
], ],
// B类型的子模版数总数据 // B类型的子模版数总数据
BTypeSubModalOptions: [ BTypeSubModalOptions: [
{ label: 'BType1', value: 'b1' }, { label: 'BType1', value: 'b1' },
{ label: 'BType2', value: 'b2' } { label: 'BType2', value: 'b2' },
{ label: 'BType3', value: 'b3' }
], ],
oneKeyFlag: false, oneKeyFlag: false,
// 接收子组件传递过来的备注信息 // 接收子组件传递过来的备注信息
...@@ -788,12 +821,26 @@ export default { ...@@ -788,12 +821,26 @@ export default {
}, },
// 选择子类型模版 // 选择子类型模版
selectSubTypeHandler(val) { selectSubTypeHandler(val) {
if (val.includes('a1')) { const typeMap = {
this.showModelTypeA1 = true 'a1': ['showModelTypeA1', true],
this.showModelTypeA2 = false 'a2': ['showModelTypeA2', true],
} else if (val.includes('a2')) { 'b1': ['showModelTypeB1', true],
this.showModelTypeA2 = true 'b2': ['showModelTypeB2', true],
this.showModelTypeA1 = false 'b3': ['showModelTypeB1', true]
}
// 默认先隐藏所有模型类型
this.showModelTypeA1 = false
this.showModelTypeA2 = false
this.showModelTypeB1 = false
this.showModelTypeB2 = false
// 查找匹配项并更新对应的显示状态
for (const key in typeMap) {
if (val.includes(key)) {
this[typeMap[key][0]] = typeMap[key][1]
break // 找到匹配后退出循环
}
} }
// 判断是否为第一次进入修改页面 // 判断是否为第一次进入修改页面
if (this.firstTimeUpdate === true) { if (this.firstTimeUpdate === true) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment