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

feat(wms/processSpec): 新增筛选条件和分页功能，优化页面布局

Browse Source 
1. 新增规程类型和产线的单选筛选框，支持按条件查询规程列表
2. 为规程列表添加分页组件，支持分页查询
3. 重构页面元素布局，压缩冗余的标签换行和空格
4. 优化版本列表的加载状态提示，完善空数据处理逻辑
5. 统一调整按钮样式的代码格式，修复部分代码格式问题
This commit is contained in:
砂糖
2026-05-12 09:08:55 +08:00
parent 9225ceba38
commit a36d874652
1 changed files with 85 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,25 +3,29 @@
<!-- 头部 -->
<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>
<el-button type="primary" size="small" icon="el-icon-plus" style="margin-left:auto"
@click="openSpecDialog()">新建规程</el-button>
</div>
<div>
<el-form>
<el-form-item label="规程类型">
<dict-select @change="loadSpecs" renderType="radio" v-model="queryParams.specType"
dict-type="wms_process_spec_type" :kisv="false" :editable="true"></dict-select>
</el-form-item>
<el-form-item label="产线">
<dict-select @change="loadSpecs" renderType="radio" v-model="queryParams.lineId"
dict-type="wms_process_spec_line" :kisv="false" :editable="true"></dict-select>
</el-form-item>
</el-form>
</div>
<!-- 规程列表 -->
<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 :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" />
@@ -32,36 +36,25 @@
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="loadSpecs" />
</div>
<!-- 版本列表 -->
<div class="section-wrapper" v-if="currentSpec">
<div class="section-wrapper" v-if="currentSpec" v-loading="versionLoading">
<div class="section-title">
版本列表 - {{ currentSpec.specName }}
<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>
</div>
<el-table
:data="versionList"
size="small"
highlight-current-row
@row-click="onVersionRowClick"
>
<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)"
/>
<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">
@@ -141,7 +134,16 @@ export default {
versionList: [],
versionLoading: false,
statusOptions: ['DRAFT', 'PUBLISHED', 'OBSOLETE'],
// 分页相关
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
specType: '',
lineId: ''
},
// 规程相关
specOpen: false,
specTitle: '',
@@ -151,7 +153,7 @@ export default {
specCode: [{ required: true, message: '规程编码不能为空', trigger: 'blur' }],
specName: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }]
},
// 版本相关
versionOpen: false,
versionTitle: '',
@@ -171,30 +173,35 @@ export default {
tableRowClassName({ row }) {
return row.specId === this.currentSpecId ? 'current-row' : ''
},
// 加载规程列表
loadSpecs() {
this.pageLoading = true
listProcessSpec({ pageNum: 1, pageSize: 500 }).then(res => {
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 {
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
@@ -203,12 +210,12 @@ export default {
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(/\/[^/]*$/, '')
@@ -218,7 +225,7 @@ export default {
query: { specId: this.currentSpecId, versionId: String(row.versionId), versionCode: row.versionCode }
})
},
// 生效切换
handleActiveChange(row, val) {
if (!val) {
@@ -230,9 +237,9 @@ export default {
}).then(() => {
this.$modal.msgSuccess('已生效')
this.loadVersions()
}).catch(() => {})
}).catch(() => { })
},
// 规程对话框
openSpecDialog(row) {
this.specForm = row
@@ -242,7 +249,7 @@ export default {
this.specOpen = true
this.$nextTick(() => this.$refs.specFormRef && this.$refs.specFormRef.clearValidate())
},
// 提交规程
submitSpec() {
this.$refs.specFormRef.validate(ok => {
@@ -256,7 +263,7 @@ export default {
}).catch(e => console.error(e)).finally(() => { this.specSubmitLoading = false })
})
},
// 删除规程
removeSpec(row) {
this.$modal.confirm('确认删除规程"' + row.specName + '"？').then(() => {
@@ -269,9 +276,9 @@ export default {
this.versionList = []
}
this.loadSpecs()
}).catch(() => {})
}).catch(() => { })
},
// 版本对话框
openVersionDialog(row) {
this.versionForm = row
@@ -281,7 +288,7 @@ export default {
this.versionOpen = true
this.$nextTick(() => this.$refs.versionFormRef && this.$refs.versionFormRef.clearValidate())
},
// 提交版本
submitVersion() {
this.$refs.versionFormRef.validate(ok => {
@@ -297,7 +304,7 @@ export default {
}).catch(e => console.error(e)).finally(() => { this.versionSubmitLoading = false })
})
},
// 删除版本
removeVersion(row) {
this.$modal.confirm('确认删除版本"' + row.versionCode + '"？').then(() => {
@@ -305,7 +312,7 @@ export default {
}).then(() => {
this.$modal.msgSuccess('删除成功')
this.loadVersions()
}).catch(() => {})
}).catch(() => { })
}
}
}
@@ -370,23 +377,43 @@ 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:active { background: #4a6585 !important; border-color: #4a6585 !important; }
::v-deep .el-button--primary.is-disabled { opacity: .5; }
::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) {
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):hover {
color: #5F7BA0 !important;
border-color: #5F7BA0 !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 {
background: transparent !important;
border-color: transparent !important;
}
.btn-danger { color: #f56c6c; }
::v-deep .el-button--text.btn-danger {
color: #f56c6c !important;
}
.btn-danger {
color: #f56c6c;
}
</style>