去掉bootstrap样式，修复部分窗口bug

.eslintrc.js

@@ -88,7 +88,6 @@ module.exports = {
     'document': true,
     'localStorage': true,
     'window': true,
-    'BootstrapDialog': true,
     '__webpack_public_path__': true,
     'Notify': true,
     'Vue': true,

package.json

@@ -13,7 +13,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "pc-component-v3": "^1.1.12",
+    "pc-component-v3": "1.1.14-alpha.2",
     "v-tooltip": "^4.0.0-beta.17",
     "vue-select": "^4.0.0-beta.6"
   },

public/index.html

@@ -6,22 +6,10 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>client-wms</title>
 
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css/bootstrap.css">
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css//bootstrap-theme.min.css">
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap3-dialog/dist/css/bootstrap-dialog.css">
-
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/jquery/dist/jquery.js"></script>
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/jquery.cookie/jquery.cookie.js"></script>
 
-
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/bootstrap/dist/js/bootstrap.js"></script>
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/bootstrap3-dialog/dist/js/bootstrap-dialog.js"></script>
-
-
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/colResizable/colResizable-1.6.css">
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/colResizable/colResizable-1.6.js"></script>
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/table-fixer.jquery/table-fixer.jquery.js"></script>
-
 	
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/vue/dist/vue.global.js"></script>
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/vue-i18n/dist/vue-i18n.global.js"></script>

src/common/Common.js

@@ -24,12 +24,12 @@ export default{
         const corpId = this.getRouteParam('corpId');
 
         let newUrl;
-        if (clientId != null && clientId.length > 0 && appName != null && appName.length > 0 && corpId != null && corpId.length > 0) {
-          newUrl = _self.getRedirectUrl('#/login?clientId=' + clientId + '&appName=' + appName + '&corpId=' + corpId + '&redirectUrl=' + encodeURIComponent(currentUrl));
-        } else {
-          newUrl = _self.getRedirectUrl('#/login?redirectUrl=' + encodeURIComponent(currentUrl));
-        }
-        window.location = newUrl;
+        // if (clientId != null && clientId.length > 0 && appName != null && appName.length > 0 && corpId != null && corpId.length > 0) {
+        //   newUrl = _self.getRedirectUrl('#/login?clientId=' + clientId + '&appName=' + appName + '&corpId=' + corpId + '&redirectUrl=' + encodeURIComponent(currentUrl));
+        // } else {
+        //   newUrl = _self.getRedirectUrl('#/login?redirectUrl=' + encodeURIComponent(currentUrl));
+        // }
+        // window.location = newUrl;
       }
     } else if (XMLHttpRequest.status == 500) {
       // 500 Internal Server Error
@@ -37,7 +37,7 @@ export default{
       if (XMLHttpRequest.responseText.indexOf('登录超时') > 0) {
         // 如果异常信息包含“登录超时”，则2秒后跳转到登录页面
         setTimeout(function () {
-          window.location = _self.getRedirectUrl('#/login');
+          // window.location = _self.getRedirectUrl('#/login');
         }, 2 * 1000);
       }
     } else {

src/components/GeneratePosition.vue

@@ -1,117 +1,74 @@
 <template>
-  <div class="container-fluid">
-    <Navbar
-      title="批量创建货位"
-      :is-go-back="false"
-    />
-    <div
-      class="form-inline"
-      style="margin-top:10px;"
-    >
-      <div class="form-group">
-        <label>
-          仓库：
-        </label>
-        <div class="input-group">
-          <v-select
-            v-model="warehouse"
-            label="name"
+  <a-layout>
+    <Navbar title="批量创建货位" :is-go-back="false" />
+    
+    <a-layout-content class="content">
+      <a-space direction="vertical" style="width: 100%">
+        <!-- 搜索区域 -->
+        <a-space>
+          <a-select
+            v-model:value="warehouse"
+            label-in-value
+            style="width: 200px"
             :options="warehouses"
-            style="min-width: 200px;"
+            allow-clear
+            :field-names="{ label: 'name', value: 'id' }"
           />
-        </div>
-      </div>
-      <button
-        type="button"
-        class="btn btn-info"
-        @click="add"
-      >
-        添加货位
-      </button>
-      <button
-        type="button"
-        class="btn btn-primary"
-        @click="save()"
-      >
-        保存
-      </button>
-    </div>
-    <div style="margin-top:10px;">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>序号</th>
-            <th>货位名称</th>
-            <th>货位编号</th>
-            <th>备注</th>
-            <th>
-              <button
-                class="btn btn-danger"
-                type="button"
-                @click="clear"
-              >
-                清空
-              </button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(positionDto, index) in positionDtos" :key="positionDto.id">
-            <td>{{ index + 1 }}</td>
-            <td>
-              <input
-                v-model="positionDto.positionName"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </td>
-            <td>
-              <input
-                v-model="positionDto.positionNo"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </td>
-            <td>
-              <input
-                v-model="positionDto.description"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </td>
-            <td>
-              <button
-                type="button"
-                class="btn btn-danger"
-                @click="deleteOne(index)"
-              >
-                删除
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+          <a-button type="primary" @click="add">添加货位</a-button>
+          <a-button type="primary" @click="save">保存</a-button>
+        </a-space>
+
+        <!-- 数据表格 -->
+        <a-table
+          :columns="columns"
+          :data-source="positionDtos"
+          bordered
+        >
+          <!-- 序号列 -->
+          <template #bodyCell="{ column, record, index }">
+            <template v-if="column.dataIndex === 'index'">
+              {{ index + 1 }}
+            </template>
+            <template v-if="column.dataIndex === 'positionName'">
+              <a-input v-model:value="record.positionName" />
+            </template>
+            <template v-if="column.dataIndex === 'positionNo'">
+              <a-input v-model:value="record.positionNo" />
+            </template>
+            <template v-if="column.dataIndex === 'description'">
+              <a-input v-model:value="record.description" />
+            </template>
+            <template v-if="column.dataIndex === 'action'">
+              <a-button type="danger" @click="deleteOne(index)">删除</a-button>
+            </template>
+          </template>
+        </a-table>
+
+        <!-- 清空按钮 -->
+        <a-button type="danger" @click="clear">清空</a-button>
+      </a-space>
+    </a-layout-content>
 
     <Loading v-if="loading" />
-  </div>
+  </a-layout>
 </template>
 
 <script>
 
 import Common from '../common/Common.js';
 
+import { Layout, PageHeader, Select, Button, Table, Input } from 'ant-design-vue';
 
-import vSelect from 'vue-select';
-
-import 'vue-select/dist/vue-select.css';
 
 export default {
   components: {
-    vSelect,
+    'a-layout': Layout,
+    'a-layout-content': Layout.Content,
+    'a-page-header': PageHeader,
+    'a-select': Select,
+    'a-button': Button,
+    'a-table': Table,
+    'a-input': Input,
   },
   data: function () {
     return {
@@ -119,6 +76,28 @@ export default {
       warehouse: null,
       positionDtos: [],
       loading: false,
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+        },
+        {
+          title: '货位名称',
+          dataIndex: 'positionName',
+        },
+        {
+          title: '货位编号',
+          dataIndex: 'positionNo',
+        },
+        {
+          title: '备注',
+          dataIndex: 'description',
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+        },
+      ],
 
     };
   },
@@ -134,7 +113,7 @@ export default {
         Notify.notice('提示', '请选择仓库。', false);
         return;
       }
-      var warehouseId = this.warehouse.id;
+      var warehouseId = this.warehouse.value;
       if (datas.length == 0) {
         Notify.notice('提示', '无数据可保存。', false);
         return;
@@ -210,4 +189,21 @@ export default {
   },
 };
 
-</script>
+</script>
+
+<style scoped>
+.header {
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.content {
+  padding: 24px;
+  background: #fff;
+  margin: 24px;
+}
+
+::v-deep .ant-table {
+  margin: 16px 0;
+}
+</style>

src/components/GradeDefinition.vue

@@ -27,8 +27,13 @@
         </template>
         
         <!-- 输入框列 -->
-        <template v-else-if="column.dataIndex.startsWith('grade')">
-          {{ record[column.dataIndex] }}
+        <template v-else-if="column.dataIndex.startsWith('grade') && column.dataIndex !== 'gradeName'">
+          <a-input
+            v-if="record.isEditting"
+            v-model:value="record[column.dataIndex]"
+            style="width: 100%"
+          />
+          <span v-else>{{ record[column.dataIndex] }}</span>
         </template>
         
         <!-- 操作列 -->

src/components/InventoryPrint.vue

@@ -21,7 +21,7 @@
       <!-- 操作区域 -->
       <a-space :size="16" class="action-area">
         <a-form-item label="打印模板">
-          <a-select v-model:value="templateId" style="width: 200px">
+          <a-select v-model:value="templateId" style="width: 200px" allow-clear>
             <a-select-option 
               v-for="item in templates" 
               :key="'templates' + item.name" 
@@ -32,7 +32,7 @@
           </a-select>
         </a-form-item>
         <a-form-item label="打印机">
-          <a-select v-model:value="selectedPrinter" style="width: 200px">
+          <a-select v-model:value="selectedPrinter" style="width: 200px" allow-clear>
             <a-select-option 
               v-for="printer in printers" 
               :key="printer" 
@@ -147,28 +147,8 @@ export default {
   computed: {},
 
   watch: {},
-  fixedTableHeader: function () {
-    let _self = this;
-
-    _self.$nextTick(function () {
-      $('.fixed-table').tableFixer({
-        left: 3,
-        head: true,
-      });
-    });
-  },
   mounted: function () {
     const _self = this;
-    $('.fixed-table').tableFixer({
-      left: 0,
-      head: true,
-    });
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
-
     _self.pagination.current_page = 1;
     _self.getAssetInstancePrint();
     _self.loadTemplateData();
@@ -404,7 +384,6 @@ export default {
             );
           }
           _self.loading = false;
-          _self.fixedTableHeader();
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
@@ -435,14 +414,6 @@ export default {
       this.pagination.current_page = 1;
       this.getAssetInstancePrint();
     },
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          head: true,
-        });
-      });
-    },
   },
 };
 </script>

src/components/InventoryPrintOld.vue

@@ -1,226 +1,135 @@
-/** * 存货打印 */
-
 <template>
-  <div class="container-fluid">
+  <a-layout>
     <Navbar title="标签打印" :is-go-back="false" />
-    <div class="flex-container" style="margin-top: 10px">
-      <div class="flex-header">
-        <div>
-          <div class="form-inline" role="form">
-            <PrintWidget
-              ref="printWidget"
-              :printer-localstorage-id="'#InventoryPrinterPrinter'"
-              @selected-printer-name="getPrintName"
+    
+    <a-layout-content class="content">
+      <a-space direction="vertical" style="width: 100%">
+        <!-- 搜索区域 -->
+        <a-space>
+          <PrintWidget
+            ref="printWidget"
+            :printer-localstorage-id="'#InventoryPrinterPrinter'"
+            @selected-printer-name="getPrintName"
+          />
+          <a-input-search 
+            v-model="message"
+            placeholder="请输入要打印存货的名称或编码"
+            style="width: 350px"
+            enter-button
+            @search="queryInventory"
+          />
+          <a-button @click="$refs.printEpc.show()">再次打印</a-button>
+        </a-space>
+
+        <!-- 数据表格 -->
+        <a-table
+          :columns="columns"
+          :data-source="inventoryInstanceDatas"
+          :pagination="pagination"
+          :scroll="{ x: 1500 }"
+          bordered
+          @change="handleTableChange"
+        >
+          <!-- 图片列 -->
+          <template #imageColumn="{ record }">
+            <a-image
+              :src="Common.getThumbnailImageSrc(className, record.imageNames)"
+              width="40px"
+              @click="$refs.imagePreview.preview(className, record.imageNames)"
             />
-
-            <div class="form-group">
-              <input
-                v-model="message"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="请输入要打印存货的名称或编码"
-                aria-describedby="basic-addon"
-                style="width: 350px"
-                @keyup.enter="queryInventory"
-              />
-            </div>
-            <div class="form-group">
-              <button class="btn btn-default" @click="queryInventory">查询</button>
-              <button class="btn btn-default" @click="$refs.printEpc.show()">
-                再次打印
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="flex-content" style="margin-top: 10px">
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 50px">序号</th>
-              <th style="width: 50px">图片</th>
-              <th style="width: 150px">存货名称</th>
-              <th style="width: 150px">存货编号</th>
-              <th style="width: 150px">规格型号</th>
-              <th style="width: 60px">计量单位</th>
-              <th style="width: 60px">采购订单编号</th>
-              <th style="width: 100px">批号</th>
-              <th style="width: 80px">标签个数</th>
-              <th style="width: 80px">标签代表数量</th>
-              <th style="width: 150px">供应商</th>
-              <th style="width: 150px">放置货位</th>
-              <th style="width: 60px">
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateAllPack()"
-                >
-                  打印
-                </button>
-              </th>
-              <th style="width: 100px">
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateAllRepeatPack()"
-                >
-                  重复打印全部
-                </button>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="table1">
-            <tr v-for="(inventoryInstance, index) in inventoryInstanceDatas" :key="inventoryInstance.id">
-              <td>
-                {{
-                  index +
-                    1 +
-                    (pagination.current_page - 1) * pagination.per_page
-                }}
-              </td>
-              <td>
-                <img
-                  :src="
-                    Common.getThumbnailImageSrc(className, inventoryInstance.imageNames)
-                  "
-                  class="image"
-                  @click="
-                    $refs.imagePreview.preview(className, inventoryInstance.imageNames)
-                  "
-                />
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryName }}
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryCode }}
-              </td>
-              <td>
-                {{ inventoryInstance.type }}
-              </td>
-              <td>
-                {{ inventoryInstance.computationUnit }}
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.purchaseOrderNo"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.batchNo"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.packageCount"
-                  autocomplete="off"
-                  type="number"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.quantity"
-                  autocomplete="off"
-                  type="text"
-                  style="width: 100%"
-                  class="form-control"
-                />
-              </td>
-              <td>
-                <SearchWidget
-                  :info-window-no="infoWindowNo1"
-                  :field-value="getFieldValue1(inventoryInstance)"
-                  :display-name="'v.name'"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="valueChanged1($event, inventoryInstance)"
-                />
-              </td>
-              <td>
-                <SearchWidget
-                  :info-window-no="infoWindowNo2"
-                  :field-value="getFieldValue2(inventoryInstance)"
-                  :display-name="'p.barCode'"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="valueChanged2($event, inventoryInstance)"
-                />
-              </td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generatePack(inventoryInstance)"
-                >
-                  打印
-                </button>
-              </td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateRepeatPack(inventoryInstance)"
-                >
-                  重复打印
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-footer">
-        <div>
-          <div class="form-group">
-            <div class="pull-left">
-              共查询到<b>{{ pagination.total }}</b>条数据
-            </div>
-            <div class="pull-right">
-              <VueBootstrapPagination
-                v-if="pagination.last_page > 0"
-                :pagination="pagination"
-                :callback="queryInventory"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+          </template>
+
+          <!-- 可编辑单元格模板 -->
+          <template #purchaseOrderNoColumn="{ record }">
+            <a-input v-model="record.purchaseOrderNo" />
+          </template>
+          <template #batchNoColumn="{ record }">
+            <a-input
+              v-model="record.batchNo"
+              autocomplete="off"
+              style="width: 100%"
+            />
+          </template>
+          <template #packageCountColumn="{ record }">
+            <a-input
+              v-model="record.packageCount"
+              autocomplete="off"
+              type="number"
+              style="width: 100%"
+            />
+          </template>
+          <template #quantityColumn="{ record }">
+            <a-input
+              v-model="record.quantity"
+              autocomplete="off"
+              style="width: 100%"
+            />
+          </template>
+          <template #vendorColumn="{ record }">
+            <SearchWidget
+              :info-window-no="infoWindowNo1"
+              :field-value="getFieldValue1(record)"
+              :display-name="'v.name'"
+              :where-clause-source="whereClauseSource"
+              @value-changed="valueChanged1($event, record)"
+            />
+          </template>
+          <template #positionColumn="{ record }">
+            <SearchWidget
+              :info-window-no="infoWindowNo2"
+              :field-value="getFieldValue2(record)"
+              :display-name="'p.barCode'"
+              :where-clause-source="whereClauseSource"
+              @value-changed="valueChanged2($event, record)"
+            />
+          </template>
+          <template #actionColumn="{ record }">
+            <a-button type="default" @click="generatePack(record)">打印</a-button>
+            <a-button type="default" @click="generateRepeatPack(record)">重复打印</a-button>
+          </template>
+          <template #allActionColumn>
+            <a-button type="default" @click="generateAllPack()">打印</a-button>
+            <a-button type="default" @click="generateAllRepeatPack()">重复打印全部</a-button>
+          </template>
+        </a-table>
+
+        <!-- 分页 -->
+        <a-pagination
+          v-if="pagination.last_page > 0"
+          v-model:current="pagination.current_page"
+          :total="pagination.total"
+          :page-size="pagination.per_page"
+          show-less-items
+          @change="queryInventory"
+        />
+      </a-space>
+    </a-layout-content>
 
     <PrintEpc ref="printEpc" :printer-name="printerName" />
     <Loading v-if="loading" />
     <ImagePreview ref="imagePreview" />
-  </div>
+  </a-layout>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-
-
-
 import InventoryResource from '../api/common/InventoryResource.js';
 import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';
 import { PrintUtil, PrintWidget } from 'pc-component-v3';
+import { Layout, PageHeader, Image, Input, Button, Table, Pagination } from 'ant-design-vue';
 
 export default {
   components: {
+    'a-layout': Layout,
+    'a-layout-content': Layout.Content,
+    'a-image': Image,
+    'a-input': Input,
+    'a-button': Button,
+    'a-table': Table,
+    'a-pagination': Pagination,
     PrintWidget,
-    
   },
-  data: function () {
+  data() {
     this.Common = Common;
     return {
       message: '',
@@ -229,108 +138,165 @@ export default {
       infoWindowNo1: 283036,
       infoWindowNo2: 283920,
       whereClauseSource: {
-        customerDataDimensions:[{
-          fieldName: 'organization.id',
-          dataDimensionTypeNo: '202201191700',
-          defaultDataDimensionTypeValueNo: '1',
-        }],
+        customerDataDimensions: [
+          {
+            fieldName: 'organization.id',
+            dataDimensionTypeNo: '202201191700',
+            defaultDataDimensionTypeValueNo: '1',
+          },
+        ],
       },
       pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        per_page: Common.pageSize,
+        current_page: 1,
+        last_page: 0,
       },
       isUpdatePage: true,
       className: 'com.leanwo.prodog.model.common.Inventory',
-      allRepeatPack: [], //重复打印全部的id
-      printType: 0, //类型 0:采购入库打印/1:扫描入库打印
+      allRepeatPack: [],
+      printType: 0,
       printerName: '',
       loading: false,
-      selectedPrinterTitle:'',
+      selectedPrinterTitle: '',
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          key: 'index',
+          width: 50,
+        },
+        {
+          title: '图片',
+          key: 'image',
+          width: 50,
+          slots: { customRender: 'imageColumn' },
+        },
+        {
+          title: '存货名称',
+          dataIndex: 'inventoryName',
+          key: 'inventoryName',
+          width: 150,
+        },
+        {
+          title: '存货编号',
+          dataIndex: 'inventoryCode',
+          key: 'inventoryCode',
+          width: 150,
+        },
+        {
+          title: '规格型号',
+          dataIndex: 'type',
+          key: 'type',
+          width: 150,
+        },
+        {
+          title: '计量单位',
+          dataIndex: 'computationUnit',
+          key: 'computationUnit',
+          width: 60,
+        },
+        {
+          title: '采购订单编号',
+          key: 'purchaseOrderNo',
+          width: 60,
+          slots: { customRender: 'purchaseOrderNoColumn' },
+        },
+        {
+          title: '批号',
+          key: 'batchNo',
+          width: 100,
+          slots: { customRender: 'batchNoColumn' },
+        },
+        {
+          title: '标签个数',
+          key: 'packageCount',
+          width: 80,
+          slots: { customRender: 'packageCountColumn' },
+        },
+        {
+          title: '标签代表数量',
+          key: 'quantity',
+          width: 80,
+          slots: { customRender: 'quantityColumn' },
+        },
+        {
+          title: '供应商',
+          key: 'vendor',
+          width: 150,
+          slots: { customRender: 'vendorColumn' },
+        },
+        {
+          title: '放置货位',
+          key: 'position',
+          width: 150,
+          slots: { customRender: 'positionColumn' },
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: 60,
+          slots: { customRender: 'actionColumn' },
+        },
+        {
+          title: '全部操作',
+          key: 'allAction',
+          width: 100,
+          slots: { customRender: 'allActionColumn' },
+        },
+      ],
     };
   },
-
-  mounted: function () {
-    var _self = this;
-    _self.queryInventory();
-
-    $('.fixed-table').tableFixer({
-      left: 3,
-      head: true,
-    });
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
+  mounted() {
+    this.queryInventory();
   },
-
   methods: {
-
-    getPrintName:function(value){
+    getPrintName(value) {
       this.selectedPrinterTitle = value;
     },
-
-    getFieldValue1: function (item) {
-      var fieldValue1 = {
+    getFieldValue1(item) {
+      return {
         id: item.vendorId,
         displayValue: [item.vendorName],
         fieldType: 'Key',
       };
-      return fieldValue1;
     },
-
-    getFieldValue2: function (item) {
-      var fieldValue2 = {
+    getFieldValue2(item) {
+      return {
         id: item.positionId,
         displayValue: [item.savePositionName],
         fieldType: 'Key',
       };
-      return fieldValue2;
     },
-
-    // 用户选择框change事件
-    valueChanged1: function (newFieldValue, item) {
+    valueChanged1(newFieldValue, item) {
       item.vendorId = newFieldValue.id;
       item.vendorName = newFieldValue.displayValue[0];
     },
-
-    // 用户选择框change事件
-    valueChanged2: function (newFieldValue, item) {
+    valueChanged2(newFieldValue, item) {
       item.positionId = newFieldValue.id;
       item.savePositionName = newFieldValue.displayValue[0];
     },
-
-    /**
-     * 打印选择的全部存货
-     */
-    generateAllPack: function () {
-      var _self = this;
-      var quantityFilled = true;
-      this.inventoryInstanceDatas.forEach(function (item) {
+    generateAllPack() {
+      let quantityFilled = true;
+      this.inventoryInstanceDatas.forEach(item => {
         if (!item.quantity) {
           quantityFilled = false;
         }
       });
-
       if (!quantityFilled) {
         Notify.error('提示', '请填写数量', false);
         return;
       }
-
-      var correctQuantity = true;
-      this.inventoryInstanceDatas.forEach(function (item) {
+      let correctQuantity = true;
+      this.inventoryInstanceDatas.forEach(item => {
         if (parseInt(item.quantity) != item.quantity || item.quantity <= 0) {
           correctQuantity = false;
         }
       });
-
       if (!correctQuantity) {
         Notify.error('提示', '请输入正整数', false);
         return;
       }
-
       let selectedPrinter = this.selectedPrinterTitle;
       if (selectedPrinter == null || selectedPrinter.length == 0) {
         Notify.error('提示', '请先选择打印机。', false);
@@ -338,43 +304,36 @@ export default {
       }
       $.ajax({
         url: Common.getApiURL(
-          'InventoryInstanceResource/generateInventoryInstances?type=' + _self.printType,
+          'InventoryInstanceResource/generateInventoryInstances?type=' + this.printType,
         ),
         dataType: 'json',
         type: 'post',
         contentType: 'application/json',
-        data: JSON.stringify(_self.inventoryInstanceDatas),
-        beforeSend: function (request) {
+        data: JSON.stringify(this.inventoryInstanceDatas),
+        beforeSend: request => {
           Common.addTokenToRequest(request);
         },
-        success: function (successData) {
-          var ids = [];
-          if(successData.errorCode == 0) {
-            if(successData.datas.length > 0) {
-              successData.datas.forEach(function (item) {
+        success: successData => {
+          let ids = [];
+          if (successData.errorCode == 0) {
+            if (successData.datas.length > 0) {
+              successData.datas.forEach(item => {
                 ids.push(item.id);
               });
-              _self.print(ids);
-
-              //更新全部重复打印数据
-              _self.allRepeatPack = successData.datas;
+              this.print(ids);
+              this.allRepeatPack = successData.datas;
             }
           } else {
             Notify.error('提示', successData.errorMessage, false);
           }
         },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
+        error: (XMLHttpRequest, textStatus, errorThrown) => {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
-
-    /**
-     * 重复打印全部
-     */
-    generateAllRepeatPack: function () {
-      var _self = this;
-      if (_self.allRepeatPack == null || _self.allRepeatPack.length == 0) {
+    generateAllRepeatPack() {
+      if (this.allRepeatPack == null || this.allRepeatPack.length == 0) {
         Notify.error(
           '提示',
           '请先点击【打印】按钮，然后再点击【重复打印全部】按钮。',
@@ -382,19 +341,14 @@ export default {
         );
         return;
       } else {
-        var ids = [];
-        _self.allRepeatPack.forEach(function (item) {
+        let ids = [];
+        this.allRepeatPack.forEach(item => {
           ids.push(item.id);
         });
-        _self.print(ids);
+        this.print(ids);
       }
     },
-
-    /**
-     * 打印单个存货
-     */
-    generatePack: function (inventoryInstance) {
-      var _self = this;
+    generatePack(inventoryInstance) {
       if (!inventoryInstance.quantity) {
         Notify.error('提示', '请填写数量。', false);
         return;
@@ -406,103 +360,86 @@ export default {
         Notify.error('提示', '请输入正整数。', false);
         return;
       }
-
       let selectedPrinter = this.selectedPrinterTitle;
       if (selectedPrinter == null || selectedPrinter.length == 0) {
         Notify.error('提示', '请先选择打印机。', false);
         return;
       }
-
-      var datas = [];
+      let datas = [];
       datas.push(inventoryInstance);
+      this.loading = true;
       $.ajax({
         url: Common.getApiURL(
-          'InventoryInstanceResource/generateInventoryInstances?type=' + _self.printType,
+          'InventoryInstanceResource/generateInventoryInstances?type=' + this.printType,
         ),
         dataType: 'json',
         type: 'post',
         contentType: 'application/json',
         data: JSON.stringify(datas),
-        beforeSend: function (request) {
+        beforeSend: request => {
           Common.addTokenToRequest(request);
-          _self.loading=true;
         },
-        success: function (successData) {
-          _self.loading=false;
-          var ids = [];
-          if(successData.errorCode == 0) {
-            if(successData.datas.length > 0) {
-              successData.datas.forEach(function (item) {
+        success: successData => {
+          this.loading = false;
+          let ids = [];
+          if (successData.errorCode == 0) {
+            if (successData.datas.length > 0) {
+              successData.datas.forEach(item => {
                 ids.push(item.id);
               });
-              _self.print(ids);
-
-              //更新全部重复打印数据
-              _self.allRepeatPack = successData.datas;
+              this.print(ids);
+              this.allRepeatPack = successData.datas;
             }
           } else {
             Notify.error('提示', successData.errorMessage, false);
           }
         },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+        error: (XMLHttpRequest, textStatus, errorThrown) => {
+          this.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
-
-    /**
-     * 重复打印其中一种
-     * @param {Object} inventoryInstance
-     */
-    generateRepeatPack: function (inventoryInstance) {
-      var _self = this;
-      var printIds = [];
-      _self.allRepeatPack.forEach(function (item) {
+    generateRepeatPack(inventoryInstance) {
+      let printIds = [];
+      this.allRepeatPack.forEach(item => {
         if (item.inventoryId == inventoryInstance.inventoryId) {
           printIds.push(item.id);
         }
       });
-
       if (printIds == null || printIds.length == 0) {
         Notify.error('提示', '请先点击【打印】按钮，然后再点击【重复打印】按钮。', false);
         return;
       } else {
-        _self.print(printIds);
+        this.print(printIds);
       }
     },
-
-    /**
-     * 根据物料名称或者编号查询数据
-     */
-    queryInventory: function () {
-      var _self = this;
-      var message = $.trim(this.message);
-      if (_self.message.length > 0 && !_self.isUpdatePage) {
-        _self.pagination.current_page = 1;
-        _self.isUpdatePage = true;
-      } else if (_self.message.length <= 0) {
-        _self.isUpdatePage = false;
+    queryInventory() {
+      let message = $.trim(this.message);
+      if (this.message.length > 0 && !this.isUpdatePage) {
+        this.pagination.current_page = 1;
+        this.isUpdatePage = true;
+      } else if (this.message.length <= 0) {
+        this.isUpdatePage = false;
       }
-      _self.inventoryInstanceDatas.splice(0, _self.inventoryInstanceDatas.length);
-
+      this.inventoryInstanceDatas = [];
       let inventoryQueryConditionRequest = {
         name: message,
         no: message,
         type: message,
         range: {
-          start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
-          length: _self.pagination.per_page,
+          start: (this.pagination.current_page - 1) * this.pagination.per_page,
+          length: this.pagination.per_page,
         },
       };
-      _self.loading=true;
+      this.loading = true;
       InventoryResource.findByQueryCodition(inventoryQueryConditionRequest).then(
         baseRangeResponse => {
-          _self.loading=false;
+          this.loading = false;
           if (baseRangeResponse.errorCode == 0) {
-            if(baseRangeResponse.datas != null){
-              baseRangeResponse.datas.forEach(function (item) {
-                var newInventoryInstance = {
+            if (baseRangeResponse.datas != null) {
+              baseRangeResponse.datas.forEach(item => {
+                let newInventoryInstance = {
                   inventoryName: item.name,
                   inventoryCode: item.no,
                   quantity: '',
@@ -517,53 +454,43 @@ export default {
                   imageNames: item.imageNames,
                   purchaseOrderNo: item.purchaseOrderNo,
                 };
-                _self.inventoryInstanceDatas.push(newInventoryInstance);
+                this.inventoryInstanceDatas.push(newInventoryInstance);
               });
-              _self.pagination.total = baseRangeResponse.total;
-              _self.pagination.last_page = Math.ceil(
-                _self.pagination.total / _self.pagination.per_page,
+              this.pagination.total = baseRangeResponse.total;
+              this.pagination.last_page = Math.ceil(
+                this.pagination.total / this.pagination.per_page,
               );
             }
           }
-          //查询清空上一次的打印数据
-          _self.allRepeatPack = [];
-          _self.fixedTableHeader();
+          this.allRepeatPack = [];
         },
         errorData => {
-          _self.loading=false;
+          this.loading = false;
           Common.processException(errorData);
         },
       );
     },
-
-    /**
-     * 打印文件
-     */
-    print: function (recordIds) {
-      var _self = this;
-      var printData = [];
-
-      _self.loading=true;
+    print(recordIds) {
+      this.loading = true;
       InventoryInstancePrintResource.print(recordIds).then(
         baseListResponse => {
-          _self.loading=false;
+          this.loading = false;
           if (baseListResponse.errorCode == 0) {
             let selectedPrinter = this.selectedPrinterTitle;
-            let selectedPrinterType = _self.$refs.printWidget.getSelectedPrinterTypeTitle();
-            _self.printerName = selectedPrinter;
+            let selectedPrinterType = this.$refs.printWidget.getSelectedPrinterTypeTitle();
+            this.printerName = selectedPrinter;
             if (selectedPrinterType == '发卡机' || selectedPrinterType == 'Jw发卡机') {
-              _self.$nextTick(function () {
-                _self.$refs.printEpc.printPrintPages(baseListResponse.datas);
+              this.$nextTick(() => {
+                this.$refs.printEpc.printPrintPages(baseListResponse.datas);
               });
             } else {
-              var contents = [];
-              baseListResponse.datas.forEach(function (item) {
-                var printItem = {
+              let contents = [];
+              baseListResponse.datas.forEach(item => {
+                let printItem = {
                   id: null,
                   name: null,
                   content: item,
                 };
-                console.log(printItem);
                 if (
                   printItem.content == null ||
                   printItem.content.printItems == null ||
@@ -572,7 +499,7 @@ export default {
                   Notify.error('错误', '打印模板无数据，不能打印。');
                   return;
                 }
-                var content = JSON.stringify(printItem.content);
+                let content = JSON.stringify(printItem.content);
                 if (content == null || content == '' || content == '{}') {
                   Notify.error('错误', '请先选择模板，再点击下载。');
                   return;
@@ -584,93 +511,39 @@ export default {
           }
         },
         errorData => {
-          _self.loading=false;
+          this.loading = false;
           Common.processException(errorData);
         },
       );
     },
-
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          left: 3,
-          head: true,
-        });
-      });
+    handleTableChange(pagination) {
+      this.pagination.current_page = pagination.current;
+      this.queryInventory();
     },
   },
 };
 </script>
 
 <style scoped>
-.flex-container {
-  display: flex;
-  /* 垂直*/
-  flex-direction: column;
-  width: 100%;
-  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-  height: calc(100vh - 140px);
-}
-
-.flex-header {
-  /*放大缩小比例为0 */
-  flex: 0 0 35px;
-}
-
-.flex-footer {
-  height: 45px;
-  /*放大缩小比例为0 */
-  flex: 0 0 45px;
-}
-
-.flex-content {
-  flex: 1;
-  overflow: scroll;
-  width: 100%;
-}
-
-.fixed-table {
-  table-layout: fixed;
-  word-wrap: break-word;
-  word-break: break-all;
-}
-</style>
-
-<style scoped>
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
-}
-
-table.fixed-table tr {
-  height: 40px;
-}
-
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+/* 布局样式调整 */
+.header {
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
 }
 
-.image {
-  width: 40px;
-  height: 40px;
+.content {
+  padding: 24px;
+  background: #fff;
+  margin: 24px;
 }
 
-.modal-img-box {
-  width: 100%;
-  text-align: center;
-  overflow: auto;
+/* 表格样式优化 */
+::v-deep .ant-table {
+  margin: 16px 0;
 }
 
-.m-img {
-  width: 100%;
+::v-deep .ant-pagination {
+  margin-top: 24px;
+  text-align: right;
 }
-</style>
+</style>

src/components/InventoryPrintScan.vue

@@ -1,7 +1,3 @@
-/**
-* 存货打印
-*/
-
 <template>
   <div class="container">
     <Navbar title="扫描入库打印" :is-go-back="false" />

src/components/WmsSetting.vue

@@ -11,7 +11,7 @@
           :disabled="isdisable"
         >
           <a-form-item label="存货编码方式">
-            <a-select v-model:value="wmsSettingDto.inventoryNoStyle">
+            <a-select v-model:value="wmsSettingDto.inventoryNoStyle" allow-clear>
               <a-select-option value="TYPENO">类别编号+序号</a-select-option>
               <a-select-option value="ORGNIZATIONNO">部门编号+序号</a-select-option>
               <a-select-option value="SEQUENCE_NO">顺序号</a-select-option>
@@ -19,7 +19,7 @@
             </a-select>
           </a-form-item>
           <a-form-item label="存货编码类别">
-            <a-select v-model:value="wmsSettingDto.inventoryNoType">
+            <a-select v-model:value="wmsSettingDto.inventoryNoType" allow-clear>
               <a-select-option value="AUTO">自动编码</a-select-option>
               <a-select-option value="MANUAL">手动编码</a-select-option>
             </a-select>
@@ -41,19 +41,19 @@
           :disabled="isdisable"
         >
           <a-form-item label="是否有到货入库">
-            <a-select v-model:value="wmsSettingDto.hasArrival">
+            <a-select v-model:value="wmsSettingDto.hasArrival" allow-clear>
               <a-select-option value="true">是</a-select-option>
               <a-select-option value="false">否</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="是否有检验入库">
-            <a-select v-model:value="wmsSettingDto.hasInspect">
+            <a-select v-model:value="wmsSettingDto.hasInspect" allow-clear>
               <a-select-option value="true">是</a-select-option>
               <a-select-option value="false">否</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="采购请购单单据号前缀">
-            <a-input v-model:value="wmsSettingDto.purchaseRequestDocumentNoSuffix" />
+            <a-input v-model:value="wmsSettingDto.purchaseRequestDocumentNoPrefix" />
           </a-form-item>
           <a-form-item label="采购请购单单据号后缀">
             <a-input v-model:value="wmsSettingDto.purchaseRequestDocumentNoSuffix" />
@@ -78,7 +78,7 @@
           :disabled="isdisable"
         >
           <a-form-item label="快递查询服务供应商">
-            <a-select v-model:value="wmsSettingDto.expressQueryProviderName" :options="isoption" />
+            <a-select v-model:value="wmsSettingDto.expressQueryProviderName" :options="isoption" allow-clear />
           </a-form-item>
         </a-form>
       </a-tab-pane>
@@ -91,7 +91,7 @@
           :disabled="isdisable"
         >
           <a-form-item label="条码查询服务供应商">
-            <a-select v-model:value="wmsSettingDto.barCodeProviderName" :options="isoption2" />
+            <a-select v-model:value="wmsSettingDto.barCodeProviderName" :options="isoption2" allow-clear />
           </a-form-item>
         </a-form>
       </a-tab-pane>
@@ -104,19 +104,19 @@
           :disabled="isdisable"
         >
           <a-form-item label="入库单是否允许物料编码重复">
-            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn" allow-clear>
               <a-select-option value="true">是</a-select-option>
               <a-select-option value="false">否</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="出库单是否允许物料编码重复">
-            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockOut">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockOut" allow-clear>
               <a-select-option value="true">是</a-select-option>
               <a-select-option value="false">否</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="APP显示图片">
-            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn" allow-clear>
               <a-select-option value="true">是</a-select-option>
               <a-select-option value="false">否</a-select-option>
             </a-select>
@@ -132,7 +132,7 @@
           :disabled="isdisable"
         >
           <a-form-item label="货位条码">
-            <a-select v-model:value="wmsSettingDto.positionBarcodeGeneratorEnum">
+            <a-select v-model:value="wmsSettingDto.positionBarcodeGeneratorEnum" allow-clear>
               <a-select-option value="L_WAREHOUSE_NO_POSITION_NO">L+仓库编号+货位编号</a-select-option>
               <a-select-option value="POSITION_NO">货位编号</a-select-option>
               <a-select-option value="MANUAL">手工填入</a-select-option>

src/pad/UploadTrainingVideo.vue

@@ -259,7 +259,7 @@ export default {
     },
     saveFile(fileNames) {
       const _self = this;
-      const videoSrcs = [];
+      var videoSrcs = [];
       if (_self.videoList !== undefined && _self.videoList.length > 0) {
         if (_self.videoList.indexOf(',') === -1) {
           videoSrcs.push(_self.videoList);

src/pick/PickingCar.vue

@@ -1,7 +1,7 @@
 <template>
   <a-layout>
     <a-layout-header class="header">
-      <Navbar title="领料车" :is-go-back="false">
+      <Navbar title="领料车" :is-go-back="true">
         <a-space>
           <a-button type="link" title="仓库库存" @click="stockOutPrepareLine()">
             <template #icon><home-outlined /></template>
@@ -19,7 +19,8 @@
           <a-select
             v-model:value="projectItemName"
             style="width: 220px"
-            show-search
+            show-search 
+            allow-clear
             @change="projectHandleChange"
           >
             <a-select-option 
@@ -36,6 +37,7 @@
           <a-select
             v-model:value="warehouseName"
             style="width: 220px"
+            allow-clear
             @change="storeHandleChange"
           >
             <a-select-option 
@@ -52,6 +54,7 @@
           <a-select
             v-model:value="stockOutPrepateTemplateName"
             style="width: 220px"
+            allow-clear 
             @change="templateHandleChange"
           >
             <a-select-option 
@@ -128,9 +131,19 @@
           </template>
 
           <!-- 数量输入列 -->
-          <template v-if="['quantity', 'pickQuantity'].includes(column.dataIndex)">
+          <template v-if="column.dataIndex === 'quantity'">
             <a-input-number 
-              v-if="!(record.stockOutPrepateTemplateLineId || (record.boxMessage?.length && !record.boxNo))"
+              v-if="!(record.stockOutPrepateTemplateLineId != null || (record.boxMessage.length > 0 && record.boxNo == null))"
+              v-model:value="record[column.dataIndex]"
+              :min="0"
+              @change="checkBoxChange(record)"
+            />
+            <span v-else>{{ record[column.dataIndex] }}</span>
+          </template>
+
+          <template v-if="column.dataIndex === 'pickQuantity'">
+            <a-input-number 
+              v-if="!(record.boxMessage.length > 0 && record.boxNo == null)"
               v-model:value="record[column.dataIndex]"
               :min="0"
               @change="checkBoxChange(record)"
@@ -173,7 +186,7 @@
       <!--modal1框-->
       <!-- 修改模态框部分 -->
       <a-modal 
-        v-model:visible="modal1" 
+        v-model:open="modal1" 
         title="领料类型选择"
         width="90%"
         :footer="null"
@@ -281,7 +294,7 @@
       </a-modal>
         
       <!--显示物料所在各个项目数量的modal框-->
-      <a-modal v-model:visible="modal2" title="物料分布情况" width="60%">
+      <a-modal v-model:open="modal2" title="物料分布情况" width="60%">
         <a-table
           :columns="[
             { 

src/pick/StockOutPrepareApproved.vue

@@ -20,7 +20,7 @@
           <a-select
             v-model:value="projectItemName"
             style="width: 220px"
-            show-search
+            show-search 
             @change="projectHandleChange"
           >
             <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
@@ -198,20 +198,6 @@ export default {
     this.getLocalStorage();
     this.loadSelectProjectItem();
     this.queryPickingCarCount();
-    // if (this.projectItemId != null) {
-    //   var projectItem = new Option(this.projectItemName, this.projectItemId);
-    //   $('#projectItem').append(projectItem);
-    //   this.getStockOutPrepareDatas();
-    // } else {
-    //   this.getStockOutPrepareDatas();
-    // }
-
-    $('.fixed-table').tableFixer({ 'left': 4, 'head': true });
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
   },
 
   methods: {
@@ -304,60 +290,6 @@ export default {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      // $('#projectItem').select2({
-      //   // 请求搜索框数据
-      //   //data: _self.data,
-      //   theme: 'bootstrap',
-      //   placeholder: '项目事件',
-      //   minimumInputLength: 0,
-      //   placeholderOption: 'first',
-      //   quietMillis: 250,
-      //   allowClear: true,
-      //   language: 'zh-CN',
-      //   width: 'resolve',
-      //   // 请求搜索框数据
-      //   ajax: {
-      //     url: function (params) {
-      //       return Common.getApiURL('ProjectItemResource/queryByCondition');
-      //     },
-      //     dataType: 'json',
-      //     type: 'get',
-      //     delay: 250,
-      //     minimumInputLength: 0,
-      //     transport: function (params, success, failure) {
-      //       params.beforeSend = Common.addTokenToRequest;
-      //       var $request = $.ajax(params);
-      //       $request.then(success);
-      //       $request.fail(failure);
-      //       return $request;
-      //     },
-      //     data: function (params) {
-      //       return {
-      //         'name': params.term,
-      //       };
-      //     },
-      //     processResults: function (data, params) {
-      //       if(data.errorCode == 0) {
-      //         var more = (params * 10) <= data.datas.length;
-      //         for (var i = 0; i < data.datas.length; i++) {
-      //           data.datas[i].text = data.datas[i].name;
-      //         }
-      //         return {
-      //           results: data.datas,
-      //           more: more,
-      //         };
-      //       }
-      //     },
-      //   },
-      // }).on('change', function () {
-      //   if ($(this).val() == null) {
-      //     _self.projectItemId = null;
-      //   } else {
-      //     _self.projectItemId = $(this).val();
-
-      //   }
-      //   _self.getStockOutPrepareDatas();
-      // });
     },
 
     /**

src/pick/StockOutPrepareLine.vue

@@ -1,19 +1,19 @@
 <template>
   <a-layout>
     <!-- 顶部导航栏 -->
-    <a-layout-header class="app-header">
-      <Navbar title="仓库库存" :is-go-back="false">
-        <a-space>
-          <a-button shape="circle" @click="openStockOutCar()">
-            <template #icon><shopping-cart-outlined /></template>
-            <a-badge :count="count" :number-style="{ backgroundColor: '#52c41a' }" />
-          </a-button>
-          <a-button shape="circle" @click="stockOutPrepareApproved()">
-            <template #icon><ordered-list-outlined /></template>
-          </a-button>
-        </a-space>
-      </Navbar>
-    </a-layout-header>
+    <!-- <a-layout-header class="app-header"> -->
+    <Navbar title="仓库库存" :is-go-back="false">
+      <a-space>
+        <a-button shape="circle" @click="openStockOutCar()">
+          <template #icon><shopping-cart-outlined /></template>
+          <a-badge :count="count" :number-style="{ backgroundColor: '#52c41a' }" />
+        </a-button>
+        <a-button shape="circle" @click="stockOutPrepareApproved()">
+          <template #icon><ordered-list-outlined /></template>
+        </a-button>
+      </a-space>
+    </Navbar>
+    <!-- </a-layout-header> -->
 
     <!-- 主内容区 -->
     <a-layout-content class="content-container">
@@ -23,7 +23,8 @@
           <a-select
             v-model:value="projectItemName"
             style="width: 220px"
-            show-search
+            show-search 
+            allow-clear
             @change="projectHandleChange"
           >
             <a-select-option 
@@ -42,7 +43,8 @@
         <a-form-item label="仓库" required>
           <a-select
             v-model:value="warehouseName"
-            style="width: 220px"
+            style="width: 220px" 
+            allow-clear 
             @change="storeHandleChange"
           >
             <a-select-option 
@@ -59,7 +61,8 @@
           <a-select
             v-model:value="stockOutPrepateTemplateName"
             style="width: 220px"
-            show-search
+            show-search 
+            allow-clear 
             @change="templateHandleChange"
           >
             <a-select-option 
@@ -117,7 +120,7 @@
           <template v-if="column.dataIndex === 'checked'">
             <a-checkbox 
               :checked="record.checked"
-              @change="e => checkBoxChange(record, e.target.checked)"
+              @change="e => handleCheckboxChange(record, e)"
             />
           </template>
 
@@ -156,7 +159,7 @@
 
       <!-- 物料分布模态框 -->
       <a-modal 
-        v-model:visible="modal1" 
+        v-model:open="modal1" 
         title="物料分布情况"
         width="60%"
         :footer="null"
@@ -177,7 +180,7 @@
       </a-modal>
 
       <!-- 修改 modal4 新增项目事件弹窗 -->
-      <a-modal v-model:visible="modal4" title="新增项目事件" width="600px">
+      <a-modal v-model:open="modal4" title="新增项目事件" width="600px">
         <StockOutPrepareLineAddProject
           ref="addProject"
           @close-project-item-modal="closeProjectItemModal"
@@ -191,7 +194,7 @@
       </a-modal>
 
       <!-- 修改 modal5 物料分布情况弹窗 -->
-      <a-modal v-model:visible="modal5" title="物料分布情况" width="80%">
+      <a-modal v-model:open="modal5" title="物料分布情况" width="80%">
         <a-table
           :columns="[
             { title: '选择', dataIndex: 'selection', width: 100 },
@@ -233,7 +236,7 @@
       </a-modal>
 
       <!-- 修改 modal6 物料分布情况弹窗 -->
-      <a-modal v-model:visible="modal6" title="物料分布情况" width="80%">
+      <a-modal v-model:open="modal6" title="物料分布情况" width="80%">
         <a-table
           :columns="[
             { title: '序号', dataIndex: 'index', width: 100 },
@@ -255,7 +258,7 @@
 
       <!-- 修改 modal8 工具箱内工具弹窗 -->
       <a-modal 
-        v-model:visible="modal8" 
+        v-model:open="modal8" 
         :title="`${selectedParentInventoryInstance.name}-${selectedParentInventoryInstance.no}-箱内工具`"
         width="90%"
         :footer="null"
@@ -951,72 +954,6 @@ export default defineComponent({
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      // $('#projectItem')
-      //   .select2({
-      //     // 请求搜索框数据
-      //     //data: _self.data,
-      //     theme: 'bootstrap',
-      //     placeholder: '项目事件',
-      //     minimumInputLength: 0,
-      //     placeholderOption: 'first',
-      //     quietMillis: 250,
-      //     allowClear: true,
-      //     language: 'zh-CN',
-      //     width: 'resolve',
-      //     // 请求搜索框数据
-      //     ajax: {
-      //       url: function (params) {
-      //         return Common.getApiURL('ProjectItemResource/queryByCondition');
-      //       },
-      //       dataType: 'json',
-      //       type: 'get',
-      //       delay: 250,
-      //       minimumInputLength: 0,
-      //       transport: function (params, success, failure) {
-      //         params.beforeSend = Common.addTokenToRequest;
-      //         var $request = $.ajax(params);
-      //         $request.then(success);
-      //         $request.fail(failure);
-      //         return $request;
-      //       },
-      //       data: function (params) {
-      //         return {
-      //           name: params.term,
-      //         };
-      //       },
-      //       processResults: function (data, params) {
-      //         if(data.errorCode == 0) {
-      //           var more = params * 10 <= data.datas.length;
-      //           for (var i = 0; i < data.datas.length; i++) {
-      //             data.datas[i].text = data.datas[i].name;
-      //           }
-      //           _self.projectItems = data.datas;
-      //           return {
-      //             results: data.datas,
-      //             more: more,
-      //           };
-      //         }
-      //       },
-      //     },
-      //   })
-      //   .on('change', function () {
-      //     if ($(this).val() == null) {
-      //       _self.projectItemId = null;
-      //       var storage = window.localStorage;
-      //       storage.setItem('projectItemId', _self.projectItemId);
-      //       _self.projectItemName = '';
-      //       storage.setItem('projectItemName', _self.projectItemName);
-      //     } else {
-      //       _self.projectItemId = $(this).val();
-      //       for (var i = 0; i < _self.projectItems.length; i++) {
-      //         if (_self.projectItems[i].id == _self.projectItemId) {
-      //           _self.projectItemName = _self.projectItems[i].name;
-      //         }
-      //       }
-      //       storage.setItem('projectItemId', _self.projectItemId);
-      //       storage.setItem('projectItemName', _self.projectItemName);
-      //     }
-      //   });
     },
     /**
      * 仓库
@@ -1042,73 +979,6 @@ export default defineComponent({
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      // $('#warehouse')
-      //   .select2({
-      //     // 请求搜索框数据
-      //     theme: 'bootstrap',
-      //     data: _self.data,
-      //     placeholder: '仓库',
-      //     minimumInputLength: 0,
-      //     placeholderOption: 'first',
-      //     quietMillis: 250,
-      //     allowClear: true,
-      //     language: 'zh-CN',
-      //     width: 'resolve',
-      //     // 请求搜索框数据
-      //     ajax: {
-      //       url: function (params) {
-      //         return Common.getApiURL('WarehouseResource/queryByCondition');
-      //       },
-      //       dataType: 'json',
-      //       type: 'get',
-      //       delay: 250,
-      //       minimumInputLength: 0,
-      //       transport: function (params, success, failure) {
-      //         params.beforeSend = Common.addTokenToRequest;
-      //         var $request = $.ajax(params);
-      //         $request.then(success);
-      //         $request.fail(failure);
-      //         return $request;
-      //       },
-      //       data: function (params) {
-      //         return {
-      //           name: params.term,
-      //         };
-      //       },
-      //       processResults: function (data, params) {
-      //         if(data.errorCode == 0) {
-      //           var more = params * 10 <= data.datas.length;
-      //           for (var i = 0; i < data.datas.length; i++) {
-      //             data.datas[i].text = data.datas[i].name;
-      //           }
-      //           _self.warehouses = data.datas;
-      //           return {
-      //             results: data.datas,
-      //             more: more,
-      //           };
-      //         }
-      //       },
-      //     },
-      //   })
-      //   .on('change', function () {
-      //     if ($(this).val() == null) {
-      //       _self.warehouseId = null;
-      //       _self.warehouseName = '';
-      //       var storage = window.localStorage;
-      //       storage.setItem('warehouseId', _self.warehouseId);
-      //       storage.setItem('warehouseName', _self.warehouseName);
-      //     } else {
-      //       _self.warehouseId = $(this).val();
-      //       for (var i = 0; i < _self.warehouses.length; i++) {
-      //         if (_self.warehouses[i].id == _self.warehouseId) {
-      //           _self.warehouseName = _self.warehouses[i].name;
-      //         }
-      //       }
-      //       storage.setItem('warehouseId', _self.warehouseId);
-      //       storage.setItem('warehouseName', _self.warehouseName);
-      //     }
-      //     _self.getDatas();
-      //   });
     },
 
     /**
@@ -1135,86 +1005,6 @@ export default defineComponent({
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      // $('#stockOutPrepateTemplate')
-      //   .select2({
-      //     // 请求搜索框数据
-      //     //data: _self.data,
-      //     theme: 'bootstrap',
-      //     placeholder: '需求模板',
-      //     minimumInputLength: 0,
-      //     placeholderOption: 'first',
-      //     quietMillis: 250,
-      //     allowClear: true,
-      //     language: 'zh-CN',
-      //     width: 'resolve',
-      //     // 请求搜索框数据
-      //     ajax: {
-      //       url: function (params) {
-      //         return Common.getApiURL('StockOutPrepateTemplateResource/queryByCondition');
-      //       },
-      //       dataType: 'json',
-      //       type: 'get',
-      //       delay: 250,
-      //       minimumInputLength: 0,
-      //       transport: function (params, success, failure) {
-      //         params.beforeSend = Common.addTokenToRequest;
-      //         var $request = $.ajax(params);
-      //         $request.then(success);
-      //         $request.fail(failure);
-      //         return $request;
-      //       },
-      //       data: function (params) {
-      //         return {
-      //           name: params.term,
-      //         };
-      //       },
-      //       processResults: function (data, params) {
-      //         console.log(data.datas);
-      //         if(data.errorCode == 0) {
-      //           var more = params * 10 <= data.datas.length;
-      //           for (var i = 0; i < data.datas.length; i++) {
-      //             data.datas[i].text = data.datas[i].name;
-      //           }
-      //           _self.stockOutPrepateTemplateNames = data.datas;
-      //           return {
-      //             results: data.datas,
-      //             more: more,
-      //           };
-      //         }
-      //       },
-      //     },
-      //   })
-      //   .on('change', function () {
-      //     if ($(this).val() == null) {
-      //       _self.stockOutPrepateTemplateId = null;
-      //       var storage = window.localStorage;
-      //       _self.stockOutPrepateTemplateName = '';
-      //       storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
-      //       storage.setItem(
-      //         'stockOutPrepateTemplateName',
-      //         _self.stockOutPrepateTemplateName,
-      //       );
-      //     } else {
-      //       _self.stockOutPrepateTemplateId = $(this).val();
-      //       for (var i = 0; i < _self.stockOutPrepateTemplateNames.length; i++) {
-      //         if (
-      //           _self.stockOutPrepateTemplateNames[i].id ==
-      //           _self.stockOutPrepateTemplateId
-      //         ) {
-      //           _self.stockOutPrepateTemplateName =
-      //             _self.stockOutPrepateTemplateNames[i].name;
-      //         }
-      //       }
-      //       storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
-      //       storage.setItem(
-      //         'stockOutPrepateTemplateName',
-      //         _self.stockOutPrepateTemplateName,
-      //       );
-      //     }
-      //     //需求模板改变，设定页数充1开始
-      //     _self.pagination.current_page = 1;
-      //     _self.getDatas();
-      //   });
     },
     //查询仓库物料信息
     getDatas: function () {
@@ -1574,12 +1364,15 @@ export default defineComponent({
      * @param {Object} item
      */
     checkBoxChange: function (item) {
-      if (item.pickQuantity == undefined || item.pickQuantity == '') {
+      if (item.pickQuantity == undefined || item.pickQuantity == '' || item.pickQuantity == null) {
         item.checked = false;
       } else {
         item.checked = true;
       }
     },
+    handleCheckboxChange(record, e) {
+      record.checked = e.target.checked;
+    },
   },
 });
 </script>

src/pick/StockOutPrepareLine1.vue

@@ -1,428 +1,663 @@
 <template>
-  <div class="adjust-positions-container">
-    <a-page-header title="货位调整" />
-
-    <a-form :layout="formLayout" class="search-form">
-      <a-form-item label="调整前货位" required>
-        <a-select
-          v-model="positionBeforeId"
-          placeholder="请选择调整前货位"
-          show-search
-          filter-option="filterOption"
-          @change="handlePositionBeforeChange"
-        >
-          <a-select-option
-            v-for="item in positionBefores"
-            :key="item.positionId"
-            :value="item.positionId"
-          >
-            {{ item.positionNo }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="调整后货位" required>
-        <a-select
-          v-model="positionAfterId"
-          placeholder="请选择调整后货位"
-          show-search
-          filter-option="filterOption"
-        >
-          <a-select-option
-            v-for="item in positionAfters"
-            :key="item.positionId"
-            :value="item.positionId"
-          >
-            {{ item.positionNo }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="搜索内容">
-        <a-input
-          v-model="queryMessage"
-          placeholder="请输入工具的中文名称或SKU或序列号"
-          @press-enter="handleSearch"
-        />
-      </a-form-item>
-      <a-form-item label="工具类型">
-        <a-select v-model="selectType" @change="changeSelectType">
-          <a-select-option value="1">RFID管理</a-select-option>
-          <a-select-option value="2">非RFID管理</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" @click="handleSearch">查询</a-button>
-        <a-button type="primary" @click="submitBefore">确认调整</a-button>
-      </a-form-item>
-    </a-form>
-
-    <a-table
-      :columns="columns"
-      :data-source="selectType === '2' ? currentStockDtos : inventoryInstanceDatas"
-      :pagination="pagination"
-      :loading="loading"
-      row-key="id"
-      @change="handleTableChange"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'image'">
-          <img
-            :src="Common.getThumbnailImageSrc(className, record.imageName)"
-            class="image"
-            @click="$refs.imagePreview.preview(className, record.imageName)"
-          />
-        </template>
-        <template v-if="column.key === 'adjustQuantity' && selectType === '2'">
-          <a-input-number
-            v-model="record.adjustQuantity"
-            :min="0"
-            @change="checkBoxChange(record)"
-          />
-        </template>
-      </template>
-    </a-table>
-
-    <a-modal
-      v-model:visible="modal"
-      title="调整确认"
-      :footer="null"
-    >
-      <p>您确认要进行货位调整吗？</p>
-      <div class="modal-footer">
-        <a-button @click="closeModal">取消</a-button>
-        <a-button type="primary" @click="handleSubmit">确认</a-button>
+  <div>
+    <div class=" flex-container">
+      <div class=" flex-header">
+        <StockOutPrepareTemplateHeader active-index="1" />
+        <div class="form-inline">
+          <div class="form-group">
+            <label for="projectItem">
+              <span class="text-danger">
+                *
+              </span>
+              项目事件
+            </label>
+            <select id="projectItem" class="form-control" />
+          </div>
+          <div class="form-group">
+            <label for="warehouse">
+              <span class="text-danger">
+                *
+              </span>
+              仓库
+            </label>
+            <select id="warehouse" class="form-control" />
+          </div>
+          <div class="form-group">
+            <label for="stockOutPrepateTemplate">
+              <span class="text-danger">
+                *
+              </span>
+              需求模板
+            </label>
+            <select id="stockOutPrepateTemplate" class="form-control" />
+          </div>
+          <div class="form-group">
+            <button type="button" class="btn btn-primary" @click="queryLines">查询</button>
+            <button type="button" class="btn btn-info" @click="clear">清空</button>
+            <button type="button" class="btn btn-success" @click="save">确定领料</button>
+          </div>
+        </div>
       </div>
-    </a-modal>
-
-    <Loading v-if="loading" />
-    <ImagePreview ref="imagePreview" />
+      <div class=" flex-content">				
+        <table class="fixed-table table table-responsive table-bordered">
+          <thead>
+            <tr>
+              <td style="width: 150px;">物料编码</td>
+              <td style="width: 200px;">物料名称</td>
+              <td style="width: 150px;">规格型号</td>
+              <td style="width: 120px;">库存数量</td>
+              <td style="width: 150px;">待出库数量</td>
+              <td style="width: 150px;">可领用数量</td>
+              <td style="width: 120px;">需求数量</td>
+              <td style="width: 120px;">领用数量</td>
+            </tr>
+          </thead>
+          <tbody v-if="pageStockOutPrepateTemplates.length>0">
+            <tr v-for="item in pageStockOutPrepateTemplates" :key="item.inventoryId" :class="{'danger' : item.currentStockCanPickQuantity < item.pickQuantity}">
+              <td>{{ item.inventoryNo }}</td>
+              <td>{{ item.inventoryName }}</td>
+              <td>{{ item.inventoryType }}</td>
+              <td>{{ item.currentStockQuantity }}</td>
+              <td>{{ item.currentStockOutQuantity }}</td>
+              <td>{{ item.currentStockCanPickQuantity }}</td>
+              <td>{{ item.quantity }}</td>
+              <td><input v-model="item.pickQuantity" autocomplete="off" type="number" class="form-control" placeholder="领料数量" aria-describedby="basic-addon1" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class=" flex-footer">
+        <div class="pull-left">
+          <span>第{{ (pagination.current_page-1)*pagination.per_page+1 }}-{{ pagination.current_page*pagination.per_page }}条,共计{{ pagination.total }}条,每页显示</span>
+          <PageSizeSelect @page-size-changed="gridSizeSelect" />
+          <span>条</span>
+        </div>
+        <div class="pull-right">
+          <VueBootstrapPagination v-if="pagination.last_page > 0" :pagination="pagination" :callback="getDatas" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <Loading v-if="loading" />
+    </div>
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import CurrentStockResource from '../api/wms/CurrentStockResource.js';
-import AdjustPositionResource from '../api/wms/AdjustPositionResource.js';
-import InventoryInstanceResource from '../api/common/InventoryInstanceResource.js';
+
+
+
+import StockOutPrepareResource from '../api/wms/StockOutPrepareResource.js';
+import StockOutPrepateTemplateResource from '../api/wms/StockOutPrepateTemplateResource.js';
+
+
+
+import StockOutPrepareTemplateHeader from './StockOutPrepareTemplateHeader.vue';
 
 export default {
-  data() {
+  components: {
+    
+    
+    
+    
+    
+    
+    
+    StockOutPrepareTemplateHeader,
+  },
+  data: function() {
     return {
-      formLayout: {
-        labelCol: { span: 8 },
-        wrapperCol: { span: 16 },
-      },
-      checked: false,
-      positionBefores: [],
-      positionBeforeId: null,
-      positionAfterId: null,
-      positionAfters: [],
-      queryMessage: '',
-      currentStockDtos: [],
-      inventoryInstanceDatas: [],
+      stockOutPrepateTemplates: [],
+      pageStockOutPrepateTemplates: [],
+      stockOutPrepateTemplateId: undefined,
+      warehouseId: undefined,
+      projectItemId: undefined,
       pagination: {
         total: 0,
-        pageSize: Common.pageSize,
-        current: 1,
+        per_page: Common.pageSize, // required
+        current_page: 1, // required
+        last_page: 0, // required
       },
-      className: 'com.leanwo.prodog.model.common.Inventory',
-      selectType: '1',
+      hot: '',
+      count: 0,
+      storageLife: undefined,
+      checked: false,
+      page: 20,
+      length: undefined,
+      start: undefined,
+      stockOutPrepateTemplateName:'',
+      warehouseName: '',
+      projectItemName: '',
+      projectItems:[],
+      warehouses:[],
+      stockOutPrepateTemplateNames:[],
       loading: false,
-      modal: false,
-      columns: [
-        {
-          title: '序号',
-          key: 'index',
-          render: (text, record, index) => index + 1,
-        },
-        {
-          title: '图片',
-          key: 'image',
-        },
-        {
-          title: '中文名称',
-          dataIndex: 'inventoryName',
-          key: 'inventoryName',
-        },
-        {
-          title: 'SKU',
-          dataIndex: 'inventoryCode',
-          key: 'inventoryCode',
-        },
-        {
-          title: '序列号',
-          dataIndex: 'no',
-          key: 'no',
-        },
-        {
-          title: '库存数量',
-          dataIndex: 'stockQuantity',
-          key: 'stockQuantity',
-        },
-        {
-          title: '调整数量',
-          key: 'adjustQuantity',
-        },
-      ],
+
     };
   },
-  mounted() {
-    this.loadSelectPositionBefore();
-    this.loadSelectPositionAfter();
-  },
-  methods: {
-    handleTableChange(pagination) {
-      this.pagination.current = pagination.current;
-      this.pagination.pageSize = pagination.pageSize;
-      this.handleSearch();
-    },
-    filterOption(input, option) {
-      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-    },
-    handlePositionBeforeChange() {
-      this.handleSearch();
-    },
-    handleSearch() {
-      if (this.selectType === '1') {
-        this.queryInventoryInstance();
-      } else {
-        this.queryInventory();
-      }
-    },
-    changeSelectType() {
-      this.handleSearch();
-    },
-    checkBoxChange(item) {
-      if (!item.adjustQuantity || item.adjustQuantity === 0) {
-        item.checked = false;
-      } else {
-        item.checked = true;
-      }
-    },
-    closeModal() {
-      this.modal = false;
-    },
-    submitBefore() {
-      if (!this.positionBeforeId || !this.positionAfterId) {
-        Notify.error('错误', '调整前货位与调整后货位不允许为空', false);
-        return;
-      }
-      if (this.positionBeforeId === this.positionAfterId) {
-        Notify.error('错误', '调整前货位与调整后货位不能相同', false);
-        return;
-      }
-      const data =
-        this.selectType === '2' ? this.currentStockDtos : this.inventoryInstanceDatas;
-      let checkCount = 0;
-      let falseData = true;
-      data.forEach(item => {
-        if (item.checked) {
-          checkCount++;
-          if (this.selectType === '2' && (!item.adjustQuantity || item.adjustQuantity <= 0)) {
-            falseData = false;
-          }
-        }
-      });
-      if (!falseData) {
-        Notify.error('错误', '调整数量必须大于0', false);
-        return;
-      }
-      if (checkCount > 0) {
-        this.modal = true;
-      } else {
-        Notify.error('错误', '请选择最少一条数据进行提交', false);
-      }
-    },
-    handleSubmit() {
-      this.modal = false;
-      if (this.selectType === '2') {
-        this.submit1();
-      } else {
-        this.submit2();
+  watch: {
+    'page': function(curVal, oldVal) {
+      if(curVal != undefined) {
+        this.getDatas();
       }
     },
-    submit1() {
-      const currentStockDtoBs = this.currentStockDtos.filter(item => item.checked);
-      this.loading = true;
-      $.ajax({
-        url: Common.getApiURL('AdjustPositionResource/saveAdjustPosition'),
-        type: 'post',
-        data: {
-          currentStockDtoBs: JSON.stringify(currentStockDtoBs),
-          positionBeforeId: this.positionBeforeId,
-          positionAfterId: this.positionAfterId,
-        },
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: successData => {
-          this.loading = false;
-          if (successData.errorCode === 0) {
-            if (successData.data) {
-              Notify.success('成功', '操作成功', false);
-              this.queryInventory();
+  },
+
+  created: function() {
+    if(!window.localStorage) {
+      alert('浏览器不支持localstorage');
+    } else {
+      var storage = window.localStorage;
+      this.warehouseId = storage.getItem('warehouseId');
+      this.warehouseName = storage.getItem('warehouseName');
+      this.projectItemId = storage.getItem('projectItemId');
+      this.projectItemName = storage.getItem('projectItemName');
+      this.stockOutPrepateTemplateId = storage.getItem('stockOutPrepateTemplateId');
+      this.stockOutPrepateTemplateName = storage.getItem('stockOutPrepateTemplateName');
+    }
+
+  },
+
+  mounted: function() {
+    this.loadSelectProjectItem();
+    this.loadSelectWarehouse();
+    this.loadSelectTemplate();
+    if (this.warehouseId != null) {
+      var warehouse = new Option(this.warehouseName, this.warehouseId);
+      $('#warehouse').append(warehouse);	
+    }
+    if (this.projectItemId != null) {
+      var projectItem = new Option(this.projectItemName, this.projectItemId);
+      $('#projectItem').append(projectItem);
+
+    }
+    if (this.stockOutPrepateTemplateId != null) {
+      var stockOutPrepateTemplate = new Option(this.stockOutPrepateTemplateName, this.stockOutPrepateTemplateId);
+      $('#stockOutPrepateTemplate').append(stockOutPrepateTemplate);
+    }
+			
+    $('.fixed-table').tableFixer({'left' : 2,'head':true});
+
+    $('.fixed-table').colResizable({
+      resizeMode: 'overflow',
+      partialRefresh: true,
+    });
+  },
+
+  methods: {
+
+    /**
+			 * 项目事件
+			 */
+    loadSelectProjectItem: function() {
+      var _self = this;
+      $('#projectItem').select2({
+        // 请求搜索框数据
+        //data: _self.data,
+        theme: 'bootstrap',
+        placeholder: '项目事件',
+        minimumInputLength: 0,
+        placeholderOption: 'first',
+        quietMillis: 250,
+        allowClear: true,
+        language: 'zh-CN',
+        width: 'resolve',
+        // 请求搜索框数据
+        ajax: {
+          url: function(params) {
+            return Common.getApiURL('ProjectItemResource/queryByCondition');
+          },
+          dataType: 'json',
+          type: 'get',
+          delay: 250,
+          minimumInputLength: 0,
+          transport: function(params, success, failure) {
+            params.beforeSend = Common.addTokenToRequest;
+            var $request = $.ajax(params);
+            $request.then(success);
+            $request.fail(failure);
+            return $request;
+          },
+          data: function(params) {
+            return {
+              'name': params.term,
+            };
+          },
+          processResults: function(data, params) {
+            if(data.errorCode == 0) {
+              var more = (params * 10) <= data.datas.length;
+              for(var i = 0; i < data.datas.length; i++) {
+                data.datas[i].text = data.datas[i].name;
+              }
+              _self.projectItems = data.datas;
+              return {
+                results: data.datas,
+                more: more,
+              };
             }
-          }
+          },
         },
-        error: errorData => {
-          this.loading = false;
-          Common.processException(errorData);
-        },
-      });
-    },
-    submit2() {
-      const inventoryInstanceDtos = this.inventoryInstanceDatas.filter(item => item.checked);
-      this.loading = true;
-      $.ajax({
-        url: Common.getApiURL('AdjustPositionResource/saveAdjustPosition2'),
-        type: 'post',
-        data: {
-          inventoryInstanceDtos: JSON.stringify(inventoryInstanceDtos),
-          positionBeforeId: this.positionBeforeId,
-          positionAfterId: this.positionAfterId,
-        },
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: successData => {
-          this.loading = false;
-          if (successData.errorCode === 0) {
-            if (successData.data) {
-              Notify.success('成功', '操作成功', false);
-              this.queryInventoryInstance();
+      }).on('change', function() {
+        if($(this).val() == null) {
+          _self.projectItemId = undefined;
+          var storage = window.localStorage;
+          storage.setItem('projectItemId', _self.projectItemId);
+          _self.projectItemName = '';
+          storage.setItem('projectItemName', _self.projectItemName);
+          _self.clear();
+        } else {
+          _self.projectItemId = $(this).val();
+          for (var i = 0; i < _self.projectItems.length; i++) {
+            if (_self.projectItems[i].id == _self.projectItemId) {
+              _self.projectItemName = _self.projectItems[i].name;
             }
           }
-        },
-        error: errorData => {
-          this.loading = false;
-          Common.processException(errorData);
-        },
+          _self.clear();
+          storage.setItem('projectItemId', _self.projectItemId);
+          storage.setItem('projectItemName', _self.projectItemName);
+        }
+
       });
     },
-    queryInventory() {
-      this.loading = true;
-      const queryMessage = $.trim(this.queryMessage);
-      const start = (this.pagination.current - 1) * this.pagination.pageSize;
-      const length = this.pagination.pageSize;
-      $.ajax({
-        url: Common.getApiURL('CurrentStockResource/queryCurrentStockByPosition'),
-        type: 'get',
-        data: {
-          positionBeforeId: this.positionBeforeId,
-          queryMessage,
-          start,
-          length,
+    /**
+			 * 仓库
+			 */
+    loadSelectWarehouse: function() {
+      var _self = this;
+      var storage = window.localStorage;
+      $('#warehouse').select2({
+        // 请求搜索框数据
+        //data: _self.data,
+        theme: 'bootstrap',
+        placeholder: '仓库',
+        minimumInputLength: 0,
+        placeholderOption: 'first',
+        quietMillis: 250,
+        allowClear: true,
+        language: 'zh-CN',
+        width: 'resolve',
+        // 请求搜索框数据
+        ajax: {
+          url: function(params) {
+            return Common.getApiURL('WarehouseResource/queryByCondition');
+          },
+          dataType: 'json',
+          type: 'get',
+          delay: 250,
+          minimumInputLength: 0,
+          transport: function(params, success, failure) {
+            params.beforeSend = Common.addTokenToRequest;
+            var $request = $.ajax(params);
+            $request.then(success);
+            $request.fail(failure);
+            return $request;
+          },
+          data: function(params) {
+            return {
+              'name': params.term,
+            };
+          },
+          processResults: function(data, params) {
+            if(data.errorCode == 0) {
+              var more = (params * 10) <= data.datas.length;
+              for(var i = 0; i < data.datas.length; i++) {
+                data.datas[i].text = data.datas[i].name;
+              }
+              _self.warehouses = data.datas;
+              return {
+                results: data.datas,
+                more: more,
+              };
+            }
+          },
         },
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: successData => {
-          this.loading = false;
-          if (successData.errorCode === 0) {
-            if (successData.datas) {
-              this.currentStockDtos = successData.datas.map(item => ({
-                ...item,
-                checked: false,
-              }));
-              this.pagination.total = successData.total;
+      }).on('change', function() {
+        if($(this).val() == null) {
+          _self.warehouseId = undefined;
+          _self.warehouseName = '';
+          storage.setItem('warehouseId', _self.warehouseId);
+          storage.setItem('warehouseName', _self.warehouseName);
+          _self.clear();
+        } else {
+          _self.warehouseId = $(this).val();
+          for (var i = 0; i < _self.warehouses.length; i++) {
+            if (_self.warehouses[i].id == _self.warehouseId) {
+              _self.warehouseName = _self.warehouses[i].name;
             }
           }
-        },
-        error: errorData => {
-          this.loading = false;
-          Common.processException(errorData);
-        },
+          _self.clear();
+          storage.setItem('warehouseId', _self.warehouseId);
+          storage.setItem('warehouseName', _self.warehouseName);
+        }
       });
     },
-    queryInventoryInstance() {
-      this.loading = true;
-      const queryMessage = $.trim(this.queryMessage);
-      const start = (this.pagination.current - 1) * this.pagination.pageSize;
-      const length = this.pagination.pageSize;
-      $.ajax({
-        url: Common.getApiURL('InventoryInstanceResource/queryByPosition'),
-        type: 'get',
-        data: {
-          positionBeforeId: this.positionBeforeId,
-          queryMessage,
-          start,
-          length,
+
+    /**
+			 * 需求模板
+			 */
+    loadSelectTemplate: function() {
+      var _self = this;
+      var storage = window.localStorage;
+      $('#stockOutPrepateTemplate').select2({
+        // 请求搜索框数据
+        //data: _self.data,
+        theme: 'bootstrap',
+        placeholder: '需求模板',
+        minimumInputLength: 0,
+        placeholderOption: 'first',
+        quietMillis: 250,
+        allowClear: true,
+        language: 'zh-CN',
+        width: 'resolve',
+        // 请求搜索框数据
+        ajax: {
+          url: function(params) {
+            return Common.getApiURL('StockOutPrepateTemplateResource/queryByCondition');
+          },
+          dataType: 'json',
+          type: 'get',
+          delay: 250,
+          minimumInputLength: 0,
+          transport: function(params, success, failure) {
+            params.beforeSend = Common.addTokenToRequest;
+            var $request = $.ajax(params);
+            $request.then(success);
+            $request.fail(failure);
+            return $request;
+          },
+          data: function(params) {
+            return {
+              'name': params.term,
+            };
+          },
+          processResults: function(data, params) {
+            if(data.errorCode == 0) {
+              var more = (params * 10) <= data.datas.length;
+              for(var i = 0; i < data.datas.length; i++) {
+                data.datas[i].text = data.datas[i].name;
+              }
+              _self.stockOutPrepateTemplateNames = data.datas;
+              return {
+                results: data.datas,
+                more: more,
+              };
+            }
+          },
         },
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: successData => {
-          this.loading = false;
-          if (successData.errorCode === 0) {
-            if (successData.datas) {
-              this.inventoryInstanceDatas = successData.datas.map(item => ({
-                ...item,
-                checked: false,
-              }));
-              this.pagination.total = successData.total;
+      }).on('change', function() {
+        if($(this).val() == null) {
+          _self.stockOutPrepateTemplateId = undefined;
+          _self.clear();
+          _self.stockOutPrepateTemplateName = '';
+          storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
+          storage.setItem('stockOutPrepateTemplateName', _self.stockOutPrepateTemplateName);
+        } else {
+          _self.stockOutPrepateTemplateId = $(this).val();
+          for (var i = 0; i < _self.stockOutPrepateTemplateNames.length; i++) {
+            if (_self.stockOutPrepateTemplateNames[i].id == _self.stockOutPrepateTemplateId) {
+              _self.stockOutPrepateTemplateName = _self.stockOutPrepateTemplateNames[i].name;
             }
           }
-        },
-        error: errorData => {
-          this.loading = false;
-          Common.processException(errorData);
-        },
+          _self.clear();
+          storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
+          storage.setItem('stockOutPrepateTemplateName', _self.stockOutPrepateTemplateName);
+        }
       });
     },
-    loadSelectPositionBefore() {
-      this.loading = true;
-      $.ajax({
-        url: Common.getApiURL('positionResource/queryByCondition'),
-        type: 'get',
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: data => {
-          this.loading = false;
-          if (data.errorCode === 0) {
-            this.positionBefores = data.datas.map(item => ({
-              positionId: item.positionId,
-              positionNo: item.positionNo,
-            }));
-          }
-        },
-        error: errorData => {
-          this.loading = false;
-          Common.processException(errorData);
-        },
+ 
+    /**
+			 * 修改每页显示的数量
+			 * @param {Object} newPageSize
+			 */
+    gridSizeSelect: function(newPageSize) {
+      var _self = this;
+      this.pagination.per_page = newPageSize;
+      this.pagination.current_page = 1;
+      // 刷新界面
+
+      //清空这样显示数据
+      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
+				
+      //清空查询数据，重新查询数据
+      _self.stockOutPrepateTemplates.splice(0, _self.stockOutPrepateTemplates.length);
+				
+				
+      this.queryLines();
+    },
+
+    //查询领料模板详情
+    queryLines: function() {
+      var _self = this;
+      if(_self.projectItemId == undefined) {
+        Common.showDialog('提示', '请选择项目事件', 'error');
+        return;
+      }
+      if(_self.warehouseId == undefined) {
+        Common.showDialog('提示', '请选择仓库', 'error');
+        return;
+      }
+      if(_self.stockOutPrepateTemplateId == undefined) {
+        Common.showDialog('提示', '请选择需求模板', 'error');
+        return;
+      }
+      var param = {
+        warehouseId: _self.warehouseId,
+        projectItemId: _self.projectItemId,
+        stockOutPrepateTemplateDtoId: _self.stockOutPrepateTemplateId,
+      };
+      _self.loading=true;
+				
+      //清空这样显示数据
+      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
+				
+      StockOutPrepateTemplateResource.queryStockOutPrepateTemplateDto(param).then(successData =>{
+        if(successData.errorCode == 0) {
+          _self.pagination.total = successData.data.stockOutPrepateTemplateLineDtos.length;
+          _self.stockOutPrepateTemplates = successData.data.stockOutPrepateTemplateLineDtos;
+          _self.pagination.last_page = Math.ceil(successData.data.stockOutPrepateTemplateLineDtos.length / _self.pagination.per_page);
+          _self.getDatas();
+          _self.loading=false;
+        } else {
+          Notify.error('提示', successData.errorMessage, false);
+          return;
+        }
+      },errorData =>{
+        _self.loading=false;
+        Common.processException(errorData);
       });
+
+    },
+
+    getDatas: function() {
+      var _self = this;
+      var start = (_self.pagination.current_page - 1) * _self.pagination.per_page;
+      var end = start + _self.pagination.per_page;
+      //将录入的数据导过来
+      if(_self.pageStockOutPrepateTemplates != null && _self.pageStockOutPrepateTemplates.length > 0) {
+        for(var j = 0; j < _self.pageStockOutPrepateTemplates.length; j++) {
+          var index = _self.pageStockOutPrepateTemplates[j].index;
+          _self.stockOutPrepateTemplates[index].pickQuantity = _self.pageStockOutPrepateTemplates[j].pickQuantity;
+        }
+      }
+
+      //清空这样显示数据
+      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
+
+      //重新生成另一页的数据
+      for(var i = 0; i < _self.stockOutPrepateTemplates.length; i++) {
+        if(i >= start  && i < end) {						
+          var obj = {
+            inventoryName: _self.stockOutPrepateTemplates[i].inventoryName,
+            inventoryNo: _self.stockOutPrepateTemplates[i].inventoryNo,
+            inventoryType: _self.stockOutPrepateTemplates[i].inventoryType,
+            warehouseName: _self.stockOutPrepateTemplates[i].warehouseName,
+            currentStockQuantity: _self.stockOutPrepateTemplates[i].currentStockQuantity,
+            currentStockOutQuantity: _self.stockOutPrepateTemplates[i].currentStockOutQuantity,
+            currentStockCanPickQuantity: _self.stockOutPrepateTemplates[i].currentStockCanPickQuantity,
+            quantity: _self.stockOutPrepateTemplates[i].quantity,
+            pickQuantity: _self.stockOutPrepateTemplates[i].pickQuantity,
+            index: i,
+          };
+          _self.pageStockOutPrepateTemplates.push(obj);
+        }
+      }
+
     },
-    loadSelectPositionAfter() {
-      this.loading = true;
-      $.ajax({
-        url: Common.getApiURL('positionResource/queryByCondition'),
-        type: 'get',
-        beforeSend: request => Common.addTokenToRequest(request),
-        success: data => {
-          this.loading = false;
-          if (data.errorCode === 0) {
-            this.positionAfters = data.datas.map(item => ({
-              positionId: item.positionId,
-              positionNo: item.positionNo,
-            }));
+			
+    //清空
+    clear:function(){
+      var _self = this;
+      //清空这样显示数据
+      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
+      //清空记录数据
+      _self.stockOutPrepateTemplates.splice(0, _self.stockOutPrepateTemplates.length);
+				
+    },
+
+    //提交
+    save: function() {
+      var currentStock = [];
+      var num = 0;
+      var num3 = 0;
+      var num5 = 0;
+      var _self = this;
+      _self.getDatas();
+      this.stockOutPrepateTemplates.forEach(function(item) {
+
+        if(item.pickQuantity == undefined || item.pickQuantity == '') {
+          num++;
+        }
+        if(item.pickQuantity <= 0 && item.currentStockCanPickQuantity > 0) {
+          num5++;
+        }
+        if(item.pickQuantity > item.currentStockCanPickQuantity) {
+          num3++;
+        } else {
+          currentStock.push(item);
+        }
+
+      });
+      if(_self.projectItemId == undefined) {
+        Common.showDialog('提示', '请选择项目事件', 'error');
+        return;
+      }
+      if(_self.warehouseId == undefined) {
+        Common.showDialog('提示', '请选择仓库', 'error');
+        return;
+      }
+      if(_self.stockOutPrepateTemplateId == undefined) {
+        Common.showDialog('提示', '请选择需求模板', 'error');
+        return;
+      }
+      if(num > 0) {
+        Common.showDialog('提示', '请填写领用数量', 'error');
+        return;
+      }
+      if(num3 > 0) {
+        Common.showDialog('提示', '领用数量大于可领数量', 'error');
+        return;
+      }
+      if(num5 > 0) {
+        Common.showDialog('提示', '填写的领用数量必须大于零', 'error');
+        return;
+      }
+
+      var param = {
+        projectItemId: _self.projectItemId,
+        warehouseId: _self.warehouseId,
+        stockOutPrepateTemplateId: _self.stockOutPrepateTemplateId,
+        pickingCarDtoList: currentStock,
+      };
+      _self.loading=true;
+      if(currentStock.length > 0) {
+					
+					
+        StockOutPrepareResource.saveByTemplate(param).then(successData =>{
+          if(successData.errorCode == 0) {
+            Notify.success('成功', '领料成功', 4000);
+            //清空这样显示数据
+            _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
+            _self.stockOutPrepateTemplates.splice(0,_self.stockOutPrepateTemplates.length);
+            _self.loading=false;
+          } else {
+            Notify.error('提示', successData.errorMessage, false);
+            return;
           }
-        },
-        error: errorData => {
-          this.loading = false;
+        },errorData =>{
+          _self.loading=false;
           Common.processException(errorData);
-        },
-      });
+        });
+
+      } else {
+        _self.loading=false;
+        Common.showDialog('提示', '请选择要提交的内容', 'error');
+      }
     },
+			
   },
 };
 </script>
 
 <style scoped>
-.adjust-positions-container {
-  padding: 24px;
+.form-inline .form-group label {
+    width: 80px;
+    text-align: right;
+    padding-right: 5px;
 }
 
-.search-form {
-  margin-bottom: 24px;
+.form-inline .form-group input,
+.form-inline .form-group select {
+    width: 200px;
+}
+</style>
+
+<style scoped>
+	.flex-container {
+		display: flex;
+		/* 垂直*/
+		flex-direction: column;
+		width: 100%;
+		/*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
+		height: calc(100vh - 85px);
+	}
+	
+	.flex-header {
+		height: 200px;
+		/*放大缩小比例为0 */
+		flex: 0 0 100px;
+	}
+	
+	.flex-footer {
+		margin-top: 0.8em;
+		height: 35px;
+		/*放大缩小比例为0 */
+		flex: 0 0 35px;
+	}
+	
+	.flex-content {
+		margin-top: 0.8em;
+  flex: 1;
+  overflow: scroll;
+  width: 100%;
+  height: 0;
+	}
+</style>
+<style scoped>
+.fixed-table {
+    table-layout: fixed;
+    width: 800px !important;
+    min-width: 800px !important;
 }
 
-.image {
-  width: 40px;
-  height: 40px;
+table.fixed-table tr {
+    height: 40px;
 }
 
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 24px;
+table.fixed-table th,
+table.fixed-table td {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 </style>

src/pick/StockOutPrepareLineProjectReceivingAddress.vue

@@ -428,6 +428,4 @@ export default {
   margin-top: 24px;
   text-align: right;
 }
-
-/* 删除所有bootstrap相关样式 */
 </style>

src/pick/StockOutPrepareLineProjectShippingAddress.vue

@@ -403,7 +403,6 @@ export default {
 };
 </script>
 <style scoped>
-/* 清除所有bootstrap相关样式 */
 .header {
   background: #fff;
   padding: 0;

src/pick/StockOutPrepareTemplateApproved.vue

@@ -1,633 +1,427 @@
 <template>
-  <div>
-    <div class="flex-container">
-      <div class="flex-header">
-        <StockOutPrepareTemplateHeader active-index="3" />
-        <div class="form-inline">
-          <div class="form-group">
-            <label for="projectItem">
-              <span class="text-danger"> * </span>
-              项目事件
-            </label>
-            <select id="projectItem" class="form-control" />
-          </div>
-          <div class="form-group">
-            <label for="stockOutPrepateTemplate">
-              <span class="text-danger"> * </span>
-              需求模板
-            </label>
-            <select id="stockOutPrepateTemplate" class="form-control" />
-          </div>
-          <div class="form-group">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="getStockOutPrepareDatas"
+  <div class="container">
+    <!-- 顶部导航和搜索区域 -->
+    <div class="header">
+      <StockOutPrepareTemplateHeader active-index="3" />
+      <a-form layout="inline" class="search-form">
+        <a-form-item label="项目事件">
+          <a-select
+            v-model:value="projectItemId"
+            style="width: 220px"
+            show-search
+            allow-clear
+            @change="handleProjectItemChange"
+          >
+            <a-select-option
+              v-for="item in projectItems"
+              :key="item.id"
+              :value="item.id"
             >
-              查询
-            </button>
-          </div>
-        </div>
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="需求模板">
+          <a-select
+            v-model:value="stockOutPrepateTemplateId"
+            style="width: 220px"
+            show-search
+            allow-clear
+            @change="handleTemplateChange"
+          >
+            <a-select-option
+              v-for="item in stockOutPrepateTemplateNames"
+              :key="item.id"
+              :value="item.id"
+            >
+              {{ item.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary" @click="getStockOutPrepareDatas">
+            查询
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 左侧领料单据列表 -->
+      <div class="left-sidebar">
+        <a-space>
+          <a-button @click="previousPage">上一页</a-button>
+          <a-button @click="nextPage">下一页</a-button>
+        </a-space>
+        <a-list
+          bordered
+          :data-source="stockOutPrepares"
+          :item-layout="false"
+        >
+          <template #item="{ item }">
+            <a-list-item
+              :class="{ active: item === selectedStockOutPrepare }"
+              @click="setStockOutPrepare(item)"
+            >
+              {{ item.documentNo }}({{ item.stockOutPrepateTemplateName }})
+            </a-list-item>
+          </template>
+        </a-list>
       </div>
-      <div class="flex-content">
-        <!--左列,显示领料单据-->
-        <div class="flex-aside">
-          <div>
-            <nav>
-              <ul class="pager" style="margin: 5px 0">
-                <li>
-                  <a
-                    href="javascript:void(0)"
-                    class="pull-left"
-                    @click="previousPage"
-                  >上一页</a>
-                </li>
-                <li>
-                  <a
-                    href="javascript:void(0)"
-                    class="pull-right"
-                    @click="nextPage"
-                  >下一页</a>
-                </li>
-              </ul>
-            </nav>
-            <div class="list-group">
-              <template
-                v-for="stockOutPrepare in stockOutPrepares"
-                :key="stockOutPrepare.id"
-              >
-                <a
-                  href="javascript:void(0)"
-                  class="list-group-item"
-                  :class="{
-                    active: stockOutPrepare === selectedStockOutPrepare,
-                  }"
-                  @click="setStockOutPrepare(stockOutPrepare)"
-                >{{ stockOutPrepare.documentNo }}({{
-                  stockOutPrepare.stockOutPrepateTemplateName
-                }})</a>
-              </template>
-            </div>
-          </div>
-        </div>
-        <!--右列,显示领料详情-->
-        <div class="flex-main">
-          <table class="fixed-table table table-striped table-bordered">
-            <thead>
-              <tr>
-                <td style="width: 40px">序号</td>
-                <td style="width: 140px">物料编码</td>
-                <td style="width: 140px">物料名称</td>
-                <td style="width: 140px">规格型号</td>
-                <td style="width: 120px">需求数量</td>
-                <td style="width: 120px">领用数量</td>
-                <td style="width: 100px">状态</td>
-              </tr>
-            </thead>
-            <tbody v-if="stockOutPrepareLines.length > 0">
-              <tr
-                v-for="(item, index) in stockOutPrepareLines"
-                :key="item.inventoryId"
+
+      <!-- 右侧领料详情表格 -->
+      <div class="right-content">
+        <a-table
+          :columns="columns"
+          :data-source="stockOutPrepareLines"
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'inventoryStatus'">
+              <a-tag
+                :color="record.inventoryStatus === 2 ? 'blue' : 'red'"
               >
-                <td>{{ index + 1 }}</td>
-                <td>{{ item.inventoryNo }}</td>
-                <td>{{ item.inventoryName }}</td>
-                <td>{{ item.inventoryType }}</td>
-                <td>{{ item.needQuantity }}</td>
-                <td>{{ item.quantity }}</td>
-                <td
-                  v-if="item.inventoryStatus == 2"
-                  style="background: deepskyblue"
-                >
-                  已拣货
-                </td>
-                <td v-if="item.inventoryStatus == 1" style="background: red">
-                  未拣货
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="flex-footer">
-        <div class="pull-left">
-          <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-            pagination.current_page * pagination.per_page
-          }}条,共计{{ pagination.total }}条,每页显示</span>
-          <PageSizeSelect @page-size-changed="gridSizeSelect" />
-          <span>条</span>
-        </div>
-        <div class="pull-right">
-          <VueBootstrapPagination
-            v-if="pagination.last_page > 0"
-            :pagination="pagination"
-            :callback="getStockOutPrepareLineDatas"
-          />
-        </div>
+                {{ record.inventoryStatus === 2 ? '已拣货' : '未拣货' }}
+              </a-tag>
+            </template>
+          </template>
+        </a-table>
       </div>
     </div>
-    <div>
-      <Loading v-if="loading" />
+
+    <!-- 分页信息区域 -->
+    <div class="footer">
+      <div class="pagination-info">
+        <span>
+          第{{ (pagination.current - 1) * pagination.pageSize + 1 }}-{{
+            pagination.current * pagination.pageSize
+          }}条, 共计{{ pagination.total }}条, 每页显示
+        </span>
+        <a-select
+          v-model:value="pagination.pageSize"
+          style="width: 80px"
+          @change="gridSizeSelect"
+        >
+          <a-select-option value="10">10</a-select-option>
+          <a-select-option value="20">20</a-select-option>
+          <a-select-option value="50">50</a-select-option>
+        </a-select>
+        <span>条</span>
+      </div>
+      <div class="pagination-controls">
+        <a-pagination
+          v-if="pagination.total > 0"
+          :current="pagination.current"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          @change="getStockOutPrepareLineDatas"
+        />
+      </div>
     </div>
+
+    <!-- 加载状态 -->
+    <a-spin v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-
-
-
 import StockOutPrepareResource from '../api/wms/StockOutPrepareResource.js';
 import StockOutPrepareLineResource from '../api/wms/StockOutPrepareLineResource.js';
-
-
-
 import StockOutPrepareTemplateHeader from './StockOutPrepareTemplateHeader.vue';
 
 export default {
   components: {
-    
-    
-    
-    
-    
-    
     StockOutPrepareTemplateHeader,
-    
   },
-  data: function () {
+  data() {
     return {
-      stockOutPrepareLines: [], //详单对应的数据
-      stockOutPrepares: [], //领料主单数据
-      documentType: 1, //模板领料
-      documentStatus: 'APPROVED', //审批通过的领料单据
+      stockOutPrepareLines: [],
+      stockOutPrepares: [],
+      documentType: 1,
+      documentStatus: 'APPROVED',
       stockOutPrepateTemplateId: undefined,
       projectItemId: undefined,
       stockOutPrepareId: undefined,
       selectedStockOutPrepare: undefined,
       pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        pageSize: Common.pageSize,
+        current: 1,
       },
       pagination2: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        pageSize: Common.pageSize,
+        current: 1,
       },
-      hot: '',
-      projectItemName: '',
-      stockOutPrepateTemplateName: '',
       projectItems: [],
       stockOutPrepateTemplateNames: [],
       userId: undefined,
       loading: false,
     };
   },
+  computed: {
+    columns() {
+      return [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          customRender: (_, __, index) => index + 1,
+        },
+        {
+          title: '物料编码',
+          dataIndex: 'inventoryNo',
+        },
+        {
+          title: '物料名称',
+          dataIndex: 'inventoryName',
+        },
+        {
+          title: '规格型号',
+          dataIndex: 'inventoryType',
+        },
+        {
+          title: '需求数量',
+          dataIndex: 'needQuantity',
+        },
+        {
+          title: '领用数量',
+          dataIndex: 'quantity',
+        },
+        {
+          title: '状态',
+          dataIndex: 'inventoryStatus',
+        },
+      ];
+    },
+  },
   watch: {},
-
-  created: function () {
+  created() {
     if (!window.localStorage) {
       alert('浏览器不支持localstorage');
     } else {
-      var storage = window.localStorage;
+      const storage = window.localStorage;
       this.projectItemId = storage.getItem('projectItemId');
       this.projectItemName = storage.getItem('projectItemName');
-      this.stockOutPrepateTemplateId = storage.getItem(
-        'stockOutPrepateTemplateId',
-      );
-      this.stockOutPrepateTemplateName = storage.getItem(
-        'stockOutPrepateTemplateName',
-      );
+      this.stockOutPrepateTemplateId = storage.getItem('stockOutPrepateTemplateId');
+      this.stockOutPrepateTemplateName = storage.getItem('stockOutPrepateTemplateName');
     }
   },
-
-  mounted: function () {
+  mounted() {
     this.loadSelectProjectItem();
     this.loadSelectTemplate();
     this.getLocalStorage();
-    if (this.projectItemId != null) {
-      var projectItem = new Option(this.projectItemName, this.projectItemId);
-      $('#projectItem').append(projectItem);
-    }
-    if (this.stockOutPrepateTemplateId != null) {
-      var stockOutPrepateTemplate = new Option(
-        this.stockOutPrepateTemplateName,
-        this.stockOutPrepateTemplateId,
-      );
-      $('#stockOutPrepateTemplate').append(stockOutPrepateTemplate);
-    }
     if (this.projectItemId != null) {
       this.getStockOutPrepareDatas();
     }
-
-    $('.fixed-table').tableFixer({ left: 3, head: true });
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
   },
-
   methods: {
-    // 获取localStorage
-    getLocalStorage: function () {
-      var storage = localStorage;
+    getLocalStorage() {
+      const storage = localStorage;
       if (!storage) {
         alert('浏览器不支持localstorage');
       } else {
-        var json = storage.getItem('#LoginInfo');
+        const json = storage.getItem('#LoginInfo');
         this.loginInfo = JSON.parse(json);
         this.userId = this.loginInfo.userId;
       }
     },
 
-    /**
-     * 点击选择领料单事件
-     */
-    setStockOutPrepare: function (item) {
-      var _self = this;
-      _self.selectedStockOutPrepare = item;
-      _self.stockOutPrepareId = item.stockOutPrepareId;
-      _self.pagination.current_page = 1; //当主单选择改变时。详单页数改为第一个
-      //查询对应详单数据
-      _self.getStockOutPrepareLineDatas();
+    setStockOutPrepare(item) {
+      this.selectedStockOutPrepare = item;
+      this.stockOutPrepareId = item.stockOutPrepareId;
+      this.pagination.current = 1;
+      this.getStockOutPrepareLineDatas();
     },
-    /**
-     * 项目事件
-     */
-    loadSelectProjectItem: function () {
-      var _self = this;
-      $('#projectItem')
-        .select2({
-          // 请求搜索框数据
-          //data: _self.data,
-          theme: 'bootstrap',
-          placeholder: '项目事件',
-          minimumInputLength: 0,
-          placeholderOption: 'first',
-          quietMillis: 250,
-          allowClear: true,
-          language: 'zh-CN',
-          width: 'resolve',
-          // 请求搜索框数据
-          ajax: {
-            url: function (params) {
-              return Common.getApiURL('ProjectItemResource/queryByCondition');
-            },
-            dataType: 'json',
-            type: 'get',
-            delay: 250,
-            minimumInputLength: 0,
-            transport: function (params, success, failure) {
-              params.beforeSend = Common.addTokenToRequest;
-              var $request = $.ajax(params);
-              $request.then(success);
-              $request.fail(failure);
-              return $request;
-            },
-            data: function (params) {
-              return {
-                name: params.term,
-              };
-            },
-            processResults: function (data, params) {
-              if(data.errorCode == 0) {
-                var more = params * 10 <= data.datas.length;
-                for (var i = 0; i < data.datas.length; i++) {
-                  data.datas[i].text = data.datas[i].name;
-                }
-                _self.projectItems = data.datas;
-                return {
-                  results: data.datas,
-                  more: more,
-                };
-              }
-            },
-          },
-        })
-        .on('change', function () {
-          if ($(this).val() == null) {
-            _self.projectItemId = undefined;
-            var storage = window.localStorage;
-            storage.setItem('projectItemId', _self.projectItemId);
-            _self.projectItemName = '';
-            storage.setItem('projectItemName', _self.projectItemName);
-          } else {
-            _self.projectItemId = $(this).val();
-            for (var i = 0; i < _self.projectItems.length; i++) {
-              if (_self.projectItems[i].id == _self.projectItemId) {
-                _self.projectItemName = _self.projectItems[i].name;
-              }
-            }
-            storage.setItem('projectItemId', _self.projectItemId);
-            storage.setItem('projectItemName', _self.projectItemName);
-            _self.getStockOutPrepareDatas();
+
+    loadSelectProjectItem() {
+      const _self = this;
+      StockOutPrepareResource.queryProjectItems()
+        .then(data => {
+          if (data.errorCode === 0) {
+            _self.projectItems = data.datas;
           }
+        })
+        .catch(errorData => {
+          Common.processException(errorData);
         });
     },
 
-    /**
-     * 需求模板
-     */
-    loadSelectTemplate: function () {
-      var _self = this;
-      $('#stockOutPrepateTemplate')
-        .select2({
-          // 请求搜索框数据
-          //data: _self.data,
-          theme: 'bootstrap',
-          placeholder: '需求模板',
-          minimumInputLength: 0,
-          placeholderOption: 'first',
-          quietMillis: 250,
-          allowClear: true,
-          language: 'zh-CN',
-          width: 'resolve',
-          // 请求搜索框数据
-          ajax: {
-            url: function (params) {
-              return Common.getApiURL(
-                'StockOutPrepateTemplateResource/queryByCondition',
-              );
-            },
-            dataType: 'json',
-            type: 'get',
-            delay: 250,
-            minimumInputLength: 0,
-            transport: function (params, success, failure) {
-              params.beforeSend = Common.addTokenToRequest;
-              var $request = $.ajax(params);
-              $request.then(success);
-              $request.fail(failure);
-              return $request;
-            },
-            data: function (params) {
-              return {
-                name: params.term,
-              };
-            },
-            processResults: function (data, params) {
-              if(data.errorCode == 0) {
-                var more = params * 10 <= data.datas.length;
-                for (var i = 0; i < data.datas.length; i++) {
-                  data.datas[i].text = data.datas[i].name;
-                }
-                _self.stockOutPrepateTemplateNames = data.datas;
-                return {
-                  results: data.datas,
-                  more: more,
-                };
-              }
-            },
-          },
-        })
-        .on('change', function () {
-          if ($(this).val() == null) {
-            _self.stockOutPrepateTemplateId = undefined;
-            var storage = window.localStorage;
-            _self.stockOutPrepateTemplateName = '';
-            storage.setItem(
-              'stockOutPrepateTemplateId',
-              _self.stockOutPrepateTemplateId,
-            );
-            storage.setItem(
-              'stockOutPrepateTemplateName',
-              _self.stockOutPrepateTemplateName,
-            );
-          } else {
-            _self.stockOutPrepateTemplateId = $(this).val();
-            for (
-              var i = 0;
-              i < _self.stockOutPrepateTemplateNames.length;
-              i++
-            ) {
-              if (
-                _self.stockOutPrepateTemplateNames[i].id ==
-                _self.stockOutPrepateTemplateId
-              ) {
-                _self.stockOutPrepateTemplateName =
-                  _self.stockOutPrepateTemplateNames[i].name;
-              }
-            }
-            storage.setItem(
-              'stockOutPrepateTemplateId',
-              _self.stockOutPrepateTemplateId,
-            );
-            storage.setItem(
-              'stockOutPrepateTemplateName',
-              _self.stockOutPrepateTemplateName,
-            );
-            _self.getStockOutPrepareDatas();
+    loadSelectTemplate() {
+      const _self = this;
+      StockOutPrepareResource.queryTemplates()
+        .then(data => {
+          if (data.errorCode === 0) {
+            _self.stockOutPrepateTemplateNames = data.datas;
           }
+        })
+        .catch(errorData => {
+          Common.processException(errorData);
         });
     },
 
-    /**
-     * 修改领料详情每页显示的数量
-     * @param {Object} newPageSize
-     */
-    gridSizeSelect: function (newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      // 刷新界面
+    gridSizeSelect(newPageSize) {
+      this.pagination.pageSize = newPageSize;
+      this.pagination.current = 1;
       this.getStockOutPrepareLineDatas();
     },
 
-    /**
-     * 领料主单上一页
-     */
-    previousPage: function () {
-      var _self = this;
-      if (_self.pagination2.current_page == 1) {
+    previousPage() {
+      if (this.pagination2.current === 1) {
         Common.showDialog('提示', '已经是第一页了', 'error');
         return;
       }
-      _self.pagination2.current_page = _self.pagination2.current_page - 1;
-      _self.getStockOutPrepareDatas();
+      this.pagination2.current--;
+      this.getStockOutPrepareDatas();
     },
 
-    /**
-     * 领料主单下一页
-     */
-    nextPage: function () {
-      var _self = this;
-      if (
-        (_self.pagination2.current_page =
-          _self.pagination2.last_page || _self.pagination2.last_page == 0)
-      ) {
+    nextPage() {
+      if (this.pagination2.current === this.pagination2.totalPages) {
         Common.showDialog('提示', '已经是最后一页了', 'error');
         return;
       }
-      _self.pagination2.current_page = _self.pagination2.current_page + 1;
-      _self.getStockOutPrepareDatas();
+      this.pagination2.current++;
+      this.getStockOutPrepareDatas();
     },
 
-    //查询领料主单数据
-    getStockOutPrepareDatas: function () {
-      var _self = this;
-      var param = {
-        start:
-          (_self.pagination2.current_page - 1) * _self.pagination2.per_page,
-        length: _self.pagination2.per_page,
-        projectItemId: _self.projectItemId,
-        documentType: _self.documentType,
-        documentStatus: _self.documentStatus,
-        stockOutPrepateTemplateId: _self.stockOutPrepateTemplateId,
-        userId: _self.userId,
+    getStockOutPrepareDatas() {
+      const _self = this;
+      const param = {
+        start: (this.pagination2.current - 1) * this.pagination2.pageSize,
+        length: this.pagination2.pageSize,
+        projectItemId: this.projectItemId,
+        documentType: this.documentType,
+        documentStatus: this.documentStatus,
+        stockOutPrepateTemplateId: this.stockOutPrepateTemplateId,
+        userId: this.userId,
         loadLines: false,
       };
-      _self.loading=true;
+      this.loading = true;
 
-      StockOutPrepareResource.list(param).then(
-        successData => {
-          if(successData.errorCode == 0) {
-            _self.loading=false;
+      StockOutPrepareResource.list(param)
+        .then(successData => {
+          if (successData.errorCode === 0) {
+            _self.loading = false;
             _self.pagination2.total = successData.total;
+            _self.pagination2.totalPages = Math.ceil(successData.total / successData.length);
             _self.stockOutPrepares = successData.datas;
             _self.frist();
             _self.stockOutPrepareLines = [];
-            _self.pagination2.last_page = Math.ceil(
-              successData.total / successData.length,
-            );
           } else {
             Notify.error('提示', successData.errorMessage, false);
           }
-        },
-        errorData => {
-          _self.loading=false;
+        })
+        .catch(errorData => {
+          _self.loading = false;
           Common.processException(errorData);
-        },
-      );
+        });
     },
 
-    /**
-     * 首次进入此页面显示第一个的详情
-     */
-    frist: function () {
-      var _self = this;
-      if (_self.stockOutPrepares != null && _self.stockOutPrepares.length > 0) {
-        _self.setStockOutPrepare(_self.stockOutPrepares[0]);
+    frist() {
+      if (this.stockOutPrepares.length > 0) {
+        this.setStockOutPrepare(this.stockOutPrepares[0]);
       }
     },
 
-    //查询领料详单数据
-    getStockOutPrepareLineDatas: function () {
-      var _self = this;
-      if (_self.stockOutPrepareId == undefined) {
+    getStockOutPrepareLineDatas() {
+      if (this.stockOutPrepareId === undefined) {
         Common.showDialog('提示', '请选择要查看的领料主单', 'error');
         return;
       }
-      var param = {
-        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
-        length: _self.pagination.per_page,
-        stockOutPrepareId: _self.stockOutPrepareId,
+      const param = {
+        start: (this.pagination.current - 1) * this.pagination.pageSize,
+        length: this.pagination.pageSize,
+        stockOutPrepareId: this.stockOutPrepareId,
       };
-      _self.loading=true;
-
-      StockOutPrepareLineResource.queryByStockoutPrepare(param).then(
-        successData => {
-          if(successData.errorCode == 0) {
-            _self.loading=false;
-            _self.fixedTableHeader();
-            _self.pagination.total = successData.total;
-            _self.stockOutPrepareLines = successData.datas;
-            _self.pagination.last_page = Math.ceil(
-              successData.total / successData.length,
-            );
+      this.loading = true;
+
+      StockOutPrepareLineResource.queryByStockoutPrepare(param)
+        .then(successData => {
+          if (successData.errorCode === 0) {
+            this.loading = false;
+            this.pagination.total = successData.total;
+            this.stockOutPrepareLines = successData.datas;
           } else {
             Notify.error('提示', successData.errorMessage, false);
-            return;
           }
-        },
-        errorData => {
-          _self.loading=false;
+        })
+        .catch(errorData => {
+          this.loading = false;
           Common.processException(errorData);
-        },
-      );
+        });
+    },
+
+    handleTableChange(pagination) {
+      this.pagination.current = pagination.current;
+      this.getStockOutPrepareLineDatas();
+    },
+
+    handleProjectItemChange(value) {
+      this.projectItemId = value;
+      this.getStockOutPrepareDatas();
     },
 
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({ left: 3, head: true });
-      });
+    handleTemplateChange(value) {
+      this.stockOutPrepateTemplateId = value;
+      this.getStockOutPrepareDatas();
     },
   },
 };
 </script>
 
-
-<style scoped>
-.form-inline .form-group label {
-  width: 80px;
-  text-align: right;
-  padding-right: 5px;
-}
-
-.form-inline .form-group input,
-.form-inline .form-group select {
-  width: 200px;
-}
-</style>
-
 <style scoped>
-.flex-container {
+.container {
   display: flex;
-  /* 垂直*/
   flex-direction: column;
-  width: 100%;
-  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-  height: calc(100vh - 70px);
+  height: 100vh;
 }
 
-.flex-header {
-  /*放大缩小比例为0 */
-  height: 400px;
-  flex: 0 0 100px;
+.header {
+  padding: 20px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
-.flex-footer {
-  margin-top: 0.8em;
-  height: 40px;
-  flex: 0 0 40px;
-}
-
-.flex-content {
-  display: flex;
+.main-content {
   flex: 1;
-  overflow: auto;
+  display: flex;
+  overflow: hidden;
 }
 
-.flex-aside {
+.left-sidebar {
   flex: 0 0 300px;
+  padding: 20px;
+  border-right: 1px solid #f0f0f0;
+  overflow-y: auto;
 }
 
-.flex-main {
-  overflow: scroll;
+.right-content {
   flex: 1;
+  padding: 20px;
+  overflow-y: auto;
 }
-</style>
-<style scoped>
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
+
+.footer {
+  padding: 20px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-table.fixed-table tr {
-  height: 40px;
+.pagination-info {
+  display: flex;
+  align-items: center;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.pagination-controls {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.active {
+  background-color: #e6f7ff;
 }
 </style>

src/pick/StockOutPrepareTemplateHeader.vue

@@ -1,33 +1,49 @@
 <template>
-  <ul class="nav nav-tabs nav-justified" style="margin-bottom: 10px;">
-    <li role="presentation" :class="{'active' : activeIndex == 1}">
-      <a href="#/desktop/stockOutPrepateTemplate">1.模板领用</a>
-    </li>
-    <li role="presentation" :class="{'active' : activeIndex == 2}">
-      <a href="#/desktop/stockOutPrepateTemplateRecording">2.待拣货模板领用单</a>
-    </li>
-    <li role="presentation" :class="{'active' : activeIndex == 3}">
-      <a href="#/desktop/stockOutPrepareTemplateApproved">3.已拣货模板领用单</a>
-    </li>
-  </ul>
+  <a-tabs 
+    v-model:activeKey="activeKey"
+    type="card"
+    class="custom-tabs"
+    @change="handleTabChange"
+  >
+    <a-tab-pane key="1" tab="模板领用" />
+    <a-tab-pane key="2" tab="待拣货模板领用单" />
+    <a-tab-pane key="3" tab="已拣货模板领用单" />
+  </a-tabs>
 </template>
 
-
 <script>
-
 export default {
-  
   props: {
     activeIndex: {
       type: Number,
-      default: null,
+      default: 1,
     },
   },
-
-  data: function () {
-    return {
-            
-    };
+  computed: {
+    activeKey: {
+      get() {
+        return String(this.activeIndex);
+      },
+      set(val) {
+        this.$emit('update:activeIndex', Number(val));
+      },
+    },
+  },
+  methods: {
+    handleTabChange(key) {
+      const routes = [
+        '/wms/stockOutPrepateTemplate',
+        '/wms/stockOutPrepateTemplateRecording',
+        '/wms/stockOutPrepareTemplateApproved',
+      ];
+      this.$router.push(routes[key - 1]);
+    },
   },
 };
-</script>
+</script>
+
+<style scoped>
+.custom-tabs {
+  margin-bottom: 16px;
+}
+</style>

src/pick/StockOutPrepateTemplate.vue

@@ -1,112 +1,136 @@
 <template>
   <div>
-    <div class=" flex-container">
-      <div class=" flex-header">
+    <div class="flex-container">
+      <!-- 头部搜索区域 -->
+      <div class="flex-header">
         <StockOutPrepareTemplateHeader active-index="1" />
-        <div class="form-inline">
-          <div class="form-group">
-            <label for="projectItem">
-              <span class="text-danger">
-                *
-              </span>
-              项目事件
-            </label>
-            <select id="projectItem" class="form-control" />
-          </div>
-          <div class="form-group">
-            <label for="warehouse">
-              <span class="text-danger">
-                *
-              </span>
-              仓库
-            </label>
-            <select id="warehouse" class="form-control" />
-          </div>
-          <div class="form-group">
-            <label for="stockOutPrepateTemplate">
-              <span class="text-danger">
-                *
-              </span>
-              需求模板
-            </label>
-            <select id="stockOutPrepateTemplate" class="form-control" />
-          </div>
-          <div class="form-group">
-            <button type="button" class="btn btn-primary" @click="queryLines">查询</button>
-            <button type="button" class="btn btn-info" @click="clear">清空</button>
-            <button type="button" class="btn btn-success" @click="save">确定领料</button>
-          </div>
-        </div>
+        <a-form layout="inline" class="search-form">
+          <a-form-item label="项目事件">
+            <a-select
+              v-model:value="projectItemId"
+              style="width: 220px"
+              show-search
+              allow-clear
+              @change="handleProjectItemChange"
+            >
+              <a-select-option
+                v-for="item in projectItems"
+                :key="item.id"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="仓库">
+            <a-select
+              v-model:value="warehouseId"
+              style="width: 220px"
+              allow-clear
+              @change="handleWarehouseChange"
+            >
+              <a-select-option
+                v-for="item in warehouses"
+                :key="item.id"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="需求模板">
+            <a-select
+              v-model:value="stockOutPrepateTemplateId"
+              style="width: 220px"
+              show-search
+              allow-clear
+              @change="handleTemplateChange"
+            >
+              <a-select-option
+                v-for="item in stockOutPrepateTemplateNames"
+                :key="item.id"
+                :value="item.id"
+              >
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button @click="queryLines">查询</a-button>
+            <a-button @click="clear">清空</a-button>
+            <a-button type="primary" @click="save">确定领料</a-button>
+          </a-form-item>
+        </a-form>
       </div>
-      <div class=" flex-content">				
-        <table class="fixed-table table table-responsive table-bordered">
-          <thead>
-            <tr>
-              <td style="width: 150px;">物料编码</td>
-              <td style="width: 200px;">物料名称</td>
-              <td style="width: 150px;">规格型号</td>
-              <td style="width: 120px;">库存数量</td>
-              <td style="width: 150px;">待出库数量</td>
-              <td style="width: 150px;">可领用数量</td>
-              <td style="width: 120px;">需求数量</td>
-              <td style="width: 120px;">领用数量</td>
-            </tr>
-          </thead>
-          <tbody v-if="pageStockOutPrepateTemplates.length>0">
-            <tr v-for="item in pageStockOutPrepateTemplates" :key="item.inventoryId" :class="{'danger' : item.currentStockCanPickQuantity < item.pickQuantity}">
-              <td>{{ item.inventoryNo }}</td>
-              <td>{{ item.inventoryName }}</td>
-              <td>{{ item.inventoryType }}</td>
-              <td>{{ item.currentStockQuantity }}</td>
-              <td>{{ item.currentStockOutQuantity }}</td>
-              <td>{{ item.currentStockCanPickQuantity }}</td>
-              <td>{{ item.quantity }}</td>
-              <td><input v-model="item.pickQuantity" autocomplete="off" type="number" class="form-control" placeholder="领料数量" aria-describedby="basic-addon1" /></td>
-            </tr>
-          </tbody>
-        </table>
+      <!-- 表格区域 -->
+      <div class="flex-content">
+        <a-table
+          :columns="columns"
+          :data-source="pageStockOutPrepateTemplates"
+          :pagination="pagination"
+          :loading="loading"
+          @change="handleTableChange"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'pickQuantity'">
+              <a-input-number
+                v-model:value="record.pickQuantity"
+                :min="0"
+                :max="record.currentStockCanPickQuantity"
+                @change="handlePickQuantityChange(record)"
+              />
+            </template>
+          </template>
+        </a-table>
       </div>
-      <div class=" flex-footer">
+      <!-- 分页信息区域 -->
+      <div class="flex-footer">
         <div class="pull-left">
-          <span>第{{ (pagination.current_page-1)*pagination.per_page+1 }}-{{ pagination.current_page*pagination.per_page }}条,共计{{ pagination.total }}条,每页显示</span>
-          <PageSizeSelect @page-size-changed="gridSizeSelect" />
+          <span>
+            第{{ (pagination.current - 1) * pagination.pageSize + 1 }}-{{ pagination.current * pagination.pageSize }}条,
+            共计{{ pagination.total }}条,
+            每页显示
+          </span>
+          <a-select
+            v-model:value="pagination.pageSize"
+            style="width: 80px"
+            @change="gridSizeSelect"
+          >
+            <a-select-option value="10">10</a-select-option>
+            <a-select-option value="20">20</a-select-option>
+            <a-select-option value="50">50</a-select-option>
+          </a-select>
           <span>条</span>
         </div>
         <div class="pull-right">
-          <VueBootstrapPagination v-if="pagination.last_page > 0" :pagination="pagination" :callback="getDatas" />
+          <a-pagination
+            v-if="pagination.total > 0"
+            :current="pagination.current"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            @change="getDatas"
+          />
         </div>
       </div>
     </div>
+    <!-- 加载状态 -->
     <div>
-      <Loading v-if="loading" />
+      <a-spin v-if="loading" />
     </div>
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-
-
-
 import StockOutPrepareResource from '../api/wms/StockOutPrepareResource.js';
 import StockOutPrepateTemplateResource from '../api/wms/StockOutPrepateTemplateResource.js';
-
-
-
 import StockOutPrepareTemplateHeader from './StockOutPrepareTemplateHeader.vue';
 
 export default {
   components: {
-    
-    
-    
-    
-    
-    
-    
     StockOutPrepareTemplateHeader,
   },
-  data: function() {
+  data() {
     return {
       stockOutPrepateTemplates: [],
       pageStockOutPrepateTemplates: [],
@@ -115,40 +139,65 @@ export default {
       projectItemId: undefined,
       pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        pageSize: Common.pageSize,
+        current: 1,
       },
-      hot: '',
-      count: 0,
-      storageLife: undefined,
-      checked: false,
-      page: 20,
-      length: undefined,
-      start: undefined,
-      stockOutPrepateTemplateName:'',
-      warehouseName: '',
-      projectItemName: '',
-      projectItems:[],
-      warehouses:[],
-      stockOutPrepateTemplateNames:[],
+      projectItems: [],
+      warehouses: [],
+      stockOutPrepateTemplateNames: [],
       loading: false,
-
     };
   },
+  computed: {
+    columns() {
+      return [
+        {
+          dataIndex: 'inventoryNo',
+          title: '物料编码',
+        },
+        {
+          dataIndex: 'inventoryName',
+          title: '物料名称',
+        },
+        {
+          dataIndex: 'inventoryType',
+          title: '规格型号',
+        },
+        {
+          dataIndex: 'currentStockQuantity',
+          title: '库存数量',
+        },
+        {
+          dataIndex: 'currentStockOutQuantity',
+          title: '待出库数量',
+        },
+        {
+          dataIndex: 'currentStockCanPickQuantity',
+          title: '可领用数量',
+        },
+        {
+          dataIndex: 'quantity',
+          title: '需求数量',
+        },
+        {
+          dataIndex: 'pickQuantity',
+          title: '领用数量',
+        },
+      ];
+    },
+  },
   watch: {
-    'page': function(curVal, oldVal) {
-      if(curVal != undefined) {
+    'pagination.pageSize': function (curVal, oldVal) {
+      if (curVal !== undefined) {
         this.getDatas();
       }
     },
   },
-
-  created: function() {
-    if(!window.localStorage) {
+  created() {
+    if (!window.localStorage) {
       alert('浏览器不支持localstorage');
     } else {
-      var storage = window.localStorage;
+      const storage = window.localStorage;
       this.warehouseId = storage.getItem('warehouseId');
       this.warehouseName = storage.getItem('warehouseName');
       this.projectItemId = storage.getItem('projectItemId');
@@ -156,520 +205,271 @@ export default {
       this.stockOutPrepateTemplateId = storage.getItem('stockOutPrepateTemplateId');
       this.stockOutPrepateTemplateName = storage.getItem('stockOutPrepateTemplateName');
     }
-
   },
-
-  mounted: function() {
+  mounted() {
     this.loadSelectProjectItem();
     this.loadSelectWarehouse();
     this.loadSelectTemplate();
-    if (this.warehouseId != null) {
-      var warehouse = new Option(this.warehouseName, this.warehouseId);
-      $('#warehouse').append(warehouse);	
-    }
-    if (this.projectItemId != null) {
-      var projectItem = new Option(this.projectItemName, this.projectItemId);
-      $('#projectItem').append(projectItem);
-
-    }
-    if (this.stockOutPrepateTemplateId != null) {
-      var stockOutPrepateTemplate = new Option(this.stockOutPrepateTemplateName, this.stockOutPrepateTemplateId);
-      $('#stockOutPrepateTemplate').append(stockOutPrepateTemplate);
-    }
-			
-    $('.fixed-table').tableFixer({'left' : 2,'head':true});
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
   },
-
   methods: {
-
-    /**
-			 * 项目事件
-			 */
-    loadSelectProjectItem: function() {
-      var _self = this;
-      $('#projectItem').select2({
-        // 请求搜索框数据
-        //data: _self.data,
-        theme: 'bootstrap',
-        placeholder: '项目事件',
-        minimumInputLength: 0,
-        placeholderOption: 'first',
-        quietMillis: 250,
-        allowClear: true,
-        language: 'zh-CN',
-        width: 'resolve',
-        // 请求搜索框数据
-        ajax: {
-          url: function(params) {
-            return Common.getApiURL('ProjectItemResource/queryByCondition');
-          },
-          dataType: 'json',
-          type: 'get',
-          delay: 250,
-          minimumInputLength: 0,
-          transport: function(params, success, failure) {
-            params.beforeSend = Common.addTokenToRequest;
-            var $request = $.ajax(params);
-            $request.then(success);
-            $request.fail(failure);
-            return $request;
-          },
-          data: function(params) {
-            return {
-              'name': params.term,
-            };
-          },
-          processResults: function(data, params) {
-            if(data.errorCode == 0) {
-              var more = (params * 10) <= data.datas.length;
-              for(var i = 0; i < data.datas.length; i++) {
-                data.datas[i].text = data.datas[i].name;
-              }
-              _self.projectItems = data.datas;
-              return {
-                results: data.datas,
-                more: more,
-              };
-            }
-          },
-        },
-      }).on('change', function() {
-        if($(this).val() == null) {
-          _self.projectItemId = undefined;
-          var storage = window.localStorage;
-          storage.setItem('projectItemId', _self.projectItemId);
-          _self.projectItemName = '';
-          storage.setItem('projectItemName', _self.projectItemName);
-          _self.clear();
-        } else {
-          _self.projectItemId = $(this).val();
-          for (var i = 0; i < _self.projectItems.length; i++) {
-            if (_self.projectItems[i].id == _self.projectItemId) {
-              _self.projectItemName = _self.projectItems[i].name;
-            }
+    // 加载项目事件选项
+    loadSelectProjectItem() {
+      const _self = this;
+      $.ajax({
+        url: Common.getApiURL('ProjectItemResource/queryByCondition'),
+        dataType: 'json',
+        type: 'get',
+        data: { name: '' },
+        beforeSend: Common.addTokenToRequest,
+        success(data) {
+          if (data.errorCode === 0) {
+            _self.projectItems = data.datas;
           }
-          _self.clear();
-          storage.setItem('projectItemId', _self.projectItemId);
-          storage.setItem('projectItemName', _self.projectItemName);
-        }
-
+        },
+        error(errorData) {
+          Common.processException(errorData);
+        },
       });
     },
-    /**
-			 * 仓库
-			 */
-    loadSelectWarehouse: function() {
-      var _self = this;
-      var storage = window.localStorage;
-      $('#warehouse').select2({
-        // 请求搜索框数据
-        //data: _self.data,
-        theme: 'bootstrap',
-        placeholder: '仓库',
-        minimumInputLength: 0,
-        placeholderOption: 'first',
-        quietMillis: 250,
-        allowClear: true,
-        language: 'zh-CN',
-        width: 'resolve',
-        // 请求搜索框数据
-        ajax: {
-          url: function(params) {
-            return Common.getApiURL('WarehouseResource/queryByCondition');
-          },
-          dataType: 'json',
-          type: 'get',
-          delay: 250,
-          minimumInputLength: 0,
-          transport: function(params, success, failure) {
-            params.beforeSend = Common.addTokenToRequest;
-            var $request = $.ajax(params);
-            $request.then(success);
-            $request.fail(failure);
-            return $request;
-          },
-          data: function(params) {
-            return {
-              'name': params.term,
-            };
-          },
-          processResults: function(data, params) {
-            if(data.errorCode == 0) {
-              var more = (params * 10) <= data.datas.length;
-              for(var i = 0; i < data.datas.length; i++) {
-                data.datas[i].text = data.datas[i].name;
-              }
-              _self.warehouses = data.datas;
-              return {
-                results: data.datas,
-                more: more,
-              };
-            }
-          },
-        },
-      }).on('change', function() {
-        if($(this).val() == null) {
-          _self.warehouseId = undefined;
-          _self.warehouseName = '';
-          storage.setItem('warehouseId', _self.warehouseId);
-          storage.setItem('warehouseName', _self.warehouseName);
-          _self.clear();
-        } else {
-          _self.warehouseId = $(this).val();
-          for (var i = 0; i < _self.warehouses.length; i++) {
-            if (_self.warehouses[i].id == _self.warehouseId) {
-              _self.warehouseName = _self.warehouses[i].name;
-            }
+    // 加载仓库选项
+    loadSelectWarehouse() {
+      const _self = this;
+      $.ajax({
+        url: Common.getApiURL('WarehouseResource/queryByCondition'),
+        dataType: 'json',
+        type: 'get',
+        data: { name: '' },
+        beforeSend: Common.addTokenToRequest,
+        success(data) {
+          if (data.errorCode === 0) {
+            _self.warehouses = data.datas;
           }
-          _self.clear();
-          storage.setItem('warehouseId', _self.warehouseId);
-          storage.setItem('warehouseName', _self.warehouseName);
-        }
+        },
+        error(errorData) {
+          Common.processException(errorData);
+        },
       });
     },
-
-    /**
-			 * 需求模板
-			 */
-    loadSelectTemplate: function() {
-      var _self = this;
-      var storage = window.localStorage;
-      $('#stockOutPrepateTemplate').select2({
-        // 请求搜索框数据
-        //data: _self.data,
-        theme: 'bootstrap',
-        placeholder: '需求模板',
-        minimumInputLength: 0,
-        placeholderOption: 'first',
-        quietMillis: 250,
-        allowClear: true,
-        language: 'zh-CN',
-        width: 'resolve',
-        // 请求搜索框数据
-        ajax: {
-          url: function(params) {
-            return Common.getApiURL('StockOutPrepateTemplateResource/queryByCondition');
-          },
-          dataType: 'json',
-          type: 'get',
-          delay: 250,
-          minimumInputLength: 0,
-          transport: function(params, success, failure) {
-            params.beforeSend = Common.addTokenToRequest;
-            var $request = $.ajax(params);
-            $request.then(success);
-            $request.fail(failure);
-            return $request;
-          },
-          data: function(params) {
-            return {
-              'name': params.term,
-            };
-          },
-          processResults: function(data, params) {
-            if(data.errorCode == 0) {
-              var more = (params * 10) <= data.datas.length;
-              for(var i = 0; i < data.datas.length; i++) {
-                data.datas[i].text = data.datas[i].name;
-              }
-              _self.stockOutPrepateTemplateNames = data.datas;
-              return {
-                results: data.datas,
-                more: more,
-              };
-            }
-          },
-        },
-      }).on('change', function() {
-        if($(this).val() == null) {
-          _self.stockOutPrepateTemplateId = undefined;
-          _self.clear();
-          _self.stockOutPrepateTemplateName = '';
-          storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
-          storage.setItem('stockOutPrepateTemplateName', _self.stockOutPrepateTemplateName);
-        } else {
-          _self.stockOutPrepateTemplateId = $(this).val();
-          for (var i = 0; i < _self.stockOutPrepateTemplateNames.length; i++) {
-            if (_self.stockOutPrepateTemplateNames[i].id == _self.stockOutPrepateTemplateId) {
-              _self.stockOutPrepateTemplateName = _self.stockOutPrepateTemplateNames[i].name;
-            }
+    // 加载需求模板选项
+    loadSelectTemplate() {
+      const _self = this;
+      $.ajax({
+        url: Common.getApiURL('StockOutPrepateTemplateResource/queryByCondition'),
+        dataType: 'json',
+        type: 'get',
+        data: { name: '' },
+        beforeSend: Common.addTokenToRequest,
+        success(data) {
+          if (data.errorCode === 0) {
+            _self.stockOutPrepateTemplateNames = data.datas;
           }
-          _self.clear();
-          storage.setItem('stockOutPrepateTemplateId', _self.stockOutPrepateTemplateId);
-          storage.setItem('stockOutPrepateTemplateName', _self.stockOutPrepateTemplateName);
-        }
+        },
+        error(errorData) {
+          Common.processException(errorData);
+        },
       });
     },
- 
-    /**
-			 * 修改每页显示的数量
-			 * @param {Object} newPageSize
-			 */
-    gridSizeSelect: function(newPageSize) {
-      var _self = this;
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      // 刷新界面
-
-      //清空这样显示数据
-      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
-				
-      //清空查询数据，重新查询数据
-      _self.stockOutPrepateTemplates.splice(0, _self.stockOutPrepateTemplates.length);
-				
-				
+    // 修改每页显示数量
+    gridSizeSelect(newPageSize) {
+      this.pagination.pageSize = newPageSize;
+      this.pagination.current = 1;
+      this.pageStockOutPrepateTemplates = [];
+      this.stockOutPrepateTemplates = [];
       this.queryLines();
     },
-
-    //查询领料模板详情
-    queryLines: function() {
-      var _self = this;
-      if(_self.projectItemId == undefined) {
+    // 查询领料模板详情
+    queryLines() {
+      if (!this.projectItemId) {
         Common.showDialog('提示', '请选择项目事件', 'error');
         return;
       }
-      if(_self.warehouseId == undefined) {
+      if (!this.warehouseId) {
         Common.showDialog('提示', '请选择仓库', 'error');
         return;
       }
-      if(_self.stockOutPrepateTemplateId == undefined) {
+      if (!this.stockOutPrepateTemplateId) {
         Common.showDialog('提示', '请选择需求模板', 'error');
         return;
       }
-      var param = {
-        warehouseId: _self.warehouseId,
-        projectItemId: _self.projectItemId,
-        stockOutPrepateTemplateDtoId: _self.stockOutPrepateTemplateId,
+      const param = {
+        warehouseId: this.warehouseId,
+        projectItemId: this.projectItemId,
+        stockOutPrepateTemplateDtoId: this.stockOutPrepateTemplateId,
       };
-      _self.loading=true;
-				
-      //清空这样显示数据
-      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
-				
-      StockOutPrepateTemplateResource.queryStockOutPrepateTemplateDto(param).then(successData =>{
-        if(successData.errorCode == 0) {
-          _self.pagination.total = successData.data.stockOutPrepateTemplateLineDtos.length;
-          _self.stockOutPrepateTemplates = successData.data.stockOutPrepateTemplateLineDtos;
-          _self.pagination.last_page = Math.ceil(successData.data.stockOutPrepateTemplateLineDtos.length / _self.pagination.per_page);
-          _self.getDatas();
-          _self.loading=false;
-        } else {
-          Notify.error('提示', successData.errorMessage, false);
-          return;
-        }
-      },errorData =>{
-        _self.loading=false;
-        Common.processException(errorData);
-      });
-
+      this.loading = true;
+      this.pageStockOutPrepateTemplates = [];
+      StockOutPrepateTemplateResource.queryStockOutPrepateTemplateDto(param)
+        .then(successData => {
+          if (successData.errorCode === 0) {
+            this.pagination.total = successData.data.stockOutPrepateTemplateLineDtos.length;
+            this.stockOutPrepateTemplates = successData.data.stockOutPrepateTemplateLineDtos;
+            this.getDatas();
+          } else {
+            Notify.error('提示', successData.errorMessage, false);
+          }
+        })
+        .catch(errorData => {
+          Common.processException(errorData);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-
-    getDatas: function() {
-      var _self = this;
-      var start = (_self.pagination.current_page - 1) * _self.pagination.per_page;
-      var end = start + _self.pagination.per_page;
-      //将录入的数据导过来
-      if(_self.pageStockOutPrepateTemplates != null && _self.pageStockOutPrepateTemplates.length > 0) {
-        for(var j = 0; j < _self.pageStockOutPrepateTemplates.length; j++) {
-          var index = _self.pageStockOutPrepateTemplates[j].index;
-          _self.stockOutPrepateTemplates[index].pickQuantity = _self.pageStockOutPrepateTemplates[j].pickQuantity;
-        }
+    // 获取分页数据
+    getDatas() {
+      const start = (this.pagination.current - 1) * this.pagination.pageSize;
+      const end = start + this.pagination.pageSize;
+      if (this.pageStockOutPrepateTemplates.length > 0) {
+        this.pageStockOutPrepateTemplates.forEach(item => {
+          this.stockOutPrepateTemplates[item.index].pickQuantity = item.pickQuantity;
+        });
       }
-
-      //清空这样显示数据
-      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
-
-      //重新生成另一页的数据
-      for(var i = 0; i < _self.stockOutPrepateTemplates.length; i++) {
-        if(i >= start  && i < end) {						
-          var obj = {
-            inventoryName: _self.stockOutPrepateTemplates[i].inventoryName,
-            inventoryNo: _self.stockOutPrepateTemplates[i].inventoryNo,
-            inventoryType: _self.stockOutPrepateTemplates[i].inventoryType,
-            warehouseName: _self.stockOutPrepateTemplates[i].warehouseName,
-            currentStockQuantity: _self.stockOutPrepateTemplates[i].currentStockQuantity,
-            currentStockOutQuantity: _self.stockOutPrepateTemplates[i].currentStockOutQuantity,
-            currentStockCanPickQuantity: _self.stockOutPrepateTemplates[i].currentStockCanPickQuantity,
-            quantity: _self.stockOutPrepateTemplates[i].quantity,
-            pickQuantity: _self.stockOutPrepateTemplates[i].pickQuantity,
+      this.pageStockOutPrepateTemplates = [];
+      for (let i = 0; i < this.stockOutPrepateTemplates.length; i++) {
+        if (i >= start && i < end) {
+          const obj = {
+            ...this.stockOutPrepateTemplates[i],
             index: i,
           };
-          _self.pageStockOutPrepateTemplates.push(obj);
+          this.pageStockOutPrepateTemplates.push(obj);
         }
       }
-				
-      _self.fixedTableHeader();
-
     },
-			
-    //清空
-    clear:function(){
-      var _self = this;
-      //清空这样显示数据
-      _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
-      //清空记录数据
-      _self.stockOutPrepateTemplates.splice(0, _self.stockOutPrepateTemplates.length);
-				
+    // 清空数据
+    clear() {
+      this.pageStockOutPrepateTemplates = [];
+      this.stockOutPrepateTemplates = [];
     },
-
-    //提交
-    save: function() {
-      var currentStock = [];
-      var num = 0;
-      var num3 = 0;
-      var num5 = 0;
-      var _self = this;
-      _self.getDatas();
-      this.stockOutPrepateTemplates.forEach(function(item) {
-
-        if(item.pickQuantity == undefined || item.pickQuantity == '') {
+    // 提交领料数据
+    save() {
+      const currentStock = [];
+      let num = 0;
+      let num3 = 0;
+      let num5 = 0;
+      this.getDatas();
+      this.stockOutPrepateTemplates.forEach(item => {
+        if (item.pickQuantity === undefined || item.pickQuantity === '') {
           num++;
         }
-        if(item.pickQuantity <= 0 && item.currentStockCanPickQuantity > 0) {
+        if (item.pickQuantity <= 0 && item.currentStockCanPickQuantity > 0) {
           num5++;
         }
-        if(item.pickQuantity > item.currentStockCanPickQuantity) {
+        if (item.pickQuantity > item.currentStockCanPickQuantity) {
           num3++;
         } else {
           currentStock.push(item);
         }
-
       });
-      if(_self.projectItemId == undefined) {
+      if (!this.projectItemId) {
         Common.showDialog('提示', '请选择项目事件', 'error');
         return;
       }
-      if(_self.warehouseId == undefined) {
+      if (!this.warehouseId) {
         Common.showDialog('提示', '请选择仓库', 'error');
         return;
       }
-      if(_self.stockOutPrepateTemplateId == undefined) {
+      if (!this.stockOutPrepateTemplateId) {
         Common.showDialog('提示', '请选择需求模板', 'error');
         return;
       }
-      if(num > 0) {
+      if (num > 0) {
         Common.showDialog('提示', '请填写领用数量', 'error');
         return;
       }
-      if(num3 > 0) {
+      if (num3 > 0) {
         Common.showDialog('提示', '领用数量大于可领数量', 'error');
         return;
       }
-      if(num5 > 0) {
+      if (num5 > 0) {
         Common.showDialog('提示', '填写的领用数量必须大于零', 'error');
         return;
       }
-
-      var param = {
-        projectItemId: _self.projectItemId,
-        warehouseId: _self.warehouseId,
-        stockOutPrepateTemplateId: _self.stockOutPrepateTemplateId,
+      const param = {
+        projectItemId: this.projectItemId,
+        warehouseId: this.warehouseId,
+        stockOutPrepateTemplateId: this.stockOutPrepateTemplateId,
         pickingCarDtoList: currentStock,
       };
-      _self.loading=true;
-      if(currentStock.length > 0) {
-					
-					
-        StockOutPrepareResource.saveByTemplate(param).then(successData =>{
-          if(successData.errorCode == 0) {
-            Notify.success('成功', '领料成功', 4000);
-            //清空这样显示数据
-            _self.pageStockOutPrepateTemplates.splice(0, _self.pageStockOutPrepateTemplates.length);
-            _self.stockOutPrepateTemplates.splice(0,_self.stockOutPrepateTemplates.length);
-            _self.loading=false;
-          } else {
-            Notify.error('提示', successData.errorMessage, false);
-            return;
-          }
-        },errorData =>{
-          _self.loading=false;
-          Common.processException(errorData);
-        });
-
+      this.loading = true;
+      if (currentStock.length > 0) {
+        StockOutPrepareResource.saveByTemplate(param)
+          .then(successData => {
+            if (successData.errorCode === 0) {
+              Notify.success('成功', '领料成功', 4000);
+              this.pageStockOutPrepateTemplates = [];
+              this.stockOutPrepateTemplates = [];
+            } else {
+              Notify.error('提示', successData.errorMessage, false);
+            }
+          })
+          .catch(errorData => {
+            Common.processException(errorData);
+          })
+          .finally(() => {
+            this.loading = false;
+          });
       } else {
-        _self.loading=false;
+        this.loading = false;
         Common.showDialog('提示', '请选择要提交的内容', 'error');
       }
     },
-			
-    /**
-			 * 冻结表头
-			 */
-    fixedTableHeader:function(){
-      let _self = this;
-      _self.$nextTick(function(){
-        $('.fixed-table').tableFixer({'left' : 2,'head':true});
-      });
+    // 表格分页变化处理
+    handleTableChange(pagination) {
+      this.pagination.current = pagination.current;
+      this.getDatas();
+    },
+    // 项目事件选择变化处理
+    handleProjectItemChange(value) {
+      this.projectItemId = value;
+      this.clear();
+    },
+    // 仓库选择变化处理
+    handleWarehouseChange(value) {
+      this.warehouseId = value;
+      this.clear();
+    },
+    // 需求模板选择变化处理
+    handleTemplateChange(value) {
+      this.stockOutPrepateTemplateId = value;
+      this.clear();
+    },
+    // 领用数量变化处理
+    handlePickQuantityChange(record) {
+      // 可根据需求添加额外逻辑
     },
-			
   },
 };
 </script>
 
 <style scoped>
-.form-inline .form-group label {
-    width: 80px;
-    text-align: right;
-    padding-right: 5px;
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 85px);
 }
 
-.form-inline .form-group input,
-.form-inline .form-group select {
-    width: 200px;
+.flex-header {
+  flex: 0 0 100px;
 }
-</style>
 
-<style scoped>
-	.flex-container {
-		display: flex;
-		/* 垂直*/
-		flex-direction: column;
-		width: 100%;
-		/*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-		height: calc(100vh - 85px);
-	}
-	
-	.flex-header {
-		height: 200px;
-		/*放大缩小比例为0 */
-		flex: 0 0 100px;
-	}
-	
-	.flex-footer {
-		margin-top: 0.8em;
-		height: 35px;
-		/*放大缩小比例为0 */
-		flex: 0 0 35px;
-	}
-	
-	.flex-content {
-		margin-top: 0.8em;
+.flex-footer {
+  margin-top: 0.8em;
+  flex: 0 0 35px;
+}
+
+.flex-content {
+  margin-top: 0.8em;
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
   width: 100%;
-  height: 0;
-	}
-</style>
-<style scoped>
-.fixed-table {
-    table-layout: fixed;
-    width: 800px !important;
-    min-width: 800px !important;
 }
 
-table.fixed-table tr {
-    height: 40px;
+.pull-left {
+  float: left;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.pull-right {
+  float: right;
 }
 </style>

webpack.base.js

@@ -78,8 +78,6 @@ module.exports = {
   
   externals: {
     'jquery': "window.jquery",
-    'bootstrap': 'bootstrap',
-    'BootstrapDialog': 'BootstrapDialog',
     'vue': 'Vue',
     'vue-i18n': 'VueI18n',
     'vue-router': 'VueRouter',

webpack.lib.js

@@ -121,8 +121,6 @@ module.exports = WebpackMerge.merge(baseConfig,{
     "vue-select": "vue-select",
     
     'jquery': "jquery",
-    'bootstrap': 'bootstrap',
-    'BootstrapDialog': 'BootstrapDialog',
     'vue': 'vue',
     'vue-i18n': 'vue-i18n',
     'vue-router': 'vue-router',