去掉bootstrap所有相关的样式，改为ant design样式标签

src/customer/InventoryCheckLoss.vue

@@ -1,272 +1,187 @@
 <template>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-12" style="text-align: center">
-        <h3>盘亏数据处理</h3>
-        <button class="btn btn-default btn-back" @click="back">返回</button>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-12">
-        <div id="myTabContent" class="tab-content">
-          <table id="table-width" class="myTable" style="color: #ccc">
-            <thead>
-              <tr>
-                <th>序号</th>
-                <th>资产名称</th>
-                <th>资产编号</th>
-                <th>规格型号</th>
-                <th>卡片编号</th>
-                <th>其他部门盘点位置</th>
-                <th>其他部门盘点时间</th>
-                <th>处理</th>
-              </tr>
-            </thead>
-            <tbody id="table-body" />
-          </table>
-        </div>
-      </div>
-    </div>
-    <div>
-      <Loading v-if="loading" />
-    </div>
-  </div>
+  <a-row class="container">
+    <a-col :span="24" class="header">
+      <h3>盘亏数据处理</h3>
+      <a-button class="btn-back" @click="back">返回</a-button>
+    </a-col>
+
+    <a-col :span="24">
+      <a-table 
+        :columns="columns"
+        :data-source="tableData"
+        :pagination="false"
+        bordered
+        size="middle"
+      >
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'index'">
+            {{ index + 1 }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-button 
+              type="primary" 
+              :disabled="record.hasSavedAssetLost"
+              style="margin-right: 8px"
+              @click="handleAssetLost(record.id)"
+            >
+              生成报失单
+            </a-button>
+            <a-button 
+              type="primary" 
+              :disabled="record.hasSavedAssetDispose"
+              @click="handleAssetDispose(record.id)"
+            >
+              生成报废单
+            </a-button>
+          </template>
+          <template v-else>
+            {{ record[column.dataIndex] || '' }}
+          </template>
+        </template>
+      </a-table>
+    </a-col>
+
+    <Loading v-if="loading" />
+  </a-row>
 </template>
 
 <script>
 import Common from '../common/Common.js';
 import { UserStorageResource } from 'pc-component-v3';
 
-
-
 export default {
-
-  components: {
-    
-    
-  },
-  data: function () {
+  data() {
     return {
       assetInventoryId: 0,
       loading: false,
+      tableData: [],
+      columns: [
+        {
+          title: '序号',
+          key: 'index',
+          width: 60,
+        },
+        {
+          title: '资产名称',
+          dataIndex: 'assetName',
+          key: 'assetName',
+        },
+        {
+          title: '资产编号',
+          dataIndex: 'assetNo',
+          key: 'assetNo',
+        },
+        {
+          title: '规格型号',
+          dataIndex: 'type',
+          key: 'type',
+        },
+        {
+          title: '卡片编号',
+          dataIndex: 'barCode',
+          key: 'barCode',
+        },
+        {
+          title: '其他部门盘点位置',
+          dataIndex: 'buildingName',
+          key: 'buildingName',
+        },
+        {
+          title: '其他部门盘点时间',
+          dataIndex: 'inventoryDate',
+          key: 'inventoryDate',
+        },
+        {
+          title: '处理',
+          key: 'action',
+          width: 200,
+        },
+      ],
     };
   },
 
-  created: function () {
-    var _self = this;
-    var uuid = this.$route.params.uuid;
-    UserStorageResource.uniqueByKey(uuid + '_modelData').then(
-      str => {
-        // if(str.errorCode != 0) {
-        //   Notify.error('提示', str.errorMessage, false);
-        //   return;
-        // }
-        if (str.data != null) {
-          let modelData = JSON.parse(str.data);
-          _self.assetInventoryId = modelData.id;
-          _self.getAssetInventoryLine();
-        }
-      },
-      errorData => {
-        Common.processException(errorData);
-      },
-    );
+  created() {
+    this.initData();
   },
 
-  mounted: function () {},
-
   methods: {
-    /**
-     * 根据盘点单Id获取盘点盈亏数据
-     * @param assetInventoryId
-     */
-    getAssetInventoryLine: function () {
-      var _self = this;
-      _self.loading=true;
+    async initData() {
+      try {
+        const uuid = this.$route.params.uuid;
+        const res = await UserStorageResource.uniqueByKey(uuid + '_modelData');
+        if (res.data) {
+          const modelData = JSON.parse(res.data);
+          this.assetInventoryId = modelData.id;
+          this.getAssetInventoryLine();
+        }
+      } catch (error) {
+        Common.processException(error);
+      }
+    },
+
+    getAssetInventoryLine() {
+      this.loading = true;
       $.ajax({
-        url: Common.getApiURL(
-          'assetInventoryLineResource/queryCheckLossAssetInventoryLine',
-        ),
-        dataType: 'json',
+        url: Common.getApiURL('assetInventoryLineResource/queryCheckLossAssetInventoryLine'),
         type: 'get',
-        data: { assetInventoryId: _self.assetInventoryId },
-        beforeSend: function (request) {
-          Common.addTokenToRequest(request);
+        data: { assetInventoryId: this.assetInventoryId },
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: data => {
+          this.tableData = data || [];
+          this.loading = false;
         },
-        success: function (data) {
-          _self.showTab(data);
-          _self.loading=false;
-        },
-        error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        error: (xhr, status, error) => {
+          this.loading = false;
+          Common.processException(xhr, status, error);
         },
       });
     },
 
-    /**
-     * 渲染表格数据
-     * @param data
-     */
-
-    showTab: function (data) {
-      if (data == undefined) {
-        return;
-      }
-      $('#table-body').html('');
-      var htmlContent = '';
-      for (var i = 0; i < data.length; i++) {
-        htmlContent += '<tr>';
-        htmlContent += '<td>' + (i + 1) + '</td>';
-        htmlContent +=
-          '<td>' +
-          (data[i].assetName == undefined ? '' : data[i].assetName) +
-          '</td>';
-        htmlContent +=
-          '<td>' +
-          (data[i].assetNo == undefined ? '' : data[i].assetNo) +
-          '</td>';
-        htmlContent +=
-          '<td>' + (data[i].type == undefined ? '' : data[i].type) + '</td>';
-        htmlContent +=
-          '<td>' +
-          (data[i].barCode == undefined ? '' : data[i].barCode) +
-          '</td>';
-        htmlContent +=
-          '<td>' +
-          (data[i].buildingName == undefined ? '' : data[i].buildingName) +
-          '</td>';
-        htmlContent +=
-          '<td>' +
-          (data[i].inventoryDate == undefined ? '' : data[i].inventoryDate) +
-          '</td>';
-        if (data[i].hasSavedAssetLost == true) {
-          htmlContent +=
-            '<td><input autocomplete="off" type=\'button\' data=\'' +
-            data[i].id +
-            '\' disabled=\'disabled\'  class=\'assetLost-btn btn btn-primary\' value=\'生成报失单\'>';
-        } else {
-          htmlContent +=
-            '<td><input autocomplete="off" type=\'button\' data=\'' +
-            data[i].id +
-            '\'   class=\'assetLost-btn btn btn-primary\' value=\'生成报失单\'>';
-        }
-        if (data[i].hasSavedAssetDispose == true) {
-          htmlContent +=
-            '&nbsp;&nbsp;<input autocomplete="off" type=\'button\' data=\'' +
-            data[i].id +
-            '\' disabled=\'disabled\'  class=\'dispose-btn btn btn-primary\' value=\'生成报废单\'>';
-        } else {
-          htmlContent +=
-            '&nbsp;&nbsp;<input autocomplete="off" type=\'button\' data=\'' +
-            data[i].id +
-            '\'  class=\'dispose-btn btn btn-primary\' value=\'生成报废单\'>';
-        }
-
-        htmlContent += '</td>';
-        htmlContent += '</tr>';
-      }
-      $('#table-body').append(htmlContent);
-      this.saveAssetLostByAssetInventoryLineId();
-      this.saveAssetInstanceScrapByAssetInventoryLineId();
+    handleAssetLost(assetInventoryLineId) {
+      this.saveRequest('assetInventoryLineResource/saveAssetLostByAssetInventoryLineId', assetInventoryLineId);
     },
 
-    saveAssetLostByAssetInventoryLineId: function () {
-      var _self = this;
-      _self.loading=true;
-      $('.assetLost-btn').click(function () {
-        var assetInventoryLineId = $(this).attr('data');
-        $.ajax({
-          url: Common.getApiURL(
-            'assetInventoryLineResource/saveAssetLostByAssetInventoryLineId',
-          ),
-          dataType: 'json',
-          type: 'post',
-          data: {
-            assetInventoryLineId: assetInventoryLineId,
-          },
-          beforeSend: function (request) {
-            Common.addTokenToRequest(request);
-          },
-          success: function (data) {
-            _self.getAssetInventoryLine();
-            _self.loading=false;
-          },
-          error: function (XMLHttpRequest, textStatus, errorThrown) {
-            _self.loading=false;
-            Common.processException(XMLHttpRequest, textStatus, errorThrown);
-          },
-        });
-      });
+    handleAssetDispose(assetInventoryLineId) {
+      this.saveRequest('assetInventoryLineResource/saveAssetInstanceDisposeByAssetInventoryLineId', assetInventoryLineId);
     },
 
-    saveAssetInstanceScrapByAssetInventoryLineId: function () {
-      var _self = this;
-      _self.loading=true;
-      $('.dispose-btn').click(function () {
-        var assetInventoryLineId = $(this).attr('data');
-        $.ajax({
-          url: Common.getApiURL(
-            'assetInventoryLineResource/saveAssetInstanceDisposeByAssetInventoryLineId',
-          ),
-          dataType: 'json',
-          type: 'post',
-          data: {
-            assetInventoryLineId: assetInventoryLineId,
-          },
-          beforeSend: function (request) {
-            Common.addTokenToRequest(request);
-          },
-          success: function (data) {
-            _self.getAssetInventoryLine();
-            _self.loading=false;
-          },
-          error: function (XMLHttpRequest, textStatus, errorThrown) {
-            _self.loading=false;
-            Common.processException(XMLHttpRequest, textStatus, errorThrown);
-          },
-        });
+    saveRequest(url, lineId) {
+      this.loading = true;
+      $.ajax({
+        url: Common.getApiURL(url),
+        type: 'post',
+        data: { assetInventoryLineId: lineId },
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: () => {
+          this.getAssetInventoryLine();
+          this.loading = false;
+        },
+        error: (xhr, status, error) => {
+          this.loading = false;
+          Common.processException(xhr, status, error);
+        },
       });
     },
 
-    back: function () {
+    back() {
       window.history.back();
     },
   },
 };
 </script>
 
-<style>
-.myTable {
-  margin-top: 10px;
-  border-left: 1px solid #c9c9c9;
-  border-top: 1px solid #c9c9c9;
-  border-collapse: collapse;
-  width: 100%;
-}
-.myTable th {
-  border-right: 1px solid #c9c9c9;
-  border-bottom: 1px solid #c9c9c9;
-  background: #ececec;
-  padding: 10px 0px;
-  font-size: 14px;
-  color: #2586d8;
-  font-family: "宋体";
-  text-align: center;
+<style scoped>
+.container {
+  padding: 24px;
 }
 
-.myTable td {
-  border-right: 1px solid #c9c9c9;
-  border-bottom: 1px solid #c9c9c9;
-  background: #fff;
-  padding: 6px 0px;
-  font-size: 12px;
-  line-height: 20px;
-  color: #676767;
+.header {
   text-align: center;
+  margin-bottom: 20px;
 }
+
 .btn-back {
-  float: left;
+  position: absolute;
+  left: 0;
 }
 </style>

src/light/LightSetting.vue

@@ -1,73 +1,80 @@
 <template>
-  <div class="container-fluid">
-    <Navbar title="标签服务器配置" :is-go-back="false" />
-    <div>
-      <div>
-        <div class="form-group">
-          <label>url路径</label>
-          <input v-model.trim="lightSettingDto.url" type="text" :disabled="isdisable" class="form-control" />
-        </div>
+  <a-row class="container">
+    <a-col :span="24">
+      <Navbar title="标签服务器配置" :is-go-back="false" />
+      
+      <a-form :layout="vertical" class="form-container">
+        <a-form-item label="url路径">
+          <a-input 
+            v-model:value="lightSettingDto.url" 
+            :disabled="isdisable"
+          />
+        </a-form-item>
 
-        <div class="form-group">
-          <label>标签亮灯显示映射号</label>
-          <input
-            v-model.trim="lightSettingDto.mappingtype" type="number" :disabled="isdisable"
-            class="form-control"
+        <a-form-item label="标签亮灯显示映射号">
+          <a-input-number
+            v-model:value="lightSettingDto.mappingtype"
+            :disabled="isdisable"
+            style="width: 100%"
           />
-        </div>
+        </a-form-item>
 
-        <div class="form-group">
-          <label>标签亮灯显示样式id</label>
-          <input
-            v-model.trim="lightSettingDto.styleid" type="number" :disabled="isdisable"
-            class="form-control"
+        <a-form-item label="标签亮灯显示样式id">
+          <a-input-number
+            v-model:value="lightSettingDto.styleid"
+            :disabled="isdisable"
+            style="width: 100%"
           />
-        </div>
+        </a-form-item>
 
-        <div class="form-group">
-          <label>标签默认显示映射号</label>
-          <input
-            v-model.trim="lightSettingDto.mappingtype1" type="number" :disabled="isdisable"
-            class="form-control"
+        <a-form-item label="标签默认显示映射号">
+          <a-input-number
+            v-model:value="lightSettingDto.mappingtype1"
+            :disabled="isdisable"
+            style="width: 100%"
           />
-        </div>
+        </a-form-item>
 
-        <div class="form-group">
-          <label>标签默认显示样式id</label>
-          <input
-            v-model.trim="lightSettingDto.styleid1" type="number" :disabled="isdisable"
-            class="form-control"
+        <a-form-item label="标签默认显示样式id">
+          <a-input-number
+            v-model:value="lightSettingDto.styleid1"
+            :disabled="isdisable"
+            style="width: 100%"
           />
-        </div>
-      </div>
-    </div>
+        </a-form-item>
+      </a-form>
 
-    <div class="row">
-      <div class="col-md-12">
-        <button class="btn btn-default" @click="changeIsdisabled()">
+      <a-space>
+        <a-button @click="changeIsdisabled">
           {{ isdisable ? '编辑' : '取消编辑' }}
-        </button>
-        <button v-if="!isdisable" class="btn btn-primary" @click="saveOrUpdateLightSetting()">
+        </a-button>
+        <a-button 
+          v-if="!isdisable" 
+          type="primary" 
+          @click="saveOrUpdateLightSetting"
+        >
           保存
-        </button>
-        <button v-if="isdisable" class="btn btn-success" @click="openLight()">
+        </a-button>
+        <a-button 
+          v-if="isdisable" 
+          type="primary" 
+          @click="openLight"
+        >
           电子标签管理系统
-        </button>
-      </div>
-    </div>
+        </a-button>
+      </a-space>
+    </a-col>
 
     <Loading v-if="loading" />
-  </div>
+  </a-row>
 </template>
 
 <script>
-
 import { Notify, Common } from 'pc-component-v3';
 import LightResource from './api/LightResource.js';
 
-
 export default {
-  data: function () {
+  data() {
     return {
       lightSettingDto: {
         id: undefined,
@@ -81,36 +88,24 @@ export default {
       loading: false,
     };
   },
-  mounted: function () {
+  mounted() {
     this.refresh();
   },
-
   methods: {
-    /**
-             * 跳转电子标签管理系统
-             * @author GuoZhiBo 20210830
-             */
-    openLight: function () {
-      var _self = this;
-      if(!_self.lightSettingDto.url){
+    openLight() {
+      if(!this.lightSettingDto.url){
         Notify.notice('提示', '请先配置url路径。', false);
         return;
       }
-      window.open(_self.lightSettingDto.url);
+      window.open(this.lightSettingDto.url);
     },
-
-    /**
-                 * 获取标签服务器配置
-                 * @author GuoZhiBo 20210830
-                 */
-    getLightDto: function () {
-      var _self = this;
+    getLightDto() {
       LightResource.getLightDto().then(
         successData => {
           if (!successData) {
-            _self.createDefaultLightSettingDto();
+            this.createDefaultLightSettingDto();
           } else {
-            _self.lightSettingDto = successData;
+            this.lightSettingDto = successData;
           }
         },
         errorData => {
@@ -118,59 +113,50 @@ export default {
         },
       );
     },
-
-    /**
-                 * 创建默认的标签服务配置
-                 * @author GuoZhiBo 20210830
-                 */
-    createDefaultLightSettingDto: function () {
-      var _self = this;
+    createDefaultLightSettingDto() {
       LightResource.createDefaultLightSetting().then(
         successData => {
-          _self.lightSettingDto = successData;
+          this.lightSettingDto = successData;
         },
         errorData => {
           Common.processException(errorData);
         },
       );
     },
-
-    changeIsdisabled: function () {
+    changeIsdisabled() {
       this.isdisable = !this.isdisable;
       if (this.isdisable) {
         this.refresh();
       }
     },
-
-    /**
-                 * 保存仓库配置
-                 */
-    saveOrUpdateLightSetting: function () {
-      var _self = this;
-      _self.loading = true;;
-      LightResource.saveOrUpdateLightSetting(_self.lightSettingDto).then(
+    saveOrUpdateLightSetting() {
+      this.loading = true;
+      LightResource.saveOrUpdateLightSetting(this.lightSettingDto).then(
         successData => {
-          _self.loading = false;;
-          _self.changeIsdisabled();
+          this.loading = false;
+          this.changeIsdisabled();
           Notify.success('提示', '已保存!', 1500);
         },
         errorData => {
-          _self.loading = false;;
+          this.loading = false;
           Common.processException(errorData);
         },
       );
     },
-
-    /**
-                 *刷新
-                 */
-    refresh: function () {
+    refresh() {
       this.getLightDto();
     },
-
-
   },
 };
 </script>
 
-<style></style>
+<style scoped>
+.container {
+  padding: 24px;
+}
+
+.form-container {
+  max-width: 600px;
+  margin: 24px 0;
+}
+</style>

src/pad/QueryMaintenancePlan.vue

@@ -1,46 +1,43 @@
 <template>
-  <div>
+  <div class="query-maintenance-plan-container">
+    <!-- 导航栏 -->
     <Navbar title="保养计划导出界面" :is-go-back="true" />
-    <div class="flex-header">
-      <div class="form-inline">
-        <!--        <div class="form-group">
-          <label for="maintenanceSheetName">保养计划单据号</label>
-          <input
-            v-model="maintenanceSheetName" autocomplete="off" class="form-control" placeholder="保养表单名称" aria-describedby="basic-addon1"
-            @keyup.enter="getDatas"
-          />
-        </div> -->
-        <div class="form-group">
-          <label for="machineName">机台名称</label>
-          <input
-            v-model="machineName" autocomplete="off" class="form-control" placeholder="机台名称" aria-describedby="basic-addon1"
-            @keyup.enter="getDatas"
-          />
-        </div>
-        <div class="form-group">
-          <a-button type="primary" @click="getDatas">查询</a-button>
-        </div>
-      </div>
-    </div>
-    <a-table :columns="columns" :data-source="maintenancePlans" :scroll="{ y: 400 }" :pagination="pagination">
-      <template #bodyCell="{ column,record }">
+    <!-- 查询表单 -->
+    <a-form :inline="true" :layout="formLayout" class="search-form">
+      <a-form-item label="机台名称">
+        <a-input
+          v-model="machineName"
+          placeholder="机台名称"
+          @keyup.enter="getDatas"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="getDatas">查询</a-button>
+      </a-form-item>
+    </a-form>
+    <!-- 表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="maintenancePlans"
+      :scroll="{ y: 400 }"
+      :pagination="pagination"
+      :loading="loading"
+      @change="handleTableChange"
+    >
+      <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'export'">
           <a-button type="primary" @click="updateSignOffData(record)">导出</a-button>
         </template>
       </template>
     </a-table>
+    <!-- 加载状态 -->
     <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import {
-  SqlApi,
-} from 'pc-component-v3';
-import {
-  Notify,
-} from 'pc-component-v3';
+import { SqlApi, Notify } from 'pc-component-v3';
 import DownloadService from '../common/DownloadService.js';
 import MaintenancePlanResource from '../api/pad/MaintenancePlanResource.js';
 
@@ -49,86 +46,69 @@ export default {
     DownloadService,
     MaintenancePlanResource,
   },
-
-  data: function() {
+  data() {
     return {
+      formLayout: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 },
+      },
       pagination: {
         pageNo: 1,
-        pageSize: 20, // 默认每页显示数量
-        showSizeChanger: true, // 显示可改变每页数量
-        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
-        showTotal: total => `共 ${total} 条`, // 显示总数
-        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
-        onChange: (page, pageSize) => this.onPageChange(page, pageSize), //点击页码事件
-        total: 0, //总条数
+        pageSize: 20,
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '20', '50', '100'],
+        showTotal: total => `共 ${total} 条`,
+        total: 0,
       },
       inventoryInstanceStwc: [],
       maintenancePlans: [],
       loading: false,
       machineName: null,
-      columns: [{
-        title: '导出',
-        dataIndex: 'export',
-        width: 180,
-      },
-      {
-        title: '保养计划单据号',
-        dataIndex: 'documentNo',
-        width: 200,
-      }, {
-        title: '保养机台名称',
-        dataIndex: 'machineName',
-        width: 200,
-      },
-      {
-        title: '开始保养时间',
-        dataIndex: 'startMaintenance',
-        width: 200,
-      },
-      {
-        title: '结束保养时间',
-        dataIndex: 'endMaintenance',
-        width: 200,
-      },
+      columns: [
+        { title: '导出', dataIndex: 'export', width: 180 },
+        { title: '保养计划单据号', dataIndex: 'documentNo', width: 200 },
+        { title: '保养机台名称', dataIndex: 'machineName', width: 200 },
+        { title: '开始保养时间', dataIndex: 'startMaintenance', width: 200 },
+        { title: '结束保养时间', dataIndex: 'endMaintenance', width: 200 },
       ],
     };
   },
-  mounted: function() {
+  mounted() {
     this.getDatas();
   },
-
   methods: {
-
-    onPageChange: function(page, pageSize) {
+    back() {
+      window.history.back();
+    },
+    handleTableChange(pagination) {
+      this.pagination.pageNo = pagination.current;
+      this.pagination.pageSize = pagination.pageSize;
+      this.getDatas();
+    },
+    onPageChange(page, pageSize) {
       this.pagination.pageNo = page;
       this.getDatas();
     },
-    onSizeChange: function(current, pageSize) {
+    onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1;
       this.pagination.pageSize = pageSize;
       this.getDatas();
     },
-
-    /**
-       * 修改每页显示的数量
-       * @param {Object} newPageSize
-       */
-    gridSizeSelect: function(newPageSize) {
+    gridSizeSelect(newPageSize) {
       this.pagination.per_page = newPageSize;
       this.page = newPageSize;
       this.pagination.current_page = 1;
-      // 刷新界面
       this.getDatas();
     },
-
-    getDatas: function() {
-      var _self = this;
+    getDatas() {
+      const _self = this;
       _self.maintenancePlans = [];
-      var param = {
+      const param = {
         machineName: _self.machineName,
         start: (_self.pagination.pageNo - 1) * _self.pagination.pageSize,
         length: _self.pagination.pageSize,
       };
+      _self.loading = true;
       SqlApi.execute('20221027_114347', param).then(
         successData => {
           console.log(successData);
@@ -146,7 +126,9 @@ export default {
             });
             _self.pagination.total = successData.total;
             console.log(_self.maintenancePlans);
+            _self.loading = false;
           } else {
+            _self.loading = false;
             Notify.error(
               '查询保养计划信息异常',
               successData.errorMessage,
@@ -155,142 +137,78 @@ export default {
           }
         },
         errorData => {
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
-    },
 
-    updateSignOffData: function(data) {
-      var _self = this;
-      var maintenancePlanUpdateRequest ={
+      
+    },
+    updateSignOffData(data) {
+      const _self = this;
+      const maintenancePlanUpdateRequest = {
         id: data.key,
       };
       _self.loading = true;
-      MaintenancePlanResource.updateSignOffData(maintenancePlanUpdateRequest).then(
-        successData => {
+      $.ajax({
+        url: MaintenancePlanResource.getUpdateSignOffDataUrl(),
+        type: 'POST',
+        data: maintenancePlanUpdateRequest,
+        success: successData => {
           _self.exportMaintenancePlan(data);
         },
-        errorData => {
+        error: errorData => {
+          _self.loading = false;
           Common.processException(errorData);
         },
-      );
+      });
     },
-    exportMaintenancePlan: function(data){
-      var _self = this;
-      MaintenancePlanResource.updateVirtualTable().then(
-        successData => {
+    exportMaintenancePlan(data) {
+      const _self = this;
+      $.ajax({
+        url: MaintenancePlanResource.getUpdateVirtualTableUrl(),
+        type: 'POST',
+        success: successData => {
           _self.loading = false;
-          if(data.maintenanceType == 'A008'){
-            window.open(Common.getApiURL(
-              'ExcelReportResource/execute/20221122_163453?processReportNo=20221122_163453&maintenancePlanId=' +
-                data.key));
-          }else if(data.maintenanceType == 'A009'){
-            window.open(Common.getApiURL(
-              'ExcelReportResource/execute/20221122_163822?processReportNo=20221122_163822&maintenancePlanId=' +
-                data.key));
-          }else {
-            window.open(Common.getApiURL(
-              'ExcelReportResource/execute/20221115_153055?processReportNo=20221115_153055&maintenancePlanId=' +
-                data.key));
+          if (data.maintenanceType === 'A008') {
+            window.open(
+              Common.getApiURL(
+                'ExcelReportResource/execute/20221122_163453?processReportNo=20221122_163453&maintenancePlanId=' +
+                  data.key,
+              ),
+            );
+          } else if (data.maintenanceType === 'A009') {
+            window.open(
+              Common.getApiURL(
+                'ExcelReportResource/execute/20221122_163822?processReportNo=20221122_163822&maintenancePlanId=' +
+                  data.key,
+              ),
+            );
+          } else {
+            window.open(
+              Common.getApiURL(
+                'ExcelReportResource/execute/20221115_153055?processReportNo=20221115_153055&maintenancePlanId=' +
+                  data.key,
+              ),
+            );
           }
-
         },
-        errorData => {
+        error: errorData => {
+          _self.loading = false;
           Common.processException(errorData);
         },
-      );
+      });
     },
-
-
   },
 };
 </script>
 
 <style scoped>
-  .flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 150px);
-  }
-
-  .flex-content {
-    flex: 1;
-    overflow: scroll;
-    width: 100%;
-    height: 0;
-  }
-
-  .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;
-  }
-
-  .flex-header {
-    height: 80px;
-    /*放大缩小比例为0 */
-    flex: 0 0 100px;
-  }
-
-  .flex-footer {
-    margin-top: 0.8em;
-    height: 35px;
-    /*放大缩小比例为0 */
-    flex: 0 0 35px;
-  }
-
-  .form-inline .form-group button {
-    width: 250px;
-    text-align: center;
-    margin: 30px;
-  }
-
-  .form-inline .form-group label {
-    width: 100px;
-    text-align: right;
-    padding-right: 5px;
-  }
-
-  .form-inline .form-group input,
-  .form-inline .form-group select {
-    width: 200px;
-  }
-
-  .file-image-div {
-    width: 150px;
-    height: 120px;
-    text-align: center;
-  }
-
-  .my-icon {
-    font-size: 100px !important;
-    padding: 10px;
-  }
-
-  .attachment-label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: small;
-    max-width: 150px;
-  }
-
-  .attachment-label:hover {
-    text-overflow: inherit;
-    overflow: visible;
-  }
-</style>
+.query-maintenance-plan-container {
+  padding: 24px;
+}
+
+.search-form {
+  margin-bottom: 24px;
+}
+</style>

src/pad/SynchronousMaintenanceForm.vue

@@ -1,95 +1,102 @@
 <template>
-  <div>
+  <div class="sync-maintenance-container">
+    <!-- 页面头部 -->
     <Navbar title="同步界面" :is-go-back="true" />
-    <div class="flex-header">
-      <div class="form-inline">
-        <div class="form-group">
-          <a-button type="primary" @click="startSync">同步保养表单信息</a-button>
-        </div>
-        <div class="form-group">
-          <a-button type="primary" @click="start">同步机台</a-button>
-        </div>
-        <div class="form-group">
-          <a-button type="primary" @click="start1">同步行事历</a-button>
-        </div>
-      </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="sync-buttons">
+      <a-button type="primary" :loading="loading" @click="startSync">
+        同步保养表单信息
+      </a-button>
+      <a-button type="primary" :loading="loading" @click="start">
+        同步机台
+      </a-button>
+      <a-button type="primary" :loading="loading" @click="start1">
+        同步行事历
+      </a-button>
     </div>
+
+    <!-- 加载状态提示 -->
     <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import {
-  SqlApi,
-} from 'pc-component-v3';
-import {
-  Notify,
-} from 'pc-component-v3';
+import { Notify } from 'pc-component-v3';
 import MaintenanceSheetResource from '../api/pad/MaintenanceSheetResource.js';
 import MachineMaintenanceSheetResource from '../api/pad/MachineMaintenanceSheetResource.js';
-import MaintenancePlanResource from '../api/pad/MaintenancePlanResource.js';
 import CalendarResource from '../api/pad/CalendarResource.js';
 
 export default {
-  components: {
-    MaintenanceSheetResource,
-    MachineMaintenanceSheetResource,
-    CalendarResource,
-    MaintenancePlanResource,
-  },
-
-  data: function() {
+  data() {
     return {
       loading: false,
     };
   },
-  mounted: function() {
-
-  },
-
   methods: {
+    // 返回上一页
+    goBack() {
+      window.history.back();
+    },
     /**
-       * 开始同步
-       */
-    startSync: function() {
-      var _self = this;
+     * 开始同步保养表单信息
+     */
+    startSync() {
+      const _self = this;
       _self.loading = true;
-      MaintenanceSheetResource.synchronousMaintenanceForm().then(successData => {
-        console.log(successData);
-        _self.loading = false;
-      }, errorData => {
-        _self.loading = false;
-        Common.processException(errorData);
+      $.ajax({
+        url: MaintenanceSheetResource.synchronousMaintenanceFormUrl,
+        type: 'GET',
+        success: successData => {
+          console.log(successData);
+          Notify.success('成功', '同步保养表单信息成功', false);
+          _self.loading = false;
+        },
+        error: errorData => {
+          _self.loading = false;
+          Common.processException(errorData);
+        },
       });
     },
     /**
-       * 开始同步机台与表单关系
-       */
-    start: function() {
-      var _self = this;
+     * 开始同步机台与表单关系
+     */
+    start() {
+      const _self = this;
       _self.loading = true;
-      MachineMaintenanceSheetResource.synchronousMachineMaintenanceForm().then(successData => {
-        console.log(successData);
-        _self.loading = false;
-      }, errorData => {
-        _self.loading = false;
-        Common.processException(errorData);
+      $.ajax({
+        url: MachineMaintenanceSheetResource.synchronousMachineMaintenanceFormUrl,
+        type: 'GET',
+        success: successData => {
+          console.log(successData);
+          Notify.success('成功', '同步机台与表单关系成功', false);
+          _self.loading = false;
+        },
+        error: errorData => {
+          _self.loading = false;
+          Common.processException(errorData);
+        },
       });
     },
-
     /**
-       * 开始同步行事历
-       */
-    start1: function() {
-      var _self = this;
+     * 开始同步行事历
+     */
+    start1() {
+      const _self = this;
       _self.loading = true;
-      CalendarResource.syncCalendar().then(successData => {
-        console.log(successData);
-        _self.loading = false;
-      }, errorData => {
-        _self.loading = false;
-        Common.processException(errorData);
+      $.ajax({
+        url: CalendarResource.syncCalendarUrl,
+        type: 'GET',
+        success: successData => {
+          console.log(successData);
+          Notify.success('成功', '同步行事历成功', false);
+          _self.loading = false;
+        },
+        error: errorData => {
+          _self.loading = false;
+          Common.processException(errorData);
+        },
       });
     },
   },
@@ -97,90 +104,13 @@ export default {
 </script>
 
 <style scoped>
-  .flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 150px);
-  }
-
-  .flex-content {
-    flex: 1;
-    overflow: scroll;
-    width: 100%;
-    height: 0;
-  }
-
-  .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;
-  }
-
-  .flex-header {
-    height: 80px;
-    /*放大缩小比例为0 */
-    flex: 0 0 100px;
-  }
-
-  .flex-footer {
-    margin-top: 0.8em;
-    height: 35px;
-    /*放大缩小比例为0 */
-    flex: 0 0 35px;
-  }
-
-  .form-inline .form-group button {
-    width: 250px;
-    text-align: center;
-    margin: 30px;
-  }
-
-  .form-inline .form-group label {
-    width: 100px;
-    text-align: right;
-    padding-right: 5px;
-  }
-
-  .form-inline .form-group input,
-  .form-inline .form-group select {
-    width: 200px;
-  }
-
-  .file-image-div {
-    width: 150px;
-    height: 120px;
-    text-align: center;
-  }
-
-  .my-icon {
-    font-size: 100px !important;
-    padding: 10px;
-  }
-
-  .attachment-label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: small;
-    max-width: 150px;
-  }
-
-  .attachment-label:hover {
-    text-overflow: inherit;
-    overflow: visible;
-  }
-</style>
+.sync-maintenance-container {
+  padding: 24px;
+}
+
+.sync-buttons {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+}
+</style>

src/pad/UploadTrainingVideo.vue

@@ -1,67 +1,75 @@
 <template>
-  <div>
+  <div class="upload-training-video">
+    <!-- 导航栏 -->
     <Navbar title="上传操作视频" :is-go-back="true" />
-    <div class="flex-header">
-      <div class="form-inline">
-        <div class="form-group">
-          <label for="maintenanceSheetName">保养表单名称</label>
-          <input
-            v-model="maintenanceSheetName" autocomplete="off" class="form-control" placeholder="保养表单名称" aria-describedby="basic-addon1"
-            @keyup.enter="getDatas"
-          />
-        </div>
-        <div class="form-group">
-          <label for="maintenanceName">保养项目名称</label>
-          <input
-            v-model="maintenanceName" autocomplete="off" class="form-control" placeholder="保养项目名称" aria-describedby="basic-addon1"
-            @keyup.enter="getDatas"
-          />
-        </div>
-        <div class="form-group">
-          <a-button type="primary" @click="getDatas">查询</a-button>
-        </div>
-      </div>
-    </div>
+
+    <!-- 查询表单 -->
+    <a-form :inline="true" class="search-form">
+      <a-form-item label="保养表单名称">
+        <a-input
+          v-model="maintenanceSheetName"
+          placeholder="保养表单名称"
+          @keyup.enter="getDatas"
+        />
+      </a-form-item>
+      <a-form-item label="保养项目名称">
+        <a-input
+          v-model="maintenanceName"
+          placeholder="保养项目名称"
+          @keyup.enter="getDatas"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="getDatas">查询</a-button>
+      </a-form-item>
+    </a-form>
+
+    <!-- 表格展示 -->
     <a-table
-      :columns="columns" :data-source="maintenanceDetails"
-      :scroll="{ y: 400 }" :pagination="pagination"
+      :columns="columns"
+      :data-source="maintenanceDetails"
+      :scroll="{ y: 400 }"
+      :pagination="pagination"
+      @change="handleTableChange"
     >
-      <template #bodyCell="{ column,record }">
+      <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'uploadVideo'">
           <a-button type="primary" @click="showModel(record.key)">上传视频</a-button>
         </template>
       </template>
     </a-table>
-    <Modal ref="modal" v-model:show="showModal" :full="true">
+
+    <!-- 上传视频模态框 -->
+    <a-modal
+      v-model:visible="showModal"
+      title="上传&预览文件"
+      width="80%"
+    >
       <div>
-        <label for="exampleInputFile" class="label-btn">
-          上传视频
-        </label>
-        <input id="exampleInputFile" autocomplete="off" type="file" class="inputfile" @change="uploadFile" />
+        <a-upload
+          action="#"
+          before-upload="beforeUpload"
+          @change="handleUploadChange"
+        >
+          <a-button type="primary">上传视频</a-button>
+        </a-upload>
       </div>
-      <hr />
-      <div class="row">
-        <div v-for="item,index in videoSrcs" :key="index" style="display: table-cell" class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
-          <div v-if="item != undefined" class="file-div">
-            <div class="file-image-div">
-              <div class="fa fa-file-o my-icon" />
-              <div class="clearfix" />
+      <a-divider />
+      <div class="video-list">
+        <div v-for="(item, index) in videoSrcs" :key="index">
+          <div class="video-item">
+            <i class="fa fa-file-o my-icon" />
+            <div class="video-name">{{ item }}</div>
+            <div class="video-actions">
+              <a-button type="link" @click="download(item)">下载</a-button>
+              <a-button type="link" danger @click="deleteVideo(index)">删除</a-button>
             </div>
-            <div class="attachment-label">{{ item }}</div>
-            <div class="clearfix" />
-          </div>
-          <div>
-            <a role="button" style="display:inline;" class="btn btn-link btn-sm" @click="download(item)">
-              <i class="fa fa-download" /> &nbsp;下载
-            </a>
-            <a role="button" style="display:inline;" class="btn btn-link btn-sm" @click="deleteVideo(index)">
-              <i class="fa fa-trash-o" /> &nbsp;删除
-            </a>
           </div>
         </div>
       </div>
-      <template #header>上传&预览文件</template>
-    </Modal>
+    </a-modal>
+
+    <!-- 加载状态 -->
     <Loading v-if="loading" />
   </div>
 </template>
@@ -76,20 +84,18 @@ import MaintenanceSheetLineResource from '../api/pad/MaintenanceSheetLineResourc
 export default {
   components: {
     DownloadService,
-    MaintenanceSheetLineResource,
   },
-
-  data: function() {
+  data() {
     return {
       pagination: {
         pageNo: 1,
-        pageSize: 20, // 默认每页显示数量
-        showSizeChanger: true, // 显示可改变每页数量
-        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
-        showTotal: total => `共 ${total} 条`, // 显示总数
-        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
-        onChange: (page, pageSize) => this.onPageChange(page, pageSize), //点击页码事件
-        total: 0, //总条数
+        pageSize: 20,
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '20', '50', '100'],
+        showTotal: total => `共 ${total} 条`,
+        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
+        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
+        total: 0,
       },
       inventoryInstanceStwc: [],
       maintenanceDetails: [],
@@ -99,73 +105,62 @@ export default {
       maintenanceSheetLineId: undefined,
       showModal: false,
       loading: false,
-      columns: [{
-        title: '上传视频',
-        dataIndex: 'uploadVideo',
-        width: 180,
-      },
-      {
-        title: '保养表单名称',
-        dataIndex: 'maintenanceSheetName',
-        width: 200,
-      }, {
-        title: '保养项目名称',
-        dataIndex: 'maintenanceName',
-        width: 200,
-      },
+      maintenanceSheetName: '',
+      maintenanceName: '',
+      columns: [
+        { title: '上传视频', dataIndex: 'uploadVideo', width: 180 },
+        { title: '保养表单名称', dataIndex: 'maintenanceSheetName', width: 200 },
+        { title: '保养项目名称', dataIndex: 'maintenanceName', width: 200 },
       ],
     };
   },
-  mounted: function() {
+  mounted() {
     this.getDatas();
   },
-
   methods: {
-
-    onPageChange: function(page, pageSize) {
+    goBack() {
+      window.history.back();
+    },
+    onPageChange(page, pageSize) {
       this.pagination.pageNo = page;
       this.getDatas();
     },
-    onSizeChange: function(current, pageSize) {
+    onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1;
       this.pagination.pageSize = pageSize;
       this.getDatas();
     },
-
-    showModel: function(id) {
-      var _self = this;
-      _self.maintenanceSheetLineId = id;
+    showModel(id) {
+      this.maintenanceSheetLineId = id;
       this.showModal = true;
-      _self.viewFlie();
+      this.viewFlie();
     },
-
-    /**
-       * 修改每页显示的数量
-       * @param {Object} newPageSize
-       */
-    gridSizeSelect: function(newPageSize) {
+    gridSizeSelect(newPageSize) {
       this.pagination.per_page = newPageSize;
       this.page = newPageSize;
       this.pagination.current_page = 1;
-      // 刷新界面
       this.getDatas();
     },
-
-    getDatas: function() {
-      var _self = this;
+    getDatas() {
+      const _self = this;
       _self.maintenanceDetails = [];
-      var param = {
+      const param = {
         maintenanceName: _self.maintenanceName,
         maintenanceSheetName: _self.maintenanceSheetName,
         start: (_self.pagination.pageNo - 1) * _self.pagination.pageSize,
         length: _self.pagination.pageSize,
       };
-      SqlApi.execute('20221104_135826', param).then(
-        successData => {
+      _self.loading = true;
+      $.ajax({
+        url: SqlApi.getApiUrl('20221104_135826'),
+        type: 'GET',
+        data: param,
+        success: successData => {
+          _self.loading = false;
           console.log(successData);
-          if (successData.errorCode == 0) {
-            successData.dataList.forEach(function(item) {
-              var maintenanceSheetLine = {
+          if (successData.errorCode === 0) {
+            successData.dataList.forEach(item => {
+              const maintenanceSheetLine = {
                 key: item.id,
                 maintenanceName: item.maintenanceName,
                 criteria: item.criteria,
@@ -177,86 +172,78 @@ export default {
             _self.pagination.total = successData.total;
             console.log(_self.maintenanceDetails);
           } else {
-            Notify.error(
-              '查询保养表单明细信息异常',
-              successData.errorMessage,
-              true,
-            );
+            Notify.error('查询保养表单明细信息异常', successData.errorMessage, true);
           }
         },
-        errorData => {
+        error: errorData => {
+          _self.loading = false;
           Common.processException(errorData);
         },
-      );
+      });
     },
-
-    /**
-       * 查看下载的文件
-       * @param {Object} item
-       * @author GuoZhiBo 20210107
-       */
-    viewFlie: function() {
-      var _self = this;
+    viewFlie() {
+      const _self = this;
       _self.queryVideoListById(_self.maintenanceSheetLineId);
-
     },
-
-    queryVideoListById: function(maintenanceSheetLineId) {
-      var _self = this;
-      MaintenanceSheetLineResource.queryVideoListById(maintenanceSheetLineId).then(successData => {
-        console.log(successData);
-        if (successData.errorCode == 0) {
-          _self.videoList = successData.data;
-          _self.videoSrcs = [];
-          if (_self.videoList != undefined && _self.videoList.length > 0) {
-            if (_self.videoList.indexOf(',') == -1) {
-              _self.videoSrcs.push(_self.videoList);
-            } else {
-              _self.videoSrcs = _self.videoList.split(',');
+    queryVideoListById(maintenanceSheetLineId) {
+      const _self = this;
+      $.ajax({
+        url: MaintenanceSheetLineResource.getQueryVideoListByIdUrl(),
+        type: 'GET',
+        data: { maintenanceSheetLineId },
+        success: successData => {
+          console.log(successData);
+          if (successData.errorCode === 0) {
+            _self.videoList = successData.data;
+            _self.videoSrcs = [];
+            if (_self.videoList !== undefined && _self.videoList.length > 0) {
+              if (_self.videoList.indexOf(',') === -1) {
+                _self.videoSrcs.push(_self.videoList);
+              } else {
+                _self.videoSrcs = _self.videoList.split(',');
+              }
             }
+            console.log(_self.videoSrcs);
           }
-          console.log(_self.videoSrcs);
-        }
-      }, errorData => {
-        Common.processException(errorData);
+        },
+        error: errorData => {
+          Common.processException(errorData);
+        },
       });
     },
-
-    /**
-       * 上传文件
-       */
-    uploadFile: function(event) {
-      var _self = this;
-
-      let fileList = event.target.files;
-      var selectedFile = null;
+    beforeUpload(file) {
+      return false;
+    },
+    handleUploadChange(info) {
+      const _self = this;
+      let fileList = info.fileList;
+      let selectedFile = null;
       if (fileList.length > 0) {
-        selectedFile = fileList[0];
+        selectedFile = fileList[0].originFileObj;
       }
-      if (selectedFile == null) {
+      if (selectedFile === null) {
         return;
       }
-      var formData = new FormData();
+      const formData = new FormData();
       formData.append('file', selectedFile);
       formData.append('className', _self.className);
       _self.loading = true;
-      var attachments = [];
+      const attachments = [];
       $.ajax({
         url: Common.getApiURL('file/multipleAttachmentUpload'),
-        type: 'post',
-        beforeSend: function(request) {
+        type: 'POST',
+        beforeSend: request => {
           Common.addTokenToRequest(request);
         },
         data: formData,
         contentType: false,
         processData: false,
-        success: function(data) {
+        success: data => {
           _self.loading = false;
           if (data.success) {
-            var fileNames = data.fileNames;
-            if (fileNames != undefined && fileNames.length > 0) {
-
-              fileNames.forEach(function(item) {
+            const fileNames = data.fileNames;
+            if (fileNames !== undefined && fileNames.length > 0) {
+              fileNames.forEach(item => {
                 attachments.push(item.nameAfterSave);
                 _self.saveFile(attachments);
               });
@@ -264,180 +251,133 @@ export default {
             }
           }
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
+        error: (XMLHttpRequest, textStatus, errorThrown) => {
           _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
     },
-
-    /**
-       * 保存视频地址
-       */
-    saveFile: function(fileNames) {
-      var _self = this;
-      var videoSrcs = [];
-      if (_self.videoList != undefined && _self.videoList.length > 0) {
-        if (_self.videoList.indexOf(',') == -1) {
+    saveFile(fileNames) {
+      const _self = this;
+      const videoSrcs = [];
+      if (_self.videoList !== undefined && _self.videoList.length > 0) {
+        if (_self.videoList.indexOf(',') === -1) {
           videoSrcs.push(_self.videoList);
         } else {
           videoSrcs = _self.videoList.split(',');
         }
       }
       videoSrcs.push(fileNames);
-      var videoListStr = videoSrcs.join(',');
-      var maintenanceSheetLineDto = {
+      const videoListStr = videoSrcs.join(',');
+      const maintenanceSheetLineDto = {
         maintenanceSheetLineId: _self.maintenanceSheetLineId,
-        videoListStr: videoListStr,
+        videoListStr,
       };
-      if (maintenanceSheetLineDto != null) {
-        MaintenanceSheetLineResource.saveFile(maintenanceSheetLineDto).then(successData => {
-          console.log(successData);
-          if (successData.errorCode == 0 && successData.data != null) {
-            _self.viewFlie();
-          }
-        }, errorData => {
-          Common.processException(errorData);
+      if (maintenanceSheetLineDto !== null) {
+        $.ajax({
+          url: MaintenanceSheetLineResource.getSaveFileUrl(),
+          type: 'POST',
+          data: maintenanceSheetLineDto,
+          success: successData => {
+            console.log(successData);
+            if (successData.errorCode === 0 && successData.data !== null) {
+              _self.viewFlie();
+            }
+          },
+          error: errorData => {
+            Common.processException(errorData);
+          },
         });
       } else {
         Common.showDialog('提示', '请选择要保存的单据', 'error');
       }
     },
-
-    /**
-       * 下载附件
-       * @param {Object} item
-       * @author LiangZhiCheng 20220920
-       */
-    download: function(item) {
-      var _self = this;
-      var url = Common.getApiURL('file/fileDownload') + '?className=' + _self.className
-        + '&fileName=' + window.encodeURIComponent(item);
-      var a = document.createElement('a');
-      a.setAttribute('href',url);
-      a.setAttribute('download',item);
+    download(item) {
+      const _self = this;
+      const url = `${Common.getApiURL('file/fileDownload')}?className=${_self.className}&fileName=${window.encodeURIComponent(item)}`;
+      const a = document.createElement('a');
+      a.setAttribute('href', url);
+      a.setAttribute('download', item);
       a.click();
     },
-
-    /**
-       * 删除视频
-       *@author LiangZhiCheng 20220920
-       */
     deleteVideo(index) {
-      var _self = this;
+      const _self = this;
       _self.videoSrcs.splice(index, 1);
       _self.saveFileVideo();
       Common.showDialog('提示', '删除成功', 'success');
     },
-
-    saveFileVideo: function() {
-      var _self = this;
-      var videoListStr = _self.videoSrcs.join(',');
-      var maintenanceSheetlineDto = {
+    saveFileVideo() {
+      const _self = this;
+      const videoListStr = _self.videoSrcs.join(',');
+      const maintenanceSheetlineDto = {
         maintenanceSheetLineId: _self.maintenanceSheetLineId,
-        videoListStr: videoListStr,
+        videoListStr,
       };
-      if (maintenanceSheetlineDto != null) {
-        MaintenanceSheetLineResource.saveFile(maintenanceSheetlineDto).then(successData => {
-          if (successData.errorCode == 0 && successData.data != null) {
-            _self.viewFlie();
-          }
-        }, errorData => {
-          Common.processException(errorData);
+      if (maintenanceSheetlineDto !== null) {
+        $.ajax({
+          url: MaintenanceSheetLineResource.getSaveFileUrl(),
+          type: 'POST',
+          data: maintenanceSheetlineDto,
+          success: successData => {
+            if (successData.errorCode === 0 && successData.data !== null) {
+              _self.viewFlie();
+            }
+          },
+          error: errorData => {
+            Common.processException(errorData);
+          },
         });
       } else {
         Common.showDialog('提示', '请选择要删除的单据', 'error');
       }
     },
+    handleTableChange(pagination) {
+      this.pagination.current = pagination.current;
+      this.pagination.pageSize = pagination.pageSize;
+      this.getDatas();
+    },
   },
 };
 </script>
 
 <style scoped>
-  .flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 150px);
-  }
-
-  .flex-content {
-    flex: 1;
-    overflow: scroll;
-    width: 100%;
-    height: 0;
-  }
-
-  .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;
-  }
-
-  .flex-header {
-    height: 80px;
-    /*放大缩小比例为0 */
-    flex: 0 0 100px;
-  }
-
-  .flex-footer {
-    margin-top: 0.8em;
-    height: 35px;
-    /*放大缩小比例为0 */
-    flex: 0 0 35px;
-  }
-
-  .form-inline .form-group button {
-    width: 250px;
-    text-align: center;
-    margin: 30px;
-  }
-
-  .form-inline .form-group label {
-    width: 100px;
-    text-align: right;
-    padding-right: 5px;
-  }
-
-  .form-inline .form-group input,
-  .form-inline .form-group select {
-    width: 200px;
-  }
-
-  .file-image-div {
-    width: 150px;
-    height: 120px;
-    text-align: center;
-  }
-
-  .my-icon {
-    font-size: 100px !important;
-    padding: 10px;
-  }
-
-  .attachment-label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: small;
-    max-width: 150px;
-  }
-
-  .attachment-label:hover {
-    text-overflow: inherit;
-    overflow: visible;
-  }
-</style>
+.upload-training-video {
+  padding: 24px;
+}
+
+.search-form {
+  margin-bottom: 24px;
+}
+
+.video-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.video-item {
+  border: 1px solid #d9d9d9;
+  padding: 12px;
+  border-radius: 4px;
+  width: 200px;
+}
+
+.my-icon {
+  font-size: 32px;
+  display: block;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.video-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: 8px;
+}
+
+.video-actions {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/pick/StockOutPrepareLine1.vue

@@ -1,340 +1,428 @@
 <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)"
-      />
+  <div class="adjust-positions-container">
+    <a-page-header title="货位调整" />
 
-      物料详细信息
-    </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>
+    <a-form :layout="formLayout" class="search-form">
+      <a-form-item label="调整前货位" required>
+        <a-select
+          v-model="positionBeforeId"
+          placeholder="请选择调整前货位"
+          show-search
+          filter-option="filterOption"
+          @change="handlePositionBeforeChange"
+        >
+          <a-select-option
+            v-for="item in positionBefores"
+            :key="item.positionId"
+            :value="item.positionId"
+          >
+            {{ item.positionNo }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="调整后货位" required>
+        <a-select
+          v-model="positionAfterId"
+          placeholder="请选择调整后货位"
+          show-search
+          filter-option="filterOption"
+        >
+          <a-select-option
+            v-for="item in positionAfters"
+            :key="item.positionId"
+            :value="item.positionId"
+          >
+            {{ item.positionNo }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="搜索内容">
+        <a-input
+          v-model="queryMessage"
+          placeholder="请输入工具的中文名称或SKU或序列号"
+          @press-enter="handleSearch"
+        />
+      </a-form-item>
+      <a-form-item label="工具类型">
+        <a-select v-model="selectType" @change="changeSelectType">
+          <a-select-option value="1">RFID管理</a-select-option>
+          <a-select-option value="2">非RFID管理</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSearch">查询</a-button>
+        <a-button type="primary" @click="submitBefore">确认调整</a-button>
+      </a-form-item>
+    </a-form>
 
-      <a-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>
-            </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-table
+      :columns="columns"
+      :data-source="selectType === '2' ? currentStockDtos : inventoryInstanceDatas"
+      :pagination="pagination"
+      :loading="loading"
+      row-key="id"
+      @change="handleTableChange"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'image'">
+          <img
+            :src="Common.getThumbnailImageSrc(className, record.imageName)"
+            class="image"
+            @click="$refs.imagePreview.preview(className, record.imageName)"
           />
-        </a-tab-pane>
-
-        <a-tab-pane key="3" tab="库位信息">
-          <a-table
-            :data-source="positionInfos"
-            :columns="positionColumns"
-            :pagination="pagination2"
-            row-key="id"
-            size="small"
+        </template>
+        <template v-if="column.key === 'adjustQuantity' && selectType === '2'">
+          <a-input-number
+            v-model="record.adjustQuantity"
+            :min="0"
+            @change="checkBoxChange(record)"
           />
-        </a-tab-pane>
-      </a-tabs>
-    </a-card>
+        </template>
+      </template>
+    </a-table>
 
-    <a-modal v-model:open="modal" title="历史图片" :footer="null">
-      <a-image :src="imageUrl" />
+    <a-modal
+      v-model:visible="modal"
+      title="调整确认"
+      :footer="null"
+    >
+      <p>您确认要进行货位调整吗？</p>
+      <div class="modal-footer">
+        <a-button @click="closeModal">取消</a-button>
+        <a-button type="primary" @click="handleSubmit">确认</a-button>
+      </div>
     </a-modal>
-    
+
     <Loading v-if="loading" />
     <ImagePreview ref="imagePreview" />
-  </a-layout>
+  </div>
 </template>
 
 <script>
 import Common from '../common/Common.js';
-import InAndOutFlow from '../stock/InAndOutFlow.vue';
-
+import CurrentStockResource from '../api/wms/CurrentStockResource.js';
+import AdjustPositionResource from '../api/wms/AdjustPositionResource.js';
+import InventoryInstanceResource from '../api/common/InventoryInstanceResource.js';
 
 export default {
-
-  components: {
-    InAndOutFlow,
-    
-  },
-  data: function() {
-    this.Common = Common;
+  data() {
     return {
-      pagination: {
-        total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 1, // required
+      formLayout: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 },
       },
-      //历史图片分页参数
-      pagination2: {
+      checked: false,
+      positionBefores: [],
+      positionBeforeId: null,
+      positionAfterId: null,
+      positionAfters: [],
+      queryMessage: '',
+      currentStockDtos: [],
+      inventoryInstanceDatas: [],
+      pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 1, // required
-        from: 1,
-        to: 1, // required
+        pageSize: Common.pageSize,
+        current: 1,
       },
-      condition: '',
-      showPager: false, // 是否显示分页
-      assetInstances: [],
-      inventorys: [],
-      assetClassName: 'com.leanwo.prodog.asset.model.AssetInstance',
-      inventoryClassName: 'com.leanwo.prodog.model.common.Inventory',
-      showAssetInstance: '',
-      showInventory: '',
-      activeContent: 1,
-      imageInfos: [],
-      imageUrl: '',
-      historyEvents: [],
-      assetHistoryEvents: [],
-      historyEvents2: [],
-      stockInfos: [],
-      positionInfos: [],
-      results: [],
-      startDate: '',
-      endDate: '',
-      firstSearch: true,
+      className: 'com.leanwo.prodog.model.common.Inventory',
+      selectType: '1',
       loading: false,
       modal: false,
-      stockColumns: [
-        { title: '仓库名称', dataIndex: 'warehouseName' },
-        { title: '入库单号', dataIndex: 'documentNo' },
-        { title: '存货名称', dataIndex: 'inventoryName' },
-        { title: '存货编码', dataIndex: 'inventoryNo' },
-        { title: '批次', dataIndex: 'batchNo' },
-        { title: '结存数量', dataIndex: 'quantity' },
-      ],
-      positionColumns: [
-        { title: '仓库名称', dataIndex: 'warehouseName' },
-        { title: '入库单号', dataIndex: 'documentNo' },
-        { title: '存货名称', dataIndex: 'inventoryName' },
-        { title: '存货编号', dataIndex: 'inventoryNo' },
-        { title: '库位名称', dataIndex: 'positionName' },
-        { title: '库位编号', dataIndex: 'positionNo' },
-        { title: '数量', dataIndex: 'quantity' },
-        { title: '处理人', dataIndex: 'handlerUser' },
-        { title: '处理时间', dataIndex: 'handlerDate' },
+      columns: [
+        {
+          title: '序号',
+          key: 'index',
+          render: (text, record, index) => index + 1,
+        },
+        {
+          title: '图片',
+          key: 'image',
+        },
+        {
+          title: '中文名称',
+          dataIndex: 'inventoryName',
+          key: 'inventoryName',
+        },
+        {
+          title: 'SKU',
+          dataIndex: 'inventoryCode',
+          key: 'inventoryCode',
+        },
+        {
+          title: '序列号',
+          dataIndex: 'no',
+          key: 'no',
+        },
+        {
+          title: '库存数量',
+          dataIndex: 'stockQuantity',
+          key: 'stockQuantity',
+        },
+        {
+          title: '调整数量',
+          key: 'adjustQuantity',
+        },
       ],
     };
   },
-
-  computed: {
-    dataId: function() {
-      return {inventoryId: this.$route.query.inventoryresultId};
-    }, 
+  mounted() {
+    this.loadSelectPositionBefore();
+    this.loadSelectPositionAfter();
   },
-
-  watch: {},
-
-  mounted: function() {
-    var _self = this;
-    
-    var inventoryresultId = _self.$route.query.inventoryresultId;
-  
-    _self.findInventoryById(inventoryresultId);
-    if (_self.firstSearch) {
-      _self.condition = localStorage.getItem('##searchStr##');
-      _self.firstSearch = false;
-    }
-  },
-
-  beforeUnmount: function() {
-    
-  },
-
   methods: {
-    findInventoryById: function(inventoryresultId) {
-      var _self = this;
+    handleTableChange(pagination) {
+      this.pagination.current = pagination.current;
+      this.pagination.pageSize = pagination.pageSize;
+      this.handleSearch();
+    },
+    filterOption(input, option) {
+      return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    },
+    handlePositionBeforeChange() {
+      this.handleSearch();
+    },
+    handleSearch() {
+      if (this.selectType === '1') {
+        this.queryInventoryInstance();
+      } else {
+        this.queryInventory();
+      }
+    },
+    changeSelectType() {
+      this.handleSearch();
+    },
+    checkBoxChange(item) {
+      if (!item.adjustQuantity || item.adjustQuantity === 0) {
+        item.checked = false;
+      } else {
+        item.checked = true;
+      }
+    },
+    closeModal() {
+      this.modal = false;
+    },
+    submitBefore() {
+      if (!this.positionBeforeId || !this.positionAfterId) {
+        Notify.error('错误', '调整前货位与调整后货位不允许为空', false);
+        return;
+      }
+      if (this.positionBeforeId === this.positionAfterId) {
+        Notify.error('错误', '调整前货位与调整后货位不能相同', false);
+        return;
+      }
+      const data =
+        this.selectType === '2' ? this.currentStockDtos : this.inventoryInstanceDatas;
+      let checkCount = 0;
+      let falseData = true;
+      data.forEach(item => {
+        if (item.checked) {
+          checkCount++;
+          if (this.selectType === '2' && (!item.adjustQuantity || item.adjustQuantity <= 0)) {
+            falseData = false;
+          }
+        }
+      });
+      if (!falseData) {
+        Notify.error('错误', '调整数量必须大于0', false);
+        return;
+      }
+      if (checkCount > 0) {
+        this.modal = true;
+      } else {
+        Notify.error('错误', '请选择最少一条数据进行提交', false);
+      }
+    },
+    handleSubmit() {
+      this.modal = false;
+      if (this.selectType === '2') {
+        this.submit1();
+      } else {
+        this.submit2();
+      }
+    },
+    submit1() {
+      const currentStockDtoBs = this.currentStockDtos.filter(item => item.checked);
+      this.loading = true;
       $.ajax({
-        url: Common.getApiURL('InventoryResource/findInventoryById'),
+        url: Common.getApiURL('AdjustPositionResource/saveAdjustPosition'),
         type: 'post',
-        data: inventoryresultId,
-        contentType: 'application/json',
-        beforeSend: function(request) {
-          Common.addTokenToRequest(request);
+        data: {
+          currentStockDtoBs: JSON.stringify(currentStockDtoBs),
+          positionBeforeId: this.positionBeforeId,
+          positionAfterId: this.positionAfterId,
         },
-        success: function(data) {
-          _self.showItem2(data);
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: successData => {
+          this.loading = false;
+          if (successData.errorCode === 0) {
+            if (successData.data) {
+              Notify.success('成功', '操作成功', false);
+              this.queryInventory();
+            }
+          }
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
         },
       });
     },
-
-
-    /**
-			 * 显示存货详细信息
-			 * @param {Object} inventoryresult
-			 */
-    showItem2: function(inventoryresult) {
-      var _self = this;
-      _self.showInventory = inventoryresult;
-      // 查询生命周期数据
-      _self.getHistoryEvent2();
-      _self.getStockInfo();
-    },
-
-    callbackFun: function() {
-      if (this.showAssetInstance == undefined || this.showAssetInstance == '') {
-        return;
-      }
-      this.showItem(this.showAssetInstance);
-    },
-    showImage: function(imageName) {
-      this.imageUrl = imageName;
-      this.modal = true;
-    },
-
-    /**
-			 * 查询存货的出入库记录
-			 */
-    getHistoryEvent2: function() {
-      var _self = this;
+    submit2() {
+      const inventoryInstanceDtos = this.inventoryInstanceDatas.filter(item => item.checked);
+      this.loading = true;
       $.ajax({
-        url: Common.getApiURL('StockOutResource/getHistoryEventByInventory'),
+        url: Common.getApiURL('AdjustPositionResource/saveAdjustPosition2'),
         type: 'post',
-        dataType: 'json',
         data: {
-          inventoryId: _self.showInventory.id,
-          startDate: _self.startDate,
-          endDate: _self.endDate,
+          inventoryInstanceDtos: JSON.stringify(inventoryInstanceDtos),
+          positionBeforeId: this.positionBeforeId,
+          positionAfterId: this.positionAfterId,
         },
-        beforeSend: function(request) {
-          Common.addTokenToRequest(request);
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: successData => {
+          this.loading = false;
+          if (successData.errorCode === 0) {
+            if (successData.data) {
+              Notify.success('成功', '操作成功', false);
+              this.queryInventoryInstance();
+            }
+          }
+        },
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
+        },
+      });
+    },
+    queryInventory() {
+      this.loading = true;
+      const queryMessage = $.trim(this.queryMessage);
+      const start = (this.pagination.current - 1) * this.pagination.pageSize;
+      const length = this.pagination.pageSize;
+      $.ajax({
+        url: Common.getApiURL('CurrentStockResource/queryCurrentStockByPosition'),
+        type: 'get',
+        data: {
+          positionBeforeId: this.positionBeforeId,
+          queryMessage,
+          start,
+          length,
         },
-        success: function(data) {
-          console.log(data);
-          _self.historyEvents2 = data;
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: successData => {
+          this.loading = false;
+          if (successData.errorCode === 0) {
+            if (successData.datas) {
+              this.currentStockDtos = successData.datas.map(item => ({
+                ...item,
+                checked: false,
+              }));
+              this.pagination.total = successData.total;
+            }
+          }
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
         },
       });
     },
-
-    /**
-			 * 根据inventoryId获取库存信息
-			 */
-    getStockInfo: function() {
-      var _self = this;
+    queryInventoryInstance() {
+      this.loading = true;
+      const queryMessage = $.trim(this.queryMessage);
+      const start = (this.pagination.current - 1) * this.pagination.pageSize;
+      const length = this.pagination.pageSize;
       $.ajax({
-        url: Common.getApiURL('StockOutResource/getStockInfoByInventory'),
-        type: 'GET',
-        dataType: 'json',
+        url: Common.getApiURL('InventoryInstanceResource/queryByPosition'),
+        type: 'get',
         data: {
-          inventoryId: _self.showInventory.id,
+          positionBeforeId: this.positionBeforeId,
+          queryMessage,
+          start,
+          length,
         },
-        beforeSend: function(request) {
-          Common.addTokenToRequest(request);
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: successData => {
+          this.loading = false;
+          if (successData.errorCode === 0) {
+            if (successData.datas) {
+              this.inventoryInstanceDatas = successData.datas.map(item => ({
+                ...item,
+                checked: false,
+              }));
+              this.pagination.total = successData.total;
+            }
+          }
         },
-        success: function(data) {
-          console.log(data);
-          _self.stockInfos = data;
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
+        },
+      });
+    },
+    loadSelectPositionBefore() {
+      this.loading = true;
+      $.ajax({
+        url: Common.getApiURL('positionResource/queryByCondition'),
+        type: 'get',
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: data => {
+          this.loading = false;
+          if (data.errorCode === 0) {
+            this.positionBefores = data.datas.map(item => ({
+              positionId: item.positionId,
+              positionNo: item.positionNo,
+            }));
+          }
         },
-        error: function(XMLHttpRequest, textStatus, errorThrown) {
-          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
         },
       });
     },
-
-    // 获取图标
-    getHistoryIconSrc: function(title) {
-      var iconSrc = 'static/image/';
-      switch (title) {
-      case '资产盘点':
-        iconSrc += 'inventory.png';
-        break;
-      case '资产归还':
-        iconSrc += 'stockin.png';
-        break;
-      case '资产领用':
-        iconSrc += 'stockout.png';
-        break;
-      case '资产报失':
-        iconSrc += 'lost.png';
-        break;
-      case '资产报失找回':
-        iconSrc += 'lostRetrieve.png';
-        break;
-      case '资产保养':
-        iconSrc += 'maintain.png';
-        break;
-      case '资产维修':
-        iconSrc += 'repair.png';
-        break;
-      case '资产报废':
-        iconSrc += 'scrap.png';
-        break;
-      case '材料出库':
-        iconSrc += 'stockout.png';
-        break;
-      case '材料入库':
-        iconSrc += 'stockin.png';
-        break;
-      }
-      return iconSrc;
+    loadSelectPositionAfter() {
+      this.loading = true;
+      $.ajax({
+        url: Common.getApiURL('positionResource/queryByCondition'),
+        type: 'get',
+        beforeSend: request => Common.addTokenToRequest(request),
+        success: data => {
+          this.loading = false;
+          if (data.errorCode === 0) {
+            this.positionAfters = data.datas.map(item => ({
+              positionId: item.positionId,
+              positionNo: item.positionNo,
+            }));
+          }
+        },
+        error: errorData => {
+          this.loading = false;
+          Common.processException(errorData);
+        },
+      });
     },
   },
 };
 </script>
-<style scoped>
-.container {
-  padding: 20px;
-}
 
-.form-card {
-  margin-top: 20px;
+<style scoped>
+.adjust-positions-container {
+  padding: 24px;
 }
 
-.data-tabs {
-  margin-top: 24px;
+.search-form {
+  margin-bottom: 24px;
 }
 
 .image {
-  width: 78px;
-  height: 78px;
-  margin-right: 16px;
+  width: 40px;
+  height: 40px;
 }
 
-.event-time {
-  color: rgba(0, 0, 0, 0.45);
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
 }
-</style>
-
+</style>

src/stock/CurrentStockProjectItemManger.vue

@@ -1,333 +1,134 @@
 <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"
-          >
-            <div class="form-group">
-              SKU：
-              <input
-                v-model="queryNo"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="请输入要查询物料的SKU"
-                aria-describedby="basic-addon"
-                style="width:250px;"
-                @keyup.enter="queryInventory"
-              />
-              物料名称：
-              <input
-                v-model="queryName"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="请输入要查询物料的名称"
-                aria-describedby="basic-addon"
-                style="width:250px;"
-                @keyup.enter="queryInventory"
-              />
-              规格型号：
-              <input
-                v-model="queryType"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="请输入要查询物料的规格型号"
-                aria-describedby="basic-addon"
-                style="width:250px;"
-                @keyup.enter="queryInventory"
-              />
-              物料类型：
-              <select
-                v-model="selectType"
-                class="form-control"
-                @change="changeSelectType"
-              >
-                <option value="0">全部</option>
-                <option value="001">成套工具箱</option>
-                <option value="002">散件</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <button
-                class="btn btn-default"
-                @click="queryInventory"
-              >
-                查询
-              </button>
-            </div>
-            <div class="form-group">
-              <button
-                class="btn btn-success"
-                @click="exportExcel"
-              >
-                导出
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex-content"
-        style="margin-top: 10px;"
-      >
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 50px;">
-                序号
-              </th>
-              <th style="width: 70px;">
-                图片
-              </th>
-              <th style="width: 150px;">
-                物料名称
-              </th>
-              <th style="width: 100px;">
-                SKU
-              </th>
-              <th style="width: 150px;">
-                规格型号
-              </th>
-              <th style="width: 80px;">
-                入库总数量
-              </th>
-              <th style="width: 80px;">
-                库存数量
-              </th>
-              <th style="width: 80px;">
-                出库总数量
-              </th>
-              <th style="width: 80px;">
-                RFID管理
-              </th>
-              <th style="width: 80px;">
-                物料类型
-              </th>
-              <th style="width: 100px;">
-                操作
-              </th>
-            </tr>
-          </thead>
-          <tbody class="table1">
-            <tr v-for="(inventoryInstance, index) in inventoryInstanceDatas" :key="inventoryInstance.id">
-              <td>
-                {{ index + 1 + (pagination.current_page-1) * pagination.per_page }}
-              </td>
-              <td>
-                <img
-                  :src="Common.getThumbnailImageSrc(className, inventoryInstance.imageName)"
-                  class="image"
-                  @click="$refs.imagePreview.preview(className, inventoryInstance.imageName)"
-                />
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryName }}
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryNo }}
-              </td>
-              <td>
-                {{ inventoryInstance.inventoryType }}
-              </td>
-              <td>
-                {{ inventoryInstance.totalQuantity }}
-              </td>
-              <td>
-                {{ inventoryInstance.stockQuantity }}
-              </td>
-              <td>
-                {{ inventoryInstance.stockOutQuantity }}
-              </td>
-              <td>
-                {{ inventoryInstance.rfidManagement == true ? '是':'否' }}
-              </td>
-              <td>
-                {{ inventoryInstance.tagNo == '001' ? '成套工具箱':'散件' }}
-              </td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-link"
-                  style="width: 100%"
-                  @click="findByInventoryId(inventoryInstance)"
-                >
-                  查看详情
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-footer">
-        <div>
-          <div class="form-group">
-            <div class="pull-left">
-              共查询到<b>{{ pagination.total }}</b>条数据
-            </div>
-            <div class="pull-right">
-              <VueBootstrapPagination
-                v-if="pagination.last_page > 0"
-                :pagination="pagination"
-                :callback="queryInventory"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="current-stock-container">
+    <!-- 导航栏 -->
+    <a-page-header title="我的项目-库存查询" />
 
-    <Modal
-      v-model:show="modal"
-      small="true"
-      :show-canel-button="true"
-      :show-ok-button="false"
+    <!-- 查询表单 -->
+    <a-form
+      :inline="true"
+      :layout="formLayout"
+      class="search-form"
     >
-      <template #header>
-        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>库存详情</p>
-      </template>
-      <table class="fixed-table table-striped table-bordered">
-        <thead>
-          <tr>
-            <th style="width: 100px;">
-              序号
-            </th>
-            <th style="width: 150px;">
-              物料编码
-            </th>
-            <th style="width: 150px;">
-              物料名称
-            </th>
-            <th style="width: 150px;">
-              状态
-            </th>
-            <th style="width: 100px;">
-              货位
-            </th>
-            <th style="width: 100px;">
-              项目事件
-            </th>
-            <th style="width: 100px;">
-              齐套情况
-            </th>
-          </tr>
-        </thead>
-        <tbody class="table1">
-          <tr v-for="(data, index) in inventoryInstanceCurrentStocks" :key="data.id">
-            <td>
-              {{ index+1 }}
-            </td>
-            <td>
-              {{ data.no }}
-            </td>
-            <td>
-              {{ data.name }}
-            </td>
-            <td>
-              {{ (data.positionId == undefined || data.positionId == null)? '已出库':'在库' }}
-            </td>
-            <td>
-              {{ data.positionBarCode }}
-            </td>
-            <td>
-              {{ data.projectItem }}
-            </td>
-            <td>
-              {{ data.finished == false ? '未补齐':'已补齐' }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="modal-footer">
-        <slot name="footer" />
-      </div>
-    </Modal>
+      <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>
+    </a-form>
 
-    <Modal
-      v-model:show="modal2"
-      small="true"
-      :show-canel-button="true"
-      :show-ok-button="false"
+    <!-- 表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="inventoryInstanceDatas"
+      :pagination="pagination"
+      :loading="loading"
+      row-key="id"
+      @change="handleTableChange"
     >
-      <template #header>
-        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>库存详情</p>
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.key === 'index'">
+          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
+        </template>
+        <template v-if="column.key === 'image'">
+          <img
+            :src="Common.getThumbnailImageSrc(className, record.imageName)"
+            class="image"
+            @click="$refs.imagePreview.preview(className, record.imageName)"
+          />
+        </template>
+        <template v-if="column.key === 'rfidManagement'">
+          {{ record.rfidManagement ? '是' : '否' }}
+        </template>
+        <template v-if="column.key === 'tagNo'">
+          {{ record.tagNo === '001' ? '成套工具箱' : '散件' }}
+        </template>
+        <template v-if="column.key === 'operation'">
+          <a-button
+            type="link"
+            @click="findByInventoryId(record)"
+          >
+            查看详情
+          </a-button>
+        </template>
       </template>
-      <table class="fixed-table table-striped table-bordered">
-        <thead>
-          <tr>
-            <th style="width: 100px;">
-              序号
-            </th>
-            <th style="width: 150px;">
-              所在成套工具箱
-            </th>
-            <th style="width: 150px;">
-              数量
-            </th>
-            <th style="width: 150px;">
-              货位
-            </th>
-            <th style="width: 150px;">
-              项目事件
-            </th>
-          </tr>
-        </thead>
-        <tbody class="table1">
-          <tr v-for="(data, index) in inventoryInstanceCurrentStocks2" :key="data.id">
-            <td>
-              {{ index+1 }}
-            </td>
-            <td>
-              {{ data.no }}
-            </td>
-            <td>
-              {{ data.quantity }}
-            </td>
-            <td>
-              {{ data.positionBarCode }}
-            </td>
-            <td>
-              {{ data.projectItem }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="modal-footer">
-        <slot name="footer" />
-      </div>
-    </Modal>
+    </a-table>
 
-    <Modal
-      v-model:show="modal3"
-      :full="true"
-      :show-canel-button="true"
-      :show-ok-button="false"
-    >
-      <template #header>
-        <p>{{ displayData.inventoryNo }}-{{ displayData.inventoryName }}>>出入库流水</p>
-      </template>
+    <!-- 分页信息 -->
+    <div class="pagination-info">
+      共查询到 <b>{{ pagination.total }}</b> 条数据
+    </div>
 
-      <div class="modal-body">
-        <InAndOutFlow :display-data="displayData" />
-      </div>
+    <!-- 详情模态框 -->
+    <a-modal
+      v-model:visible="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>
+    <a-modal
+      v-model:visible="modal3"
+      title="出入库流水"
+      width="80%"
+    >
+      <InAndOutFlow :display-data="displayData" />
+    </a-modal>
 
-      <div class="modal-footer">
-        <slot name="footer" />
-      </div>
-    </Modal>
-    
+    <!-- 加载状态 -->
     <Loading v-if="loading" />
     <ImagePreview ref="imagePreview" />
   </div>
@@ -335,30 +136,21 @@
 
 <script>
 import Common from '../common/Common.js';
-
 import InventoryInstanceResource from '../api/common/InventoryInstanceResource.js';
 import InventoryInstanceBindResource from '../api/wms/InventoryInstanceBindResource.js';
 import CurrentStockResource from '../api/wms/CurrentStockResource.js';
-
-
-
 import InAndOutFlow from './InAndOutFlow.vue';
 
-
-
 export default {
   components: {
-    
     InAndOutFlow,
-    
-    
-    
-    
-    
   },
-  data: function () {
-    this.Common = Common;
+  data() {
     return {
+      formLayout: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 },
+      },
       displayData: {},
       queryNo: '',
       queryName: '',
@@ -366,241 +158,195 @@ export default {
       inventoryInstanceDatas: [],
       inventoryInstanceCurrentStocks: [],
       inventoryInstanceCurrentStocks2: [],
-      inventoryInstanceCurrentStocks3: [],
-      recordIds: [],
       pagination: {
         total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
+        pageSize: Common.pageSize,
+        current: 1,
       },
       isUpdatePage: true,
       className: 'com.leanwo.prodog.model.common.Inventory',
-      allRepeatPack: [], //重复打印全部的id
-      printType: 0,//类型 0:采购入库打印/1:扫描入库打印
       selectType: '0',
       loading: false,
       modal: false,
       modal2: false,
       modal3: false,
+      columns: [
+        { title: '序号', key: 'index', width: 50 },
+        { title: '图片', key: 'image', width: 70 },
+        { title: '物料名称', dataIndex: 'inventoryName', key: 'inventoryName', width: 150 },
+        { title: 'SKU', dataIndex: 'inventoryNo', key: 'inventoryNo', width: 100 },
+        { title: '规格型号', dataIndex: 'inventoryType', key: 'inventoryType', width: 150 },
+        { title: '入库总数量', dataIndex: 'totalQuantity', key: 'totalQuantity', width: 80 },
+        { title: '库存数量', dataIndex: 'stockQuantity', key: 'stockQuantity', width: 80 },
+        { title: '出库总数量', dataIndex: 'stockOutQuantity', key: 'stockOutQuantity', width: 80 },
+        { title: 'RFID管理', key: 'rfidManagement', width: 80 },
+        { title: '物料类型', key: 'tagNo', width: 80 },
+        { title: '操作', key: 'operation', width: 100 },
+      ],
+      modalColumns: [
+        { title: '序号', key: 'index', width: 100 },
+        { title: '物料编码', dataIndex: 'no', key: 'no', width: 150 },
+        { title: '物料名称', dataIndex: 'name', key: 'name', width: 150 },
+        { title: '状态', key: 'status', width: 150 },
+        { title: '货位', dataIndex: 'positionBarCode', key: 'positionBarCode', width: 100 },
+        { title: '项目事件', dataIndex: 'projectItem', key: 'projectItem', width: 100 },
+        { title: '齐套情况', key: 'finished', width: 100 },
+      ],
+      modalColumns2: [
+        { title: '序号', key: 'index', width: 100 },
+        { title: '所在成套工具箱', dataIndex: 'no', key: 'no', width: 150 },
+        { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 150 },
+        { title: '货位', dataIndex: 'positionBarCode', key: 'positionBarCode', width: 150 },
+        { title: '项目事件', dataIndex: 'projectItem', key: 'projectItem', width: 150 },
+      ],
     };
   },
-
-  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: {
-    /**
-         * 导出excel
-         */
-    exportExcel: function () {
-      var _self = this;
-      var loginInfo = localStorage.getItem('#LoginInfo');
-      var loginData = JSON.parse(loginInfo);
-      var whereClause = ' totalInventory.clientId=' + loginData.loginClientId;
-      if (_self.queryNo != null && _self.queryNo.length > 0) {
-        whereClause = whereClause + ' AND totalInventory.no like ' + '\'%' + _self.queryNo + '%\'';
-        if (_self.queryName != null && _self.queryName.length > 0) {
-          whereClause = whereClause + ' OR totalInventory.name like ' + '\'%' + _self.queryName + '%\'';
+    // 导出Excel
+    exportExcel() {
+      const loginInfo = localStorage.getItem('#LoginInfo');
+      const loginData = JSON.parse(loginInfo);
+      let whereClause = `totalInventory.clientId=${loginData.loginClientId}`;
+      if (this.queryNo) {
+        whereClause += ` AND totalInventory.no like '%${this.queryNo}%'`;
+        if (this.queryName) {
+          whereClause += ` OR totalInventory.name like '%${this.queryName}%'`;
         }
-        if (_self.queryType != null && _self.queryType.length > 0) {
-          whereClause = whereClause + ' OR totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
+        if (this.queryType) {
+          whereClause += ` OR totalInventory.type like '%${this.queryType}%'`;
         }
-      } else if (_self.queryName != null && _self.queryName.length > 0) {
-        whereClause = whereClause + ' AND totalInventory.name like ' + '\'%' + _self.queryName + '%\'';
-        if (_self.queryType != null && _self.queryType.length > 0) {
-          whereClause = whereClause + ' OR totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
+      } else if (this.queryName) {
+        whereClause += ` AND totalInventory.name like '%${this.queryName}%'`;
+        if (this.queryType) {
+          whereClause += ` OR totalInventory.type like '%${this.queryType}%'`;
         }
-      } else if (_self.queryType != null && _self.queryType.length > 0) {
-        whereClause = whereClause + ' AND totalInventory.type like ' + '\'%' + _self.queryType + '%\'';
+      } else if (this.queryType) {
+        whereClause += ` AND totalInventory.type like '%${this.queryType}%'`;
       }
       whereClause = encodeURIComponent(whereClause);
-      var url = '/ureport/preview?_u=dicfile-wms:stock.ureport.xml&whereClause=' + whereClause;
+      const url = `/ureport/preview?_u=dicfile-wms:stock.ureport.xml&whereClause=${whereClause}`;
       window.open(url);
     },
-    /**
-         * 根据存货档案id进行查询
-         */
-    findByInventoryId: function (data) {
-      var _self = this;
-      if (data.totalQuantity == undefined || data.totalQuantity == null) {
+    // 根据库存ID查询详情
+    findByInventoryId(data) {
+      if (!data.totalQuantity) {
         Notify.error('提示', '物料暂无入库记录', false);
         return;
       }
-      var inventoryId = data.inventoryId;
-      var tagNo = data.tagNo;
-      var rfidManagement = data.rfidManagement;
-      _self.displayData = data;
-      if (rfidManagement == true) {
-        if (tagNo == undefined || tagNo == null || tagNo == '002') {
-          InventoryInstanceResource.findCurrentStockProjectItemMangerByInventoryId(inventoryId).then(successData => {
-            if(successData.errorCode == 0) {
-              if (successData.datas && successData.datas.length > 0) {
-                _self.inventoryInstanceCurrentStocks2 = successData.datas;
-                _self.modal2 = true;
+      const inventoryId = data.inventoryId;
+      const tagNo = data.tagNo;
+      const rfidManagement = data.rfidManagement;
+      this.displayData = data;
+      if (rfidManagement) {
+        if (!tagNo || tagNo === '002') {
+          $.ajax({
+            url: InventoryInstanceResource.findCurrentStockProjectItemMangerByInventoryIdUrl,
+            type: 'GET',
+            data: { inventoryId },
+            success: response => {
+              if (response.errorCode === 0 && response.datas?.length > 0) {
+                this.inventoryInstanceCurrentStocks2 = response.datas;
+                this.modal2 = true;
               }
-            } else {
-              Notify.error('错误', successData.errorMessage, false);
-              return;
-            }
-          }, errorData => {
-            Common.processException(errorData);
+            },
+            error: error => {
+              Common.processException(error);
+            },
           });
         } else {
-          InventoryInstanceBindResource.findProjectItemMangerByInventoryId(inventoryId).then(successData => {
-            if(successData.errorCode == 0) {
-              if (successData.datas) {
-                _self.inventoryInstanceCurrentStocks = successData.datas;
-                _self.modal = true;
+          $.ajax({
+            url: InventoryInstanceBindResource.findProjectItemMangerByInventoryIdUrl,
+            type: 'GET',
+            data: { inventoryId },
+            success: response => {
+              if (response.errorCode === 0 && response.datas) {
+                this.inventoryInstanceCurrentStocks = response.datas;
+                this.modal = true;
               }
-            }
-          }, errorData => {
-            Common.processException(errorData);
+            },
+            error: error => {
+              Common.processException(error);
+            },
           });
         }
       } else {
-        _self.modal3 = true;
+        this.modal3 = true;
       }
     },
-    changeSelectType: function () {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.queryInventory();
+    // 物料类型选择变化处理
+    changeSelectType() {
+      this.pagination.current = 1;
+      this.queryInventory();
     },
-    /**
-         * 根据物料名称或者编号查询数据
-         */
-    queryInventory: function () {
-      var _self = this;
-      if (_self.inventoryInstanceDatas == undefined) {
-        _self.inventoryInstanceDatas = [];
+    // 查询库存
+    queryInventory() {
+      if (!this.inventoryInstanceDatas) {
+        this.inventoryInstanceDatas = [];
       }
-      var queryNo = $.trim(_self.queryNo);
-      var queryName = $.trim(_self.queryName);
-      var queryType = $.trim(_self.queryType);
-      if ((queryNo.length > 0 || queryName.length > 0 || queryType.length > 0) && !_self.isUpdatePage) {
-        _self.pagination.current_page = 1;
-        _self.isUpdatePage = true;
-      } else if (queryNo.length == 0 && queryName.length == 0 && queryType.length == 0) {
-        _self.isUpdatePage = false;
+      const queryNo = $.trim(this.queryNo);
+      const queryName = $.trim(this.queryName);
+      const queryType = $.trim(this.queryType);
+      if ((queryNo || queryName || queryType) && !this.isUpdatePage) {
+        this.pagination.current = 1;
+        this.isUpdatePage = true;
+      } else if (!queryNo && !queryName && !queryType) {
+        this.isUpdatePage = false;
       }
-      _self.inventoryInstanceDatas.splice(0, _self.inventoryInstanceDatas.length);
-      var inventoryQueryCondition = {
-        'no': queryNo,
-        'name': queryName,
-        'type': queryType,
-        'start': (_self.pagination.current_page - 1) * _self.pagination.per_page,
-        'length': _self.pagination.per_page,
+      this.inventoryInstanceDatas = [];
+      const inventoryQueryCondition = {
+        no: queryNo,
+        name: queryName,
+        type: queryType,
+        start: (this.pagination.current - 1) * this.pagination.pageSize,
+        length: this.pagination.pageSize,
       };
-      _self.loading=true;
-      CurrentStockResource.findSiemensCurrentStockProjectItemManger(inventoryQueryCondition, _self.selectType).then(successData => {
-        _self.loading=false;
-        if(successData.errorCode == 0) {
-          if (successData.datas) {
-            _self.inventoryInstanceDatas = successData.datas;
-            _self.pagination.total = successData.total;
-            _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
+      this.loading = true;
+      $.ajax({
+        url: CurrentStockResource.findSiemensCurrentStockProjectItemMangerUrl,
+        type: 'GET',
+        data: { ...inventoryQueryCondition, selectType: this.selectType },
+        success: response => {
+          this.loading = false;
+          if (response.errorCode === 0 && response.datas) {
+            this.inventoryInstanceDatas = response.datas;
+            this.pagination.total = response.total;
+            this.pagination.current = Math.ceil(this.pagination.total / this.pagination.pageSize);
           }
-          _self.fixedTableHeader();
-        }
-      }, errorData => {
-        _self.loading=false;
-        Common.processException(errorData);
+        },
+        error: error => {
+          this.loading = false;
+          Common.processException(error);
+        },
       });
     },
-
-    /**
-         * 冻结表头
-         */
-    fixedTableHeader: function () {
-      let _self = this;
-
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          'left': 3,
-          'head': true,
-        });
-      });
+    // 表格分页、排序等变化处理
+    handleTableChange(pagination) {
+      this.pagination.current = pagination.current;
+      this.pagination.pageSize = pagination.pageSize;
+      this.queryInventory();
     },
   },
 };
 </script>
 
 <style scoped>
-.flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 140px);
-}
-
-.flex-header {
-    /*放大缩小比例为0 */
-    flex: 0 0 35px;
-}
-
-.flex-footer {
-    height: 45px;
-    /*放大缩小比例为0 */
-    flex: 0 0 45px;
-}
-
-.flex-content {
-    flex: 1;
-    overflow: scroll;
-    width: 100%;
-}
-
-.fixed-table {
-    table-layout: fixed;
-    word-wrap: break-word;
-    word-break: break-all;
-}
-</style>
-
-<style scoped>
-.fixed-table {
-    table-layout: fixed;
-    width: 800px !important;
-    min-width: 800px !important;
-}
-
-table.fixed-table tr {
-    height: 40px;
+.current-stock-container {
+  padding: 24px;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.search-form {
+  margin-bottom: 24px;
 }
 
 .image {
-    width: 40px;
-    height: 40px;
-}
-
-.modal-img-box {
-    width: 100%;
-    text-align: center;
-    overflow: auto;
+  width: 40px;
+  height: 40px;
 }
 
-.m-img {
-    width: 100%;
+.pagination-info {
+  margin-top: 16px;
 }
-</style>
+</style>