refactor(wms/processSpec): 重构规程管理页面为版本管理模式
重构了整个流程规格页面，将原来的单页面管理改为分离的规程列表和版本管理模式，拆分了新增/编辑弹窗，移除了冗余的产线和类型筛选Tab，优化了页面布局和样式。
This commit is contained in:
@@ -1,601 +1,392 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="spec-page">
|
<div class="spec-version-page" v-loading="pageLoading">
|
||||||
<!-- 规程类型 -->
|
<!-- 头部 -->
|
||||||
<div class="dict-toolbar-row">
|
<div class="page-header">
|
||||||
<div class="type-tab-bar">
|
<span class="page-title">规程版本管理</span>
|
||||||
<span
|
<el-button
|
||||||
v-for="t in specTypeTab"
|
type="primary"
|
||||||
:key="'stype-' + (t.value === '' ? 'all' : t.value)"
|
size="small"
|
||||||
:class="['type-tab', { active: activeSpecType === t.value }]"
|
icon="el-icon-plus"
|
||||||
@click="switchSpecType(t.value)"
|
style="margin-left:auto"
|
||||||
>{{ t.label }}</span>
|
@click="openSpecDialog()"
|
||||||
</div>
|
>新建规程</el-button>
|
||||||
<dict-select
|
|
||||||
toolbar-only
|
|
||||||
:kisv="false"
|
|
||||||
:editable="true"
|
|
||||||
:refresh="false"
|
|
||||||
:dict-type="DICT_SPEC_TYPE"
|
|
||||||
panel-title="规程工艺类型字典"
|
|
||||||
@dict-updated="loadSpecTypeDict"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 产线 -->
|
<!-- 规程列表 -->
|
||||||
<div class="dict-toolbar-row line-row">
|
<div class="section-wrapper">
|
||||||
<div class="line-tab-bar">
|
<div class="section-title">规程列表</div>
|
||||||
<span
|
<el-table
|
||||||
:class="['line-tab', { active: activeLineId === '' }]"
|
:data="specList"
|
||||||
@click="switchLine('')"
|
size="small"
|
||||||
>全部</span>
|
highlight-current-row
|
||||||
<span
|
@row-click="onSpecRowClick"
|
||||||
v-for="line in lineOptions"
|
:row-class-name="tableRowClassName"
|
||||||
:key="'ln-' + line.lineId"
|
>
|
||||||
:class="['line-tab', { active: lineTabActive(line) }]"
|
<el-table-column label="规程编码" prop="specCode" width="150" />
|
||||||
@click="switchLine(line.lineId)"
|
<el-table-column label="规程名称" prop="specName" />
|
||||||
>{{ line.lineName }}</span>
|
<el-table-column label="创建时间" prop="createTime" width="180" />
|
||||||
</div>
|
<el-table-column label="操作" align="right" width="180">
|
||||||
<dict-select
|
<template slot-scope="{ row }">
|
||||||
toolbar-only
|
<el-button type="text" size="mini" @click.stop="openSpecDialog(row)">编辑</el-button>
|
||||||
:kisv="false"
|
<el-button type="text" size="mini" class="btn-danger" @click.stop="removeSpec(row)">删除</el-button>
|
||||||
:editable="true"
|
</template>
|
||||||
:refresh="false"
|
</el-table-column>
|
||||||
:dict-type="DICT_LINE"
|
</el-table>
|
||||||
panel-title="规程产线筛选项（字典值为产线 line_id）"
|
|
||||||
@dict-updated="loadLineOptions"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 工具栏 -->
|
<!-- 版本列表 -->
|
||||||
<div class="toolbar">
|
<div class="section-wrapper" v-if="currentSpec">
|
||||||
<div class="toolbar-left">
|
<div class="section-title">
|
||||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
版本列表 - {{ currentSpec.specName }}
|
||||||
<el-button size="mini" icon="el-icon-edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
<el-button
|
||||||
<el-button size="mini" icon="el-icon-delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
|
type="primary"
|
||||||
</div>
|
size="mini"
|
||||||
<div class="toolbar-right">
|
icon="el-icon-plus"
|
||||||
<el-input
|
@click="openVersionDialog()"
|
||||||
v-model="queryParams.specName"
|
>新建版本</el-button>
|
||||||
size="small"
|
|
||||||
placeholder="规程名称"
|
|
||||||
clearable
|
|
||||||
style="width:180px; margin-right:8px"
|
|
||||||
@keyup.enter.native="handleQuery"
|
|
||||||
/>
|
|
||||||
<el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
|
|
||||||
<el-button size="mini" @click="resetQuery">重置</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<el-table
|
||||||
|
:data="versionList"
|
||||||
|
size="small"
|
||||||
|
highlight-current-row
|
||||||
|
@row-click="onVersionRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column label="版本号" prop="versionCode" />
|
||||||
|
<el-table-column label="状态" prop="status" />
|
||||||
|
<el-table-column label="创建时间" prop="createTime" />
|
||||||
|
<el-table-column label="生效" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-switch
|
||||||
|
:value="row.isActive === 1"
|
||||||
|
active-color="#5F7BA0"
|
||||||
|
@click.native.stop
|
||||||
|
@change="handleActiveChange(row, $event)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" align="right">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" size="mini" @click.stop="openVersionDialog(row)">编辑</el-button>
|
||||||
|
<el-button type="text" size="mini" class="btn-danger" @click.stop="removeVersion(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-empty v-if="!versionList.length && !versionLoading" description="暂无版本，请新建" style="padding:40px 0" />
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="empty-hint">请选择一个规程查看其版本</div>
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 新建/编辑规程 -->
|
||||||
<el-table
|
<el-dialog :title="specTitle" :visible.sync="specOpen" width="500px" append-to-body @close="specForm = {}">
|
||||||
v-loading="loading"
|
<el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
|
||||||
:data="dataList"
|
<el-form-item label="规程编码" prop="specCode">
|
||||||
size="small"
|
<el-input v-model="specForm.specCode" placeholder="请输入规程编码" maxlength="64" />
|
||||||
highlight-current-row
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" />
|
|
||||||
<el-table-column label="规程编号" prop="specCode" show-overflow-tooltip />
|
|
||||||
<el-table-column label="规程名称" prop="specName" show-overflow-tooltip />
|
|
||||||
<el-table-column label="产品类型" prop="productType" show-overflow-tooltip />
|
|
||||||
<el-table-column label="创建时间" prop="createTime" />
|
|
||||||
<el-table-column label="启用" align="center">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<el-switch
|
|
||||||
:value="row.isEnabled === 1"
|
|
||||||
active-color="#5F7BA0"
|
|
||||||
@change="toggleEnabled(row, $event)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" align="right">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<el-button type="text" size="mini" @click="goVersionManage(row)">版本与方案</el-button>
|
|
||||||
<el-button type="text" size="mini" @click="handleUpdate(row)">修改</el-button>
|
|
||||||
<el-button type="text" size="mini" class="btn-danger" @click="handleDelete(row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
v-show="total > 0"
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 新增/修改 -->
|
|
||||||
<el-dialog :title="dialogTitle" :visible.sync="open" width="520px" append-to-body @close="reset">
|
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="88px" size="small">
|
|
||||||
<el-form-item label="规程编号" prop="specCode">
|
|
||||||
<el-input v-model="form.specCode" placeholder="唯一编号" maxlength="64" show-word-limit />
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="规程名称" prop="specName">
|
<el-form-item label="规程名称" prop="specName">
|
||||||
<el-input v-model="form.specName" maxlength="200" show-word-limit />
|
<el-input v-model="specForm.specName" placeholder="请输入规程名称" maxlength="200" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="规程类型" prop="specType">
|
<el-form-item label="备注">
|
||||||
<el-select v-model="form.specType" style="width:100%">
|
<el-input v-model="specForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
|
||||||
<el-option
|
|
||||||
v-for="t in specTypeOptionsForForm"
|
|
||||||
:key="t.dictValue"
|
|
||||||
:label="t.dictLabel"
|
|
||||||
:value="t.dictValue"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产线" prop="lineId">
|
|
||||||
<el-select v-model="form.lineId" filterable placeholder="请选择" style="width:100%">
|
|
||||||
<el-option
|
|
||||||
v-for="line in lineOptionsForForm"
|
|
||||||
:key="line.lineId"
|
|
||||||
:label="lineOptLabel(line)"
|
|
||||||
:value="line.lineId"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产品类型" prop="productType">
|
|
||||||
<el-input v-model="form.productType" maxlength="100" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="是否启用" prop="isEnabled">
|
|
||||||
<el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input v-model="form.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
<el-button size="small" @click="open = false">取消</el-button>
|
<el-button size="small" @click="specOpen = false">取消</el-button>
|
||||||
<el-button size="small" type="primary" :loading="btnLoading" @click="submitForm">确定</el-button>
|
<el-button size="small" type="primary" :loading="specSubmitLoading" @click="submitSpec">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 新建/编辑版本 -->
|
||||||
|
<el-dialog :title="versionTitle" :visible.sync="versionOpen" width="500px" append-to-body @close="versionForm = {}">
|
||||||
|
<el-form ref="versionFormRef" :model="versionForm" :rules="versionRules" label-width="88px" size="small">
|
||||||
|
<el-form-item label="版本号" prop="versionCode">
|
||||||
|
<el-input v-model="versionForm.versionCode" placeholder="如 V1.0" maxlength="64" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="versionForm.status" style="width:100%">
|
||||||
|
<el-option v-for="s in statusOptions" :key="s" :label="s" :value="s" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="保存后生效">
|
||||||
|
<el-switch v-model="versionForm.isActive" :active-value="1" :inactive-value="0" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="versionForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer">
|
||||||
|
<el-button size="small" @click="versionOpen = false">取消</el-button>
|
||||||
|
<el-button size="small" type="primary" :loading="versionSubmitLoading" @click="submitVersion">确定</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getDicts } from '@/api/system/dict/data'
|
import { listProcessSpec, getProcessSpec, addProcessSpec, updateProcessSpec, delProcessSpec } from '@/api/wms/processSpec'
|
||||||
import { listProcessSpec, getProcessSpec, delProcessSpec, updateProcessSpec, addProcessSpec } from '@/api/wms/processSpec'
|
import {
|
||||||
import { listProductionLine } from '@/api/wms/productionLine'
|
listProcessSpecVersion,
|
||||||
|
addProcessSpecVersion,
|
||||||
const DICT_SPEC_TYPE = 'wms_process_spec_type'
|
updateProcessSpecVersion,
|
||||||
const DICT_LINE = 'wms_process_spec_line'
|
delProcessSpecVersion,
|
||||||
|
activateProcessSpecVersion
|
||||||
const DEFAULT_SPEC_TYPES = [
|
} from '@/api/wms/processSpecVersion'
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProcessSpec',
|
name: 'SpecVersionManage',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
DICT_SPEC_TYPE,
|
pageLoading: false,
|
||||||
DICT_LINE,
|
specList: [],
|
||||||
loading: false,
|
currentSpec: null,
|
||||||
btnLoading: false,
|
currentSpecId: null,
|
||||||
total: 0,
|
versionList: [],
|
||||||
dataList: [],
|
versionLoading: false,
|
||||||
ids: [],
|
statusOptions: ['DRAFT', 'PUBLISHED', 'OBSOLETE'],
|
||||||
single: true,
|
|
||||||
multiple: true,
|
// 规程相关
|
||||||
open: false,
|
specOpen: false,
|
||||||
dialogTitle: '',
|
specTitle: '',
|
||||||
specTypeRows: [],
|
specSubmitLoading: false,
|
||||||
lineOptions: [],
|
specForm: {},
|
||||||
activeSpecType: '',
|
specRules: {
|
||||||
activeLineId: '',
|
specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
|
||||||
queryParams: {
|
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
specName: undefined,
|
|
||||||
specType: undefined,
|
|
||||||
lineId: undefined
|
|
||||||
},
|
},
|
||||||
form: {},
|
|
||||||
rules: {
|
// 版本相关
|
||||||
specCode: [{ required: true, message: '规程编号不能为空', trigger: 'blur' }],
|
versionOpen: false,
|
||||||
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }],
|
versionTitle: '',
|
||||||
specType: [{ required: true, message: '请选择规程类型', trigger: 'change' }],
|
versionSubmitLoading: false,
|
||||||
lineId: [{ required: true, message: '请选择产线', trigger: 'change' }]
|
versionForm: {},
|
||||||
|
versionRules: {
|
||||||
|
versionCode: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
|
||||||
|
status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
specTypeTab() {
|
|
||||||
const rows = this.mergeSpecTypeRowsWithDefaults()
|
|
||||||
const sorted = [...rows].sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
|
|
||||||
return [{ label: '全部', value: '' }, ...sorted.map(r => ({ label: r.dictLabel, value: r.dictValue }))]
|
|
||||||
},
|
|
||||||
specTypeOptionsForForm() {
|
|
||||||
const rows = this.mergeSpecTypeRowsWithDefaults()
|
|
||||||
return [...rows].sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
|
|
||||||
},
|
|
||||||
lineOptionsForForm() {
|
|
||||||
return this.lineOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
Promise.all([this.loadSpecTypeDict(), this.loadLineOptions()]).finally(() => {
|
this.loadSpecs()
|
||||||
this.getList()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
// 表格行样式
|
||||||
* 工艺类型：默认 PROCESS/STANDARD 与字典合并。若仅有字典中存在的新项，仍可保留两行基础兜底；同 dict_value 以字典为准（可改名、调 sort）。
|
tableRowClassName({ row }) {
|
||||||
*/
|
return row.specId === this.currentSpecId ? 'current-row' : ''
|
||||||
mergeSpecTypeRowsWithDefaults() {
|
|
||||||
const byVal = new Map()
|
|
||||||
DEFAULT_SPEC_TYPES.forEach(row => {
|
|
||||||
byVal.set(row.dictValue, { ...row })
|
|
||||||
})
|
|
||||||
for (const row of this.specTypeRows || []) {
|
|
||||||
if (!row || row.dictValue === undefined || row.dictValue === null || row.dictValue === '') continue
|
|
||||||
const v = String(row.dictValue)
|
|
||||||
const prev = byVal.get(v)
|
|
||||||
const sort = row.dictSort != null && row.dictSort !== ''
|
|
||||||
? Number(row.dictSort)
|
|
||||||
: (prev && prev.dictSort != null ? prev.dictSort : 999)
|
|
||||||
const label = (row.dictLabel != null && String(row.dictLabel).trim() !== '')
|
|
||||||
? row.dictLabel
|
|
||||||
: (prev && prev.dictLabel)
|
|
||||||
byVal.set(v, {
|
|
||||||
dictLabel: label,
|
|
||||||
dictValue: v,
|
|
||||||
dictSort: sort
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return Array.from(byVal.values())
|
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* 产线 ID 与字典值：用数字字符串，避免超过 Number.MAX_SAFE_INTEGER 时精度丢失（雪花 id）。
|
|
||||||
*/
|
|
||||||
normalizeLineIdString(value) {
|
|
||||||
if (value === undefined || value === null || value === '') return ''
|
|
||||||
const s = String(value).trim()
|
|
||||||
return /^\d+$/.test(s) ? s : ''
|
|
||||||
},
|
|
||||||
/** Tab 高亮：雪花 id 一律按字符串比较 */
|
|
||||||
lineTabActive(line) {
|
|
||||||
if (this.activeLineId === '' || this.activeLineId === undefined) return false
|
|
||||||
return String(this.activeLineId) === String(line.lineId)
|
|
||||||
},
|
|
||||||
parseDictRows(res) {
|
|
||||||
const rows = (res.data || []).filter(d => d.status === '0' || d.status === undefined)
|
|
||||||
rows.sort((a, b) => (Number(a.dictSort) || 0) - (Number(b.dictSort) || 0))
|
|
||||||
return rows
|
|
||||||
},
|
|
||||||
async loadSpecTypeDict() {
|
|
||||||
try {
|
|
||||||
const res = await getDicts(DICT_SPEC_TYPE)
|
|
||||||
this.specTypeRows = this.parseDictRows(res)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('规程工艺类型字典加载失败', err)
|
|
||||||
this.specTypeRows = []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 产线 Tab：产线主表 ∪ 字典中合法数字 line_id（字典独有也会显示 Tab）。
|
|
||||||
* line_id 全程用数字字符串，避免超过 Number.MAX_SAFE_INTEGER 时精度丢失；字典值须为数字 line_id。
|
|
||||||
*/
|
|
||||||
async loadLineOptions() {
|
|
||||||
const previousOptions = Array.isArray(this.lineOptions) && this.lineOptions.length
|
|
||||||
? this.lineOptions.map(o => ({ ...o }))
|
|
||||||
: []
|
|
||||||
|
|
||||||
let dictRows = []
|
// 加载规程列表
|
||||||
try {
|
loadSpecs() {
|
||||||
const res = await getDicts(DICT_LINE)
|
this.pageLoading = true
|
||||||
dictRows = this.parseDictRows(res)
|
listProcessSpec({ pageNum: 1, pageSize: 500 }).then(res => {
|
||||||
} catch (err) {
|
this.specList = res.rows || []
|
||||||
console.error('规程产线字典加载失败', err)
|
if (this.specList.length > 0 && !this.currentSpec) {
|
||||||
}
|
this.selectSpec(this.specList[0])
|
||||||
|
|
||||||
const dictMeta = new Map()
|
|
||||||
for (const d of dictRows) {
|
|
||||||
const idStr = this.normalizeLineIdString(d.dictValue)
|
|
||||||
if (!idStr) continue
|
|
||||||
const sort = Number(d.dictSort) || 0
|
|
||||||
const label = (d.dictLabel != null && String(d.dictLabel).trim() !== '')
|
|
||||||
? String(d.dictLabel).trim()
|
|
||||||
: idStr
|
|
||||||
dictMeta.set(idStr, { label, sort })
|
|
||||||
}
|
|
||||||
|
|
||||||
let tableLines = []
|
|
||||||
// try {
|
|
||||||
// const res = await listProductionLine({ pageNum: 1, pageSize: 500 })
|
|
||||||
// tableLines = (res.rows || []).map(p => {
|
|
||||||
// const idStr = this.normalizeLineIdString(p.lineId) || (p.lineId != null ? String(p.lineId).trim() : '')
|
|
||||||
// return {
|
|
||||||
// lineId: idStr,
|
|
||||||
// lineName: p.lineName,
|
|
||||||
// lineCode: p.lineCode
|
|
||||||
// }
|
|
||||||
// }).filter(p => p.lineId)
|
|
||||||
// } catch (e2) {
|
|
||||||
// console.error('产线列表加载失败', e2)
|
|
||||||
// }
|
|
||||||
|
|
||||||
const tableIdSet = new Set(tableLines.map(l => String(l.lineId)))
|
|
||||||
const next = []
|
|
||||||
|
|
||||||
for (const line of tableLines) {
|
|
||||||
const idStr = String(line.lineId)
|
|
||||||
const dm = dictMeta.get(idStr)
|
|
||||||
next.push({
|
|
||||||
lineId: idStr,
|
|
||||||
lineName: dm ? dm.label : line.lineName,
|
|
||||||
lineCode: line.lineCode
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const dictOnly = []
|
|
||||||
for (const [idStr, meta] of dictMeta) {
|
|
||||||
if (!tableIdSet.has(idStr)) {
|
|
||||||
dictOnly.push({ lineId: idStr, lineName: meta.label, lineCode: undefined, _sort: meta.sort })
|
|
||||||
}
|
}
|
||||||
}
|
}).catch(e => console.error(e)).finally(() => { this.pageLoading = false })
|
||||||
dictOnly.sort((a, b) => a._sort - b._sort)
|
},
|
||||||
dictOnly.forEach(d => {
|
|
||||||
const { _sort, ...rest } = d
|
|
||||||
next.push(rest)
|
|
||||||
})
|
|
||||||
|
|
||||||
if (next.length === 0 && previousOptions.length > 0) {
|
// 选择规程
|
||||||
console.warn('[规程产线] 本次未解析出有效筛选项（可能字典值非数字或产线接口异常），保留上一版 Tab')
|
selectSpec(spec) {
|
||||||
|
this.currentSpec = spec
|
||||||
|
this.currentSpecId = spec.specId
|
||||||
|
this.loadVersions()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击规程行
|
||||||
|
onSpecRowClick(row) {
|
||||||
|
this.selectSpec(row)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载版本列表
|
||||||
|
loadVersions() {
|
||||||
|
if (!this.currentSpecId) return
|
||||||
|
this.versionLoading = true
|
||||||
|
listProcessSpecVersion({ specId: this.currentSpecId, pageNum: 1, pageSize: 200 }).then(res => {
|
||||||
|
this.versionList = res.rows || []
|
||||||
|
}).catch(e => console.error(e)).finally(() => { this.versionLoading = false })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击版本行
|
||||||
|
onVersionRowClick(row) {
|
||||||
|
this.goPlanSpec(row)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转到方案详情
|
||||||
|
goPlanSpec(row) {
|
||||||
|
const basePath = this.$route.path.replace(/\/[^/]*$/, '')
|
||||||
|
console.log(basePath)
|
||||||
|
this.$router.push({
|
||||||
|
path: `/process/processSpec/planSpec`,
|
||||||
|
query: { specId: this.currentSpecId, versionId: String(row.versionId), versionCode: row.versionCode }
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生效切换
|
||||||
|
handleActiveChange(row, val) {
|
||||||
|
if (!val) {
|
||||||
|
this.$message.info('请激活其他版本来替换当前生效版本')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.lineOptions = next
|
this.$modal.confirm('确认将版本"' + row.versionCode + '"设为当前生效版本？').then(() => {
|
||||||
},
|
return activateProcessSpecVersion(row.versionId)
|
||||||
lineOptLabel(line) {
|
|
||||||
if (line.lineCode) {
|
|
||||||
return `${line.lineName}（${line.lineCode}）`
|
|
||||||
}
|
|
||||||
return line.lineName
|
|
||||||
},
|
|
||||||
getList() {
|
|
||||||
this.loading = true
|
|
||||||
listProcessSpec(this.queryParams).then(res => {
|
|
||||||
this.dataList = res.rows || []
|
|
||||||
this.total = res.total || 0
|
|
||||||
}).finally(() => { this.loading = false })
|
|
||||||
},
|
|
||||||
switchSpecType(val) {
|
|
||||||
this.activeSpecType = val
|
|
||||||
this.queryParams.specType = val || undefined
|
|
||||||
this.queryParams.pageNum = 1
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
switchLine(lineId) {
|
|
||||||
if (lineId === '' || lineId === undefined || lineId === null) {
|
|
||||||
this.activeLineId = ''
|
|
||||||
} else {
|
|
||||||
const s = this.normalizeLineIdString(lineId)
|
|
||||||
this.activeLineId = s || String(lineId).trim()
|
|
||||||
}
|
|
||||||
this.queryParams.lineId = this.activeLineId === '' ? undefined : this.activeLineId
|
|
||||||
this.queryParams.pageNum = 1
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
handleQuery() {
|
|
||||||
this.queryParams.pageNum = 1
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
resetQuery() {
|
|
||||||
this.queryParams.specName = undefined
|
|
||||||
this.handleQuery()
|
|
||||||
},
|
|
||||||
handleSelectionChange(sel) {
|
|
||||||
this.ids = sel.map(r => r.specId)
|
|
||||||
this.single = sel.length !== 1
|
|
||||||
this.multiple = !sel.length
|
|
||||||
},
|
|
||||||
defaultSpecType() {
|
|
||||||
const first = this.specTypeOptionsForForm[0]
|
|
||||||
return first ? first.dictValue : 'PROCESS'
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.form = {
|
|
||||||
specId: undefined,
|
|
||||||
specCode: undefined,
|
|
||||||
specName: undefined,
|
|
||||||
specType: this.defaultSpecType(),
|
|
||||||
lineId: undefined,
|
|
||||||
productType: undefined,
|
|
||||||
isEnabled: 1,
|
|
||||||
remark: undefined
|
|
||||||
}
|
|
||||||
this.$refs.form && this.$refs.form.clearValidate()
|
|
||||||
},
|
|
||||||
handleAdd() {
|
|
||||||
this.reset()
|
|
||||||
this.dialogTitle = '新增规程'
|
|
||||||
this.open = true
|
|
||||||
},
|
|
||||||
handleUpdate(row) {
|
|
||||||
this.reset()
|
|
||||||
const specId = row ? row.specId : this.ids[0]
|
|
||||||
getProcessSpec(specId).then(res => {
|
|
||||||
this.form = res.data || {}
|
|
||||||
if (this.form.lineId != null && this.form.lineId !== '') {
|
|
||||||
const sid = this.normalizeLineIdString(this.form.lineId)
|
|
||||||
this.form.lineId = sid || String(this.form.lineId).trim()
|
|
||||||
}
|
|
||||||
this.dialogTitle = '修改规程'
|
|
||||||
this.open = true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
submitForm() {
|
|
||||||
this.$refs.form.validate(valid => {
|
|
||||||
if (!valid) return
|
|
||||||
this.btnLoading = true
|
|
||||||
const req = this.form.specId ? updateProcessSpec(this.form) : addProcessSpec(this.form)
|
|
||||||
req.then(() => {
|
|
||||||
this.$modal.msgSuccess('保存成功')
|
|
||||||
this.open = false
|
|
||||||
this.getList()
|
|
||||||
}).finally(() => { this.btnLoading = false })
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleDelete(row) {
|
|
||||||
const ids = row ? row.specId : this.ids
|
|
||||||
this.$modal.confirm('确认删除所选规程？').then(() => {
|
|
||||||
this.loading = true
|
|
||||||
return delProcessSpec(ids)
|
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.$modal.msgSuccess('删除成功')
|
this.$modal.msgSuccess('已生效')
|
||||||
this.getList()
|
this.loadVersions()
|
||||||
}).catch(() => {}).finally(() => { this.loading = false })
|
|
||||||
},
|
|
||||||
toggleEnabled(row, val) {
|
|
||||||
const updated = { ...row, isEnabled: val ? 1 : 0 }
|
|
||||||
updateProcessSpec(updated).then(() => {
|
|
||||||
row.isEnabled = updated.isEnabled
|
|
||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
},
|
},
|
||||||
goVersionManage(row) {
|
|
||||||
const pathCurrent = this.$route.path.replace(/\/$/, '')
|
// 规程对话框
|
||||||
const m = pathCurrent.match(/^(.*\/processSpec)(?:\/.*)?$/)
|
openSpecDialog(row) {
|
||||||
const base = m ? m[1] : pathCurrent
|
this.specForm = row
|
||||||
this.$router.push({ path: `${base}/version`, query: { specId: String(row.specId) } })
|
? { ...row }
|
||||||
|
: { specCode: undefined, specName: undefined, remark: undefined }
|
||||||
|
this.specTitle = row ? '编辑规程' : '新建规程'
|
||||||
|
this.specOpen = true
|
||||||
|
this.$nextTick(() => this.$refs.specFormRef && this.$refs.specFormRef.clearValidate())
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交规程
|
||||||
|
submitSpec() {
|
||||||
|
this.$refs.specFormRef.validate(ok => {
|
||||||
|
if (!ok) return
|
||||||
|
this.specSubmitLoading = true
|
||||||
|
const req = this.specForm.specId ? updateProcessSpec(this.specForm) : addProcessSpec(this.specForm)
|
||||||
|
req.then(() => {
|
||||||
|
this.$modal.msgSuccess('保存成功')
|
||||||
|
this.specOpen = false
|
||||||
|
this.loadSpecs()
|
||||||
|
}).catch(e => console.error(e)).finally(() => { this.specSubmitLoading = false })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除规程
|
||||||
|
removeSpec(row) {
|
||||||
|
this.$modal.confirm('确认删除规程"' + row.specName + '"？').then(() => {
|
||||||
|
return delProcessSpec(row.specId)
|
||||||
|
}).then(() => {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
if (this.currentSpecId === row.specId) {
|
||||||
|
this.currentSpec = null
|
||||||
|
this.currentSpecId = null
|
||||||
|
this.versionList = []
|
||||||
|
}
|
||||||
|
this.loadSpecs()
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 版本对话框
|
||||||
|
openVersionDialog(row) {
|
||||||
|
this.versionForm = row
|
||||||
|
? { ...row }
|
||||||
|
: { specId: this.currentSpecId, versionCode: undefined, status: 'DRAFT', isActive: 0, remark: undefined }
|
||||||
|
this.versionTitle = row ? '编辑版本' : '新建版本'
|
||||||
|
this.versionOpen = true
|
||||||
|
this.$nextTick(() => this.$refs.versionFormRef && this.$refs.versionFormRef.clearValidate())
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交版本
|
||||||
|
submitVersion() {
|
||||||
|
this.$refs.versionFormRef.validate(ok => {
|
||||||
|
if (!ok) return
|
||||||
|
this.versionSubmitLoading = true
|
||||||
|
const req = this.versionForm.versionId
|
||||||
|
? updateProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
|
||||||
|
: addProcessSpecVersion({ ...this.versionForm, specId: this.currentSpecId })
|
||||||
|
req.then(() => {
|
||||||
|
this.$modal.msgSuccess('保存成功')
|
||||||
|
this.versionOpen = false
|
||||||
|
this.loadVersions()
|
||||||
|
}).catch(e => console.error(e)).finally(() => { this.versionSubmitLoading = false })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除版本
|
||||||
|
removeVersion(row) {
|
||||||
|
this.$modal.confirm('确认删除版本"' + row.versionCode + '"？').then(() => {
|
||||||
|
return delProcessSpecVersion(row.versionId)
|
||||||
|
}).then(() => {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
this.loadVersions()
|
||||||
|
}).catch(() => {})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.spec-page {
|
.spec-version-page {
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
|
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 双色主题：默认=白底灰边，激活/主操作=深藏青 #5F7BA0 ── */
|
.page-header {
|
||||||
|
|
||||||
.dict-toolbar-row {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px 10px;
|
gap: 10px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dict-toolbar-row.line-row {
|
.page-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-wrapper {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
|
||||||
|
|
||||||
.type-tab-bar {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 1 auto;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-tab {
|
|
||||||
padding: 5px 14px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-tab:last-child { border-right: none; }
|
|
||||||
.type-tab:hover { color: #5F7BA0; }
|
|
||||||
|
|
||||||
.type-tab.active {
|
|
||||||
color: #fff;
|
|
||||||
background: #5F7BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-tab-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
|
||||||
padding: 10px 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-tab {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #606266;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #dcdfe6;
|
|
||||||
transition: color .15s, background .15s, border-color .15s;
|
|
||||||
user-select: none;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-tab:hover { color: #5F7BA0; border-color: #5F7BA0; }
|
|
||||||
|
|
||||||
.line-tab.active {
|
|
||||||
color: #fff;
|
|
||||||
background: #5F7BA0;
|
|
||||||
border-color: #5F7BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-left,
|
.empty-hint {
|
||||||
.toolbar-right {
|
text-align: center;
|
||||||
display: flex;
|
padding: 60px 0;
|
||||||
align-items: center;
|
color: #909399;
|
||||||
gap: 6px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table {
|
.el-table {
|
||||||
border-radius: 4px;
|
border-radius: 0;
|
||||||
overflow: hidden;
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table .current-row {
|
||||||
|
background: #f0f7ff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* el-button：主操作类 → 深藏青；默认类 → 白底灰边 */
|
|
||||||
::v-deep .el-button--primary {
|
::v-deep .el-button--primary {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: #5F7BA0 !important;
|
background: #5F7BA0 !important;
|
||||||
border-color: #5F7BA0 !important;
|
border-color: #5F7BA0 !important;
|
||||||
}
|
}
|
||||||
::v-deep .el-button--primary:hover,
|
::v-deep .el-button--primary:hover,
|
||||||
::v-deep .el-button--primary:focus {
|
::v-deep .el-button--primary:focus { background: #4d6a8e !important; border-color: #4d6a8e !important; }
|
||||||
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:active { background: #4a6585 !important; border-color: #4a6585 !important; }
|
||||||
::v-deep .el-button--primary.is-disabled { opacity: .5; }
|
::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):not(.el-button--info) {
|
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger) {
|
||||||
color: #606266 !important;
|
color: #606266 !important;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
border-color: #dcdfe6 !important;
|
border-color: #dcdfe6 !important;
|
||||||
}
|
}
|
||||||
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--info):hover {
|
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):hover {
|
||||||
color: #5F7BA0 !important;
|
color: #5F7BA0 !important;
|
||||||
border-color: #5F7BA0 !important;
|
border-color: #5F7BA0 !important;
|
||||||
}
|
}
|
||||||
::v-deep .el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--info).is-disabled { opacity: .5; }
|
|
||||||
|
|
||||||
::v-deep .el-button--text { background: transparent !important; border-color: transparent !important; }
|
::v-deep .el-button--text { background: transparent !important; border-color: transparent !important; }
|
||||||
::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }
|
::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }
|
||||||
|
|
||||||
.btn-danger { color: #f56c6c; }
|
.btn-danger { color: #f56c6c; }
|
||||||
|
|
||||||
/* 与 Tab 同一行时，将齿轮框配色贴近规程主题 */
|
|
||||||
::v-deep .dict-toolbar-row .el-icon-setting {
|
|
||||||
color: #5F7BA0;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -211,7 +211,7 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 模板导入 dialog -->
|
<!-- 模板导入 dialog -->
|
||||||
<el-dialog title="模板导入" :visible.sync="importOpen" width="800px" append-to-body @close="resetImport">
|
<el-dialog title="模板导入" :visible.sync="importOpen" width="800px" append-to-body>
|
||||||
<div class="import-container">
|
<div class="import-container">
|
||||||
<!-- 文件上传区域 -->
|
<!-- 文件上传区域 -->
|
||||||
<div class="file-upload-area" :class="{ disabled: importStatus === 'processing' }">
|
<div class="file-upload-area" :class="{ disabled: importStatus === 'processing' }">
|
||||||
|
|||||||
Reference in New Issue
Block a user