feat(acid): 添加规程管理页面和菜单入口
1. 新增酸轧页面的规程菜单入口及对应组件 2. 完善wms规程页面的代码格式与交互细节 3. 修复部分空catch语句的格式问题
This commit is contained in:
600
klp-ui/src/views/micro/pages/acid/components/ProcessSpec.vue
Normal file
600
klp-ui/src/views/micro/pages/acid/components/ProcessSpec.vue
Normal file
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<div class="spec-page" v-loading="pageLoading">
|
||||
<!-- 顶部筛选区 -->
|
||||
<div class="top-filter-bar">
|
||||
<div class="filter-rows">
|
||||
<!-- 第一行：规程类型 -->
|
||||
<div class="filter-row">
|
||||
<span class="filter-label filter-label-type">规程类型</span>
|
||||
<dict-select class="filter-select" renderType="radio" v-model="queryParams.specType"
|
||||
dict-type="wms_process_spec_type" :kisv="false" :editable="true" @change="loadSpecs" />
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" class="new-spec-btn"
|
||||
@click="openSpecDialog()">新建规程</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 主体：上规程列表 + 下版本面板 -->
|
||||
<div class="main-content">
|
||||
<!-- 上：规程列表 -->
|
||||
<div class="spec-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrap">
|
||||
<span class="section-title">规程列表</span>
|
||||
<span class="total-badge">共 {{ total }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="specList" size="small" highlight-current-row @row-click="onSpecRowClick"
|
||||
:row-class-name="tableRowClassName" style="width:100%" class="spec-table">
|
||||
<el-table-column label="编码" prop="specCode" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="名称" prop="specName" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" prop="createTime" width="110" show-overflow-tooltip>
|
||||
<template slot-scope="{ row }">{{ (row.createTime || '').substring(0, 10) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="right" width="120" fixed="right">
|
||||
<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>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="loadSpecs" class="spec-pagination" />
|
||||
</div>
|
||||
|
||||
<!-- 下：版本面板 -->
|
||||
<div class="version-section" v-if="currentSpec">
|
||||
<div class="section-header">
|
||||
<div class="section-title-wrap">
|
||||
<span class="section-title">{{ currentSpec.specName }}</span>
|
||||
<span class="spec-code-tag">{{ currentSpec.specCode }}</span>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="openVersionDialog()">新建版本</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="!versionLoading && !versionList.length" class="empty-versions">
|
||||
<i class="el-icon-document" style="font-size:32px;color:#dcdfe6;margin-bottom:8px;display:block" />
|
||||
<span>暂无版本，点击「新建版本」开始</span>
|
||||
</div>
|
||||
|
||||
<div class="version-grid" v-loading="versionLoading">
|
||||
<div v-for="v in versionList" :key="v.versionId" class="version-card" @click="goPlanSpec(v)">
|
||||
<div class="vc-header">
|
||||
<span class="vc-code">{{ v.versionCode }}</span>
|
||||
<div class="vc-tags">
|
||||
<el-tag :type="statusType(v.status)" size="mini" effect="plain" class="vc-status">
|
||||
{{ statusLabel(v.status) }}
|
||||
</el-tag>
|
||||
<el-tag v-if="v.isActive === 1" type="success" size="mini" effect="dark" class="vc-active">当前生效</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vc-meta">
|
||||
创建于 {{ (v.createTime || '').substring(0, 16) || '—' }}
|
||||
<span v-if="v.updateTime && v.updateTime !== v.createTime">
|
||||
· 更新于 {{ (v.updateTime || '').substring(0, 16) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="vc-actions" @click.stop>
|
||||
<el-switch :value="v.isActive === 1" active-color="#5F7BA0" @change="handleActiveChange(v, $event)" />
|
||||
<el-button type="text" size="mini" @click="openVersionDialog(v)">编辑</el-button>
|
||||
<el-button type="text" size="mini" class="btn-danger" @click="removeVersion(v)">删除</el-button>
|
||||
<el-button type="text" size="mini" class="btn-view" @click="goPlanSpec(v)">方案 →</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="version-section empty-section">
|
||||
<div class="detail-empty">
|
||||
<i class="el-icon-d-arrow-left" style="font-size:24px;color:#c0c4cc;margin-bottom:12px;display:block" />
|
||||
<span>请在上方规程列表中选择一个规程查看其版本</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新建/编辑规程 -->
|
||||
<el-dialog :title="specTitle" :visible.sync="specOpen" width="460px" append-to-body @close="specForm = {}">
|
||||
<el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
|
||||
<el-form-item label="规程类型" prop="specType">
|
||||
<dict-select class="filter-select" v-model="specForm.specType" dict-type="wms_process_spec_type" :kisv="true"
|
||||
:editable="true" @change="loadSpecs" />
|
||||
<!-- <el-input v-model="specForm.specType" placeholder="请输入规程类型" maxlength="64" /> -->
|
||||
</el-form-item>
|
||||
<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="specForm.specName" placeholder="请输入规程名称" maxlength="200" />
|
||||
</el-form-item>
|
||||
<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="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="460px" 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 STATUS_OPTIONS" :key="s.value" :label="s.label" :value="s.value" />
|
||||
</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 { listProcessSpec, addProcessSpec, updateProcessSpec, delProcessSpec } from '@/api/wms/processSpec'
|
||||
import {
|
||||
listProcessSpecVersion,
|
||||
addProcessSpecVersion,
|
||||
updateProcessSpecVersion,
|
||||
delProcessSpecVersion,
|
||||
activateProcessSpecVersion
|
||||
} from '@/api/wms/processSpecVersion'
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'DRAFT', label: '草稿' },
|
||||
{ value: 'PUBLISHED', label: '已发布' },
|
||||
{ value: 'OBSOLETE', label: '已作废' }
|
||||
]
|
||||
|
||||
// 酸轧线ID
|
||||
const lineId = '1'
|
||||
|
||||
export default {
|
||||
name: 'SpecVersionManage',
|
||||
data() {
|
||||
return {
|
||||
STATUS_OPTIONS,
|
||||
pageLoading: false,
|
||||
specList: [],
|
||||
currentSpec: null,
|
||||
currentSpecId: null,
|
||||
versionList: [],
|
||||
versionLoading: false,
|
||||
total: 0,
|
||||
queryParams: { pageNum: 1, pageSize: 10, specType: '', lineId: lineId },
|
||||
|
||||
specOpen: false,
|
||||
specTitle: '',
|
||||
specSubmitLoading: false,
|
||||
specForm: {},
|
||||
specRules: {
|
||||
specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
|
||||
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
|
||||
},
|
||||
|
||||
versionOpen: false,
|
||||
versionTitle: '',
|
||||
versionSubmitLoading: false,
|
||||
versionForm: {},
|
||||
versionRules: {
|
||||
versionCode: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadSpecs()
|
||||
},
|
||||
methods: {
|
||||
tableRowClassName({ row }) {
|
||||
return row.specId === this.currentSpecId ? 'current-row' : ''
|
||||
},
|
||||
statusType(status) {
|
||||
return { DRAFT: '', PUBLISHED: 'success', OBSOLETE: 'info' }[status] || ''
|
||||
},
|
||||
statusLabel(status) {
|
||||
const hit = STATUS_OPTIONS.find(s => s.value === status)
|
||||
return hit ? hit.label : (status || '—')
|
||||
},
|
||||
|
||||
loadSpecs() {
|
||||
this.pageLoading = true
|
||||
listProcessSpec(this.queryParams).then(res => {
|
||||
this.total = res.total || 0
|
||||
this.specList = res.rows || []
|
||||
if (this.specList.length > 0 && !this.currentSpec) {
|
||||
this.selectSpec(this.specList[0])
|
||||
} else if (!this.specList.length) {
|
||||
this.currentSpec = null
|
||||
this.currentSpecId = null
|
||||
this.versionList = []
|
||||
}
|
||||
}).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 })
|
||||
},
|
||||
|
||||
goPlanSpec(row) {
|
||||
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 }
|
||||
this.$modal.confirm('确认将版本"' + row.versionCode + '"设为当前生效版本？').then(() => {
|
||||
return activateProcessSpecVersion(row.versionId)
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('已生效')
|
||||
this.loadVersions()
|
||||
}).catch(() => { })
|
||||
},
|
||||
|
||||
openSpecDialog(row) {
|
||||
this.specForm = row ? { ...row } : { specCode: undefined, specName: undefined, remark: undefined, lineId: lineId }
|
||||
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 {
|
||||
padding: 12px 16px;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── 顶部筛选栏 ── */
|
||||
/* ── 顶部筛选栏 ── */
|
||||
.top-filter-bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-label-type::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.filter-label-line {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.filter-select ::v-deep .el-radio-group .el-radio-button {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.filter-select ::v-deep .el-radio-group .el-radio-button__inner {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.new-spec-btn {
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── 主体内容区 ── */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── 通用区块样式 ── */
|
||||
.spec-section,
|
||||
.version-section {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spec-section {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.empty-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.total-badge {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f0f2f5;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.spec-code-tag {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f0f2f5;
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* ── 规程表格 ── */
|
||||
.spec-table {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spec-pagination {
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.detail-empty,
|
||||
.empty-versions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── 版本网格 ── */
|
||||
.version-grid {
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.version-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: #fff;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.version-card:hover {
|
||||
border-color: #5F7BA0;
|
||||
box-shadow: 0 4px 12px rgba(95, 123, 160, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.vc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.vc-code {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.vc-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vc-status,
|
||||
.vc-active {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.vc-meta {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.vc-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
color: #5F7BA0 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── 表格行高亮 ── */
|
||||
::v-deep .el-table .current-row {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .current-row td {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
/* ── 按钮主色覆盖 ── */
|
||||
::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.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;
|
||||
}
|
||||
</style>
|
||||
@@ -26,6 +26,10 @@
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<span slot="title">品质</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="processSpec">
|
||||
<i class="el-icon-s-tools"></i>
|
||||
<span slot="title">规程</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="performance">
|
||||
<i class="el-icon-date"></i>
|
||||
<span slot="title">计划</span>
|
||||
@@ -75,6 +79,7 @@ import RollHistory from '@/views/timing/roll/history.vue';
|
||||
import Stoppage from '@/views/timing/stoppage/index.vue';
|
||||
import AcidTiming from '@/views/lines/acid/index.vue';
|
||||
import TrackingView from './components/TrackingView.vue';
|
||||
import ProcessSpec from './components/ProcessSpec.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidSystem',
|
||||
@@ -90,7 +95,8 @@ export default {
|
||||
RollHistory,
|
||||
Stoppage,
|
||||
AcidTiming,
|
||||
TrackingView
|
||||
TrackingView,
|
||||
ProcessSpec
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -112,6 +118,7 @@ export default {
|
||||
stoppage: 'Stoppage',
|
||||
acidTiming: 'AcidTiming',
|
||||
tracking: 'TrackingView',
|
||||
processSpec: 'ProcessSpec',
|
||||
};
|
||||
return componentMap[this.activeMenu];
|
||||
},
|
||||
|
||||
@@ -6,31 +6,18 @@
|
||||
<!-- 第一行：规程类型 -->
|
||||
<div class="filter-row">
|
||||
<span class="filter-label filter-label-type">规程类型</span>
|
||||
<dict-select
|
||||
class="filter-select"
|
||||
renderType="radio"
|
||||
v-model="queryParams.specType"
|
||||
dict-type="wms_process_spec_type"
|
||||
:kisv="false"
|
||||
:editable="true"
|
||||
@change="loadSpecs"
|
||||
/>
|
||||
<dict-select class="filter-select" renderType="radio" v-model="queryParams.specType"
|
||||
dict-type="wms_process_spec_type" :kisv="true" :editable="true" @change="loadSpecs" />
|
||||
</div>
|
||||
<!-- 第二行：产线 -->
|
||||
<div class="filter-row">
|
||||
<span class="filter-label filter-label-line">产 线</span>
|
||||
<dict-select
|
||||
class="filter-select"
|
||||
renderType="radio"
|
||||
v-model="queryParams.lineId"
|
||||
dict-type="wms_process_spec_line"
|
||||
:kisv="false"
|
||||
:editable="true"
|
||||
@change="loadSpecs"
|
||||
/>
|
||||
<dict-select class="filter-select" renderType="radio" v-model="queryParams.lineId"
|
||||
dict-type="wms_process_spec_line" :kisv="false" :editable="true" @change="loadSpecs" />
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" class="new-spec-btn" @click="openSpecDialog()">新建规程</el-button>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" class="new-spec-btn"
|
||||
@click="openSpecDialog()">新建规程</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 主体：上规程列表 + 下版本面板 -->
|
||||
@@ -43,15 +30,8 @@
|
||||
<span class="total-badge">共 {{ total }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="specList"
|
||||
size="small"
|
||||
highlight-current-row
|
||||
@row-click="onSpecRowClick"
|
||||
:row-class-name="tableRowClassName"
|
||||
style="width:100%"
|
||||
class="spec-table"
|
||||
>
|
||||
<el-table :data="specList" size="small" highlight-current-row @row-click="onSpecRowClick"
|
||||
:row-class-name="tableRowClassName" style="width:100%" class="spec-table">
|
||||
<el-table-column label="编码" prop="specCode" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="名称" prop="specName" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" prop="createTime" width="110" show-overflow-tooltip>
|
||||
@@ -64,8 +44,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="loadSpecs" class="spec-pagination" />
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="loadSpecs" class="spec-pagination" />
|
||||
</div>
|
||||
|
||||
<!-- 下：版本面板 -->
|
||||
@@ -84,12 +64,7 @@
|
||||
</div>
|
||||
|
||||
<div class="version-grid" v-loading="versionLoading">
|
||||
<div
|
||||
v-for="v in versionList"
|
||||
:key="v.versionId"
|
||||
class="version-card"
|
||||
@click="goPlanSpec(v)"
|
||||
>
|
||||
<div v-for="v in versionList" :key="v.versionId" class="version-card" @click="goPlanSpec(v)">
|
||||
<div class="vc-header">
|
||||
<span class="vc-code">{{ v.versionCode }}</span>
|
||||
<div class="vc-tags">
|
||||
@@ -106,11 +81,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="vc-actions" @click.stop>
|
||||
<el-switch
|
||||
:value="v.isActive === 1"
|
||||
active-color="#5F7BA0"
|
||||
@change="handleActiveChange(v, $event)"
|
||||
/>
|
||||
<el-switch :value="v.isActive === 1" active-color="#5F7BA0" @change="handleActiveChange(v, $event)" />
|
||||
<el-button type="text" size="mini" @click="openVersionDialog(v)">编辑</el-button>
|
||||
<el-button type="text" size="mini" class="btn-danger" @click="removeVersion(v)">删除</el-button>
|
||||
<el-button type="text" size="mini" class="btn-view" @click="goPlanSpec(v)">方案 →</el-button>
|
||||
@@ -130,6 +101,14 @@
|
||||
<!-- 新建/编辑规程 -->
|
||||
<el-dialog :title="specTitle" :visible.sync="specOpen" width="460px" append-to-body @close="specForm = {}">
|
||||
<el-form ref="specFormRef" :model="specForm" :rules="specRules" label-width="88px" size="small">
|
||||
<el-form-item label="规程类型" prop="specType">
|
||||
<dict-select class="filter-select" renderType="radio" v-model="specForm.specType"
|
||||
dict-type="wms_process_spec_type" :kisv="true" :editable="true" @change="loadSpecs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线" prop="lineId">
|
||||
<dict-select class="filter-select" renderType="radio" v-model="specForm.lineId"
|
||||
dict-type="wms_process_spec_line" :kisv="false" :editable="true" @change="loadSpecs" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规程编码" prop="specCode">
|
||||
<el-input v-model="specForm.specCode" placeholder="请输入规程编码" maxlength="64" />
|
||||
</el-form-item>
|
||||
@@ -183,9 +162,9 @@ import {
|
||||
} from '@/api/wms/processSpecVersion'
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'DRAFT', label: '草稿' },
|
||||
{ value: 'DRAFT', label: '草稿' },
|
||||
{ value: 'PUBLISHED', label: '已发布' },
|
||||
{ value: 'OBSOLETE', label: '已作废' }
|
||||
{ value: 'OBSOLETE', label: '已作废' }
|
||||
]
|
||||
|
||||
export default {
|
||||
@@ -280,7 +259,7 @@ export default {
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('已生效')
|
||||
this.loadVersions()
|
||||
}).catch(() => {})
|
||||
}).catch(() => { })
|
||||
},
|
||||
|
||||
openSpecDialog(row) {
|
||||
@@ -310,7 +289,7 @@ export default {
|
||||
this.currentSpec = null; this.currentSpecId = null; this.versionList = []
|
||||
}
|
||||
this.loadSpecs()
|
||||
}).catch(() => {})
|
||||
}).catch(() => { })
|
||||
},
|
||||
|
||||
openVersionDialog(row) {
|
||||
@@ -341,7 +320,7 @@ export default {
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.loadVersions()
|
||||
}).catch(() => {})
|
||||
}).catch(() => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -369,18 +348,21 @@ export default {
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
@@ -391,23 +373,29 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-label-type::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.filter-label-line {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.filter-select ::v-deep .el-radio-group .el-radio-button {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.filter-select ::v-deep .el-radio-group .el-radio-button__inner {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.new-spec-btn {
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
@@ -432,13 +420,16 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spec-section {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.empty-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -453,16 +444,19 @@ export default {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.total-badge {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
@@ -470,6 +464,7 @@ export default {
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.spec-code-tag {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
@@ -482,13 +477,15 @@ export default {
|
||||
.spec-table {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spec-pagination {
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.detail-empty, .empty-versions {
|
||||
.detail-empty,
|
||||
.empty-versions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -506,6 +503,7 @@ export default {
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.version-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -517,32 +515,42 @@ export default {
|
||||
background: #fff;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.version-card:hover {
|
||||
border-color: #5F7BA0;
|
||||
box-shadow: 0 4px 12px rgba(95,123,160,0.15);
|
||||
box-shadow: 0 4px 12px rgba(95, 123, 160, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.vc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.vc-code {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.vc-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.vc-status, .vc-active { border-radius: 10px !important; }
|
||||
|
||||
.vc-status,
|
||||
.vc-active {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.vc-meta {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.vc-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -551,11 +559,20 @@ export default {
|
||||
border-top: 1px solid #f0f2f5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.btn-view { color: #5F7BA0 !important; font-weight: 500; }
|
||||
|
||||
.btn-view {
|
||||
color: #5F7BA0 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── 表格行高亮 ── */
|
||||
::v-deep .el-table .current-row { background: #f0f7ff !important; }
|
||||
::v-deep .el-table .current-row td { background: #f0f7ff !important; }
|
||||
::v-deep .el-table .current-row {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .current-row td {
|
||||
background: #f0f7ff !important;
|
||||
}
|
||||
|
||||
/* ── 按钮主色覆盖 ── */
|
||||
::v-deep .el-button--primary {
|
||||
@@ -563,13 +580,27 @@ export default {
|
||||
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.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; }
|
||||
|
||||
::v-deep .el-button--primary.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user