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

1. 新增规程类型和产线的单选筛选框，支持按条件查询规程列表
2. 为规程列表添加分页组件，支持分页查询
3. 重构页面元素布局，压缩冗余的标签换行和空格
4. 优化版本列表的加载状态提示，完善空数据处理逻辑
5. 统一调整按钮样式的代码格式，修复部分代码格式问题

klp-ui/src/views/wms/processSpec/index.vue

@@ -3,25 +3,29 @@
     <!-- 头部 -->
     <div class="page-header">
       <span class="page-title">规程版本管理</span>
-      <el-button
+      <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left:auto"
-        type="primary"
+        @click="openSpecDialog()">新建规程</el-button>
-        size="small"
+    </div>
-        icon="el-icon-plus"
+
-        style="margin-left:auto"
+    <div>
-        @click="openSpecDialog()"
+      <el-form>
-      >新建规程</el-button>
+        <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"
+      <el-table :data="specList" size="small" highlight-current-row @row-click="onSpecRowClick"
-        size="small"
+        :row-class-name="tableRowClassName">
-        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
+        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openVersionDialog()">新建版本</el-button>
-          type="primary"
-          size="mini"
-          icon="el-icon-plus"
-          @click="openVersionDialog()"
-        >新建版本</el-button>
       </div>
-      <el-table
+      <el-table :data="versionList" size="small" highlight-current-row @row-click="onVersionRowClick">
-        :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
+            <el-switch :value="row.isActive === 1" active-color="#5F7BA0" @click.native.stop
-              :value="row.isActive === 1"
+              @change="handleActiveChange(row, $event)" />
-              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:focus {
-::v-deep .el-button--primary:active { background: #4a6585 !important; border-color: #4a6585 !important; }
+  background: #4d6a8e !important;
-::v-deep .el-button--primary.is-disabled { opacity: .5; }
+  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 {
-::v-deep .el-button--text.btn-danger { color: #f56c6c !important; }
+  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>