DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(wms/processSpec): 重构工艺规格页面布局与样式

Browse Source 
1.  调整页面布局为顶部筛选栏+上下分栏结构，替换原左右分栏布局
2.  优化筛选区样式与排版，调整表格列宽与操作栏固定
3.  重构版本列表为网格布局，优化版本卡片交互与样式
4.  更新空状态提示文案与整体视觉风格
5.  新增gitignore规则，忽略个人脚本、表格文件与缓存文件
This commit is contained in:
王文昊
2026-05-14 11:28:21 +08:00
parent 264d3cb856
commit 16577bbc2c
2 changed files with 251 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.gitignore vendored
View File

@@ -44,3 +44,17 @@ nbdist/
!*/build/*.java
!*/build/*.html
!*/build/*.xml
######################################################################
# Personal Scripts & Tables (not for commit)
*.xlsx
*.xls
*.csv
*.sh
*.bat
*.ps1
/scripts/personal/
/tables/
*.local.*
*.py
*.pyc

291
klp-ui/src/views/wms/processSpec/index.vue
View File

@@ -1,13 +1,11 @@
<template>
<div class="spec-page" v-loading="pageLoading">
<!-- 主体：左规程列表 + 右版本面板 -->
<div class="master-detail">
<!-- 左：规程列表 -->
<div class="master-panel">
<!-- 筛选区 -->
<div class="filter-area">
<!-- 顶部筛选区 -->
<div class="top-filter-bar">
<div class="filter-rows">
<!-- 第一行：规程类型 -->
<div class="filter-row">
<span class="filter-label">规程类型</span>
<span class="filter-label filter-label-type">规程类型</span>
<dict-select
class="filter-select"
renderType="radio"
@@ -18,8 +16,9 @@
@change="loadSpecs"
/>
</div>
<!-- 第二行：产线 -->
<div class="filter-row">
<span class="filter-label">产线</span>
<span class="filter-label filter-label-line">产 线</span>
<dict-select
class="filter-select"
renderType="radio"
@@ -31,11 +30,18 @@
/>
</div>
</div>
<!-- 列表头 -->
<div class="panel-hd">
<span class="panel-title">规程列表</span>
<span class="total-badge">{{ total }} 条</span>
<el-button type="primary" size="mini" icon="el-icon-plus" style="margin-left:auto" @click="openSpecDialog()">新建</el-button>
<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"
@@ -44,13 +50,14 @@
@row-click="onSpecRowClick"
:row-class-name="tableRowClassName"
style="width:100%"
class="spec-table"
>
<el-table-column label="编码" prop="specCode" width="110" show-overflow-tooltip />
<el-table-column label="名称" prop="specName" show-overflow-tooltip />
<el-table-column label="创建时间" prop="createTime" width="100" show-overflow-tooltip>
<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="80">
<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>
@@ -58,15 +65,14 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="loadSpecs" />
@pagination="loadSpecs" class="spec-pagination" />
</div>
<!-- 右：版本面板 -->
<div class="detail-panel">
<template v-if="currentSpec">
<div class="panel-hd" v-loading="versionLoading">
<div class="detail-title-row">
<span class="panel-title">{{ currentSpec.specName }}</span>
<!-- 下：版本面板 -->
<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>
@@ -77,29 +83,29 @@
<span>暂无版本，点击「新建版本」开始</span>
</div>
<div class="version-list" v-loading="versionLoading">
<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-left">
<div class="vc-top">
<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" style="margin-left:8px">
<span v-if="v.updateTime && v.updateTime !== v.createTime">
· 更新于 {{ (v.updateTime || '').substring(0, 16) }}
</span>
</div>
</div>
<div class="vc-right" @click.stop>
<div class="vc-actions" @click.stop>
<el-switch
:value="v.isActive === 1"
active-color="#5F7BA0"
@@ -111,11 +117,12 @@
</div>
</div>
</div>
</template>
</div>
<div v-else class="detail-empty">
<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>
<span>请在上方规程列表中选择一个规程查看其版本</span>
</div>
</div>
</div>
@@ -346,89 +353,141 @@ export default {
min-height: 100%;
display: flex;
flex-direction: column;
}
/* ── 主体布局 ── */
.master-detail {
display: flex;
gap: 12px;
flex: 1;
min-height: 0;
align-items: flex-start;
}
/* ── 左：规程列表 ── */
.master-panel {
width: 380px;
flex-shrink: 0;
/* ── 顶部筛选栏 ── */
/* ── 顶部筛选栏 ── */
.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: 4px;
overflow: hidden;
border-radius: 6px;
flex-shrink: 0;
}
/* 筛选区 */
.filter-area {
padding: 10px 12px 8px;
background: #fafafa;
border-bottom: 1px solid #f0f2f5;
.filter-rows {
display: flex;
flex-direction: column;
gap: 6px;
gap: 8px;
flex: 1;
}
.filter-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 28px;
}
.filter-label {
font-size: 12px;
color: #909399;
font-size: 13px;
color: #606266;
font-weight: 500;
white-space: nowrap;
width: 52px;
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;
}
.filter-select { flex: 1; }
.panel-hd {
.version-section {
flex: 1;
min-height: 200px;
}
.empty-section {
display: flex;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #f0f2f5;
background: #fff;
justify-content: center;
}
.panel-title {
font-size: 13px;
.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;
margin-left: 6px;
}
/* ── 右：版本面板 ── */
.detail-panel {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
}
.detail-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.spec-code-tag {
font-size: 11px;
color: #909399;
background: #f0f2f5;
padding: 1px 8px;
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;
@@ -439,44 +498,60 @@ export default {
font-size: 13px;
}
/* ── 版本卡片 ── */
.version-list {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
/* ── 版本网格 ── */
.version-grid {
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
overflow-y: auto;
}
.version-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border: 1px solid #ebeef5;
border-radius: 4px;
flex-direction: column;
padding: 14px 16px;
border: 1px solid #e4e7ed;
border-radius: 6px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
transition: all 0.2s ease;
background: #fff;
gap: 8px;
}
.version-card:hover {
border-color: #5F7BA0;
box-shadow: 0 2px 8px rgba(95,123,160,.12);
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-left { display: flex; flex-direction: column; gap: 4px; }
.vc-top { display: flex; align-items: center; gap: 6px; }
.vc-code {
font-size: 14px;
font-size: 15px;
font-weight: 600;
color: #303133;
}
.vc-status, .vc-active { border-radius: 10px !important; }
.vc-meta { font-size: 11px; color: #c0c4cc; }
.vc-right {
.vc-tags {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
gap: 6px;
}
.btn-view { color: #5F7BA0 !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;
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; }