数据贯通完成，规程重构
This commit is contained in:
533
klp-ui/src/views/wms/processSpec/planSpec.vue
Normal file
533
klp-ui/src/views/wms/processSpec/planSpec.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<div class="plan-spec-page" v-loading="pageLoading">
|
||||
<!-- 头部 -->
|
||||
<div class="page-header">
|
||||
<el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||||
<span class="page-title">方案详情</span>
|
||||
<span v-if="versionCode" class="version-badge">版本 {{ versionCode }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 可配置 / 不可配置 切换 -->
|
||||
<div class="config-tabs">
|
||||
<span
|
||||
:class="['config-tab', { active: configMode === 'configurable' }]"
|
||||
@click="configMode = 'configurable'"
|
||||
>可配置</span>
|
||||
<span
|
||||
:class="['config-tab', { active: configMode === 'readonly' }]"
|
||||
@click="configMode = 'readonly'"
|
||||
>不可配置</span>
|
||||
</div>
|
||||
|
||||
<div class="main-layout">
|
||||
<!-- 左侧段分组 -->
|
||||
<div class="left-tree">
|
||||
<div
|
||||
:class="['tree-item', { active: activeSegment === '' }]"
|
||||
@click="activeSegment = ''"
|
||||
>全部</div>
|
||||
<div
|
||||
v-for="seg in segmentOptions"
|
||||
:key="seg.value"
|
||||
:class="['tree-item', { active: activeSegment === seg.value }]"
|
||||
@click="activeSegment = seg.value"
|
||||
>
|
||||
<span class="tree-arrow">›</span> {{ seg.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<div class="right-content">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<span class="search-label">点位名称：</span>
|
||||
<el-input
|
||||
v-model="filterName"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
style="width:200px"
|
||||
clearable
|
||||
@keyup.enter.native="applyFilter"
|
||||
/>
|
||||
<el-button size="mini" type="primary" @click="applyFilter">查询</el-button>
|
||||
<el-button size="mini" @click="resetFilter">重置</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
style="margin-left:auto"
|
||||
@click="openPlanDialog()"
|
||||
>新建方案点位</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 方案点位表 -->
|
||||
<el-table
|
||||
v-loading="planLoading"
|
||||
:data="filteredPlans"
|
||||
size="small"
|
||||
highlight-current-row
|
||||
@current-change="onPlanSelect"
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" />
|
||||
<el-table-column label="父级名称" show-overflow-tooltip>
|
||||
<template slot-scope="{ row }">{{ segLabel(row.segmentType) }} › {{ row.segmentName || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="点位名称" prop="pointName" show-overflow-tooltip />
|
||||
<el-table-column label="实际值ID" prop="actualValueId" show-overflow-tooltip />
|
||||
<el-table-column label="L1设定值ID" prop="l1SetValueId" show-overflow-tooltip />
|
||||
<el-table-column label="设定值" prop="targetValue" align="center" />
|
||||
<el-table-column label="下限" prop="lowerLimit" align="center" />
|
||||
<el-table-column label="上限" prop="upperLimit" align="center" />
|
||||
<el-table-column label="操作" align="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" size="mini" @click.stop="openPlanDialog(row)">编辑</el-button>
|
||||
<el-button type="text" size="mini" @click.stop="openParamDialog(row)">参数</el-button>
|
||||
<el-button type="text" size="mini" class="btn-danger" @click.stop="removePlan(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 方案参数面板 -->
|
||||
<template v-if="selectedPlan">
|
||||
<div class="param-header">
|
||||
<span>{{ selectedPlan.pointName || selectedPlan.pointCode }} — 参数</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openParamDialog()">新建参数</el-button>
|
||||
</div>
|
||||
<el-table v-loading="paramLoading" :data="paramList" size="small">
|
||||
<el-table-column label="参数编码" prop="paramCode" show-overflow-tooltip />
|
||||
<el-table-column label="参数名称" prop="paramName" show-overflow-tooltip />
|
||||
<el-table-column label="设定值" prop="targetValue" align="center" />
|
||||
<el-table-column label="下限" prop="lowerLimit" align="center" />
|
||||
<el-table-column label="上限" prop="upperLimit" align="center" />
|
||||
<el-table-column label="单位" prop="unit" align="center" />
|
||||
<el-table-column label="操作" align="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" size="mini" @click="openParamDialog(null, row)">编辑</el-button>
|
||||
<el-button type="text" size="mini" class="btn-danger" @click="removeParam(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 方案点位 dialog -->
|
||||
<el-dialog :title="planTitle" :visible.sync="planOpen" width="520px" append-to-body @close="planForm = {}">
|
||||
<el-form ref="planFormRef" :model="planForm" :rules="planRules" label-width="90px" size="small">
|
||||
<el-form-item label="段类型" prop="segmentType">
|
||||
<el-select v-model="planForm.segmentType" style="width:100%">
|
||||
<el-option v-for="s in segmentOptions" :key="s.value" :label="s.label" :value="s.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="段名称" prop="segmentName">
|
||||
<el-input v-model="planForm.segmentName" maxlength="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="点位名称" prop="pointName">
|
||||
<el-input v-model="planForm.pointName" maxlength="200" />
|
||||
</el-form-item>
|
||||
<el-form-item label="点位编码" prop="pointCode">
|
||||
<el-input v-model="planForm.pointCode" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实际值ID" prop="actualValueId">
|
||||
<el-input v-model="planForm.actualValueId" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="L1设定值ID" prop="l1SetValueId">
|
||||
<el-input v-model="planForm.l1SetValueId" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设定值" prop="targetValue">
|
||||
<el-input v-model="planForm.targetValue" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下限" prop="lowerLimit">
|
||||
<el-input v-model="planForm.lowerLimit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上限" prop="upperLimit">
|
||||
<el-input v-model="planForm.upperLimit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="planForm.sortOrder" :min="0" controls-position="right" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="planForm.remark" type="textarea" rows="2" maxlength="500" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button size="small" @click="planOpen = false">取消</el-button>
|
||||
<el-button size="small" type="primary" :loading="planSubmitLoading" @click="submitPlan">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 方案参数 dialog -->
|
||||
<el-dialog :title="paramTitle" :visible.sync="paramOpen" width="480px" append-to-body @close="paramForm = {}">
|
||||
<el-form ref="paramFormRef" :model="paramForm" :rules="paramRules" label-width="90px" size="small">
|
||||
<el-form-item label="参数编码" prop="paramCode">
|
||||
<el-input v-model="paramForm.paramCode" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称" prop="paramName">
|
||||
<el-input v-model="paramForm.paramName" maxlength="200" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设定值">
|
||||
<el-input v-model="paramForm.targetValue" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下限">
|
||||
<el-input v-model="paramForm.lowerLimit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上限">
|
||||
<el-input v-model="paramForm.upperLimit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-input v-model="paramForm.unit" maxlength="32" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="paramForm.remark" type="textarea" rows="2" maxlength="500" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button size="small" @click="paramOpen = false">取消</el-button>
|
||||
<el-button size="small" type="primary" :loading="paramSubmitLoading" @click="submitParam">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProcessPlan, addProcessPlan, updateProcessPlan, delProcessPlan } from '@/api/wms/processPlan'
|
||||
import { listProcessPlanParam, addProcessPlanParam, updateProcessPlanParam, delProcessPlanParam } from '@/api/wms/processPlanParam'
|
||||
|
||||
const SEGMENTS = [
|
||||
{ label: '入口段', value: 'INLET' },
|
||||
{ label: '工艺段', value: 'PROCESS' },
|
||||
{ label: '出口段', value: 'OUTLET' }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProcessSpecPlanSpec',
|
||||
data() {
|
||||
return {
|
||||
pageLoading: false,
|
||||
versionId: undefined,
|
||||
versionCode: '',
|
||||
specId: undefined,
|
||||
configMode: 'configurable',
|
||||
activeSegment: '',
|
||||
filterName: '',
|
||||
appliedFilterName: '',
|
||||
segmentOptions: SEGMENTS,
|
||||
planList: [],
|
||||
planLoading: false,
|
||||
selectedPlan: null,
|
||||
paramList: [],
|
||||
paramLoading: false,
|
||||
planOpen: false,
|
||||
planTitle: '',
|
||||
planSubmitLoading: false,
|
||||
planForm: {},
|
||||
planRules: {
|
||||
segmentType: [{ required: true, message: '请选择段类型', trigger: 'change' }],
|
||||
pointName: [{ required: true, message: '点位名称不能为空', trigger: 'blur' }],
|
||||
pointCode: [{ required: true, message: '点位编码不能为空', trigger: 'blur' }]
|
||||
},
|
||||
paramOpen: false,
|
||||
paramTitle: '',
|
||||
paramSubmitLoading: false,
|
||||
paramForm: {},
|
||||
paramRules: {
|
||||
paramCode: [{ required: true, message: '参数编码不能为空', trigger: 'blur' }],
|
||||
paramName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredPlans() {
|
||||
return this.planList.filter(p => {
|
||||
const segOk = !this.activeSegment || p.segmentType === this.activeSegment
|
||||
const nameOk = !this.appliedFilterName || (p.pointName || '').includes(this.appliedFilterName)
|
||||
return segOk && nameOk
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: { immediate: true, handler() { this.syncFromRoute() } }
|
||||
},
|
||||
methods: {
|
||||
syncFromRoute() {
|
||||
const q = this.$route.query
|
||||
this.versionId = q.versionId || undefined
|
||||
this.versionCode = q.versionCode || ''
|
||||
this.specId = q.specId || undefined
|
||||
if (this.versionId) this.loadPlans()
|
||||
},
|
||||
goBack() { this.$router.go(-1) },
|
||||
segLabel(val) {
|
||||
const hit = SEGMENTS.find(s => s.value === val)
|
||||
return hit ? hit.label : val || ''
|
||||
},
|
||||
loadPlans() {
|
||||
this.planLoading = true
|
||||
this.selectedPlan = null
|
||||
this.paramList = []
|
||||
listProcessPlan({ versionId: this.versionId, pageNum: 1, pageSize: 500 }).then(res => {
|
||||
this.planList = res.rows || []
|
||||
}).catch(e => console.error(e)).finally(() => { this.planLoading = false })
|
||||
},
|
||||
loadParams(planId) {
|
||||
this.paramLoading = true
|
||||
listProcessPlanParam({ planId, pageNum: 1, pageSize: 500 }).then(res => {
|
||||
this.paramList = res.rows || []
|
||||
}).catch(e => console.error(e)).finally(() => { this.paramLoading = false })
|
||||
},
|
||||
onPlanSelect(row) {
|
||||
if (!row) return
|
||||
this.selectedPlan = row
|
||||
this.loadParams(row.planId)
|
||||
},
|
||||
applyFilter() { this.appliedFilterName = this.filterName },
|
||||
resetFilter() { this.filterName = ''; this.appliedFilterName = '' },
|
||||
openPlanDialog(row) {
|
||||
this.planForm = row
|
||||
? { ...row }
|
||||
: {
|
||||
versionId: this.versionId,
|
||||
segmentType: 'PROCESS',
|
||||
segmentName: undefined,
|
||||
pointName: undefined,
|
||||
pointCode: undefined,
|
||||
actualValueId: undefined,
|
||||
l1SetValueId: undefined,
|
||||
targetValue: undefined,
|
||||
lowerLimit: undefined,
|
||||
upperLimit: undefined,
|
||||
sortOrder: 0,
|
||||
remark: undefined
|
||||
}
|
||||
this.planTitle = row ? '编辑方案点位' : '新建方案点位'
|
||||
this.planOpen = true
|
||||
this.$nextTick(() => this.$refs.planFormRef && this.$refs.planFormRef.clearValidate())
|
||||
},
|
||||
submitPlan() {
|
||||
this.$refs.planFormRef.validate(ok => {
|
||||
if (!ok) return
|
||||
this.planSubmitLoading = true
|
||||
const req = this.planForm.planId ? updateProcessPlan(this.planForm) : addProcessPlan(this.planForm)
|
||||
req.then(() => {
|
||||
this.$modal.msgSuccess('保存成功')
|
||||
this.planOpen = false
|
||||
this.loadPlans()
|
||||
}).catch(e => console.error(e)).finally(() => { this.planSubmitLoading = false })
|
||||
})
|
||||
},
|
||||
removePlan(row) {
|
||||
this.$modal.confirm('确认删除该方案点位？').then(() => {
|
||||
return delProcessPlan(row.planId)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
if (this.selectedPlan && this.selectedPlan.planId === row.planId) {
|
||||
this.selectedPlan = null
|
||||
this.paramList = []
|
||||
}
|
||||
this.loadPlans()
|
||||
}).catch(() => {})
|
||||
},
|
||||
openParamDialog(planRow, paramRow) {
|
||||
const targetPlan = planRow || this.selectedPlan
|
||||
if (!targetPlan) { this.$message.warning('请先选择一个方案点位'); return }
|
||||
if (!this.selectedPlan || this.selectedPlan.planId !== targetPlan.planId) {
|
||||
this.selectedPlan = targetPlan
|
||||
this.loadParams(targetPlan.planId)
|
||||
}
|
||||
this.paramForm = paramRow
|
||||
? { ...paramRow }
|
||||
: {
|
||||
planId: targetPlan.planId,
|
||||
paramCode: undefined,
|
||||
paramName: undefined,
|
||||
targetValue: undefined,
|
||||
lowerLimit: undefined,
|
||||
upperLimit: undefined,
|
||||
unit: undefined,
|
||||
remark: undefined
|
||||
}
|
||||
this.paramTitle = paramRow ? '编辑方案参数' : '新建方案参数'
|
||||
this.paramOpen = true
|
||||
this.$nextTick(() => this.$refs.paramFormRef && this.$refs.paramFormRef.clearValidate())
|
||||
},
|
||||
submitParam() {
|
||||
this.$refs.paramFormRef.validate(ok => {
|
||||
if (!ok) return
|
||||
this.paramSubmitLoading = true
|
||||
const req = this.paramForm.paramId ? updateProcessPlanParam(this.paramForm) : addProcessPlanParam(this.paramForm)
|
||||
req.then(() => {
|
||||
this.$modal.msgSuccess('保存成功')
|
||||
this.paramOpen = false
|
||||
this.loadParams(this.selectedPlan.planId)
|
||||
}).catch(e => console.error(e)).finally(() => { this.paramSubmitLoading = false })
|
||||
})
|
||||
},
|
||||
removeParam(row) {
|
||||
this.$modal.confirm('确认删除该参数？').then(() => {
|
||||
return delProcessPlanParam(row.paramId)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.loadParams(this.selectedPlan.planId)
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plan-spec-page {
|
||||
padding: 16px 20px;
|
||||
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f0f2f5;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.config-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.config-tab {
|
||||
padding: 5px 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
transition: color .15s, background .15s;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.config-tab:last-child { border-right: none; }
|
||||
.config-tab:hover { color: #5F7BA0; }
|
||||
|
||||
.config-tab.active {
|
||||
color: #fff;
|
||||
background: #5F7BA0;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tree {
|
||||
width: 120px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #ebeef5;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
padding: 9px 16px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
transition: all .15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tree-item:hover { background: #f5f7fa; }
|
||||
|
||||
.tree-item.active {
|
||||
background: #5F7BA0;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-item.active .tree-arrow { color: rgba(255,255,255,.6); }
|
||||
|
||||
.tree-arrow {
|
||||
margin-right: 4px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.param-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0 8px;
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-table { border-radius: 0; }
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
color: #fff !important;
|
||||
background: #5F7BA0 !important;
|
||||
border-color: #5F7BA0 !important;
|
||||
}
|
||||
::v-deep .el-button--primary:hover,
|
||||
::v-deep .el-button--primary:focus { background: #4d6a8e !important; border-color: #4d6a8e !important; }
|
||||
::v-deep .el-button--primary:active { background: #4a6585 !important; border-color: #4a6585 !important; }
|
||||
::v-deep .el-button--primary.is-disabled { opacity: .5; }
|
||||
|
||||
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger) {
|
||||
color: #606266 !important;
|
||||
background: #fff !important;
|
||||
border-color: #dcdfe6 !important;
|
||||
}
|
||||
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):hover {
|
||||
color: #5F7BA0 !important;
|
||||
border-color: #5F7BA0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-button--text { background: transparent !important; border-color: transparent !important; }
|
||||
::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }
|
||||
|
||||
.btn-danger { color: #f56c6c; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user