去除bootstrap，使用antd重构

.eslintignore

@@ -1,4 +1,4 @@
 /Dictionary/*
 /node_modules/*
-/client-base-v4/.eslintrc.js
-/client-base-v4/.eslintignore
+/client-base-v5/.eslintrc.js
+/client-base-v5/.eslintignore

README.md

@@ -1,4 +1,4 @@
-# client-wms-v3
+# client-wms-v5
 
 ### 项目安装
 ```

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "client-wms-v3",
+  "name": "client-wms-v5",
   "description": "Leanwo Prodog Client",
-  "version": "3.1.4",
+  "version": "1.0.0",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",
@@ -13,7 +13,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "pc-component-v3": "1.1.14-alpha.2",
+    "ant-design-vue": "^4.2.1",
+    "pc-component-v3": "2.0.0",
     "v-tooltip": "^4.0.0-beta.17",
     "vue-select": "^4.0.0-beta.6"
   },
@@ -51,11 +52,6 @@
   },
   "repository": {
     "type": "http",
-    "url": "http://prodog.leanwo.com:3000/prodog-client-2023/client-wms-v3.git"
-  },
-  "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
-    "ant-design-vue": "^4.0.0-rc.6",
-    "client-wms-v3": "file:"
+    "url": "https://a.leanwo.com:3000/prodog-client-2025/client-wms-v5.git"
   }
 }

src/common/AntdAuthImage.vue

@@ -0,0 +1,110 @@
+<template>
+  <a-image
+    :width="width" :style="{ height: imgHeight }" :src="src" :preview="isPreview ? {
+      src: previewUrl || src
+    } : false" @onload="onload"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    authSrc: {
+      type: String,
+      default: null,
+    },
+    previewSrc: {
+      type: String,
+      default: null,
+    },
+    width: {
+      type: [Number, String],
+      default: '100%',
+    },
+    height: {
+      type: [Number, String],
+      default: 'auto',
+    },
+    isPreview: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['click'],
+
+  data() {
+    return {
+      src: '',
+      previewUrl: '',
+      noImage: '',
+      errorImage: '',
+      loadingImage: '',
+    };
+  },
+
+  computed: {
+    imgHeight() {
+      return typeof this.height === 'number' ? `${this.height}px` : this.height;
+    },
+  },
+
+  watch: {
+    authSrc(newValue) {
+      this.loadImage(newValue, 'authSrc');
+    },
+    previewSrc(newValue) {
+      this.loadImage(newValue, 'previewSrc');
+    },
+  },
+
+  mounted() {
+    this.noImage = '/static/assets/client-base-v4/image/no-image.png';
+    this.errorImage = '/static/assets/client-base-v4/image/load-error.png';
+    this.loadingImage = '/static/assets/client-base-v4/image/loading.gif';
+    this.src = this.loadingImage;
+    this.loadImage(this.authSrc, 'authSrc');
+    this.loadImage(this.previewSrc, 'previewSrc');
+  },
+
+  beforeUnmount() {
+    if (this.previewUrl) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+  },
+
+  methods: {
+    loadImage: function (url, type) {
+      let _self = this;
+
+      if (url == null || url == '') {
+        if (type === 'authSrc') _self.src = this.noImage;
+        return;
+      }
+      if (type === 'authSrc') _self.src = this.loadingImage;
+
+      fetch(url, {
+        method: 'GET',
+        headers: {
+          'token': localStorage.getItem('#token'),
+        },
+      }).then(res => res.blob())
+        .then(blob => {
+          const objectURL = URL.createObjectURL(blob);
+          if (type === 'authSrc') {
+            _self.src = objectURL;
+          } else {
+            _self.previewUrl = objectURL;
+          }
+        })
+        .catch(err => {
+          console.error(err);
+          if (type === 'authSrc') _self.src = this.errorImage;
+        });
+    },
+
+    onload() {
+      URL.revokeObjectURL(this.src);
+    },
+  },
+};
+</script>

src/common/CommonTable.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="tablePaganations">
+    <!-- <a-config-provider :locale="locale"> -->
+    <a-table
+      id="commonTable" class="ant-table-striped" bordered size="small" height="1000px" :loading="isLoading"
+      :data-source="dataSource" :columns="columns" :row-key="(record) => record.id" :scroll="{ y: yScroll, x: xScroll }"
+      :pagination="havePage ? pagination : false" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
+      " :row-selection="isSelect
+        ? {
+          type: selectType === 'radio' ? 'radio' : 'checkbox',
+          selectedRowKeys: state.selectedRowKeys,
+          onSelect: selectEvent,
+          onSelectAll: selectAllEvent,
+          hideSelectAll: hideSelectAll,
+        }
+        : null
+      " :custom-row="isCustomRowClick ? customRowClick : null" @change="tableChange"
+      @resize-column="handleResizeColumn"
+    >
+      <template v-for="(item, index) in renderArr" #[item]="scope" :key="index">
+        <slot :name="item" :scope="scope" v-bind="scope || {}" />
+      </template>
+    </a-table>
+    <!-- </a-config-provider> -->
+  </div>
+</template>
+
+<script setup>
+import {
+  useSlots,
+  ref,
+  reactive,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  watch,
+  onMounted,
+} from 'vue';
+import { getTableScroll } from '../common/tableScroll.js';
+// import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
+// const locale = ref(zhCN);
+
+const props = defineProps({
+  // 表格数据
+  dataSource: {
+    type: Object,
+    required: true,
+  },
+  // 表头数据
+  columns: {
+    type: Object,
+    required: true,
+  },
+  // 是否可选择
+  isSelect: {
+    type: Boolean,
+  },
+  // 表格loading
+  isLoading: {
+    type: Boolean,
+  },
+  // 数据总数
+  total: {
+    type: Number,
+    default: 0,
+  },
+  // x滚动
+  xScroll: {
+    type: Number,
+    default: 0,
+  },
+  // 是否分页
+  havePage: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否隐藏全选
+  hideSelectAll: {
+    type: Boolean,
+    default: false,
+  },
+  // 单选多选
+  selectType: {
+    type: String,
+    default: 'checkbox',
+  },
+  // 分页在右上角
+  topRight: {
+    type: Boolean,
+    default: false,
+  },
+  // 表格距底部高度
+  extraHeight: {
+    type: Number,
+    default: undefined,
+  },
+  // 选择的key值
+  selectedKeys: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否自定义行点击
+  isCustomRowClick: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['getPager', 'getSorter', 'getSelected', 'customRowClick']);
+
+// 分页配置
+const pagination = reactive({
+  showQuickJumper: true,
+  current: 1,
+  pageSize: 20, // 默认每页显示数量
+  showSizeChanger: true, // 显示可改变每页数量
+  pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页数量选项值
+  showTotal: (total, range) =>
+    range[0] + '-' + range[1] + '条' + ' 共' + total + '条', // 显示总数
+  onShowSizeChange: (current, pageSize) => showSizeChange(current, pageSize),
+  onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
+  total: props.total,
+  position: props.topRight ? ['topRight'] : ['bottomRight'],
+});
+
+const yScroll = ref(400); //默认滚动高度
+const extraHeight = ref(undefined); //表格距离底部值
+
+// 最后一次排序信息
+const lastSorter = reactive({ field: '', order: '' });
+
+//  选择的数据
+const state = reactive({
+  selectedRows: [],
+  selectedRowKeys: [],
+});
+
+onMounted(() => {
+  if (!props.havePage) {
+    extraHeight.value = 30;
+  } else {
+    extraHeight.value = props.extraHeight;
+  }
+  if (props.extraHeight) {
+    extraHeight.value = props.extraHeight;
+  }
+  onResizeTable();
+  window.onresize = () => {
+    onResizeTable();
+  };
+});
+
+// 表格位置
+const onResizeTable = () => {
+  yScroll.value = getTableScroll({
+    extraHeight: extraHeight.value,
+    id: 'commonTable',
+  });
+};
+
+//点击页码事件
+const changePage = (current, size) => {
+  pagination.current = current;
+  emit('getPager', pagination.current, size);
+};
+
+// 改变每页数量时更新显示
+const showSizeChange = (current, pageSize) => {
+  setTimeout(() => {
+    pagination.current = 1;
+    emit('getPager', pagination.current, pageSize);
+  });
+  pagination.pageSize = pageSize;
+};
+
+// 回到第一页
+const backFirstPage = () => {
+  pagination.current = 1;
+  emit('getPager', pagination.current, pagination.pageSize);
+};
+
+// 伸缩列
+const handleResizeColumn = (w, col) => {
+  col.width = w;
+};
+
+// 选择每一项操作
+const selectEvent = (record, selected) => {
+  if (props.selectType === 'radio') {
+    state.selectedRows = [record];
+    state.selectedRowKeys = [record.id];
+  } else {
+    if (selected) {
+      state.selectedRows.push(record);
+      state.selectedRowKeys.push(record.id);
+    } else {
+      let index = state.selectedRowKeys.indexOf(record.id);
+      if (index >= 0) {
+        state.selectedRows.splice(index, 1);
+        state.selectedRowKeys.splice(index, 1);
+      }
+    }
+  }
+  emit('getSelected', state);
+};
+
+// 点击以后全选当前分页数据
+const selectAllEvent = (selected, selectedRows, changeRows) => {
+  if (selected) {
+    changeRows.forEach(item => {
+      state.selectedRows.push(item);
+      state.selectedRowKeys.push(item.id);
+    });
+  } else {
+    changeRows.forEach(item => {
+      let index = state.selectedRowKeys.indexOf(item.id);
+      if (index >= 0) {
+        state.selectedRows.splice(index, 1);
+        state.selectedRowKeys.splice(index, 1);
+      }
+    });
+  }
+  emit('getSelected', state);
+};
+
+// 清空选择
+const clear = () => {
+  state.selectedRowKeys = [];
+  state.selectedRows = [];
+  emit('getSelected', state);
+};
+
+// 获取排序信息
+const tableChange = (pagination, filters, sorter) => {
+  // pagination, filters 变化时也会触发所以对sorter进行判断限制执行
+  if (Object.keys(sorter).length > 0) {
+    if (sorter.field != lastSorter.field && sorter.order != lastSorter.order) {
+      lastSorter.field = sorter.field;
+      lastSorter.order = sorter.order;
+      emit('getSorter', sorter);
+    }
+    if (sorter.field != lastSorter.field && sorter.order == lastSorter.order) {
+      lastSorter.field = sorter.field;
+      lastSorter.order = sorter.order;
+      emit('getSorter', sorter);
+    }
+    if (sorter.field == lastSorter.field && sorter.order != lastSorter.order) {
+      lastSorter.field = sorter.field;
+      lastSorter.order = sorter.order;
+      emit('getSorter', sorter);
+    }
+  }
+};
+
+// 自定义行点击
+const customRowClick = record => {
+  return {
+    onDblclick() {
+      emit('customRowClick', record);
+    },
+  };
+};
+
+// 暴露出方法
+defineExpose({ backFirstPage, clear });
+
+// 监听total变化
+watch(
+  props,
+  newData => {
+    pagination.total = newData.total;
+    extraHeight.value = newData.extraHeight;
+  },
+  { immediate: true, deep: true },
+);
+watch(
+  () => props.selectedKeys,
+  newData => {
+    state.selectedRowKeys = newData;
+    state.selectedRows = newData.map(item => props.dataSource.find(data => data.id === item));
+  },
+  { immediate: true, deep: true },
+);
+// 插槽的实例
+const slots = useSlots();
+const renderArr = Object.keys(slots);
+</script>
+<style scoped>
+.tablePaganations {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa;
+}
+</style>

src/common/tableScroll.js

@@ -0,0 +1,26 @@
+/**
+* 获取表格的可视化高度
+* @param {*} extraHeight 额外的高度(表格底部的内容高度) 
+* @param {*} id 当前页面中有多个table时需要制定table的id
+*/
+export const getTableScroll = ({ extraHeight, id }) => {
+  if (typeof extraHeight == 'undefined') {
+    //  默认底部分页高度
+    extraHeight = 60;
+  }
+  let tHeader = null;
+  if (id) {
+    tHeader = document.getElementById(id) ?
+      document.getElementById(id).getElementsByClassName('ant-table-thead')[0] : null;
+  } else {
+    tHeader = document.getElementsByClassName('ant-table-thead')[0];
+  }
+  //表格内容距离顶部的距离
+  let tHeaderBottom = 0;
+  if (tHeader) {
+    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
+  }
+  //窗体高度-表格内容顶部的高度-表格内容底部的高度
+  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
+  return height;
+};

src/components/GenerateDocumentTool.vue

@@ -1,23 +1,13 @@
 <template>
+  <Navbar :title="title" :is-go-back="false" />
+  <a-space>
+    <a-button style="margin-left: 16px;" type="primary" @click="generate()">确定</a-button>
+    <a-button danger @click="back()">撤销</a-button>
+  </a-space>
   <a-layout class="container">
-    <a-page-header
-      :title="title"
-      class="page-header"
-      @back="$router.go(-1)"
-    >
-      <template #extra>
-        <a-space>
-          <a-button type="primary" @click="generate()">确定</a-button>
-          <a-button type="warning" @click="back()">撤销</a-button>
-        </a-space>
-      </template>
-    </a-page-header>
-
     <a-layout-content class="content-layout">
       <DocGenerator
-        ref="docGenerator"
-        :info-window-no="infoWindowNo"
-        :generate-ids="generateIds"
+        ref="docGenerator" :info-window-no="infoWindowNo" :generate-ids="generateIds"
         @show-title="title = $event"
       />
     </a-layout-content>
@@ -32,7 +22,7 @@ import { IFrameUtil } from 'pc-component-v3';
 
 export default {
 
-  components: { },
+  components: {},
   data: function () {
     return {
       uuid: '',
@@ -60,7 +50,9 @@ export default {
         return;
       }
       // window.open调用
-      let modelData = window.opener.getModelData();
+      let modelData_str = localStorage.getItem(_self.uuid + '#GenerateDocumentTool');
+      let modelData = JSON.parse(modelData_str);
+      // let modelData = window.opener.getModelData();
       // 模态框 iframe调用
       //let modelData =  IFrameUtil.getCurdModelData();
       let url = null;
@@ -198,7 +190,7 @@ export default {
       } else if (_self.type == 'generatePurchaseOrderReturn') {
         //退货单生成换货单
         url = 'PurchaseOrderArrivalResource/generateModelDataReturn';
-      }else{
+      } else {
         Notify.error('提示', '不识别的生单地址。' + _self.type, false);
         return;
       }
@@ -221,18 +213,17 @@ export default {
           if (modelData != undefined) {
             if (modelData.saveDatas != undefined) {
               modelData.saveDatas.forEach(function (item) {
-                if(item.editMode == null){
+                if (item.editMode == null) {
                   item.editMode = true;
                 }
                 item.tabIndex = 1;
               });
             }
 
-            
+
             modelData.restore = true;
             window.opener.modelDataChanged(modelData);
-
-
+            localStorage.removeItem(_self.uuid + '#GenerateDocumentTool');
             //IFrameUtil.setCurdModelData(modelData);
 
             _self.back();
@@ -313,8 +304,9 @@ export default {
 
 <style scoped>
 .container {
-  height: 100vh;
-  padding: 16px;
+  height: 90vh;
+  background: #fff;
+  padding: 0 16px !important;
 }
 
 .page-header {
@@ -323,8 +315,7 @@ export default {
 }
 
 .content-layout {
-  padding: 16px;
-  background: #fff;
+  padding: 0 !important;
   overflow: auto;
 }
 </style>

src/components/GradeDefinition.vue

@@ -2,14 +2,17 @@
   <div class="card-container">
     <h2>仓库编码定义</h2>
     <hr />
-    <a-button type="primary" @click="save">保存</a-button>
-    <a-button type="default" @click="query">刷新</a-button>
+    <a-space>
+      <a-button type="primary" @click="save">保存</a-button>
+      <a-button type="default" @click="query">刷新</a-button>
+    </a-space>
     <h4 />
     <a-table 
       :columns="columns" 
       :data-source="gradeDefinitions" 
       :pagination="false"
       bordered
+      :scroll="{y: 860 }"
     >
       <template #bodyCell="{ column, record, index }">
         <!-- 序号列 -->
@@ -119,8 +122,14 @@ export default {
           title: '操作',
           dataIndex: 'operation',
           width: '120px',
+          fixed: 'right',
         },
-      ],
+      ].map(column => ({
+        ...column,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
     };
   },
   mounted: function () {

src/components/InventoryPrint.vue

@@ -1,93 +1,81 @@
 <template>
-  <div class="container">
+  <div>
     <Navbar :title="'标签打印'" :is-go-back="false" />
-    <a-card class="main-card">
-      <!-- 搜索表单 -->
-      <a-form layout="inline" class="search-form">
-        <a-form-item label="存货编号">
-          <a-input v-model:value="searchParams.no" @keyup.enter="reQuery" />
-        </a-form-item>
-        <a-form-item label="存货名称">
-          <a-input v-model:value="searchParams.name" @keyup.enter="reQuery" />
-        </a-form-item>
-        <a-form-item label="规格型号">
-          <a-input v-model:value="searchParams.type" @keyup.enter="reQuery" />
-        </a-form-item>
-        <a-form-item label="epc">
-          <a-input v-model:value="searchParams.epc" @keyup.enter="reQuery" />
-        </a-form-item>
-      </a-form>
-
-      <!-- 操作区域 -->
-      <a-space :size="16" class="action-area">
-        <a-form-item label="打印模板">
-          <a-select v-model:value="templateId" style="width: 200px" allow-clear>
-            <a-select-option 
-              v-for="item in templates" 
-              :key="'templates' + item.name" 
-              :value="item.id"
-            >
-              {{ item.name }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item label="打印机">
-          <a-select v-model:value="selectedPrinter" style="width: 200px" allow-clear>
-            <a-select-option 
-              v-for="printer in printers" 
-              :key="printer" 
-              :value="printer"
-            >
-              {{ printer }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-space>
-          <a-button type="primary" @click="print">打印</a-button>
-          <PrintEpc
-            ref="printEpc" 
-            v-model:visible="printEpcVisible" 
-            :printer-name="selectedPrinterCard"
-            @ok="closePrintEpc"
-          />
-          <a-button @click="reQuery">查询</a-button>
-          <a-button @click="clearFilter">清空</a-button>
-        </a-space>
-      </a-space>
-
-      <!-- 数据表格 -->
-      <a-table 
-        :columns="columns"
-        :data-source="assetInstanceDtoList"
-        :pagination="false"
-        bordered
-        size="small"
-        class="data-table"
-      >
-        <template #bodyCell="{ column, record, index }">
-          <template v-if="column.dataIndex === 'index'">
-            {{ (pagination.current_page - 1) * pagination.per_page + index + 1 }}
-          </template>
-          <template v-else-if="column.dataIndex === 'operation'">
-            <a-checkbox v-model:checked="record.checked" @change="templateChange(record.id)" />
-          </template>
-          <template v-else>
-            {{ record[column.dataIndex] }}
-          </template>
+
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="货位编号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="searchParams.no" class="w-full" @keyup.enter="reQuery" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="存货名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="searchParams.name" class="w-full" @keyup.enter="reQuery" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="searchParams.type" class="w-full" @keyup.enter="reQuery" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="epc" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="searchParams.epc" class="w-full" @keyup.enter="reQuery" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="打印模板" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="templateId" class="w-full" allow-clear>
+              <a-select-option v-for="item in templates" :key="'templates' + item.name" :value="item.id">
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="打印机" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="selectedPrinter" allow-clear class="w-full">
+              <a-select-option v-for="printer in printers" :key="printer" :value="printer">
+                {{ printer }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item>
+            <a-button style="margin-left: 18px;" type="primary" @click="print">打印</a-button>
+            <a-button style="margin-left: 8px;" @click="reQuery">查询</a-button>
+            <a-button style="margin-left: 8px;" @click="clearFilter">清空</a-button>
+            <PrintEpc
+              ref="printEpc" v-model:visible="printEpcVisible" :printer-name="selectedPrinterCard"
+              @ok="closePrintEpc"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+
+    <CommonTable
+      ref="commonTableRef" :columns="columns" :data-source="assetInstanceDtoList" :total="pagination.total"
+      :is-select="true" @get-selected="getSelectedData" @get-pager="getPageParams"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
+        </template>
+        <template v-else>
+          {{ record[column.dataIndex] }}
         </template>
-      </a-table>
-
-      <!-- 分页 -->
-      <div class="pagination">
-        <a-pagination
-          v-model:current="pagination.current_page"
-          :total="pagination.total"
-          :page-size="pagination.per_page"
-          show-less-items
-          @change="getAssetInstancePrint"
-        />
-      </div>
-    </a-card>
+      </template>
+    </CommonTable>
+
+
+
     <Loading v-if="loading" />
   </div>
 </template>
@@ -97,10 +85,10 @@ import { Notify, PrintEpc } from 'pc-component-v3';
 import Common from '../common/Common.js';
 import Printer from '../api/print/Printer.js';
 import { message } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
 // 列定义
 const columns = [
   { title: '序号', dataIndex: 'index', width: 80 },
-  { title: '选择', dataIndex: 'operation', width: 60 },
   { title: '存货编号', dataIndex: 'no', width: 150 },
   { title: '存货名称', dataIndex: 'name', width: 150 },
   { title: '规格型号', dataIndex: 'type', width: 150 },
@@ -114,6 +102,7 @@ const columns = [
 export default {
   components: {
     PrintEpc,
+    CommonTable,
   },
   data: function () {
     return {
@@ -141,6 +130,7 @@ export default {
       selectedPrinterCard: '发卡机',
       printEpcVisible: false,
       isCardEpc: false,
+      checkedIds: [],
     };
   },
 
@@ -190,6 +180,15 @@ export default {
       return recordIds;
     },
 
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInstancePrint();
+    },
+    getSelectedData: function (selectedData) {
+      this.checkedIds = selectedData.selectedRowKeys;
+    },
+
     /**
      * 打印文件
      */
@@ -197,7 +196,7 @@ export default {
       const _self = this;
       let templateId = _self.templateId;
       let selectedPrinter = _self.selectedPrinter;
-      let recordIds = _self.getSelectedRecordIds();
+      let recordIds = _self.checkedIds;
       if (selectedPrinter == null || selectedPrinter.length == 0) {
         Notify.error('提示', '请先选择打印机。', false);
         return;
@@ -219,7 +218,7 @@ export default {
     cardEpc: function () {
       const _self = this;
       _self.isCardEpc = true;
-      let recordIds = _self.getSelectedRecordIds();
+      let recordIds = _self.checkedIds;
       if (recordIds == null || recordIds.length == 0) {
         Notify.error('提示', '请先选择发卡数据。', false);
         return;
@@ -342,8 +341,7 @@ export default {
      */
     reQuery: function () {
       let _self = this;
-      _self.pagination.current_page = 1;
-      _self.getAssetInstancePrint();
+      _self.$refs.commonTableRef.backFirstPage();
     },
 
     /**
@@ -449,4 +447,24 @@ export default {
 .ant-form-item {
   margin-bottom: 12px;
 }
+
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 180px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/components/InventoryPrintScan.vue

@@ -1,96 +1,77 @@
 <template>
-  <div class="container">
+  <div>
     <Navbar title="扫描入库打印" :is-go-back="false" />
-    <a-card class="main-card">
-      <!-- 搜索区域 -->
-      <a-space :size="16" class="search-bar">
-        <PrintWidget
-          ref="printWidget"
-          :printer-localstorage-id="'#InventoryPrinterPrinter'"
-          @selected-printer-name="getPrintName"
-        />
-        <a-input
-          v-model:value="message"
-          placeholder="请输入要打印存货的名称或编码"
-          style="width: 300px"
-          @keyup.enter="queryInventory"
-        />
-        <a-space>
-          <a-button @click="queryInventory">查询</a-button>
-          <a-button @click="$refs.printEpc.show()">再次打印</a-button>
-        </a-space>
+    <!-- 搜索区域 -->
+    <PrintWidget
+      ref="printWidget" :printer-localstorage-id="'#InventoryPrinterPrinter'"
+      @selected-printer-name="getPrintName"
+    />
+    <a-space :size="16" class="search-bar">
+      <a-input
+        v-model:value="message" placeholder="请输入要打印存货的名称或编码" style="width: 240px"
+        @keyup.enter="queryInventory"
+      />
+      <a-space>
+        <a-button @click="queryInventory">查询</a-button>
+        <a-button @click="$refs.printEpc.show()">再次打印</a-button>
       </a-space>
-
-      <!-- 数据表格 -->
-      <a-table
-        :columns="columns"
-        :data-source="inventoryInstanceDatas"
-        :pagination="false"
-        size="middle"
-        :scroll="{ x: 1500, y: '60vh' }"
-        :sticky="{ offsetHeader: 64 }"
-      >
-        <template #headerCell="{ column }">
-          <span v-if="column.dataIndex === 'operation'">
-            <a-button type="link" @click="generateAllPack">打印</a-button>
-          </span>
-          <span v-else>{{ column.title }}</span>
+    </a-space>
+
+    <!-- 数据表格 -->
+    <a-table
+      :columns="columns" :data-source="inventoryInstanceDatas" :pagination="false" size="middle"
+      :scroll="{ x: 1500, y: 800 }" :sticky="{ offsetHeader: 64 }"
+    >
+      <template #headerCell="{ column }">
+        <span v-if="column.dataIndex === 'operation'">
+          <a-button type="link" @click="generateAllPack">打印</a-button>
+        </span>
+        <span v-else>{{ column.title }}</span>
+      </template>
+
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ (pagination.current_page - 1) * pagination.per_page + index + 1 }}
         </template>
-
-        <template #bodyCell="{ column, record, index }">
-          <template v-if="column.dataIndex === 'index'">
-            {{ (pagination.current_page - 1) * pagination.per_page + index + 1 }}
-          </template>
-          <template v-else-if="column.dataIndex === 'imageNames'">
-            <a-image
-              :src="Common.getThumbnailImageSrc(className, record.imageNames)"
-              :preview="false"
-              width="40px"
-              @click="$refs.imagePreview.preview(className, record.imageNames)"
-            />
-          </template>
-          <template v-else-if="['purchaseOrderNo', 'batchNo', 'packageCount', 'quantity'].includes(column.dataIndex)">
-            <a-input v-model:value="record[column.dataIndex]" />
-          </template>
-          <template v-else-if="column.dataIndex === 'vendor'">
-            <SearchWidget
-              :info-window-no="infoWindowNo1"
-              :field-value="getFieldValue1(record)"
-              :display-name="'v.name'"
-              :where-clause-source="whereClauseSource"
-              @value-changed="valueChanged1($event,record)"
-            />
-          </template>
-          <template v-else-if="column.dataIndex === 'position'">
-            <SearchWidget
-              :info-window-no="infoWindowNo2"
-              :field-value="getFieldValue2(record)"
-              :display-name="'p.barCode'"
-              :where-clause-source="whereClauseSource"
-              @value-changed="valueChanged2($event,record)"
-            />
-          </template>
-          <template v-else-if="column.dataIndex === 'print'">
-            <a-button type="link" @click="generatePack(record)">打印</a-button>
-          </template>
-          <template v-else-if="column.dataIndex === 'repeatPrint'">
-            <a-button type="link" @click="generateRepeatPack(record)">重复打印</a-button>
-          </template>
+        <template v-else-if="column.dataIndex === 'imageNames'">
+          <AntdAuthImage
+            :auth-src="getThumbnailImageSrc(record.imageNames, record.className)"
+            :preview-src="getImageSrc(record.imageNames, record.className)" :width="60"
+          />
+        </template>
+        <template v-else-if="['purchaseOrderNo', 'batchNo', 'packageCount', 'quantity'].includes(column.dataIndex)">
+          <a-input v-model:value="record[column.dataIndex]" />
+        </template>
+        <template v-else-if="column.dataIndex === 'vendor'">
+          <SearchWidget
+            :info-window-no="infoWindowNo1" :field-value="getFieldValue1(record)" :display-name="'v.name'"
+            :where-clause-source="whereClauseSource" @value-changed="valueChanged1($event, record)"
+          />
         </template>
-      </a-table>
-
-      <!-- 分页 -->
-      <div class="pagination">
-        <a-pagination
-          v-model:current="pagination.current_page"
-          :total="pagination.total"
-          :page-size="pagination.per_page"
-          show-less-items
-          @change="queryInventory"
-        />
-        <div class="total-text">共查询到 {{ pagination.total }} 条数据</div>
-      </div>
-    </a-card>
+        <template v-else-if="column.dataIndex === 'position'">
+          <SearchWidget
+            :info-window-no="infoWindowNo2" :field-value="getFieldValue2(record)"
+            :display-name="'p.barCode'" :where-clause-source="whereClauseSource"
+            @value-changed="valueChanged2($event, record)"
+          />
+        </template>
+        <template v-else-if="column.dataIndex === 'print'">
+          <a-button type="link" @click="generatePack(record)">打印</a-button>
+        </template>
+        <template v-else-if="column.dataIndex === 'repeatPrint'">
+          <a-button type="link" @click="generateRepeatPack(record)">重复打印</a-button>
+        </template>
+      </template>
+    </a-table>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <div class="total-text">共查询到 {{ pagination.total }} 条数据</div>
+      <a-pagination
+        v-model:current="pagination.current_page" :total="pagination.total" :page-size="pagination.per_page"
+        show-less-items @change="queryInventory"
+      />
+    </div>
 
     <PrintEpc ref="printEpc" :printer-name="printerName" />
     <ImagePreview ref="imagePreview" />
@@ -103,6 +84,7 @@ 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 AntdAuthImage from '../common/AntdAuthImage.vue';
 
 const columns = [
   { title: '序号', dataIndex: 'index', width: 80, fixed: 'left' },
@@ -111,8 +93,8 @@ const columns = [
   { title: '存货编号', dataIndex: 'inventoryCode', width: 150 },
   { title: '规格型号', dataIndex: 'type', width: 150 },
   { title: '计量单位', dataIndex: 'computationUnit', width: 100 },
-  { title: '采购订单编号', dataIndex: 'purchaseOrderNo', width: 150 },
-  { title: '批号', dataIndex: 'batchNo', width: 100 },
+  { title: '采购订单编号', dataIndex: 'purchaseOrderNo', width: 180 },
+  { title: '批号', dataIndex: 'batchNo', width: 180 },
   { title: '标签个数', dataIndex: 'packageCount', width: 100 },
   { title: '标签代表数量', dataIndex: 'quantity', width: 120 },
   { title: '供应商', dataIndex: 'vendor', width: 150 },
@@ -122,7 +104,7 @@ const columns = [
 ];
 
 export default {
-  components: { PrintWidget },
+  components: { PrintWidget, AntdAuthImage },
   data() {
     return {
       Common,
@@ -229,8 +211,8 @@ export default {
         },
         success: function (successData) {
           var ids = [];
-          if(successData.errorCode == 0) {
-            if(successData.datas.length > 0) {
+          if (successData.errorCode == 0) {
+            if (successData.datas.length > 0) {
               successData.datas.forEach(function (item) {
                 ids.push(item.id);
               });
@@ -297,13 +279,13 @@ export default {
         data: JSON.stringify(datas),
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
-          _self.loading=true;
+          _self.loading = true;
         },
         success: function (successData) {
-          _self.loading=false;
+          _self.loading = false;
           var ids = [];
-          if(successData.errorCode == 0) {
-            if(successData.datas.length > 0) {
+          if (successData.errorCode == 0) {
+            if (successData.datas.length > 0) {
               successData.datas.forEach(function (item) {
                 ids.push(item.id);
               });
@@ -317,7 +299,7 @@ export default {
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -362,7 +344,7 @@ export default {
             length: this.pagination.per_page,
           },
         });
-        
+
         if (response.errorCode === 0) {
           this.inventoryInstanceDatas = response.datas.map(item => ({
             ...item,
@@ -399,15 +381,15 @@ export default {
       var _self = this;
       var printData = [];
 
-      _self.loading=true;
+      _self.loading = true;
       InventoryInstancePrintResource.print(recordIds).then(baseListResponse => {
-        _self.loading=false;
+        _self.loading = false;
         if (baseListResponse.errorCode == 0) {
           let selectedPrinter = this.selectedPrinterTitle;
           let selectedPrinterType = _self.$refs.printWidget.getSelectedPrinterTypeTitle();
           _self.printerName = selectedPrinter;
           if (selectedPrinterType == '发卡机') {
-            _self.$nextTick(function(){
+            _self.$nextTick(function () {
               _self.$refs.printEpc.printPrintPages(baseListResponse.datas);
             });
           } else {
@@ -420,7 +402,7 @@ export default {
               };
               console.log(printItem);
               if (printItem.content == null || printItem.content.printItems == null || printItem.content.printItems.length ==
-                                0) {
+                0) {
                 Notify.error('错误', '打印模板无数据，不能打印。');
                 return;
               }
@@ -435,11 +417,24 @@ export default {
           }
         }
       }, errorData => {
-        _self.loading=false;
+        _self.loading = false;
         Common.processException(errorData);
       });
     },
-
+    getImageSrc(item, className) {
+      if (item != undefined && item != null) {
+        return Common.getImageSrc(className, item);
+      } else {
+        return '';
+      }
+    },
+    getThumbnailImageSrc(item, className) {
+      if (item != undefined && item != null) {
+        return Common.getThumbnailImageSrc(className, item);
+      } else {
+        return '';
+      }
+    },
   },
 };
 </script>
@@ -455,7 +450,8 @@ export default {
 }
 
 .search-bar {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+  margin-top: 12px;
 }
 
 .pagination {

src/components/WmsSetting.vue

@@ -142,11 +142,13 @@
       </a-tab-pane>
     </a-tabs>
     <div class="btn-container">
-      <a-button v-if="!isdisable" type="primary" :loading="loading" @click="saveWmsSetting">保存</a-button>
-      <a-button type="primary" @click="changeIsdisabled">
-        <template v-if="isdisable">编辑</template>
-        <template v-else>取消</template>
-      </a-button>
+      <a-space>
+        <a-button v-if="!isdisable" type="primary" :loading="loading" @click="saveWmsSetting">保存</a-button>
+        <a-button type="primary" @click="changeIsdisabled">
+          <template v-if="isdisable">编辑</template>
+          <template v-else>取消</template>
+        </a-button>
+      </a-space>
     </div>
   </div>
 </template>
@@ -351,4 +353,11 @@ export default {
   padding-left: 10px;
   padding-right: 10px;
 }
+.btn-container {
+  margin-top: 10px;
+}
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/customer/BalanceInventory.vue

@@ -1,222 +1,95 @@
 <template>
-  <a-layout>
-    <a-layout-header>
-      <Navbar title="物料结存" :is-go-back="true" />
-    </a-layout-header>
-    <a-layout-content style="padding: 24px">
-      <!-- 查询表单区域 -->
-      <a-row gutter="16">
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-form-label>
-                <span style="color: red"> * </span>
-                选择月份
-              </a-form-label>
-              <a-select
-                v-model="selectedPeriodId"
-                @change="getDateAndMonth"
-              >
-                <a-select-option
-                  v-for="periodDtoItem in periodDtos"
-                  :key="periodDtoItem.id"
-                  :value="periodDtoItem.id"
-                >
-                  {{ periodDtoItem.periodDate }}
-                  {{ periodDtoItem.closed ? "(已关闭)" : "" }}
-                  {{ periodDtoItem.isAccountDate ? "登录" : "" }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-form>
-        </a-col>
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-form-label>
-                <span style="color: red"> * </span>
-                仓库
-              </a-form-label>
-              <a-select
-                v-model="warehouseId"
-                :options="warehouseOptions"
-                :filter-option="false"
-                show-search
-                placeholder="请选择仓库"
-                :remote-method="searchWarehouse"
-                @change="handleWarehouseChange"
-              />
-            </a-form-item>
-          </a-form>
-        </a-col>
-        <a-col :span="12">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-button type="primary" @click="queryBalanceInventory">
-                查询
-              </a-button>
-              <a-button type="success" @click="balance">
-                结存
-              </a-button>
-              <a-button type="success" @click="deleteBalanceInventory">
-                删除
-              </a-button>
-              <a-button type="primary" @click="exportExcel">
-                导出
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-col>
-      </a-row>
-      <!-- 汇总表格区域 -->
-      <a-card style="margin-top: 24px">
-        <a-table :data-source="[balanceInventory]" :columns="columnsSummary" bordered>
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.dataIndex === 'name'">
-              <span><strong>名称:{{ record.name }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'documentNo'">
-              <span><strong>单据号:{{ record.documentNo }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'warehouseName'">
-              <span><strong>仓库:{{ record.warehouseName }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'balanceUserName'">
-              <span><strong>结存人:{{ record.balanceUserName }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'balanceTime'">
-              <span><strong>操作时间:{{ record.balanceTime }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockInQuantity'">
-              <span><strong>当月入库总数量:{{ record.stockInQuantity }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockInTotalPrice'">
-              <span><strong>当月入库总金额:{{ record.stockInTotalPrice }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockInTotalPriceIncludingTax'">
-              <span><strong>当月入库含税总金额:{{ record.stockInTotalPriceIncludingTax }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockOutQuantity'">
-              <span><strong>当月出库总数量:{{ record.stockOutQuantity }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockOutTotalPrice'">
-              <span><strong>当月出库总金额:{{ record.stockOutTotalPrice }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'stockOutTotalPriceIncludingTax'">
-              <span><strong>当月出库含税总金额:{{ record.stockOutTotalPriceIncludingTax }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'afterQuantity'">
-              <span><strong>期末结存数量:{{ record.afterQuantity }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'afterTotalPrice'">
-              <span><strong>期末结存总金额:{{ record.afterTotalPrice }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'afterTotalPriceIncludingTax'">
-              <span><strong>期末结存含税总金额:{{ record.afterTotalPriceIncludingTax }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'balanceYearMonth'">
-              <span><strong>结存年月：{{ record.balanceYear }}-{{ record.balanceMouth }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'beforeQuantity'">
-              <span><strong>期初结存数量:{{ record.beforeQuantity }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'beforeTotalPrice'">
-              <span><strong>期初结存总金额:{{ record.beforeTotalPrice }}</strong></span>
-            </template>
-            <template v-if="column.dataIndex === 'beforeTotalPriceIncludingTax'">
-              <span><strong>期初结存含税总金额:{{ record.beforeTotalPriceIncludingTax }}</strong></span>
-            </template>
-          </template>
-        </a-table>
-      </a-card>
-      <!-- 详情查询表单区域 -->
-      <a-row gutter="16" style="margin-top: 24px">
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-form-label>物料编码</a-form-label>
-              <a-input
-                v-model="inventoryNo"
-                placeholder="物料编码"
-                @keyup.enter="initGetDatas"
-              />
-            </a-form-item>
-          </a-form>
-        </a-col>
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-form-label>物料名称</a-form-label>
-              <a-input
-                v-model="inventoryName"
-                placeholder="物料名称"
-                @keyup.enter="initGetDatas"
-              />
-            </a-form-item>
-          </a-form>
-        </a-col>
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-form-label>规格型号</a-form-label>
-              <a-input
-                v-model="inventoryType"
-                placeholder="规格型号"
-                @keyup.enter="initGetDatas"
-              />
-            </a-form-item>
-          </a-form>
-        </a-col>
-        <a-col :span="6">
-          <a-form layout="inline">
-            <a-form-item>
-              <a-button type="primary" @click="initGetDatas">
-                查看结存详情
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-col>
-      </a-row>
-      <!-- 详情表格区域 -->
-      <a-table
-        :data-source="balanceInventoryLines"
-        :columns="columnsDetails"
-        :pagination="pagination"
-        bordered
-        style="margin-top: 24px"
-      />
-      <!-- 分页信息区域 -->
-      <div v-if="balanceInventoryId != null" style="margin-top: 24px">
-        <div style="float: left">
-          <span>第{{ (pagination.current - 1) * pagination.pageSize + 1 }}-{{
-            pagination.current * pagination.pageSize
-          }}条,共计{{ pagination.total }}条,每页显示</span>
-          <a-select
-            v-model="pagination.pageSize"
-            style="width: 80px; margin: 0 5px"
-            @change="gridSizeSelect"
-          >
-            <a-select-option value="10">10</a-select-option>
-            <a-select-option value="20">20</a-select-option>
-            <a-select-option value="30">30</a-select-option>
+  <Navbar title="物料结存" :is-go-back="true" />
+
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="选择月份" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-select v-model:value="selectedPeriodId" class="w-full" @change="getDateAndMonth">
+            <a-select-option v-for="periodDtoItem in periodDtos" :key="periodDtoItem.id" :value="periodDtoItem.id">
+              {{ periodDtoItem.periodDate }}
+              {{ periodDtoItem.closed ? "(已关闭)" : "" }}
+              {{ periodDtoItem.isAccountDate ? "登录" : "" }}
+            </a-select-option>
           </a-select>
-          <span>条</span>
-        </div>
-        <div style="float: right">
-          <a-pagination
-            v-if="pagination.pages > 0"
-            :current="pagination.current"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            @change="getDatas"
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="选择仓库" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-select
+            v-model:value="warehouseId" :options="warehouseOptions" placeholder="请选择仓库" class="w-full"
+            @change="handleWarehouseChange"
           />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item>
+          <a-space>
+            <a-button type="primary" @click="queryBalanceInventory">
+              查询
+            </a-button>
+            <a-button @click="balance">
+              结存
+            </a-button>
+            <a-button danger click="deleteBalanceInventory">
+              删除
+            </a-button>
+            <a-button type="dashed" @click="exportExcel">
+              导出
+            </a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <div class="grid-container">
+    <a-row v-for="(row, rowIndex) in gridData" :key="rowIndex" :gutter="0" class="grid-row">
+      <a-col v-for="(col, colIndex) in row" :key="colIndex" :span="col.span" class="grid-cell">
+        <div class="cell-content">
+          <span class="cell-label">{{ col.label }}</span>
+          <span class="cell-value">{{ col.value }}</span>
         </div>
-      </div>
-    </a-layout-content>
-    <a-layout-footer>
-      <Loading v-if="loading" />
-    </a-layout-footer>
-  </a-layout>
+      </a-col>
+    </a-row>
+  </div>
+
+  <a-form :colon="false" style="margin-top: 24px">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="物料编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryNo" placeholder="物料编码" class="w-full" @keyup.enter="initGetDatas" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="物料名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryName" placeholder="物料名称" class="w-full" @keyup.enter="initGetDatas" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryType" placeholder="规格型号" class="w-full" @keyup.enter="initGetDatas" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item>
+          <a-button type="primary" @click="initGetDatas">
+            查看结存详情
+          </a-button>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+
+  <CommonTable
+    ref="commonTableRef" :x-scroll="3000" :columns="columnsDetails" :data-source="balanceInventoryLines"
+    :total="pagination.total" @get-pager="getPageParams"
+  >
+    <template #bodyCell="{ column, record }">
+      <span v-if="column.dataIndex === 'index'">{{ record.index + 1 }}</span>
+    </template>
+  </CommonTable>
+
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -224,13 +97,16 @@ import Common from '../common/Common.js';
 import BalanceInventoryResource from '../api/wms/BalanceInventoryResource.js';
 import BalanceInventoryLineResource from '../api/wms/BalanceInventoryLineResource.js';
 import PeriodResource from '../api/finance/PeriodResource.js';
-import { message as Notify } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
 
 export default {
-  components: {},
+  components: {
+    CommonTable,
+  },
   data() {
     return {
-      warehouseOptions:[],
+      warehouseOptions: [],
       balanceInventory: {},
       balanceInventoryId: undefined,
       balanceInventoryLines: [],
@@ -249,49 +125,55 @@ export default {
       balanceInventoryResultDto: {},
       periodDtos: [],
       periodDto: {},
-      selectedPeriodId: '',
+      selectedPeriodId: null,
       loading: false,
-      columnsSummary: [
-        { title: '名称', dataIndex: 'name', width: 120 },
-        { title: '单据号', dataIndex: 'documentNo', width: 150 },
-        { title: '仓库', dataIndex: 'warehouseName', width: 120 },
-        { title: '结存人', dataIndex: 'balanceUserName', width: 120 },
-        { title: '操作时间', dataIndex: 'balanceTime', width: 150 },
-        { title: '当月入库总数量', dataIndex: 'stockInQuantity', width: 150 },
-        { title: '当月入库总金额', dataIndex: 'stockInTotalPrice', width: 150 },
-        { title: '当月入库含税总金额', dataIndex: 'stockInTotalPriceIncludingTax', width: 180 },
-        { title: '当月出库总数量', dataIndex: 'stockOutQuantity', width: 150 },
-        { title: '当月出库总金额', dataIndex: 'stockOutTotalPrice', width: 150 },
-        { title: '当月出库含税总金额', dataIndex: 'stockOutTotalPriceIncludingTax', width: 180 },
-        { title: '期末结存数量', dataIndex: 'afterQuantity', width: 150 },
-        { title: '期末结存总金额', dataIndex: 'afterTotalPrice', width: 150 },
-        { title: '期末结存含税总金额', dataIndex: 'afterTotalPriceIncludingTax', width: 180 },
-        { title: '结存年月', dataIndex: 'balanceYearMonth', width: 120 },
-        { title: '期初结存数量', dataIndex: 'beforeQuantity', width: 150 },
-        { title: '期初结存总金额', dataIndex: 'beforeTotalPrice', width: 150 },
-        { title: '期初结存含税总金额', dataIndex: 'beforeTotalPriceIncludingTax', width: 180 },
-      ],
       columnsDetails: [
-        { title: '物料编码', dataIndex: 'inventoryNo', width: 120 },
-        { title: '物料名称', dataIndex: 'inventoryName', width: 150 },
-        { title: '规格型号', dataIndex: 'inventoryType', width: 120 },
-        { title: '物料类别名称', dataIndex: 'inventoryClassName', width: 150 },
-        { title: '期初单价', dataIndex: 'beforeUnitPrice', width: 120 },
-        { title: '期初数量', dataIndex: 'beforeQuantity', width: 120 },
-        { title: '期初总金额', dataIndex: 'beforeTotalPrice', width: 150 },
-        { title: '期初含税总金额', dataIndex: 'beforeTotalPriceIncludingTax', width: 180 },
-        { title: '入库单价', dataIndex: 'stockInUnitPrice', width: 120 },
-        { title: '入库数量', dataIndex: 'stockInQuantity', width: 120 },
-        { title: '入库总金额', dataIndex: 'stockInTotalPrice', width: 150 },
-        { title: '入库含税总金额', dataIndex: 'stockInTotalPriceIncludingTax', width: 180 },
-        { title: '出库单价', dataIndex: 'stockOutUnitPrice', width: 120 },
-        { title: '出库数量', dataIndex: 'stockOutQuantity', width: 120 },
-        { title: '出库总金额', dataIndex: 'stockOutTotalPrice', width: 150 },
-        { title: '出库含税总金额', dataIndex: 'stockOutTotalPriceIncludingTax', width: 180 },
-        { title: '期末单价', dataIndex: 'afterUnitPrice', width: 120 },
-        { title: '期末数量', dataIndex: 'afterQuantity', width: 120 },
-        { title: '期末总金额', dataIndex: 'afterTotalPrice', width: 150 },
-        { title: '期末含税总金额', dataIndex: 'afterTotalPriceIncludingTax', width: 180 },
+        { title: '序号', dataIndex: 'index' },
+        { title: '物料编码', dataIndex: 'inventoryNo' },
+        { title: '物料名称', dataIndex: 'inventoryName' },
+        { title: '规格型号', dataIndex: 'inventoryType' },
+        { title: '物料类别名称', dataIndex: 'inventoryClassName' },
+        { title: '期初单价', dataIndex: 'beforeUnitPrice' },
+        { title: '期初数量', dataIndex: 'beforeQuantity' },
+        { title: '期初总金额', dataIndex: 'beforeTotalPrice' },
+        { title: '期初含税总金额', dataIndex: 'beforeTotalPriceIncludingTax' },
+        { title: '入库单价', dataIndex: 'stockInUnitPrice' },
+        { title: '入库数量', dataIndex: 'stockInQuantity' },
+        { title: '入库总金额', dataIndex: 'stockInTotalPrice' },
+        { title: '入库含税总金额', dataIndex: 'stockInTotalPriceIncludingTax' },
+        { title: '出库单价', dataIndex: 'stockOutUnitPrice' },
+        { title: '出库数量', dataIndex: 'stockOutQuantity' },
+        { title: '出库总金额', dataIndex: 'stockOutTotalPrice' },
+        { title: '出库含税总金额', dataIndex: 'stockOutTotalPriceIncludingTax' },
+        { title: '期末单价', dataIndex: 'afterUnitPrice' },
+        { title: '期末数量', dataIndex: 'afterQuantity' },
+        { title: '期末总金额', dataIndex: 'afterTotalPrice' },
+        { title: '期末含税总金额', dataIndex: 'afterTotalPriceIncludingTax' },
+      ],
+      gridData: [[
+        { label: '名称:', value: this.balanceInventory?.name },
+        { label: '单据号:', value: this.balanceInventory?.documentNo },
+        { label: '仓库:', value: this.balanceInventory?.warehouseName },
+        { label: '结存人:', value: this.balanceInventory?.balanceUserName },
+        { label: '操作时间:', value: this.balanceInventory?.balanceTime },
+        { label: '结存年月:', value: this.balanceInventory ? this.balanceInventory?.balanceYear + '-' + this.balanceInventory?.balanceMouth : '' },
+      ],
+      [
+        { label: '期初结存数量:', value: this.balanceInventory?.beforeQuantity },
+        { label: '期初结存总金额:', value: this.balanceInventory?.beforeTotalPrice },
+        { label: '期初结存含税总金额:', value: this.balanceInventory?.beforeTotalPriceIncludingTax },
+        { label: '当月入库总数量:', value: this.balanceInventory?.stockInQuantity },
+        { label: '当月入库总金额:', value: this.balanceInventory?.stockInTotalPrice },
+        { label: '当月入库含税总金额:', value: this.balanceInventory?.stockInTotalPriceIncludingTax },
+      ],
+      [
+        { label: '当月出库总数量:', value: this.balanceInventory?.stockOutQuantity },
+        { label: '当月出库总金额:', value: this.balanceInventory?.stockOutTotalPrice },
+        { label: '当月出库含税总金额:', value: this.balanceInventory?.stockOutTotalPriceIncludingTax },
+        { label: '期末结存数量:', value: this.balanceInventory?.afterQuantity },
+        { label: '期末结存总金额:', value: this.balanceInventory?.afterTotalPrice },
+        { label: '期末结存含税总金额:', value: this.balanceInventory?.afterTotalPriceIncludingTax },
+      ],
       ],
     };
   },
@@ -300,6 +182,13 @@ export default {
     this.loadSelectWarehouse();
   },
   methods: {
+
+    getPageParams(page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getDatas();
+    },
+
     exportExcel() {
       var _self = this;
       if (_self.balanceInventoryId == null) {
@@ -340,6 +229,8 @@ export default {
               });
               _self.periodDtos = successData.datas;
             }
+          } else {
+            message.warning(successData.errorMessage);
           }
         },
         errorData => {
@@ -362,6 +253,8 @@ export default {
               value: item.id,
               label: item.name,
             }));
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: error => {
@@ -384,6 +277,8 @@ export default {
               value: item.id,
               label: item.name,
             }));
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: error => {
@@ -422,11 +317,11 @@ export default {
         _self.periodDto.length == 0 ||
         _self.selectedPeriodId == null
       ) {
-        Common.showDialog('提示', '请选择月份', 'error');
+        message.warning('请选择月份');
         return;
       }
       if (_self.warehouseId == undefined) {
-        Common.showDialog('提示', '请选择仓库', 'error');
+        message.warning('请选择仓库');
         return;
       }
       var param = {
@@ -440,8 +335,10 @@ export default {
             _self.balanceInventory = successData.data;
             _self.balanceInventoryId = successData.data.balanceInventoryId;
             _self.getDatas();
-            _self.loading = false;
+          } else {
+            message.warning(successData.errorMessage);
           }
+          _self.loading = false;
         },
         errorData => {
           _self.loading = false;
@@ -456,11 +353,11 @@ export default {
         _self.periodDto.length == 0 ||
         _self.selectedPeriodId == null
       ) {
-        Common.showDialog('提示', '请选择月份', 'error');
+        message.warning('请选择月份');
         return;
       }
       if (_self.warehouseId == undefined) {
-        Common.showDialog('提示', '请选择仓库', 'error');
+        message.warning('请选择仓库');
         return;
       }
       var param = {
@@ -475,7 +372,10 @@ export default {
             _self.balanceInventoryId = undefined;
             _self.balanceInventoryLines = [];
             _self.loading = false;
+          } else {
+            message.warning(successData.errorMessage);
           }
+          _self.loading = false;
         },
         errorData => {
           _self.loading = false;
@@ -485,8 +385,7 @@ export default {
     },
     initGetDatas() {
       var _self = this;
-      _self.pagination.current = 1;
-      this.getDatas();
+      _self.$refs.commonTableRef.backFirstPage();
     },
     getDatas() {
       var _self = this;
@@ -518,7 +417,10 @@ export default {
             _self.pagination.pages = Math.ceil(
               successData.total / successData.length,
             );
+          } else {
+            message.warning(successData.errorMessage);
           }
+          _self.loading = false;
         },
         errorData => {
           _self.loading = false;
@@ -533,14 +435,14 @@ export default {
         _self.periodDto.length == 0 ||
         _self.selectedPeriodId == null
       ) {
-        Common.showDialog('提示', '请选择月份', 'error');
+        message.warning('请选择月份');
         return;
       }
       if (_self.warehouseId == null) {
-        Common.showDialog('提示', '请选择仓库', 'error');
+        message.warning('请选择仓库');
         return;
       }
-      Notify.confirm({
+      Modal.confirm({
         title: '结存提示',
         content:
           '您确定要将仓库：' +
@@ -555,7 +457,7 @@ export default {
         onOk() {
           _self.submitStock();
         },
-        onCancel() {},
+        onCancel() { },
       });
     },
     submitStock() {
@@ -599,5 +501,83 @@ export default {
 </script>
 
 <style scoped>
-/* 可以根据需要添加自定义样式 */
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
+
+.grid-container {
+  width: 100%;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.grid-row {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.grid-row:last-child {
+  border-bottom: none;
+}
+
+.grid-cell {
+  padding: 12px;
+  border-right: 1px solid #f0f0f0;
+  min-height: 42px;
+  flex: 1;
+}
+
+.grid-cell:last-child {
+  border-right: none;
+}
+
+.cell-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  justify-content: center;
+}
+
+.cell-label {
+  color: rgba(0, 0, 0, 0.65);
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.cell-value {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .grid-row {
+    flex-wrap: wrap;
+  }
+
+  .grid-cell {
+    width: 50% !important;
+    min-height: 80px;
+  }
+}
+
+@media (max-width: 576px) {
+  .grid-cell {
+    width: 100% !important;
+  }
+}
 </style>

src/customer/InventorySearchDetail.vue

@@ -1,98 +1,81 @@
 <template>
-  <a-layout class="container">
-    <h1 class="page-header" style="margin-top: 10px; margin-bottom: 0px;">
-      <AuthImage
-        :auth-src="Common.getThumbnailImageSrc(inventoryClassName, showInventory.imageName)" class="image img-thumbnail"
-        style="width: 78px; height: 78px;" @click="$refs.imagePreview.preview(inventoryClassName, showInventory.imageName)"
-      />
+  <h1 class="page-header" style="margin-top: 10px; margin-bottom: 0px;">
+    <AntdAuthImage
+      :auth-src="Common.getThumbnailImageSrc(inventoryClassName, showInventory.imageName)"
+      :preview-src="Common.getImageSrc(inventoryClassName, showInventory.imageName)"
+      :width="78" :height="78"
+    />
 
-      物料详细信息
-    </h1>
-    <a-card :bordered="false" class="form-card">
-      <a-row :gutter="16" class="asset-detail">
-        <a-col :span="6">
-          <strong>存货编号:{{ showInventory.no }}</strong>
-        </a-col>
-        <a-col :span="6">
-          <strong>存货名称:{{ showInventory.name }}</strong>
-        </a-col>
-        <a-col :span="6">
-          <strong>所属公司:{{ showInventory.client }}</strong>
-        </a-col>
-        <a-col :span="6">
-          <strong>规格型号:{{ showInventory.type }}</strong>
-        </a-col>
-      </a-row>
+    物料详细信息
+  </h1>
+  <a-row :gutter="16" class="asset-detail">
+    <a-col :span="6">
+      <strong>存货编号:{{ showInventory.no }}</strong>
+    </a-col>
+    <a-col :span="6">
+      <strong>存货名称:{{ showInventory.name }}</strong>
+    </a-col>
+    <a-col :span="6">
+      <strong>所属公司:{{ showInventory.client }}</strong>
+    </a-col>
+    <a-col :span="6">
+      <strong>规格型号:{{ showInventory.type }}</strong>
+    </a-col>
+  </a-row>
 
-      <a-tabs v-model:activeKey="activeContent" class="data-tabs">
-        <a-tab-pane key="1" tab="出入库流水">
-          <InAndOutFlow ref="inAndOutFlow" :display-data="dataId" />
-          <a-list item-layout="horizontal" :data-source="historyEvents2">
-            <template #renderItem="{ item }">
-              <a-list-item>
-                <template #actions>
-                  <a-image
-                    :src="getHistoryIconSrc(item.title)"
-                    width="45px"
-                    @click="showImage(item.image)"
-                  />
-                </template>
-                <a-list-item-meta
-                  :title="item.title"
-                  :description="item.content"
-                >
-                  <template #description>
-                    <p class="event-time">时间: {{ item.eventDate }}</p>
-                    {{ item.content }}
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
+  <a-tabs v-model:activeKey="activeContent" class="data-tabs">
+    <a-tab-pane key="1" tab="出入库流水">
+      <InAndOutFlow ref="inAndOutFlow" :display-data="dataId" />
+      <a-list item-layout="horizontal" :data-source="historyEvents2">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <template #actions>
+              <a-image :src="getHistoryIconSrc(item.title)" width="45px" @click="showImage(item.image)" />
             </template>
-          </a-list>
-        </a-tab-pane>
+            <a-list-item-meta :title="item.title" :description="item.content">
+              <template #description>
+                <p class="event-time">时间: {{ item.eventDate }}</p>
+                {{ item.content }}
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-tab-pane>
+
+    <a-tab-pane key="2" tab="库存情况">
+      <a-table :data-source="stockInfos" :columns="stockColumns" row-key="id" size="small" />
+    </a-tab-pane>
 
-        <a-tab-pane key="2" tab="库存情况">
-          <a-table
-            :data-source="stockInfos"
-            :columns="stockColumns"
-            row-key="id"
-            size="small"
-          />
-        </a-tab-pane>
+    <a-tab-pane key="3" tab="库位信息">
+      <a-table
+        :data-source="positionInfos" :columns="positionColumns" :pagination="pagination2" row-key="id"
+        size="small"
+      />
+    </a-tab-pane>
+  </a-tabs>
 
-        <a-tab-pane key="3" tab="库位信息">
-          <a-table
-            :data-source="positionInfos"
-            :columns="positionColumns"
-            :pagination="pagination2"
-            row-key="id"
-            size="small"
-          />
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
+  <a-modal v-model:open="modal" title="历史图片" :footer="null">
+    <a-image :src="imageUrl" />
+  </a-modal>
 
-    <a-modal v-model:open="modal" title="历史图片" :footer="null">
-      <a-image :src="imageUrl" />
-    </a-modal>
-    
-    <Loading v-if="loading" />
-    <ImagePreview ref="imagePreview" />
-  </a-layout>
+  <Loading v-if="loading" />
+  <ImagePreview ref="imagePreview" />
 </template>
 
 <script>
 import Common from '../common/Common.js';
 import InAndOutFlow from '../stock/InAndOutFlow.vue';
+import AntdAuthImage from '../common/AntdAuthImage.vue';
 
 
 export default {
 
   components: {
     InAndOutFlow,
-    
+    AntdAuthImage,
   },
-  data: function() {
+  data: function () {
     this.Common = Common;
     return {
       pagination: {
@@ -155,18 +138,18 @@ export default {
   },
 
   computed: {
-    dataId: function() {
-      return {inventoryId: this.$route.query.inventoryresultId};
-    }, 
+    dataId: function () {
+      return { inventoryId: this.$route.query.inventoryresultId };
+    },
   },
 
   watch: {},
 
-  mounted: function() {
+  mounted: function () {
     var _self = this;
-    
+
     var inventoryresultId = _self.$route.query.inventoryresultId;
-  
+
     _self.findInventoryById(inventoryresultId);
     if (_self.firstSearch) {
       _self.condition = localStorage.getItem('##searchStr##');
@@ -174,25 +157,25 @@ export default {
     }
   },
 
-  beforeUnmount: function() {
-    
+  beforeUnmount: function () {
+
   },
 
   methods: {
-    findInventoryById: function(inventoryresultId) {
+    findInventoryById: function (inventoryresultId) {
       var _self = this;
       $.ajax({
         url: Common.getApiURL('InventoryResource/findInventoryById'),
         type: 'post',
         data: inventoryresultId,
         contentType: 'application/json',
-        beforeSend: function(request) {
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function(data) {
+        success: function (data) {
           _self.showItem2(data);
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -200,10 +183,10 @@ export default {
 
 
     /**
-			 * 显示存货详细信息
-			 * @param {Object} inventoryresult
-			 */
-    showItem2: function(inventoryresult) {
+       * 显示存货详细信息
+       * @param {Object} inventoryresult
+       */
+    showItem2: function (inventoryresult) {
       var _self = this;
       _self.showInventory = inventoryresult;
       // 查询生命周期数据
@@ -211,21 +194,21 @@ export default {
       _self.getStockInfo();
     },
 
-    callbackFun: function() {
+    callbackFun: function () {
       if (this.showAssetInstance == undefined || this.showAssetInstance == '') {
         return;
       }
       this.showItem(this.showAssetInstance);
     },
-    showImage: function(imageName) {
+    showImage: function (imageName) {
       this.imageUrl = imageName;
       this.modal = true;
     },
 
     /**
-			 * 查询存货的出入库记录
-			 */
-    getHistoryEvent2: function() {
+       * 查询存货的出入库记录
+       */
+    getHistoryEvent2: function () {
       var _self = this;
       $.ajax({
         url: Common.getApiURL('StockOutResource/getHistoryEventByInventory'),
@@ -236,23 +219,23 @@ export default {
           startDate: _self.startDate,
           endDate: _self.endDate,
         },
-        beforeSend: function(request) {
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function(data) {
+        success: function (data) {
           console.log(data);
           _self.historyEvents2 = data;
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
 
     /**
-			 * 根据inventoryId获取库存信息
-			 */
-    getStockInfo: function() {
+       * 根据inventoryId获取库存信息
+       */
+    getStockInfo: function () {
       var _self = this;
       $.ajax({
         url: Common.getApiURL('StockOutResource/getStockInfoByInventory'),
@@ -261,21 +244,21 @@ export default {
         data: {
           inventoryId: _self.showInventory.id,
         },
-        beforeSend: function(request) {
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function(data) {
+        success: function (data) {
           console.log(data);
           _self.stockInfos = data;
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
 
     // 获取图标
-    getHistoryIconSrc: function(title) {
+    getHistoryIconSrc: function (title) {
       var iconSrc = 'static/image/';
       switch (title) {
       case '资产盘点':
@@ -337,4 +320,3 @@ export default {
   color: rgba(0, 0, 0, 0.45);
 }
 </style>
-

src/customer/InvoiceGenerate.vue

@@ -1,212 +1,157 @@
 <template>
-  <a-layout>
-    <!-- 导航栏 -->
-    <Navbar title="发货" :is-go-back="true" />
-    <a-layout-content>
-      <!-- 表单区域 -->
-      <a-form layout="inline" class="search-form">
-        <!-- 项目选择 -->
-        <a-form-item>
-          <a-form-label>
-            <span class="text-danger">*</span> 项目选择
-          </a-form-label>
-          <a-select
-            v-model="projectItemId"
-            style="width: 250px"
-            placeholder="请选择项目"
-            @change="handleProjectChange"
-          >
-            <a-select-option
-              v-for="item in projectOptions"
-              :key="item.id"
-              :value="item.id"
-            >
-              {{ item.name }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!-- 仓库选择 -->
-        <a-form-item>
-          <a-form-label>
-            <span class="text-danger">*</span> 仓库选择
-          </a-form-label>
-          <a-select
-            v-model="warehouseId"
-            style="width: 250px"
-            placeholder="请选择仓库"
-            @change="handleWarehouseChange"
-          >
-            <a-select-option
-              v-for="item in warehouseOptions"
-              :key="item.id"
-              :value="item.id"
-            >
-              {{ item.name }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <!-- 查询和生成发货单按钮 -->
-        <a-form-item>
-          <a-button type="primary" @click="addition">查询</a-button>
-          <a-button type="primary" @click="addition1">生成发货单</a-button>
-        </a-form-item>
-      </a-form>
-      <!-- 发货单表格 -->
-      <a-table
-        :data-source="pageStockOutInvoiceDtos"
-        :columns="columns"
-        :pagination="pagination"
-        row-key="id"
-      >
-        <template #bodyCell="{ column, record }">
-          <!-- 选择列 -->
-          <template v-if="column.dataIndex === 'selection'">
-            <a-checkbox
-              v-model="record.checked"
-              :disabled="record.isPicked"
-              @click="handleCheckboxClick(record)"
-            />
-          </template>
-          <!-- 发货状态列 -->
-          <template v-if="column.dataIndex === 'isPicked'">
-            {{ record.isPicked ? '已发货' : '未发货' }}
-          </template>
-        </template>
-      </a-table>
-      <!-- 新建发货单模态框 -->
-      <a-modal
-        v-model:visible="modal"
-        title="新建发货单"
-        :footer="null"
-      >
-        <a-form layout="vertical" class="invoice-form">
-          <!-- 选择收货信息 -->
-          <a-form-item label="选择收货信息">
-            <a-select
-              v-model="projectItemAddress"
-              label="projectItemAddressInfo"
-              :options="projectItemAddressList"
-              @input="selectedProjectItemAddress"
-            />
-          </a-form-item>
-          <!-- 收货相关信息 -->
-          <a-form-item label="收货单位">
-            <a-input v-model="invoiceDto.toClient" placeholder="收货单位" />
-          </a-form-item>
-          <a-form-item label="收货地址">
-            <a-input v-model="invoiceDto.toAddress" placeholder="收货地址" />
-          </a-form-item>
-          <a-form-item label="收货联系人">
-            <a-input v-model="invoiceDto.toContractUser" placeholder="收货联系人" />
-          </a-form-item>
-          <a-form-item label="收货联系电话">
-            <a-input v-model="invoiceDto.toContractPhone" placeholder="收货联系电话" />
-          </a-form-item>
-          <!-- 客户联系人 -->
-          <a-form-item label="客户联系人">
-            <a-input v-model="invoiceDto.customerUser" placeholder="客户联系人" />
-          </a-form-item>
-          <!-- 选择发货信息 -->
-          <a-form-item label="选择发货信息">
-            <a-select
-              v-model="projectItemAddressFrom"
-              label="projectItemAddressInfoFrom"
-              :options="projectItemAddressListFrom"
-              @input="selectprojectItemAddressFrom"
-            />
-          </a-form-item>
-          <!-- 发货相关信息 -->
-          <a-form-item label="发货单位">
-            <a-input v-model="invoiceDto.fromClient" placeholder="发货单位" />
-          </a-form-item>
-          <a-form-item label="发货地址">
-            <a-input v-model="invoiceDto.fromAddress" placeholder="发货地址" />
-          </a-form-item>
-          <a-form-item label="发货联系人">
-            <a-input v-model="invoiceDto.fromContractUser" placeholder="发货联系人" />
-          </a-form-item>
-          <a-form-item label="发货联系电话">
-            <a-input v-model="invoiceDto.fromContractPhone" placeholder="发货联系电话" />
-          </a-form-item>
-          <!-- 其他信息 -->
-          <a-form-item label="现场经理">
-            <a-input v-model="invoiceDto.projectManager" placeholder="现场经理" />
-          </a-form-item>
-          <a-form-item label="物流专员">
-            <a-input v-model="invoiceDto.logisticsUser" placeholder="物流专员" />
-          </a-form-item>
-          <a-form-item label="发货信息">
-            <a-input v-model="invoiceDto.invoiceInfo" placeholder="发货信息" />
-          </a-form-item>
-          <a-form-item label="货运代理">
-            <a-input v-model="invoiceDto.transportAgent" placeholder="货运代理" />
-          </a-form-item>
-          <a-form-item label="车辆信息">
-            <a-input v-model="invoiceDto.transportCar" placeholder="车辆信息" />
-          </a-form-item>
-          <a-form-item label="司机信息">
-            <a-input v-model="invoiceDto.transportDriver" placeholder="司机信息" />
-          </a-form-item>
-          <a-form-item label="货位重量">
-            <a-input v-model="invoiceDto.transportWeight" placeholder="货位重量" />
-          </a-form-item>
-          <a-form-item label="货位箱数">
-            <a-input v-model="invoiceDto.transportPackageCount" placeholder="货位箱数" />
-          </a-form-item>
-          <!-- 模态框底部按钮 -->
-          <a-form-item>
-            <a-button type="primary" @click="creatInvoiceOk">生成发货单</a-button>
-            <a-button @click="cancel">返回</a-button>
-          </a-form-item>
-        </a-form>
-      </a-modal>
-      <!-- 选择发货单模态框 -->
-      <a-modal
-        v-model:visible="modal1"
-        title="选择发货单"
-        :footer="null"
-      >
-        <a-table
-          :data-source="invoiceDtos"
-          :columns="invoiceColumns"
-          row-key="id"
-        >
-          <template #bodyCell="{ column, record }">
-            <!-- 选择列 -->
-            <template v-if="column.dataIndex === 'selection'">
-              <a-radio
-                v-model="selectedInvoiceId"
-                :value="record.id"
-                @change="setProjectItemAdjust(record.id)"
-              />
-            </template>
-          </template>
-        </a-table>
-        <!-- 分页组件 -->
-        <a-pagination
-          v-if="pagination2.last_page > 0"
-          :current="pagination2.current_page"
-          :page-size="pagination2.per_page"
-          :total="pagination2.total"
-          @change="findByInvoiceQueryDto"
+  <!-- 导航栏 -->
+  <Navbar title="发货" :is-go-back="false" />
+
+  <!-- 表单区域 -->
+  <a-form layout="inline" class="search-form">
+    <!-- 项目选择 -->
+    <a-form-item label="项目选择" required>
+      <a-select v-model:value="projectItemId" style="width: 220px" placeholder="请选择项目" @change="handleProjectChange">
+        <a-select-option v-for="item in projectOptions" :key="item.id" :value="item.id">
+          {{ item.name }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <!-- 仓库选择 -->
+    <a-form-item label="仓库选择" required>
+      <a-select v-model:value="warehouseId" style="width: 220px" placeholder="请选择仓库" @change="handleWarehouseChange">
+        <a-select-option v-for="item in warehouseOptions" :key="item.id" :value="item.id">
+          {{ item.name }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <!-- 查询和生成发货单按钮 -->
+    <a-form-item>
+      <a-space>
+        <a-button type="primary" @click="addition">查询</a-button>
+        <a-button type="primary" @click="addition1">生成发货单</a-button>
+      </a-space>
+    </a-form-item>
+  </a-form>
+  <!-- 发货单表格 -->
+  <a-table :data-source="pageStockOutInvoiceDtos" :columns="columns" :pagination="pagination" row-key="id">
+    <template #bodyCell="{ column, record }">
+      <!-- 选择列 -->
+      <template v-if="column.dataIndex === 'selection'">
+        <a-checkbox v-model="record.checked" :disabled="record.isPicked" @click="handleCheckboxClick(record)" />
+      </template>
+      <!-- 发货状态列 -->
+      <template v-if="column.dataIndex === 'isPicked'">
+        {{ record.isPicked ? '已发货' : '未发货' }}
+      </template>
+    </template>
+  </a-table>
+  <!-- 新建发货单模态框 -->
+  <a-modal v-model:visible="modal" title="新建发货单" :footer="null">
+    <a-form layout="vertical" class="invoice-form">
+      <!-- 选择收货信息 -->
+      <a-form-item label="选择收货信息">
+        <a-select
+          v-model="projectItemAddress" label="projectItemAddressInfo" :options="projectItemAddressList"
+          @input="selectedProjectItemAddress"
+        />
+      </a-form-item>
+      <!-- 收货相关信息 -->
+      <a-form-item label="收货单位">
+        <a-input v-model="invoiceDto.toClient" placeholder="收货单位" />
+      </a-form-item>
+      <a-form-item label="收货地址">
+        <a-input v-model="invoiceDto.toAddress" placeholder="收货地址" />
+      </a-form-item>
+      <a-form-item label="收货联系人">
+        <a-input v-model="invoiceDto.toContractUser" placeholder="收货联系人" />
+      </a-form-item>
+      <a-form-item label="收货联系电话">
+        <a-input v-model="invoiceDto.toContractPhone" placeholder="收货联系电话" />
+      </a-form-item>
+      <!-- 客户联系人 -->
+      <a-form-item label="客户联系人">
+        <a-input v-model="invoiceDto.customerUser" placeholder="客户联系人" />
+      </a-form-item>
+      <!-- 选择发货信息 -->
+      <a-form-item label="选择发货信息">
+        <a-select
+          v-model="projectItemAddressFrom" label="projectItemAddressInfoFrom"
+          :options="projectItemAddressListFrom" @input="selectprojectItemAddressFrom"
         />
-        <!-- 模态框底部按钮 -->
-        <a-form-item>
-          <a-button type="primary" @click="joinInvoice">加入选择的发货单</a-button>
-          <a-button @click="cancel1">取消</a-button>
-        </a-form-item>
-      </a-modal>
-    </a-layout-content>
-    <a-layout-footer>
-      <Loading v-if="loading" />
-    </a-layout-footer>
-  </a-layout>
+      </a-form-item>
+      <!-- 发货相关信息 -->
+      <a-form-item label="发货单位">
+        <a-input v-model="invoiceDto.fromClient" placeholder="发货单位" />
+      </a-form-item>
+      <a-form-item label="发货地址">
+        <a-input v-model="invoiceDto.fromAddress" placeholder="发货地址" />
+      </a-form-item>
+      <a-form-item label="发货联系人">
+        <a-input v-model="invoiceDto.fromContractUser" placeholder="发货联系人" />
+      </a-form-item>
+      <a-form-item label="发货联系电话">
+        <a-input v-model="invoiceDto.fromContractPhone" placeholder="发货联系电话" />
+      </a-form-item>
+      <!-- 其他信息 -->
+      <a-form-item label="现场经理">
+        <a-input v-model="invoiceDto.projectManager" placeholder="现场经理" />
+      </a-form-item>
+      <a-form-item label="物流专员">
+        <a-input v-model="invoiceDto.logisticsUser" placeholder="物流专员" />
+      </a-form-item>
+      <a-form-item label="发货信息">
+        <a-input v-model="invoiceDto.invoiceInfo" placeholder="发货信息" />
+      </a-form-item>
+      <a-form-item label="货运代理">
+        <a-input v-model="invoiceDto.transportAgent" placeholder="货运代理" />
+      </a-form-item>
+      <a-form-item label="车辆信息">
+        <a-input v-model="invoiceDto.transportCar" placeholder="车辆信息" />
+      </a-form-item>
+      <a-form-item label="司机信息">
+        <a-input v-model="invoiceDto.transportDriver" placeholder="司机信息" />
+      </a-form-item>
+      <a-form-item label="货位重量">
+        <a-input v-model="invoiceDto.transportWeight" placeholder="货位重量" />
+      </a-form-item>
+      <a-form-item label="货位箱数">
+        <a-input v-model="invoiceDto.transportPackageCount" placeholder="货位箱数" />
+      </a-form-item>
+      <!-- 模态框底部按钮 -->
+      <a-form-item>
+        <a-space>
+          <a-button type="primary" @click="creatInvoiceOk">生成发货单</a-button>
+          <a-button @click="cancel">返回</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+  <!-- 选择发货单模态框 -->
+  <a-modal v-model:open="modal1" title="选择发货单" :footer="null">
+    <a-table :data-source="invoiceDtos" :columns="invoiceColumns" row-key="id">
+      <template #bodyCell="{ column, record }">
+        <!-- 选择列 -->
+        <template v-if="column.dataIndex === 'selection'">
+          <a-radio v-model="selectedInvoiceId" :value="record.id" @change="setProjectItemAdjust(record.id)" />
+        </template>
+      </template>
+    </a-table>
+    <!-- 分页组件 -->
+    <a-pagination
+      v-if="pagination2.last_page > 0" :current="pagination2.current_page" :page-size="pagination2.per_page"
+      :total="pagination2.total" @change="findByInvoiceQueryDto"
+    />
+    <!-- 模态框底部按钮 -->
+    <a-form-item>
+      <a-space>
+        <a-button type="primary" @click="joinInvoice">加入选择的发货单</a-button>
+        <a-button @click="cancel1">取消</a-button>
+      </a-space>
+    </a-form-item>
+  </a-modal>
+  <Loading v-if="loading" />
 </template>
 
 <script>
 import Common from '../common/Common.js';
 import InvoiceResource from '../api/wms/InvoiceResource.js';
-import { message as Notify } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 export default {
   data() {
@@ -383,6 +328,8 @@ export default {
         success: data => {
           if (data.errorCode === 0) {
             this.projectOptions = data.datas;
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: XMLHttpRequest => {
@@ -402,6 +349,8 @@ export default {
         success: data => {
           if (data.errorCode === 0) {
             this.warehouseOptions = data.datas;
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: XMLHttpRequest => {
@@ -421,8 +370,8 @@ export default {
     },
     // 查询发货单
     addition() {
-      if (this.projectItemId === undefined || this.warehouseId === undefined) {
-        Notify.error('提示', '仓库与项目选项不能为空');
+      if (this.projectItemId == undefined || this.warehouseId == undefined) {
+        message.warning('仓库与项目选项不能为空');
       } else {
         this.findByStockOutInvoiceQueryDto();
         this.checked = false;
@@ -436,8 +385,9 @@ export default {
           this.stockIds.push(item.stockOutId);
         }
       });
+      console.log(this.stockIds);
       if (this.stockIds.length === 0) {
-        Notify.error('提示', '未勾选任何出库明细');
+        message.warning('未勾选任何出库明细');
       } else {
         this.findByInvoiceQueryDto();
         this.modal1 = true;
@@ -512,6 +462,8 @@ export default {
                 successData.datas[0].totalSize / this.pagination2.per_page,
               );
             }
+          } else {
+            message.warning(successData.errorMessage);
           }
         },
         errorData => {
@@ -521,6 +473,10 @@ export default {
     },
     // 根据查询条件查询出库单
     findByStockOutInvoiceQueryDto() {
+      if (!this.projectItemId) {
+        message.warning('项目选项不能为空');
+        return;
+      }
       this.loading = true;
       const stockOutInvoiceQueryDto = {
         warehouseId: this.warehouseId,
@@ -530,7 +486,7 @@ export default {
         successData => {
           if (successData.errorCode === 0) {
             if (successData.datas.length === 0) {
-              Notify.error('提示', '没有符合此条件的数据');
+              message.warning('没有符合此条件的数据');
             }
             this.pagination.total = successData.datas.length;
             this.stockOutInvoiceDtos = successData.datas;
@@ -538,8 +494,10 @@ export default {
               successData.datas.length / this.pagination.per_page,
             );
             this.getDatas();
-            this.loading = false;
+          } else {
+            message.warning(successData.errorMessage);
           }
+          this.loading = false;
         },
         errorData => {
           this.loading = false;
@@ -611,7 +569,7 @@ export default {
         }
       });
       if (!invoiceDto) {
-        Notify.error('提示', '未选择出库单');
+        message.warning('未选择出库单');
         return;
       }
       this.stockIds.forEach(stockId => {
@@ -626,9 +584,10 @@ export default {
         successData => {
           if (successData.errorCode === 0) {
             this.loading = false;
-            Notify.success('提示', '加入发货单成功');
+            message.success('加入发货单成功');
           } else {
-            Notify.error('提示', successData.errorMessage, false);
+            message.warning(successData.errorMessage);
+            this.loading = false;
             return;
           }
         },
@@ -658,6 +617,7 @@ export default {
             this.modal = false;
           } else {
             Notify.error('提示', successData.errorMessage, false);
+            this.loading = false;
             return;
           }
         },
@@ -783,4 +743,9 @@ export default {
 .invoice-form {
   padding: 20px;
 }
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/customer/RepertoryCheck.vue

@@ -1,177 +1,91 @@
 <template>
-  <div>
-    <!-- 使用 Ant Design 的 PageHeader 替代 Navbar -->
-    <a-page-header title="选择库存生成物料盘点详情" :back-icon="false" />
-    <div class="grid-container">
-      <div class="grid-item-row1-column1">
-        <div class="form-group">
-          <!-- 使用 Ant Design 的 Button 组件 -->
-          <a-button type="primary" @click="getCurrentStock">搜索</a-button>
-          <a-button type="success" @click="generateCheckVouchs">生成盘点明细</a-button>
-          <a-button type="danger" @click="clear">清空</a-button>
-        </div>
-        <div v-for="(data, index) in setPositions" :key="index" class="form-group">
-          <!-- 使用 Ant Design 的 Tag 组件 -->
-          <a-tag closable @close="setPosition2(index)">
-            {{ data.positionBarCode }}
-          </a-tag>
-        </div>
-      </div>
-      <div class="grid-item-row2-column1">
-        <div class="form-inline">
-          <div class="form-group">
-            <label for="isAll" style="width: 96px; line-height: 45px">
-              <span class="text-danger"> * </span>
-              盘点范围
-            </label>
-            <!-- 使用 Ant Design 的 Select 组件 -->
-            <a-select v-model:value="isAll" style="width: 200px">
-              <a-select-option value="true">仓库全部库存</a-select-option>
-              <a-select-option value="false">根据条件选择生成</a-select-option>
-            </a-select>
-          </div>
-        </div>
-        <div v-if="isAll === 'false'">
-          <!-- 使用 Ant Design 的 Collapse 组件 -->
-          <a-collapse>
-            <a-collapse-panel :key="1" header="物料类别名称、编号">
+  <div style="padding: 0 10px;">
+    <Navbar :title="'选择库存生成物料盘点详情'" :is-go-back="false" />
+    <div class="action-buttons">
+      <a-button type="primary" @click="searchDatas">搜索</a-button>
+      <a-button type="dashed" @click="generateCheckVouchs">生成盘点明细</a-button>
+      <a-button danger @click="isAll = 'true'">清空</a-button>
+    </div>
+    <div v-if="setPositions.length > 0" class="selected-positions">
+      <a-tag v-for="(data, index) in setPositions" :key="index" closable @close="setPosition2(index)">
+        {{ data.positionBarCode }}
+      </a-tag>
+    </div>
+    <div style="display: flex; gap: 10px;">
+      <div style="width: 26%;">
+        <div class="filter-section">
+          <a-form layout="inline">
+            <a-form-item label="盘点范围">
+              <a-select v-model:value="isAll" style="width: 200px">
+                <a-select-option value="true">仓库全部物料</a-select-option>
+                <a-select-option value="false">根据条件选择生成</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-form>
+          <div v-show="isAll === 'false'" class="category-panel">
+            <div>
+              <div class="panel-header" @click="toggleNamePanel">
+                <DownOutlined v-show="!namePanelVisible" />
+                <RightOutlined v-show="namePanelVisible" />
+                <span style="margin-left: 5px;">物料类别名称、编号</span>
+              </div>
+            </div>
+            <div v-show="!namePanelVisible">
               <div class="m-tree">
                 <TreeViewNode
-                  v-for="data in inventoryClasses"
-                  :key="data.id"
-                  :node="data"
-                  :is-root="true"
-                  :is-show-check="true"
-                  @node-select="inventoryClassSelect"
+                  v-for="data in inventoryClasses" :key="data.id" :node="data" :is-root="true"
+                  :is-show-check="true" @node-select="inventoryClassSelect"
                 />
               </div>
-            </a-collapse-panel>
-            <a-collapse-panel :key="2" header="货位">
-              <div>
-                <div class="form-group">
-                  <!-- 使用 Ant Design 的 Input 组件 -->
-                  <a-input
-                    v-model:value="positionCondition"
-                    placeholder="输入货位条形码(回车查询)"
-                    @keyup.enter="queryPosition"
-                  />
-                </div>
-                <div class="from-group">
-                  <!-- 使用 Ant Design 的 Table 组件 -->
-                  <a-table
-                    :data-source="showPositions"
-                    :columns="positionColumns"
-                    row-key="id"
-                  >
-                    <template #empty>
-                      <div style="text-align: center;">暂无数据</div>
-                    </template>
-                  </a-table>
-                </div>
+            </div>
+          </div>
+          <div v-show="isAll === 'false'" class="position-panel">
+            <div>
+              <div class="panel-header" @click="togglePanel">
+                <DownOutlined v-show="!panelVisible" />
+                <RightOutlined v-show="panelVisible" />
+                <span style="margin-left: 5px;">货位</span>
               </div>
-            </a-collapse-panel>
-          </a-collapse>
-        </div>
-      </div>
-      <div v-if="isAll === 'false'" class="grid-item-row3-column1">
-        <div class="pull-left">
-          <span>第{{ (pagination.current - 1) * pagination.pageSize + 1 }} - {{
-            Math.min(pagination.current * pagination.pageSize, pagination.total)
-          }} 条，共计 {{ pagination.total }} 条，每页显示</span>
-          <!-- 使用 Ant Design 的 Select 组件 -->
-          <a-select 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="30">30</a-select-option>
-          </a-select>
-          <span>条</span>
-        </div>
-        <div class="pull-right">
-          <!-- 使用 Ant Design 的 Pagination 组件 -->
-          <a-pagination
-            v-if="pagination.total > 0"
-            :current="pagination.current"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            @change="checkDataChangedQueryGridData"
-          />
+
+              <div v-show="!panelVisible">
+                <a-input v-model:value="positionCondition" placeholder="输入货位条形码(回车查询)" @keyup.enter="searchPosition" />
+                <CommonTable
+                  ref="tableRef2" :columns="positionColumns" :data-source="showPositions" :is-select="true"
+                  :extra-height="440" @get-pager="getPositionPagerParams" @get-selected="getPositionSelected"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="grid-item-row2-column2">
-        <!-- 使用 Ant Design 的 Table 组件 -->
-        <a-table
-          :data-source="currentStocks"
-          :columns="currentStockColumns"
-          row-key="id"
-          @row-dblclick="openWindow"
+      <div style="width: 74%;margin:10px 0 0 10px;">
+        <CommonTable
+          ref="tableRef" :columns="currentStockColumns" :data-source="currentStocks"
+          :total="pagination.total" :is-custom-row-click="true" @get-pager="getPagerParams"
+          @custom-row-click="openWindow"
         >
-          <template #empty>
-            <div style="text-align: center;">暂无数据</div>
+          <template #bodyCell="{ column, index }">
+            <span v-if="column.dataIndex === 'index'">
+              {{ index + 1 }}
+            </span>
           </template>
-        </a-table>
+        </CommonTable>
       </div>
-      <div class="grid-item-row3-column2">
-        <div class="pull-left">
-          <span>第{{ (pagination.current - 1) * pagination.pageSize + 1 }} - {{
-            Math.min(pagination.current * pagination.pageSize, pagination.total)
-          }} 条，共计 {{ pagination.total }} 条，每页显示</span>
-          <a-select 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="30">30</a-select-option>
-          </a-select>
-          <span>条</span>
-        </div>
-        <div class="pull-right">
-          <a-pagination
-            v-if="pagination.total > 0"
-            :current="pagination.current"
-            :page-size="pagination.pageSize"
-            :total="pagination.total"
-            @change="checkDataChangedQueryGridData"
-          />
-        </div>
-        <div>
-          <nav>
-            <ul class="pager" style="margin: 5px 0">
-              <li>
-                <!-- 使用 Ant Design 的 Button 组件 -->
-                <a-button
-                  v-if="hasLastPage"
-                  type="link"
-                  @click="previousPage"
-                >
-                  上一页
-                </a-button>
-              </li>
-              <li>
-                <a-button
-                  v-if="hasNextPage"
-                  type="link"
-                  @click="nextPage"
-                >
-                  下一页
-                </a-button>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
-      <!-- 使用 Ant Design 的 Spin 组件 -->
-      <a-spin v-if="loading" />
     </div>
+
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import { UserStorageResource, Uuid } from 'pc-component-v3';
-import { Notify } from 'ant-design-vue';
+import { UserStorageResource, Uuid, Notify } from 'pc-component-v3';
+import { message, Modal } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
+import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
 
 export default {
-  components: {
-    // 可以在这里注册自定义组件
-  },
+  components: { CommonTable, DownOutlined, RightOutlined },
   data() {
     return {
       checked: false,
@@ -191,26 +105,25 @@ export default {
       uuid: Uuid.createUUID(),
       showPositions: [],
       setPositions: [],
-      hasLastPage: false,
-      hasNextPage: false,
-      positionTotalPages: 1,
-      positionNowPage: 1,
+      positionSelectedIds: [],
+      positionPagination: {
+        total: 0,
+        current: 1,
+        pageSize: 10,
+      },
       positionCondition: '',
       loading: false,
+      panelVisible: true,
+      namePanelVisible: true,
     };
   },
   computed: {
     positionColumns() {
       return [
-        {
-          title: '选择',
-          dataIndex: 'check',
-          width: 20,
-        },
         {
           title: '货位条形码',
           dataIndex: 'positionBarCode',
-          width: 60,
+          width: 80,
         },
       ];
     },
@@ -245,7 +158,7 @@ export default {
           _self.checkVouchId = modelData.id;
           _self.warehouseId = modelData.data.warehouse.id;
           _self.warehouseName = modelData.data.warehouse.displayValue[0];
-          _self.getCurrentStock();
+          _self.queryPosition();
         }
       },
       errorData => {
@@ -256,71 +169,49 @@ export default {
   mounted() {
     const _self = this;
     _self.getInventoryClass();
-    _self.queryPosition();
-    // 移除 jQuery 表格调整插件相关代码
   },
   methods: {
-    selectAll() {
-      const _self = this;
-      _self.setPositions = [];
-      if (_self.checked) {
-        for (let i = 0; i < _self.showPositions.length; i++) {
-          _self.showPositions[i].check = true;
-          _self.setPositions.push(_self.showPositions[i]);
-        }
-      } else {
-        for (let j = 0; j < _self.showPositions.length; j++) {
-          _self.showPositions[j].check = false;
-        }
-      }
-      _self.getCurrentStock();
+
+    searchDatas() {
+      this.$refs.tableRef.backFirstPage();
     },
-    setPosition2(index) {
-      const _self = this;
-      const positionBarCode = _self.setPositions[index].positionBarCode;
-      _self.setPositions.splice(index, 1);
-      if (_self.showPositions.length > 0) {
-        _self.showPositions.forEach(item => {
-          if (item.positionBarCode === positionBarCode) {
-            item.check = false;
-          }
-        });
-      }
-      _self.getCurrentStock();
+
+    getPagerParams(page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getCurrentStock();
     },
-    setPosition(index) {
-      const _self = this;
-      if (_self.showPositions[index].check === false) {
-        _self.showPositions[index].check = true;
-        _self.setPositions.push(_self.showPositions[index]);
-      } else {
-        _self.showPositions[index].check = false;
-        let currentIndex = null;
-        for (let i = 0; i < _self.setPositions.length; i++) {
-          if (_self.showPositions[index].id === _self.setPositions[i].id) {
-            currentIndex = i;
-            break;
-          }
-        }
-        if (currentIndex!== null) {
-          _self.setPositions.splice(currentIndex, 1);
-        }
-      }
-      _self.getCurrentStock();
+
+    searchPosition() {
+      this.$refs.tableRef2.backFirstPage();
     },
+
+    getPositionPagerParams(page, pageSize) {
+      this.positionPagination.current = page;
+      this.positionPagination.pageSize = pageSize;
+      this.queryPosition();
+    },
+
+    getPositionSelected(selected) {
+      this.positionSelectedIds = selected.selectedRowKeys;
+      this.setPositions = selected.selectedRows;
+      this.searchDatas();
+    },
+
+    setPosition2(index) {
+      this.positionSelectedIds.splice(index, 1);
+      this.setPositions.splice(index, 1);
+      this.searchDatas();
+    },
+
     getCurrentStock() {
       const _self = this;
       const inventoryClassIds = _self.getSelectedInventoryClassIds();
-      const positionIds = [];
-      if (_self.setPositions && _self.setPositions.length > 0) {
-        _self.setPositions.forEach(item => {
-          positionIds.push(item.id);
-        });
-      }
+
       _self.loading = true;
       const obj = {
         inventoryClassIds,
-        positionIds,
+        positionIds: _self.positionSelectedIds,
         isAll: _self.isAll,
         warehouseId: _self.warehouseId,
         range: {
@@ -341,9 +232,10 @@ export default {
           if (data.errorCode === 0) {
             _self.currentStocks = data.datas;
             _self.pagination.total = data.total;
-            _self.pagination.last_page = Math.ceil(data.total / data.length);
-            _self.loading = false;
+          } else {
+            message.warning(data.errorMessage);
           }
+          _self.loading = false;
         },
         error: (XMLHttpRequest, textStatus, errorThrown) => {
           _self.loading = false;
@@ -351,11 +243,7 @@ export default {
         },
       });
     },
-    judgmentPage() {
-      const _self = this;
-      _self.hasLastPage = _self.positionNowPage > 1;
-      _self.hasNextPage = _self.positionNowPage < _self.positionTotalPages;
-    },
+
     getInventoryClass() {
       const _self = this;
       $.ajax({
@@ -369,6 +257,8 @@ export default {
           if (data.errorCode === 0) {
             _self.initInventoryClass(data.datas);
             _self.inventoryClasses = data.datas;
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: (XMLHttpRequest, textStatus, errorThrown) => {
@@ -397,7 +287,7 @@ export default {
     },
     inventoryClassSelect(node) {
       const _self = this;
-      node.selected =!node.selected;
+      node.selected = !node.selected;
       const current = node.selected;
       function changeSelect(item) {
         item.selected = current;
@@ -408,7 +298,7 @@ export default {
         }
       }
       changeSelect(node);
-      _self.getCurrentStock();
+      _self.searchDatas();
     },
     getSelectedInventoryClassIds() {
       const _self = this;
@@ -428,24 +318,14 @@ export default {
       });
       return arr;
     },
-    previousPage() {
-      const _self = this;
-      _self.positionNowPage--;
-      _self.queryPosition();
-    },
-    nextPage() {
-      const _self = this;
-      _self.positionNowPage++;
-      _self.queryPosition();
-    },
     queryPosition() {
       const _self = this;
       const param = {
         id: _self.warehouseId,
         condition: _self.positionCondition.trim(),
         range: {
-          start: (_self.positionNowPage - 1) * Common.pageSize,
-          length: Common.pageSize,
+          start: (_self.positionPagination.current - 1) * _self.positionPagination.pageSize,
+          length: _self.positionPagination.pageSize,
         },
       };
       _self.showPositions = [];
@@ -470,44 +350,25 @@ export default {
                   positionBarCode: item.positionBarCode,
                   check: false,
                 };
-                let currentIndex = null;
-                if (_self.setPositions && _self.setPositions.length > 0) {
-                  for (let i = 0; i < _self.setPositions.length; i++) {
-                    if (item.positionId === _self.setPositions[i].id) {
-                      currentIndex = i;
-                      break;
-                    }
-                  }
-                }
-                if (currentIndex === null) {
-                  showPosition.check = false;
-                } else {
-                  showPosition.check = true;
-                }
                 _self.showPositions.push(showPosition);
               });
             }
-            _self.positionTotalPages = Math.ceil(data.total / data.length);
-            _self.judgmentPage();
-            _self.loading = false;
+            _self.positionPagination.total = data.total;
+          } else {
+            message.warning(data.errorMessage);
           }
+          _self.loading = false;
         },
         error: (XMLHttpRequest, textStatus, errorThrown) => {
           _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      _self.getCurrentStock();
+      _self.searchDatas();
     },
     generateCheckVouchs() {
       const _self = this;
       const inventoryClassIds = _self.getSelectedInventoryClassIds();
-      const positionIds = [];
-      if (_self.setPositions && _self.setPositions.length > 0) {
-        _self.setPositions.forEach(item => {
-          positionIds.push(item.id);
-        });
-      }
       let information = '';
       if (_self.isAll === 'true') {
         information =
@@ -515,14 +376,14 @@ export default {
       } else {
         information = '您确定要根据选择的过滤条件生成对应的盘点明细';
       }
-      Notify.confirm({
+      Modal.confirm({
         title: '确认生成盘点明细',
         content: `${information} 吗？如果"是"的话，请点击"确定"按钮，否则点击"取消"按钮`,
         onOk() {
           _self.loading = true;
           const obj = {
             inventoryClassIds,
-            positionIds,
+            positionIds: _self.positionSelectedIds,
             isAll: _self.isAll,
             warehouseId: _self.warehouseId,
             checkVouchId: _self.checkVouchId,
@@ -541,13 +402,11 @@ export default {
             },
             success: data => {
               if (data.errorCode === 0) {
-                Notify.success(
-                  '成功',
-                  '盘点明细生成成功，请返回查看。',
-                  4000,
-                );
-                _self.loading = false;
+                message.success('盘点明细生成成功，请返回查看。');
+              } else {
+                message.warning(data.errorMessage);
               }
+              _self.loading = false;
             },
             error: (XMLHttpRequest, textStatus, errorThrown) => {
               _self.loading = false;
@@ -555,176 +414,75 @@ export default {
             },
           });
         },
-        onCancel() {},
+        onCancel() { },
       });
     },
     clear() {
       this.isAll = 'true';
       this.type = 0;
+      this.inventoryClasses = [];
       this.setPositions = [];
-      this.positionNowPage = 1;
+      this.positionSelectedIds = [];
       this.positionCondition = '';
-      this.queryPosition();
-      this.initInventoryClass(this.inventoryClasses);
-      this.pagination.pageSize = Common.pageSize;
-      this.pagination.current = 1;
-      this.getCurrentStock();
+      this.searchPosition();
+      this.getInventoryClass();
       this.checked = false;
-    },
-    gridSizeSelect(newPageSize) {
-      this.pagination.pageSize = newPageSize;
-      this.pagination.current = 1;
-      this.getCurrentStock();
-    },
-    checkDataChangedQueryGridData() {
-      this.getCurrentStock();
+      this.$refs.tableRef2.clear();
     },
     openWindow(item) {
       window.open(
-        `#/desktop/window/window-read/view/050405/0/${item.id}?currPage=1&currIndex=1&totalCount=1&uuid=${Uuid.createUUID()}`,
+        `#/desktop/window1/window-read/view/050405/0/${item.id}?currPage=1&currIndex=1&totalCount=1&uuid=${Uuid.createUUID()}`,
       );
     },
+    togglePanel() {
+      this.panelVisible = !this.panelVisible;
+    },
+    toggleNamePanel() {
+      this.namePanelVisible = !this.namePanelVisible;
+    },
   },
 };
 </script>
 
 <style scoped>
-.grid-container {
-  margin-top: 10px;
-  display: grid;
-  grid-template-columns: 300px auto;
-  grid-template-rows: 35px 1fr 40px 40px;
+.action-buttons {
+  margin-top: 20px;
+  display: flex;
   gap: 10px;
-  justify-items: stretch;
-  align-items: stretch;
-  height: calc(100vh - 160px);
-  overflow: auto;
-}
-
-.grid-item-row1-column1 {
-  grid-row-start: 1;
-  grid-row-end: 2;
-  grid-column-start: 1;
-  grid-column-end: 2;
-}
-
-.grid-item-row2-column1 {
-  grid-row-start: 2;
-  grid-row-end: 4;
-  grid-column-start: 1;
-  grid-column-end: 2;
-  overflow: auto;
-}
-
-.grid-item-row3-column1 {
-  grid-row-start: 4;
-  grid-row-end: 5;
-  grid-column-start: 1;
-  grid-column-end: 2;
-  overflow: auto;
-}
-
-.grid-item-row2-column2 {
-  grid-row-start: 1;
-  grid-row-end: 4;
-  grid-column-start: 2;
-  grid-column-end: 3;
-  overflow: auto;
 }
 
-.grid-item-row3-column2 {
-  grid-row-start: 4;
-  grid-row-end: 5;
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-
-.grid-item-row4-column1 {
-  grid-row-start: 4;
-  grid-row-end: 5;
-  grid-column-start: 1;
-  grid-column-end: 2;
-}
-
-.m-tree {
-  border: 1px solid #ddd;
+.panel-header {
+  background-color: #fafafa;
+  padding: 10px;
   border-radius: 5px;
-  padding-left: 10px;
-}
-
-.m-panel {
-  margin-bottom: 8px;
-}
-
-.m-label {
-  font-size: 16px;
   cursor: pointer;
+  font-size: 14px;
 }
 
-.m-label i {
-  font-size: 16px;
-  font-style: normal;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  line-height: 16px;
-  color: #fff;
-  vertical-align: middle;
-  margin: -2px 2px 1px 0px;
-  border: #2489c5 1px solid;
-  border-radius: 3px;
-}
-
-.flex-container {
+.selected-positions {
+  margin-top: 20px;
   display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - 75px);
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
-.flex-header {
-  flex: 0 0 100px;
+.filter-section {
+  margin-top: 20px;
 }
 
-.flex-footer {
-  margin-top: 0.8em;
-  height: 40px;
-  flex: 0 0 40px;
+.category-panel,
+.position-panel {
+  margin-top: 20px;
 }
 
-.flex-content {
-  display: flex;
-  flex: 1;
-  overflow: auto;
-  padding-top: 10px;
+.inventory-table {
+  margin-top: 20px;
 }
 
-.flex-aside {
-  flex: 0 0 400px;
-  padding-right: 5px;
-}
-
-.flex-main {
-  overflow: scroll;
-  flex: 1;
-  height: fit-content;
-}
-
-.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;
+.pagination-info {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 </style>

src/customer/VouchCheck.vue

@@ -1,126 +1,107 @@
 <template>
-  <div>
+  <div style="padding: 0 10px;">
     <!-- 导航栏 -->
-    <Navbar title="选择存货生成物料盘点详情" is-go-back="true" />
+    <Navbar :title="'选择存货生成物料盘点详情'" :is-go-back="false" />
 
     <!-- 操作按钮区域 -->
     <div class="action-buttons">
-      <a-button type="primary" @click="getInventoryInstance">搜索</a-button>
-      <a-button type="success" @click="generateCheckVouchs">生成盘点明细</a-button>
-      <a-button type="danger" @click="clear">清空</a-button>
+      <a-button type="primary" @click="searchDatas">搜索</a-button>
+      <a-button type="dashed" @click="generateCheckVouchs">生成盘点明细</a-button>
+      <a-button danger @click="isAll = 'true'">清空</a-button>
     </div>
 
     <!-- 选中的货位标签展示 -->
     <div v-if="setPositions.length > 0" class="selected-positions">
-      <a-tag
-        v-for="(data, index) in setPositions"
-        :key="index"
-        closable
-        @close="setPosition2(index)"
-      >
+      <a-tag v-for="(data, index) in setPositions" :key="index" closable @close="setPosition2(index)">
         {{ data.positionBarCode }}
       </a-tag>
     </div>
-    <!-- 筛选条件区域 -->
-    <div class="filter-section">
-      <a-form layout="inline">
-        <a-form-item label="盘点范围">
-          <a-select v-model:value="isAll" style="width: 200px">
-            <a-select-option value="true">仓库全部物料</a-select-option>
-            <a-select-option value="false">根据条件选择生成</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
 
-      <!-- 物料类别选择面板 -->
-      <div v-if="isAll === 'false'" class="category-panel">
-        <a-collapse>
-          <a-collapse-panel :key="1" header="物料类别名称、编号">
-            <div class="category-tree">
-              <TreeViewNode
-                v-for="data in inventoryClasses"
-                :key="data.id"
-                :node="data"
-                :is-root="true"
-                :is-show-check="true"
-                @node-select="inventoryClassSelect"
-              />
+
+    <div style="display: flex; gap: 10px;">
+      <div style="width: 26%;">
+        <!-- 筛选条件区域 -->
+        <div class="filter-section">
+          <a-form layout="inline">
+            <a-form-item label="盘点范围">
+              <a-select v-model:value="isAll" style="width: 220px">
+                <a-select-option value="true">仓库全部物料</a-select-option>
+                <a-select-option value="false">根据条件选择生成</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-form>
+          <!-- 物料类别选择面板 -->
+          <div v-show="isAll === 'false'" class="category-panel">
+            <div>
+              <div class="panel-header" @click="toggleNamePanel">
+                <DownOutlined v-show="!namePanelVisible" />
+                <RightOutlined v-show="namePanelVisible" />
+                <span style="margin-left: 5px;">物料类别名称、编号</span>
+              </div>
             </div>
-          </a-collapse-panel>
-        </a-collapse>
-      </div>
+            <div v-show="!namePanelVisible">
+              <div class="category-tree">
+                <TreeViewNode
+                  v-for="data in inventoryClasses" :key="data.id" :node="data" :is-root="true"
+                  :is-show-check="true" @node-select="inventoryClassSelect"
+                />
+              </div>
+            </div>
+          </div>
 
-      <!-- 货位选择面板 -->
-      <div v-if="isAll === 'false'" class="position-panel">
-        <a-collapse>
-          <a-collapse-panel :key="2" header="货位">
-            <a-form layout="inline">
-              <a-form-item>
+          <!-- 货位选择面板 -->
+          <div v-show="isAll === 'false'" class="position-panel">
+            <div>
+              <div class="panel-header" @click="togglePanel">
+                <DownOutlined v-show="!panelVisible" />
+                <RightOutlined v-show="panelVisible" />
+                <span style="margin-left: 5px;">货位</span>
+              </div>
+              <div v-show="!panelVisible">
                 <a-input
-                  v-model:value="positionCondition"
-                  placeholder="输入货位条形码(回车查询)"
-                  @keyup.enter="queryPosition"
+                  v-model:value="positionCondition" placeholder="输入货位条形码(回车查询)" style="margin-bottom: 10px;"
+                  @keyup.enter="searchPosition"
+                />
+                <CommonTable
+                  ref="tableRef2" :columns="positionColumns" :data-source="showPositions" :is-select="true"
+                  :extra-height="440" @get-pager="getPositionPagerParams" @get-selected="getPositionSelected"
                 />
-              </a-form-item>
-            </a-form>
-            <a-table
-              :data-source="showPositions"
-              :columns="positionColumns"
-              row-key="id"
-            />
-          </a-collapse-panel>
-        </a-collapse>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-
-    <!-- 存货列表表格 -->
-    <div class="inventory-table">
-      <a-table
-        :data-source="inventoryInstances"
-        :columns="inventoryColumns"
-        :pagination="pagination"
-        @row-dblclick="openWindow"
-      />
-    </div>
 
-    <!-- 分页信息展示 -->
-    <div class="pagination-info">
-      <div>
-        <span>第{{ (pagination.current - 1) * pagination.pageSize + 1 }} - {{
-          Math.min(pagination.current * pagination.pageSize, pagination.total)
-        }} 条，共计 {{ pagination.total }} 条，每页显示</span>
-        <a-select
-          v-model:value="pagination.pageSize"
-          style="width: 80px; margin: 0 5px"
-          @change="gridSizeSelect"
+      <!-- 存货列表表格 -->
+      <div style="width: 74%;margin:10px 0 0 10px;">
+        <CommonTable
+          ref="tableRef" :columns="inventoryColumns" :data-source="inventoryInstances"
+          :total="pagination.total" :is-custom-row-click="true" @get-pager="getPagerParams"
+          @custom-row-click="openWindow"
         >
-          <a-select-option value="10">10</a-select-option>
-          <a-select-option value="20">20</a-select-option>
-          <a-select-option value="30">30</a-select-option>
-        </a-select>
-        <span>条</span>
+          <template #bodyCell="{ column, index }">
+            <span v-if="column.dataIndex === 'index'">
+              {{ index + 1 }}
+            </span>
+          </template>
+        </CommonTable>
       </div>
-      <a-pagination
-        v-if="pagination.total > 0"
-        :current="pagination.current"
-        :page-size="pagination.pageSize"
-        :total="pagination.total"
-        @change="checkDataChangedQueryGridData"
-      />
     </div>
 
     <!-- 加载状态 -->
-    <a-spin v-if="loading" />
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import { UserStorageResource, Uuid } from 'pc-component-v3';
-import { Notify } from 'ant-design-vue';
+import { UserStorageResource, Uuid, Notify } from 'pc-component-v3';
+import { Modal, message } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
+import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
 
 export default {
-  components: {},
+  components: { CommonTable, DownOutlined, RightOutlined },
   data() {
     return {
       checked: false,
@@ -140,26 +121,25 @@ export default {
       uuid: Uuid.createUUID(),
       showPositions: [],
       setPositions: [],
-      hasLastPage: false,
-      hasNextPage: false,
-      positionTotalPages: 1,
-      positionNowPage: 1,
+      positionSelectedIds: [],
+      positionPagination: {
+        total: 0,
+        pageSize: 10,
+        current: 1,
+      },
       positionCondition: '',
       loading: false,
+      namePanelVisible: true,
+      panelVisible: true,
     };
   },
   computed: {
     positionColumns() {
       return [
-        {
-          title: '选择',
-          dataIndex: 'check',
-          width: 20,
-        },
         {
           title: '货位条形码',
           dataIndex: 'positionBarCode',
-          width: 60,
+          width: 80,
         },
       ];
     },
@@ -198,71 +178,53 @@ export default {
           _self.checkVouchId = modelData.id;
           _self.warehouseId = modelData.data.warehouse.id;
           _self.warehouseName = modelData.data.warehouse.displayValue[0];
+          _self.queryPosition();
         }
       },
       errorData => {
+        _self.loading = false;
         Common.processException(errorData);
       },
     );
   },
   mounted() {
     this.getInventoryClass();
-    this.queryPosition();
-    this.getInventoryInstance();
   },
   methods: {
-    // 货位全选和反选
-    selectAll() {
-      const _self = this;
-      _self.setPositions = [];
-      if (_self.checked) {
-        _self.showPositions.forEach(item => {
-          item.check = true;
-          _self.setPositions.push(item);
-        });
-      } else {
-        _self.showPositions.forEach(item => {
-          item.check = false;
-        });
-      }
-      this.getInventoryInstance();
+
+    searchDatas() {
+      this.$refs.tableRef.backFirstPage();
     },
-    // 移除选中的货位
-    setPosition2(index) {
-      const _self = this;
-      const positionBarCode = _self.setPositions[index].positionBarCode;
-      _self.setPositions.splice(index, 1);
-      _self.showPositions.forEach(item => {
-        if (item.positionBarCode === positionBarCode) {
-          item.check = false;
-        }
-      });
+
+    getPagerParams(page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
       this.getInventoryInstance();
     },
-    // 设置货位选中状态
-    setPosition(index) {
-      const _self = this;
-      const position = _self.showPositions[index];
-      if (position.check === false) {
-        position.check = true;
-        _self.setPositions.push(position);
-      } else {
-        position.check = false;
-        const currentIndex = _self.setPositions.findIndex(
-          p => p.id === position.id,
-        );
-        if (currentIndex!== -1) {
-          _self.setPositions.splice(currentIndex, 1);
-        }
-      }
-      this.getInventoryInstance();
+
+    searchPosition() {
+      this.$refs.tableRef2.backFirstPage();
     },
-    // 判断货位是否还有上一页或者下一页
-    judgmentPage() {
-      const _self = this;
-      _self.hasLastPage = _self.positionNowPage > 1;
-      _self.hasNextPage = _self.positionNowPage < _self.positionTotalPages;
+
+    getPositionPagerParams(page, pageSize) {
+      this.positionPagination.current = page;
+      this.positionPagination.pageSize = pageSize;
+      this.queryPosition();
+    },
+
+    getPositionSelected(selected) {
+      this.positionSelectedIds = selected.selectedRowKeys;
+      this.setPositions = selected.selectedRows;
+      this.searchDatas();
     },
+
+    // 移除选中的货位
+    setPosition2(index) {
+      this.positionSelectedIds.splice(index, 1);
+      this.setPositions.splice(index, 1);
+      this.searchDatas();
+    },
+
     // 查询可访问的分类
     getInventoryClass() {
       const _self = this;
@@ -277,6 +239,8 @@ export default {
           if (data.errorCode === 0) {
             _self.initInventoryClass(data.datas);
             _self.inventoryClasses = data.datas;
+          } else {
+            message.warning(data.errorMessage);
           }
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
@@ -307,7 +271,7 @@ export default {
     // 分类改变事件
     inventoryClassSelect(node) {
       const _self = this;
-      node.selected =!node.selected;
+      node.selected = !node.selected;
       const current = node.selected;
       function changeSelect(item) {
         item.selected = current;
@@ -318,7 +282,7 @@ export default {
         }
       }
       changeSelect(node);
-      this.getInventoryInstance();
+      this.searchDatas();
     },
     // 获取选择的分类 ID
     getSelectedInventoryClassIds() {
@@ -339,18 +303,7 @@ export default {
       });
       return arr;
     },
-    // 上一页
-    previousPage() {
-      const _self = this;
-      _self.positionNowPage--;
-      _self.queryPosition();
-    },
-    // 下一页
-    nextPage() {
-      const _self = this;
-      _self.positionNowPage++;
-      _self.queryPosition();
-    },
+
     // 分页查询货位
     queryPosition() {
       const _self = this;
@@ -358,8 +311,8 @@ export default {
         id: _self.warehouseId,
         condition: _self.positionCondition.trim(),
         range: {
-          start: (_self.positionNowPage - 1) * this.pagination.pageSize,
-          length: this.pagination.pageSize,
+          start: (_self.positionPagination.current - 1) * _self.positionPagination.pageSize,
+          length: _self.positionPagination.pageSize,
         },
       };
       _self.showPositions = [];
@@ -384,43 +337,31 @@ export default {
                   positionBarCode: item.positionBarCode,
                   check: false,
                 };
-                const currentIndex = _self.setPositions.findIndex(
-                  p => p.id === item.positionId,
-                );
-                if (currentIndex!== -1) {
-                  showPosition.check = true;
-                }
                 _self.showPositions.push(showPosition);
               });
+              _self.positionPagination.total = data.total;
             }
-            _self.positionTotalPages = Math.ceil(
-              data.total / data.length,
-            );
-            _self.judgmentPage();
-            _self.loading = false;
+          } else {
+            message.warning(data.errorMessage);
           }
+          _self.loading = false;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      this.getInventoryInstance();
+      this.searchDatas();
     },
     // 查询物料明细
     getInventoryInstance() {
       const _self = this;
       const inventoryClassIds = _self.getSelectedInventoryClassIds();
-      const positionIds = [];
-      if (_self.setPositions && _self.setPositions.length > 0) {
-        _self.setPositions.forEach(item => {
-          positionIds.push(item.id);
-        });
-      }
+
       _self.loading = true;
       const obj = {
         inventoryClassIds,
-        positionIds,
+        positionIds: _self.positionSelectedIds,
         isAll: _self.isAll,
         warehouseId: _self.warehouseId,
         range: {
@@ -443,8 +384,10 @@ export default {
           if (data.errorCode === 0) {
             _self.inventoryInstances = data.datas;
             _self.pagination.total = data.total;
-            _self.loading = false;
+          } else {
+            message.warning(data.errorMessage);
           }
+          _self.loading = false;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
           _self.loading = false;
@@ -456,12 +399,7 @@ export default {
     generateCheckVouchs() {
       const _self = this;
       const inventoryClassIds = _self.getSelectedInventoryClassIds();
-      const positionIds = [];
-      if (_self.setPositions && _self.setPositions.length > 0) {
-        _self.setPositions.forEach(item => {
-          positionIds.push(item.id);
-        });
-      }
+
       let information = '';
       if (_self.isAll === 'true') {
         information =
@@ -469,14 +407,14 @@ export default {
       } else {
         information = '您确定要根据选择的过滤条件生成对应的盘点明细';
       }
-      Notify.confirm({
+      Modal.confirm({
         title: '确认生成盘点明细',
         content: `${information} 吗？如果"是"的话，请点击"确定"按钮，否则点击"取消"按钮`,
         onOk() {
           _self.loading = true;
           const obj = {
             inventoryClassIds,
-            positionIds,
+            positionIds: _self.positionSelectedIds,
             isAll: _self.isAll,
             warehouseId: _self.warehouseId,
             checkVouchId: _self.checkVouchId,
@@ -495,13 +433,11 @@ export default {
             },
             success: function (data) {
               if (data.errorCode === 0) {
-                Notify.success(
-                  '成功',
-                  '盘点明细生成成功，请返回查看。',
-                  4000,
-                );
-                _self.loading = false;
+                message.success('盘点明细生成成功，请返回查看。');
+              } else {
+                message.warning(data.errorMessage);
               }
+              _self.loading = false;
             },
             error: function (XMLHttpRequest, textStatus, errorThrown) {
               _self.loading = false;
@@ -509,39 +445,35 @@ export default {
             },
           });
         },
-        onCancel() {},
+        onCancel() { },
       });
     },
     // 清空
     clear() {
       this.isAll = 'true';
       this.type = 0;
+      this.inventoryClasses = [];
       this.setPositions = [];
-      this.positionNowPage = 1;
+      this.positionSelectedIds = [];
       this.positionCondition = '';
-      this.queryPosition();
-      this.initInventoryClass(this.inventoryClasses);
-      this.pagination.pageSize = 10;
-      this.pagination.current = 1;
-      this.getInventoryInstance();
+      this.searchPosition();
+      this.getInventoryClass();
       this.checked = false;
+      this.$refs.tableRef2.clear();
     },
-    // 修改页 Size
-    gridSizeSelect(newPageSize) {
-      this.pagination.pageSize = newPageSize;
-      this.pagination.current = 1;
-      this.getInventoryInstance();
-    },
-    // 页数发生变化
-    checkDataChangedQueryGridData() {
-      this.getInventoryInstance();
-    },
+
     // 点击查看物料实例详情
     openWindow(item) {
       window.open(
-        `#/desktop/window/window-read/view/050405/0/${item.id}?currPage=1&currIndex=1&totalCount=1&uuid=${Uuid.createUUID()}`,
+        `#/desktop/window1/window-read/view/050405/0/${item.id}?currPage=1&currIndex=1&totalCount=1&uuid=${Uuid.createUUID()}`,
       );
     },
+    toggleNamePanel() {
+      this.namePanelVisible = !this.namePanelVisible;
+    },
+    togglePanel() {
+      this.panelVisible = !this.panelVisible;
+    },
   },
 };
 </script>
@@ -553,6 +485,14 @@ export default {
   gap: 10px;
 }
 
+.panel-header {
+  background-color: #fafafa;
+  padding: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
 .selected-positions {
   margin-top: 20px;
   display: flex;

src/inout/CheckLoss.vue

@@ -1,42 +1,40 @@
 <template>
-  <a-layout>
+  <div style="padding: 0 10px;">
     <!-- 导航栏 -->
-    <Navbar :title="'盘亏数据处理'" :is-go-back="true" />
-    <a-layout-content style="padding: 24px;">
-      <!-- 操作按钮 -->
-      <a-space>
-        <a-button type="primary" @click="confirmSave">开始处理</a-button>
-      </a-space>
-      <!-- 表格 -->
-      <a-table
-        :data-source="checkVouchsDatas"
-        :columns="columns"
-        :row-key="(record) => record.id"
-        :pagination="false"
-      />
-      <!-- 模态框 -->
-      <a-modal
-        v-model:visible="modal"
-        title="提示"
-        @ok="save"
-        @cancel="cancel"
-      >
-        <template #content>
-          <p>确认开始处理生成出库单？</p>
+    <Navbar :title="'盘亏数据处理'" :is-go-back="false" />
+    <!-- 操作按钮 -->
+    <a-space>
+      <a-button type="primary" @click="confirmSave">开始处理</a-button>
+    </a-space>
+    <!-- 表格 -->
+    <CommonTable :columns="columns" :data-source="checkVouchsDatas" :have-page="false">
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
         </template>
-      </a-modal>
-    </a-layout-content>
-  </a-layout>
+      </template>
+    </CommonTable>
+    <!-- 模态框 -->
+    <a-modal v-model:open="modal" title="提示" @ok="save" @cancel="cancel">
+      <p>确认开始处理生成出库单？</p>
+    </a-modal>
+  </div>
+  <Loading v-if="loading" />
 </template>
 
 <script>
 import Common from '../common/Common.js';
 import { UserStorageResource } from 'pc-component-v3';
 import { message } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
 
 export default {
+  components: {
+    CommonTable,
+  },
   data() {
     return {
+      loading: false,
       checkVouchsDatas: [],
       checkVouchId: null,
       modal: false,
@@ -55,43 +53,52 @@ export default {
     };
   },
   mounted() {
-    const uuid = this.$route.params.uuid;
+    const _self = this;
+    const uuid = _self.$route.params.uuid;
     UserStorageResource.uniqueByKey(uuid + '_modelData').then(
       str => {
         if (str.data) {
           const modelData = JSON.parse(str.data);
-          this.checkVouchId = modelData.id;
+          _self.checkVouchId = modelData.id;
+          _self.queryCheckVouchses();
         }
       },
       errorData => {
         Common.processException(errorData);
       },
     );
-    setTimeout(() => {
-      this.queryCheckVouchses();
-    }, 2000);
   },
   methods: {
     // 查询需要盘亏的数据
     queryCheckVouchses() {
       console.log(this.checkVouchId);
-      fetch(Common.getApiURL('checkVouchsResource/getCheckLossDatas'), {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          ...Common.getToken(),
+      const _self = this;
+      _self.loading = true;
+      $.ajax({
+        type: 'get',
+        dataType: 'json',
+        url: Common.getApiURL('checkVouchsResource/getCheckLossDatas?checkVouchId=' + _self.checkVouchId),
+        contentType: 'application/json',
+        beforeSend: function (request) {
+          Common.addTokenToRequest(request);
         },
-        body: JSON.stringify({ checkVouchId: this.checkVouchId }),
-      })
-        .then(response => response.json())
-        .then(data => {
-          if (data.errorCode === 0) {
-            this.checkVouchsDatas = data.datas;
+        success: function (success) {
+          if (success.errorCode == 0) {
+            console.log(success);
+            if (success.datas && success.datas.length > 0) {
+              _self.checkVouchsDatas = success.datas;
+            }
+          } else {
+            message.warning(success.errorMessage);
           }
-        })
-        .catch(error => {
-          Common.processException(error);
-        });
+          _self.loading = false;
+        },
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          _self.loading = false;
+          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        },
+      });
+
     },
     // 开始处理
     confirmSave() {
@@ -103,28 +110,36 @@ export default {
     },
     // 确认处理
     save() {
+      const _self = this;
       this.modal = false;
       if (this.checkVouchsDatas.length === 0) {
         message.warning('没有可处理的数据');
         return;
       }
-      fetch(Common.getApiURL('checkVouchsResource/processCheckLossDatas'), {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          ...Common.getToken(),
+
+      _self.loading = true;
+      $.ajax({
+        type: 'get',
+        dataType: 'json',
+        url: Common.getApiURL('checkVouchsResource/processCheckLossDatas?checkVouchId=' + _self.checkVouchId),
+        contentType: 'application/json',
+        beforeSend: function (request) {
+          Common.addTokenToRequest(request);
         },
-        body: JSON.stringify({ checkVouchId: this.checkVouchId }),
-      })
-        .then(response => response.json())
-        .then(data => {
-          if (data.errorCode === 0) {
+        success: function (success) {
+          if (success.errorCode == 0) {
             message.success('处理成功！');
+          } else {
+            message.warning(success.errorMessage);
           }
-        })
-        .catch(error => {
-          Common.processException(error);
-        });
+          _self.loading = false;
+        },
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          _self.loading = false;
+          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        },
+      });
+
     },
   },
 };

src/inout/CheckProfit.vue

@@ -1,42 +1,40 @@
 <template>
-  <a-layout>
+  <div style="padding: 0 10px;">
     <!-- 导航栏 -->
-    <Navbar :title="'盘盈数据处理'" :is-go-back="true" />
-    <a-layout-content class="content">
-      <!-- 操作按钮 -->
-      <a-space>
-        <a-button type="primary" @click="confirmSave">开始处理</a-button>
-      </a-space>
-      <!-- 表格 -->
-      <a-table
-        :data-source="checkVouchsDatas"
-        :columns="columns"
-        :row-key="record => record.id"
-        :pagination="false"
-      />
-      <!-- 模态框 -->
-      <a-modal
-        v-model:visible="modal"
-        title="提示"
-        @ok="save"
-        @cancel="cancel"
-      >
-        <template #content>
-          <h4>确认开始处理生成入库单？</h4>
+    <Navbar :title="'盘盈数据处理'" :is-go-back="false" />
+    <!-- 操作按钮 -->
+    <a-space>
+      <a-button type="primary" @click="confirmSave">开始处理</a-button>
+    </a-space>
+    <!-- 表格 -->
+    <CommonTable :columns="columns" :data-source="checkVouchsDatas" :have-page="false">
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
         </template>
-      </a-modal>
-    </a-layout-content>
-  </a-layout>
+      </template>
+    </CommonTable>
+    <!-- 模态框 -->
+    <a-modal v-model:open="modal" title="提示" @ok="save" @cancel="cancel">
+      <h4>确认开始处理生成入库单？</h4>
+    </a-modal>
+  </div>
+  <Loading v-if="loading" />
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import { UserStorageResource } from 'pc-component-v3';
-import { Notify } from 'ant-design-vue';
+import { UserStorageResource, Notify } from 'pc-component-v3';
+import { message } from 'ant-design-vue';
+import CommonTable from '../common/CommonTable.vue';
 
 export default {
+  components: {
+    CommonTable,
+  },
   data() {
     return {
+      loading: false,
       checkVouchsDatas: [],
       checkVouchId: '',
       modal: false,
@@ -55,63 +53,50 @@ export default {
     };
   },
   mounted() {
-    const uuid = this.$route.params.uuid;
+    const _self = this;
+    const uuid = _self.$route.params.uuid;
     UserStorageResource.uniqueByKey(uuid + '_modelData').then(
       str => {
-        if (str.data != null) {
-          console.log(str.data);
+        if (str.data) {
           const modelData = JSON.parse(str.data);
-          this.checkVouchId = modelData.id;
+          _self.checkVouchId = modelData.id;
+          _self.queryCheckVouchses();
         }
       },
       errorData => {
         Common.processException(errorData);
       },
     );
-    setTimeout(() => {
-      this.queryCheckVouchses();
-    }, 2000);
   },
   methods: {
     // 查询需要盘盈的数据
     queryCheckVouchses() {
       console.log(this.checkVouchId);
-      const request = {
+      const _self = this;
+      _self.loading = true;
+      $.ajax({
         type: 'get',
         dataType: 'json',
-        url: Common.getApiURL('checkVouchsResource/getCheckProfitDatas'),
-        data: { checkVouchId: this.checkVouchId },
-        beforeSend: request => {
+        url: Common.getApiURL('checkVouchsResource/getCheckProfitDatas?checkVouchId=' + _self.checkVouchId),
+        contentType: 'application/json',
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: data => {
-          if (data.errorCode === 0) {
-            this.checkVouchsDatas = data.datas;
+        success: function (success) {
+          if (success.errorCode == 0) {
+            if (success.datas && success.datas.length > 0) {
+              _self.checkVouchsDatas = success.datas;
+            }
+          } else {
+            message.warning(success.errorMessage);
           }
+          _self.loading = false;
         },
-        error: (XMLHttpRequest, textStatus, errorThrown) => {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
-      };
-      fetch(request.url, {
-        method: request.type,
-        headers: {
-          'Content-Type': 'application/json',
-          ...Common.getToken(), 
-        },
-        body: JSON.stringify(request.data),
-      })
-        .then(response => response.json())
-        .then(data => {
-          if (request.success) {
-            request.success(data);
-          }
-        })
-        .catch(error => {
-          if (request.error) {
-            request.error(null, null, error);
-          }
-        });
+      });
     },
     // 开始处理
     confirmSave() {
@@ -123,6 +108,7 @@ export default {
     },
     // 确认处理
     save() {
+      const _self = this;
       this.modal = false;
       if (this.checkVouchsDatas.length === 0) {
         Notify.notice({
@@ -132,46 +118,28 @@ export default {
         });
         return;
       }
-      const request = {
+      _self.loading = true;
+      $.ajax({
         type: 'get',
         dataType: 'json',
-        url: Common.getApiURL('checkVouchsResource/processCheckProfitDatas'),
-        data: { checkVouchId: this.checkVouchId },
-        beforeSend: request => {
+        url: Common.getApiURL('checkVouchsResource/processCheckProfitDatas?checkVouchId=' + _self.checkVouchId),
+        contentType: 'application/json',
+        beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: data => {
-          if (data.errorCode === 0) {
-            Notify.success({
-              message: '提示',
-              description: '处理成功！',
-              duration: 1.5,
-            });
+        success: function (success) {
+          if (success.errorCode == 0) {
+            message.success('处理成功！');
+          } else {
+            message.warning(success.errorMessage);
           }
+          _self.loading = false;
         },
-        error: (XMLHttpRequest, textStatus, errorThrown) => {
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
-      };
-      fetch(request.url, {
-        method: request.type,
-        headers: {
-          'Content-Type': 'application/json',
-          ...Common.getToken(),
-        },
-        body: JSON.stringify(request.data),
-      })
-        .then(response => response.json())
-        .then(data => {
-          if (request.success) {
-            request.success(data);
-          }
-        })
-        .catch(error => {
-          if (request.error) {
-            request.error(null, null, error);
-          }
-        });
+      });
     },
   },
 };

src/main.js

@@ -4,6 +4,7 @@ import { createI18n } from 'vue-i18n';
 import VTooltip from 'v-tooltip';
 
 import * as PcClientComponent from 'pc-component-v3';
+import 'pc-component-v3/dist/pc-component-v3.css';
 window.Uuid = PcClientComponent.Uuid;
 window.Notify = PcClientComponent.Notify;
 window.onerror = function(message, source, lineno, colno, error) {

src/pick/PickingCar.vue

@@ -1,330 +1,243 @@
 <template>
-  <a-layout>
-    <a-layout-header class="header">
-      <Navbar title="领料车" :is-go-back="true">
-        <a-space>
-          <a-button type="link" title="仓库库存" @click="stockOutPrepareLine()">
-            <template #icon><home-outlined /></template>
-          </a-button>
-          <a-button type="link" title="领料清单" @click="stockOutPrepareApproved()">
-            <template #icon><unordered-list-outlined /></template>
-          </a-button>
-        </a-space>
-      </Navbar>
-    </a-layout-header>
+  <Navbar title="领料车" :is-go-back="true">
+    <a-space>
+      <a-button type="link" title="仓库库存" @click="stockOutPrepareLine()">
+        <template #icon><home-outlined /></template>
+      </a-button>
+      <a-button type="link" title="领料清单" @click="stockOutPrepareApproved()">
+        <template #icon><unordered-list-outlined /></template>
+      </a-button>
+    </a-space>
+  </Navbar>
 
-    <a-layout-content class="content">
-      <a-form layout="inline" class="search-form">
-        <a-form-item label="项目事件" required>
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="项目事件" required :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
           <a-select
-            v-model:value="projectItemName"
-            style="width: 220px"
-            show-search 
-            allow-clear
+            v-model:value="projectItemName" class="w-full" show-search allow-clear
             @change="projectHandleChange"
           >
-            <a-select-option 
-              v-for="item in projectList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+            <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
         </a-form-item>
-
-        <a-form-item label="仓库" required>
-          <a-select
-            v-model:value="warehouseName"
-            style="width: 220px"
-            allow-clear
-            @change="storeHandleChange"
-          >
-            <a-select-option 
-              v-for="item in warehouseList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+      </a-col>
+      <a-col>
+        <a-form-item label="选择仓库" required :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-select v-model:value="warehouseName" class="w-full" allow-clear @change="storeHandleChange">
+            <a-select-option v-for="item in warehouseList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
         </a-form-item>
-
-        <a-form-item label="需求模板" required>
+      </a-col>
+      <a-col>
+        <a-form-item label="需求模板" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
           <a-select
-            v-model:value="stockOutPrepateTemplateName"
-            style="width: 220px"
-            allow-clear 
+            v-model:value="stockOutPrepateTemplateName" class="w-full" show-search allow-clear
             @change="templateHandleChange"
           >
-            <a-select-option 
-              v-for="item in stockOutPrepateTemplateList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+            <a-select-option v-for="item in stockOutPrepateTemplateList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
         </a-form-item>
-
-        <a-form-item label="物料编码">
-          <a-input
-            v-model:value="inventoryNo"
-            placeholder="物料编码"
-            @keyup.enter="getDatas"
-          />
+      </a-col>
+      <a-col>
+        <a-form-item label="物料编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryNo" placeholder="物料编码" class="w-full" @keyup.enter="getDatas" />
         </a-form-item>
-
-        <a-form-item label="物料名称">
-          <a-input
-            v-model:value="inventoryName"
-            placeholder="物料名称"
-            @keyup.enter="getDatas"
-          />
-        </a-form-item>  
-
-        <a-form-item label="规格型号">
-          <a-input
-            v-model:value="inventoryType"
-            placeholder="规格型号"
-            @keyup.enter="getDatas"
-          />
-        </a-form-item> 
-        
+      </a-col>
+      <a-col>
+        <a-form-item label="物料名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryName" placeholder="物料名称" class="w-full" @keyup.enter="getDatas" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryType" placeholder="规格型号" class="w-full" @keyup.enter="getDatas" />
+        </a-form-item>
+      </a-col>
+      <a-col>
         <a-form-item>
           <a-space>
-            <a-button type="primary" @click="getDatas">查询</a-button>
-            <a-button type="primary" @click="addition">领料</a-button>
-            <a-button danger @click="deletePickingCar">删除</a-button>
+            <a-button style="margin-left: 8px;" type="primary" @click="getDatas">查询</a-button>
+            <a-button style="margin-left: 8px;" type="primary" @click="addition">领料</a-button>
+            <a-button style="margin-left: 8px;" danger @click="deletePickingCar">删除</a-button>
           </a-space>
         </a-form-item>
-      </a-form>
-      <!--主内容-->
-      <!-- 替换原生table为a-table -->
-      <a-table
-        :columns="columns"
-        :data-source="pickingCars"
-        :scroll="{ x: 2500, y: 'calc(100vh - 380px)' }"
-        :pagination="false"
-        bordered
-        size="small"
-        row-key="id"
-        :row-class-name="setRowClassName"
-      >
-        <template #bodyCell="{ column, record }">
-          <!-- 选择列 -->
-          <template v-if="column.dataIndex === 'selection'">
-            <a-checkbox 
-              :checked="record.checked"
-              @change="e => record.checked = e.target.checked"
-            />
-          </template>
-
-          <!-- 图片列 -->
-          <template v-if="column.dataIndex === 'image'">
-            <a-image
-              :src="Common.getThumbnailImageSrc(className, record.imageName)"
-              :width="40"
-              :preview="false"
-              @click="$refs.imagePreview.preview(className, record.imageName)"
-            />
-          </template>
-
-          <!-- 数量输入列 -->
-          <template v-if="column.dataIndex === 'quantity'">
-            <a-input-number 
-              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)"
-            />
-            <span v-else>{{ record[column.dataIndex] }}</span>
-          </template>
-
-          <!-- 其他数据列 -->
-          <template v-if="column.dataIndex === 'boxMessage'">
-            {{ record.boxMessage?.join(',') || '' }}
-          </template>
-        </template>
-      </a-table>
-      
-      <!-- 分页组件改造 -->
-      <div class="flex-footer">
+      </a-col>
+    </a-row>
+  </a-form>
+
+  <!--主内容-->
+  <!-- 替换原生table为a-table -->
+  <a-table
+    :columns="columns" :data-source="pickingCars" :scroll="{ x: 2500, y: 'calc(100vh - 380px)' }"
+    :pagination="false" bordered size="small" row-key="id" :row-class-name="setRowClassName"
+  >
+    <template #bodyCell="{ column, record }">
+      <!-- 选择列 -->
+      <template v-if="column.dataIndex === 'selection'">
+        <a-checkbox :checked="record.checked" @change="e => record.checked = e.target.checked" />
+      </template>
+
+      <!-- 图片列 -->
+      <template v-if="column.dataIndex === 'image'">
+        <a-image
+          :src="Common.getThumbnailImageSrc(className, record.imageName)" :width="40" :preview="false"
+          @click="$refs.imagePreview.preview(className, record.imageName)"
+        />
+      </template>
+
+      <!-- 数量输入列 -->
+      <template v-if="column.dataIndex === 'quantity'">
+        <a-input-number
+          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)"
+        />
+        <span v-else>{{ record[column.dataIndex] }}</span>
+      </template>
+
+      <!-- 其他数据列 -->
+      <template v-if="column.dataIndex === 'boxMessage'">
+        {{ record.boxMessage?.join(',') || '' }}
+      </template>
+    </template>
+  </a-table>
+
+  <!-- 分页组件改造 -->
+  <div class="flex-footer">
+    <a-space>
+      <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
+        pagination.current_page * pagination.per_page
+      }}条,共计{{ pagination.total }}条</span>
+      <a-select v-model:value="pagination.per_page" style="width: 90px" @change="handlePageChange(1, $event)">
+        <a-select-option :value="20">20</a-select-option>
+        <a-select-option :value="50">50</a-select-option>
+        <a-select-option :value="100">100</a-select-option>
+      </a-select>
+      <a-pagination
+        v-model:current="pagination.current_page" :total="pagination.total" :page-size="pagination.per_page"
+        show-less-items @change="handlePageChange"
+      />
+    </a-space>
+  </div>
+
+  <!--modal1框-->
+  <!-- 修改模态框部分 -->
+  <a-modal v-model:open="modal1" title="领料类型选择" width="90%" :footer="null">
+    <a-tabs>
+      <!-- 收货地址部分 -->
+      <a-tab-pane key="1" tab="收货地址">
         <a-space>
-          <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ 
-            pagination.current_page * pagination.per_page 
-          }}条,共计{{ pagination.total }}条</span>
-          <a-select 
-            v-model:value="pagination.per_page" 
-            style="width: 90px"
-            @change="handlePageChange(1, $event)"
-          >
-            <a-select-option :value="20">20</a-select-option>
-            <a-select-option :value="50">50</a-select-option>
-            <a-select-option :value="100">100</a-select-option>
-          </a-select>
-          <a-pagination 
-            v-model:current="pagination.current_page"
-            :total="pagination.total"
-            :page-size="pagination.per_page"
-            show-less-items
-            @change="handlePageChange"
+          <a-button type="link" @click="openToAddress">新增</a-button>
+          <a-button type="link" @click="refreshTo">刷新</a-button>
+          <a-input-search
+            v-model:value="toMessage" placeholder="输入收货地址进行查询" style="width: 200px"
+            @search="findAllToAddressDto"
           />
         </a-space>
-      </div>
-      
-      <!--modal1框-->
-      <!-- 修改模态框部分 -->
-      <a-modal 
-        v-model:open="modal1" 
-        title="领料类型选择"
-        width="90%"
-        :footer="null"
-      >
-        <a-tabs>
-          <!-- 收货地址部分 -->
-          <a-tab-pane key="1" tab="收货地址">
-            <a-space>
-              <a-button type="link" @click="openToAddress">新增</a-button>
-              <a-button type="link" @click="refreshTo">刷新</a-button>
-              <a-input-search 
-                v-model:value="toMessage"
-                placeholder="输入收货地址进行查询"
-                style="width: 200px"
-                @search="findAllToAddressDto"
-              />
-            </a-space>
-            <a-row :gutter="16" class="address-list">
-              <a-col 
-                v-for="(item, index) in toAddressDto"
-                :key="index"
-                :span="8"
-              >
-                <a-card 
-                  :class="{ 'selected-card': item.defaultAddress }"
-                  @click="selectAddress(item)"
-                >
-                  <p>收货单位：{{ item.toClient }}</p>
-                  <p>收货地址：{{ item.toAddress }}</p>
-                  <p>收货电话：{{ item.toContractPhone }}</p>
-                  <p>收货联系人：{{ item.toContractUser }}</p>
-                </a-card>
-              </a-col>
-            </a-row>
-            <a-button 
-              v-if="toAddressDto.length < pagination3.total"
-              type="link"
-              @click="displayMoreToAddress"
-            >
-              显示更多
-            </a-button>
-          </a-tab-pane>
-
-          <!-- 发货地址部分 -->
-          <a-tab-pane key="2" tab="发货地址">
-            <a-space>
-              <a-button type="link" @click="openFromAddress">新增</a-button>
-              <a-button type="link" @click="refreshFrom">刷新</a-button>
-              <a-input-search 
-                v-model:value="fromMessage"
-                placeholder="输入发货地址进行查询"
-                style="width: 200px"
-                @search="findAllFromAddressDto"
-              />
-            </a-space>
-            <a-row :gutter="16" class="address-list">
-              <a-col 
-                v-for="(item, index) in fromAddressDto"
-                :key="index"
-                :span="8"
-              >
-                <a-card 
-                  :class="{ 'selected-card': item.defaultAddress }"
-                  @click="selectAddress2(item)"
-                >
-                  <p>发货单位：{{ item.fromClient }}</p>
-                  <p>发货地址：{{ item.fromAddress }}</p>
-                  <p>发货电话：{{ item.fromContractPhone }}</p>
-                  <p>发货联系人：{{ item.fromContractUser }}</p>
-                </a-card>
-              </a-col>
-            </a-row>
-            <a-button 
-              v-if="fromAddressDto.length < pagination4.total"
-              type="link"
-              @click="displayMoreFromAddress"
-            >
-              显示更多
-            </a-button>
-          </a-tab-pane>
-        </a-tabs>
-
-        <!-- 单据号表格改造 -->
-        <a-table
-          :columns="[{ 
-            title: '单据号', 
-            dataIndex: 'documentNo',
-            customRender: (_, record) => `${record.documentNo}(${record.documentAccountDate})`
-          }]"
-          :data-source="stockOutPrepares"
-          size="small"
-          :row-class-name="record => record.isChecked ? 'selected-row' : ''"
-        >
-          <template #bodyCell="{ column, record }">
-            <span @click="setStockOutPrepare(record)">{{ column.customRender() }}</span>
-          </template>
-        </a-table>
-
-        <template #footer>
-          <a-space>
-            <a-button @click="cancel">取消</a-button>
-            <a-button type="primary" @click="picking">确定领料</a-button>
-          </a-space>
+        <a-row :gutter="16" class="address-list">
+          <a-col v-for="(item, index) in toAddressDto" :key="index" :span="8">
+            <a-card :class="{ 'selected-card': item.defaultAddress }" @click="selectAddress(item)">
+              <p>收货单位：{{ item.toClient }}</p>
+              <p>收货地址：{{ item.toAddress }}</p>
+              <p>收货电话：{{ item.toContractPhone }}</p>
+              <p>收货联系人：{{ item.toContractUser }}</p>
+            </a-card>
+          </a-col>
+        </a-row>
+        <a-button v-if="toAddressDto.length < pagination3.total" type="link" @click="displayMoreToAddress">
+          显示更多
+        </a-button>
+      </a-tab-pane>
+
+      <!-- 发货地址部分 -->
+      <a-tab-pane key="2" tab="发货地址">
+        <a-space>
+          <a-button type="link" @click="openFromAddress">新增</a-button>
+          <a-button type="link" @click="refreshFrom">刷新</a-button>
+          <a-input-search
+            v-model:value="fromMessage" placeholder="输入发货地址进行查询" style="width: 200px"
+            @search="findAllFromAddressDto"
+          />
+        </a-space>
+        <a-row :gutter="16" class="address-list">
+          <a-col v-for="(item, index) in fromAddressDto" :key="index" :span="8">
+            <a-card :class="{ 'selected-card': item.defaultAddress }" @click="selectAddress2(item)">
+              <p>发货单位：{{ item.fromClient }}</p>
+              <p>发货地址：{{ item.fromAddress }}</p>
+              <p>发货电话：{{ item.fromContractPhone }}</p>
+              <p>发货联系人：{{ item.fromContractUser }}</p>
+            </a-card>
+          </a-col>
+        </a-row>
+        <a-button v-if="fromAddressDto.length < pagination4.total" type="link" @click="displayMoreFromAddress">
+          显示更多
+        </a-button>
+      </a-tab-pane>
+    </a-tabs>
+
+    <!-- 单据号表格改造 -->
+    <a-table
+      :columns="[{
+        title: '单据号',
+        dataIndex: 'documentNo',
+        customRender: (_, record) => `${record.documentNo}(${record.documentAccountDate})`
+      }]" :data-source="stockOutPrepares" size="small"
+      :row-class-name="record => record.isChecked ? 'selected-row' : ''"
+    >
+      <template #bodyCell="{ column, record }">
+        <span @click="setStockOutPrepare(record)">{{ column.customRender() }}</span>
+      </template>
+    </a-table>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="cancel">取消</a-button>
+        <a-button type="primary" @click="picking">确定领料</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+
+  <!--显示物料所在各个项目数量的modal框-->
+  <a-modal v-model:open="modal2" title="物料分布情况" width="60%">
+    <a-table
+      :columns="[
+        {
+          title: '项目名称，编号',
+          dataIndex: 'inventoryClass',
+          align: 'center'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          align: 'center'
+        }
+      ]" :data-source="inventorys" size="small" bordered
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'inventoryClass'">
+          {{ record.inventoryClass }}
         </template>
-      </a-modal>
-        
-      <!--显示物料所在各个项目数量的modal框-->
-      <a-modal v-model:open="modal2" title="物料分布情况" width="60%">
-        <a-table
-          :columns="[
-            { 
-              title: '项目名称，编号', 
-              dataIndex: 'inventoryClass',
-              align: 'center'
-            },
-            {
-              title: '数量',
-              dataIndex: 'quantity',
-              align: 'center'
-            }
-          ]"
-          :data-source="inventorys"
-          size="small"
-          bordered
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.dataIndex === 'inventoryClass'">
-              {{ record.inventoryClass }}
-            </template>
-            <template v-if="column.dataIndex === 'quantity'">
-              {{ record.quantity }}
-            </template>
-          </template>
-        </a-table>
-      </a-modal>
-      <ImagePreview ref="imagePreview" />
-    </a-layout-content>
-  </a-layout>
+        <template v-if="column.dataIndex === 'quantity'">
+          {{ record.quantity }}
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
+  <ImagePreview ref="imagePreview" />
 </template>
 
 <script>
@@ -344,8 +257,8 @@ export default {
     return {
       pickingCars: [],
       stockOutPrepares: [],
-      projectList:[],//项目事件数据
-      warehouseList:[],//仓库数据
+      projectList: [],//项目事件数据
+      warehouseList: [],//仓库数据
       stockOutPrepateTemplateList: [],
       inventoryName: undefined,
       inventoryNo: undefined,
@@ -353,6 +266,7 @@ export default {
       warehouseId: undefined,
       projectItemId: undefined,
       stockOutPrepateTemplateId: undefined,
+      stockOutPrepateTemplateName:'',
       documentType: 0, //手工单据
       documentStatus: 'EDIT', //审批通过的领料单据
       stockOutPrepareId: undefined, //选择的领料单
@@ -474,7 +388,7 @@ export default {
     // 添加行样式方法
     setRowClassName(record) {
       return record.currentStockCanPickQuantity < record.quantity ||
-      record.currentStockCanPickQuantity < record.pickQuantity
+        record.currentStockCanPickQuantity < record.pickQuantity
         ? 'danger-row'
         : '';
     },
@@ -485,31 +399,31 @@ export default {
       this.getDatas();
     },
     // 项目事件
-    projectHandleChange(_,{key,value}) {
+    projectHandleChange(_, { key, value }) {
       var _self = this;
-      console.log(key,value);
+      console.log(key, value);
       this.projectItemId = key;
-      localStorage.setItem('projectItemId',key);
-      localStorage.setItem('projectItemName',value);
+      localStorage.setItem('projectItemId', key);
+      localStorage.setItem('projectItemName', value);
       _self.getDatas();
       _self.getStockOutPrepareDatas();
     },
     // 仓库事件
-    storeHandleChange(_,{key,value}) {
+    storeHandleChange(_, { key, value }) {
       var _self = this;
       this.warehouseId = key;
-      console.log(key,value);
-      localStorage.setItem('warehouseId',key);
-      localStorage.setItem('warehouseName',value);
+      console.log(key, value);
+      localStorage.setItem('warehouseId', key);
+      localStorage.setItem('warehouseName', value);
       _self.getDatas();
     },
 
-    templateHandleChange(_,{key,value}) {
+    templateHandleChange(_, { key, value }) {
       var _self = this;
       this.stockOutPrepateTemplateId = key;
-      console.log(key,value);
-      localStorage.setItem('stockOutPrepateTemplateId',key);
-      localStorage.setItem('stockOutPrepateTemplateName',value);
+      console.log(key, value);
+      localStorage.setItem('stockOutPrepateTemplateId', key);
+      localStorage.setItem('stockOutPrepateTemplateName', value);
       //需求模板改变，设定页数充1开始
       _self.pagination.current_page = 1;
       _self.getDatas();
@@ -525,7 +439,7 @@ export default {
       };
       InvoiceResource.findAllProjectItemAddress(toAddressDto).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             if (successData.datas) {
               _self.toAddressDto = successData.datas;
             }
@@ -549,7 +463,7 @@ export default {
       };
       InvoiceResource.findAllProjectItemAddress(fromAddressDto).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             if (successData.datas) {
               _self.fromAddressDto = successData.datas;
             }
@@ -573,7 +487,7 @@ export default {
       var _self = this;
       var url = Common.getRedirectUrl(
         '#/wms/stockOutPrepareLineProjectReceivingAddress?projectItemId=' +
-          _self.projectItemId,
+        _self.projectItemId,
       );
       window.open(url);
     },
@@ -581,7 +495,7 @@ export default {
       var _self = this;
       var url = Common.getRedirectUrl(
         '#/wms/stockOutPrepareLineProjectShippingAddress?projectItemId=' +
-          _self.projectItemId,
+        _self.projectItemId,
       );
       window.open(url);
     },
@@ -617,7 +531,7 @@ export default {
       };
       InvoiceResource.findAllProjectItemAddress(toAddressDto).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             if (successData.datas) {
               _self.toAddressDto = successData.datas;
               _self.pagination3.total = successData.total;
@@ -647,7 +561,7 @@ export default {
       };
       InvoiceResource.findAllProjectItemAddress(fromAddressDto).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             if (successData.datas) {
               _self.fromAddressDto = successData.datas;
               _self.pagination4.total = successData.total;
@@ -729,10 +643,10 @@ export default {
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.projectList = datas; 
-          }else{
+            _self.projectList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -754,10 +668,10 @@ export default {
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.warehouseList = datas; 
-          }else{
+            _self.warehouseList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -780,10 +694,10 @@ export default {
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.stockOutPrepateTemplateList = datas; 
-          }else{
+            _self.stockOutPrepateTemplateList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -812,9 +726,9 @@ export default {
       $.ajax({
         url: Common.getApiURL(
           'InventoryInstanceResource/findProjectItemInventoryQuantityByInventoryAndWarehouse?inventoryId=' +
-            inventoryId +
-            '&warehouseId=' +
-            _self.warehouseId,
+          inventoryId +
+          '&warehouseId=' +
+          _self.warehouseId,
         ),
         type: 'get',
         dataType: 'json',
@@ -823,7 +737,7 @@ export default {
         },
 
         success: function (data) {
-          if(data.errorCode == 0) {
+          if (data.errorCode == 0) {
             _self.inventorys = data.datas;
           }
         },
@@ -851,7 +765,7 @@ export default {
 
       StockOutPrepareResource.list(param).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.stockOutPrepares.splice(0, _self.stockOutPrepares.length);
             _self.pagination2.total = successData.total;
             var obj = {
@@ -895,11 +809,11 @@ export default {
         inventoryNo: _self.inventoryNo,
         inventoryType: _self.inventoryType,
       };
-      _self.loading=true;
+      _self.loading = true;
 
       PickingCarResource.list(param).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.pagination.total = successData.total;
 
             _self.pickingCars = successData.datas;
@@ -930,13 +844,13 @@ export default {
             _self.pagination.last_page = Math.ceil(
               successData.total / successData.length,
             );
-            _self.loading=false;
+            _self.loading = false;
           } else {
             Notify.error('提示', successData.errorMessage, false);
           }
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -1050,21 +964,21 @@ export default {
             cssClass: 'btn-primary',
             action: function (dialogItself) {
               dialogItself.close();
-              _self.loading=true;
+              _self.loading = true;
 
               PickingCarResource.deletePickingCar(param).then(
                 successData => {
-                  if(successData.errorCode == 0) {
+                  if (successData.errorCode == 0) {
                     var message = successData.errorMessage;
                     Notify.success('成功', message, 4000);
                     _self.getDatas();
-                    _self.loading=false;
+                    _self.loading = false;
                   } else {
                     Notify.error('提示', successData.errorMessage, false);
                   }
                 },
                 errorData => {
-                  _self.loading=false;
+                  _self.loading = false;
                   Common.processException(errorData);
                 },
               );
@@ -1114,7 +1028,7 @@ export default {
                   Common.showDialog(
                     '提示',
                     '选择的物料仓库与选择的领料单中的仓库不相同。领料单的仓库是' +
-                      _self.stockOutPrepareWarehouseName,
+                    _self.stockOutPrepareWarehouseName,
                     'error',
                   );
                   return;
@@ -1196,7 +1110,7 @@ export default {
           return;
         }
       }
-      _self.loading=true;
+      _self.loading = true;
       if (currentStock.length > 0) {
         var param = {
           projectItemId: _self.projectItemId,
@@ -1211,7 +1125,7 @@ export default {
 
         StockOutPrepareResource.saveManual(param).then(
           successData => {
-            if(successData.errorCode == 0) {
+            if (successData.errorCode == 0) {
               _self.stockOutPrepareSaveResult = successData.data;
               var trueCount = 0;
               var falseCount = 0;
@@ -1232,19 +1146,19 @@ export default {
               _self.getStockOutPrepareDatas();
               _self.clear();
               _self.checked = false;
-              _self.loading=false;
+              _self.loading = false;
             } else {
               Notify.error('提示', successData.errorMessage, false);
               return;
             }
           },
           errorData => {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(errorData);
           },
         );
       } else {
-        _self.loading=false;
+        _self.loading = false;
         Common.showDialog('提示', '请选择要提交的内容', 'error');
       }
     },
@@ -1303,11 +1217,10 @@ export default {
 
 .search-form {
   margin-bottom: 16px;
-  
-  .ant-form-item {
-    margin-right: 24px;
-  }
+
+
 }
+
 .pagination {
   margin-top: 16px;
   text-align: right;
@@ -1319,10 +1232,6 @@ export default {
 
 .address-list {
   margin-top: 16px;
-  
-  .ant-col {
-    margin-bottom: 16px;
-  }
 }
 
 .flex-footer {
@@ -1331,7 +1240,6 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 12px;
-  background: #fafafa;
 }
 
 .selected-card {
@@ -1363,4 +1271,23 @@ export default {
   height: 40px;
   cursor: pointer;
 }
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 192px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/pick/StockOutPrepareApproved.vue

@@ -1,120 +1,100 @@
 <template>
-  <a-layout>
-    <a-layout-header class="header">
-      <Navbar title="领料清单" :is-go-back="false">
-        <a-space>
-          <a-button type="link" title="仓库库存" @click="stockOutPrepareLine">
-            <template #icon><HomeOutlined /></template>
-          </a-button>
-          <a-button type="link" title="领料车" @click="openStockOutCar">
-            <template #icon><ShoppingCartOutlined /></template>
-            <a-badge :count="count" :number-style="{ marginTop: '-2px' }" />
-          </a-button>
-        </a-space>
-      </Navbar>
-    </a-layout-header>
-
-    <a-layout-content class="content">
-      <a-form layout="inline" class="search-form">
-        <a-form-item label="项目事件" required>
-          <a-select
-            v-model:value="projectItemName"
-            style="width: 220px"
-            show-search 
-            @change="projectHandleChange"
-          >
-            <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
-              {{ item.name }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <a-form-item>
-          <a-space>
-            <a-button type="primary" @click="getStockOutPrepareDatas">查询</a-button>
-            <a-button danger @click="deleteStockOutPrepare">删除</a-button>
-          </a-space>
-        </a-form-item>
-      </a-form>
-
-      <a-layout class="main-layout">
-        <a-layout-sider width="300px" class="sider">
-          <a-space direction="vertical" class="pagination-controls">
-            <a-button-group>
-              <a-button @click="previousPage">上一页</a-button>
-              <a-button @click="nextPage">下一页</a-button>
-            </a-button-group>
-            
-            <a-list item-layout="horizontal" :data-source="stockOutPrepares">
-              <template #renderItem="{ item }">
-                <a-list-item 
-                  :class="{ 'selected-list-item': item === selectedStockOutPrepare }"
-                  @click="setStockOutPrepare(item)"
-                >
-                  {{ item.documentNo }}({{ item.warehouseName }},{{ item.status }})
-                </a-list-item>
-              </template>
-            </a-list>
-          </a-space>
-        </a-layout-sider>
-
-        <a-layout-content>
-          <a-table
-            :columns="columns"
-            :data-source="stockOutPrepareLines"
-            :scroll="{ x: 1500, y: '60vh' }"
-            size="small"
-            bordered
-            row-key="inventoryId"
-          >
-            <template #bodyCell="{ column, record }">
-              <template v-if="column.dataIndex === 'image'">
-                <a-image
-                  :src="Common.getThumbnailImageSrc(className, record.imageName)"
-                  width="40"
-                  :preview="false"
-                  @click="$refs.imagePreview.preview(className, record.imageName)"
-                />
-              </template>
-              
-              <template v-if="column.dataIndex === 'inventoryStatus'">
-                <a-tag :color="record.inventoryStatus === 2 ? 'blue' : 'red'">
-                  {{ record.inventoryStatus === 2 ? '已拣货' : '未拣货' }}
-                </a-tag>
-              </template>
-            </template>
-          </a-table>
-        </a-layout-content>
-      </a-layout>
-
-      <div class="flex-footer">
-        <a-space>
-          <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ 
-            pagination.current_page * pagination.per_page 
-          }}条,共计{{ pagination.total }}条</span>
-          <a-select 
-            v-model:value="pagination.per_page" 
-            style="width: 90px"
-            @change="gridSizeSelect"
-          >
-            <a-select-option :value="20">20</a-select-option>
-            <a-select-option :value="50">50</a-select-option>
-            <a-select-option :value="100">100</a-select-option>
-          </a-select>
-          <a-pagination 
-            v-model:current="pagination.current_page"
-            :total="pagination.total"
-            :page-size="pagination.per_page"
-            show-less-items
-            @change="getStockOutPrepareLineDatas"
-          />
-        </a-space>
-      </div>
+  <Navbar title="领料清单" :is-go-back="true">
+    <a-space>
+      <a-button type="link" title="仓库库存" @click="stockOutPrepareLine">
+        <template #icon>
+          <HomeOutlined />
+        </template>
+      </a-button>
+      <a-button type="link" title="领料车" @click="openStockOutCar">
+        <template #icon>
+          <ShoppingCartOutlined />
+        </template>
+        <a-badge :count="count" :number-style="{ marginTop: '-2px' }" />
+      </a-button>
+    </a-space>
+  </Navbar>
+
+  <a-form layout="inline" class="search-form">
+    <a-form-item label="项目事件" required>
+      <a-select v-model:value="projectItemName" style="width: 220px" show-search @change="projectHandleChange">
+        <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
+          {{ item.name }}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item>
+      <a-space>
+        <a-button type="primary" @click="getStockOutPrepareDatas">查询</a-button>
+        <a-button danger @click="deleteStockOutPrepare">删除</a-button>
+      </a-space>
+    </a-form-item>
+  </a-form>
+
+  <a-layout class="main-layout">
+    <a-layout-sider width="300px" class="sider">
+      <a-space direction="vertical" class="pagination-controls">
+        <a-button-group>
+          <a-button @click="previousPage">上一页</a-button>
+          <a-button @click="nextPage">下一页</a-button>
+        </a-button-group>
+
+        <a-list item-layout="horizontal" :data-source="stockOutPrepares">
+          <template #renderItem="{ item }">
+            <a-list-item
+              :class="{ 'selected-list-item': item === selectedStockOutPrepare }"
+              @click="setStockOutPrepare(item)"
+            >
+              {{ item.documentNo }}({{ item.warehouseName }},{{ item.status }})
+            </a-list-item>
+          </template>
+        </a-list>
+      </a-space>
+    </a-layout-sider>
+
+    <a-layout-content>
+      <a-table
+        :columns="columns" :data-source="stockOutPrepareLines" :scroll="{ x: 1500, y: '60vh' }" size="small"
+        bordered row-key="inventoryId"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'image'">
+            <a-image
+              :src="Common.getThumbnailImageSrc(className, record.imageName)" width="40" :preview="false"
+              @click="$refs.imagePreview.preview(className, record.imageName)"
+            />
+          </template>
+
+          <template v-if="column.dataIndex === 'inventoryStatus'">
+            <a-tag :color="record.inventoryStatus === 2 ? 'blue' : 'red'">
+              {{ record.inventoryStatus === 2 ? '已拣货' : '未拣货' }}
+            </a-tag>
+          </template>
+        </template>
+      </a-table>
     </a-layout-content>
-
-    <ImagePreview ref="imagePreview" />
-    <Loading v-if="loading" />
   </a-layout>
+
+  <div class="flex-footer">
+    <a-space>
+      <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
+        pagination.current_page * pagination.per_page
+      }}条,共计{{ pagination.total }}条</span>
+      <a-select v-model:value="pagination.per_page" style="width: 90px" @change="gridSizeSelect">
+        <a-select-option :value="20">20</a-select-option>
+        <a-select-option :value="50">50</a-select-option>
+        <a-select-option :value="100">100</a-select-option>
+      </a-select>
+      <a-pagination
+        v-model:current="pagination.current_page" :total="pagination.total" :page-size="pagination.per_page"
+        show-less-items @change="getStockOutPrepareLineDatas"
+      />
+    </a-space>
+  </div>
+
+  <ImagePreview ref="imagePreview" />
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -134,7 +114,7 @@ export default {
     return {
       stockOutPrepareLines: [], //详单对应的数据
       stockOutPrepares: [], //领料主单数据
-      projectList:[],//项目事件数据
+      projectList: [],//项目事件数据
       documentType: 0, //手工单据
       documentStatus: 'PROCESSING', //查询全部单据
       projectItemId: undefined,
@@ -203,13 +183,13 @@ export default {
   methods: {
 
     // 项目事件
-    projectHandleChange:function (_,{key,value}) {
+    projectHandleChange: function (_, { key, value }) {
       var _self = this;
-      console.log(key,value);
+      console.log(key, value);
       this.projectItemId = key;
       this.projectItemName = value;
-      localStorage.setItem('projectItemId',key);
-      localStorage.setItem('projectItemName',value);
+      localStorage.setItem('projectItemId', key);
+      localStorage.setItem('projectItemName', value);
       _self.getStockOutPrepareDatas();
     },
 
@@ -219,7 +199,7 @@ export default {
     queryPickingCarCount: function () {
       var _self = this;
       PickingCarResource.queryPickingCarCount().then(successData => {
-        if(successData.errorCode == 0) {
+        if (successData.errorCode == 0) {
           _self.count = successData.data;
         }
       }, errorData => {
@@ -279,10 +259,10 @@ export default {
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.projectList = datas; 
-          }else{
+            _self.projectList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -342,12 +322,12 @@ export default {
         documentStatus: _self.documentStatus,
         loadLines: false,
       };
-      _self.loading=true;
+      _self.loading = true;
 
 
       StockOutPrepareResource.list(param).then(successData => {
-        if(successData.errorCode == 0) {
-          _self.loading=false;
+        if (successData.errorCode == 0) {
+          _self.loading = false;
           _self.pagination2.total = successData.total;
           _self.stockOutPrepares = successData.datas;
           _self.frist();
@@ -357,7 +337,7 @@ export default {
           Notify.error('提示', successData.errorMessage, false);
         }
       }, errorData => {
-        _self.loading=false;
+        _self.loading = false;
         Common.processException(errorData);
       });
 
@@ -399,20 +379,20 @@ export default {
             cssClass: 'btn-primary',
             action: function (dialogItself) {
               dialogItself.close();
-              _self.loading=true;
+              _self.loading = true;
 
               StockOutPrepareResource.deleteStockOutPrepare(_self.stockOutPrepareId).then(successData => {
-                if(successData.errorCode == 0) {
+                if (successData.errorCode == 0) {
                   var message = successData.data.errorMessage;
                   Notify.success('成功', message, 4000);
                   _self.getStockOutPrepareDatas();
-                  _self.loading=false;
+                  _self.loading = false;
                 } else {
                   Notify.error('提示', successData.errorMessage, false);
                   return;
                 }
               }, errorData => {
-                _self.loading=false;
+                _self.loading = false;
                 Common.processException(errorData);
               });
             },
@@ -439,11 +419,11 @@ export default {
         length: _self.pagination.per_page,
         stockOutPrepareId: _self.stockOutPrepareId,
       };
-      _self.loading=true;
+      _self.loading = true;
 
       StockOutPrepareLineResource.queryByStockoutPrepare(param).then(successData => {
-        if(successData.errorCode == 0) {
-          _self.loading=false;
+        if (successData.errorCode == 0) {
+          _self.loading = false;
 
           _self.pagination.total = successData.total;
           _self.stockOutPrepareLines = successData.datas;
@@ -453,7 +433,7 @@ export default {
           return;
         }
       }, errorData => {
-        _self.loading=false;
+        _self.loading = false;
         Common.processException(errorData);
       });
 

src/pick/StockOutPrepareLine.vue

@@ -1,37 +1,25 @@
 <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> -->
+  <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-content class="content-container">
-      <!-- 搜索表单 -->
-      <a-form layout="inline" class="search-form">
-        <a-form-item label="项目事件" required>
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="项目事件" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
           <a-select
-            v-model:value="projectItemName"
-            style="width: 220px"
-            show-search 
-            allow-clear
+            v-model:value="projectItemName" style="width: 160px" show-search allow-clear
             @change="projectHandleChange"
           >
-            <a-select-option 
-              v-for="item in projectList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+            <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
@@ -39,299 +27,215 @@
             <template #icon><plus-outlined /></template>
           </a-button>
         </a-form-item>
-
-        <a-form-item label="仓库" required>
-          <a-select
-            v-model:value="warehouseName"
-            style="width: 220px" 
-            allow-clear 
-            @change="storeHandleChange"
-          >
-            <a-select-option 
-              v-for="item in warehouseList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+      </a-col>
+      <a-col>
+        <a-form-item label="选择仓库" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-select v-model:value="warehouseName" class="w-full" allow-clear @change="storeHandleChange">
+            <a-select-option v-for="item in warehouseList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
         </a-form-item>
-
-        <a-form-item label="需求模板">
+      </a-col>
+      <a-col>
+        <a-form-item label="需求模板" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
           <a-select
-            v-model:value="stockOutPrepateTemplateName"
-            style="width: 220px"
-            show-search 
-            allow-clear 
+            v-model:value="stockOutPrepateTemplateName" class="w-full" show-search allow-clear
             @change="templateHandleChange"
           >
-            <a-select-option 
-              v-for="item in stockOutPrepateTemplateList" 
-              :key="item.id" 
-              :value="item.name"
-            >
+            <a-select-option v-for="item in stockOutPrepateTemplateList" :key="item.id" :value="item.name">
               {{ item.name }}
             </a-select-option>
           </a-select>
         </a-form-item>
-
-        <a-form-item label="物料编码">
-          <a-input
-            v-model:value="inventoryNo"
-            placeholder="物料编码"
-            @keyup.enter="getDatas"
-          />
+      </a-col>
+      <a-col>
+        <a-form-item label="物料编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryNo" placeholder="物料编码" class="w-full" @keyup.enter="getDatas" />
         </a-form-item>
-
-        <a-form-item label="物料名称">
-          <a-input
-            v-model:value="inventoryName"
-            placeholder="物料名称"
-            @keyup.enter="getDatas"
-          />
+      </a-col>
+      <a-col>
+        <a-form-item label="物料名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryName" placeholder="物料名称" class="w-full" @keyup.enter="getDatas" />
         </a-form-item>
-
-        <a-form-item label="规格型号">
-          <a-input
-            v-model:value="inventoryType"
-            placeholder="规格型号"
-            @keyup.enter="getDatas"
-          />
+      </a-col>
+      <a-col>
+        <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryType" placeholder="规格型号" class="w-full" @keyup.enter="getDatas" />
         </a-form-item>
-
+      </a-col>
+      <a-col>
         <a-form-item>
           <a-space>
-            <a-button type="primary" @click="getDatas">查询</a-button>
+            <a-button style="margin-left: 12px;" type="primary" @click="getDatas">查询</a-button>
             <a-button @click="submitStock">加入领料车</a-button>
           </a-space>
         </a-form-item>
-      </a-form>
+      </a-col>
+    </a-row>
+  </a-form>
 
-      <!-- 主表格 -->
-      <a-table
-        :columns="columns"
-        :data-source="currentStock"
-        :row-key="record => record.inventoryId"
-        :scroll="{ x: 2000, y: 500 }"
-        :pagination="false"
-        bordered
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'checked'">
-            <a-checkbox 
-              :checked="record.checked"
-              @change="e => handleCheckboxChange(record, e)"
-            />
-          </template>
+  <!-- 主表格 -->
+  <a-table
+    :columns="columns" :data-source="currentStock" :row-key="record => record.inventoryId"
+    :scroll="{ x: 2000, y: 500 }" :pagination="false" bordered
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'checked'">
+        <a-checkbox :checked="record.checked" @change="e => handleCheckboxChange(record, e)" />
+      </template>
 
-          <template v-if="column.dataIndex === 'image'">
-            <a-image
-              :src="Common.getThumbnailImageSrc(className, record.imageName)"
-              :width="50"
-              :preview="false"
-              @click="$refs.imagePreview.preview(className, record.imageName)"
-            />
-          </template>
+      <template v-if="column.dataIndex === 'image'">
+        <a-image
+          :src="Common.getThumbnailImageSrc(className, record.imageName)" :width="50" :preview="false"
+          @click="$refs.imagePreview.preview(className, record.imageName)"
+        />
+      </template>
 
-          <template v-if="column.dataIndex === 'pickQuantity'">
-            <a-input-number 
-              v-model:value="record.pickQuantity"
-              :min="0"
-              @change="checkBoxChange(record)"
-            />
-          </template>
+      <template v-if="column.dataIndex === 'pickQuantity'">
+        <a-input-number v-model:value="record.pickQuantity" :min="0" @change="checkBoxChange(record)" />
+      </template>
 
-          <template v-if="column.dataIndex === 'operation'">
-            <a-button type="link" @click="findByInventoryId(record)">查看</a-button>
-          </template>
-        </template>
-      </a-table>
+      <template v-if="column.dataIndex === 'operation'">
+        <a-button type="link" @click="findByInventoryId(record)">查看</a-button>
+      </template>
+    </template>
+  </a-table>
 
-      <!-- 分页 -->
-      <a-pagination
-        v-model:current="pagination.current_page"
-        v-model:pageSize="pagination.per_page"
-        :total="pagination.total"
-        show-size-changer
-        class="pagination-container"
-        @change="handlePaginationChange"
-      />
+  <!-- 分页 -->
+  <a-pagination
+    v-model:current="pagination.current_page" v-model:pageSize="pagination.per_page"
+    :total="pagination.total" show-size-changer class="pagination-container" @change="handlePaginationChange"
+  />
 
-      <!-- 物料分布模态框 -->
-      <a-modal 
-        v-model:open="modal1" 
-        title="物料分布情况"
-        width="60%"
-        :footer="null"
-      >
-        <a-table
-          :columns="distributionColumns"
-          :data-source="inventorys"
-          :scroll="{ x: 800 }"
-          row-key="id"
-          bordered
-        >
-          <template #bodyCell="{ column, text }">
-            <template v-if="column.dataIndex === 'inventoryClass' || column.dataIndex === 'quantity'">
-              <span>{{ text }}</span>
-            </template>
-          </template>
-        </a-table>
-      </a-modal>
+  <!-- 物料分布模态框 -->
+  <a-modal v-model:open="modal1" title="物料分布情况" width="60%" :footer="null">
+    <a-table :columns="distributionColumns" :data-source="inventorys" :scroll="{ x: 800 }" row-key="id" bordered>
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'inventoryClass' || column.dataIndex === 'quantity'">
+          <span>{{ text }}</span>
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
 
-      <!-- 修改 modal4 新增项目事件弹窗 -->
-      <a-modal v-model:open="modal4" title="新增项目事件" width="600px">
-        <StockOutPrepareLineAddProject
-          ref="addProject"
-          @close-project-item-modal="closeProjectItemModal"
-        />
-        <template #footer>
-          <a-space>
-            <a-button @click="closeProjectItemModal">取消</a-button>
-            <a-button type="primary" @click="saveProjectItem">确定</a-button>
-          </a-space>
+  <!-- 修改 modal4 新增项目事件弹窗 -->
+  <a-modal v-model:open="modal4" title="新增项目事件" width="600px">
+    <StockOutPrepareLineAddProject ref="addProject" @close-project-item-modal="closeProjectItemModal" />
+    <template #footer>
+      <a-space>
+        <a-button @click="closeProjectItemModal">取消</a-button>
+        <a-button type="primary" @click="saveProjectItem">确定</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+
+  <!-- 修改 modal5 物料分布情况弹窗 -->
+  <a-modal v-model:open="modal5" title="物料分布情况" width="80%">
+    <a-table
+      :columns="[
+        { title: '选择', dataIndex: 'selection', width: 100 },
+        { title: '物料编码', dataIndex: 'no', width: 150 },
+        { title: '物料名称', dataIndex: 'name', width: 150 },
+        { title: '货位', dataIndex: 'positionBarCode', width: 100 },
+        { title: '状态', dataIndex: 'status', width: 100 },
+        { title: '齐套情况', dataIndex: 'finished', width: 100 },
+        { title: '工具数量', dataIndex: 'quantity', width: 100 },
+        { title: '操作', dataIndex: 'operation', width: 150 }
+      ]" :data-source="inventoryInstanceCurrentStocks" :scroll="{ x: 1500 }" row-key="id"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
+        </template>
+        <template v-if="column.dataIndex === 'selection'">
+          <a-checkbox :checked="record.checked" @change="e => selectBox(record, e.target.checked)" />
+        </template>
+        <template v-if="column.dataIndex === 'operation'">
+          <a-button type="link" @click="findInventoryInstanceBindLine(record)">
+            查看内部工具
+          </a-button>
         </template>
-      </a-modal>
+      </template>
+    </a-table>
+    <template #footer>
+      <a-space>
+        <a-button @click="cancel">取消</a-button>
+        <a-button type="primary" @click="joinPickCarByBox">加入领料车</a-button>
+      </a-space>
+    </template>
+  </a-modal>
 
-      <!-- 修改 modal5 物料分布情况弹窗 -->
-      <a-modal v-model:open="modal5" title="物料分布情况" width="80%">
-        <a-table
-          :columns="[
-            { title: '选择', dataIndex: 'selection', width: 100 },
-            { title: '物料编码', dataIndex: 'no', width: 150 },
-            { title: '物料名称', dataIndex: 'name', width: 150 },
-            { title: '货位', dataIndex: 'positionBarCode', width: 100 },
-            { title: '状态', dataIndex: 'status', width: 100 },
-            { title: '齐套情况', dataIndex: 'finished', width: 100 },
-            { title: '工具数量', dataIndex: 'quantity', width: 100 },
-            { title: '操作', dataIndex: 'operation', width: 150 }
-          ]"
-          :data-source="inventoryInstanceCurrentStocks"
-          :scroll="{ x: 1500 }"
-          row-key="id"
-        >
-          <template #bodyCell="{ column, record, index }">
-            <template v-if="column.dataIndex === 'index'">
-              {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
-            </template>
-            <template v-if="column.dataIndex === 'selection'">
-              <a-checkbox
-                :checked="record.checked"
-                @change="e => selectBox(record, e.target.checked)"
-              />
-            </template>
-            <template v-if="column.dataIndex === 'operation'">
-              <a-button type="link" @click="findInventoryInstanceBindLine(record)">
-                查看内部工具
-              </a-button>
-            </template>
-          </template>
-        </a-table>
-        <template #footer>
-          <a-space>
-            <a-button @click="cancel">取消</a-button>
-            <a-button type="primary" @click="joinPickCarByBox">加入领料车</a-button>
-          </a-space>
+  <!-- 修改 modal6 物料分布情况弹窗 -->
+  <a-modal v-model:open="modal6" title="物料分布情况" width="80%">
+    <a-table
+      :columns="[
+        { title: '序号', dataIndex: 'index', width: 100 },
+        { title: '所在成套工具箱', dataIndex: 'no', width: 150 },
+        { title: '数量', dataIndex: 'quantity', width: 150 },
+        { title: '货位', dataIndex: 'positionBarCode', width: 150 },
+        { title: '项目事件', dataIndex: 'projectItem', width: 150 }
+      ]" :data-source="inventoryInstanceCurrentStocks2" row-key="id"
+    >
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
         </template>
-      </a-modal>
+      </template>
+    </a-table>
+  </a-modal>
 
-      <!-- 修改 modal6 物料分布情况弹窗 -->
-      <a-modal v-model:open="modal6" title="物料分布情况" width="80%">
-        <a-table
-          :columns="[
-            { title: '序号', dataIndex: 'index', width: 100 },
-            { title: '所在成套工具箱', dataIndex: 'no', width: 150 },
-            { title: '数量', dataIndex: 'quantity', width: 150 },
-            { title: '货位', dataIndex: 'positionBarCode', width: 150 },
-            { title: '项目事件', dataIndex: 'projectItem', width: 150 }
-          ]"
-          :data-source="inventoryInstanceCurrentStocks2"
-          row-key="id"
-        >
-          <template #bodyCell="{ column, index }">
-            <template v-if="column.dataIndex === 'index'">
-              {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
-            </template>
-          </template>
-        </a-table>
-      </a-modal>
+  <!-- 修改 modal8 工具箱内工具弹窗 -->
+  <a-modal
+    v-model:open="modal8"
+    :title="`${selectedParentInventoryInstance.name}-${selectedParentInventoryInstance.no}-箱内工具`" width="90%"
+    :footer="null"
+  >
+    <a-form layout="inline" class="search-form">
+      <a-form-item label="工具SKU">
+        <a-input v-model:value="toolNo" placeholder="输入工具SKU" @keyup.enter="findLineByCondition" />
+      </a-form-item>
+      <a-form-item label="工具名称">
+        <a-input v-model:value="toolName" placeholder="输入工具名称" @keyup.enter="findLineByCondition" />
+      </a-form-item>
+      <a-form-item label="规格型号">
+        <a-input v-model:value="toolType" placeholder="输入规格型号" @keyup.enter="findLineByCondition" />
+      </a-form-item>
+    </a-form>
 
-      <!-- 修改 modal8 工具箱内工具弹窗 -->
-      <a-modal 
-        v-model:open="modal8" 
-        :title="`${selectedParentInventoryInstance.name}-${selectedParentInventoryInstance.no}-箱内工具`"
-        width="90%"
-        :footer="null"
-      >
-        <a-form layout="inline" class="search-form">
-          <a-form-item label="工具SKU">
-            <a-input
-              v-model:value="toolNo"
-              placeholder="输入工具SKU"
-              @keyup.enter="findLineByCondition"
-            />
-          </a-form-item>
-          <a-form-item label="工具名称">
-            <a-input
-              v-model:value="toolName"
-              placeholder="输入工具名称"
-              @keyup.enter="findLineByCondition"
-            />
-          </a-form-item>
-          <a-form-item label="规格型号">
-            <a-input
-              v-model:value="toolType"
-              placeholder="输入规格型号"
-              @keyup.enter="findLineByCondition"
-            />
-          </a-form-item>
-        </a-form>
+    <a-table
+      :columns="modal8Columns" :data-source="inventoryInstanceBindLineDtos" :pagination="{
+        total: pagination2.total,
+        current: pagination2.current_page,
+        pageSize: pagination2.per_page,
+        onChange: handlePaginationChange2
+      }" :scroll="{ x: 1500, y: '60vh' }" row-key="id"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
+        </template>
+        <!-- 本次领用数量列 -->
+        <template v-if="column.dataIndex === 'quantity'">
+          <a-input-number
+            v-model:value="record.quantity" :min="0" style="width: 200px"
+            @update:value="val => record.quantity = val"
+          />
+        </template>
 
-        <a-table
-          :columns="modal8Columns"
-          :data-source="inventoryInstanceBindLineDtos"
-          :pagination="{
-            total: pagination2.total,
-            current: pagination2.current_page,
-            pageSize: pagination2.per_page,
-            onChange: handlePaginationChange2
-          }"
-          :scroll="{ x: 1500, y: '60vh' }" 
-          row-key="id"
-        >
-          <template #bodyCell="{ column, record, index }">
-            <template v-if="column.dataIndex === 'index'">
-              {{ (pagination2.current_page - 1) * pagination2.per_page + index + 1 }}
-            </template>
-            <!-- 本次领用数量列 -->
-            <template v-if="column.dataIndex === 'quantity'">
-              <a-input-number 
-                v-model:value="record.quantity"
-                :min="0"
-                style="width: 200px"
-                @update:value="val => record.quantity = val"
-              />
-            </template>
-    
-            <!-- 操作列 -->
-            <template v-if="column.dataIndex === 'operation'">
-              <a-button
-                v-if="record.isDisplay"
-                type="link"
-                @click="joinPickCarByBoxTool(record)"
-              >
-                加入领料车
-              </a-button>
-              <span v-else>物料已出库</span>
-            </template>
-          </template>
-        </a-table>
-      </a-modal>
-    </a-layout-content>
+        <!-- 操作列 -->
+        <template v-if="column.dataIndex === 'operation'">
+          <a-button v-if="record.isDisplay" type="link" @click="joinPickCarByBoxTool(record)">
+            加入领料车
+          </a-button>
+          <span v-else>物料已出库</span>
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
 
-    <Loading v-if="loading" />
-    <ImagePreview ref="imagePreview" />
-  </a-layout>
+  <Loading v-if="loading" />
+  <ImagePreview ref="imagePreview" />
 </template>
 
 <script>
@@ -352,7 +256,7 @@ import StockOutPrepareLineAddProject from './StockOutPrepareLineAddProject.vue';
 import InventoryInstanceResource from '../api/common/InventoryInstanceResource.js';
 import InventoryInstanceBindResource from '../api/wms/InventoryInstanceBindResource.js';
 import InAndOutFlow from '../stock/InAndOutFlow.vue';
-import {  Uuid } from 'pc-component-v3';
+import { Uuid } from 'pc-component-v3';
 
 
 export default defineComponent({
@@ -363,7 +267,7 @@ export default defineComponent({
     StockOutPrepareLineAddProject,
     InAndOutFlow,
   },
-  
+
   data() {
     this.Common = Common;
     return {
@@ -381,20 +285,20 @@ export default defineComponent({
         { title: '操作', dataIndex: 'operation', fixed: 'right', width: 100, align: 'center' },
       ],
       modal8Columns: [
-        { title: '序号', dataIndex: 'index', width: 80, align: 'center'  },
+        { title: '序号', dataIndex: 'index', width: 80, align: 'center' },
         { title: '工具SKU', dataIndex: 'inventoryNo', width: 100, align: 'center' },
         { title: '工具名称', dataIndex: 'inventoryName', width: 100, align: 'center' },
-        { title: '规格型号', dataIndex: 'inventoryType', width: 100 , align: 'center'},
-        { title: '数量', dataIndex: 'componentQuantity', width: 100 , align: 'center'},
-        { title: '已领用数量', dataIndex: 'stockOutQuantity', width: 100 , align: 'center'},
-        { 
+        { title: '规格型号', dataIndex: 'inventoryType', width: 100, align: 'center' },
+        { title: '数量', dataIndex: 'componentQuantity', width: 100, align: 'center' },
+        { title: '已领用数量', dataIndex: 'stockOutQuantity', width: 100, align: 'center' },
+        {
           title: '本次领用数量',
           dataIndex: 'quantity',
           width: 200,  // 添加固定宽度
           align: 'center',
         },
-        { 
-          title: '操作', 
+        {
+          title: '操作',
           dataIndex: 'operation',
           width: 150,   // 添加固定宽度
           align: 'center',
@@ -407,8 +311,8 @@ export default defineComponent({
       inventoryInstanceCurrentStocks: [],
       inventoryInstanceCurrentStocks2: [],
       currentStock: [],
-      projectList:[],//项目事件数据
-      warehouseList:[],//仓库数据
+      projectList: [],//项目事件数据
+      warehouseList: [],//仓库数据
       stockOutPrepateTemplateList: [],
       inventoryName: undefined,
       inventoryNo: undefined,
@@ -450,7 +354,7 @@ export default defineComponent({
       uuid: Uuid.createUUID(),
       infoWindowNo1: 283548,
       whereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'client.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '4',
@@ -513,35 +417,35 @@ export default defineComponent({
       this.pagination.per_page = pageSize;
       this.getDatas();
     },
-    
+
     selectAll() {
       this.currentStock = this.currentStock.map(item => ({
         ...item,
         checked: this.checked,
       }));
     },
-    
+
     // 项目事件
-    projectHandleChange:function (_,{key,value}) {
-      console.log(key,value);
+    projectHandleChange: function (_, { key, value }) {
+      console.log(key, value);
       this.projectItemId = key;
-      localStorage.setItem('projectItemId',key);
-      localStorage.setItem('projectItemName',value);
+      localStorage.setItem('projectItemId', key);
+      localStorage.setItem('projectItemName', value);
     },
     // 仓库事件
-    storeHandleChange:function (_,{key,value}) {
+    storeHandleChange: function (_, { key, value }) {
       this.warehouseId = key;
-      console.log(key,value);
-      localStorage.setItem('warehouseId',key);
-      localStorage.setItem('warehouseName',value);
+      console.log(key, value);
+      localStorage.setItem('warehouseId', key);
+      localStorage.setItem('warehouseName', value);
     },
 
-    templateHandleChange: function(_,{key,value}) {
+    templateHandleChange: function (_, { key, value }) {
       var _self = this;
       this.stockOutPrepateTemplateId = key;
-      console.log(key,value);
-      localStorage.setItem('stockOutPrepateTemplateId',key);
-      localStorage.setItem('stockOutPrepateTemplateName',value);
+      console.log(key, value);
+      localStorage.setItem('stockOutPrepateTemplateId', key);
+      localStorage.setItem('stockOutPrepateTemplateName', value);
       //需求模板改变，设定页数充1开始
       _self.pagination.current_page = 1;
       _self.getDatas();
@@ -586,17 +490,17 @@ export default defineComponent({
       var currentStockDtos = [];
       currentStockDtos.push(currentStockDto);
       console.log(currentStockDtos);
-      _self.loading=true;
+      _self.loading = true;
       PickingCarResource.addToPickingCar(
         _self.projectItemId,
         _self.warehouseId,
         currentStockDtos,
       ).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             Notify.success('成功', '添加成功', 4000);
             _self.queryPickingCarCount();
-            _self.loading=false;
+            _self.loading = false;
           } else {
             Notify.error('提示', successData.errorMessage, false);
             return;
@@ -604,7 +508,7 @@ export default defineComponent({
         },
         errorData => {
           Common.processException(errorData);
-          _self.loading=false;
+          _self.loading = false;
         },
       );
     },
@@ -654,17 +558,17 @@ export default defineComponent({
       var currentStockDtos = [];
       currentStockDtos.push(currentStockDto);
       console.log(currentStockDtos);
-      _self.loading=true;
+      _self.loading = true;
       PickingCarResource.addToPickingCar(
         _self.projectItemId,
         _self.warehouseId,
         currentStockDtos,
       ).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             Notify.success('成功', '添加成功', 4000);
             _self.queryPickingCarCount();
-            _self.loading=false;
+            _self.loading = false;
           } else {
             Notify.error('提示', successData.errorMessage, false);
             return;
@@ -672,7 +576,7 @@ export default defineComponent({
         },
         errorData => {
           Common.processException(errorData);
-          _self.loading=false;
+          _self.loading = false;
         },
       );
     },
@@ -811,7 +715,7 @@ export default defineComponent({
       InventoryInstanceBindResource.findByCondition(instanceBindLineDto).then(
         successData => {
           if (successData.errorCode == 0) {
-            if(successData.datas) {
+            if (successData.datas) {
               _self.inventoryInstanceBindLineDtos = successData.datas;
               _self.inventoryInstanceBindLineDtos.forEach(function (item) {
                 item.isDisplay = isDisplay;
@@ -943,10 +847,10 @@ export default defineComponent({
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.projectList = datas; 
-          }else{
+            _self.projectList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -968,10 +872,10 @@ export default defineComponent({
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.warehouseList = datas; 
-          }else{
+            _self.warehouseList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -994,10 +898,10 @@ export default defineComponent({
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
-        success: function ({datas,errorCode,errorMessage}) {
+        success: function ({ datas, errorCode, errorMessage }) {
           if (errorCode == 0) {
-            _self.stockOutPrepateTemplateList = datas; 
-          }else{
+            _self.stockOutPrepateTemplateList = datas;
+          } else {
             alert(errorMessage);
           }
         },
@@ -1034,11 +938,11 @@ export default defineComponent({
           inventoryType: _self.inventoryType,
           inventoryClassId: _self.inventoryClassId,
         };
-        _self.loading=true;
+        _self.loading = true;
 
         CurrentStockResource.getCurrentStock(param).then(
           successData => {
-            if(successData.errorCode == 0) {
+            if (successData.errorCode == 0) {
               _self.pagination.total = successData.total;
               _self.currentStock = [];
               console.log(successData.datas);
@@ -1066,14 +970,14 @@ export default defineComponent({
               _self.pagination.last_page = Math.ceil(
                 successData.total / successData.length,
               );
-              _self.loading=false;
+              _self.loading = false;
             } else {
               Notify.error('提示', successData.errorMessage, false);
               return;
             }
           },
           errorData => {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(errorData);
           },
         );
@@ -1099,7 +1003,7 @@ export default defineComponent({
 
       StockOutPrepateTemplateResource.queryStockOutPrepateTemplateDto(param).then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.pagination.total = successData.data.totalSize;
             _self.currentStock = [];
             for (var i = 0; i < successData.data.stockOutPrepateTemplateLineDtos.length; i++) {
@@ -1136,14 +1040,14 @@ export default defineComponent({
               _self.currentStock.push(obj);
             }
             _self.pagination.last_page = Math.ceil(successData.data.totalSize / _self.page);
-            _self.loading=false;
+            _self.loading = false;
           } else {
             Notify.error('提示', successData.errorMessage, false);
             return;
           }
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -1160,7 +1064,7 @@ export default defineComponent({
         if (tagNo == undefined || tagNo == null || tagNo == '002') {
           InventoryInstanceResource.findCurrentStockByInventoryId(inventoryId).then(
             successData => {
-              if(successData.errorCode == 0) {
+              if (successData.errorCode == 0) {
                 if (successData.datas && successData.datas.length > 0) {
                   _self.inventoryInstanceCurrentStocks2 = successData.datas;
                   _self.modal6 = true;
@@ -1180,7 +1084,7 @@ export default defineComponent({
         } else {
           InventoryInstanceBindResource.findByInventoryId(inventoryId).then(
             successData => {
-              if(successData.errorCode == 0) {
+              if (successData.errorCode == 0) {
                 if (successData.datas && successData.datas.length > 0) {
                   _self.inventoryInstanceCurrentStocks = successData.datas;
                   _self.inventoryInstanceCurrentStocks.forEach(function (item) {
@@ -1222,9 +1126,9 @@ export default defineComponent({
       $.ajax({
         url: Common.getApiURL(
           'InventoryInstanceResource/findProjectItemInventoryQuantityByInventoryAndWarehouse?inventoryId=' +
-            inventoryId +
-            '&warehouseId=' +
-            _self.warehouseId,
+          inventoryId +
+          '&warehouseId=' +
+          _self.warehouseId,
         ),
         type: 'get',
         dataType: 'json',
@@ -1233,7 +1137,7 @@ export default defineComponent({
         },
 
         success: function (data) {
-          if(data.errorCode == 0) {
+          if (data.errorCode == 0) {
             _self.inventorys = data.datas;
           } else {
             Notify.error('错误', data.errorMessage, false);
@@ -1281,7 +1185,7 @@ export default defineComponent({
         Common.showDialog('提示', '填写的领用数量必须大于零', 'error');
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       if (currentStock.length > 0) {
         PickingCarResource.addToPickingCar(
           _self.projectItemId,
@@ -1289,11 +1193,11 @@ export default defineComponent({
           currentStock,
         ).then(
           successData => {
-            if(successData.errorCode == 0) {
+            if (successData.errorCode == 0) {
               Notify.success('成功', '添加成功', 4000);
               _self.getDatas();
               _self.queryPickingCarCount();
-              _self.loading=false;
+              _self.loading = false;
             } else {
               Notify.error('提示', successData.errorMessage, false);
               return;
@@ -1301,11 +1205,11 @@ export default defineComponent({
           },
           errorData => {
             Common.processException(errorData);
-            _self.loading=false;
+            _self.loading = false;
           },
         );
       } else {
-        _self.loading=false;
+        _self.loading = false;
         Common.showDialog('提示', '请选择要提交的内容', 'error');
       }
     },
@@ -1341,7 +1245,7 @@ export default defineComponent({
       var _self = this;
       PickingCarResource.queryPickingCarCount().then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.count = successData.data;
           }
         },
@@ -1401,4 +1305,23 @@ export default defineComponent({
   margin-top: 16px;
   text-align: right;
 }
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 192px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/pick/StockOutPrepareLineAddProject.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="from-inline">
       <label>项目编码:</label>
-      <input
-        v-model="projectNo"
+      <a-input
+        v-model:value="projectNo"
         autocomplete="off"
         type="text"
         class="form-control"
@@ -11,8 +11,8 @@
     </div>
     <div class="from-inline">
       <label>项目名称:</label>
-      <input
-        v-model="projectName"
+      <a-input
+        v-model:value="projectName"
         autocomplete="off"
         type="text"
         class="form-control"

src/pick/StockOutPrepareTemplateHeader.vue

@@ -19,6 +19,7 @@ export default {
       default: 1,
     },
   },
+  emits: ['update:activeIndex'],
   computed: {
     activeKey: {
       get() {

src/print/NeedPrint.vue

@@ -1,56 +1,50 @@
 <template>
   <div>
-    <Navbar title="新页面 - 待打印" :is-go-back="true" />
-    <a-form layout="inline" style="margin-top: 10px">
-      <PrintWidget
-        ref="printWidget"
-        :printer-localstorage-id="'#InventoryPrinterPrinter'"
-        @selected-printer-name="getPrintName"
-      />
-      <a-form-item label="采购订单号">
-        <a-input 
-          v-model:value="documentNo" 
-          placeholder="输入采购订单号" 
-        />
-      </a-form-item>
-      <a-form-item label="存货名称">
-        <a-input 
-          v-model:value="inventoryName" 
-          placeholder="输入存货档案名称" 
-        />
-      </a-form-item>
-      <a-form-item label="存货编码">
-        <a-input 
-          v-model:value="inventoryCode" 
-          placeholder="输入存货档案编码" 
-        />
-      </a-form-item>
-      <a-form-item label="规格型号">
-        <a-input 
-          v-model:value="inventoryType" 
-          placeholder="输入规格型号" 
-        />
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" @click="loadNeedPrintInventoryInstance">查询</a-button>
-        <a-button type="primary" @click="printBarCode">打印条码</a-button>
-      </a-form-item>
+    <Navbar title="待打印" :is-go-back="true" />
+    <PrintWidget
+      ref="printWidget" :printer-localstorage-id="'#InventoryPrinterPrinter'"
+      @selected-printer-name="getPrintName"
+    />
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="采购订单号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="documentNo" placeholder="输入采购订单号" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="存货名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryName" placeholder="输入存货档案名称" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="存货编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryCode" placeholder="输入存货档案编码" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryType" placeholder="输入规格型号" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item>
+            <a-button type="primary" @click="loadNeedPrintInventoryInstance">查询</a-button>
+            <a-button style="margin-left: 10px;" type="primary" @click="printBarCode">打印条码</a-button>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
-    <a-table
-      ref="tableRef"
-      :data-source="inventoryInstances"
-      :columns="columns"
-      :pagination="pagination"
-      :row-selection="rowSelection"
-      :row-key="record => record.id"
-      style="margin-top: 10px"
-    >
-      <template #bodyCell="{ column, record, index }">
-        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
-        <template v-if="column.dataIndex === 'printStatus'">待打印</template>
-        <template v-else>{{ record[column.dataIndex] }}</template>
-      </template>
-    </a-table>
+
+    <div>
+      <CommonTable :total="pagination.total" :columns="columns" :data-source="inventoryInstances" :is-select="true" @get-selected="getSelected">
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
+          <template v-if="column.dataIndex === 'printStatus'">待打印</template>
+          <template v-else>{{ record[column.dataIndex] }}</template>
+        </template>
+      </CommonTable>
+    </div>
     <Modal v-model:show="modal">
       <ProcessReportResult :process-report-result="processReportResult" />
       <template #header>执行结果</template>
@@ -62,6 +56,7 @@
 <script>
 import Common from '../common/Common.js';
 import { PrintUtil } from 'pc-component-v3';
+import CommonTable from '../common/CommonTable.vue';
 import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';
 import { Form, Input, Button, Table, Checkbox } from 'ant-design-vue';
 
@@ -73,6 +68,7 @@ export default {
     [Button.name]: Button,
     [Table.name]: Table,
     [Checkbox.name]: Checkbox,
+    CommonTable,
   },
   data: function () {
     return {
@@ -163,6 +159,9 @@ export default {
     this.keydown();
   },
   methods: {
+    getSelected: function (selectedRows) {
+      this.checkboxModel = selectedRows.selectedRows;
+    },
     getPrintName: function (value) {
       this.selectedPrinterTitle = value;
     },
@@ -172,6 +171,7 @@ export default {
       const inventoryName = _self.inventoryName;
       const inventoryCode = _self.inventoryCode;
       const inventoryType = _self.inventoryType;
+      _self.loading = true;
       InventoryInstancePrintResource.queryInventoryInstancePrint(
         false,
         documentNo,
@@ -187,8 +187,10 @@ export default {
             }));
             _self.pagination.total = data.totalCount;
           }
+          _self.loading = false;
         },
         errorData => {
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -262,7 +264,26 @@ export default {
 </script>
 
 <style scoped>
-  .ant-form-item {
-    margin-bottom: 0px;
-  }
+.ant-form-item {
+  margin-bottom: 0px;
+}
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/print/PackInventoryInstance.vue

@@ -1,152 +1,125 @@
 <template>
-  <a-layout class="pack-container">
-    <Navbar title="采购订单明细信息" :is-go-back="true" />
-
-    <a-layout-content class="content">
-      <!-- 基本信息卡片 -->
-      <a-card class="info-card">
-        <a-row :gutter="16">
-          <a-col :span="6">
-            <a-input v-model:value="packData.inventoryName" disabled addon-before="存货名称" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.inventoryCode" disabled addon-before="存货编号" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.quantity" disabled addon-before="订单数量" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.projectInventoryName" disabled addon-before="项目名称" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.printedInventoryInstanceCount" disabled addon-before="已打印包装件数" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.printedInventoryInstanceQuantity" disabled addon-before="已打印物料总数" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.notPrintedInventoryInstanceCount" disabled addon-before="未打印包装件数" />
-          </a-col>
-          <a-col :span="6">
-            <a-input v-model:value="packData.notPrintedInventoryInstanceQuantity" disabled addon-before="未打印物料总数" />
-          </a-col>
-        </a-row>
-      </a-card>
-
-      <!-- 操作按钮组 -->
-      <a-space class="action-btns">
-        <a-button 
-          :type="flag1 ? 'primary' : 'default'"
-          @click="togglePackageMode('single')"
-        >
-          添加包装{{ flag1 ? `(${packages.length})` : '' }}
-        </a-button>
-        <a-button 
-          :type="flag2 ? 'primary' : 'default'"
-          @click="togglePackageMode('multiple')"
-        >
-          快速添加多个包装
-        </a-button>
-        <a-button danger @click="clearAllPackaged">删除所有包装</a-button>
-        <a-button type="primary" @click="goToPrintPage">
-          开始打印<span v-if="notPrintCount">({{ notPrintCount }})</span>
-        </a-button>
-      </a-space>
-
-      <!-- 单包装表单 -->
-      <a-card 
-        v-if="flag1" 
-        title="添加包装（注意：包装内物料数量为必填项，批号为可选项）"
-        class="package-form"
-      >
-        <a-table 
-          :data-source="packages" 
-          :columns="packageColumns"
-          :pagination="false"
-        >
-          <template #bodyCell="{ column, index }">
-            <template v-if="column.dataIndex === 'index'">
-              {{ index + 1 }}
-            </template>
-            <template v-if="column.dataIndex === 'quantity'">
-              <a-input-number 
-                v-model:value="packages[index].quantity"
-                :min="1"
-                :max="unPackQuantity"
-                class="full-width"
-              />
-            </template>
-            <template v-if="column.dataIndex === 'batchNo'">
-              <a-input 
-                v-model:value="packages[index].batchNo"
-                placeholder="请输入批次号"
-              />
-            </template>
-            <template v-if="column.dataIndex === 'actions'">
-              <a-button danger @click="deleteOne(index)">删除</a-button>
-            </template>
-          </template>
-        </a-table>
-        <a-space class="action-btns" style="margin-top: 16px">
-          <a-button type="primary" @click="saveOnePack">确定</a-button>
-          <a-button danger @click="cancelOnePack">取消</a-button>
-        </a-space>
-      </a-card>
-
-      <!-- 批量添加包装表单 -->
-      <a-card 
-        v-if="flag2" 
-        title="快速添加多个包装（注意：包装数量为必填项，批号为可选项）"
-        class="package-form"
-      >
-        <a-row :gutter="16">
-          <a-col :span="8">
-            <a-form-item label="包装数量:">
-              <a-input-number 
-                v-model:value="saveMoreQuantity"
-                :min="1"
-                class="full-width"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="物料数量:">
-              <a-input-number 
-                v-model:value="packageQuantity"
-                :min="1"
-                class="full-width"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="批次号:">
-              <a-input 
-                v-model:value="batchNo"
-                placeholder="请输入批次号"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-space class="action-btns">
-          <a-button type="primary" @click="saveMorePack">确定</a-button>
-          <a-button danger @click="cancelMorePack">取消</a-button>
-        </a-space>
-      </a-card>
-    </a-layout-content>
-
-    <!-- 修改数量弹窗 -->
-    <a-modal v-model:open="modalVisible" title="修改包装内物料数量">
-      <a-input-number 
-        v-model:value="quantity"
-        :min="1"
-        class="full-width"
-      />
-      <template #footer>
-        <a-button @click="cancelChangeQty">取消</a-button>
-        <a-button type="primary" @click="saveChangeQty">确定</a-button>
+  <Navbar title="采购订单明细信息" :is-go-back="true" />
+
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="存货名称" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.inventoryName" placeholder="输入存货档案名称" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="存货编码" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.inventoryCode" placeholder="输入存货档案编码" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="订单数量" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.quantity" placeholder="输入存货档案编码" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="项目名称" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.projectInventoryName" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="已打印包装件数" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.printedInventoryInstanceCount" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="已打印物料总数" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.printedInventoryInstanceQuantity" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="未打印包装件数" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.notPrintedInventoryInstanceCount" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="未打印物料总数" :label-col="{ style: 'width: 100px' }" class="horizontal-form-item">
+          <a-input v-model:value="packData.notPrintedInventoryInstanceQuantity" disabled class="w-full" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+
+  <a-space>
+    <a-button :type="flag1 ? 'primary' : 'default'" @click="togglePackageMode('single')">
+      添加包装{{ flag1 ? `(${packages.length})` : '' }}
+    </a-button>
+    <a-button :type="flag2 ? 'primary' : 'default'" @click="togglePackageMode('multiple')">
+      快速添加多个包装
+    </a-button>
+    <a-button danger @click="clearAllPackaged">删除所有包装</a-button>
+    <a-button type="primary" @click="goToPrintPage">
+      开始打印<span v-if="notPrintCount">({{ notPrintCount }})</span>
+    </a-button>
+    <a-button type="primary" @click="goPrinted">
+      补打
+    </a-button>
+  </a-space>
+
+  <!-- 单包装表单 -->
+  <a-card v-if="flag1" title="添加包装（注意：包装内物料数量为必填项，批号为可选项）" class="package-form">
+    <a-table :data-source="packages" :columns="packageColumns" :pagination="false">
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
+        </template>
+        <template v-if="column.dataIndex === 'quantity'">
+          <a-input-number v-model:value="packages[index].quantity" :min="1" :max="unPackQuantity" class="full-width" />
+        </template>
+        <template v-if="column.dataIndex === 'batchNo'">
+          <a-input v-model:value="packages[index].batchNo" placeholder="请输入批次号" />
+        </template>
+        <template v-if="column.dataIndex === 'actions'">
+          <a-button danger @click="deleteOne(index)">删除</a-button>
+        </template>
       </template>
-    </a-modal>
-  </a-layout>
+    </a-table>
+    <a-space class="action-btns" style="margin-top: 16px">
+      <a-button type="primary" @click="saveOnePack">确定</a-button>
+      <a-button danger @click="cancelOnePack">取消</a-button>
+    </a-space>
+  </a-card>
+
+  <!-- 批量添加包装表单 -->
+  <a-card v-if="flag2" title="快速添加多个包装（注意：包装数量为必填项，批号为可选项）" class="package-form">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <a-form-item label="包装数量:">
+          <a-input-number v-model:value="saveMoreQuantity" :min="1" class="full-width" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="8">
+        <a-form-item label="物料数量:">
+          <a-input-number v-model:value="packageQuantity" :min="1" class="full-width" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="8">
+        <a-form-item label="批次号:">
+          <a-input v-model:value="batchNo" placeholder="请输入批次号" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-space class="action-btns">
+      <a-button type="primary" @click="saveMorePack">确定</a-button>
+      <a-button danger @click="cancelMorePack">取消</a-button>
+    </a-space>
+  </a-card>
+
+
+  <!-- 修改数量弹窗 -->
+  <a-modal v-model:open="modalVisible" title="修改包装内物料数量">
+    <a-input-number v-model:value="quantity" :min="1" class="full-width" />
+    <template #footer>
+      <a-button @click="cancelChangeQty">取消</a-button>
+      <a-button type="primary" @click="saveChangeQty">确定</a-button>
+    </template>
+  </a-modal>
 </template>
 
 <script>
@@ -167,9 +140,9 @@ const columns = [
 ];
 
 export default {
-  components: {   
-    
-    
+  components: {
+
+
   },
   emits: ['changePage'],
   data: function () {
@@ -208,7 +181,7 @@ export default {
 
   computed: {
     filteredInstances() {
-      return this.inventoryInstances.filter(item => 
+      return this.inventoryInstances.filter(item =>
         this.buttonText === 0 || item.printStatus === 1,
       ).map((item, index) => ({ ...item, index: index + 1 }));
     },
@@ -284,10 +257,10 @@ export default {
         Notify.notice(
           '操作成功',
           '成功删除' +
-            count +
-            '个包装，剩下的 ' +
-            i +
-            ' 个包装已经生成到货单，不可删除。',
+          count +
+          '个包装，剩下的 ' +
+          i +
+          ' 个包装已经生成到货单，不可删除。',
           1500,
         );
       } else {
@@ -345,7 +318,7 @@ export default {
       };
       this.packages = [...this.packages, newPackage];
       this.flag1 = 1;
-    },  
+    },
 
     cancelOnePack: function () {
       this.flag1 = 0;
@@ -398,13 +371,13 @@ export default {
       ) {
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       PurchaseOrderLineResource.queryPurchaseOrderLinePackDto(
         _self.purchaseOrderLineId,
       ).then(
         successData1 => {
           if (successData1) {
-            _self.loading=false;
+            _self.loading = false;
             _self.packData = successData1;
             _self.purchaseOrderLinePrint =
               successData1.purchaseOrderLinePrintDto;
@@ -413,7 +386,7 @@ export default {
           }
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -514,10 +487,10 @@ export default {
         Notify.notice(
           '操作失败',
           '您添加的包装内物料总数量：<span style=\'color:red;\'>' +
-            totalPackQuantity +
-            '</span>   超过了该订单剩余未包装物料的数量：<span style=\'color:red;\'>' +
-            this.unPackQuantity +
-            '</span>',
+          totalPackQuantity +
+          '</span>   超过了该订单剩余未包装物料的数量：<span style=\'color:red;\'>' +
+          this.unPackQuantity +
+          '</span>',
           false,
         );
         return;
@@ -691,22 +664,40 @@ export default {
   min-height: 100vh;
 }
 
-.info-card {
-  margin-bottom: 16px;
-  :deep(.ant-card-body) {
-    padding: 16px;
-  }
+:deep(.ant-card-body) {
+  padding: 16px;
 }
 
+
 .action-btns {
   margin: 16px 0;
 }
 
 .package-form {
   margin-bottom: 24px;
+  margin-top: 12px;
 }
 
 .full-width {
   width: 100%;
 }
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/print/PrintedPurchaseOrder.vue

@@ -1,62 +1,67 @@
 <template>
-  <a-layout class="container">
-    <Navbar title="已打印" :is-go-back="true" />
-    <a-card :bordered="false">
-      <a-form layout="inline">
-        <PrintWidget
-          ref="printWidget"
-          :printer-localstorage-id="'#InventoryPrinterPrinter'"
-          @selected-printer-name="getPrintName"
-        />
-        <a-form-item label="采购订单号">
+  <Navbar title="已打印" :is-go-back="true" />
+
+
+  <PrintWidget
+    ref="printWidget" :printer-localstorage-id="'#InventoryPrinterPrinter'"
+    @selected-printer-name="getPrintName"
+  />
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="采购订单号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
           <a-input v-model:value="documentNo" placeholder="输入采购订单号" />
         </a-form-item>
-        <a-form-item label="存货名称">
-          <a-input v-model:value="inventoryName" placeholder="输入存货档案名称" />
+      </a-col>
+      <a-col>
+        <a-form-item label="存货名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryName" placeholder="输入存货档案名称" class="w-full" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="存货编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryCode" placeholder="输入存货档案编码" class="w-full" />
         </a-form-item>
-        <a-form-item label="存货编码">
-          <a-input v-model:value="inventoryCode" placeholder="输入存货档案编码" />
+      </a-col>
+      <a-col>
+        <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="inventoryType" placeholder="输入规格型号" class="w-full" />
         </a-form-item>
-        <a-form-item label="规格型号">
-          <a-input v-model:value="inventoryType" placeholder="输入规格型号" />
+      </a-col>
+      <a-col>
+        <a-form-item>
+          <a-button type="primary" @click="search">查询</a-button>
+          <a-button style="margin-left: 8px;" type="primary" @click="printBarCode">打印条码</a-button>
+          <a-button style="margin-left: 8px;" type="primary" @click="printPdf">打印PDF</a-button>
         </a-form-item>
-        <a-space :size="16">
-          <a-button type="primary" @click="loadPrintedInventoryInstance">查询</a-button>
-          <a-button type="primary" @click="printBarCode">打印条码</a-button>
-          <a-button type="primary" @click="printPdf">打印PDF</a-button>
-        </a-space>
-      </a-form>
-
-      <a-table
-        :data-source="inventoryInstances"
-        :columns="columns"
-        :row-key="record => record.id"
-        :pagination="pagination"
-        :row-selection="rowSelection"
-        class="table-container"
-        @change="handleTableChange"
-      >
-        <template #bodyCell="{ column, record, index }">
-          <template v-if="column.dataIndex === 'index'">
-            {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
-          </template>
-          <template v-else-if="column.dataIndex === 'printStatus'">已打印</template>
-          <template v-else>{{ record[column.dataIndex] }}</template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <Modal v-model:show="modal">
-      <ProcessReportResult :process-report-result="processReportResult" />
-      <template #header>执行结果</template>
-    </Modal>
-    <Loading v-if="loading" />
-  </a-layout>
+      </a-col>
+    </a-row>
+  </a-form>
+
+  <CommonTable
+    ref="commonTableRef" :columns="columns" :data-source="inventoryInstances" :total="pagination.total"
+    :is-select="true" @get-selected="getSelected" @get-pager="handleTableChange"
+  >
+    <template #bodyCell="{ column, record, index }">
+      <template v-if="column.dataIndex === 'index'">
+        {{ index + 1 }}
+      </template>
+      <template v-else-if="column.dataIndex === 'printStatus'">已打印</template>
+      <template v-else>{{ record[column.dataIndex] }}</template>
+    </template>
+  </CommonTable>
+
+  <Modal v-model:show="modal">
+    <ProcessReportResult :process-report-result="processReportResult" />
+    <template #header>执行结果</template>
+  </Modal>
+  <Loading v-if="loading" />
 </template>
 
 
 <script>
 import Common from '../common/Common.js';
+import CommonTable from '../common/CommonTable.vue';
 import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';
 import { PrintUtil } from 'pc-component-v3';
 import { ref, reactive } from 'vue';
@@ -65,17 +70,7 @@ import { ref, reactive } from 'vue';
 export default {
   name: 'PrintedPurchaseOrder',
   components: {
-    
-  },
-  setup() {
-    const pagination = reactive({
-      current: 1,
-      pageSize: 30,
-      total: 0,
-      showTotal: total => `共 ${total} 条`,
-    });
-
-    return { pagination };
+    CommonTable,
   },
   data: function () {
     return {
@@ -89,6 +84,11 @@ export default {
       loading: false,
       modal: false,
       selectedPrinterTitle: '',
+      pagination: {
+        total: 0,
+        pageSize: 20,
+        current: 1,
+      },
       columns: [
         { title: '序号', dataIndex: 'index' },
         { title: '订单编号', dataIndex: 'purchaseOrderDocumentNo' },
@@ -135,8 +135,10 @@ export default {
     this.keydown();
   },
   methods: {
-
-    getPrintName:function(value){
+    getSelected: function (selectedRows) {
+      this.checkboxModel = selectedRows.selectedRows;
+    },
+    getPrintName: function (value) {
       this.selectedPrinterTitle = value;
     },
 
@@ -150,7 +152,7 @@ export default {
         Notify.notice('提示', '请至少选择一项打印', false);
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
 
       var ids = [];
       _self.checkboxModel.forEach(function (item) {
@@ -158,15 +160,23 @@ export default {
       });
 
     },
-    handleTableChange(pag) {
-      this.pagination.current = pag.current;
-      this.pagination.pageSize = pag.pageSize;
+
+    //  查询
+    search: function () {
+      this.$refs.commonTableRef.backFirstPage();
+    },
+
+    // 分页查询
+    handleTableChange: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
       this.loadPrintedInventoryInstance();
     },
 
     async loadPrintedInventoryInstance() {
       try {
         var _self = this;
+        _self.loading = true;
         var documentNo = _self.documentNo;
         var inventoryName = _self.inventoryName;
         var inventoryCode = _self.inventoryCode;
@@ -180,7 +190,9 @@ export default {
           inventoryType);
         this.inventoryInstances = data.inventoryInstancePrintDtos;
         this.pagination.total = data.totalCount;
+        _self.loading = false;
       } catch (error) {
+        _self.loading = false;
         Common.processException(error);
       }
     },
@@ -194,7 +206,7 @@ export default {
         Notify.error('提示', '请先选择打印机。', false);
         return;
       } else {
-        _self.loading=true;
+        _self.loading = true;
 
         var inventoryInstanceIds = [];
         _self.checkboxModel.forEach(function (item) {
@@ -204,7 +216,7 @@ export default {
         InventoryInstancePrintResource.print(inventoryInstanceIds).then(
           baseListResponse => {
             if (baseListResponse.errorCode == 0) {
-              _self.loading=false;
+              _self.loading = false;
               var contents = [];
               baseListResponse.datas.forEach(function (item) {
                 var printItem = {
@@ -231,7 +243,7 @@ export default {
             }
           },
           errorData => {
-            _self.loading=false;
+            _self.loading = false;
             Common.processException(errorData);
           },
         );
@@ -255,7 +267,7 @@ export default {
       var id = 287680;
       var data = _self.checkboxModel;
 
-      _self.loading=true;
+      _self.loading = true;
 
       //    ProcessReportResource.runProcessByIds(_self.checkboxModel).then(
       //      successData1 => {
@@ -292,7 +304,7 @@ export default {
         var currentEvent = event || window.event || arguments[0];
         if (currentEvent && currentEvent.keyCode == 13) {
           currentEvent.preventDefault();
-          _self.loadPrintedInventoryInstance();
+          _self.search();
         }
       };
     },
@@ -304,7 +316,28 @@ export default {
 .table-container {
   margin-top: 16px;
 }
+
 .ant-form-item {
   margin-bottom: 16px;
 }
+
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/print/PurchaseOrderPrint.vue

@@ -1,37 +1,31 @@
 <template>
-  <a-layout class="print-container">
-    <a-layout-header class="header">
-      <Navbar title="采购订单打印" :is-go-back="false" />
-    </a-layout-header>
+  <Navbar title="采购订单打印" :is-go-back="false" />
 
-    <a-layout-content class="content">
-      <transition name="fade-slide">
-        <QueryPurchaseOrderLine
-          v-show="page === 1"
-          ref="queryPurchaseOrderLine"
-          :document-no-a="documentNo"
-          @change-page="changePage"
-        />
-      </transition>
+  <transition name="fade-slide">
+    <QueryPurchaseOrderLine
+      v-show="page === 1"
+      ref="queryPurchaseOrderLine"
+      :document-no-a="documentNo"
+      @change-page="changePage"
+    />
+  </transition>
 
-      <transition name="fade-slide">
-        <PackInventoryInstance
-          v-if="page === 2"
-          ref="packInventoryInstance"
-          :purchase-order-line-id="purchaseOrderLineId"
-          @change-page="changePage"
-        />
-      </transition>
+  <transition name="fade-slide">
+    <PackInventoryInstance
+      v-if="page === 2"
+      ref="packInventoryInstance"
+      :purchase-order-line-id="purchaseOrderLineId"
+      @change-page="changePage"
+    />
+  </transition>
 
-      <transition name="fade-slide">
-        <PrintPage
-          v-if="page === 3"
-          :flag="flag"
-          @change-page="changePage"
-        />
-      </transition>
-    </a-layout-content>
-  </a-layout>
+  <transition name="fade-slide">
+    <PrintPage
+      v-if="page === 3"
+      :flag="flag"
+      @change-page="changePage"
+    />
+  </transition>
 </template>
 
 <script>

src/print/QueryPurchaseOrderLine.vue

@@ -1,90 +1,75 @@
 <template>
-  <div class="query-purchase-order">
-    <!-- 标题部分 -->
-    <h2>
-      <span>采购订单打印</span>
-      <small>
-        <span style="color: #1890ff;"><strong>查询订单</strong></span>
-      </small>
-    </h2>
-
-    <!-- 搜索表单 -->
-    <a-form layout="inline" class="search-form">
-      <a-form-item label="采购订单号">
-        <a-select
-          v-model:value="documentNo"
-          style="width: 220px"
-          show-search
-          allow-clear
-          @change="documentNoChange"
-        >
-          <a-select-option v-for="item in documentNoList" :key="item.id" :value="item.documentNo">
-            {{ item.documentNo }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item label="存货名称">
-        <a-input
-          v-model="inventoryName"
-          placeholder="输入存货档案名称"
-        />
-      </a-form-item>
-
-      <a-form-item label="存货编码">
-        <a-input
-          v-model="inventoryCode"
-          placeholder="输入存货档案编码"
-        />
-      </a-form-item>
-
-      <a-form-item label="规格型号">
-        <a-input
-          v-model="inventoryType"
-          placeholder="输入规格型号"
-        />
-      </a-form-item>
-
-      <a-form-item>
-        <a-button type="primary" @click="refreshPurchaseOrderLineTable">
-          查询订单
-        </a-button>
-        <a-button type="success" @click="needPrint">
-          待打印
-        </a-button>
-        <a-button type="info" @click="printed">
-          已打印
-        </a-button>
-      </a-form-item>
+  <div>
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="采购订单号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="documentNo" show-search allow-clear class="w-full" @change="documentNoChange">
+              <a-select-option v-for="item in documentNoList" :key="item.id" :value="item.documentNo">
+                {{ item.documentNo }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="存货名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryName" placeholder="输入存货档案名称" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="存货编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryCode" placeholder="输入存货档案编码" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="inventoryType" placeholder="输入规格型号" class="w-full" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item>
+            <a-button type="primary" @click="refreshPurchaseOrderLineTable">
+              查询订单
+            </a-button>
+            <a-button type="success" @click="needPrint">
+              待打印
+            </a-button>
+            <a-button type="info" @click="printed">
+              已打印
+            </a-button>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
 
-    <!-- 订单表格 -->
-    <a-table
-      v-if="purchaseOrderLines.length > 0 || selectedNum !== 0"
-      :columns="columns"
-      :data-source="purchaseOrderLines"
-      row-key="id"
-    >
-      <template #bodyCell="{ column, record, index }">
-        <template v-if="column.dataIndex === 'index'">
-          {{ index + 1 }}
-        </template>
-        <template v-if="column.dataIndex === 'pack'">
-          <a-button type="info" size="small" @click="pack(record.id)">
-            包装
-          </a-button>
+    <div>
+      <CommonTable
+        :total="purchaseOrderLines.length" :columns="columns" :data-source="purchaseOrderLines"
+        :have-page="false"
+      >
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.dataIndex === 'index'">
+            {{ index + 1 }}
+          </template>
+          <template v-if="column.dataIndex === 'pack'">
+            <a-button type="link" size="small" @click="pack(record.id)">
+              包装
+            </a-button>
+          </template>
         </template>
-      </template>
-    </a-table>
+      </CommonTable>
+    </div>
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
+import CommonTable from '../common/CommonTable.vue';
 import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';
 
 export default {
-  components: {},
+  components: { CommonTable },
   props: {
     documentNoA: {
       type: Array,
@@ -106,11 +91,12 @@ export default {
       notPrintCount: 0,
       showForm: 0,
       documentNoList: [],
+      loading: false,
       columns: [
         { title: '序号', dataIndex: 'index', width: 80 },
         { title: '订单号', dataIndex: 'documentNo' },
         { title: '存货名称', dataIndex: 'inventoryName' },
-        { title: '存货编码', dataIndex: 'inventoryCode' },
+        { title: '存货编码', dataIndex: 'inventoryCode', width: 180 },
         { title: '规格型号', dataIndex: 'inventoryType' },
         { title: '订单数量', dataIndex: 'quantity' },
         { title: '已到货数量', dataIndex: 'receivedQuatity' },
@@ -207,6 +193,8 @@ export default {
         } else {
           url = 'PurchaseOrderLineResource/findAllByDocumentNoNameCodeType';
         }
+        _self.loading = true;
+
         $.ajax({
           url: Common.getApiURL(url),
           type: 'post',
@@ -225,8 +213,10 @@ export default {
               Notify.notice('查询结果', '没有查询到任何订单。', false);
             }
             _self.purchaseOrderLines = data;
+            _self.loading = false;
           },
           error: (XMLHttpRequest, textStatus, errorThrown) => {
+            _self.loading = false;
             Common.processException(XMLHttpRequest, textStatus, errorThrown);
           },
         });
@@ -284,11 +274,31 @@ export default {
 
 <style scoped>
 .query-purchase-order {
-  padding: 20px;
+  padding: 0 10px;
 }
 
 .search-form {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/stock/AdjustPositions.vue

@@ -1,91 +1,74 @@
 <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>
+  <Navbar :title="'货位调整'" :is-go-back="false" />
+  <div>
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="调整前货位" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select
+              v-model:value="positionBeforeId" placeholder="请选择调整前货位" class="w-full"
+              @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-col>
+        <a-col>
+          <a-form-item label="调整后货位" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="positionAfterId" placeholder="请选择调整后货位" class="w-full">
+              <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-col>
+        <a-col>
+          <a-form-item label="搜索内容" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input
+              v-model:value="queryMessage" placeholder="请输入工具的中文名称或SKU或序列号" class="w-full"
+              @press-enter="handleSearch"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="工具类型" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="selectType" class="w-full" @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-col>
+        <a-col>
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="handleSearch">查询</a-button>
+              <a-button type="primary" @click="submitBefore">确认调整</a-button>
+            </a-space>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
 
     <a-table
-      :columns="columns"
-      :data-source="selectType === '2' ? currentStockDtos : inventoryInstanceDatas"
-      :pagination="pagination"
-      :loading="loading"
-      row-key="id"
-      @change="handleTableChange"
+      :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"
+            :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)"
-          />
+          <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"
-    >
+    <a-modal v-model:visible="modal" title="调整确认" :footer="null">
       <p>您确认要进行货位调整吗？</p>
       <div class="modal-footer">
         <a-button @click="closeModal">取消</a-button>
@@ -425,4 +408,23 @@ export default {
   justify-content: flex-end;
   margin-top: 24px;
 }
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/stock/CurrentStock.vue

@@ -1,76 +1,97 @@
 <template>
-  <a-layout>
-    <a-page-header title="库存查询" />
-    <a-layout-content style="padding: 24px;">
-      <a-form layout="inline">
-        <a-form-item label="SKU">
-          <a-input v-model="queryNo" placeholder="请输入要查询物料的SKU" @keyup.enter="queryInventory" />
+  <Navbar title="库存查询" :is-go-back="false" />
+
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="SKU" :label-col="{ style: 'width: 40px' }" class="horizontal-form-item">
+          <a-input v-model:value="queryNo" class="w-full" @keyup.enter="searchDatas" />
         </a-form-item>
-        <a-form-item label="物料名称">
-          <a-input v-model="queryName" placeholder="请输入要查询物料的名称" @keyup.enter="queryInventory" />
+      </a-col>
+      <a-col>
+        <a-form-item label="存货名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="queryName" class="w-full" @keyup.enter="searchDatas" />
         </a-form-item>
-        <a-form-item label="规格型号">
-          <a-input v-model="queryType" placeholder="请输入要查询物料的规格型号" @keyup.enter="queryInventory" />
+      </a-col>
+      <a-col>
+        <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-input v-model:value="queryType" class="w-full" @keyup.enter="searchDatas" />
         </a-form-item>
-        <a-form-item label="物料类型">
-          <a-select v-model="selectType" @change="changeSelectType">
+      </a-col>
+      <a-col>
+        <a-form-item label="物料类型" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+          <a-select v-model:value="selectType" class="w-full" @change="changeSelectType">
             <a-select-option value="0">全部</a-select-option>
             <a-select-option value="001">成套工具箱</a-select-option>
             <a-select-option value="002">散件</a-select-option>
           </a-select>
         </a-form-item>
-        <a-space>
+      </a-col>
+      <a-col>
+        <a-form-item>
           <a-button type="primary" @click="queryInventory">查询</a-button>
-          <a-button type="primary" @click="exportExcel">导出</a-button>
-        </a-space>
-      </a-form>
-      <a-table
-        :data-source="inventoryInstanceDatas"
-        :columns="columns"
-        :row-key="record => record.id"
-        :pagination="pagination"
-        @change="handleTableChange"
-      />
-      <div style="margin-top: 16px;">
-        <span>共查询到 <b>{{ pagination.total }}</b> 条数据</span>
-      </div>
-      <a-modal
-        v-model:visible="modal"
-        title="库存详情"
-        @ok="handleModalOk"
-        @cancel="handleModalCancel"
-      >
-        <a-table
-          :data-source="inventoryInstanceCurrentStocks"
-          :columns="modalColumns"
-          :row-key="record => record.id"
-          :pagination="false"
-        />
-      </a-modal>
-      <a-modal
-        v-model:visible="modal2"
-        title="库存详情"
-        @ok="handleModal2Ok"
-        @cancel="handleModal2Cancel"
-      >
-        <a-table
-          :data-source="inventoryInstanceCurrentStocks2"
-          :columns="modal2Columns"
-          :row-key="record => record.id"
-          :pagination="false"
+          <!-- <a-button style="margin-left: 8px;" type="primary" @click="exportExcel">导出</a-button> -->
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+
+  <CommonTable
+    :data-source="inventoryInstanceDatas" :columns="columns" :total="pagination.total"
+    @get-pager="getPageParams"
+  >
+    <template #bodyCell="{ column, record, index }">
+      <template v-if="column.dataIndex === 'index'">
+        {{ index + 1 }}
+      </template>
+      <template v-if="column.dataIndex === 'image'">
+        <AntdAuthImage
+          :auth-src="getThumbnailImageSrc(record.imageName, record.className)"
+          :preview-src="getImageSrc(record.imageName, record.className)" :width="60"
         />
-      </a-modal>
-      <a-modal
-        v-model:visible="modal3"
-        title="出入库流水"
-        @ok="handleModal3Ok"
-        @cancel="handleModal3Cancel"
-      >
-        <InAndOutFlow :display-data="displayData" />
-      </a-modal>
-      <a-spin v-if="loading" />
-    </a-layout-content>
-  </a-layout>
+      </template>
+      <template v-if="column.dataIndex === 'rfidManagement'">
+        <span v-if="record.rfidManagement">是</span>
+        <span v-else>否</span>
+      </template>
+      <template v-if="column.dataIndex === 'tagNo'">
+        <span v-if="!record.tagNo">散件</span>
+        <span v-else>成套工具箱</span>
+      </template>
+      <template v-if="column.dataIndex === 'action'">
+        <a-button type="link" @click="findByInventoryId(record)">查看详情</a-button>
+      </template>
+    </template>
+  </CommonTable>
+
+  <a-modal v-model:open="modal" title="库存详情" width="80%" @ok="handleModalOk" @cancel="handleModalCancel">
+    <CommonTable
+      :columns="modalColumns" :data-source="inventoryInstanceCurrentStocks"
+      :total="inventoryInstanceCurrentStocks.length" :extra-height="300" :have-page="false"
+    >
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
+        </template>
+      </template>
+    </CommonTable>
+  </a-modal>
+  <a-modal v-model:open="modal2" title="库存详情" width="80%" @ok="handleModal2Ok" @cancel="handleModal2Cancel">
+    <CommonTable
+      :columns="modal2Columns" :data-source="inventoryInstanceCurrentStocks2"
+      :total="inventoryInstanceCurrentStocks2.length" :extra-height="300" :have-page="false"
+    >
+      <template #bodyCell="{ column, index }">
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
+        </template>
+      </template>
+    </CommonTable>
+  </a-modal>
+  <a-modal v-model:open="modal3" title="出入库流水" width="80%" @ok="handleModal3Ok" @cancel="handleModal3Cancel">
+    <InAndOutFlow :display-data="displayData" />
+  </a-modal>
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -79,10 +100,14 @@ import InventoryInstanceResource from '../api/common/InventoryInstanceResource.j
 import InventoryInstanceBindResource from '../api/wms/InventoryInstanceBindResource.js';
 import CurrentStockResource from '../api/wms/CurrentStockResource.js';
 import InAndOutFlow from './InAndOutFlow.vue';
+import CommonTable from '../common/CommonTable.vue';
+import AntdAuthImage from '../common/AntdAuthImage.vue';
 
 export default {
   components: {
     InAndOutFlow,
+    CommonTable,
+    AntdAuthImage,
   },
   data() {
     return {
@@ -113,7 +138,7 @@ export default {
         { title: '序号', dataIndex: 'index' },
         { title: '图片', dataIndex: 'image' },
         { title: '物料名称', dataIndex: 'inventoryName' },
-        { title: 'SKU', dataIndex: 'inventoryNo' },
+        { title: 'SKU', dataIndex: 'inventoryNo', width: 180 },
         { title: '规格型号', dataIndex: 'inventoryType' },
         { title: '入库总数量', dataIndex: 'totalQuantity' },
         { title: '库存数量', dataIndex: 'stockQuantity' },
@@ -144,6 +169,14 @@ export default {
     this.queryInventory();
   },
   methods: {
+    searchDatas() {
+      this.$refs.commonTableRef.backFirstPage();
+    },
+    getPageParams(current, pageSize) {
+      this.pagination.current = current;
+      this.pagination.pageSize = pageSize;
+      this.queryInventory();
+    },
     exportExcel() {
       const loginInfo = localStorage.getItem('#LoginInfo');
       const loginData = JSON.parse(loginInfo);
@@ -202,8 +235,7 @@ export default {
       }
     },
     changeSelectType() {
-      this.pagination.current = 1;
-      this.queryInventory();
+      this.searchDatas();
     },
     queryInventory() {
       if (!this.inventoryInstanceDatas) {
@@ -223,6 +255,7 @@ export default {
         no: queryNo,
         name: queryName,
         type: queryType,
+        tagNo: this.selectType,
         start: (this.pagination.current - 1) * this.pagination.pageSize,
         length: this.pagination.pageSize,
       };
@@ -233,7 +266,6 @@ export default {
           if (successData.datas) {
             this.inventoryInstanceDatas = successData.datas;
             this.pagination.total = successData.total;
-            this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.pageSize);
           }
         }
       }).catch(errorData => {
@@ -241,11 +273,6 @@ export default {
         Common.processException(errorData);
       });
     },
-    handleTableChange(pagination) {
-      this.pagination.current = pagination.current;
-      this.pagination.pageSize = pagination.pageSize;
-      this.queryInventory();
-    },
     handleModalOk() {
       this.modal = false;
     },
@@ -264,10 +291,41 @@ export default {
     handleModal3Cancel() {
       this.modal3 = false;
     },
+    getImageSrc(item, className) {
+      if (item != undefined && item != null) {
+        return Common.getImageSrc(className, item);
+      } else {
+        return '';
+      }
+    },
+    getThumbnailImageSrc(item, className) {
+      if (item != undefined && item != null) {
+        return Common.getThumbnailImageSrc(className, item);
+      } else {
+        return '';
+      }
+    },
   },
 };
 </script>
 
 <style scoped>
-/* 可以添加自定义样式 */
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/stock/CurrentStockProjectItemManger.vue

@@ -1,68 +1,54 @@
 <template>
-  <div class="current-stock-container">
-    <!-- 导航栏 -->
-    <a-page-header title="我的项目-库存查询" />
-
-    <!-- 查询表单 -->
-    <a-form
-      :inline="true"
-      :layout="formLayout"
-      class="search-form"
-    >
-      <a-form-item label="SKU">
-        <a-input
-          v-model="queryNo"
-          placeholder="请输入要查询物料的SKU"
-          @keyup.enter="queryInventory"
-        />
-      </a-form-item>
-      <a-form-item label="物料名称">
-        <a-input
-          v-model="queryName"
-          placeholder="请输入要查询物料的名称"
-          @keyup.enter="queryInventory"
-        />
-      </a-form-item>
-      <a-form-item label="规格型号">
-        <a-input
-          v-model="queryType"
-          placeholder="请输入要查询物料的规格型号"
-          @keyup.enter="queryInventory"
-        />
-      </a-form-item>
-      <a-form-item label="物料类型">
-        <a-select
-          v-model="selectType"
-          @change="changeSelectType"
-        >
-          <a-select-option value="0">全部</a-select-option>
-          <a-select-option value="001">成套工具箱</a-select-option>
-          <a-select-option value="002">散件</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item>
-        <a-button
-          type="primary"
-          @click="queryInventory"
-        >
-          查询
-        </a-button>
-        <a-button
-          @click="exportExcel"
-        >
-          导出
-        </a-button>
-      </a-form-item>
+  <Navbar title="我的项目-库存查询" :is-go-back="false" />
+  <div>
+    <a-form :colon="false">
+      <a-row :gutter="[8, 0]" justify="space-start">
+        <a-col>
+          <a-form-item label="SKU" :label-col="{ style: 'width: 60px' }" class="horizontal-form-item">
+            <a-input v-model:value="queryNo" placeholder="请输入SKU" class="w-full" @keyup.enter="queryInventory" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="物料名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input v-model:value="queryName" placeholder="请输入物料名称" class="w-full" @keyup.enter="queryInventory" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="规格型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-input
+              v-model:value="queryType" placeholder="请输入规格型号" class="w-full"
+              @keyup.enter="queryInventory"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item label="物料类型" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
+            <a-select v-model:value="selectType" class="w-full" @change="changeSelectType">
+              <a-select-option value="0">全部</a-select-option>
+              <a-select-option value="001">成套工具箱</a-select-option>
+              <a-select-option value="002">散件</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="queryInventory">
+                查询
+              </a-button>
+              <a-button @click="exportExcel">
+                导出
+              </a-button>
+            </a-space>
+          </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
 
     <!-- 表格 -->
     <a-table
-      :columns="columns"
-      :data-source="inventoryInstanceDatas"
-      :pagination="pagination"
-      :loading="loading"
-      row-key="id"
-      @change="handleTableChange"
+      :columns="columns" :data-source="inventoryInstanceDatas" :pagination="pagination" :loading="loading"
+      row-key="id" @change="handleTableChange"
     >
       <template #bodyCell="{ column, record, index }">
         <template v-if="column.key === 'index'">
@@ -70,8 +56,7 @@
         </template>
         <template v-if="column.key === 'image'">
           <img
-            :src="Common.getThumbnailImageSrc(className, record.imageName)"
-            class="image"
+            :src="Common.getThumbnailImageSrc(className, record.imageName)" class="image"
             @click="$refs.imagePreview.preview(className, record.imageName)"
           />
         </template>
@@ -82,10 +67,7 @@
           {{ record.tagNo === '001' ? '成套工具箱' : '散件' }}
         </template>
         <template v-if="column.key === 'operation'">
-          <a-button
-            type="link"
-            @click="findByInventoryId(record)"
-          >
+          <a-button type="link" @click="findByInventoryId(record)">
             查看详情
           </a-button>
         </template>
@@ -98,33 +80,13 @@
     </div>
 
     <!-- 详情模态框 -->
-    <a-modal
-      v-model:visible="modal"
-      title="库存详情"
-      width="80%"
-    >
-      <a-table
-        :columns="modalColumns"
-        :data-source="inventoryInstanceCurrentStocks"
-        pagination="false"
-      />
+    <a-modal v-model:open="modal" title="库存详情" width="80%">
+      <a-table :columns="modalColumns" :data-source="inventoryInstanceCurrentStocks" pagination="false" />
     </a-modal>
-    <a-modal
-      v-model:visible="modal2"
-      title="库存详情"
-      width="80%"
-    >
-      <a-table
-        :columns="modalColumns2"
-        :data-source="inventoryInstanceCurrentStocks2"
-        pagination="false"
-      />
+    <a-modal v-model:open="modal2" title="库存详情" width="80%">
+      <a-table :columns="modalColumns2" :data-source="inventoryInstanceCurrentStocks2" pagination="false" />
     </a-modal>
-    <a-modal
-      v-model:visible="modal3"
-      title="出入库流水"
-      width="80%"
-    >
+    <a-modal v-model:open="modal3" title="出入库流水" width="80%">
       <InAndOutFlow :display-data="displayData" />
     </a-modal>
 
@@ -349,4 +311,22 @@ export default {
 .pagination-info {
   margin-top: 16px;
 }
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

src/stock/InAndOutFlow.vue

@@ -1,37 +1,26 @@
 <template>
-  <a-card :bordered="false">
-    <a-table
-      :data-source="inventoryInstanceCurrentStocks"
-      :columns="columns"
-      :pagination="pagination"
-      row-key="id"
-      size="small"
-      :scroll="{ x: true }"
-      @change="handleTableChange"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.dataIndex === 'index'">
-          {{ (pagination.current_page - 1) * pagination.per_page + record.index + 1 }}
-        </template>
+  <CommonTable
+    :columns="columns" :data-source="inventoryInstanceCurrentStocks" :total="pagination.total"
+    :extra-height="300" :x-scroll="3000" @get-pager="getPageParams"
+  >
+    <template #bodyCell="{ column, index }">
+      <template v-if="column.dataIndex === 'index'">
+        {{ index + 1 }}
       </template>
-    </a-table>
-
-    <a-pagination
-      v-model:current="pagination.current_page"
-      :total="pagination.total"
-      :page-size="pagination.per_page"
-      show-less-items
-      @change="findByInventoryId"
-    />
-  </a-card>
+    </template>
+  </CommonTable>
 </template>
 
 <script>
 import Common from '../common/Common.js';
+import CommonTable from '../common/CommonTable.vue';
 import CurrentStockResource from '../api/wms/CurrentStockResource.js';
 
 export default {
   name: 'InAndOutFlow',
+  components: {
+    CommonTable,
+  },
   props: {
     displayData: {
       type: Object,
@@ -66,9 +55,8 @@ export default {
       inventoryInstanceCurrentStocks: [],
       pagination: {
         total: 0,
-        per_page: 10,
-        current_page: 1,
-        last_page: 0,
+        pageSize: 20,
+        current: 1,
       },
     };
   },
@@ -76,10 +64,17 @@ export default {
     this.findByInventoryId();
   },
   methods: {
+
+    getPageParams(current, pageSize) {
+      this.pagination.current = current;
+      this.pagination.pageSize = pageSize;
+      this.findByInventoryId();
+    },
+
     findByInventoryId() {
       const range = {
-        start: (this.pagination.current_page - 1) * this.pagination.per_page,
-        length: this.pagination.per_page,
+        start: (this.pagination.current - 1) * this.pagination.pageSize,
+        length: this.pagination.pageSize,
       };
       CurrentStockResource.findStockInAndStockOutData(this.displayData.inventoryId, range)
         .then(successData => {
@@ -89,7 +84,6 @@ export default {
               index,
             }));
             this.pagination.total = successData.totalSize;
-            this.pagination.last_page = Math.ceil(this.pagination.total / this.pagination.per_page);
           }
         })
         .catch(errorData => {

src/stock/StockLedger.vue

@@ -1,78 +1,53 @@
 <template>
-  <a-layout class="container">
-    <Navbar :title="'库存台账'" :is-go-back="false" />
-    
-    <a-card :bordered="false">
-      <a-form layout="inline" class="filter-form">
-        <a-form-item label="单据日期范围">
-          <a-range-picker
-            v-model:value="dateRange"
-            @change="handleDateChange"
-          />
-        </a-form-item>
+  <Navbar :title="'库存台账'" :is-go-back="false" />
 
-        <a-form-item label="审核日期范围">
-          <a-range-picker
-            v-model:value="examineDateRange"
-            @change="handleExamineDateChange"
-          />
+  <a-form :colon="false">
+    <a-row :gutter="[8, 0]" justify="space-start">
+      <a-col>
+        <a-form-item label="单据日期范围" :label-col="{ style: 'width: 90px' }" class="horizontal-form-item">
+          <a-range-picker v-model:value="dateRange" style="width: 240px" @change="handleDateChange" />
         </a-form-item>
-
-        <a-form-item label="存货编码范围">
-          <a-input
-            v-model:value="stockLedgerDto2.startInventoryNo"
-            placeholder="起始编码"
-            class="code-range-input"
-          />
+      </a-col>
+      <a-col>
+        <a-form-item label="审核日期范围" :label-col="{ style: 'width: 90px' }" class="horizontal-form-item">
+          <a-range-picker v-model:value="examineDateRange" style="width: 240px" @change="handleExamineDateChange" />
+        </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item label="存货编码范围" :label-col="{ style: 'width: 90px' }" class="horizontal-form-item">
+          <a-input v-model:value="stockLedgerDto2.startInventoryNo" placeholder="起始编码" class="code-range-input" />
           <span class="range-split">~</span>
-          <a-input
-            v-model:value="stockLedgerDto2.endInventoryNo"
-            placeholder="结束编码"
-            class="code-range-input"
-          />
+          <a-input v-model:value="stockLedgerDto2.endInventoryNo" placeholder="结束编码" class="code-range-input" />
         </a-form-item>
-
-        <a-form-item label="仓库选择">
+      </a-col>
+      <a-col>
+        <a-form-item label="仓库选择" :label-col="{ style: 'width: 90px' }" class="horizontal-form-item">
           <a-select
-            v-model:value="selectedWarehouses"
-            mode="multiple"
-            style="width: 200px"
-            placeholder="请选择仓库"
+            v-model:value="selectedWarehouses" mode="multiple" style="width: 240px" placeholder="请选择仓库"
             @change="warehouseSelectChanged"
           >
-            <a-select-option
-              v-for="warehouse in warehouseOptions"
-              :key="warehouse.value"
-              :value="warehouse.value"
-            >
+            <a-select-option v-for="warehouse in warehouseOptions" :key="warehouse.value" :value="warehouse.value">
               {{ warehouse.label }}
             </a-select-option>
           </a-select>
         </a-form-item>
+      </a-col>
+      <a-col>
+        <a-form-item>
+          <a-button type="primary" @click="selectStockLedgers">查询</a-button>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
 
-        <a-button type="primary" @click="selectStockLedgers">查询</a-button>
-      </a-form>
-
-      <a-table
-        :data-source="stockLedgerDtos"
-        :columns="columns"
-        :pagination="pagination"
-        row-key="id"
-        class="data-table"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.dataIndex === 'inventoryNo'">
-            <a @click="onChoise(record)">{{ record.inventoryNo }}</a>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <ProcessReportResultPreview
-      :process-report-result="processReportResult"
-      class="report-preview"
-    />
-  </a-layout>
+  <a-table :data-source="stockLedgerDtos" :columns="columns" :pagination="pagination" row-key="id" class="data-table">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'inventoryNo'">
+        <a @click="onChoise(record)">{{ record.inventoryNo }}</a>
+      </template>
+    </template>
+  </a-table>
+  <ProcessReportResultPreview :process-report-result="processReportResult" class="report-preview" />
 </template>
 
 <script>
@@ -88,19 +63,14 @@ import 'vue-select/dist/vue-select.css';
 export default {
   components: {
   },
-  setup() {
-    const pagination = reactive({
-      current: 1,
-      pageSize: 5,
-      total: 0,
-      showTotal: total => `共 ${total} 条`,
-    });
-
-    return { pagination };
-  },
 
   data: function () {
     return {
+      pagination: {
+        current: 1,
+        pageSize: 20,
+        total: 0,
+      },
       columns: [
         { title: '存货编码', dataIndex: 'inventoryNo' },
         { title: '存货名称', dataIndex: 'inventoryName1' },
@@ -150,7 +120,7 @@ export default {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
-          if(data.errorCode == 0) {
+          if (data.errorCode == 0) {
             if (data.datas.length > 0) {
               data.datas.forEach(function (item) {
                 item.label = item.name;
@@ -194,7 +164,7 @@ export default {
         },
 
         success: function (successData) {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             if (successData.data) {
               console.log(successData.data);
               _self.stockLedgerDtos = successData.data.result;
@@ -341,7 +311,7 @@ export default {
         contentType: 'application/json',
         data: JSON.stringify(_self.processResultData),
         success: function (successData) {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.processReportResult = successData.data;
             //请求成功后将报表数据显示
             if (
@@ -360,7 +330,7 @@ export default {
                 }
               });
             }
-          }else{
+          } else {
             Notify.error('提示', successData.errorMessage, false);
           }
         },
@@ -379,18 +349,34 @@ export default {
 }
 
 .code-range-input {
-  width: 120px;
+  width: 140px;
 }
 
 .range-split {
   margin: 0 8px;
 }
 
-.data-table {
-  margin-top: 24px;
-}
 
 .report-preview {
   margin-top: 32px;
 }
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.w-full {
+  width: 160px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 10px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
 </style>

webpack.base.js

@@ -39,8 +39,8 @@ module.exports = {
         loader: '@intlify/vue-i18n-loader',
         include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
           //path.resolve(__dirname, 'src/locales'),
-          path.resolve(__dirname, 'client-base-v3/src/locales'),
-          path.resolve(__dirname, 'client-wms-v3/src/locales'),
+          path.resolve(__dirname, 'client-base-v5/src/locales'),
+          path.resolve(__dirname, 'client-wms-v5/src/locales'),
           path.resolve(__dirname, 'client-role-v3/src/locales'),
         ],
       },
@@ -54,14 +54,14 @@ module.exports = {
           },
         },
         generator: {
-          filename: './client-base-v3-image/[name][ext][query]',
+          filename: './client-base-v5-image/[name][ext][query]',
         },
       },
       {
         test: /\.(eot|woff|woff2|ttf)$/,
         type: 'asset/resource',
         generator: {
-          filename: './client-base-v3-font/[name].[ext]?[hash]',
+          filename: './client-base-v5-font/[name].[ext]?[hash]',
         },
       },
     ],

webpack.dev.js

@@ -60,59 +60,59 @@ module.exports = WebpackMerge.merge(baseConfig, {
     
     proxy: {
       '/api': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/static': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/dashboard': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/mock': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/authApi': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/Dictionary': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/Files': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: false,
         changeOrigin: true,
         secure:true,
       },
       '/WebSocket': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: true,
         changeOrigin: true,
       },
       '/TrainVideo': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: true,
         changeOrigin: true,
       },
       '/gateway-api': {
-        target: 'http://192.168.1.8:10022/',
+        target: 'http://192.168.1.8:10026/',
         ws: true,
         changeOrigin: true,
         secure:true,

webpack.lib.js

@@ -17,11 +17,11 @@ module.exports = WebpackMerge.merge(baseConfig,{
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
-    filename: 'client-wms-v3.js',
+    filename: 'client-wms-v5.js',
     // library: {
     //   type: 'module',
     // },
-    library: 'client-wms-v3',
+    library: 'client-wms-v5',
     libraryTarget: 'umd',
     //「devtool 中模块」的文件名模板（用于冲突）
     umdNamedDefine: false,
@@ -58,7 +58,7 @@ module.exports = WebpackMerge.merge(baseConfig,{
     
     // CSS 提取
     new MiniCssExtractPlugin({
-      filename: 'client-wms-v3.css',
+      filename: 'client-wms-v5.css',
     }),
 
     // 打包分析插件

webpack.prod.js

@@ -22,8 +22,8 @@ module.exports =  WebpackMerge.merge(baseConfig, {
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: './',
-    filename: './client-wms-v3-js-bundle/[name].[contenthash:8].js',
-    chunkFilename: './client-wms-v3-js-chunk/[name].[contenthash:8].js',
+    filename: './client-wms-v5-js-bundle/[name].[contenthash:8].js',
+    chunkFilename: './client-wms-v5-js-chunk/[name].[contenthash:8].js',
   },
 
   optimization: {
@@ -71,7 +71,7 @@ module.exports =  WebpackMerge.merge(baseConfig, {
 
     // CSS 提取
     new MiniCssExtractPlugin({
-      filename: './client-wms-v3-style/[name].[contenthash:8].css',
+      filename: './client-wms-v5-style/[name].[contenthash:8].css',
     }),
 
   ]),