refactor(wms/processSpec): 重构规程管理页面为版本管理模式
重构了整个流程规格页面，将原来的单页面管理改为分离的规程列表和版本管理模式，拆分了新增/编辑弹窗，移除了冗余的产线和类型筛选Tab，优化了页面布局和样式。
This commit is contained in:
@@ -1,601 +1,392 @@
|
||||
<template>
|
||||
<div class="spec-page">
|
||||
<!-- 规程类型 -->
|
||||
<div class="dict-toolbar-row">
|
||||
<div class="type-tab-bar">
|
||||
<span
|
||||
v-for="t in specTypeTab"
|
||||
:key="'stype-' + (t.value === '' ? 'all' : t.value)"
|
||||
:class="['type-tab', { active: activeSpecType === t.value }]"
|
||||
@click="switchSpecType(t.value)"
|
||||
>{{ t.label }}</span>
|
||||
</div>
|
||||
<dict-select
|
||||
toolbar-only
|
||||
:kisv="false"
|
||||
:editable="true"
|
||||
:refresh="false"
|
||||
:dict-type="DICT_SPEC_TYPE"
|
||||
panel-title="规程工艺类型字典"
|
||||
@dict-updated="loadSpecTypeDict"
|
||||
/>
|
||||
<div class="spec-version-page" v-loading="pageLoading">
|
||||
<!-- 头部 -->
|
||||
<div class="page-header">
|
||||
<span class="page-title">规程版本管理</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-plus"
|
||||
style="margin-left:auto"
|
||||
@click="openSpecDialog()"
|
||||
>新建规程</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 产线 -->
|
||||
<div class="dict-toolbar-row line-row">
|
||||
<div class="line-tab-bar">
|
||||
<span
|
||||
:class="['line-tab', { active: activeLineId === '' }]"
|
||||
@click="switchLine('')"
|
||||
>全部</span>
|
||||
<span
|
||||
v-for="line in lineOptions"
|
||||
:key="'ln-' + line.lineId"
|
||||
:class="['line-tab', { active: lineTabActive(line) }]"
|
||||
@click="switchLine(line.lineId)"
|
||||
>{{ line.lineName }}</span>
|
||||
</div>
|
||||
<dict-select
|
||||
toolbar-only
|
||||
:kisv="false"
|
||||
:editable="true"
|
||||
:refresh="false"
|
||||
:dict-type="DICT_LINE"
|
||||
panel-title="规程产线筛选项（字典值为产线 line_id）"
|
||||
@dict-updated="loadLineOptions"
|
||||
/>
|
||||
<!-- 规程列表 -->
|
||||
<div class="section-wrapper">
|
||||
<div class="section-title">规程列表</div>
|
||||
<el-table
|
||||
:data="specList"
|
||||
size="small"
|
||||
highlight-current-row
|
||||
@row-click="onSpecRowClick"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column label="规程编码" prop="specCode" width="150" />
|
||||
<el-table-column label="规程名称" prop="specName" />
|
||||
<el-table-column label="创建时间" prop="createTime" width="180" />
|
||||
<el-table-column label="操作" align="right" width="180">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" size="mini" @click.stop="openSpecDialog(row)">编辑</el-button>
|
||||
<el-button type="text" size="mini" class="btn-danger" @click.stop="removeSpec(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
<el-button size="mini" icon="el-icon-edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
||||
<el-button size="mini" icon="el-icon-delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<el-input
|
||||
v-model="queryParams.specName"
|
||||
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 class="section-wrapper" v-if="currentSpec">
|
||||
<div class="section-title">
|
||||
版本列表 - {{ currentSpec.specName }}
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click="openVersionDialog()"
|
||||
>新建版本</el-button>
|
||||
</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 v-else class="empty-hint">请选择一个规程查看其版本</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dataList"
|
||||
size="small"
|
||||
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-dialog :title="specTitle" :visible.sync="specOpen" width="500px" append-to-body @close="specForm = {}">
|
||||
<el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
|
||||
<el-form-item label="规程编码" prop="specCode">
|
||||
<el-input v-model="specForm.specCode" placeholder="请输入规程编码" maxlength="64" />
|
||||
</el-form-item>
|
||||
<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 label="规程类型" prop="specType">
|
||||
<el-select v-model="form.specType" style="width:100%">
|
||||
<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 label="备注">
|
||||
<el-input v-model="specForm.remark" type="textarea" rows="2" maxlength="500" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button size="small" @click="open = false">取消</el-button>
|
||||
<el-button size="small" type="primary" :loading="btnLoading" @click="submitForm">确定</el-button>
|
||||
<el-button size="small" @click="specOpen = false">取消</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>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDicts } from '@/api/system/dict/data'
|
||||
import { listProcessSpec, getProcessSpec, delProcessSpec, updateProcessSpec, addProcessSpec } from '@/api/wms/processSpec'
|
||||
import { listProductionLine } from '@/api/wms/productionLine'
|
||||
|
||||
const DICT_SPEC_TYPE = 'wms_process_spec_type'
|
||||
const DICT_LINE = 'wms_process_spec_line'
|
||||
|
||||
const DEFAULT_SPEC_TYPES = [
|
||||
]
|
||||
import { listProcessSpec, getProcessSpec, addProcessSpec, updateProcessSpec, delProcessSpec } from '@/api/wms/processSpec'
|
||||
import {
|
||||
listProcessSpecVersion,
|
||||
addProcessSpecVersion,
|
||||
updateProcessSpecVersion,
|
||||
delProcessSpecVersion,
|
||||
activateProcessSpecVersion
|
||||
} from '@/api/wms/processSpecVersion'
|
||||
|
||||
export default {
|
||||
name: 'ProcessSpec',
|
||||
name: 'SpecVersionManage',
|
||||
data() {
|
||||
return {
|
||||
DICT_SPEC_TYPE,
|
||||
DICT_LINE,
|
||||
loading: false,
|
||||
btnLoading: false,
|
||||
total: 0,
|
||||
dataList: [],
|
||||
ids: [],
|
||||
single: true,
|
||||
multiple: true,
|
||||
open: false,
|
||||
dialogTitle: '',
|
||||
specTypeRows: [],
|
||||
lineOptions: [],
|
||||
activeSpecType: '',
|
||||
activeLineId: '',
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
specName: undefined,
|
||||
specType: undefined,
|
||||
lineId: undefined
|
||||
pageLoading: false,
|
||||
specList: [],
|
||||
currentSpec: null,
|
||||
currentSpecId: null,
|
||||
versionList: [],
|
||||
versionLoading: false,
|
||||
statusOptions: ['DRAFT', 'PUBLISHED', 'OBSOLETE'],
|
||||
|
||||
// 规程相关
|
||||
specOpen: false,
|
||||
specTitle: '',
|
||||
specSubmitLoading: false,
|
||||
specForm: {},
|
||||
specRules: {
|
||||
specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
|
||||
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
specCode: [{ required: true, message: '规程编号不能为空', trigger: 'blur' }],
|
||||
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }],
|
||||
specType: [{ required: true, message: '请选择规程类型', trigger: 'change' }],
|
||||
lineId: [{ required: true, message: '请选择产线', trigger: 'change' }]
|
||||
|
||||
// 版本相关
|
||||
versionOpen: false,
|
||||
versionTitle: '',
|
||||
versionSubmitLoading: false,
|
||||
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() {
|
||||
Promise.all([this.loadSpecTypeDict(), this.loadLineOptions()]).finally(() => {
|
||||
this.getList()
|
||||
})
|
||||
this.loadSpecs()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 工艺类型：默认 PROCESS/STANDARD 与字典合并。若仅有字典中存在的新项，仍可保留两行基础兜底；同 dict_value 以字典为准（可改名、调 sort）。
|
||||
*/
|
||||
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())
|
||||
// 表格行样式
|
||||
tableRowClassName({ row }) {
|
||||
return row.specId === this.currentSpecId ? 'current-row' : ''
|
||||
},
|
||||
/**
|
||||
* 产线 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 {
|
||||
const res = await getDicts(DICT_LINE)
|
||||
dictRows = this.parseDictRows(res)
|
||||
} catch (err) {
|
||||
console.error('规程产线字典加载失败', err)
|
||||
}
|
||||
|
||||
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 })
|
||||
|
||||
// 加载规程列表
|
||||
loadSpecs() {
|
||||
this.pageLoading = true
|
||||
listProcessSpec({ pageNum: 1, pageSize: 500 }).then(res => {
|
||||
this.specList = res.rows || []
|
||||
if (this.specList.length > 0 && !this.currentSpec) {
|
||||
this.selectSpec(this.specList[0])
|
||||
}
|
||||
}
|
||||
dictOnly.sort((a, b) => a._sort - b._sort)
|
||||
dictOnly.forEach(d => {
|
||||
const { _sort, ...rest } = d
|
||||
next.push(rest)
|
||||
}).catch(e => console.error(e)).finally(() => { this.pageLoading = false })
|
||||
},
|
||||
|
||||
// 选择规程
|
||||
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 }
|
||||
})
|
||||
|
||||
if (next.length === 0 && previousOptions.length > 0) {
|
||||
console.warn('[规程产线] 本次未解析出有效筛选项（可能字典值非数字或产线接口异常），保留上一版 Tab')
|
||||
},
|
||||
|
||||
// 生效切换
|
||||
handleActiveChange(row, val) {
|
||||
if (!val) {
|
||||
this.$message.info('请激活其他版本来替换当前生效版本')
|
||||
return
|
||||
}
|
||||
this.lineOptions = next
|
||||
},
|
||||
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)
|
||||
this.$modal.confirm('确认将版本"' + row.versionCode + '"设为当前生效版本？').then(() => {
|
||||
return activateProcessSpecVersion(row.versionId)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.getList()
|
||||
}).catch(() => {}).finally(() => { this.loading = false })
|
||||
},
|
||||
toggleEnabled(row, val) {
|
||||
const updated = { ...row, isEnabled: val ? 1 : 0 }
|
||||
updateProcessSpec(updated).then(() => {
|
||||
row.isEnabled = updated.isEnabled
|
||||
this.$modal.msgSuccess('已生效')
|
||||
this.loadVersions()
|
||||
}).catch(() => {})
|
||||
},
|
||||
goVersionManage(row) {
|
||||
const pathCurrent = this.$route.path.replace(/\/$/, '')
|
||||
const m = pathCurrent.match(/^(.*\/processSpec)(?:\/.*)?$/)
|
||||
const base = m ? m[1] : pathCurrent
|
||||
this.$router.push({ path: `${base}/version`, query: { specId: String(row.specId) } })
|
||||
|
||||
// 规程对话框
|
||||
openSpecDialog(row) {
|
||||
this.specForm = row
|
||||
? { ...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>
|
||||
|
||||
<style scoped>
|
||||
.spec-page {
|
||||
.spec-version-page {
|
||||
padding: 16px 20px;
|
||||
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* ── 双色主题：默认=白底灰边，激活/主操作=深藏青 #5F7BA0 ── */
|
||||
|
||||
.dict-toolbar-row {
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 10px;
|
||||
margin-bottom: 6px;
|
||||
gap: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.type-tab-bar {
|
||||
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;
|
||||
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;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
.empty-hint {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-table .current-row {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
/* el-button：主操作类 → 深藏青；默认类 → 白底灰边 */
|
||||
::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: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):not(.el-button--info) {
|
||||
::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):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;
|
||||
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.btn-danger { color: #f56c6c !important; }
|
||||
|
||||
.btn-danger { color: #f56c6c; }
|
||||
|
||||
/* 与 Tab 同一行时，将齿轮框配色贴近规程主题 */
|
||||
::v-deep .dict-toolbar-row .el-icon-setting {
|
||||
color: #5F7BA0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -211,7 +211,7 @@
|
||||
</el-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="file-upload-area" :class="{ disabled: importStatus === 'processing' }">
|
||||
|
||||
Reference in New Issue
Block a user