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