<template>
|
<el-dialog
|
width="90%"
|
:title="isEditCommit ? '质检表单' : '布局预览'"
|
top="5vh"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="preview-layout-dialog"
|
>
|
<div>
|
<el-row
|
:gutter="5"
|
v-for="(rowItem, i) in layOutJson"
|
:key="rowItem.uniqueId"
|
>
|
<div
|
:ref="'body_row_' + rowItem.uniqueId"
|
:style="'min-height:' + rowItem.minHeight + 'px'"
|
>
|
<el-col
|
:span="colItem.span"
|
v-for="(colItem, k) in rowItem.cols"
|
:key="colItem.uniqueId"
|
>
|
<div
|
style="background:#ecf5ff;"
|
:class="[colItem.isSelect ? 'selected-item' : '']"
|
>
|
<div v-if="colItem.type === 'item'" style="position:relative;">
|
<div>
|
<div class="preview-col-title">
|
<div
|
style="cursor: move;width:calc(100% - 18px)"
|
:title="colItem.label"
|
:id="colItem.uniqueId"
|
>
|
{{ colItem.label }}
|
</div>
|
<div
|
v-if="colItem.isQualified == null"
|
style="width:18px;text-align:center;line-height:18px;background:#fff;color:#fff;border:1px solid #dcdfe6;cursor: pointer;"
|
@click.stop="judgeItem(colItem)"
|
></div>
|
<div
|
v-else-if="colItem.isQualified"
|
style="width:18px;text-align:center;line-height:18px;background:#67c23a;color:#fff;cursor: pointer;"
|
@click.stop="judgeItem(colItem)"
|
>
|
✓
|
</div>
|
<div
|
v-else
|
style="width:18px;text-align:center;line-height:18px;background:#f56c6c;color:#fff;cursor: pointer;"
|
@click.stop="judgeItem(colItem)"
|
>
|
✕
|
</div>
|
</div>
|
<div
|
class="preview-col-remark"
|
:title="colItem.referenceValue"
|
>
|
{{ colItem.referenceValue }}
|
</div>
|
<div>
|
<el-input
|
class="preview-item-input"
|
v-model="colItem.itemValue"
|
:ref="`item_input`"
|
@keyup.enter.native="focusInput(colItem.uniqueId)"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
<div v-else style="position:relative;">
|
<div>
|
<div class="preview-group-title">
|
<div
|
style="cursor: move;line-height:30px;font-weight:bold;text-align:center;"
|
:id="colItem.uniqueId"
|
>
|
{{ colItem.label }}
|
</div>
|
</div>
|
<div class="preview-group-item">
|
<el-row
|
:gutter="5"
|
v-for="(child, j) in colItem.children"
|
:key="child.uniqueId"
|
>
|
<div class="preview-test-item-row-div">
|
<el-col
|
:span="childCol.span"
|
v-for="(childCol, m) in child.cols"
|
:key="childCol.uniqueId"
|
>
|
<div style="position:relative;">
|
<div
|
style="background:#f4f6fc;"
|
:class="[
|
childCol.isSelect ? 'selected-item' : ''
|
]"
|
>
|
<div class="preview-col-title">
|
<div
|
style="cursor: move;width:calc(100% - 18px)"
|
:title="childCol.label"
|
:id="childCol.uniqueId"
|
>
|
{{ childCol.label }}
|
</div>
|
<div
|
v-if="childCol.isQualified == null"
|
style="width:18px;text-align:center;line-height:18px;background:#fff;color:#fff;border:1px solid #dcdfe6;cursor: pointer;"
|
@click.stop="judgeItem(childCol)"
|
></div>
|
<div
|
v-else-if="childCol.isQualified"
|
style="width:18px;text-align:center;line-height:18px;background:#67c23a;color:#fff;cursor: pointer;"
|
@click.stop="judgeItem(childCol)"
|
>
|
✓
|
</div>
|
<div
|
v-else
|
style="width:18px;text-align:center;line-height:18px;background:#f56c6c;color:#fff;cursor: pointer;"
|
@click.stop="judgeItem(childCol)"
|
>
|
✕
|
</div>
|
</div>
|
<div>
|
<el-input
|
class="item-input"
|
v-model="childCol.itemValue"
|
:ref="`item_input`"
|
@keyup.enter.native="
|
focusInput(childCol.uniqueId)
|
"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</div>
|
</el-row>
|
<div v-if="isEditCommit" style="text-align:right;">
|
<el-button @click="innerVisible = false">取 消</el-button>
|
<el-button type="primary" @click="saveForm">保 存</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<style>
|
.preview-col-title {
|
display: flex;
|
justify-content: space-between;
|
height: 18px;
|
text-align: center;
|
}
|
.preview-col-title div {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.preview-col-remark {
|
border-top: 1px solid #ccc;
|
height: 16px;
|
font-size: 12px;
|
text-align: center;
|
}
|
.preview-item-input input {
|
height: 28px;
|
}
|
.preview-group-title {
|
height: 30px;
|
}
|
.preview-group-item {
|
border: 1px dashed #ccc;
|
}
|
.preview-test-item-row-div {
|
min-height: 60px;
|
}
|
</style>
|
<script>
|
import { putReportSampleItem } from '@/api/quality/report'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
layOutJson: {
|
type: Array,
|
default: () => {
|
return []
|
},
|
required: true
|
},
|
isEditCommit: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
innerVisible: false
|
}
|
},
|
methods: {
|
// 保存质检表单数据
|
saveForm() {
|
const saveParams = []
|
let saveParam
|
let layOut
|
let firstCols
|
let firstCol
|
let childs
|
let child
|
let cols
|
let col
|
for (let i = 0; i < this.layOutJson.length; i++) {
|
layOut = this.layOutJson[i]
|
firstCols = layOut.cols
|
if (firstCols.length > 0) {
|
// 判断是是否为分组
|
firstCol = firstCols[0]
|
if (firstCol.type === 'item') {
|
// 普通列
|
for (let j = 0; j < firstCols.length; j++) {
|
firstCol = firstCols[j]
|
saveParam = {
|
id: firstCol.id,
|
itemValue: firstCol.itemValue,
|
isQualified: firstCol.isQualified
|
}
|
saveParams.push(saveParam)
|
}
|
} else {
|
// 分组列
|
childs = firstCol.children
|
if (childs.length > 0) {
|
for (let j = 0; j < childs.length; j++) {
|
child = childs[j]
|
if (child.cols.length > 0) {
|
cols = child.cols
|
for (let k = 0; k < cols.length; k++) {
|
col = cols[k]
|
saveParam = {
|
id: col.id,
|
itemValue: col.itemValue,
|
isQualified: col.isQualified
|
}
|
saveParams.push(saveParam)
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
if (saveParams.length > 0) {
|
putReportSampleItem(saveParams).then((response) => {
|
this.$message.success('样品检测参数保存成功')
|
this.$emit('refreshParams')
|
this.innerVisible = false
|
})
|
}
|
},
|
// 判断项检测结果
|
judgeItem(item) {
|
if (item.isQualified == null || !item.isQualified) {
|
item.isQualified = true
|
} else {
|
item.isQualified = false
|
}
|
},
|
// 聚焦
|
focusInput(uniqueId) {
|
// 只有在应用页面才支持enter换聚焦，预览页面不支持
|
if (this.isEditCommit) {
|
const itemIndex = this.getItemIndex(uniqueId)
|
const nextEl = this.$refs.item_input[itemIndex + 1]
|
if (nextEl) {
|
nextEl.focus()
|
}
|
}
|
},
|
// 返回项的index
|
getItemIndex(uniqueId) {
|
let itemIndex = 0
|
let layOut
|
let firstCols
|
let firstCol
|
let childs
|
let child
|
let cols
|
let col
|
for (let i = 0; i < this.layOutJson.length; i++) {
|
layOut = this.layOutJson[i]
|
firstCols = layOut.cols
|
if (firstCols.length > 0) {
|
// 判断是是否为分组
|
firstCol = firstCols[0]
|
if (firstCol.type === 'item') {
|
// 普通列
|
let breakFlag = false
|
for (let j = 0; j < firstCols.length; j++) {
|
firstCol = firstCols[j]
|
if (firstCol.uniqueId === uniqueId) {
|
breakFlag = true
|
break
|
} else {
|
itemIndex++
|
}
|
}
|
if (breakFlag) {
|
break
|
}
|
} else {
|
// 分组列
|
childs = firstCol.children
|
if (childs.length > 0) {
|
let flag = false
|
for (let j = 0; j < childs.length; j++) {
|
child = childs[j]
|
if (child.cols.length > 0) {
|
cols = child.cols
|
let breakFlag = false
|
for (let k = 0; k < cols.length; k++) {
|
col = cols[k]
|
if (col.uniqueId === uniqueId) {
|
breakFlag = true
|
break
|
} else {
|
itemIndex++
|
}
|
}
|
if (breakFlag) {
|
flag = true
|
break
|
}
|
}
|
}
|
if (flag) {
|
break
|
}
|
}
|
}
|
}
|
}
|
return itemIndex
|
},
|
// 关闭dialog时触发
|
closeDialog() {
|
if (this.isEditCommit) {
|
this.$confirm('此操作将关闭该页面, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
this.currshowlist = false
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
} else {
|
this.currshowlist = false
|
}
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
if (this.currshowlist) {
|
this.$nextTick(() => {
|
this.$refs.item_input[0].focus()
|
// this.getData()
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.preview-layout-dialog >>> .el-dialog__header {
|
padding: 10px 20px 10px;
|
}
|
.preview-layout-dialog >>> .el-dialog__header .el-dialog__headerbtn {
|
top: 10px;
|
}
|
.preview-layout-dialog >>> .el-dialog__body {
|
padding: 5px 15px;
|
}
|
|
.preview-layout-dialog >>> .el-dialog__footer {
|
padding: 5px 20px 10px;
|
}
|
|
.preview-layout-dialog >>> .el-dialog__body .avue-crud__pagination {
|
margin-top: 0px;
|
margin-bottom: 5px;
|
}
|
</style>
|
