修改仓库配置打印等界面

src/components/GradeDefinition.vue

@@ -1,107 +1,61 @@
 <template>
-  <div class="container-fluid">
+  <div class="card-container">
     <h2>仓库编码定义</h2>
     <hr />
-    <button type="button" class="btn btn-primary" @click="save">保存</button>
-    <button type="button" class="btn btn-default" @click="query">刷新</button>
+    <a-button type="primary" @click="save">保存</a-button>
+    <a-button type="default" @click="query">刷新</a-button>
     <h4 />
-    <table v-if="gradeDefinitions.length > 0" class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th>序号</th>
-          <th>项目</th>
-          <th>最大级数</th>
-          <th>最大长度</th>
-          <th>单级最大长度</th>
-          <th>是否分类</th>
-          <th>是否自动编码</th>
-          <th>第1级</th>
-          <th>第2级</th>
-          <th>第3级</th>
-          <th>第4级</th>
-          <th>第5级</th>
-          <th>第6级</th>
-          <th>第7级</th>
-          <th>第8级</th>
-          <th>第9级</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(data, index) in gradeDefinitions" :key="data.id">
-          <td>{{ index + 1 }}</td>
-          <td>{{ data.gradeName }}</td>
-          <td>{{ data.maxGradeCount }}</td>
-          <td>{{ data.maxNoLength }}</td>
-          <td>{{ data.maxSingleGradeLength }}</td>
-
-          <td v-if="!data.isEditting">{{ data.isDeleted ? '是' : '否' }}</td>
-          <td v-else>
-            <label>
-              <input v-model="data.isDeleted" autocomplete="off" type="checkbox" name="" checked />
-              {{ data.isDeleted ? '是' : '否' }}
-            </label>
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.autoGenerateNo ? '是' : '否' }}</td>
-          <td v-else>
-            <label>
-              <input v-model="data.autoGenerateNo" autocomplete="off" type="checkbox" name="" checked />
-              {{ data.autoGenerateNo ? '是' : '否' }}
-            </label>
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade1 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade1" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade2 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade2" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade3 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade3" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade4 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade4" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade5 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade5" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade6 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade6" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade7 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade7" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade8 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade8" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td v-if="!data.isEditting">{{ data.grade9 }}</td>
-          <td v-else class="edit">
-            <input v-model.trim.number="data.grade9" autocomplete="off" type="text" class="form-control" />
-          </td>
-
-          <td>
-            <button v-if="!data.isEditting" type="button" class="btn btn-info" @click="edit(data)">编辑</button>
-            <button v-else type="button" class="btn btn-danger" @click="complete(data)">完成</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <a-table 
+      :columns="columns" 
+      :data-source="gradeDefinitions" 
+      :pagination="false"
+      bordered
+    >
+      <template #bodyCell="{ column, record, index }">
+        <!-- 序号列 -->
+        <template v-if="column.dataIndex === 'index'">
+          {{ index + 1 }}
+        </template>
+        
+        <!-- 复选框列 -->
+        <template v-else-if="['isDeleted', 'autoGenerateNo'].includes(column.dataIndex)">
+          <a-checkbox 
+            v-if="record.isEditting"
+            v-model:checked="record[column.dataIndex]"
+          />
+          <span v-else>{{ record[column.dataIndex] ? '是' : '否' }}</span>
+        </template>
+        
+        <!-- 输入框列 -->
+        <template v-else-if="column.dataIndex.startsWith('grade')">
+          {{ record[column.dataIndex] }}
+        </template>
+        
+        <!-- 操作列 -->
+        <template v-else-if="column.dataIndex === 'operation'">
+          <a-button 
+            v-if="!record.isEditting"
+            type="link" 
+            @click="edit(record)"
+          >
+            编辑
+          </a-button>
+          <a-button 
+            v-else
+            type="link" 
+            danger
+            @click="complete(record)"
+          >
+            完成
+          </a-button>
+        </template>
+        
+        <!-- 普通文本列 -->
+        <template v-else>
+          {{ record[column.dataIndex] }}
+        </template>
+      </template>
+    </a-table>
     <Loading v-if="loading" />
   </div>
 </template>
@@ -111,23 +65,57 @@ import Common from '../common/Common.js';
 
 
 export default {
-  components: {
-    
-  },
   data: function () {
     return {
       gradeDefinitions: [],
-      gradeDefinition: '',
-      grade1: '',
-      grade2: '',
-      grade3: '',
-      grade4: '',
-      grade5: '',
-      grade6: '',
-      grade7: '',
-      grade8: '',
-      grade9: '',
       loading: false,
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          width: '80px',
+        },
+        {
+          title: '项目',
+          dataIndex: 'gradeName',
+          width: '120px',
+        },
+        {
+          title: '最大级数',
+          dataIndex: 'maxGradeCount',
+          width: '120px',
+        },
+        {
+          title: '最大长度',
+          dataIndex: 'maxNoLength',
+          width: '120px',
+        },
+        {
+          title: '单级最大长度',
+          dataIndex: 'maxSingleGradeLength',
+          width: '120px',
+        },
+        {
+          title: '是否分类',
+          dataIndex: 'isDeleted',
+          width: '120px',
+        },
+        {
+          title: '是否自动编码',
+          dataIndex: 'autoGenerateNo',
+          width: '120px',
+        },
+        ...[1,2,3,4,5,6,7,8,9].map(i => ({
+          title: `第${i}级`,
+          dataIndex: `grade${i}`,
+          width: '100px',
+        })),
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: '120px',
+        },
+      ],
     };
   },
   mounted: function () {
@@ -271,24 +259,17 @@ export default {
 </script>
 
 <style scoped>
-	.form-group{
-		margin-top: 10px;
-		margin-left: 20px;
-	}
-
-	input[type='text'] {
-		margin: 0px;
-		width: 80px;
-		height: 50px;
-		border: 0px;
-		text-align: center;
-	}
+.card-container {
+  padding: 20px;
+  background: #fff;
+}
 
-	input[type='text']:focus {
-		border: 1px solid blue;
-	}
+.ant-table-cell {
+  padding: 12px !important;
+  text-align: center !important;
+}
 
-	td.edit {
-		padding: 0px;
-	}
+.ant-input {
+  text-align: center;
+}
 </style>

src/components/InventoryPrint.vue

@@ -1,157 +1,93 @@
 <template>
-  <div style="width: 98% !important;">
+  <div class="container">
     <Navbar :title="'标签打印'" :is-go-back="false" />
-    <div class="flex-container">
-      <div class="all">
-        <div class="globalMain">
-          <ul class="siteList">
-            <li class="site">
-              <label class="labelStyle">存货编号</label>
-              <div class="form-inline-div">
-                <a-input
-                  v-model:value="searchParams.no" class="form-control" style="width: 200px"
-                  @keyup.enter="reQuery"
-                />
-              </div>
-            </li>
-            <li class="site">
-              <label class="labelStyle">存货名称</label>
-              <div class="form-inline-div">
-                <a-input
-                  v-model:value="searchParams.name" class="form-control" style="width: 200px"
-                  @keyup.enter="reQuery"
-                />
-              </div>
-            </li>
-
-            <li class="site">
-              <label class="labelStyle">规格型号</label>
-              <div class="form-inline-div">
-                <a-input
-                  v-model:value="searchParams.type" class="form-control" style="width: 200px"
-                  @keyup.enter="reQuery"
-                />
-              </div>
-            </li>
-            <li class="site">
-              <label class="labelStyle">epc</label>
-              <div class="form-inline-div">
-                <a-input
-                  v-model:value="searchParams.epc" class="form-control" style="width: 200px"
-                  @keyup.enter="reQuery"
-                />
-              </div>
-            </li>
-          </ul>
-        </div>
-        <ul class="siteList">
-          <li class="site">
-            <label class="labelStyle">
-              选择打印模板
-            </label>
-            <div class="form-inline-div">
-              <select v-model="templateId" class="form-control m-form-input" style="width: 15em">
-                <option value="" />
-                <option v-for="item in templates" :key="'templates' + item.name" :value="item.id">
-                  {{ item.name }}
-                </option>
-              </select>
-            </div>
-          </li>
-          <li class="site">
-            <label for="selectPrinter" class="labelStyle">选择打印机</label>
-            <div class="form-inline-div">
-              <select v-model="selectedPrinter" class="form-control m-form-input" style="width: 15em">
-                <option value="" />
-                <option v-for="printer in printers" :key="printer" :value="printer">
-                  {{ printer }}
-                </option>
-              </select>
-            </div>
-          </li>
-          <li
-            style="
-            margin-left: 36px;
-            display: flex;
-            justify-content: space-between;
-          "
-          >
-            <a-button style="width: 80px" @click="print()">
-              打印
-            </a-button>
-            <PrintEpc
-              ref="printEpc" v-model:visible="printEpcVisible" :printer-name="selectedPrinterCard"
-              @ok="closePrintEpc"
-            />
-            <!-- <a-button style="width: 80px; margin-left: 12px" type="dashed" @click="cardEpc()">
-              发卡
-            </a-button> -->
-
-            <a-button style="width: 80px; margin-left: 12px" @click="reQuery()">
-              查询
-            </a-button>
-            <a-button style="width: 80px; margin-left: 12px" type="dashed" @click="clearFilter()">
-              清空
-            </a-button>
-          </li>
-        </ul>
+    <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">
+            <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">
+            <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>
+        </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>
-
-      <div class="grid-item-row2-column2">
-        <table class="fixed-table table table-striped table-bordered">
-          <thead>
-            <tr>
-              <td style="width: 50px">
-                序号
-              </td>
-              <th style="width: 30px">
-                <input v-model="checked" type="checkbox" @change="selectAll()" />
-              </th>
-              <td style="width: 166px">存货编号</td>
-              <td style="width: 166px">存货名称</td>
-              <td style="width: 166px">规格型号</td>
-              <td style="width: 166px">epc</td>
-              <td style="width: 166px">BarCode</td>
-              <td style="width: 166px">计量单位</td>
-              <td style="width: 166px">总打印数量</td>
-              <td style="width: 166px">上次打印时间</td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(item, index) in assetInstanceDtoList" :key="item.id">
-              <td>
-                {{
-                  index + 1 + (pagination.current_page - 1) * pagination.per_page
-                }}
-              </td>
-              <td>
-                <input v-model="item.checked" type="checkbox" @change="templateChange(item.id)" />
-              </td>
-              <td>{{ item.no }}</td>
-              <td>{{ item.name }}</td>
-              <td>{{ item.type }}</td>
-              <td>{{ item.epc }}</td>
-              <td>{{ item.barcode }}</td>
-              <td>{{ item.computationUnitName }}</td>
-              <td>{{ item.quantity }}</td>
-              <td>{{ item.printDate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-footer">
-        <div class="pull-left">
-          <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ pagination.current_page *
-            pagination.per_page
-          }}条,共计{{ pagination.total }}条,每页显示</span>
-          <PageSizeSelect @page-size-changed="gridSizeSelect" />
-          <span>条</span>
-        </div>
-        <div class="pull-right">
-          <VueBootstrapPagination v-if="pagination.last_page > 0" :pagination="pagination" :callback="getAssetInstancePrint" />
-        </div>
-      </div>
-    </div>
+    </a-card>
     <Loading v-if="loading" />
   </div>
 </template>
@@ -161,6 +97,19 @@ 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';
+// 列定义
+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 },
+  { title: 'epc', dataIndex: 'epc', width: 150 },
+  { title: 'BarCode', dataIndex: 'barcode', width: 150 },
+  { title: '计量单位', dataIndex: 'computationUnitName', width: 150 },
+  { title: '总打印数量', dataIndex: 'quantity', width: 150 },
+  { title: '上次打印时间', dataIndex: 'printDate', width: 150 },
+];
 
 export default {
   components: {
@@ -168,6 +117,7 @@ export default {
   },
   data: function () {
     return {
+      columns,
       assetInstanceDtoList: [],
       checked: false, //全选,
       pagination: {
@@ -497,226 +447,35 @@ export default {
 };
 </script>
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  /*将视图分为四个模块，每个模块的高度*/
-  grid-template-rows: 53px min-content auto 40px;
-  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrgnizationSelect 的高度*/
-  height: calc(100vh - 90px);
-  width: 100%;
-  overflow: hidden;
-}
-
-.grid-item-1 {
-  grid-column: 1 / 2;
-  grid-row: 1 / 2;
-}
-
-.grid-item-2 {
-  grid-column: 1 / 2;
-  grid-row: 2 / 3;
-}
-
-.grid-item-3 {
-  padding-top: 0px;
-  padding-right: 10px;
-  overflow: hidden;
-  grid-column: 1 / 2;
-  grid-row: 3/4;
-  height: 100%;
-}
-
-.grid-item-4 {
-  padding-top: 10px;
-  grid-column: 1 / 2;
-  grid-row: 4/5;
-}
-</style>
-
-
-<style scoped>
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
-  text-align: center;
-}
-
-table.fixed-table tr {
-  height: 40px;
-}
-
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
-
-<style scoped>
-.m-form-group {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  margin-bottom: 5px !important;
-}
-
-@media (max-width: 768px) {
-  .m-form-group-label {
-    text-align: left;
-    padding-right: 10px;
-  }
-}
-
-@media (min-width: 768px) {
-  .m-form-group-label {
-    width: 100px;
-    text-align: center;
-    padding-right: 10px;
-  }
-
-  .input-switches {
-    width: 100%;
-  }
-}
-
-.form-control-complex {
-  width: 200px !important;
-}
-
-.form-input {
-  border-radius: 4px !important;
-}
-
-.m-form-input {
-  border-radius: 4px !important;
-  width: 200px !important;
-}
-
-.form-inline-div {
-  display: inline-block;
-  height: 34px;
-}
-
-.m-btn {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  margin-bottom: 5px !important;
-}
-
-.table-header-left {
-  float: left;
-  /* margin: 20px 0; */
-}
-
-.table-header-right {
-  margin-top: -2px;
-  float: right;
-}
-</style>
-
-<style scoped>
-.room_img {
-  width: 150px;
-  height: 100px;
-  float: left;
-  margin-right: 10px;
-}
-
-.room_img img {
-  width: 100%;
-  height: 100%;
-}
-
-.room_img span {
-  position: relative;
-  right: -130px;
-  top: -100px;
-  font-size: 20px;
-  color: red;
+.container {
+  padding: 16px;
 }
 
-.modal-img-box {
-  width: 100%;
-  height: 400px;
-  text-align: center;
-  overflow: auto;
+.main-card {
+  margin-top: 16px;
 }
 
-.m-small-img {
-  cursor: pointer;
+.search-form {
+  margin-bottom: 16px;
 }
 
-.m-img {
-  width: 100%;
-}
-
-.labelStyle {
-  width: 120px;
-  text-align: right;
-  padding: 8px;
-}
-
-.grid-item-row2-column2 {
-  grid-row-start: 2;
-  grid-row-end: 3;
-  grid-column-start: 2;
-  grid-column-end: 3;
-  overflow: auto;
-  margin-top: 0px;
-}
-
-.globalMain {
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.siteList {
+.action-area {
+  margin-bottom: 16px;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-@media (min-width: 500px) {
-  .siteList {
-    margin-left: 0;
-    margin-right: -25px;
-    justify-content: flex-start;
-  }
-}
-
-.siteList>li {
-  margin-bottom: 10px;
+  align-items: center;
 }
 
-@media (min-width: 500px) {
-  .siteList>li {
-    margin-right: 8px;
-  }
+.data-table {
+  margin: 16px 0;
 }
 
-.siteList .site {
-  width: 300px;
+.pagination {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  /* flex-direction: column; */
-  position: relative;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  box-sizing: border-box;
+  justify-content: flex-end;
+  margin-top: 16px;
 }
 
-.flex-footer {
-  margin-top: 0.8em;
-  height: 35px;
-  /*放大缩小比例为0 */
-  flex: 0 0 35px;
+.ant-form-item {
+  margin-bottom: 12px;
 }
 </style>

src/components/InventoryPrintScan.vue

@@ -3,269 +3,140 @@
 */
 
 <template>
-  <div class="container-fluid">
-    <Navbar
-      title="扫描入库打印"
-      :is-go-back="false"
-    />
-    <div
-      class="flex-container"
-      style="margin-top: 10px;"
-    >
-      <div class="flex-header">
-        <div>
-          <div
-            class="form-inline"
-            role="form"
-          >
-            <PrintWidget
-              ref="printWidget"
-              :printer-localstorage-id="'#InventoryPrinterPrinter'"
-              @selected-printer-name="getPrintName"
-            />
-
-            <div class="form-group">
-              <input
-                v-model="message"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="请输入要打印存货的名称或编码"
-                aria-describedby="basic-addon"
-                style="width:350px;"
-                @keyup.enter="queryInventory"
-              />
-            </div>
-            <div class="form-group">
-              <button
-                class="btn btn-default"
-                @click="queryInventory"
-              >
-                查询
-              </button>
-              <button
-                class="btn btn-default"
-                @click="$refs.printEpc.show()"
-              >
-                再次打印
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex-content"
-        style="margin-top: 10px;"
+  <div class="container">
+    <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>
+      </a-space>
+
+      <!-- 数据表格 -->
+      <a-table
+        :columns="columns"
+        :data-source="inventoryInstanceDatas"
+        :pagination="false"
+        size="middle"
+        :scroll="{ x: 1500, y: '60vh' }"
+        :sticky="{ offsetHeader: 64 }"
       >
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 50px;">
-                序号
-              </th>
-              <th style="width: 50px;">
-                图片
-              </th>
-              <th style="width: 150px;">
-                存货名称
-              </th>
-              <th style="width: 150px;">
-                存货编号
-              </th>
-              <th style="width: 150px;">
-                规格型号
-              </th>
-              <th style="width: 60px;">
-                计量单位
-              </th>
-              <th style="width: 60px;">
-                采购订单编号
-              </th>
-              <th style="width: 100px;">
-                批号
-              </th>
-              <th style="width: 80px;">
-                标签个数
-              </th>
-              <th style="width: 80px;">
-                标签代表数量
-              </th>
-              <th style="width: 150px;">
-                供应商
-              </th>
-              <th style="width: 150px;">
-                放置货位
-              </th>
-              <th style="width: 60px;">
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateAllPack()"
-                >
-                  打印
-                </button>
-              </th>
-              <th style="width: 100px;">
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateAllRepeatPack()"
-                >
-                  重复打印全部
-                </button>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="table1">
-            <tr v-for="(inventoryInstance, index) in inventoryInstanceDatas" :key="inventoryInstance.id">
-              <td>
-                {{ index + 1 + (pagination.current_page-1) * pagination.per_page }}
-              </td>
-              <td @click="showBigImage(index)">
-                <img
-                  :src="Common.getThumbnailImageSrc(className, inventoryInstance.imageNames)"
-                  class="image"
-                  @click="$refs.imagePreview.preview(className, inventoryInstance.imageNames)"
-                />
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryName }}
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryCode }}
-              </td>
-              <td>
-                {{ inventoryInstance.type }}
-              </td>
-              <td>
-                {{ inventoryInstance.computationUnit }}
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.purchaseOrderNo"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.batchNo"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.packageCount"
-                  autocomplete="off"
-                  type="number"
-                  class="form-control"
-                  style="width: 100%"
-                />
-              </td>
-              <td>
-                <input
-                  v-model="inventoryInstance.quantity"
-                  autocomplete="off"
-                  type="text"
-                  style="width: 100%"
-                  class="form-control"
-                />
-              </td>
-              <td>
-                <SearchWidget
-                  :info-window-no="infoWindowNo1"
-                  :field-value="getFieldValue1(inventoryInstance)"
-                  :display-name="'v.name'"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="valueChanged1($event,inventoryInstance)"
-                />
-              </td>
-              <td>
-                <SearchWidget
-                  :info-window-no="infoWindowNo2"
-                  :field-value="getFieldValue2(inventoryInstance)"
-                  :display-name="'p.barCode'"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="valueChanged2($event,inventoryInstance)"
-                />
-              </td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generatePack(inventoryInstance)"
-                >
-                  打印
-                </button>
-              </td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-default"
-                  style="width: 100%"
-                  @click="generateRepeatPack(inventoryInstance)"
-                >
-                  重复打印
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-footer">
-        <div>
-          <div class="form-group">
-            <div class="pull-left">
-              共查询到<b>{{ pagination.total }}</b>条数据
-            </div>
-            <div class="pull-right">
-              <VueBootstrapPagination
-                v-if="pagination.last_page > 0"
-                :pagination="pagination"
-                :callback="queryInventory"
-              />
-            </div>
-          </div>
-        </div>
+        <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 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>
+      </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>
-    </div>
+    </a-card>
 
     <PrintEpc ref="printEpc" :printer-name="printerName" />
     <ImagePreview ref="imagePreview" />
-    <Loading v-if="loading" />        
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-
-
 import InventoryResource from '../api/common/InventoryResource.js';
 import InventoryInstancePrintResource from '../api/wms/InventoryInstancePrintResource.js';
-import { PrintUtil,PrintWidget } from 'pc-component-v3';
+import { PrintUtil, PrintWidget } from 'pc-component-v3';
+
+const columns = [
+  { title: '序号', dataIndex: 'index', width: 80, fixed: 'left' },
+  { title: '图片', dataIndex: 'imageNames', width: 100, fixed: 'left' },
+  { title: '存货名称', dataIndex: 'inventoryName', width: 150, fixed: 'left' },
+  { 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: 'packageCount', width: 100 },
+  { title: '标签代表数量', dataIndex: 'quantity', width: 120 },
+  { title: '供应商', dataIndex: 'vendor', width: 150 },
+  { title: '放置货位', dataIndex: 'position', width: 150 },
+  { title: '操作', dataIndex: 'print', width: 100 },
+  { title: '重复打印', dataIndex: 'repeatPrint', width: 120 },
+];
 
 export default {
-  components: {
-    PrintWidget,
-  },
-  data: function () {
-    this.Common = Common;
+  components: { PrintWidget },
+  data() {
     return {
+      Common,
       message: '',
       inventoryInstanceDatas: [],
       recordIds: [],
       infoWindowNo1: 283036,
       infoWindowNo2: 283920,
       whereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'organization.id',
           dataDimensionTypeNo: '202201191700',
           defaultDataDimensionTypeValueNo: '1',
@@ -273,67 +144,45 @@ export default {
       },
       pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        per_page: Common.pageSize,
+        current_page: 1,
+        last_page: 0,
       },
-      isUpdatePage: true,
       className: 'com.leanwo.prodog.model.common.Inventory',
-      allRepeatPack: [], //重复打印全部的id
-      printType: 1,//类型 0:采购入库打印/1:扫描入库打印
+      allRepeatPack: [],
+      printType: 1,
       printerName: '',
       loading: false,
-      selectedPrinterTitle:'',
+      selectedPrinterTitle: '',
+      columns,
     };
   },
-
-  mounted: function () {
-    var _self = this;
-    _self.queryInventory();
-
-    $('.fixed-table').tableFixer({
-      'left': 3,
-      'head': true,
-    });
-
-    $('.fixed-table').colResizable({
-      resizeMode: 'overflow',
-      partialRefresh: true,
-    });
+  mounted() {
+    this.queryInventory();
   },
-
   methods: {
-
-    getPrintName:function(value){
+    getPrintName(value) {
       this.selectedPrinterTitle = value;
     },
-
-    getFieldValue1: function (item) {
-      var fieldValue1 = {
+    getFieldValue1(item) {
+      return {
         id: item.vendorId,
         displayValue: [item.vendorName],
         fieldType: 'Key',
       };
-      return fieldValue1;
     },
-
-    getFieldValue2: function (item) {
-      var fieldValue2 = {
+    getFieldValue2(item) {
+      return {
         id: item.positionId,
         displayValue: [item.savePositionName],
         fieldType: 'Key',
       };
-      return fieldValue2;
     },
-
-    // 用户选择框change事件
-    valueChanged1: function (newFieldValue, item) {
+    valueChanged1(newFieldValue, item) {
       item.vendorId = newFieldValue.id;
       item.vendorName = newFieldValue.displayValue[0];
     },
-
-    // 用户选择框change事件
-    valueChanged2: function (newFieldValue, item) {
+    valueChanged2(newFieldValue, item) {
       item.positionId = newFieldValue.id;
       item.savePositionName = newFieldValue.displayValue[0];
     },
@@ -505,58 +354,45 @@ export default {
     /**
          * 根据物料名称或者编号查询数据
          */
-    queryInventory: function () {
-      var _self = this;
-      var message = $.trim(this.message);
-      if (_self.message.length > 0 && !_self.isUpdatePage) {
-        _self.pagination.current_page = 1;
-        _self.isUpdatePage = true;
-      } else if (_self.message.length <= 0) {
-        _self.isUpdatePage = false;
-      }
-      _self.inventoryInstanceDatas.splice(0, _self.inventoryInstanceDatas.length);
-
-      let inventoryQueryConditionRequest = {
-        'name': message,
-        'no': message,
-        'type': message,
-        'range': {
-          'start': (_self.pagination.current_page - 1) * _self.pagination.per_page,
-          'length': _self.pagination.per_page,
-        },
-      };
-      _self.loading=true;
-      InventoryResource.findByQueryCodition(inventoryQueryConditionRequest).then(baseRangeResponse => {
-        _self.loading=false;
-        if (baseRangeResponse.errorCode == 0) {
-          baseRangeResponse.datas.forEach(function (item) {
-            var newInventoryInstance = {
-              'inventoryName': item.name,
-              'inventoryCode': item.no,
-              'quantity': '',
-              'batchNo': '',
-              'savePositionName': item.savePositionName,
-              'computationUnit': item.computationUnit,
-              'type': item.type,
-              'inventoryId': item.id,
-              'vendorId': item.vendorId,
-              'positionId': item.positionId,
-              'vendorName': item.vendorName,
-              'imageNames': item.imageNames,
-              'purchaseOrderNo': item.purchaseOrderNo,
-            };
-            _self.inventoryInstanceDatas.push(newInventoryInstance);
-          });
-          _self.pagination.total = baseRangeResponse.total;
-          _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
+    async queryInventory() {
+      try {
+        this.loading = true;
+        const response = await InventoryResource.findByQueryCodition({
+          name: this.message,
+          no: this.message,
+          type: this.message,
+          range: {
+            start: (this.pagination.current_page - 1) * this.pagination.per_page,
+            length: this.pagination.per_page,
+          },
+        });
+        
+        if (response.errorCode === 0) {
+          this.inventoryInstanceDatas = response.datas.map(item => ({
+            ...item,
+            inventoryName: item.name,
+            inventoryCode: item.no,
+            type: item.type,
+            computationUnit: item.computationUnit,
+            vendorName: item.vendorName,
+            savePositionName: item.savePositionName,
+            inventoryId: item.id,
+            vendorId: item.vendorId,
+            positionId: item.positionId,
+            imageNames: item.imageNames,
+            quantity: '',
+            batchNo: '',
+            purchaseOrderNo: item.purchaseOrderNo,
+          }));
+          this.pagination.total = response.total;
+          this.pagination.last_page = Math.ceil(response.total / this.pagination.per_page);
         }
-        //查询清空上一次的打印数据
-        _self.allRepeatPack = [];
-        _self.fixedTableHeader();
-      }, errorData => {
-        _self.loading=false;
-        Common.processException(errorData);
-      });
+        this.allRepeatPack = [];
+      } catch (error) {
+        Common.processException(error);
+      } finally {
+        this.loading = false;
+      }
     },
 
 
@@ -608,87 +444,37 @@ export default {
       });
     },
 
-    /**
-         * 冻结表头
-         */
-    fixedTableHeader: function () {
-      let _self = this;
-
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          'left': 3,
-          'head': true,
-        });
-      });
-    },
   },
 };
 </script>
 
 <style scoped>
-.flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 140px);
-}
-
-.flex-header {
-    /*放大缩小比例为0 */
-    flex: 0 0 35px;
-}
-
-.flex-footer {
-    height: 45px;
-    /*放大缩小比例为0 */
-    flex: 0 0 45px;
-}
-
-.flex-content {
-    flex: 1;
-    overflow: scroll;
-    width: 100%;
-}
-
-.fixed-table {
-    table-layout: fixed;
-    word-wrap: break-word;
-    word-break: break-all;
-}
-</style>
-
-<style scoped>
-.fixed-table {
-    table-layout: fixed;
-    width: 800px !important;
-    min-width: 800px !important;
+.container {
+  padding: 16px;
+  height: 100vh;
 }
 
-table.fixed-table tr {
-    height: 40px;
+.main-card {
+  margin-top: 16px;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.search-bar {
+  margin-bottom: 16px;
 }
 
-.image {
-    width: 40px;
-    height: 40px;
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
 }
 
-.modal-img-box {
-    width: 100%;
-    text-align: center;
-    overflow: auto;
+:deep(.ant-table-cell) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.m-img {
-    width: 100%;
+:deep(.ant-table-cell-fix-left) {
+  z-index: 2;
 }
-</style>
+</style>

src/components/WmsSetting.vue

@@ -1,349 +1,158 @@
-<template>
-  <!--
-		作者:田光辉
-		时间:2017-12-19
-		仓库配置
-	-->
-  <div class="container-fluid">
+<template>  
+  <div class="card-container">
     <Navbar title="仓库配置" :is-go-back="false" />
-    <div class="row">
-      <div class="col-md-12">
-        <ul class="nav nav-tabs">
-          <li
-            role="presentation"
-            :class="{ active: functionType == 1 }"
-            @click="selectPage(1)"
-          >
-            <a href="javascript:void(0)">存货设置</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 2 }"
-            @click="selectPage(2)"
-          >
-            <a href="javascript:void(0)">采购模块设置</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 3 }"
-            @click="selectPage(3)"
-          >
-            <a href="javascript:void(0)">快递设置</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 4 }"
-            @click="selectPage(4)"
-          >
-            <a href="javascript:void(0)">条码设置</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 5 }"
-            @click="selectPage(5)"
-          >
-            <a href="javascript:void(0)">仓库设置</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 6 }"
-            @click="selectPage(6)"
-          >
-            <a href="javascript:void(0)">货位设置</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <h4 />
-
-    <div v-show="functionType == 1">
-      <div>
-        <div class="form-group">
-          <label>存货编码方式</label>
-          <select
-            v-model="wmsSettingDto.inventoryNoStyle"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="TYPENO">类别编号+序号</option>
-            <option value="ORGNIZATIONNO">部门编号+序号</option>
-            <option value="SEQUENCE_NO">顺序号</option>
-            <option value="SEQUENCE_NO_MANUAL">顺序号+手工(存在字符'-')</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>存货编码类别</label>
-          <select
-            v-model="wmsSettingDto.inventoryNoType"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="AUTO">自动编码</option>
-            <option value="MANUAL">手动编码</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>存货编码序号长度</label>
-          <input
-            v-model.trim="wmsSettingDto.indexLength"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>当前序号</label>
-          <input
-            v-model="wmsSettingDto.currentIndex"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-
-        <!-- <div class="form-group">
-					<label>是否有到货入库</label>
-					<select class="form-control" v-model="wmsSettingDto.hasArrival" :disabled="isdisable">
-						<option value="true">是</option>
-						<option value="false">否</option>
-					</select>
-				</div>
-
-				<div class="form-group">
-					<label>是否有检验入库</label>
-					<select class="form-control" v-model="wmsSettingDto.hasInspect" :disabled="isdisable">
-						<option value="true">是</option>
-						<option value="false">否</option>
-					</select>
-				</div> -->
-      </div>
-    </div>
-
-    <div v-show="functionType == 2">
-      <div>
-        <div class="form-group">
-          <label>是否有到货入库</label>
-          <select
-            v-model="wmsSettingDto.hasArrival"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="true">是</option>
-            <option value="false">否</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>是否有检验入库</label>
-          <select
-            v-model="wmsSettingDto.hasInspect"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="true">是</option>
-            <option value="false">否</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>采购请购单单据号前缀</label>
-          <input
-            v-model="wmsSettingDto.purchaseRequestDocumentNoPrefix"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>采购请购单单据号后缀</label>
-          <input
-            v-model="wmsSettingDto.purchaseRequestDocumentNoSuffix"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>采购订单单据号前缀</label>
-          <input
-            v-model="wmsSettingDto.purchaseOrderDocumentNoPrefix"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-        <div class="form-group">
-          <label>采购订单单据号后缀</label>
-          <input
-            v-model="wmsSettingDto.purchaseOrderDocumentNoSuffix"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-        <div class="form-group">
-          <label>允许误差值</label>
-          <input
-            v-model="wmsSettingDto.allowableErrorValue"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div v-show="functionType == 3">
-      <!--<div class="btn-group">
-				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-  快递查询服务供应商 <span class="caret"></span>
-  </button>
-				<ul class="dropdown-menu">
-					<li v-for="op in isoption">
-						<a href="#">{{op}}</a>
-					</li>
-				</ul>
-			</div>-->
-      <div class="form-group">
-        <label>快递查询服务供应商</label>
-        <select
-          v-model="wmsSettingDto.expressQueryProviderName"
-          class="form-control"
+    <a-tabs v-model:activeKey="functionType" type="card">
+      <a-tab-pane :key="1" tab="存货设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="">请选择</option>
-          <option v-for="op in isoption" :key="op" :value="op">
-            {{ op }}
-          </option>
-        </select>
-      </div>
-      <!--测试快递单号查询:<input autocomplete="off" type="text" v-model="number">
-			<input autocomplete="off" type="button"  @click="save22()" placeholder="提交" />-->
-    </div>
-
-    <div v-show="functionType == 4">
-      <div class="form-group">
-        <label>条码查询服务供应商</label>
-        <select
-          v-model="wmsSettingDto.barCodeProviderName"
-          class="form-control"
+          <a-form-item label="存货编码方式">
+            <a-select v-model:value="wmsSettingDto.inventoryNoStyle">
+              <a-select-option value="TYPENO">类别编号+序号</a-select-option>
+              <a-select-option value="ORGNIZATIONNO">部门编号+序号</a-select-option>
+              <a-select-option value="SEQUENCE_NO">顺序号</a-select-option>
+              <a-select-option value="SEQUENCE_NO_MANUAL">顺序号+手工(存在字符'-')</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="存货编码类别">
+            <a-select v-model:value="wmsSettingDto.inventoryNoType">
+              <a-select-option value="AUTO">自动编码</a-select-option>
+              <a-select-option value="MANUAL">手动编码</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="存货编码序号长度">
+            <a-input v-model:value="wmsSettingDto.indexLength" />
+          </a-form-item>
+          <a-form-item label="当前序号">
+            <a-input v-model:value="wmsSettingDto.currentIndex" />
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="采购模块设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="">请选择</option>
-          <option v-for="op in isoption2" :key="op" :value="op">
-            {{ op }}
-          </option>
-        </select>
-      </div>
-      <!--条码查询测试:<input autocomplete="off" type="text" v-model="barCode">
-			<button type="button"  @click="save22()" placeholder="提交"/>-->
-    </div>
-
-    <!-- add by zhanghao on 2018-12-19 -->
-    <div v-show="functionType == 5">
-      <div class="form-group">
-        <label>入库单是否允许物料编码重复</label>
-        <select
-          v-model="wmsSettingDto.allowInvNoRepeatOfStockIn"
-          class="form-control"
+          <a-form-item label="是否有到货入库">
+            <a-select v-model:value="wmsSettingDto.hasArrival">
+              <a-select-option value="true">是</a-select-option>
+              <a-select-option value="false">否</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="是否有检验入库">
+            <a-select v-model:value="wmsSettingDto.hasInspect">
+              <a-select-option value="true">是</a-select-option>
+              <a-select-option value="false">否</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="采购请购单单据号前缀">
+            <a-input v-model:value="wmsSettingDto.purchaseRequestDocumentNoSuffix" />
+          </a-form-item>
+          <a-form-item label="采购请购单单据号后缀">
+            <a-input v-model:value="wmsSettingDto.purchaseRequestDocumentNoSuffix" />
+          </a-form-item>
+          <a-form-item label="采购订单单据号前缀">
+            <a-input v-model:value="wmsSettingDto.purchaseOrderDocumentNoPrefix" />
+          </a-form-item>
+          <a-form-item label="采购订单单据号后缀">
+            <a-input v-model:value="wmsSettingDto.purchaseOrderDocumentNoSuffix" />
+          </a-form-item>
+          <a-form-item label="允许误差值">
+            <a-input v-model:value="wmsSettingDto.allowableErrorValue" />
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="快递设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="true">是</option>
-          <option value="false">否</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label>出库单是否允许物料编码重复</label>
-        <select
-          v-model="wmsSettingDto.allowInvNoRepeatOfStockOut"
-          class="form-control"
+          <a-form-item label="快递查询服务供应商">
+            <a-select v-model:value="wmsSettingDto.expressQueryProviderName" :options="isoption" />
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="4" tab="条码设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="true">是</option>
-          <option value="false">否</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label>APP显示图片</label>
-        <select
-          v-model="wmsSettingDto.showPictureOfApp"
-          class="form-control"
+          <a-form-item label="条码查询服务供应商">
+            <a-select v-model:value="wmsSettingDto.barCodeProviderName" :options="isoption2" />
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="5" tab="仓库设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="true">是</option>
-          <option value="false">否</option>
-        </select>
-      </div>
-    </div>
-
-    <div v-show="functionType == 6">
-      <div class="form-group">
-        <label>货位条码</label>
-        <select
-          v-model="wmsSettingDto.positionBarcodeGeneratorEnum"
-          class="form-control"
+          <a-form-item label="入库单是否允许物料编码重复">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn">
+              <a-select-option value="true">是</a-select-option>
+              <a-select-option value="false">否</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="出库单是否允许物料编码重复">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockOut">
+              <a-select-option value="true">是</a-select-option>
+              <a-select-option value="false">否</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="APP显示图片">
+            <a-select v-model:value="wmsSettingDto.allowInvNoRepeatOfStockIn">
+              <a-select-option value="true">是</a-select-option>
+              <a-select-option value="false">否</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="6" tab="货位设置">
+        <a-form
+          :label-col="{
+            width: '300px',
+          }"
+          layout="vertical"
           :disabled="isdisable"
         >
-          <option value="L_WAREHOUSE_NO_POSITION_NO">
-            L+仓库编号+货位编号
-          </option>
-          <option value="POSITION_NO">货位编号</option>
-          <option value="MANUAL">手工填入</option>
-        </select>
-      </div>
-      <!--测试快递单号查询:<input autocomplete="off" type="text" v-model="number">
-			<input autocomplete="off" type="button"  @click="save22()" placeholder="提交" />-->
-    </div>
-
-    <div
-      v-if="validateMessage && validateMessage.length > 0"
-      class="alert alert-info"
-      role="alert"
-    >
-      <button type="button" class="close" @click="validateMessage = ''">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      {{ validateMessage }}
-    </div>
-
-    <div class="row">
-      <div class="col-md-12">
-        <button class="btn btn-default" @click="changeIsdisabled()">
-          {{ isdisable ? "编辑" : "取消编辑" }}
-        </button>
-        <button
-          v-if="!isdisable"
-          class="btn btn-primary"
-          @click="saveWmsSetting()"
-        >
-          保存
-        </button>
-      </div>
+          <a-form-item label="货位条码">
+            <a-select v-model:value="wmsSettingDto.positionBarcodeGeneratorEnum">
+              <a-select-option value="L_WAREHOUSE_NO_POSITION_NO">L+仓库编号+货位编号</a-select-option>
+              <a-select-option value="POSITION_NO">货位编号</a-select-option>
+              <a-select-option value="MANUAL">手工填入</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </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>
     </div>
-
-    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import WmsValidateResource from '../api/wms/WmsValidateResource.js';
-import WmsSettingResource from '../api/common/WmsSettingResource.js';
-
-
-
 
 
 export default {
@@ -377,26 +186,6 @@ export default {
       _self.functionType = pageNo;
     },
 
-    //测试根据单号查询快递信息
-    /*save22 : function () {
-            var _self = this;
-            $.ajax({
-                url: Common.getApiURL('WmsSettingResource/getExpressStatus?number='+_self.number),
-                type: "get",
-                dataType: "json",
-                beforeSend: function(request) {
-                    Common.addTokenToRequest(request);
-                },
-
-                success: function(data) {
-                    console.log("查询结果"+data);
-                },
-                error: function(XMLHttpRequest, textStatus, errorThrown) {
-                    Common.processException(XMLHttpRequest, textStatus, errorThrown);
-                }
-            });
-        },*/
-
     /**
      * 获取仓库配置
      */
@@ -557,5 +346,9 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.card-container{
+  padding-left: 10px;
+  padding-right: 10px;
+}
 </style>

webpack.dev.js

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