仓库管理样式修改

src/App.vue

@@ -31,12 +31,6 @@
 #app .theme-picker {
   display: none;
 }
-
-.el-form-item {
-  width: 100%;
-  margin-right: 0px;
-  /* margin-bottom: 10px; */
-}
 .el-form--label-top {
   background-color: #fff;
   padding: 10px;
@@ -73,6 +67,14 @@
 .app-container {
   background-color: #f3f3f4;
 }
+.app-container .el-form-item {
+  width: 100%;
+  margin-right: 0px;
+  /* margin-bottom: 10px; */
+}
+.app-container-form {
+  padding: 20px;
+}
 .border-card {
   padding: 15px;
   background-color: #fff;

src/views/stock/assembly/assembly.vue

@@ -1,85 +1,144 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isRunFinish" clearable placeholder="组装状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-input v-model="listQuery.assembleProductName" clearable placeholder="组装商品名称" class="filter-item" style="width: 200px;" >
-      </el-input>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量组装</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="经手人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="组装状态">
+            <el-select v-model="listQuery.isRunFinish" clearable 
+              placeholder="组装状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="组装商品名称">
+            <el-input v-model="listQuery.assembleProductName" clearable 
+              placeholder="组装商品名称" style="width: 100%">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="包装/组装单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'assemblyDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="组装时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="200px" label="组装商品名称" prop="assembleProductName">
-      </el-table-column>
-      <el-table-column align="center" min-width="200px" label="组装原因" prop="remarks">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="组装状态">
-        <template slot-scope="props">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="包装/组装单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'assemblyDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="组装时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="200px" label="组装商品名称" prop="assembleProductName"></el-table-column>
+        <el-table-column align="center" min-width="200px" label="组装原因" prop="remarks"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="组装状态">
+          <template slot-scope="props">
             <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已组装</span>
             <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待组装</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isRunFinish == '1'" type="success" size="small" @click="handleExecute(scope.row)">组装</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">组装</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
+
     <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
@@ -94,14 +153,13 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listAssembly, deleteAssembly, executeAssembly, cancelAssembly } from "@/api/assembly";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
       cancelId: '',
@@ -113,24 +171,13 @@ export default {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
       warehouseList: [],
-      userSelsctList:[],
+      userSelsctList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已组装",
-        },
-        {
-          type: '1',
-          name: "待组装",
-        },
-         {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已组装" },
+        { type: '1', name: "待组装" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -143,7 +190,7 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isRunFinish: '',
-        assembleProductName:'',
+        assembleProductName: '',
       },
     }
   },
@@ -176,21 +223,17 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -200,55 +243,45 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isRunFinish: '',
-        assembleProductName:'',
-      },
-        this.getList()
+        assembleProductName: '',
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-assembly/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'assemblyAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'assemblyAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listAssembly(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'assemblyEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'assemblyEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认组装吗?', '提示', {
+      this.$confirm('确认组装吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -259,15 +292,15 @@ export default {
             message: '组装成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认组装吗?", "提示", {
+        this.$confirm("确认组装吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -284,8 +317,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -295,7 +328,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -306,15 +339,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -331,8 +364,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/assembly/assemblyAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>组装单</h3>
             <el-form-item label="组装时间" prop="serialDate">

src/views/stock/breakage/breakage.vue

@@ -1,81 +1,136 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isRunFinish" clearable placeholder="请选择状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量报损</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="经手人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="报损状态">
+            <el-select v-model="listQuery.isRunFinish" clearable 
+              placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="报损单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'breakageDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="报损时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="报损状态">
-        <template slot-scope="props">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="报损单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'breakageDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="报损时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="报损状态">
+          <template slot-scope="props">
             <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已报损</span>
             <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待报损</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="200px" label="报损原因" prop="remarks">
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isRunFinish == '1'" type="success" size="small" @click="handleExecute(scope.row)">报损</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-           <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" min-width="200px" label="报损原因" prop="remarks"></el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">报损</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
+
     <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
@@ -90,17 +145,16 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listBreakage, deleteBreakage, executeBreakage, cancelBreakage } from "@/api/breakage";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
-       cancelId: '',
+      cancelId: '',
       dialogFormVisible: false,
       dataForm: {
         cancelMsg: ''
@@ -109,24 +163,13 @@ export default {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
       typeList: [
-        {
-          type: '0',
-          name: "已报损",
-        },
-        {
-          type: '1',
-          name: "待报损",
-        },
-         {
-          type: '2',
-          name: "已作废",
-        },
+        { type: '0', name: "已报损" },
+        { type: '1', name: "待报损" },
+        { type: '2', name: "已作废" },
       ],
       warehouseList: [],
-      userSelsctList:[],
-      list: [
-
-      ],
+      userSelsctList: [],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -148,7 +191,7 @@ export default {
     this.getList();
   },
   methods: {
-     handleCancelShow(id) {
+    handleCancelShow(id) {
       this.dialogFormVisible = true;
       this.cancelId = id;
       this.$nextTick(() => {
@@ -171,21 +214,17 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -195,54 +234,44 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isRunFinish: '',
-      },
-        this.getList()
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-breakage/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'breakageAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'breakageAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listBreakage(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'breakageEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'breakageEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认报损吗?', '提示', {
+      this.$confirm('确认报损吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -253,15 +282,15 @@ export default {
             message: '报损成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认报损吗?", "提示", {
+        this.$confirm("确认报损吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -278,8 +307,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -289,7 +318,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -300,15 +329,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -325,8 +354,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/breakage/breakageAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>报损单</h3>
             <el-form-item label="报损时间" prop="serialDate">

src/views/stock/disassembly/disassembly.vue

@@ -1,86 +1,145 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isRunFinish" clearable placeholder="拆卸状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-input v-model="listQuery.assembleProductName" clearable placeholder="拆卸商品名称" class="filter-item" style="width: 200px;" >
-      </el-input>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量拆卸</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="经手人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="拆卸状态">
+            <el-select v-model="listQuery.isRunFinish" clearable 
+              placeholder="拆卸状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="拆卸商品名称">
+            <el-input v-model="listQuery.assembleProductName" clearable 
+              placeholder="拆卸商品名称" style="width: 100%">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="包装/拆卸单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'disassemblyDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="拆卸时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="200px" label="拆卸商品名称" prop="assembleProductName">
-      </el-table-column>
-      <el-table-column align="center" min-width="200px" label="拆卸原因" prop="remarks">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="拆卸状态">
-        <template slot-scope="props">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="包装/拆卸单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'disassemblyDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="拆卸时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="200px" label="拆卸商品名称" prop="assembleProductName"></el-table-column>
+        <el-table-column align="center" min-width="200px" label="拆卸原因" prop="remarks"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="拆卸状态">
+          <template slot-scope="props">
             <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已拆卸</span>
             <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待拆卸</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isRunFinish == '1'" type="success" size="small" @click="handleExecute(scope.row)">拆卸</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-           <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">拆卸</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
-     <!-- 作废原因对话框 -->
+
+    <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
         <el-form-item label="作废原因" prop="cancelMsg">
@@ -94,14 +153,13 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listDisassembly, deleteDisassembly, executeDisassembly, cancelDisassembly } from "@/api/disassembly";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
       cancelId: '',
@@ -113,24 +171,13 @@ export default {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
       warehouseList: [],
-      userSelsctList:[],
+      userSelsctList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已拆卸",
-        },
-        {
-          type: '1',
-          name: "待拆卸",
-        },
-        {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已拆卸" },
+        { type: '1', name: "待拆卸" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -143,7 +190,7 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isRunFinish: '',
-        assembleProductName:'',
+        assembleProductName: '',
       },
     }
   },
@@ -153,7 +200,7 @@ export default {
     this.getList();
   },
   methods: {
-     handleCancelShow(id) {
+    handleCancelShow(id) {
       this.dialogFormVisible = true;
       this.cancelId = id;
       this.$nextTick(() => {
@@ -176,21 +223,17 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -200,55 +243,45 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isRunFinish: '',
-        assembleProductName:'',
-      },
-        this.getList()
+        assembleProductName: '',
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-disassembly/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'disassemblyAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'disassemblyAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listDisassembly(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'disassemblyEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'disassemblyEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认拆卸吗?', '提示', {
+      this.$confirm('确认拆卸吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -259,15 +292,15 @@ export default {
             message: '拆卸成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认拆卸吗?", "提示", {
+        this.$confirm("确认拆卸吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -284,8 +317,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -295,7 +328,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -306,15 +339,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -331,8 +364,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/disassembly/disassemblyAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>拆卸单</h3>
             <el-form-item label="拆卸时间" prop="serialDate">

src/views/stock/requisition/requisition.vue

@@ -1,91 +1,156 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="调出仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.outHandlerId" clearable filterable placeholder="调出经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.warehouseTargetId" clearable filterable placeholder="调入仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="调入经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isDelivery" clearable placeholder="发货状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量调拨</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="调出仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="调出仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="调出经手人">
+            <el-select v-model="listQuery.outHandlerId" clearable filterable 
+              placeholder="调出经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="调入仓库">
+            <el-select v-model="listQuery.warehouseTargetId" clearable filterable 
+              placeholder="调入仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="调入经手人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="调入经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="发货状态">
+            <el-select v-model="listQuery.isDelivery" clearable 
+              placeholder="发货状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="调拨单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'requisitionDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调拨时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调出仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调出经手人" prop="outHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调入仓库" prop="warehouseTargetName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调入经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="调拨状态">
-        <template slot-scope="props">
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="调拨单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'requisitionDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="调拨时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="调出仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="调出经手人" prop="outHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="调入仓库" prop="warehouseTargetName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="调入经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="调拨状态">
+          <template slot-scope="props">
             <span v-if="props.row.isDelivery == '0'" style="color: #67C23A;font-weight: bold;">已发货</span>
             <span v-if="props.row.isDelivery == '1'" style="color: #E6A23C;font-weight: bold;">待发货</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isDelivery == '1'" type="success" size="small" @click="handleExecute(scope.row)">发货</el-button>
-          <el-button v-if="scope.row.isDelivery == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-           <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isDelivery == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">发货</el-button>
+            <el-button v-if="scope.row.isDelivery == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
+
     <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
@@ -100,17 +165,16 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listRequisition, deleteRequisition, executeRequisition, cancelRequisition } from "@/api/requisition";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
-       cancelId: '',
+      cancelId: '',
       dialogFormVisible: false,
       dataForm: {
         cancelMsg: ''
@@ -119,24 +183,13 @@ export default {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
       warehouseList: [],
-      userSelsctList:[],
+      userSelsctList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已发货",
-        },
-        {
-          type: '1',
-          name: "待发货",
-        },
-         {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已发货" },
+        { type: '1', name: "待发货" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -183,21 +236,17 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -209,54 +258,44 @@ export default {
         warehouseTargetId: '',
         addHandlerId: '',
         isDelivery: '',
-      },
-        this.getList()
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-requisition/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'requisitionAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'requisitionAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listRequisition(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'requisitionEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'requisitionEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认调拨吗?', '提示', {
+      this.$confirm('确认调拨吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -267,15 +306,15 @@ export default {
             message: '调拨成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认调拨吗?", "提示", {
+        this.$confirm("确认调拨吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -292,8 +331,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -303,7 +342,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -314,15 +353,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -339,8 +378,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/requisition/requisitionAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>调拨单</h3>
             <el-form-item label="调拨时间" prop="serialDate">

src/views/stock/retrieval/retrieval.vue

@@ -1,86 +1,142 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <treeselect class="filter-item" default-expand-all v-model="listQuery.requireDepartmentId" :options="deptOptions"
-                :normalizer="normalizer" placeholder="出库部门" style="width: 200px" />
-      <el-select v-model="listQuery.storeId" clearable placeholder="门店" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in storeList" :label="item.storeName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      
-      <el-select v-model="listQuery.isRunFinish" clearable placeholder="发货状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量发货</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="出库部门">
+            <treeselect v-model="listQuery.requireDepartmentId" :options="deptOptions"
+              :normalizer="normalizer" placeholder="出库部门" style="width: 100%" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="门店">
+            <el-select v-model="listQuery.storeId" clearable 
+              placeholder="门店" style="width: 100%">
+              <el-option :key="item.id" v-for="item in storeList" 
+                :label="item.storeName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="发货状态">
+            <el-select v-model="listQuery.isRunFinish" clearable 
+              placeholder="发货状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="出库单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'retrievalDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="出库时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="出库部门" prop="requireDepartmentName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="门店" prop="storeName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="outHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="发货状态">
-        <template slot-scope="props">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="出库单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'retrievalDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="出库时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="出库部门" prop="requireDepartmentName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="门店" prop="storeName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="outHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="发货状态">
+          <template slot-scope="props">
             <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已发货</span>
             <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待发货</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isRunFinish == '1'" type="success" size="small" @click="handleExecute(scope.row)">发货</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-           <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">发货</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
+
     <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
@@ -95,18 +151,17 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
-import { listRetrieval, deleteRetrieval, executeRetrieval,cancelRetrieval } from "@/api/retrieval";
+import { listRetrieval, deleteRetrieval, executeRetrieval, cancelRetrieval } from "@/api/retrieval";
 import { storeList } from "@/api/store";
 import { warehouseList } from "@/api/warehouse";
 import { listDept } from "@/api/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
   components: { Treeselect },
-  directives: { waves },
   data() {
     return {
       cancelId: '',
@@ -117,27 +172,15 @@ export default {
       rules: {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
-      // 树选项
       deptOptions: [],
       storeList: [],
       warehouseList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已发货",
-        },
-        {
-          type: '1',
-          name: "待发货",
-        },
-         {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已发货" },
+        { type: '1', name: "待发货" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -147,7 +190,7 @@ export default {
         limit: 10,
         startDate: '',
         endDate: '',
-        responsibleDept: undefined,
+        requireDepartmentId: undefined,
         storeId: '',
         warehouseId: '',
         isRunFinish: '',
@@ -184,97 +227,80 @@ export default {
           });
         }
       })
-
     },
     getListDept() {
-            listDept().then(response => {
-                this.deptOptions = this.handleTree(response.data.data, "deptId");
-            });
-        },
-        /** 转换部门数据结构 */
-        normalizer(node) {
-            if (node.children && !node.children.length) {
-                delete node.children;
-            }
-            return {
-                id: node.deptId,
-                label: node.deptName,
-                children: node.children
-            };
-        },
-    /** 获取仓库列表数据 */
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data.data, "deptId");
+      });
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
     getStoreList() {
       storeList().then(response => {
         this.storeList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取仓库列表数据 */
     getWarehouseList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
-        page: 1,
-        limit: 10,
         page: 1,
         limit: 10,
         startDate: '',
         endDate: '',
-        responsibleDept: undefined,
+        requireDepartmentId: undefined,
         storeId: '',
         warehouseId: '',
         isRunFinish: '',
-      },
-        this.getList()
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-out/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'retrievalAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'retrievalAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listRetrieval(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'retrievalEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'retrievalEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认发货吗?', '提示', {
+      this.$confirm('确认发货吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -285,15 +311,15 @@ export default {
             message: '发货成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认发货吗?", "提示", {
+        this.$confirm("确认发货吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -310,8 +336,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -321,7 +347,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -332,15 +358,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -357,8 +383,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/retrieval/retrievalAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>通用出库单</h3>
             <el-form-item label="出库时间" prop="serialDate">

src/views/stock/stockCount/stockCount.vue

@@ -1,78 +1,123 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="盘点人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量盘点</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="盘点人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="盘点人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="盘点单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'stockCountDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="盘点时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="盘点人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="盘点单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'stockCountDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="盘点时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="盘点人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
+
 <script>
 import { listStockCount, deleteStockCount, executeStockCount } from "@/api/stockCount";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
       warehouseList: [],
-      userSelsctList:[],
+      userSelsctList: [],
       list: [],
       delarr: [],
       multipleSelection: [],
@@ -94,19 +139,16 @@ export default {
     this.getList();
   },
   methods: {
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -115,54 +157,44 @@ export default {
         endDate: '',
         warehouseId: '',
         addHandlerId: '',
-      },
-        this.getList()
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-stockCount/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'stockCountAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'stockCountAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listStockCount(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'stockCountEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'stockCountEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认盘点吗?', '提示', {
+      this.$confirm('确认盘点吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -173,15 +205,15 @@ export default {
             message: '盘点成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认盘点吗?", "提示", {
+        this.$confirm("确认盘点吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -198,8 +230,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -209,7 +241,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -220,15 +252,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -245,8 +277,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/stockCount/stockCountAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>盘点单</h3>
             <el-form-item label="盘点时间" prop="serialDate">

src/views/stock/swap/swap.vue

@@ -1,82 +1,137 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-      class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable placeholder="仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.addHandlerId" clearable filterable placeholder="经手人" class="filter-item" style="width: 200px">
-          <el-option :key="item.loginId" v-for="item in userSelsctList" :label="item.deptName+'_'+item.userName" :value="item.loginId">
-          </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isDelivery" clearable placeholder="换货状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download"
-        @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量换货</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable 
+              placeholder="仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="经手人">
+            <el-select v-model="listQuery.addHandlerId" clearable filterable 
+              placeholder="经手人" style="width: 100%">
+              <el-option :key="item.loginId" v-for="item in userSelsctList" 
+                :label="item.deptName+'_'+item.userName" :value="item.loginId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="换货状态">
+            <el-select v-model="listQuery.isDelivery" clearable 
+              placeholder="换货状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="换货单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'swapDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="换货时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="换货原因" prop="remarks">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="换货状态">
-        <template slot-scope="props">
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="换货单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'swapDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="换货时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="换货原因" prop="remarks"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="换货状态">
+          <template slot-scope="props">
             <span v-if="props.row.isDelivery == '0'" style="color: #67C23A;font-weight: bold;">已发货</span>
             <span v-if="props.row.isDelivery == '1'" style="color: #E6A23C;font-weight: bold;">待发货</span>
             <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
           </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isDelivery == '1'" type="success" size="small" @click="handleExecute(scope.row)">发货</el-button>
-          <el-button v-if="scope.row.isDelivery == '1'" type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isDelivery == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">发货</el-button>
+            <el-button v-if="scope.row.isDelivery == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
-     <!-- 作废原因对话框 -->
+
+    <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
         <el-form-item label="作废原因" prop="cancelMsg">
@@ -90,17 +145,16 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
 import { listSwap, deleteSwap, executeSwap, cancelSwap } from "@/api/swap";
 import { warehouseList } from "@/api/warehouse";
 import { allUserList } from "@/api/public";
-import waves from "@/directive/waves"; // 水波纹指令
 
 export default {
-  directives: { waves },
   data() {
     return {
-       cancelId: '',
+      cancelId: '',
       dialogFormVisible: false,
       dataForm: {
         cancelMsg: ''
@@ -109,24 +163,13 @@ export default {
         cancelMsg: [{ required: true, message: "作废原因不能为空", trigger: "blur" }],
       },
       warehouseList: [],
-      userSelsctList:[],
+      userSelsctList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已发货",
-        },
-        {
-          type: '1',
-          name: "待发货",
-        },
-        {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已发货" },
+        { type: '1', name: "待发货" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -148,7 +191,7 @@ export default {
     this.getList();
   },
   methods: {
-     handleCancelShow(id) {
+    handleCancelShow(id) {
       this.dialogFormVisible = true;
       this.cancelId = id;
       this.$nextTick(() => {
@@ -171,21 +214,17 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 获取人员列表数据 */
     getAllUserList() {
       allUserList().then(response => {
         this.userSelsctList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -195,54 +234,44 @@ export default {
         warehouseId: '',
         addHandlerId: '',
         isDelivery: '',
-      },
-        this.getList()
+      };
+      this.getList();
     },
     handleDownload() {
       window.location.href = process.env.BASE_API + '/warehouse-swap/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'swapAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'swapAdd' });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       listSwap(this.listQuery).then(response => {
-        this.list = response.data.data.items
-        this.total = response.data.data.total
-        this.listLoading = false
+        this.list = response.data.data.items;
+        this.total = response.data.data.total;
+        this.listLoading = false;
       }).catch(() => {
-        this.list = []
-        this.total = 0
-        this.listLoading = false
-      })
+        this.list = [];
+        this.total = 0;
+        this.listLoading = false;
+      });
     },
-
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
-
     handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.getList()
+      this.listQuery.limit = val;
+      this.getList();
     },
-
     handleCurrentChange(val) {
-      this.listQuery.page = val
-      this.getList()
+      this.listQuery.page = val;
+      this.getList();
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'swapEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'swapEdit', params: { id: row.id } });
     },
     handleExecute(row) {
-      this.$confirm('确认换货吗?', '提示', {
+      this.$confirm('确认换货吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -253,15 +282,15 @@ export default {
             message: '换货成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认换货吗?", "提示", {
+        this.$confirm("确认换货吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -278,8 +307,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",
@@ -289,7 +318,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -300,15 +329,15 @@ export default {
             message: '删除成功',
             type: 'success',
             duration: 2000
-          })
-          this.getList()
-        })
-      }).catch(() => { })
+          });
+          this.getList();
+        });
+      }).catch(() => { });
     },
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -325,8 +354,8 @@ export default {
               duration: 2000,
             });
             this.getList();
-          })
-        })
+          });
+        });
       } else {
         this.$notify({
           title: "提示",

src/views/stock/swap/swapAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>换货单</h3>
             <el-form-item label="换货时间" prop="serialDate">

src/views/stock/warehousing/warehousing.vue

@@ -1,78 +1,123 @@
 <template>
-  <div class="app-container calendar-list-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"
-        class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"
-        class="filter-item" style="width:200px">
-      </el-date-picker>
-      <el-select v-model="listQuery.warehouseId" clearable filterable placeholder="请选择仓库" class="filter-item" style="width: 200px">
-        <el-option :key="item.id" v-for="item in warehouseList" :label="item.warehouseName" :value="item.id">
-        </el-option>
-      </el-select>
-      <el-select v-model="listQuery.isRunFinish" clearable placeholder="请选择状态" class="filter-item" style="width: 200px">
-        <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
-        </el-option>
-      </el-select>
-      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
-      <el-button class="filter-item" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
-      <!-- <el-button class="filter-item" type="success" icon="el-icon-takeaway-box" @click="executeAll">批量入库</el-button> -->
-      <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
-    </div>
+  <div class="app-container">
+    <!-- 查询表单区域 -->
+    <el-form :model="listQuery" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="开始日期">
+            <el-date-picker v-model="listQuery.startDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="开始日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="结束日期">
+            <el-date-picker v-model="listQuery.endDate" value-format="yyyy-MM-dd" type="date" 
+              placeholder="结束日期" style="width: 100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="仓库">
+            <el-select v-model="listQuery.warehouseId" clearable filterable 
+              placeholder="请选择仓库" style="width: 100%">
+              <el-option :key="item.id" v-for="item in warehouseList" 
+                :label="item.warehouseName" :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select v-model="listQuery.isRunFinish" clearable 
+              placeholder="请选择状态" style="width: 100%">
+              <el-option :key="item.type" v-for="item in typeList" 
+                :label="item.name" :value="item.type">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" 
+              @click="handleFilter">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" type="primary" 
+              @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
 
-    <!-- 查询结果 -->
-    <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
-      element-loading-text="正在查询中。。。" border fit highlight-current-row>
-      <el-table-column type="selection" width="55px" align="center"> </el-table-column>
-      <el-table-column type="index" label="序号" header-align="center" align="center">
-      </el-table-column>
-      <el-table-column align="center" min-width="150px" label="入库单号">
-        <template slot-scope="scope">
-          <router-link :to="{ name: 'warehousingDetail', params: { id: scope.row.id } }">
-            <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="入库时间" prop="serialDate">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="供应商" prop="supplierName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName">
-      </el-table-column>
-      <el-table-column align="center" min-width="100px" label="入库状态">
-        <template slot-scope="props">
-          <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已入库</span>
-          <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待入库</span>
-          <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isRunFinish == '1'" type="success" size="small"
-            @click="handleExecute(scope.row)">入库</el-button>
-          <el-button v-if="scope.row.isRunFinish == '1'" type="primary" size="small"
-            @click="handleUpdate(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.isRunFinish != '0'" type="danger" size="small"
-            @click="handleDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.isRunFinish == '0'" type="warning" size="small"
-            @click="handleCancelShow(scope.row.id)">作废</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <!-- 操作按钮区域 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" class="editButton" size="small" 
+          icon="el-icon-plus" @click="handleCreate">添加</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="small" 
+          @click="handleDownload">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" icon="el-icon-delete" size="small" 
+          @click="delAll">批量删除</el-button>
+      </el-col>
+    </el-row>
 
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
-        layout="total, sizes, prev, pager, next, jumper" :total="total">
-      </el-pagination>
+    <!-- 表格区域 -->
+    <div class="border-card">
+      <el-table height="450" size="small" :data="list" @selection-change="handleSelectionChange" 
+        v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+        <el-table-column type="selection" width="55px" align="center"></el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" min-width="150px" label="入库单号">
+          <template slot-scope="scope">
+            <router-link :to="{ name: 'warehousingDetail', params: { id: scope.row.id } }">
+              <div style="color: #337ab7;cursor: pointer;">{{ scope.row.serialCode }}</div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="入库时间" prop="serialDate"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="供应商" prop="supplierName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="仓库" prop="warehouseName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="经手人" prop="addHandlerName"></el-table-column>
+        <el-table-column align="center" min-width="100px" label="入库状态">
+          <template slot-scope="props">
+            <span v-if="props.row.isRunFinish == '0'" style="color: #67C23A;font-weight: bold;">已入库</span>
+            <span v-if="props.row.isRunFinish == '1'" style="color: #E6A23C;font-weight: bold;">待入库</span>
+            <span v-if="props.row.isRunFinish == '2'" style="color: #E6A23C;font-weight: bold;">已作废</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-success" 
+              class="openText" size="small" @click="handleExecute(scope.row)">入库</el-button>
+            <el-button v-if="scope.row.isRunFinish == '1'" type="text" icon="el-icon-edit" 
+              class="editText" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.isRunFinish != '0'" type="text" icon="el-icon-delete" 
+              class="deleteText" size="small" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button v-if="scope.row.isRunFinish == '0'" type="text" icon="el-icon-close" 
+              class="closeText" size="small" @click="handleCancelShow(scope.row.id)">作废</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
     </div>
+
     <!-- 作废原因对话框 -->
     <el-dialog :close-on-click-modal="false" title="单据作废" :visible.sync="dialogFormVisible" width="40%">
       <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
@@ -87,10 +132,12 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
-import { listWarehousing, deleteWarehousing, executeWarehousing,cancelWarehousing } from "@/api/warehousing";
+// script 部分保持不变，仅保留原有逻辑
+import { listWarehousing, deleteWarehousing, executeWarehousing, cancelWarehousing } from "@/api/warehousing";
 import { warehouseList } from "@/api/warehouse";
-import waves from "@/directive/waves"; // 水波纹指令
+import waves from "@/directive/waves";
 
 export default {
   directives: { waves },
@@ -106,22 +153,11 @@ export default {
       },
       warehouseList: [],
       typeList: [
-        {
-          type: '0',
-          name: "已入库",
-        },
-        {
-          type: '1',
-          name: "待入库",
-        },
-        {
-          type: '2',
-          name: "已作废",
-        },
-      ],
-      list: [
-
+        { type: '0', name: "已入库" },
+        { type: '1', name: "待入库" },
+        { type: '2', name: "已作废" },
       ],
+      list: [],
       delarr: [],
       multipleSelection: [],
       total: 0,
@@ -141,6 +177,7 @@ export default {
     this.getList();
   },
   methods: {
+    // 原有方法保持不变
     handleCancelShow(id) {
       this.dialogFormVisible = true;
       this.cancelId = id;
@@ -164,15 +201,12 @@ export default {
           });
         }
       })
-
     },
-    /** 获取仓库列表数据 */
     getStoreList() {
       warehouseList().then(response => {
         this.warehouseList = response.data.data;
       }).catch(() => { });
     },
-    /** 重置按钮操作 */
     resetQuery() {
       this.listQuery = {
         page: 1,
@@ -188,10 +222,7 @@ export default {
       window.location.href = process.env.BASE_API + '/warehouse-entry/export';
     },
     handleCreate() {
-      this.$router.push({
-        name: 'warehousingAdd',
-        // params: { callback: this.getList }
-      })
+      this.$router.push({ name: 'warehousingAdd' })
     },
     getList() {
       this.listLoading = true
@@ -205,30 +236,23 @@ export default {
         this.listLoading = false
       })
     },
-
     handleFilter() {
       this.listQuery.page = 1
       this.getList()
     },
-
     handleSizeChange(val) {
       this.listQuery.limit = val
       this.getList()
     },
-
     handleCurrentChange(val) {
       this.listQuery.page = val
       this.getList()
     },
-
     handleUpdate(row) {
-      this.$router.push({
-        name: 'warehousingEdit',
-        params: { id: row.id }
-      })
+      this.$router.push({ name: 'warehousingEdit', params: { id: row.id } })
     },
     handleExecute(row) {
-      this.$confirm('确认入库吗?', '提示', {
+      this.$confirm('确认入库吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -247,7 +271,7 @@ export default {
     executeAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认入库吗?", "提示", {
+        this.$confirm("确认入库吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
@@ -275,7 +299,7 @@ export default {
       }
     },
     handleDelete(row) {
-      this.$confirm('确认删除吗?', '提示', {
+      this.$confirm('确认删除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -294,7 +318,7 @@ export default {
     delAll() {
       const length = this.multipleSelection.length;
       if (length > 0) {
-        this.$confirm("确认删除吗?", "提示", {
+        this.$confirm("确认删除吗？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",

src/views/stock/warehousing/warehousingAdd.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container">
+    <div class="app-container-form">
         <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="120px" inline>
             <h3>通用入库单</h3>
             <!-- <el-form-item label="名称" prop="name">
@@ -8,7 +8,7 @@
             </el-form-item> -->
             <el-form-item label="入库时间" prop="serialDate">
                 <el-date-picker v-model="dataForm.serialDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
-                    placeholder="选择日期时间" style="width:200px" :disabled="type === 'detail'">
+                    placeholder="选择日期时间" style="width: 200px;" :disabled="type === 'detail'">
                 </el-date-picker>
             </el-form-item>
             <el-form-item label="供应商" prop="supplierId">