Browse Source

HL-5471检验工序可以拖动移动排序

hella_online_20240828
zhang_li 3 months ago
parent
commit
73ac7eb3b3
  1. 192
      src/views/qms/inspectionScheme/addForm.vue
  2. 206
      src/views/qms/inspectionTemplate/addForm.vue

192
src/views/qms/inspectionScheme/addForm.vue

@ -247,57 +247,43 @@
</el-col> -->
</el-row>
</el-form>
<el-tabs
v-model="editableTabsValue"
closable
class="demo-tabs"
@edit="handleTabsEdit"
type="border-card"
tab-position="left"
:stretch="false"
<div class="main-body">
<div class="left">
<!-- <div class="plus-icon" @click="handleTabsEdit('', 'add')">
<el-icon><Plus /></el-icon>
</div> -->
<draggable
:list="data.process"
:disabled="!data.enabled"
item-key="name"
ghost-class="ghost"
chosen-class="chosen"
animation="300"
@change="handleChange"
>
<el-tab-pane
v-for="item in data.process"
:key="item.name"
:label="item.description"
:name="item.name"
<template #item="{ element, index }">
<div
class="tabs-label"
:class="element.name == editableTabsValue ? 'active' : ''"
@click.stop="chooseTabs(element, index)"
>
<!-- <el-col :span="12">
<el-form-item label="动态修改规则" prop="dynamicUpdateCode">
<div style="display: flex; width: 100%">
<el-input
v-model="data.dynamicUpdateName"
disabled
placeholder="请选择动态修改规则"
/>
<el-button
type="info"
plain
style="width: 40px"
@click="
opensearchTable(
'dynamicUpdateCode',
null,
'动态修改规则',
DynamicRule.allSchemas,
DynamicRuleApi.getDynamicRulePage,
[
{
key: 'available',
value: 'TRUE',
isMainValue: false
}
],
false,
'main',
data
)
"
><Icon icon="ep:search"
/></el-button>
<span>{{ element.description }}</span>
<!-- <el-icon
color="#67C23A"
@click.stop="copy(element)"
style="margin-left: 10px; margin-right: 10px"
><CopyDocument
/></el-icon> -->
<el-icon color="#409efc" @click.stop="handleTabsEdit(element.name, 'remove')"
><Close
/></el-icon>
</div>
</el-form-item>
</el-col> -->
</template>
</draggable>
</div>
<div class="right">
<div v-for="(item, index) in data.process" :key="index">
<div v-show="item.name == editableTabsValue">
<div class="small-title">检验工序</div>
<el-form :model="item" label-width="auto" :rules="rules" ref="formProcessRef">
<el-row :gutter="20">
@ -322,7 +308,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="顺序号" prop="sequenceCode">
<el-input v-model="item.sequenceCode" />
<el-input v-model="item.sequenceCode" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -423,7 +409,11 @@
v-model="item.inspectionCharacteristicsBaseVO.samplingProcessCode"
placeholder="请选择采样过程"
@blur="
onBlur('samplingProcess', SamplingProcessApi.getSamplingProcessPage, item)
onBlur(
'samplingProcess',
SamplingProcessApi.getSamplingProcessPage,
item
)
"
@focus="onFocus"
/>
@ -501,7 +491,10 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="特征类型" prop="inspectionCharacteristicsBaseVO.featureType">
<el-form-item
label="特征类型"
prop="inspectionCharacteristicsBaseVO.featureType"
>
<!-- <el-input v-model="item.featureType" /> -->
<el-select
v-model="item.inspectionCharacteristicsBaseVO.featureType"
@ -521,7 +514,10 @@
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.inspectionCharacteristicsBaseVO.featureType == 0">
<el-form-item label="计量单位" prop="inspectionCharacteristicsBaseVO.quantifyUom">
<el-form-item
label="计量单位"
prop="inspectionCharacteristicsBaseVO.quantifyUom"
>
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyUom"
:disabled="!item.inspectionCharacteristicsBaseVO.isCanUpdate"
@ -641,7 +637,9 @@
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyQuantifyCode"
placeholder="请选择选定集"
@blur="onBlur('quantifyQuantify', SelectedSetApi.getSelectedSetPage, item)"
@blur="
onBlur('quantifyQuantify', SelectedSetApi.getSelectedSetPage, item)
"
@focus="onFocus"
/>
<el-button
@ -689,8 +687,10 @@
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</div>
<template #footer>
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" :key="count" />
@ -739,6 +739,8 @@ import { DynamicRule } from '@/views/qms/dynamicRule/dynamicRule.data' //动态
import * as SelectedSetApi from '@/api/qms/selectedSet' //
import { SelectedSet } from '@/views/qms/selectedSet/selectedSet.data' //
import { validateInteger, validateMaxNumber5, validateTwoNum } from '@/utils/validator'
import { Plus, Close, CopyDocument } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
const message = useMessage() //
@ -785,6 +787,8 @@ const formFeaturesRef = ref()
const formProcessRef = ref()
const data = ref({
enabled: true,
dragging: false,
code: '',
itemCode: '',
version: '',
@ -876,7 +880,7 @@ const rules = ref({
})
const isShowField = ref(0) //aql 0 0
/** 打开弹窗 */
let tabIndex = 1
const sequenceCode = ref(0)
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any) => {
dialogVisible.value = true
if (titleName) {
@ -888,6 +892,8 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
isShowField.value = 0 //isShowField == 0aql
if (row) {
data.value = JSON.parse(JSON.stringify(row))
data.value.enabled = true
data.value.dragging = false
//
if (formType.value == 'create') {
data.value.id = ''
@ -996,6 +1002,8 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
}
} else {
data.value = {
enabled: true,
dragging: false,
code: '',
itemCode: '',
version: '',
@ -1014,8 +1022,7 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
process: []
}
}
tabIndex = data.value.process.length + 1
sequenceCode.value = data.value.process.length + 1
}
defineExpose({ open, dialogVisible, formLoading }) // open
import type { TabPaneName } from 'element-plus'
@ -1027,6 +1034,7 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
if (action === 'add') {
nameForm.value.name = ''
dialogVisibleName.value = true
sequenceCode.value = data.value.process.length + 1
} else if (action === 'remove') {
const tabs = data.value.process
let activeName = editableTabsValue.value
@ -1042,6 +1050,9 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
}
editableTabsValue.value = activeName
data.value.process = tabs.filter((tab) => tab.name !== targetName)
data.value.process.forEach((item, index) => {
item.sequenceCode = index + 1
})
}
}
/** 修改名称时间 */
@ -1051,8 +1062,11 @@ const buttonBaseClick1 = (val) => {
if (!nameRef.value) return
nameRef.value.validate((valid, fields) => {
if (valid) {
const newTabName = `${++tabIndex}`
data.value.process.push({
let newTabName = 1
if (data.value.process && data.value.process.length > 0) {
newTabName = data.value.process[data.value.process.length - 1].name + 1
}
let obj = {
description: nameForm.value.name,
name: newTabName,
inspectionCode: '',
@ -1078,9 +1092,8 @@ const buttonBaseClick1 = (val) => {
quantifyDecimal: '',
quantifyQuantifyCode: ''
}
})
console.log(data.value.process)
}
data.value.process.push(obj)
editableTabsValue.value = newTabName
dialogVisibleName.value = false
} else {
@ -1449,7 +1462,7 @@ const changeIsTarget = (e, item) => {
}
}
//
const onItemBlur= async (field, pageApi, item) => {
const onItemBlur = async (field, pageApi, item) => {
const dataObj = item ? item.inspectionCharacteristicsBaseVO : data.value
if (dataObj[field + 'Code']) {
const _searchCondition = {}
@ -1546,6 +1559,16 @@ const onFocus = () => {
]
count.value++
}
const chooseTabs = (element, index) => {
if (element.name == editableTabsValue.value) return
editableTabsValue.value = element.name
}
const handleChange = (e) => {
editableTabsValue.value = e.moved.element.name
data.value.process.forEach((item, index) => {
item.sequenceCode = index + 1
})
}
</script>
<style scoped>
.small-title {
@ -1554,6 +1577,47 @@ const onFocus = () => {
color: #1a8bfc;
font-size: 16px;
}
.main-body {
display: flex;
.left {
width: 200px;
background: rgb(245, 247, 250);
border: 1px solid rgb(220, 223, 230);
min-height: 60px;
position: relative;
padding: 6px 0px;
.plus-icon {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid rgb(220, 223, 230);
background: rgb(245, 247, 250);
display: flex;
align-items: center;
justify-items: center;
padding: 1px;
}
}
}
.tabs-label {
padding: 4px 20px 4px 20px;
min-height: 30px;
justify-content: flex-end;
display: flex;
align-items: center;
cursor: pointer;
word-break: break-all;
}
.active {
background: white;
}
.right {
border: 1px solid rgb(220, 223, 230);
flex: 1;
width: 0px;
padding: 20px;
}
</style>
<style>
.el-tabs--left .el-tabs__header.is-left {

206
src/views/qms/inspectionTemplate/addForm.vue

@ -75,32 +75,43 @@
</el-col>
</el-row>
</el-form>
<el-tabs
v-model="editableTabsValue"
editable
class="demo-tabs"
@edit="handleTabsEdit"
type="border-card"
tab-position="left"
:stretch="false"
<div class="main-body">
<div class="left">
<div class="plus-icon" @click="handleTabsEdit('', 'add')">
<el-icon><Plus /></el-icon>
</div>
<draggable
:list="data.process"
:disabled="!data.enabled"
item-key="name"
ghost-class="ghost"
chosen-class="chosen"
animation="300"
@change="handleChange"
>
<el-tab-pane
v-for="item in data.process"
:key="item.name"
:label="item.description"
:name="item.name"
<template #item="{ element, index }">
<div
class="tabs-label"
:class="element.name == editableTabsValue ? 'active' : ''"
@click.stop="chooseTabs(element, index)"
>
<template #label>
<span class="custom-tabs-label" style="display: flex; align-items: center">
<span>{{ item.description }}</span>
<Icon
icon="ep:document-copy"
<span>{{ element.description }}</span>
<el-icon
color="#67C23A"
style="margin-left: 10px"
@click.stop="copy(item)"
/>
</span>
@click.stop="copy(element)"
style="margin-left: 10px; margin-right: 10px"
><CopyDocument
/></el-icon>
<el-icon color="#409efc" @click.stop="handleTabsEdit(element.name, 'remove')"
><Close
/></el-icon>
</div>
</template>
</draggable>
</div>
<div class="right">
<div v-for="(item, index) in data.process" :key="index">
<div v-show="item.name == editableTabsValue">
<div class="small-title">检验工序</div>
<!-- <Form
:ref="`formRefProcess`+index"
@ -132,7 +143,7 @@
</el-col>
<el-col :span="12">
<el-form-item label="顺序号" prop="sequenceCode">
<el-input v-model="item.sequenceCode" type="number" />
<el-input v-model="item.sequenceCode" type="number" disabled="true" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
@ -233,7 +244,11 @@
v-model="item.inspectionCharacteristicsBaseVO.samplingProcessCode"
placeholder="请选择采样过程"
@blur="
onBlur('samplingProcess', SamplingProcessApi.getSamplingProcessPage, item)
onBlur(
'samplingProcess',
SamplingProcessApi.getSamplingProcessPage,
item
)
"
@focus="onFocus"
/>
@ -308,7 +323,10 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="特征类型" prop="inspectionCharacteristicsBaseVO.featureType">
<el-form-item
label="特征类型"
prop="inspectionCharacteristicsBaseVO.featureType"
>
<!-- <el-input v-model="item.featureType" /> -->
<el-select
v-model="item.inspectionCharacteristicsBaseVO.featureType"
@ -326,11 +344,10 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" v-if="item.inspectionCharacteristicsBaseVO.featureType == 0">
<el-form-item
label="计量单位"
prop="inspectionCharacteristicsBaseVO.quantifyUom"
v-if="item.inspectionCharacteristicsBaseVO.featureType == 0"
>
<el-select
v-model="item.inspectionCharacteristicsBaseVO.quantifyUom"
@ -345,11 +362,10 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" v-if="item.inspectionCharacteristicsBaseVO.featureType == 0">
<el-form-item
label="小数位"
prop="inspectionCharacteristicsBaseVO.quantifyDecimal"
v-if="item.inspectionCharacteristicsBaseVO.featureType == 0"
>
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyDecimal"
@ -399,7 +415,10 @@
item.inspectionCharacteristicsBaseVO.quantifyIsCapping
"
>
<el-form-item label="上限值" prop="inspectionCharacteristicsBaseVO.quantifyCapping">
<el-form-item
label="上限值"
prop="inspectionCharacteristicsBaseVO.quantifyCapping"
>
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyCapping"
type="number"
@ -430,7 +449,10 @@
item.inspectionCharacteristicsBaseVO.quantifyIsTarget
"
>
<el-form-item label="目标值" prop="inspectionCharacteristicsBaseVO.quantifyTarget">
<el-form-item
label="目标值"
prop="inspectionCharacteristicsBaseVO.quantifyTarget"
>
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyTarget"
type="number"
@ -446,7 +468,9 @@
<el-input
v-model="item.inspectionCharacteristicsBaseVO.quantifyQuantifyCode"
placeholder="请选择选定集"
@blur="onBlur('quantifyQuantify', SelectedSetApi.getSelectedSetPage, item)"
@blur="
onBlur('quantifyQuantify', SelectedSetApi.getSelectedSetPage, item)
"
@focus="onFocus"
/>
<el-button
@ -493,15 +517,13 @@
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
</div>
<template #footer>
<ButtonBase
:Butttondata="Butttondata"
@button-base-click="buttonBaseClick"
:key="count"
/>
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" :key="count" />
</template>
</Dialog>
<Dialog title="修改名称" v-model="dialogVisibleName" width="500px" :close-on-click-modal="false">
@ -536,6 +558,8 @@ import * as DynamicRuleApi from '@/api/qms/dynamicRule' //动态修改规则
import { DynamicRule } from '@/views/qms/dynamicRule/dynamicRule.data' //
import * as SelectedSetApi from '@/api/qms/selectedSet' //
import { SelectedSet } from '@/views/qms/selectedSet/selectedSet.data' //
import { Plus, Close, CopyDocument } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import {
validateInteger,
validateTwoNum,
@ -587,6 +611,8 @@ const formFeaturesRef = ref()
const formProcessRef = ref()
const data = ref({
enabled: true,
dragging: false,
code: '',
description: '',
version: '',
@ -645,7 +671,7 @@ const rules = ref({
{ required: true, message: '请输入下限值', trigger: 'blur' }
],
'inspectionCharacteristicsBaseVO.quantifyUom': [
{ required: true, message: '请选择计量单位', trigger: 'blur' }
{ required: true, message: '请选择计量单位', trigger: ['blur', 'change'] }
],
'inspectionCharacteristicsBaseVO.quantifyDecimal': [
{ required: true, message: '请输入小数位', trigger: 'blur' },
@ -658,7 +684,7 @@ const rules = ref({
})
/** 打开弹窗 */
let tabIndex = 1
const sequenceCode = ref(0)
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any) => {
dialogVisible.value = true
if (titleName) {
@ -668,10 +694,11 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
}
formType.value = type
if (row) {
console.log(row)
//
if (formType.value == 'create') {
data.value = {
enabled: true,
dragging: false,
code: '',
description: row.description,
version: String(row.version),
@ -734,6 +761,8 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
} else {
data.value = JSON.parse(JSON.stringify(row))
data.value.version = String(data.value.version)
data.value.enabled = true
data.value.dragging = false
let list = await InspectionProcessPageApi.getListByTempleteCode(row.code)
editableTabsValue.value = '1'
list.forEach((item, index) => {
@ -759,6 +788,8 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
}
} else {
data.value = {
enabled: true,
dragging: false,
code: '',
description: '',
version: '',
@ -769,7 +800,7 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any
rules.value['inspectionCharacteristicsBaseVO.quantifyTarget'][0].required = false
}
tabIndex = data.value.process.length + 1
sequenceCode.value = data.value.process.length + 1
}
defineExpose({ open, dialogVisible, formLoading }) // open
import type { TabPaneName } from 'element-plus'
@ -781,6 +812,7 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
if (action === 'add') {
nameForm.value.name = ''
dialogVisibleName.value = true
sequenceCode.value = data.value.process.length + 1
} else if (action === 'remove') {
const tabs = data.value.process
let activeName = editableTabsValue.value
@ -796,6 +828,9 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
}
editableTabsValue.value = activeName
data.value.process = tabs.filter((tab) => tab.name !== targetName)
data.value.process.forEach((item, index) => {
item.sequenceCode = index + 1
})
}
}
/** 修改名称时间 */
@ -805,13 +840,16 @@ const buttonBaseClick1 = (val) => {
if (!nameRef.value) return
nameRef.value.validate((valid, fields) => {
if (valid) {
const newTabName = `${++tabIndex}`
data.value.process.push({
let newTabName = 1
if (data.value.process && data.value.process.length > 0) {
newTabName = data.value.process[data.value.process.length - 1].name + 1
}
let obj = {
description: nameForm.value.name,
name: newTabName,
inspectionCode: '',
dynamicUpdateCode: '',
sequenceCode: '',
sequenceCode: sequenceCode.value,
inspectionCharCode: '',
inspectionCharacteristicsBaseVO: {
inspectionMethodCode: '',
@ -830,7 +868,8 @@ const buttonBaseClick1 = (val) => {
quantifyDecimal: '',
quantifyQuantifyCode: ''
}
})
}
data.value.process.push(obj)
rules.value['inspectionCharacteristicsBaseVO.quantifyCapping'][0].required = false
rules.value['inspectionCharacteristicsBaseVO.quantifyLowlimit'][0].required = false
rules.value['inspectionCharacteristicsBaseVO.quantifyTarget'][0].required = false
@ -848,7 +887,6 @@ const buttonBaseClick1 = (val) => {
}
}
const buttonBaseClick = (val) => {
console.log(val)
//
if (val == 'save') {
submitForm()
@ -861,7 +899,7 @@ const buttonBaseClick = (val) => {
//
const emit = defineEmits(['submitForm', 'searchTableSuccess'])
const validateForm = (formRef) => {
// console.log(TableBaseForm_Ref.value)
console.log(formRef)
let _lists = formRef?.map((v) => v.validate())
return Promise.all(_lists)
.then(() => {
@ -887,6 +925,7 @@ const submitForm = async () => {
//
await validateForm(formProcessRef.value)
await formMainRef.value.validate()
//
if (!data.value.process || data.value.process.length == 0) {
message.error(`请添加工序`)
@ -918,7 +957,6 @@ const submitForm = async () => {
return
}
// ,,
console.log(data.value.process)
const arr1 = data.value.process.filter(
(item) =>
((item.inspectionCharacteristicsBaseVO.quantifyIsCapping &&
@ -970,7 +1008,6 @@ const submitForm = async () => {
parseFloat(item.inspectionCharacteristicsBaseVO.quantifyTarget)))
)
})
console.log(99, arr2)
if (arr2 && arr2.length > 0) {
const str = arr2.map((item) => item.description).join(',')
message.error(`${str}工序上限值应大于目标值大于下限值`)
@ -983,9 +1020,7 @@ const submitForm = async () => {
//
emit('submitForm', formType.value, data)
}
} catch {
console.log(111)
}
} catch {}
}
/** 弹窗按钮 */
let Butttondata: any = []
@ -1007,7 +1042,6 @@ const changeFeatureType = (e, item) => {
item.inspectionCharacteristicsBaseVO.quantifyTarget = ''
item.inspectionCharacteristicsBaseVO.quantifyQuantifyCode = ''
item.inspectionCharacteristicsBaseVO.quantifyQuantifyName = ''
console.log(e)
if (e) {
rules.value['inspectionCharacteristicsBaseVO.quantifyQuantifyCode'][0].required = true
} else {
@ -1026,7 +1060,6 @@ const opensearchTable = (
type,
row
) => {
console.log(988, row)
const _searchCondition = {}
//
if (searchCondition && searchCondition.length > 0) {
@ -1093,7 +1126,6 @@ const opensearchTable = (
//
// val row
const searchTableSuccess = (formField, searchField, val, type, row) => {
console.log(row)
if (type == 'features') {
row.inspectionCharacteristicsBaseVO[formField] = val[0].code
if (formField == 'inspectionMethodCode') {
@ -1205,22 +1237,64 @@ const onFocus = () => {
]
count.value++
}
const chooseTabs = (element, index) => {
if (element.name == editableTabsValue.value) return
editableTabsValue.value = element.name
}
const handleChange = (e) => {
editableTabsValue.value = e.moved.element.name
data.value.process.forEach((item, index) => {
item.sequenceCode = index + 1
})
}
</script>
<style scoped>
<style scoped lang="scss">
.small-title {
font-weight: bold;
padding: 0px 10px 10px;
color: #1a8bfc;
font-size: 16px;
}
</style>
<style>
.el-tabs--left .el-tabs__header.is-left {
padding-bottom: 5000px;
margin-bottom: -5000px;
min-width: 150px !important;
.main-body {
display: flex;
.left {
width: 200px;
background: rgb(245, 247, 250);
border: 1px solid rgb(220, 223, 230);
min-height: 60px;
position: relative;
padding: 6px 0px;
.plus-icon {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid rgb(220, 223, 230);
background: rgb(245, 247, 250);
display: flex;
align-items: center;
justify-items: center;
padding: 1px;
}
}
}
.tabs-label {
padding: 4px 20px 4px 20px;
min-height: 30px;
justify-content: flex-end;
display: flex;
align-items: center;
cursor: pointer;
word-break: break-all;
}
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left {
min-width: 120px !important;
.active {
background: white;
}
.right {
border: 1px solid rgb(220, 223, 230);
flex: 1;
width: 0px;
padding: 20px;
}
</style>

Loading…
Cancel
Save