3.0.98-rc.4 去除bootstrap，使用antd重构

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-eam-v3",
   "description": "Leanwo Prodog Client",
-  "version": "3.0.98",
+  "version": "3.0.98-rc.4",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "ins": "npm install --registry=http://wuzhixin.vip:4873",
@@ -16,7 +16,7 @@
   ],
   "peerDependencies": {
     "ant-design-vue": "^4.2.5",
-    "pc-component-v3": "^1.1.12",
+    "pc-component-v3": "1.1.14-rc.5",
     "v-tooltip": "^4.0.0-beta.17",
     "vue-select": "^4.0.0-beta.6"
   },

public/index.html

@@ -6,9 +6,6 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>client-eam</title>
 
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css/bootstrap.css">
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap/dist/css//bootstrap-theme.min.css">
-	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/bootstrap3-dialog/dist/css/bootstrap-dialog.css">
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/colResizable/colResizable-1.6.css">
 	<link nonce="*NONCE_TOKEN_CSS*" rel="stylesheet" type="text/css" href="/static/jQuery-ResizableColumns/jQuery.resizableColumns.css">
 
@@ -19,9 +16,6 @@
 
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/dayjs/dayjs.min.js"></script>
 
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/bootstrap/dist/js/bootstrap.js"></script>
-	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/bootstrap3-dialog/dist/js/bootstrap-dialog.js"></script>
-
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/vue/dist/vue.global.js"></script>
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/vue-i18n/dist/vue-i18n.global.js"></script>
 	<script nonce="*NONCE_TOKEN*" type="text/javascript" src="/static/vuex/dist/vuex.global.js"></script>

src/common/CommonTable.vue

@@ -2,44 +2,29 @@
   <div class="tablePaganations">
     <!-- <a-config-provider :locale="locale"> -->
     <a-table
-      id="commonTable"
-      class="ant-table-striped"
-      bordered
-      size="small"
-      height="1000px"
-      :loading="isLoading"
-      :data-source="dataSource"
-      :columns="columns"
-      :row-key="(record) => record.id"
-      :scroll="{ y: yScroll }"
-      :pagination="havePage ? pagination : false"
-      :row-class-name="
-        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
-      "
-      :row-selection="
-        isSelect
-          ? {
-            selectedRowKeys: state.selectedRowKeys,
-            onSelect: selectEvent,
-            onSelectAll: selectAllEvent,
-          }
-          : null
-      "
-      @change="tableChange"
+      id="commonTable" class="ant-table-striped" bordered size="small" height="1000px" :loading="isLoading"
+      :data-source="dataSource" :columns="columns" :row-key="(record) => record.id" :scroll="{ y: yScroll }"
+      :pagination="havePage ? pagination : false" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
+      " :row-selection="isSelect
+        ? {
+          type: selectType === 'radio' ? 'radio' : 'checkbox',
+          selectedRowKeys: state.selectedRowKeys,
+          onSelect: selectEvent,
+          onSelectAll: selectAllEvent,
+          hideSelectAll: hideSelectAll,
+        }
+        : null
+      " :custom-row="isCustomRowClick ? customRowClick : null" @change="tableChange"
       @resize-column="handleResizeColumn"
     >
-      <template
-        v-for="(item, index) in renderArr"
-        #[item]="scope"
-        :key="index"
-      >
+      <template v-for="(item, index) in renderArr" #[item]="scope" :key="index">
         <slot :name="item" :scope="scope" v-bind="scope || {}" />
       </template>
     </a-table>
     <!-- </a-config-provider> -->
   </div>
 </template>
-  
+
 <script setup>
 import {
   useSlots,
@@ -84,6 +69,16 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  // 是否隐藏全选
+  hideSelectAll: {
+    type: Boolean,
+    default: false,
+  },
+  // 单选多选
+  selectType: {
+    type: String,
+    default: 'checkbox',
+  },
   // 分页在右上角
   topRight: {
     type: Boolean,
@@ -99,9 +94,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  // 是否自定义行点击
+  isCustomRowClick: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['getPager', 'getSorter', 'getSelected']);
+const emit = defineEmits(['getPager', 'getSorter', 'getSelected', 'customRowClick']);
 
 // 分页配置
 const pagination = reactive({
@@ -115,7 +115,7 @@ const pagination = reactive({
   onShowSizeChange: (current, pageSize) => showSizeChange(current, pageSize),
   onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
   total: props.total,
-  position:props.topRight ? ['topRight'] : ['bottomRight'],
+  position: props.topRight ? ['topRight'] : ['bottomRight'],
 });
 
 const yScroll = ref(400); //默认滚动高度
@@ -136,7 +136,7 @@ onMounted(() => {
   } else {
     extraHeight.value = props.extraHeight;
   }
-  if(props.extraHeight){
+  if (props.extraHeight) {
     extraHeight.value = props.extraHeight;
   }
   onResizeTable();
@@ -181,14 +181,19 @@ const handleResizeColumn = (w, col) => {
 
 // 选择每一项操作
 const selectEvent = (record, selected) => {
-  if (selected) {
-    state.selectedRows.push(record);
-    state.selectedRowKeys.push(record.id);
+  if (props.selectType === 'radio') {
+    state.selectedRows = [record];
+    state.selectedRowKeys = [record.id];
   } else {
-    let index = state.selectedRowKeys.indexOf(record.id);
-    if (index >= 0) {
-      state.selectedRows.splice(index, 1);
-      state.selectedRowKeys.splice(index, 1);
+    if (selected) {
+      state.selectedRows.push(record);
+      state.selectedRowKeys.push(record.id);
+    } else {
+      let index = state.selectedRowKeys.indexOf(record.id);
+      if (index >= 0) {
+        state.selectedRows.splice(index, 1);
+        state.selectedRowKeys.splice(index, 1);
+      }
     }
   }
   emit('getSelected', state);
@@ -242,6 +247,15 @@ const tableChange = (pagination, filters, sorter) => {
   }
 };
 
+// 自定义行点击
+const customRowClick = record => {
+  return {
+    onDblclick() {
+      emit('customRowClick', record);
+    },
+  };
+};
+
 // 暴露出方法
 defineExpose({ backFirstPage, clear });
 
@@ -254,6 +268,14 @@ watch(
   },
   { immediate: true, deep: true },
 );
+watch(
+  () => props.selectedKeys,
+  newData => {
+    state.selectedRowKeys = newData;
+    state.selectedRows = newData.map(item => props.dataSource.find(data => data.id === item));
+  },
+  { immediate: true, deep: true },
+);
 // 插槽的实例
 const slots = useSlots();
 const renderArr = Object.keys(slots);
@@ -263,9 +285,8 @@ const renderArr = Object.keys(slots);
   width: 100%;
   margin-top: 8px;
 }
+
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa;
 }
-</style>
-  
-  
+</style>

src/components/AssetBasicSetting.vue

@@ -1,652 +1,299 @@
-
 <template>
-  <div class="container-fluid">
-    <Navbar
-      :title="$t('lang.assetBasicSetting.assetConfig')"
-      :is-go-back="false"
-    />
-
-    <div class="row" style="margin-bottom: 15px">
-      <div class="col-md-12">
-        <ul class="nav nav-tabs">
-          <li
-            role="presentation"
-            :class="{ active: functionType == 1 }"
-            @click="selectPage(1)"
-          >
-            <a href="javascript:void(0)">{{
-              $t("lang.assetBasicSetting.baseInformation")
-            }}</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 2 }"
-            @click="selectPage(2)"
-          >
-            <a href="javascript:void(0)">{{
-              $t("lang.assetBasicSetting.depreciationInformation")
-            }}</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 3 }"
-            @click="selectPage(3)"
-          >
-            <a href="javascript:void(0)">{{
-              $t("lang.assetBasicSetting.encodingMethod")
-            }}</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 4 }"
-            @click="selectPage(4)"
-          >
-            <a href="javascript:void(0)">{{
-              $t("lang.assetBasicSetting.systemIntegration")
-            }}</a>
-          </li>
-          <li
-            role="presentation"
-            :class="{ active: functionType == 5 }"
-            @click="selectPage(5)"
-          >
-            <a href="javascript:void(0)">{{
-              $t("lang.assetBasicSetting.picture")
-            }}</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div v-show="functionType == 1">
-      <div>
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.setNo") }}</label>
-          <input
-            autocomplete="off"
-            type="text"
-            :value="loginContextDto.accountId"
-            disabled="true"
-            class="form-control"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.setName") }}</label>
-          <input
-            autocomplete="off"
-            type="text"
-            :value="loginContextDto.accountName"
-            disabled="true"
-            class="form-control"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.userClient") }}</label>
-          <input
-            autocomplete="off"
-            type="text"
-            :value="loginContextDto.clientName"
-            disabled="true"
-            class="form-control"
-          />
-        </div>
-
-        <div
-          v-if="assetConfigDto != null && assetConfigDto.id != null"
-          class="form-group"
-        >
-          <label>{{
-            $t("lang.assetBasicSetting.printPictureOfAssetCard")
-          }}</label>
-          <div class="input-group">
-            <ImageEditor
-              :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-              :record-id="assetConfigDto.id"
-              :field-name="'imageName'"
-              :readonly="isdisable"
-              :image-name="imageName"
-            />
-          </div>
-        </div>
-
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.enableDepreciation"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />{{ $t("lang.assetBasicSetting.depreciationOfThisSet") }}
-          </label>
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.companyPrefix") }}</label>
-          <input
-            v-model="assetConfigDto.clientPrefix"
-            autocomplete="off"
-            type="text"
-            :disabled="isdisable"
-            class="form-control"
-          />
-        </div>
-
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.enableAssetCheck"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />{{
-              $t("lang.assetBasicSetting.enableAssetAcceptanceAndWarehousing")
-            }}
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.showUnrecognizedAssets"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />{{
-              $t("lang.assetBasicSetting.assetCountShowsUnrecognizedAsset")
-            }}
-          </label>
-        </div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.minimumTimeForAssetCollectionAndReturn")
-          }}</label>
-          <input
-            v-model="assetConfigDto.assetInstanceStockInAndStockOutMinTime"
-            autocomplete="off"
-            type="number"
-            :disabled="isdisable"
-            class="form-control"
+  <div class="container">
+    <Navbar :title="$t('lang.assetBasicSetting.assetConfig')" :is-go-back="false" />
+
+    <a-tabs v-model:activeKey="functionType" @change="selectPage">
+      <a-tab-pane key="1" :tab="$t('lang.assetBasicSetting.baseInformation')" />
+      <a-tab-pane key="2" :tab="$t('lang.assetBasicSetting.depreciationInformation')" />
+      <a-tab-pane key="3" :tab="$t('lang.assetBasicSetting.encodingMethod')" />
+      <a-tab-pane key="4" :tab="$t('lang.assetBasicSetting.systemIntegration')" />
+      <a-tab-pane key="5" :tab="$t('lang.assetBasicSetting.picture')" />
+    </a-tabs>
+
+    <div v-show="functionType === '1'">
+      <!-- 基础信息 -->
+      <a-form layout="vertical">
+        <a-form-item :label="$t('lang.assetBasicSetting.setNo')">
+          <a-input v-model:value="loginContextDto.accountId" disabled />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.setName')">
+          <a-input v-model:value="loginContextDto.accountName" disabled />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.userClient')">
+          <a-input v-model:value="loginContextDto.clientName" disabled />
+        </a-form-item>
+
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard')">
+          <ImageEditor
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName" :readonly="isDisabled" :image-name="imageName"
           />
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.allowOrganizationBatchChange"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />{{
-              $t(
-                "lang.assetBasicSetting.batchGenerationOfDepartmentChangeDocuments"
-              )
-            }}
-          </label>
-        </div>
-      </div>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.enableDepreciation" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.depreciationOfThisSet") }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.companyPrefix')">
+          <a-input v-model:value="assetConfigDto.clientPrefix" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.enableAssetCheck" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.enableAssetAcceptanceAndWarehousing") }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.showUnrecognizedAssets" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.assetCountShowsUnrecognizedAsset") }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.minimumTimeForAssetCollectionAndReturn')">
+          <a-input v-model:value="assetConfigDto.assetInstanceStockInAndStockOutMinTime" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.allowOrganizationBatchChange" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.batchGenerationOfDepartmentChangeDocuments") }}
+          </a-checkbox>
+        </a-form-item>
+      </a-form>
     </div>
-    <div v-show="functionType == 2">
-      <div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.mainDepreciationMethods")
-          }}</label>
-          <select
-            v-model="assetConfigDto.depreciationMethod"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option
-              v-for="depreciationMethodDto in depreciationMethodDtos"
-              :key="depreciationMethodDto.id"
-            >
-              {{ depreciationMethodDto.text }}
-            </option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.depreciationSummaryAllocationPeriod")
-          }}</label>
-          <select
-            v-model="assetConfigDto.depreciationDistributionPeriod"
-            :disabled="isdisable"
-            class="form-control"
-          >
-            <option>{{ $t("lang.assetBasicSetting.one") }}</option>
-            <option>{{ $t("lang.assetBasicSetting.two") }}</option>
-            <option>{{ $t("lang.assetBasicSetting.three") }}</option>
-            <option>{{ $t("lang.assetBasicSetting.four") }}</option>
-            <option>{{ $t("lang.assetBasicSetting.six") }}</option>
-            <option>{{ $t("lang.assetBasicSetting.twelve") }}</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.nextDepreciationAllocationMonth")
-          }}</label>
-          <Date
-            v-model="assetConfigDto.nextDeprecitonDistributionDate"
-            :readonly="isdisable"
-          />
-        </div>
 
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.monthOfOpeningASet") }}</label>
-          <Date
-            v-model="assetConfigDto.depreciationStartDate"
-            :readonly="isdisable"
+    <div v-show="functionType === '2'">
+      <a-form layout="vertical">
+        <a-form-item :label="$t('lang.assetBasicSetting.mainDepreciationMethods')">
+          <a-select
+            v-model:value="assetConfigDto.depreciationMethod" :field-names="{ label: 'text', value: 'text' }"
+            :disabled="isDisabled" :options="depreciationMethodDtos"
           />
-        </div>
-
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.orginalValueChangeActiveCurrentMonth"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />
-            {{
-              $t(
-                "lang.assetBasicSetting.changesInOriginalValueTakeEffectInTheCurrentPeriod"
-              )
-            }}
-          </label>
-        </div>
-
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.netSalvageChangeActiveCurrentMonth"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.depreciationSummaryAllocationPeriod')">
+          <a-select v-model:value="assetConfigDto.depreciationDistributionPeriod" :disabled="isDisabled">
+            <a-select-option :value="$t('lang.assetBasicSetting.one')">
+              {{ $t("lang.assetBasicSetting.one") }}
+            </a-select-option>
+            <a-select-option :value="$t('lang.assetBasicSetting.two')">
+              {{ $t("lang.assetBasicSetting.two") }}
+            </a-select-option>
+            <a-select-option :value="$t('lang.assetBasicSetting.three')">
+              {{ $t("lang.assetBasicSetting.three") }}
+            </a-select-option>
+            <a-select-option :value="$t('lang.assetBasicSetting.four')">
+              {{ $t("lang.assetBasicSetting.four") }}
+            </a-select-option>
+            <a-select-option :value="$t('lang.assetBasicSetting.six')">
+              {{ $t("lang.assetBasicSetting.six") }}
+            </a-select-option>
+            <a-select-option :value="$t('lang.assetBasicSetting.twelve')">
+              {{ $t("lang.assetBasicSetting.twelve") }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.nextDepreciationAllocationMonth')">
+          <Date v-model="assetConfigDto.nextDeprecitonDistributionDate" :readonly="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.monthOfOpeningASet')">
+          <Date v-model="assetConfigDto.depreciationStartDate" :readonly="isDisabled" />
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.orginalValueChangeActiveCurrentMonth" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.changesInOriginalValueTakeEffectInTheCurrentPeriod") }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.netSalvageChangeActiveCurrentMonth" :disabled="isDisabled">
             {{ $t("lang.assetBasicSetting.theAdjustment") }}
-          </label>
-        </div>
-
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="
-                assetConfigDto.accumulateDepreciationChangeActiveCurrentMonth
-              "
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox
+            v-model:checked="assetConfigDto.accumulateDepreciationChangeActiveCurrentMonth"
+            :disabled="isDisabled"
+          >
             {{ $t("lang.assetBasicSetting.depreciationEffectiveAdjustment") }}
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="assetConfigDto.reservedValueDepreciateInLastMonth"
-              autocomplete="off"
-              type="checkbox"
-              :disabled="isdisable"
-            />{{ $t("lang.assetBasicSetting.When") }}
-          </label>
-        </div>
-      </div>
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="assetConfigDto.reservedValueDepreciateInLastMonth" :disabled="isDisabled">
+            {{ $t("lang.assetBasicSetting.When") }}
+          </a-checkbox>
+        </a-form-item>
+      </a-form>
     </div>
-    <div v-show="functionType == 3">
-      <div>
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.assetCategoryCodingMethod") }}({{
-            $t("lang.assetBasicSetting.totalLength")
-          }}:{{ getTotalNum(assetConfigDto.assetCategoryNoEncode) }})</label>
-          <input
-            v-model="assetConfigDto.assetCategoryNoEncode"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.assetNumberCodingMethod")
-          }}</label>
-          <div class="radio">
-            <label>
-              <input
-                v-model="assetConfigDto.assetNoAutoEncode"
-                autocomplete="off"
-                type="radio"
-                name="codeType"
-                value="false"
-                :checked="!assetConfigDto.assetNoAutoEncode"
-                :disabled="isdisable"
-              />{{ $t("lang.assetBasicSetting.manualEncoding") }}
-            </label>
-          </div>
-          <div class="radio">
-            <label>
-              <input
-                v-model="assetConfigDto.assetNoAutoEncode"
-                autocomplete="off"
-                type="radio"
-                name="codeType"
-                value="true"
-                :checked="assetConfigDto.assetNoAutoEncode"
-                :disabled="isdisable"
-              />{{ $t("lang.assetBasicSetting.automaticCoding") }}
-            </label>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.assetCodeCategory") }}</label>
-          <select
-            v-model="assetConfigDto.assetCodeType"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="CATEGORYNO_SERIALNO">
-              {{ $t("lang.assetBasicSetting.categoryNumberAndSerialNumber") }}
-            </option>
-            <option value="ORGNIZATIONNO_SERIALNO">
-              {{ $t("lang.assetBasicSetting.departmentNumberAndSerialNumber") }}
-            </option>
-            <option value="CLIENTNO_MANUAL">
-              {{ $t("lang.assetBasicSetting.companyNumberAndManualInput") }}
-            </option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.assetCodeLength") }}</label>
-          <input
-            v-model="assetConfigDto.assetNoLength"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.assetSerialNumber") }}</label>
-          <input
-            v-model="assetConfigDto.assetNoSerialNo"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.assetBasicSetting.assetGroupCodingMethod") }}({{
-            $t("lang.assetBasicSetting.totalLength")
-          }}:{{ getTotalNum(assetConfigDto.assetGroupNoEncode) }})</label>
-          <input
-            v-model="assetConfigDto.assetGroupNoEncode"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.assetCardNumberCodingMethod")
-          }}</label>
-          <div class="radio">
-            <label>
-              <input
-                v-model="assetConfigDto.assetInstanceBarCodeAutoEncode"
-                autocomplete="off"
-                type="radio"
-                name="assetInstanceBarCodeAutoEncode"
-                value="false"
-                :checked="!assetConfigDto.assetInstanceBarCodeAutoEncode"
-                :disabled="isdisable"
-              />{{ $t("lang.assetBasicSetting.manualEncoding") }}
-            </label>
-          </div>
-          <div class="radio">
-            <label>
-              <input
-                v-model="assetConfigDto.assetInstanceBarCodeAutoEncode"
-                autocomplete="off"
-                type="radio"
-                name="assetInstanceBarCodeAutoEncode"
-                value="true"
-                :checked="assetConfigDto.assetInstanceBarCodeAutoEncode"
-                :disabled="isdisable"
-              />{{ $t("lang.assetBasicSetting.automaticCoding") }}
-            </label>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.assetCardCodingMethod")
-          }}</label>
-          <select
-            v-model="assetConfigDto.assetInstanceCodeType"
-            class="form-control"
-            :disabled="isdisable"
-          >
-            <option value="ASSET_NO_SERIALNO">
-              {{ $t("lang.assetBasicSetting.assetNumberAndSequenceNumber") }}
-            </option>
-            <option value="CLIENT_ASSET_NO_SERIALNO">
-              {{
-                $t(
-                  "lang.assetBasicSetting.companyPrefixAndAssetNumberAndSequenceNumber"
-                )
-              }}
-            </option>
-            <option value="CODE_DEFINITION">
-              {{
-                $t("lang.assetBasicSetting.calculateAccordingToCodeDefinition")
-              }}
-            </option>
-          </select>
-        </div>
-      </div>
+
+    <div v-show="functionType === '3'">
+      <a-form layout="vertical">
+        <a-form-item
+          :label="$t('lang.assetBasicSetting.assetCategoryCodingMethod') + '(' + $t('lang.assetBasicSetting.totalLength') + ':' +
+            getTotalNum(assetConfigDto.assetCategoryNoEncode) + ')'"
+        >
+          <a-input v-model:value="assetConfigDto.assetCategoryNoEncode" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetNumberCodingMethod')">
+          <a-radio-group v-model:value="assetConfigDto.assetNoAutoEncode" :disabled="isDisabled">
+            <a-radio :value="false">{{ $t('lang.assetBasicSetting.manualEncoding') }}</a-radio>
+            <a-radio :value="true">{{ $t('lang.assetBasicSetting.automaticCoding') }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetCodeCategory')">
+          <a-select v-model:value="assetConfigDto.assetCodeType" :disabled="isDisabled">
+            <a-select-option value="CATEGORYNO_SERIALNO">
+              {{ $t('lang.assetBasicSetting.categoryNumberAndSerialNumber') }}
+            </a-select-option>
+            <a-select-option value="ORGNIZATIONNO_SERIALNO">
+              {{ $t('lang.assetBasicSetting.departmentNumberAndSerialNumber') }}
+            </a-select-option>
+            <a-select-option value="CLIENTNO_MANUAL">
+              {{ $t('lang.assetBasicSetting.companyNumberAndManualInput') }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetCodeLength')">
+          <a-input v-model:value="assetConfigDto.assetNoLength" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetSerialNumber')">
+          <a-input v-model:value="assetConfigDto.assetNoSerialNo" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item
+          :label="$t('lang.assetBasicSetting.assetGroupCodingMethod') + '(' + $t('lang.assetBasicSetting.totalLength') + ':' +
+            getTotalNum(assetConfigDto.assetGroupNoEncode) + ')'"
+        >
+          <a-input v-model:value="assetConfigDto.assetGroupNoEncode" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetCardNumberCodingMethod')">
+          <a-radio-group v-model:value="assetConfigDto.assetInstanceBarCodeAutoEncode" :disabled="isDisabled">
+            <a-radio :value="false">{{ $t('lang.assetBasicSetting.manualEncoding') }}</a-radio>
+            <a-radio :value="true">{{ $t('lang.assetBasicSetting.automaticCoding') }}</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.assetCardCodingMethod')">
+          <a-select v-model:value="assetConfigDto.assetInstanceCodeType" :disabled="isDisabled">
+            <a-select-option value="ASSET_NO_SERIALNO">
+              {{ $t('lang.assetBasicSetting.assetNumberAndSequenceNumber') }}
+            </a-select-option>
+            <a-select-option value="CLIENT_ASSET_NO_SERIALNO">
+              {{ $t('lang.assetBasicSetting.companyPrefixAndAssetNumberAndSequenceNumber') }}
+            </a-select-option>
+            <a-select-option value="CODE_DEFINITION">
+              {{ $t('lang.assetBasicSetting.calculateAccordingToCodeDefinition') }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
     </div>
 
-    <div v-show="functionType == 4">
-      <div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.u8DatabaseLinkString")
-          }}(jdbc:sqlserver://?:?;databaseName=?;user=?;password=?)</label>
-          <input
-            v-model="assetConfigDto.u8DbUrl"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.imageDatabaseLinkString")
-          }}(jdbc:sqlserver://?:?;databaseName=?;user=?;password=?)</label>
-          <input
-            v-model="assetConfigDto.imageJdbc"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-        <div class="form-group">
-          <label>{{
-            $t("lang.assetBasicSetting.imageServerRootDirectory")
-          }}</label>
-          <input
-            v-model="assetConfigDto.imageServerBaseUrl"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            :disabled="isdisable"
-          />
-        </div>
-        <div>
-          <a-button style="margin-bottom: 15px" @click="goDatax">
-            数据源编辑
-          </a-button>
-        </div>
-        <div>
-          <a-button
-            style="margin-bottom: 15px"
-            :disabled="isdisable"
-            @click="initPostgreSQL"
-          >
-            初始化资产监控PostgreSQL时序数据库
-          </a-button>
-        </div>
-      </div>
+    <div v-show="functionType === '4'">
+      <a-form layout="vertical">
+        <a-form-item
+          :label="$t('lang.assetBasicSetting.u8DatabaseLinkString') + '(' + 'jdbc:sqlserver://?:?;databaseName=?;user=?;password=?)'"
+        >
+          <a-input v-model:value="assetConfigDto.u8DbUrl" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item
+          :label="$t('lang.assetBasicSetting.imageDatabaseLinkString') + '(' + 'jdbc:sqlserver://?:?;databaseName=?;user=?;password=?)'"
+        >
+          <a-input v-model:value="assetConfigDto.imageJdbc" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.imageServerRootDirectory')">
+          <a-input v-model:value="assetConfigDto.imageServerBaseUrl" :disabled="isDisabled" />
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.dataSource')">
+          <a-button @click="goDatax">数据源编辑</a-button>
+        </a-form-item>
+
+        <a-form-item :label="$t('lang.assetBasicSetting.timeSeriesDatabase')">
+          <a-button :disabled="isDisabled" @click="initPostgreSQL">初始化资产监控PostgreSQL时序数据库</a-button>
+        </a-form-item>
+      </a-form>
     </div>
 
-    <!-- 新增图片页签 -->
-    <div v-show="functionType == 5">
-      <div
-        v-if="assetConfigDto != null && assetConfigDto.id != null"
-        class="form-group"
-      >
-        <label>{{
-          $t("lang.assetBasicSetting.printPictureOfAssetCard")
-        }}</label>
-        <div class="input-group">
+    <div v-show="functionType === '5'">
+      <a-form layout="vertical">
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard')">
           <ImageEditor
-            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-            :record-id="assetConfigDto.id"
-            :field-name="'imageName'"
-            :readonly="isdisable"
-            :image-name="imageName"
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName" :readonly="isDisabled" :image-name="imageName"
           />
-        </div>
-      </div>
-      <!-- 资产卡片打印图片2 -->
-      <div
-        v-if="assetConfigDto != null && assetConfigDto.id != null"
-        class="form-group"
-      >
-        <label>{{
-          $t("lang.assetBasicSetting.printPictureOfAssetCard2")
-        }}</label>
-        <div class="input-group">
+        </a-form-item>
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard2')">
           <ImageEditor
-            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-            :record-id="assetConfigDto.id"
-            :field-name="'imageName2'"
-            :readonly="isdisable"
-            :image-name="imageName2"
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName2" :readonly="isDisabled" :image-name="imageName2"
           />
-        </div>
-      </div>
-      <!-- 资产卡片打印图片3 -->
-      <div
-        v-if="assetConfigDto != null && assetConfigDto.id != null"
-        class="form-group"
-      >
-        <label>{{
-          $t("lang.assetBasicSetting.printPictureOfAssetCard3")
-        }}</label>
-        <div class="input-group">
+        </a-form-item>
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard3')">
           <ImageEditor
-            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-            :record-id="assetConfigDto.id"
-            :field-name="'imageName3'"
-            :readonly="isdisable"
-            :image-name="imageName3"
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName3" :readonly="isDisabled" :image-name="imageName3"
           />
-        </div>
-      </div>
-      <!-- 资产卡片打印图片4 -->
-      <div
-        v-if="assetConfigDto != null && assetConfigDto.id != null"
-        class="form-group"
-      >
-        <label>{{
-          $t("lang.assetBasicSetting.printPictureOfAssetCard4")
-        }}</label>
-        <div class="input-group">
+        </a-form-item>
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard4')">
           <ImageEditor
-            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-            :record-id="assetConfigDto.id"
-            :field-name="'imageName4'"
-            :readonly="isdisable"
-            :image-name="imageName4"
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName4" :readonly="isDisabled" :image-name="imageName4"
           />
-        </div>
-      </div>
-      <!-- 资产卡片打印图片5 -->
-      <div
-        v-if="assetConfigDto != null && assetConfigDto.id != null"
-        class="form-group"
-      >
-        <label>{{
-          $t("lang.assetBasicSetting.printPictureOfAssetCard5")
-        }}</label>
-        <div class="input-group">
+        </a-form-item>
+        <a-form-item v-if="assetConfigDto?.id" :label="$t('lang.assetBasicSetting.printPictureOfAssetCard5')">
           <ImageEditor
-            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'"
-            :record-id="assetConfigDto.id"
-            :field-name="'imageName5'"
-            :readonly="isdisable"
-            :image-name="imageName5"
+            :class-name="'com.leanwo.prodog.asset.model.AssetConfig'" :record-id="assetConfigDto.id"
+            field-name="imageName5" :readonly="isDisabled" :image-name="imageName5"
           />
-        </div>
-      </div>
+        </a-form-item>
+      </a-form>
     </div>
 
-    <div class="row">
-      <div class="col-md-12">
-        <button class="btn btn-default" @click="changeIsdisabled()">
-          {{
-            isdisable
-              ? $t("lang.assetBasicSetting.edit")
-              : $t("lang.assetBasicSetting.cancelEdit")
-          }}
-        </button>
-        <button
-          :disabled="isdisable"
-          class="btn btn-default"
-          @click="saveAssetConfig()"
-        >
-          {{ $t("lang.assetBasicSetting.determine") }}
-        </button>
-        <button
-          v-show="functionType == 1"
-          class="btn btn-default"
-          @click="regenerateThumbnails()"
-        >
-          {{ $t("lang.assetBasicSetting.regenerateThumbnail") }}
-        </button>
-        <button
-          v-show="functionType == 1"
-          class="btn btn-default"
-          @click="generateAsset()"
-        >
-          {{ $t("lang.assetBasicSetting.generateAsset") }}
-        </button>
-      </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="action-buttons">
+      <a-button @click="changeDisabled">
+        {{ isDisabled ? $t('lang.assetBasicSetting.edit') : $t('lang.assetBasicSetting.cancelEdit') }}
+      </a-button>
+      <a-button type="primary" :disabled="isDisabled" @click="saveAssetConfig">
+        {{ $t('lang.assetBasicSetting.determine') }}
+      </a-button>
+      <a-button v-show="functionType === '1'" @click="regenerateThumbnails">
+        {{ $t('lang.assetBasicSetting.regenerateThumbnail') }}
+      </a-button>
+      <a-button v-show="functionType === '1'" @click="generateAsset">
+        {{ $t('lang.assetBasicSetting.generateAsset') }}
+      </a-button>
     </div>
-    <div v-if="functionType == 1" class="form-group" style="margin-top: 12px">
-      <label>{{
-        $t(
-          "lang.assetBasicSetting.exampleImportAssetCategoriesConfiguredByTheSystem"
-        )
-      }}</label>
-      <div class="input-group">
-        <button class="btn btn-default" @click="importCommonAsset()">
-          {{ $t("lang.assetBasicSetting.importCommonAssetsByCategory") }}
-        </button>
-        <button class="btn btn-default" @click="importDetailAsset()">
-          {{ $t("lang.assetBasicSetting.importDetailedAssetsByCategory") }}
-        </button>
+    <div v-show="functionType === '1'">
+      <div class="action-buttons">
+        <label style="font-size: 14px;">{{
+          $t('lang.assetBasicSetting.exampleImportAssetCategoriesConfiguredByTheSystem') }}</label>
+      </div>
+      <div class="action-buttons">
+        <a-button @click="importCommonAsset">
+          {{ $t('lang.assetBasicSetting.importCommonAssetsByCategory') }}
+        </a-button>
+        <a-button @click="importDetailAsset">
+          {{ $t('lang.assetBasicSetting.importDetailedAssetsByCategory') }}
+        </a-button>
       </div>
     </div>
     <Loading v-if="loading" />
@@ -672,10 +319,10 @@ export default {
   data: function () {
     return {
       pageNo: '1',
-      functionType: 1,
+      functionType: '1',
       loginContextDto: {}, //登录账套dto
       depreciationMethodDtos: [], //所有的折旧方法dto
-      isdisable: true, //是否禁止更改
+      isDisabled: true, //是否禁止更改
       CATEGORYNO_SERIALNO: '', //编码类型
       assetConfigDto: {}, //固定资产系统设置dto
       imageName: undefined,
@@ -976,8 +623,8 @@ export default {
         },
       });
     },
-    changeIsdisabled: function () {
-      this.isdisable = !this.isdisable;
+    changeDisabled: function () {
+      this.isDisabled = !this.isDisabled;
     },
     // 获取主机地址
     getRootPath: function () {
@@ -1005,4 +652,23 @@ export default {
 };
 </script>
 <style scoped>
+.container {
+  padding: 24px;
+}
+
+.action-buttons {
+  margin-top: 8px;
+  display: flex;
+  gap: 12px;
+}
+
+
+:deep(.ant-form-item) {
+  margin-bottom: 4px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 </style>

src/components/archive/AssetBatchOperationModifyContact.vue

@@ -1,70 +1,48 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <Navbar 
-          :title="$t('lang.AssetBatchOperationModifyContact.confirmTheBatchModificationOfTheAssetHolder')" 
-          :is-go-back="true"
-        />
-      </div>
-
-      <div class="grid-item-2">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label for="Modify">
-                  {{ $t('lang.AssetBatchOperationModifyContact.theResponsiblePersonAfterModification') }}
-                </label>
-                <div class="input-group">
-                  <select
-                    v-model="selected" label="name" class="form-control select-text"
-                  >
-                    <option v-for="item in options" :key="item.id" :value="item.id">{{ item.name }}</option>
-                  </select>
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="reason">
-                  {{ $t('lang.AssetBatchOperationModifyContact.modifyReason') }}
-                </label>
-                <input
-                  id="reason"
-                  v-model="reason" autocomplete="off" type="text" class="form-control"
-                  :placeholder="$t('lang.AssetBatchOperationModifyContact.pleaseFillInTheReasonsForTheChanges')"
-                />
-              </div>
-              <div class="form-group">
-                <button
-                  class="btn btn-primary"
-                  @click="resetQuery"
-                >
-                  {{ $t('lang.AssetBatchOperationModifyContact.query') }}
-                </button>
-
-                <button
-                  type="button" class="btn btn-success"
-                  @click="removeAssetChangeWaitDtos"
-                >
-                  {{ $t('lang.AssetBatchOperationModifyContact.cancelModification') }}
-                </button>
-
-                <button
-                  type="button" class="btn btn-info" style="text-align: right;"
-                  @click="confirm"
-                >
-                  {{ $t('lang.AssetBatchOperationModifyContact.confirmationOfModification') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-3">
-        <AssetBatchOperationQueue ref="assetBatchOperationQueue" :change-type="changeType" />
-      </div>
+  <div class="container">
+    <Navbar
+      :title="$t('lang.AssetBatchOperationModifyContact.confirmTheBatchModificationOfTheAssetHolder')"
+      :is-go-back="true"
+    />
+
+    <a-form layout="horizontal" :colon="false" :label-col="{ style: { width: '106px' } }">
+      <a-row :gutter="[18, 0]">
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationModifyContact.theResponsiblePersonAfterModification')"
+            :rules="[{ required: true }]"
+          >
+            <a-select v-model:value="selected" :field-names="{ label: 'name', value: 'id' }" :options="options" />
+          </a-form-item>
+        </a-col>
+
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationScrap.reasonsForScrapping')" :rules="[{ required: true }]">
+            <a-input
+              v-model:value="reason" class="readonly-input"
+              :placeholder="$t('lang.AssetBatchOperationModifyContact.modifyReason')"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-space :size="18" class="action-buttons">
+            <a-button type="primary" @click="resetQuery">
+              {{ $t('lang.AssetBatchOperationModifyContact.query') }}
+            </a-button>
+            <a-button danger @click="removeAssetChangeWaitDtos">
+              {{ $t('lang.AssetBatchOperationModifyContact.cancelModification') }}
+            </a-button>
+            <a-button type="dashed" @click="confirm">
+              {{ $t('lang.AssetBatchOperationModifyContact.confirmationOfModification') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="queue-container">
+      <AssetBatchOperationQueue ref="assetBatchOperationQueue" :change-type="changeType" />
     </div>
+
     <Loading v-if="loading" />
   </div>
 </template>
@@ -74,22 +52,13 @@ import Common from '../../common/Common.js';
 import vSelect from 'vue-select';
 import UserResource from '../../api/base/UserResource.js';
 import AssetInstanceModifyContactsResource from '../../api/asset/AssetInstanceModifyContactsResource.js';
-
-
-
-
-
 import AssetBatchOperationQueue from './AssetBatchOperationQueue.vue';
 import { Notify, Uuid } from 'pc-component-v3';
 
 
 export default {
   components: {
-    
-    
-    
     AssetBatchOperationQueue,
-    
   },
   data: function () {
     return {
@@ -127,23 +96,19 @@ export default {
      * 重置分页，然后查询
      */
     resetQuery: function () {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.$refs.assetBatchOperationQueue.getDatas();
+      this.$refs.assetBatchOperationQueue.getDatas(false, true);
     },
 
-
-
     /**
      * 获取联系人
      */
     getUseUserNameInputList: function () {
       var _self = this;
       UserResource.getAllUsers().then(baseListResponse => {
-        if(baseListResponse.errorCode == 0){
+        if (baseListResponse.errorCode == 0) {
           console.log(baseListResponse.datas);
           _self.options = baseListResponse.datas;
-        }else{
+        } else {
           Notify.error('错误', baseListResponse.errorMessage, false);
         }
       }, errorData => {
@@ -160,7 +125,7 @@ export default {
     confirm: function () {
       var _self = this;
 
-      if (_self.selected== null || _self.selected== '') {
+      if (_self.selected == null || _self.selected == '') {
         Notify.error('错误', '请选择修改后资产保管人。', true);
         return;
       }
@@ -184,29 +149,29 @@ export default {
         });
       }
 
-      _self.loading=true;
+      _self.loading = true;
       AssetInstanceModifyContactsResource.batchGenerate(assetChangeDtos).then(
         baseListResponse => {
-          if(baseListResponse.errorCode == 0){
+          if (baseListResponse.errorCode == 0) {
             _self.message = '共计' + baseListResponse.datas.length + '条资产数据修改成功。';
             Common.showDialog('提示', _self.message, 'success');
             if (baseListResponse.datas.length > 0) {
               let url = Common.getRedirectUrl(
-                '#/desktop/window/202104241350?currPage=1&uuid=' +
-              Uuid.createUUID(),
+                '#/desktop/window1/202104241350?currPage=1&uuid=' +
+                Uuid.createUUID(),
               );
               window.open(url);
             }
-          }else{
+          } else {
             Common.showDialog('提示', baseListResponse.errorMessage, 'error');
           }
           _self.checked = false;
-          _self.loading=false;
-          _self.$refs.assetBatchOperationQueue.getDatas();
-         
+          _self.loading = false;
+          _self.$refs.assetBatchOperationQueue.getDatas(true);
+
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -217,28 +182,55 @@ export default {
 
 
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 80px min-content auto;
-  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-  height: calc(100vh - 80px);
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.readonly-input {
   width: 100%;
 }
-.grid-item-1 {
-  grid-column: 1 / 2;
+
+/* @media (max-width: 768px) {
+  .action-buttons {
+    flex-direction: column;
+  }
+} */
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
+}
+
+:deep(.ant-form-item) {
+  display: flex;
+  margin-bottom: 8px;
 }
 
-.grid-item-2 {
-  grid-column: 1 / 2;
-  padding-bottom: 10px;
+:deep(.ant-form-item-label) {
+  flex: 0 0 106px;
+  padding-right: 8px;
 }
 
-.grid-item-3 {
-  padding-right: 20px;
-  overflow: auto;
-  grid-row: 3/4;
-  grid-column: 1 / 2;
-  height: 100%;
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 220px;
+}
+
+@media (max-width: 768px) {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex-basis: 106px;
+  }
 }
 </style>

src/components/archive/AssetBatchOperationModifyUseStatus.vue

@@ -1,85 +1,53 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <Navbar
-          :title="$t('lang.AssetBatchOperationUseStatusModify.confirmAssetUseStateBatchModification')"
-          :is-go-back="true"
-        />
-      </div>
-
-      <div class="grid-item-2">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label for="floorSelected">
-                  {{ $t('lang.AssetBatchOperationUseStatusModify.theModifiedUsageStatus') }}
-                </label>
-                <select
-                  v-model="useStatusId"
-                  class="form-control select-text"
-                  name="public-choice"
-                >
-                  <option
-                    v-for="useStatus in useStatusList"
-                    :key="useStatus.id"
-                    :value="useStatus.id"
-                  >
-                    {{ useStatus.text }}
-                  </option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="reason">
-                  {{ $t('lang.AssetBatchOperationUseStatusModify.modifyReason') }}
-                </label>
-                <input
-                  id="reason"
-                  v-model="reason"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  :placeholder="$t('lang.AssetBatchOperationUseStatusModify.pleaseFillInTheReasonsForTheChanges')"
-                />
-              </div>
-              <div class="form-group">
-                <button
-                  class="btn btn-primary"
-                  @click="resetQuery"
-                >
-                  {{ $t('lang.AssetBatchOperationUseStatusModify.query') }}
-                </button>
-
-                <button
-                  type="button"
-                  class="btn btn-success"
-                  @click="removeAssetChangeWaitDtos"
-                >
-                  {{ $t('lang.AssetBatchOperationUseStatusModify.cancelModification') }}
-                </button>
-
-                <button
-                  type="button"
-                  class="btn btn-info"
-                  style="text-align: right;"
-                  @click="confirm"
-                >
-                  {{ $t('lang.AssetBatchOperationUseStatusModify.confirmationOfModification') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-3">
-        <AssetBatchOperationQueue
-          ref="assetBatchOperationQueue"
-          :change-type="changeType"
-        />
-      </div>
+  <div class="container">
+    <Navbar
+      :title="$t('lang.AssetBatchOperationUseStatusModify.confirmAssetUseStateBatchModification')"
+      :is-go-back="true"
+    />
+
+    <a-form layout="horizontal" :colon="false" :label-col="{ style: { width: '114px  ' } }">
+      <a-row :gutter="[16, 0]">
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationUseStatusModify.theModifiedUsageStatus')"
+            :rules="[{ required: true }]"
+          >
+            <a-select
+              v-model:value="useStatusId" :field-names="{ label: 'text', value: 'id' }"
+              :options="useStatusList"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationUseStatusModify.modifyReason')"
+            :rules="[{ required: true }]"
+          >
+            <a-input
+              v-model:value="reason"
+              :placeholder="$t('lang.AssetBatchOperationOrganization.pleaseFillInTheReasonForTransfer')"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-space :size="18" class="action-buttons">
+            <a-button type="primary" @click="resetQuery">
+              {{ $t('lang.AssetBatchOperationUseStatusModify.query') }}
+            </a-button>
+            <a-button danger @click="removeAssetChangeWaitDtos">
+              {{ $t('lang.AssetBatchOperationUseStatusModify.cancelModification') }}
+            </a-button>
+            <a-button type="dashed" @click="confirm">
+              {{ $t('lang.AssetBatchOperationUseStatusModify.confirmationOfModification') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="queue-container">
+      <AssetBatchOperationQueue ref="assetBatchOperationQueue" :change-type="changeType" />
     </div>
+
     <Loading v-if="loading" />
   </div>
 </template>
@@ -98,10 +66,6 @@ import AssetBatchOperationQueue from './AssetBatchOperationQueue.vue';
 
 export default {
   components: {
-    
-    
-    
-    
     AssetBatchOperationQueue,
   },
   data: function () {
@@ -137,9 +101,7 @@ export default {
          * 重置分页，然后查询
          */
     resetQuery: function () {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.$refs.assetBatchOperationQueue.getDatas();
+      this.$refs.assetBatchOperationQueue.getDatas(false, true);
     },
 
     // 部门选择框change事件
@@ -154,9 +116,9 @@ export default {
     getUseStatusList: function () {
       var _self = this;
       UseStatusResource.getUseStatus().then(baseListResponse => {
-        if(baseListResponse.errorCode == 0){
+        if (baseListResponse.errorCode == 0) {
           _self.useStatusList = baseListResponse.datas;
-        }else{
+        } else {
           Notify.error('提示', baseListResponse.errorMessage, false);
         }
       }, errorData => {
@@ -196,28 +158,28 @@ export default {
         });
       }
 
-      _self.loading=true;
+      _self.loading = true;
       AssetInstanceModifyStateResource.batchGenerate(assetChangeDtos).then(
         baseListResponse => {
           _self.checked = false;
-          _self.loading=false;
-          if(baseListResponse.errorCode == 0){
+          _self.loading = false;
+          if (baseListResponse.errorCode == 0) {
             _self.message = '共计' + baseListResponse.datas.length + '条资产数据修改成功。';
-            _self.$refs.assetBatchOperationQueue.getDatas();
+            _self.$refs.assetBatchOperationQueue.getDatas(true);
             Common.showDialog('提示', _self.message, 'success');
             if (baseListResponse.datas.length > 0) {
               let url = Common.getRedirectUrl(
-                '#/desktop/window/202104231535?currPage=1&uuid=' +
-                              Uuid.createUUID(),
+                '#/desktop/window1/202104231535?currPage=1&uuid=' +
+                Uuid.createUUID(),
               );
               window.open(url);
             }
-          }else{
+          } else {
             Common.showDialog('提示', baseListResponse.errorMessage, 'error');
           }
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -228,28 +190,71 @@ export default {
 
 
 <style scoped>
-.grid-container {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80px min-content auto;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 80px);
-    width: 100%;
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-card {
+  margin: 16px;
+  flex-shrink: 0;
+}
+
+.table-card {
+  flex: 1;
+  margin: 0 16px 16px;
+  overflow: auto;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.readonly-input {
+  background-color: #f5f5f5;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .search-card {
+    margin: 8px;
+  }
+
+  /* .action-buttons {
+    flex-direction: column;
+  } */
+}
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
 }
-.grid-item-1 {
-    grid-column: 1 / 2;
+
+:deep(.ant-form-item) {
+  display: flex;
+  margin-bottom: 8px;
 }
 
-.grid-item-2 {
-    grid-column: 1 / 2;
-    padding-bottom: 10px;
+:deep(.ant-form-item-label) {
+  flex: 0 0 114px;
+  padding-right: 8px;
 }
 
-.grid-item-3 {
-    padding-right: 20px;
-    overflow: auto;
-    grid-row: 3/4;
-    grid-column: 1 / 2;
-    height: 100%;
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 220px;
+}
+
+@media (max-width: 768px) {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex-basis: 114px;
+  }
 }
 </style>

src/components/archive/AssetBatchOperationOrganization.vue

@@ -1,167 +1,107 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <div>
-          <Navbar
-            :title="$t('lang.AssetBatchOperationOrganization.assetConfirmationBatchTransfer')"
-            :is-go-back="true"
-          />
-        </div>
-      </div>
-
-      <div class="grid-item-2">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label
-                  for="organizationName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.ownerDepartmentAfterTransfer') }}</label>
-                <SearchWidget
-                  :info-window-no="infoWindowNo"
-                  :field="organizationField"
-                  :field-value="organizationFieldValue"
-                  :display-name="organizationField.listDisplayFieldName"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="valueChanged"
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="organizationName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.ownerClientAfterTransfer') }}</label>
-                <input
-                  v-model="organizationName"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 236px"
-                  readonly
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="organizationName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.useDepartmentAfterTransfer') }}</label>
-                <SearchWidget
-                  style="width: 236px;"
-                  :info-window-no="infoWindowNo"
-                  :field="responseOrganizationField"
-                  :field-value="responseOrganizationFieldValue"
-                  :display-name="responseOrganizationField.listDisplayFieldName"
-                  :where-clause-source="whereClauseSource"
-                  @value-changed="responsibilityValueChanged"
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="organizationName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.useClientAfterTransfer') }}</label>
-                <input
-                  v-model="responsibilityOrganizationName"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 236px"
-                  readonly
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="organizationName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.newStorageLocation') }}</label>
-                <SearchWidget
-                  style="width: 236px;"
-                  :info-window-no="locationInfoWindowNo"
-                  :field="locationField"
-                  :field-value="locationFieldValue"
-                  :display-name="locationField.listDisplayFieldName"
-                  :where-clause-source="locationWhereClauseSource"
-                  @value-changed="locationValueChanged"
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="userName"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.personHhandlingAParticularTask') }}</label>
-                <SearchWidget
-                  style="width: 236px;"
-                  :info-window-no="userWindowNo"
-                  :field="userField"
-                  :field-value="userFieldValue"
-                  :display-name="userField.listDisplayFieldName"
-                  :where-clause-source="clientIdWhereClauseSource"
-                  @value-changed="userValueChanged"
-                />
-              </div>
-              <div class="form-group">
-                <label
-                  for="reason"
-                  style="width: 115px"
-                >{{ $t('lang.AssetBatchOperationOrganization.reasonsForTransfer') }}</label>
-                <input
-                  id="reason"
-                  v-model="reason"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  style="width: 236px"
-                  :placeholder="$t('lang.AssetBatchOperationOrganization.pleaseFillInTheReasonForTransfer')"
-                />
-              </div>
-              <div
-                class="form-group"
-                style="margin-top: 5px"
-              >
-                <button
-                  class="btn btn-primary"
-                  @click="resetQuery"
-                >
-                  {{ $t('lang.AssetBatchOperationOrganization.query') }}
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-success"
-                  @click="removeAssetChangeWaitDtos"
-                >
-                  {{ $t('lang.AssetBatchOperationOrganization.cancelTransfer') }}
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-info"
-                  style="text-align: right"
-                  @click="saveAssetChangeWaitDtos"
-                >
-                  {{ $t('lang.AssetBatchOperationOrganization.generateDepartmentChangeDocument') }}
-                </button>
-                <span v-if="assetConfigDto.allowOrganizationBatchChange">
-                  <button
-                    type="button"
-                    class="btn btn-success"
-                    @click="generateAssetAllocate()"
-                  >
-                    {{ $t('lang.AssetBatchOperationOrganization.generateAssetTransferDocument') }}
-                  </button>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-3">
-        <AssetBatchOperationQueue
-          ref="assetBatchOperationQueue"
-          :change-type="changeType"
-        />
-      </div>
+  <div class="container">
+    <Navbar :title="$t('lang.AssetBatchOperationOrganization.assetConfirmationBatchTransfer')" :is-go-back="true" />
+
+    <a-form layout="horizontal" :colon="false" :label-col="{ style: { width: '126px  ' } }">
+      <a-row :gutter="[16, 0]">
+        <!-- 所属部门 -->
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationOrganization.ownerDepartmentAfterTransfer')"
+            :rules="[{ required: true }]"
+          >
+            <SearchWidget
+              :info-window-no="infoWindowNo" :field="organizationField" title-name="转移后的所属部门"
+              :field-value="organizationFieldValue" :display-name="organizationField.listDisplayFieldName"
+              :where-clause-source="whereClauseSource" @value-changed="valueChanged"
+            />
+          </a-form-item>
+        </a-col>
+
+        <!-- 所属单位 -->
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationOrganization.ownerClientAfterTransfer')">
+            <a-input v-model:value="organizationName" readonly class="readonly-input" />
+          </a-form-item>
+        </a-col>
+
+        <!-- 使用部门 -->
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationOrganization.useDepartmentAfterTransfer')"
+            :rules="[{ required: true }]"
+          >
+            <SearchWidget
+              :info-window-no="infoWindowNo" :field="responseOrganizationField"
+              :field-value="responseOrganizationFieldValue" title-name="转移后的使用部门"
+              :display-name="responseOrganizationField.listDisplayFieldName" :where-clause-source="whereClauseSource"
+              @value-changed="responsibilityValueChanged"
+            />
+          </a-form-item>
+        </a-col>
+
+        <!-- 使用单位 -->
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationOrganization.useClientAfterTransfer')">
+            <a-input v-model:value="responsibilityOrganizationName" readonly class="readonly-input" />
+          </a-form-item>
+        </a-col>
+
+        <!-- 存放地点 -->
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationOrganization.newStorageLocation')">
+            <SearchWidget
+              :info-window-no="locationInfoWindowNo" :field="locationField" title-name="新存放地点"
+              :field-value="locationFieldValue" :display-name="locationField.listDisplayFieldName"
+              :where-clause-source="locationWhereClauseSource" @value-changed="locationValueChanged"
+            />
+          </a-form-item>
+        </a-col>
+
+        <!-- 经手人 -->
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationOrganization.personHhandlingAParticularTask')">
+            <SearchWidget
+              :info-window-no="userWindowNo" :field="userField" :field-value="userFieldValue"
+              title-name="调拨经手人" :display-name="userField.listDisplayFieldName"
+              :where-clause-source="clientIdWhereClauseSource" @value-changed="userValueChanged"
+            />
+          </a-form-item>
+        </a-col>
+
+        <!-- 转移原因 -->
+        <a-col>
+          <a-form-item
+            :label="$t('lang.AssetBatchOperationOrganization.reasonsForTransfer')"
+            :rules="[{ required: true }]"
+          >
+            <a-input
+              v-model:value="reason"
+              :placeholder="$t('lang.AssetBatchOperationOrganization.pleaseFillInTheReasonForTransfer')"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+    <!-- 操作按钮 -->
+    <a-space :size="8" class="action-buttons">
+      <a-button type="primary" @click="resetQuery">
+        {{ $t('lang.AssetBatchOperationOrganization.query') }}
+      </a-button>
+      <a-button danger @click="removeAssetChangeWaitDtos">
+        {{ $t('lang.AssetBatchOperationOrganization.cancelTransfer') }}
+      </a-button>
+      <a-button type="primary" @click="saveAssetChangeWaitDtos">
+        {{ $t('lang.AssetBatchOperationOrganization.generateDepartmentChangeDocument') }}
+      </a-button>
+      <a-button v-if="assetConfigDto.allowOrganizationBatchChange" type="primary" @click="generateAssetAllocate">
+        {{ $t('lang.AssetBatchOperationOrganization.generateAssetTransferDocument') }}
+      </a-button>
+    </a-space>
+
+    <!-- 资产队列 -->
+    <div class="queue-container">
+      <AssetBatchOperationQueue ref="assetBatchOperationQueue" :change-type="changeType" />
     </div>
 
     <Loading v-if="loading" />
@@ -180,25 +120,15 @@ import { Notify, Uuid } from 'pc-component-v3';
 
 export default {
   components: {
-    
-    
-    
-    
     AssetBatchOperationQueue,
   },
   data: function () {
     return {
       changeType: 'organizationChange',
       assetConfigDto: [], //固定资产设置Dto
-      pagination: {
-        total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
-      },
       infoWindowNo: '279750',
       whereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'client.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '3',
@@ -206,7 +136,7 @@ export default {
       },
       locationInfoWindowNo: 109494,
       locationWhereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'client.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '3',
@@ -214,7 +144,7 @@ export default {
       },
 
       clientIdWhereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'client.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '3',
@@ -224,11 +154,11 @@ export default {
       userWindowNo: '050408',
       organizationField: {
         name: '',
-        listDisplayFieldName: 'name',
+        listDisplayFieldName: 'organization.name',
       },
       responseOrganizationField: {
         name: '',
-        listDisplayFieldName: 'name',
+        listDisplayFieldName: 'organization.name',
       },
       locationField: {
         name: '',
@@ -258,7 +188,6 @@ export default {
         displayValue: [''],
         fieldType: 'Key',
       },
-      checked: false,
       reason: '',
       locationList: [],
       locationId: undefined,
@@ -282,8 +211,7 @@ export default {
          */
     resetQuery: function () {
       var _self = this;
-      _self.pagination.current_page = 1;
-      _self.$refs.assetBatchOperationQueue.getDatas();
+      _self.$refs.assetBatchOperationQueue.getDatas(false, true);
     },
 
     /**
@@ -294,13 +222,15 @@ export default {
       var _self = this;
       AssetConfigResource.queryAssetConfig().then(
         successData => {
-          if(successData.errorCode == 0) {
+          if (successData.errorCode == 0) {
             _self.assetConfigDto = successData.data;
           } else {
-            Notify.error('提示',successData.errorMessage, false);
+            Notify.error('提示', successData.errorMessage, false);
           }
         },
-        errorData => { },
+        errorData => {
+          Common.processException(errorData);
+        },
       );
     },
 
@@ -308,14 +238,14 @@ export default {
     valueChanged: function (newFieldValue) {
       var _self = this;
       this.organizationFieldValue = newFieldValue;
-      _self.queryClient();
+      if (this.organizationFieldValue.id) _self.queryClient();
     },
 
     //所属部门选择框change事件
     responsibilityValueChanged: function (newResponsibilityFieldValue) {
       var _self = this;
       this.responseOrganizationFieldValue = newResponsibilityFieldValue;
-      _self.queryResponsibilityClient();
+      if (this.responseOrganizationFieldValue.id) _self.queryResponsibilityClient();
     },
 
     /**
@@ -344,13 +274,15 @@ export default {
         organizationId,
       ).then(
         baseObjectResponse => {
-          if(baseObjectResponse.errorCode == 0){
+          if (baseObjectResponse.errorCode == 0) {
             _self.organizationName = baseObjectResponse.data.name;
-          }else{
-            Notify.error('提示',baseObjectResponse.errorMessage, false);
+          } else {
+            Notify.error('提示', baseObjectResponse.errorMessage, false);
           }
         },
-        errorData => { },
+        errorData => {
+          Common.processException(errorData);
+        },
       );
     },
 
@@ -364,13 +296,15 @@ export default {
         organizationId,
       ).then(
         baseObjectResponse => {
-          if(baseObjectResponse.errorCode == 0){
+          if (baseObjectResponse.errorCode == 0) {
             _self.responsibilityOrganizationName = baseObjectResponse.data.name;
-          }else{
-            Notify.error('提示',baseObjectResponse.errorMessage, false);
+          } else {
+            Notify.error('提示', baseObjectResponse.errorMessage, false);
           }
         },
-        errorData => { },
+        errorData => {
+          Common.processException(errorData);
+        },
       );
     },
 
@@ -399,14 +333,14 @@ export default {
       }
 
       if (_self.responseOrganizationFieldValue == undefined ||
-                _self.responseOrganizationFieldValue.id == undefined) {
+        _self.responseOrganizationFieldValue.id == undefined) {
         Notify.error('错误', '请选择转移后的使用部门。', true);
         return;
       } else {
         responseOrganizationId = _self.responseOrganizationFieldValue.id;
       }
 
-      if(_self.reason == null || _self.reason == ''){
+      if (_self.reason == null || _self.reason == '') {
         Notify.error('错误', '转移原因不能为空。', true);
         return;
       }
@@ -449,28 +383,27 @@ export default {
         return;
       }
 
-      _self.loading=true;
+      _self.loading = true;
       AssetChangeResource.saveAssetChanges(assetChangeDtos).then(
         baseListResponse => {
-          if(baseListResponse.errorCode == 0){
+          if (baseListResponse.errorCode == 0) {
             _self.message = '共计' + baseListResponse.datas.length + '条资产数据变动成功。';
             Common.showDialog('提示', _self.message, 'success');
             if (baseListResponse.datas.length > 0) {
               let url = Common.getRedirectUrl(
-                '#/desktop/window/041208?currPage=1&uuid=' +
-                              Uuid.createUUID(),
+                '#/desktop/window1/041208?currPage=1&uuid=' +
+                Uuid.createUUID(),
               );
               window.open(url);
             }
-          }else{
+            _self.$refs.assetBatchOperationQueue.getDatas(true);
+          } else {
             Common.showDialog('提示', baseListResponse.errorMessage, 'error');
           }
-          _self.checked = false;
-          _self.loading=false;
-          _self.$refs.assetBatchOperationQueue.getDatas();
+          _self.loading = false;
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -492,25 +425,24 @@ export default {
         Common.showDialog('提示', '请在表格中勾选待变动数据后再提交。', 'error');
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
 
       AssetAllocateResource.generate(assetChangeDtos).then(
         baseListResponse => {
-          _self.loading=false;
-          _self.checked = false;
-          _self.$refs.assetBatchOperationQueue.getDatas();
-          if(baseListResponse.errorCode == 0){
+          _self.loading = false;
+          _self.$refs.assetBatchOperationQueue.getDatas(true);
+          if (baseListResponse.errorCode == 0) {
             if (baseListResponse.datas.length > 0) {
               let url = Common.getRedirectUrl(
-                '#/desktop/window/041601?currPage=1&uuid=' +
-                            Uuid.createUUID(),
+                '#/desktop/window1/041601?currPage=1&uuid=' +
+                Uuid.createUUID(),
               );
               window.open(url);
             }
           }
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -520,28 +452,71 @@ export default {
 </script>
 
 <style scoped>
-.grid-container {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80px min-content auto;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 80px);
-    width: 100%;
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-card {
+  margin: 16px;
+  flex-shrink: 0;
+}
+
+.table-card {
+  flex: 1;
+  margin: 0 16px 16px;
+  overflow: auto;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.readonly-input {
+  background-color: #f5f5f5;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .search-card {
+    margin: 8px;
+  }
+
+  /* .action-buttons {
+    flex-direction: column;
+  } */
+}
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
 }
-.grid-item-1 {
-    grid-column: 1 / 2;
+
+:deep(.ant-form-item) {
+  display: flex;
+  margin-bottom: 8px;
+}
+
+:deep(.ant-form-item-label) {
+  flex: 0 0 126px;
+  padding-right: 8px;
 }
 
-.grid-item-2 {
-    grid-column: 1 / 2;
-    padding-bottom: 10px;
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 220px;
 }
 
-.grid-item-3 {
-    padding-right: 20px;
-    overflow: auto;
-    grid-row: 3/4;
-    grid-column: 1 / 2;
-    height: 100%;
+@media (max-width: 768px) {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex-basis: 126px;
+  }
 }
 </style>

src/components/archive/AssetBatchOperationQuery.vue

@@ -1,219 +1,65 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <Navbar
-        :title="
-          $t('lang.AssetBatchOperationQuery.batchOfAssets') + changeTypeName
-        "
-        :is-go-back="false"
-      />
-    </div>
+  <div class="container">
+    <!-- 导航栏 -->
+    <Navbar :title="$t('lang.AssetBatchOperationQuery.batchOfAssets') + changeTypeName" :is-go-back="false" />
+
+    <!-- 搜索表单 -->
+    <a-form layout="inline">
+      <a-row :gutter="[32, 2]" justify="start">
+        <!-- 响应式列设置 -->
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationQuery.assetName')">
+            <a-input v-model:value="assetName" @press-enter="resetQuery" />
+          </a-form-item>
+        </a-col>
+
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationQuery.assetNumber')">
+            <a-input v-model:value="assetNo" @press-enter="resetQuery" />
+          </a-form-item>
+        </a-col>
+
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationQuery.cardNumber')">
+            <a-input v-model:value="no" @press-enter="resetQuery" />
+          </a-form-item>
+        </a-col>
+
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationQuery.type')">
+            <a-input v-model:value="type" @press-enter="resetQuery" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+    <a-space :size="8" class="action-buttons">
+      <a-button type="primary" @click="resetQuery">
+        {{ $t("lang.AssetBatchOperationQuery.query") }}
+      </a-button>
+      <a-button type="dashed" @click="addToCache">
+        {{ $t("lang.AssetBatchOperationQuery.joinToBe") }}{{ changeTypeName }}{{ $t("lang.AssetBatchOperationQuery.detailedList") }}
+      </a-button>
+      <a-button class="count-button" @click="goto">
+        {{ $t("lang.AssetBatchOperationQuery.openToWait") }}{{ changeTypeName }}{{ $t("lang.AssetBatchOperationQuery.detailedList") }}
+        <a-badge :count="count" :number-style="{ backgroundColor: '#52c41a' }" />
+      </a-button>
+    </a-space>
+
+    <!-- 数据表格 -->
+    <CommonTable
+      ref="table" :columns="columns" :data-source="assetDtos" :total="pagination.total" :is-select="true" @get-pager="getPageParams"
+      @get-selected="getSelectParams"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'clientName'">
+          {{ record.clientName }} {{ record.organizationName }}
+        </template>
+        <template v-if="column.dataIndex === 'responseClientName'">
+          {{ record.responseClientName }} {{ record.responseOrganizationName }}
+        </template>
+      </template>
+    </CommonTable>
 
-    <div class="grid-item-2">
-      <div class="row" style="margin-top: 10px">
-        <div class="col-md-12">
-          <div class="form-inline">
-            <div class="form-group m-form-group">
-              <label for="assetName" class="m-form-group-label">{{
-                $t("lang.AssetBatchOperationQuery.assetName")
-              }}</label>
-              <div class="form-inline-div">
-                <input
-                  id="assetName"
-                  v-model="assetName"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control form-control-complex form-input"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-            </div>
-            <div class="form-group m-form-group">
-              <label for="assetNo" class="m-form-group-label">{{
-                $t("lang.AssetBatchOperationQuery.assetNumber")
-              }}</label>
-              <div class="form-inline-div">
-                <input
-                  id="assetNo"
-                  v-model="assetNo"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control form-control-complex form-input"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-            </div>
-            <div class="form-group m-form-group">
-              <label for="no" class="m-form-group-label">{{
-                $t("lang.AssetBatchOperationQuery.cardNumber")
-              }}</label>
-              <div class="form-inline-div">
-                <input
-                  id="no"
-                  v-model="no"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control form-control-complex form-input"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-            </div>
-            <div class="form-group m-form-group">
-              <label for="type" class="m-form-group-label">{{
-                $t("lang.AssetBatchOperationQuery.type")
-              }}</label>
-              <div class="form-inline-div">
-                <input
-                  id="type"
-                  v-model="type"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control form-control-complex form-input"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-            </div>
-            <div class="form-group m-form-group">
-              <button class="btn btn-primary m-btn" @click="resetQuery">
-                {{ $t("lang.AssetBatchOperationQuery.query") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-success m-btn"
-                @click="addToCache"
-              >
-                {{ $t("lang.AssetBatchOperationQuery.joinToBe")
-                }}{{ changeTypeName
-                }}{{ $t("lang.AssetBatchOperationQuery.detailedList") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-info m-btn"
-                style="text-align: right"
-                @click="goto"
-              >
-                {{ $t("lang.AssetBatchOperationQuery.openToWait")
-                }}{{ changeTypeName
-                }}{{ $t("lang.AssetBatchOperationQuery.detailedList") }}
-                <span class="badge">{{ count }}</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="grid-item-3">
-      <table
-        :id="tableId"
-        class="fixed-table table table-striped table-bordered"
-      >
-        <thead>
-          <tr>
-            <th style="width: 40px">
-              <input
-                v-model="checked"
-                autocomplete="off"
-                type="checkbox"
-                :checked="checked"
-                @change="selectAll()"
-              />
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.assetName") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.assetNumber") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.cardNumber") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.ownerDepartment") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.useDepartment") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.type") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.projectName") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.assetCategory") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.originalValue") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.placeOfPlacement") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.aLocationToBePlacedIn") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.startDate") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.user") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.specificationUser") }}
-            </th>
-            <th style="width: 150px">
-              {{ $t("lang.AssetBatchOperationQuery.usageStatus") }}
-            </th>
-          </tr>
-        </thead>
-        <tbody v-if="assetDtos.length > 0">
-          <tr
-            v-for="item in assetDtos"
-            :key="item.id"
-            :class="item.isStorageLife"
-          >
-            <td>
-              <input
-                autocomplete="off"
-                type="checkbox"
-                name="checkboxinput"
-                :checked="item.checked"
-                @click="item.checked = !item.checked"
-              />
-            </td>
-            <td>{{ item.name }}</td>
-            <td>{{ item.assetNo }}</td>
-            <td>{{ item.no }}</td>
-            <td>{{ item.clientName }}&nbsp;{{ item.organizationName }}</td>
-            <td>
-              {{ item.responseClientName }}&nbsp;{{
-                item.responseOrganizationName
-              }}
-            </td>
-            <td>{{ item.type }}</td>
-            <td>{{ item.projectItemName }}</td>
-            <td>{{ item.categoryName }}</td>
-            <td>{{ item.orginalValue }}</td>
-            <td>{{ item.savePosition }}</td>
-            <td>{{ item.locationName }}</td>
-            <td>{{ item.depreciationStartDate }}</td>
-            <td>{{ item.useUserName }}</td>
-            <td>{{ item.useUserNameInput }}</td>
-            <td>{{ item.useStatusName }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="grid-item-4">
-      <div class="table-header-right">
-        <VueBootstrapPagination
-          v-if="pagination.last_page > 0"
-          :pagination="pagination"
-          :callback="getDatas"
-          :show-head-and-tail="true"
-        />
-      </div>
-    </div>
     <Loading v-if="loading" />
   </div>
 </template>
@@ -223,9 +69,10 @@ import AssetInstanceResource from '../../api/asset/AssetInstanceResource.js';
 import AssetBatchOperationQueueResource from '../../api/asset/AssetBatchOperationQueueResource.js';
 import Common from '../../common/Common.js';
 import { Uuid } from 'pc-component-v3';
+import CommonTable from '../../common/CommonTable.vue';
 
 export default {
-  components: {},
+  components: { CommonTable },
   data: function () {
     return {
       changeType: '',
@@ -246,6 +93,28 @@ export default {
       count: 0,
       tableId: Uuid.createUUID(),
       loading: false,
+      columns: [
+        { title: this.$t('lang.AssetBatchOperationQuery.assetName'), dataIndex: 'name', width: 160 },
+        { title: this.$t('lang.AssetBatchOperationQuery.assetNumber'), dataIndex: 'assetNo', width: 240 },
+        { title: this.$t('lang.AssetBatchOperationQuery.cardNumber'), dataIndex: 'no', width: 240 },
+        { title: this.$t('lang.AssetBatchOperationQuery.ownerDepartment'), dataIndex: 'clientName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.useDepartment'), dataIndex: 'responseClientName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.type'), dataIndex: 'type', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.projectName'), dataIndex: 'projectItemName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.assetCategory'), dataIndex: 'categoryName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.originalValue'), dataIndex: 'orginalValue', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.placeOfPlacement'), dataIndex: 'savePosition', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.aLocationToBePlacedIn'), dataIndex: 'locationName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.startDate'), dataIndex: 'depreciationStartDate', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.user'), dataIndex: 'useUserName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.specificationUser'), dataIndex: 'useUserNameInput', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQuery.usageStatus'), dataIndex: 'useStatusName', width: 150 },
+      ].map(column => ({
+        ...column,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
     };
   },
 
@@ -288,8 +157,15 @@ export default {
      */
     resetQuery: function () {
       var _self = this;
-      _self.pagination.current_page = 1;
-      _self.getDatas();
+      _self.$refs.table.backFirstPage();
+    },
+    getPageParams(page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getDatas();
+    },
+    getSelectParams(selected) {
+      this.waitChangeAssetDtos = selected.selectedRows;
     },
 
     /**
@@ -328,7 +204,6 @@ export default {
             _self.loading = false;
             Common.showDialog('提示', baseRangeResponse.errorMessage, 'error');
           }
-          _self.fixedTableHeader();
         },
         errorData => {
           _self.loading = false;
@@ -409,20 +284,10 @@ export default {
             Common.showDialog('提示', baseObjectResponse.errorMessage, 'error');
           }
         },
-        errorData => {},
+        errorData => { },
       );
     },
 
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        $('#' + _self.tableId).tableFixer({ left: 3, head: true });
-      });
-    },
-
     init: function () {
       var _self = this;
       _self.changeType = _self.$route.params.changeType;
@@ -445,16 +310,6 @@ export default {
       _self.tableId = Uuid.createUUID();
 
       _self.getDatas();
-
-      this.fixedTableHeader();
-
-      this.$nextTick(function () {
-        // 可调整表格列宽
-        $('#' + _self.tableId).colResizable({
-          resizeMode: 'overflow',
-          partialRefresh: true,
-        });
-      });
     },
   },
 };
@@ -462,107 +317,26 @@ export default {
 
 
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 50px min-content auto 40px;
-  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-  height: calc(100vh - 80px);
-  width: 100%;
-  overflow: hidden;
-}
-
-.grid-item-1 {
-  grid-column: 1 / 2;
-}
-
-.grid-item-2 {
-  grid-column: 1 / 2;
-  padding-bottom: 10px;
-}
-
-.grid-item-3 {
-  padding-right: 20px;
+.container {
   overflow: hidden;
-  grid-row: 3/4;
-  grid-column: 1 / 2;
-  height: 100%;
-}
-
-.grid-item-4 {
-  padding-top: 10px;
-  grid-column: 1 / 2;
-}
-
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
 }
 
-table.fixed-table tr {
-  height: 40px;
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
+.count-button {
   white-space: nowrap;
-  text-overflow: ellipsis;
-}
-</style>
-
-<style scoped>
-.m-form-group {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  margin-bottom: 5px !important;
-}
-
-@media (max-width: 768px) {
-  .m-form-group-label {
-    text-align: left;
-    padding-right: 10px;
-  }
-}
-
-@media (min-width: 768px) {
-  .m-form-group-label {
-    width: 100px;
-    text-align: center;
-    padding-right: 10px;
-  }
-
-  .input-switches {
-    width: 100%;
-  }
-}
-
-.form-control-complex {
-  width: 200px !important;
-}
-
-.form-input {
-  border-radius: 4px !important;
-}
-
-.m-form-input {
-  border-radius: 4px !important;
-  width: 200px !important;
-}
-
-.form-inline-div {
-  display: inline-block;
-  height: 34px;
 }
 
-.m-btn {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  margin-bottom: 5px !important;
+:deep(.ant-col) {
+  margin-bottom: 4px !important;
 }
 
-.table-header-right {
-  float: right;
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 500 !important;
 }
 </style>

src/components/archive/AssetBatchOperationQueue.vue

@@ -1,129 +1,31 @@
 <template>
-  <div style="height: 100%">
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <table
-          :id="tableId"
-          class="fixed-table table table-striped table-bordered"
-        >
-          <thead>
-            <tr>
-              <th style="width: 40px">
-                <input
-                  v-model="checked"
-                  autocomplete="off"
-                  type="checkbox"
-                  :checked="checked"
-                  @change="selectAll()"
-                />
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.assetName") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.assetNumber") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.cardNumber") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.ownerDepartment") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.useDepartment") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.type") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.projectName") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.assetCategory") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.originalValue") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.placeOfPlacement") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.aLocationToBePlacedIn") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.startDate") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.user") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.userInput") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetBatchOperationQueue.usageStatus") }}
-              </th>
-            </tr>
-          </thead>
-          <tbody v-if="assetChangeWaitDtos.length > 0">
-            <tr v-for="item in assetChangeWaitDtos" :key="item.id">
-              <td>
-                <input
-                  autocomplete="off"
-                  type="checkbox"
-                  name="checkboxinput"
-                  :checked="item.checked"
-                  @click="item.checked = !item.checked"
-                />
-              </td>
-              <td>{{ item.assetSimpleResponse.name }}</td>
-              <td>{{ item.assetSimpleResponse.assetNo }}</td>
-              <td>{{ item.assetSimpleResponse.no }}</td>
-              <td>
-                {{ item.assetSimpleResponse.clientName }}&nbsp;{{
-                  item.assetSimpleResponse.organizationName
-                }}
-              </td>
-              <td>
-                {{ item.assetSimpleResponse.responseClientName }}&nbsp;{{
-                  item.assetSimpleResponse.responseOrganizationName
-                }}
-              </td>
-              <td>{{ item.assetSimpleResponse.type }}</td>
-              <td>{{ item.assetSimpleResponse.projectItemName }}</td>
-              <td>{{ item.assetSimpleResponse.categoryName }}</td>
-              <td>{{ item.assetSimpleResponse.orginalValue }}</td>
-              <td>{{ item.assetSimpleResponse.savePosition }}</td>
-              <td>{{ item.assetSimpleResponse.locationName }}</td>
-              <td>{{ item.assetSimpleResponse.depreciationStartDate }}</td>
-              <td>{{ item.assetSimpleResponse.useUserName }}</td>
-              <td>{{ item.assetSimpleResponse.useUserNameInput }}</td>
-              <td>{{ item.assetSimpleResponse.useStatusName }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="grid-item-2">
-        <VueBootstrapPagination
-          v-if="pagination.last_page > 0"
-          :pagination="pagination"
-          :callback="getDatas"
-          :show-head-and-tail="true"
-        />
-      </div>
-    </div>
-
-    <Loading v-if="loading" />
-  </div>
+  <CommonTable
+    ref="table" :columns="columns" :data-source="assetChangeWaitDtos" :total="pagination.total"
+    :is-select="true" @get-pager="getPageParams" @get-selected="getSelectParams"
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'clientName'">
+        {{ record.clientName }} {{ record.organizationName }}
+      </template>
+      <template v-if="column.dataIndex === 'responseClientName'">
+        {{ record.responseClientName }} {{ record.responseOrganizationName }}
+      </template>
+    </template>
+  </CommonTable>
+
+  <Loading v-if="loading" />
 </template>
 
 <script>
 import AssetBatchOperationQueueResource from '../../api/asset/AssetBatchOperationQueueResource.js';
 import Common from '../../common/Common.js';
 import { Uuid } from 'pc-component-v3';
+import CommonTable from '../../common/CommonTable.vue';
 
 export default {
-  components: {},
+  components: {
+    CommonTable,
+  },
 
   props: {
     changeType: {
@@ -144,17 +46,36 @@ export default {
       checked: false,
       tableId: Uuid.createUUID(),
       loading: false,
+      columns: [
+        { title: this.$t('lang.AssetBatchOperationQueue.assetName'), dataIndex: 'name', width: 160 },
+        { title: this.$t('lang.AssetBatchOperationQueue.assetNumber'), dataIndex: 'assetNo', width: 240 },
+        { title: this.$t('lang.AssetBatchOperationQueue.cardNumber'), dataIndex: 'no', width: 240 },
+        { title: this.$t('lang.AssetBatchOperationQueue.ownerDepartment'), dataIndex: 'clientName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.useDepartment'), dataIndex: 'responseClientName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.type'), dataIndex: 'type', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.projectName'), dataIndex: 'projectItemName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.assetCategory'), dataIndex: 'categoryName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.originalValue'), dataIndex: 'orginalValue', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.placeOfPlacement'), dataIndex: 'savePosition', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.aLocationToBePlacedIn'), dataIndex: 'locationName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.startDate'), dataIndex: 'depreciationStartDate', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.user'), dataIndex: 'useUserName', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.userInput'), dataIndex: 'useUserNameInput', width: 150 },
+        { title: this.$t('lang.AssetBatchOperationQueue.usageStatus'), dataIndex: 'useStatusName', width: 150 },
+      ].map(column => ({
+        ...column,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
+      waitChangeAssetDtos: [],
     };
   },
 
   mounted: function () {
     var _self = this;
     _self.getDatas();
-    this.fixedTableHeader();
-    this.$nextTick(function () {
-      // 可调整表格列宽
-      $('#' + _self.tableId).resizableColumns();
-    });
+
   },
 
   methods: {
@@ -163,39 +84,37 @@ export default {
      */
     resetQuery: function () {
       var _self = this;
-      _self.pagination.current_page = 1;
+      _self.$refs.table.backFirstPage();
+    },
+
+    getPageParams: function (pager, pageSize) {
+      var _self = this;
+      _self.pagination.current_page = pager;
+      _self.pagination.per_page = pageSize;
       _self.getDatas();
     },
 
+    getSelectParams: function (selected) {
+      this.waitChangeAssetDtos = selected.selectedRows;
+      console.log(this.waitChangeAssetDtos);
+    },
+
     /**
      * 调拨经手人框change事件
      */
     userValueChanged: function (newResponsibilityFieldValue) {
-      var _self = this;
       this.userFieldValue = newResponsibilityFieldValue;
     },
 
-    /**
-     * 全选和反选
-     */
-    selectAll: function () {
-      var _self = this;
-      if (_self.checked) {
-        for (var i = 0; i < _self.assetChangeWaitDtos.length; i++) {
-          _self.assetChangeWaitDtos[i].checked = true;
-        }
-      } else {
-        for (var j = 0; j < _self.assetChangeWaitDtos.length; j++) {
-          _self.assetChangeWaitDtos[j].checked = false;
-        }
-      }
-    },
-
     /**
      * /查询数据
      */
-    getDatas: function () {
+    getDatas: function (isClear = false, isClearTable = false) {
       var _self = this;
+      if (isClearTable) {
+        _self.$refs.table.backFirstPage();
+        return;
+      }
       _self.loading = true;
       var param = {
         range: {
@@ -208,23 +127,23 @@ export default {
       AssetBatchOperationQueueResource.listByCondition(param).then(
         baseRangeResponse => {
           if (baseRangeResponse.errorCode == 0) {
-            _self.loading = false;
             _self.pagination.total = baseRangeResponse.total;
             if (baseRangeResponse.datas && baseRangeResponse.datas.length > 0) {
               baseRangeResponse.datas.forEach(function (item) {
-                item.checked = false;
+                item.assetSimpleResponse.assetChangeWaitId = item.id;
               });
-              _self.assetChangeWaitDtos = baseRangeResponse.datas;
-              _self.pagination.last_page = Math.ceil(
-                baseRangeResponse.total / baseRangeResponse.length,
-              );
+              _self.assetChangeWaitDtos = baseRangeResponse.datas.map(item => item.assetSimpleResponse);
             } else {
               _self.assetChangeWaitDtos.splice(0, _self.assetChangeWaitDtos.length);
+              _self.waitChangeAssetDtos.splice(0, _self.waitChangeAssetDtos.length);
+            }
+            if (isClear) {
+              _self.$refs.table.clear();
             }
           } else {
             Common.showDialog('提示', baseRangeResponse.errorMessage, 'error');
           }
-          _self.fixedTableHeader();
+          _self.loading = false;
         },
         errorData => {
           _self.loading = false;
@@ -239,30 +158,33 @@ export default {
     removeAssetChangeWaitDtos: function () {
       var _self = this;
 
-      let waitChangeAssetDtos = [];
-      this.assetChangeWaitDtos.forEach(function (item) {
-        if (item.checked) {
-          waitChangeAssetDtos.push(item);
-        }
-      });
-
-      if (waitChangeAssetDtos.length < 1) {
+      if (_self.waitChangeAssetDtos.length < 1) {
         Common.showDialog('提示', '请选择数据后再提交', 'error');
         return;
       }
       _self.loading = true;
-      if (waitChangeAssetDtos.length > 0) {
-        AssetBatchOperationQueueResource.remove(waitChangeAssetDtos).then(
+      if (_self.waitChangeAssetDtos.length > 0) {
+        let removeDtos = [];
+        _self.waitChangeAssetDtos.forEach(function (item) {
+          let removeDto = {
+            assetSimpleResponse: item,
+            id: item.assetChangeWaitId,
+          };
+          removeDtos.push(removeDto);
+        });
+        AssetBatchOperationQueueResource.remove(removeDtos).then(
           baseListResponse => {
             if (baseListResponse.errorCode == 0) {
-              console.log(baseListResponse);
+              _self.getDatas(true);
+              Common.showDialog('提示', '取消成功', 'success');
+            } else {
+              Common.showDialog('提示', baseListResponse.errorMessage, 'error');
             }
-            _self.checked = false;
             _self.loading = false;
-            _self.getDatas();
           },
           errorData => {
             _self.loading = false;
+            Common.processException(errorData);
           },
         );
       }
@@ -275,68 +197,18 @@ export default {
       var _self = this;
       let assetChangeDtos = [];
 
-      _self.assetChangeWaitDtos.forEach(function (item) {
-        if (item.checked) {
-          let assetChangeDto = {
-            assetInstanceId: item.assetSimpleResponse.id,
-            assetChangeWaitId: item.id,
-          };
-          assetChangeDtos.push(assetChangeDto);
-        }
+      _self.waitChangeAssetDtos.forEach(function (item) {
+        let assetChangeDto = {
+          assetInstanceId: item.id,
+          assetChangeWaitId: item.assetChangeWaitId,
+        };
+        assetChangeDtos.push(assetChangeDto);
       });
 
       return assetChangeDtos;
     },
-
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        $('#' + _self.tableId).tableFixer({ left: 3, head: true });
-      });
-    },
   },
 };
 </script>
 
-<style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: auto 50px;
-  height: 100%;
-  width: 100%;
-  align-items: end;
-}
-.grid-item-1 {
-  padding-right: 20px;
-  overflow: hidden;
-  grid-row: 1/2;
-  grid-column: 1 / 2;
-  height: 100%;
-}
-
-.grid-item-2 {
-  grid-row: 2/3;
-  grid-column: 1 / 2;
-}
-
-.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;
-}
-</style>
+<style scoped></style>

src/components/archive/AssetBatchOperationScrap.vue

@@ -1,85 +1,39 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <Navbar
-          :title="$t('lang.AssetBatchOperationScrap.assetConfirmationBatchScrapping')"
-          :is-go-back="true"
-        />
-      </div>
-
-      <div class="grid-item-2">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label for="floorSelected">
-                  {{ $t('lang.AssetBatchOperationScrap.serviceConditionAfterScrap') }}
-                </label>
-                <select
-                  v-model="useStatusId"
-                  class="form-control select-text"
-                  name="public-choice"
-                >
-                  <option
-                    v-for="useStatus in useStatusList"
-                    :key="useStatus.id"
-                    :value="useStatus.id"
-                  >
-                    {{ useStatus.text }}
-                  </option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="reason">
-                  {{ $t('lang.AssetBatchOperationScrap.reasonsForScrapping') }}
-                </label>
-                <input
-                  id="reason"
-                  v-model="reason"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  :placeholder="$t('lang.AssetBatchOperationScrap.pleaseFillInTheScrapReason')"
-                />
-              </div>
-              <div class="form-group">
-                <button
-                  class="btn btn-primary"
-                  @click="resetQuery"
-                >
-                  {{ $t('lang.AssetBatchOperationScrap.query') }}
-                </button>
-
-                <button
-                  type="button"
-                  class="btn btn-success"
-                  @click="removeAssetChangeWaitDtos"
-                >
-                  {{ $t('lang.AssetBatchOperationScrap.cancelScrapping') }}
-                </button>
-
-                <button
-                  type="button"
-                  class="btn btn-info"
-                  style="text-align: right;"
-                  @click="confirm"
-                >
-                  {{ $t('lang.AssetBatchOperationScrap.confirmScrap') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-3">
-        <AssetBatchOperationQueue
-          ref="assetBatchOperationQueue"
-          :change-type="changeType"
-        />
-      </div>
+  <div class="container">
+    <Navbar :title="$t('lang.AssetBatchOperationScrap.assetConfirmationBatchScrapping')" :is-go-back="true" />
+
+    <a-form layout="horizontal" :colon="false" :label-col="{ style: { width: '126px' } }">
+      <a-row :gutter="[18, 0]">
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationScrap.serviceConditionAfterScrap')">
+            <a-select v-model:value="useStatusId" :field-names="{ label: 'text', value: 'id' }" :options="useStatusList" />
+          </a-form-item>
+        </a-col>
+
+        <a-col>
+          <a-form-item :label="$t('lang.AssetBatchOperationScrap.reasonsForScrapping')">
+            <a-input
+              v-model:value="reason" class="readonly-input"
+              :placeholder="$t('lang.AssetBatchOperationScrap.pleaseFillInTheScrapReason')"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-space :size="18" class="action-buttons">
+            <a-button type="primary" @click="removeAssetChangeWaitDtos">
+              {{ $t('lang.AssetBatchOperationScrap.cancelScrapping') }}
+            </a-button>
+            <a-button danger @click="confirm">
+              {{ $t('lang.AssetBatchOperationScrap.confirmScrap') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="queue-container">
+      <AssetBatchOperationQueue ref="assetBatchOperationQueue" :change-type="changeType" />
     </div>
+
     <Loading v-if="loading" />
   </div>
 </template>
@@ -93,11 +47,6 @@ import AssetBatchOperationQueue from './AssetBatchOperationQueue.vue';
 
 export default {
   components: {
-    
-    
-    
-    
-    
     AssetBatchOperationQueue,
   },
   data: function () {
@@ -114,7 +63,6 @@ export default {
         name: '',
         listDisplayFieldName: 'name',
       },
-      checked: false,
       useStatusList: [],
       useStatusId: undefined,
       reason: '',
@@ -134,14 +82,11 @@ export default {
          * 重置分页，然后查询
          */
     resetQuery: function () {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.$refs.assetBatchOperationQueue.getDatas();
+      this.$refs.assetBatchOperationQueue.getDatas(false, true);
     },
 
     // 部门选择框change事件
     valueChanged: function (newFieldValue) {
-      var _self = this;
       this.fieldValue = newFieldValue;
     },
 
@@ -151,9 +96,9 @@ export default {
     getUseStatusList: function () {
       var _self = this;
       UseStatusResource.getUseStatus().then(baseListResponse => {
-        if(baseListResponse.errorCode == 0){
+        if (baseListResponse.errorCode == 0) {
           _self.useStatusList = baseListResponse.datas;
-        }else{
+        } else {
           Notify.error('提示', baseListResponse.errorMessage, false);
         }
       }, errorData => {
@@ -194,28 +139,27 @@ export default {
         });
       }
 
-      _self.loading=true;
+      _self.loading = true;
       AssetInstanceScrapResource.batchGenerate(assetChangeDtos).then(
         baseListResponse => {
-          if(baseListResponse.errorCode == 0){
+          if (baseListResponse.errorCode == 0) {
             _self.message = '共计' + baseListResponse.datas.length + '条资产数据报废成功。';
             Common.showDialog('提示', _self.message, 'success');
             if (baseListResponse.datas.length > 0) {
               let url = Common.getRedirectUrl(
-                '#/desktop/window/041003?currPage=1&uuid=' +
-                              Uuid.createUUID(),
+                '#/desktop/window1/041003?currPage=1&uuid=' +
+                Uuid.createUUID(),
               );
               window.open(url);
             }
-          }else{
+          } else {
             Common.showDialog('提示', baseListResponse.errorMessage, 'error');
           }
-          _self.checked = false;
-          _self.loading=false;
-          _self.$refs.assetBatchOperationQueue.getDatas();
+          _self.loading = false;
+          _self.$refs.assetBatchOperationQueue.getDatas(true);
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );
@@ -226,28 +170,70 @@ export default {
 
 
 <style scoped>
-.grid-container {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80px min-content auto;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 80px);
-    width: 100%;
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-card {
+  margin: 16px;
+  flex-shrink: 0;
+}
+
+.table-card {
+  flex: 1;
+  margin: 0 16px 16px;
+  overflow: auto;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.readonly-input {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .search-card {
+    margin: 8px;
+  }
+
+  /* .action-buttons {
+    flex-direction: column;
+  } */
+}
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
 }
-.grid-item-1 {
-    grid-column: 1 / 2;
+
+:deep(.ant-form-item) {
+  display: flex;
+  margin-bottom: 8px;
 }
 
-.grid-item-2 {
-    grid-column: 1 / 2;
-    padding-bottom: 10px;
+:deep(.ant-form-item-label) {
+  flex: 0 0 126px;
+  padding-right: 8px;
 }
 
-.grid-item-3 {
-    padding-right: 20px;
-    overflow: auto;
-    grid-row: 3/4;
-    grid-column: 1 / 2;
-    height: 100%;
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 220px;
+}
+
+@media (max-width: 768px) {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex-basis: 126px;
+  }
 }
 </style>

src/components/customer/AssetByRfid.vue

@@ -1,133 +1,55 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <!-- <div class="col-md-12"> -->
-      <!-- <div class="h2 pull-left">资产进出记录</div> -->
-      <div>
-        <Navbar
-          :title="$t('lang.AssetByRfid.assetInAndOutRecords')"
-          :is-go-back="false"
-          style="margin-left: 14px"
-        />
-      </div>
-    </div>
+  <div class="container">
+    <Navbar :title="$t('lang.AssetByRfid.assetInAndOutRecords')" :is-go-back="false" />
 
-    <div class="grid-item-2">
-      <form class="form-inline">
-        <div class="form-group">
-          <label style="margin-left: 14px">{{
-            $t("lang.AssetByRfid.startTime")
-          }}</label>
-          <div style="float: right">
-            <DateTime
-              v-model="startDate"
-              name="datetime"
-              style="float: left"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.AssetByRfid.endTime") }}</label>
-          <div style="float: right">
-            <DateTime
-              v-model="endDate"
-              name="datetime"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>{{ $t("lang.AssetByRfid.storageLocation") }}</label>
-          <div style="float: right">
+    <a-form layout="horizontal" :colon="false" :label-col="{ style: { width: '114px' } }" style="margin-top: 8px">
+      <a-row :gutter="[16, 0]">
+        <a-col>
+          <a-form-item :label="$t('lang.AssetByRfid.startTime')">
+            <DateTime v-model="startDate" name="datetime" style="float: left" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item :label="$t('lang.AssetByRfid.endTime')">
+            <DateTime v-model="endDate" name="datetime" />
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-form-item :label="$t('lang.AssetByRfid.storageLocation')">
             <SearchWidget
-              :info-window-no="289190"
-              :field="field"
-              :field-value="fieldValue"
-              :display-name="field.listFieldNames"
-              :where-clause-source="whereClauseSource"
+              :info-window-no="'289190'" :field="field" :field-value="fieldValue"
+              :display-name="field.listFieldNames" :where-clause-source="whereClauseSource"
               @value-changed="valueChanged"
             />
-          </div>
-        </div>
-        <button
-          type="button"
-          class="btn btn-default"
-          style="margin-top: 1px"
-          @click="search"
-        >
-          {{ $t("lang.AssetByRfid.determine") }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-default"
-          style="margin-top: 1px"
-          @click="exportExcel"
-        >
-          {{ $t("lang.AssetByRfid.export") }}
-        </button>
-      </form>
-    </div>
+          </a-form-item>
+        </a-col>
+        <a-col>
+          <a-space :size="18" class="action-buttons">
+            <a-button type="primary" @click="search">
+              {{ $t("lang.AssetByRfid.determine") }}
+            </a-button>
+            <a-button @click="exportExcel">
+              {{ $t("lang.AssetByRfid.export") }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+    </a-form>
+    <CommonTable :columns="columns" :data-source="assetInstances" :total="assetInstances.length" />
 
-    <div class="grid-item-3">
-      <div class="col-md-12 div-asset-info">
-        <div class="form form-inline time-box">
-          <div class="table-responsive">
-            <table class="table table-striped table-bordered">
-              <thead>
-                <tr height="40px">
-                  <th>{{ $t("lang.AssetByRfid.serialNumber") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.assetName") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.assetNumber") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.assetCategory") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.assetEPC") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.storageLocation") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.startUseTime") }}</th>
-                  <th>{{ $t("lang.AssetByRfid.remarks") }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(item, index) in assetInstances" :key="item.id">
-                  <td>{{ index + 1 }}</td>
-                  <td>{{ item.name }}</td>
-                  <td>{{ item.assetNo }}</td>
-                  <td>{{ item.category }}</td>
-                  <td>{{ item.epc }}</td>
-                  <td>{{ item.locationName }}</td>
-                  <td>{{ item.depreciationStartDate }}</td>
-                  <td>{{ item.description }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../../common/Common.js';
 import { Notify } from 'pc-component-v3';
-
-
-
-
-
-
-
+import CommonTable from '../../common/CommonTable.vue';
 
 export default {
 
   components: {
-    
-    
-    
-    
-    
-    
-    
-    
+    CommonTable,
   },
   data: function () {
     return {
@@ -145,12 +67,49 @@ export default {
         fieldType: 'Key',
       },
       whereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'c.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '1',
         }],
       },
+      loading: false,
+      columns: [
+        {
+          title: this.$t('lang.AssetByRfid.assetName'),
+          dataIndex: 'name',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.assetNumber'),
+          dataIndex: 'assetNo',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.assetCategory'),
+          dataIndex: 'category',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.assetEPC'),
+          dataIndex: 'epc',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.storageLocation'),
+          dataIndex: 'locationName',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.startUseTime'),
+          dataIndex: 'depreciationStartDate',
+        },
+        {
+          title: this.$t('lang.AssetByRfid.remarks'),
+          dataIndex: 'description',
+        },
+      ].map(item => ({
+        ...item,
+        width: 150,
+        align: 'center',
+        ellipsis: true,
+        resizable: true,
+      })),
     };
   },
 
@@ -202,7 +161,7 @@ export default {
      * @param {Object} newFieldValue
      */
     valueChanged: function (newFieldValue) {
-      console.log('newFieldValue',newFieldValue);
+      console.log('newFieldValue', newFieldValue);
       this.fieldValue = newFieldValue;
       this.locationId = newFieldValue.id;
     },
@@ -211,6 +170,7 @@ export default {
      */
     search: function () {
       var _self = this;
+      _self.loading = true;
       $.ajax({
         url: Common.getApiURL('AssetInstanceResource/getAssetByTime'),
         type: 'get',
@@ -225,9 +185,10 @@ export default {
         },
         success: function (data) {
           _self.assetInstances = data;
+          _self.loading = false;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
@@ -244,41 +205,55 @@ export default {
 };
 </script>
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-rows: 8% 8% 84%;
-  grid-template-columns: 100%;
-  width: 100%;
-  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-  height: calc(100vh - 130px);
-  margin-top: 10px;
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.grid-item-1 {
-  grid-row: 1/2;
+.readonly-input {
+  width: 100%;
 }
 
-.grid-item-2 {
-  grid-row: 2/3;
+/* @media (max-width: 768px) {
+  .action-buttons {
+    flex-direction: column;
+  }
+} */
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
 }
 
-.grid-item-3 {
-  grid-row: 3/4;
+:deep(.ant-form-item) {
+  display: flex;
+  margin-bottom: 8px;
 }
 
-.box {
-  border: 1px #ccc solid;
-  margin-bottom: 15px;
-  padding-top: 10px;
-  border-radius: 5px;
-  background-color: #ffffff;
+:deep(.ant-form-item-label) {
+  flex: 0 0 106px;
+  padding-right: 8px;
 }
 
-.label {
-  float: left;
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 220px;
 }
 
-.div-form {
-  margin-bottom: 10px;
+@media (max-width: 768px) {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :deep(.ant-form-item-label) {
+    flex-basis: 106px;
+  }
 }
 </style>

src/components/customer/AssetDetailList.vue

@@ -1,252 +1,142 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <div>
-          <Navbar :title="$t('lang.AssetDetailList.assetList')" :is-go-back="false" />
-        </div>
-      </div>
-
-      <div class="grid-item-2">
-        <div class="btn-group m-panel" role="group">
-          <button type="button" class="btn btn-success" @click="getAsset">
-            {{ $t("lang.AssetDetailList.search") }}
-          </button>
-          <button type="button" class="btn btn-info" @click="openFieldSelectModal">
-            {{ $t("lang.AssetDetailList.export") }}
-          </button>
-          <button type="button" class="btn btn-danger" @click="clearFilter">
-            {{ $t("lang.AssetDetailList.empty") }}
-          </button>
-        </div>
+  <div class="container">
+    <!-- 顶部导航 -->
+    <Navbar :title="$t('lang.AssetDetailList.assetList')" :is-go-back="false" />
+
+    <!-- 操作按钮组 -->
+    <a-space class="action-buttons">
+      <a-button type="primary" @click="getAsset">
+        {{ $t("lang.AssetDetailList.search") }}
+      </a-button>
+      <a-button @click="openFieldSelectModal">
+        {{ $t("lang.AssetDetailList.export") }}
+      </a-button>
+      <a-button danger @click="clearFilter">
+        {{ $t("lang.AssetDetailList.empty") }}
+      </a-button>
+    </a-space>
+
+    <div class="main-layout">
+      <!-- 左侧筛选面板 -->
+      <div class="filter-panel">
+        <a-collapse v-model:activeKey="activePanels" accordion>
+          <!-- 所属部门 -->
+          <a-collapse-panel
+            key="1" :show-arrow="false" :force-render="true"
+            :header="$t('lang.AssetDetailList.ownerDepartment')"
+          >
+            <ClientOrganizationTree ref="organization" @select-changed="selectChanged" />
+          </a-collapse-panel>
+
+          <!-- 使用部门 -->
+          <a-collapse-panel
+            key="3" :show-arrow="false" :force-render="true"
+            :header="$t('lang.AssetDetailList.useDepartment')"
+          >
+            <ClientOrganizationTree ref="responseOrganization" @select-changed="selectChanged" />
+          </a-collapse-panel>
+
+          <!-- 资产分类 -->
+          <a-collapse-panel
+            key="2" :show-arrow="false" :force-render="true"
+            :header="$t('lang.AssetDetailList.assetCategory')"
+          >
+            <AssetCategoryTree ref="assetCategory" @select-changed="selectChanged" />
+          </a-collapse-panel>
+
+          <!-- 项目选择 -->
+          <a-collapse-panel
+            key="5" :show-arrow="false" :force-render="true"
+            :header="$t('lang.AssetDetailList.projectSelection')"
+          >
+            <ProjectItemTree ref="projectItem" @select-changed="selectChanged" />
+          </a-collapse-panel>
+
+          <!-- 其他筛选条件 -->
+          <a-collapse-panel key="4" :show-arrow="false" :force-render="true" :header="$t('lang.AssetDetailList.other')">
+            <a-form layout="vertical">
+              <a-form-item :label="$t('lang.AssetDetailList.assetNumber')">
+                <a-input v-model:value="filter.assetNo1" />
+                <span class="range-symbol">~</span>
+                <a-input v-model:value="filter.assetNo2" />
+              </a-form-item>
+
+              <a-form-item :label="$t('lang.AssetDetailList.originalValue')">
+                <a-input-number v-model:value="filter.orginalValue1" style="width: 100%;" />
+                <span class="range-symbol">~</span>
+                <a-input-number v-model:value="filter.orginalValue2" style="width: 100%;" />
+              </a-form-item>
+
+              <a-form-item :label="$t('lang.AssetDetailList.selfNumbering')">
+                <a-input v-model:value="filter.selfNo" />
+              </a-form-item>
+
+              <a-form-item :label="$t('lang.AssetDetailList.areThereAnyPictures')">
+                <a-select v-model:value="filter.hasImage">
+                  <a-select-option :value="0">{{ $t("lang.AssetDetailList.true") }}</a-select-option>
+                  <a-select-option :value="1">{{ $t("lang.AssetDetailList.false") }}</a-select-option>
+                  <a-select-option :value="2">{{ '' }}</a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item :label="$t('lang.AssetDetailList.scrapCondition')">
+                <a-select v-model:value="filter.hasScrap">
+                  <a-select-option value="All">{{ $t("lang.AssetDetailList.all") }}</a-select-option>
+                  <a-select-option value="Scraped">{{ $t("lang.AssetDetailList.scraped") }}</a-select-option>
+                  <a-select-option value="NotScraped">{{ $t("lang.AssetDetailList.notScraped") }}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-form>
+          </a-collapse-panel>
+        </a-collapse>
       </div>
 
-
-      <div class="grid-item-4">
-        <div class="panel panel-default m-panel">
-          <div class="panel-heading" @click="type == 1 ? (type = 0) : (type = 1)">
-            {{ $t("lang.AssetDetailList.ownerDepartment") }}
-          </div>
-          <div v-show="type == 1" class="panel-body">
-            <div class="m-tree">
-              <ClientOrganizationTree ref="organization" @select-changed="selectChanged" />
-            </div>
-          </div>
-        </div>
-
-        <div class="panel panel-default m-panel">
-          <div class="panel-heading" @click="type == 3 ? (type = 0) : (type = 3)">
-            {{ $t("lang.AssetDetailList.useDepartment") }}
-          </div>
-          <div v-show="type == 3" class="panel-body">
-            <div class="m-tree">
-              <ClientOrganizationTree ref="responseOrganization" @select-changed="selectChanged" />
-            </div>
-          </div>
-        </div>
-
-        <div class="panel panel-default m-panel">
-          <div class="panel-heading" @click="type == 2 ? (type = 0) : (type = 2)">
-            {{ $t("lang.AssetDetailList.assetCategory") }}
-          </div>
-          <div v-show="type == 2" class="panel-body">
-            <div class="m-tree">
-              <AssetCategoryTree ref="assetCategory" @select-changed="selectChanged" />
-            </div>
-          </div>
-        </div>
-
-        <div class="panel panel-default m-panel">
-          <div class="panel-heading" @click="type == 5 ? (type = 0) : (type = 5)">
-            {{ $t("lang.AssetDetailList.projectSelection") }}
-          </div>
-          <div v-show="type == 5" class="panel-body">
-            <div class="m-tree">
-              <ProjectItemTree ref="projectItem" @select-changed="selectChanged" />
-            </div>
-          </div>
-        </div>
-
-        <div class="panel panel-default m-panel">
-          <div class="panel-heading" @click="type == 4 ? (type = 0) : (type = 4)">
-            {{ $t("lang.AssetDetailList.other") }}
-          </div>
-          <div v-show="type == 4" class="panel-body">
-            <div>
-              <!-- <div>
-                <div class="form-group">
-                  <label class="control-label">{{
-                    $t("lang.AssetDetailList.usageStatus")
-                  }}</label>
-                  <select v-model="filter.assetDecrease" class="form-control">
-                    <option value="0">
-                      {{ $t("lang.AssetDetailList.assetsInService") }}
-                    </option>
-                    <option value="1">
-                      {{ $t("lang.AssetDetailList.reducedAssets") }}
-                    </option>
-                    <option value="2" />
-                  </select>
-                </div>
-              </div> -->
-            </div>
-            <div class="form-group">
-              <label class="control-label">
-                {{ $t("lang.AssetDetailList.assetNumber") }}</label>
-              <input v-model="filter.assetNo1" autocomplete="off" type="text" class="form-control" />
-            </div>
-
-            <div class="form-group">
-              <label class="control-label">~</label>
-              <input v-model="filter.assetNo2" autocomplete="off" type="text" class="form-control" />
-            </div>
-            <!-- 
-            <div class="form-group">
-              <label class="control-label">
-                {{ $t("lang.AssetDetailList.startDate") }}</label>
-              <div class="input-group">
-                <Date
-                  v-model="filter.depreciationStartDate1"
-                />
-              </div>
-            </div> -->
-
-            <!-- <div class="form-group">
-              <label class="control-label">~</label>
-              <div class="input-group">
-                <Date
-                  v-model="filter.depreciationStartDate2"
-                />
-              </div>
-            </div> -->
-
-            <div class="form-group">
-              <label class="control-label">
-                {{ $t("lang.AssetDetailList.originalValue") }}</label>
-              <input v-model="filter.orginalValue1" autocomplete="off" type="number" class="form-control" />
-            </div>
-
-            <div class="form-group">
-              <label class="control-label">~</label>
-              <input v-model="filter.orginalValue2" autocomplete="off" type="number" class="form-control" />
-            </div>
-
-            <!-- <div class="form-group">
-              <label class="control-label">
-                {{ $t("lang.AssetDetailList.accumulatedDepreciation") }}</label>
-              <input
-                v-model="filter.totalDepreciationValue1"
-                autocomplete="off"
-                type="number"
-                class="form-control"
-              />
-            </div>
-
-            <div class="form-group">
-              <label class="control-label">~</label>
-              <input
-                v-model="filter.totalDepreciationValue2"
-                autocomplete="off"
-                type="number"
-                class="form-control"
-              />
-            </div> -->
-            <!-- <div class="form-group">
-              <label class="control-label">
-                {{ $t("lang.AssetDetailList.serviceLife") }}</label>
-              <input
-                v-model="filter.estimateUsedMonth1"
-                autocomplete="off"
-                type="number"
-                class="form-control"
-              />
-            </div>
-            <div class="form-group">
-              <label class="control-label">~</label>
-              <input
-                v-model="filter.estimateUsedMonth2"
-                autocomplete="off"
-                type="number"
-                class="form-control"
-              />
-            </div> -->
-
-            <div class="form-group">
-              <label class="control-label">{{
-                $t("lang.AssetDetailList.selfNumbering")
-              }}</label>
-              <input v-model="filter.selfNo" autocomplete="off" type="text" class="form-control" />
-            </div>
-            <!-- <div class="form-group">
-              <label class="control-label">{{
-                $t("lang.AssetDetailList.vehicleNo")
-              }}</label>
-              <input
-                v-model="filter.vehicleNo"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-              />
-            </div> -->
-
-            <div class="form-group">
-              <label class="control-label">{{
-                $t("lang.AssetDetailList.areThereAnyPictures")
-              }}</label>
-              <select v-model="filter.hasImage" class="form-control">
-                <option value="0">{{ $t("lang.AssetDetailList.true") }}</option>
-                <option value="1">
-                  {{ $t("lang.AssetDetailList.false") }}
-                </option>
-                <option value="2" />
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-5">
-        <a-table
-          :columns="columns" :data-source="assets" size="small" :resizable="true" bordered :scroll="tableHeight"
-          :pagination="pagination"
+      <!-- 右侧表格区域 -->
+      <div class="table-container">
+        <CommonTable
+          ref="table" :columns="columns" :data-source="assets" :have-page="false"
+          :extra-height="116"
         />
-      </div>
+        <div class="pagination-row">
+          <AntdPagination ref="paginationRef" :pagination="pagination" size="small" @get-page-params="getPageParams" />
+        </div>
 
-      <div class="grid-item-6">
-        <div class="bg-success m-grid-footer">
+        <!-- 底部统计信息 -->
+        <div class="footer-info">
           {{ $t("lang.AssetDetailList.amountTo") }}:
           {{ $t("lang.AssetDetailList.totalNumberOfCards") }}:{{ totalCount }};
           {{ $t("lang.AssetDetailList.totalAssets") }}:{{ assetNoSize }};
-          {{ $t("lang.AssetDetailList.totalOfOriginalValue") }}:{{
-            orginalValueTotal
-          }}; {{ $t("lang.AssetDetailList.totalNetResidualValue") }}:{{
-            netSalvageTotal
-          }}
+          {{ $t("lang.AssetDetailList.totalOfOriginalValue") }}:{{ orginalValueTotal }};
+          {{ $t("lang.AssetDetailList.totalNetResidualValue") }}:{{ netSalvageTotal }}
         </div>
       </div>
     </div>
-    <div>
-      <Loading v-if="loading" />
-      <Modal v-model:show="modal2" :large="true" @ok="exportData">
-        <template #header>
-          {{ $t("lang.AssetDetailList.selectTheFieldsToExport") }}
-        </template>
-        <div class="row">
-          <div v-for="item in columns" :key="item.id" class="col-md-4 col-lg-4 col-sm-4 col-xs-6 text">
-            <label class="m-label"><input v-model="item.check" autocomplete="off" type="checkbox" /><i>✓</i>{{
-              item.title
-            }}</label>
-          </div>
-        </div>
-        <template #footer>
-          <div style="float: left;">
-            <a-button v-if="!isSelectAll" type="primary" @click="selectAll">全选</a-button>
-            <a-button v-else type="primary" @click="cancelSelect">取消全选</a-button>
-            <a-button style="margin-left: 5px;" @click="commonUsed">常用</a-button>
-          </div>
-        </template>
-      </Modal>
-    </div>
+
+    <!-- 导出字段选择模态框 -->
+    <a-modal v-model:open="modal2" :title="$t('lang.AssetDetailList.selectTheFieldsToExport')" width="80%">
+      <a-row :gutter="16">
+        <a-col v-for="item in columns" :key="item.id" :span="8">
+          <a-checkbox v-model:checked="item.check">
+            {{ item.title }}
+          </a-checkbox>
+        </a-col>
+      </a-row>
+      <template #footer>
+        <a-flex justify="space-between">
+          <a-space>
+            <a-button @click="isSelectAll ? cancelSelect() : selectAll()">
+              {{ isSelectAll ? '取消全选' : '全选' }}
+            </a-button>
+            <a-button @click="commonUsed">常用</a-button>
+          </a-space>
+          <a-space>
+            <a-button @click="modal2 = false">取消</a-button>
+            <a-button type="primary" @click="exportData">确定</a-button>
+          </a-space>
+        </a-flex>
+      </template>
+    </a-modal>
+
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -260,7 +150,7 @@ import { Notify, Uuid, Modal } from 'pc-component-v3';
 import ClientOrganizationTree from '../../widget/ClientOrganizationTree.vue';
 import ProjectItemTree from '../../widget/ProjectItemTree.vue';
 import AssetCategoryTree from '../../widget/AssetCategoryTree.vue';
-
+import CommonTable from '../../common/CommonTable.vue';
 import { ref } from 'vue';
 
 export default {
@@ -270,11 +160,12 @@ export default {
     ProjectItemTree,
     ClientOrganizationTree,
     AssetCategoryTree,
+    CommonTable,
   },
 
   setup() {
     // 设置表格高度
-    const tableHeight = ref({ y: document.body.clientHeight - 300 });
+    const tableHeight = ref({ y: document.body.clientHeight - 290 });
     return {
       tableHeight,
     };
@@ -289,6 +180,7 @@ export default {
       projectItems: [],
       type: null,
       assets: [],
+      activePanels: [],
       filter: {
         assetNo1: '',
         assetNo2: '',
@@ -305,6 +197,7 @@ export default {
         estimateUsedMonth2: null,
         assetDecrease: 2,
         hasImage: 2,
+        hasScrap: 'All',
       },
       additionalHql: '',
       columns: [
@@ -668,23 +561,14 @@ export default {
           align: 'center',
           ellipsis: true,
         },
-      ],
-      // pagination: {
-      //   total: 0,
-      //   per_page: Common.pageSize, // required
-      //   current_page: 1, // required
-      //   last_page: 1, // required
-      // },
+      ].map(column => ({
+        ...column,
+        resizable: true,
+      })),
       pagination: {
-        pageNo: 1,
-        pageSize: 20, // 默认每页显示数量
-        position: ['bottomLeft'],
-        showSizeChanger: true, // 显示可改变每页数量
-        pageSizeOptions: ['20', '50', '100', '150'], // 每页数量选项
-        showTotal: total => `共计 ${total} 条`, // 显示总数
-        onShowSizeChange: (current, pageSize) => this.gridSizeSelect(pageSize), // 改变每页数量时更新显示
-        onChange: (page, pageSize) => this.onPageChange(page, pageSize),//点击页码事件
-        total: 0, //总条数
+        total: 0,
+        per_page: 20, // required
+        current_page: 1, // required
       },
       totalCount: 0,
       assetNoSize: 0,
@@ -728,12 +612,15 @@ export default {
     var _self = this;
 
     _self.initColumn();
+    _self.getAsset();
   },
   methods: {
 
-    onPageChange: function (page, pageSize) {
-      this.pagination.pageNo = page;
-      this.getAsset(true);
+    // 页数改变
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAsset();
     },
 
     selectChanged: function () {
@@ -836,9 +723,6 @@ export default {
     getAsset: function (isPageChange) {
       var _self = this;
 
-      if (!isPageChange) {
-        _self.pagination.pageNo = 1;
-      }
       var projectItemIds = _self.$refs.projectItem.getSelectedIds();
       var organizationIds = _self.$refs.organization.getSelectedIds();
       var responseOrganizationIds =
@@ -875,8 +759,8 @@ export default {
         filter: _self.filter,
         range: {
           start:
-            (_self.pagination.pageNo - 1) * _self.pagination.pageSize,
-          length: _self.pagination.pageSize,
+            (_self.pagination.current_page - 1) * _self.pagination.per_page,
+          length: _self.pagination.per_page,
         },
       };
       $.ajax({
@@ -925,7 +809,7 @@ export default {
         totalSize: 0,
         range: {
           start: 0,
-          length: this.pagination.pageSize,
+          length: this.pagination.per_page,
         },
         totalOrginalValue: 0,
         totalAmountOfImpairment: 0,
@@ -954,7 +838,8 @@ export default {
       this.filter.selfNo = null;
       this.filter.assetDecrease = 2;
       this.initTreeData();
-      this.getAsset();
+      this.$refs.paginationRef.backFirstPage();
+      // this.getAsset();
     },
 
     /**
@@ -970,14 +855,6 @@ export default {
       _self.$refs.assetCategory.initAssetCategory1();
     },
 
-    /**
-     * 修改页Size
-     */
-    gridSizeSelect: function (newPageSize) {
-      this.pagination.pageNo = 1;
-      this.pagination.pageSize = newPageSize;
-      this.getAsset();
-    },
     /**
      * 页数发生变化
      */
@@ -1020,100 +897,76 @@ export default {
       );
     },
   },
-
-  destoryed: function () {
-    var _self = this;
-  },
 };
 </script>
 <style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: 300px auto;
-  grid-template-rows: 50px 40px auto 40px;
-  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-  height: calc(100vh - 85px);
-  width: 100%;
-}
-
-.grid-item-1 {
-  grid-column: 1 / 3;
-  grid-row: 1 / 2;
+.container {
+  display: flex;
+  flex-direction: column;
 }
 
-.grid-item-2 {
-  grid-column: 1 / 2;
-  grid-row: 2 / 3;
+.main-layout {
+  flex: 1;
+  display: flex;
+  gap: 24px;
+  overflow: hidden;
+  /* margin-top: 8px; */
 }
 
-.grid-item-3 {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
+.filter-panel {
+  width: 300px;
+  overflow-y: auto;
+  margin-top: 8px;
 }
 
-.grid-item-4 {
-  padding-right: 10px;
-  overflow-y: scroll;
-  grid-row: 3 / 5;
-  height: 100%;
+.table-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.grid-item-5 {
-  /* padding-right: 10px; */
-  overflow-y: hidden;
-  grid-row: 3 / 4;
-  grid-column: 2/3;
-  height: 100%;
+.footer-info {
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e8e8e8;
+  font-size: 14px;
+  background: #dff0d8;
 }
 
-.grid-item-6 {
-  grid-row: 4 / 5;
-  grid-column: 2 / 3;
+.range-symbol {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
 }
 
-.m-tree {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  padding-left: 10px;
+.pagination-row {
+  margin: 8px;
 }
 
-.m-grid-footer {
-  height: 100%;
-  line-height: 40px;
-  padding-left: 10px;
+:deep(.ant-collapse) {
+  margin-bottom: 16px;
+  background: #fff;
 }
 
-.m-panel {
-  margin-bottom: 8px;
+:deep(.ant-collapse-header) {
+  background: #efefef;
 }
 
-
-
-.m-label {
-  font-size: 16px;
-  cursor: pointer;
+:deep(.ant-collapse-content) {
+  background: #fff;
 }
 
-.m-label i {
-  font-size: 16px;
-  font-style: normal;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  line-height: 16px;
-  color: #fff;
-  vertical-align: middle;
-  margin: -2px 2px 1px 0px;
-  border: #2489c5 1px solid;
-  border-radius: 3px;
+:deep(.ant-collapse-content-box) {
+  max-height: 470px;
+  overflow: auto;
 }
 
-input[type="checkbox"] {
-  display: none;
+:deep(.ant-form-item) {
+  margin-bottom: 4px !important;
 }
 
-input[type="checkbox"]:checked+i {
-  background: #2489c5;
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 500 !important;
 }
 </style>

src/components/customer/AssetInstancePrint.vue

@@ -1,186 +1,38 @@
 <template>
-  <div class="container-fluid">
-    <Navbar
-      :title="$t('lang.AssetInstancePrint.assetCardPrintingQueue')"
-      is-go-back="true"
+  <Navbar :title="$t('lang.AssetInstancePrint.assetCardPrintingQueue')" :is-go-back="true" />
+
+  <a-space>
+    <a-button type="primary" @click="printByPrinter()">
+      {{ $t("lang.AssetInstancePrint.printing") }}
+    </a-button>
+    <a-button @click="printPdf()">
+      {{ $t("lang.AssetInstancePrint.printPdf") }}
+    </a-button>
+    <a-button danger @click="deleteByAssetInstanceIds()">
+      {{ $t("lang.AssetInstancePrint.delete") }}
+    </a-button>
+  </a-space>
+
+  <CommonTable
+    ref="table" :columns="columns" :data-source="assetInstanceDtoList" :total="pagination.total"
+    :is-select="true" @get-pager="getPageParams" @get-selected="getSelectParams"
+  />
+
+  <Modal v-model:show="modal">
+    <template #header>
+      {{ $t("lang.AssetInstancePrint.assetCardPrintingReport") }}
+    </template>
+    <ProcessReportResult
+      v-if="
+        processReportResult != null &&
+          (processReportResult.reportResults != null ||
+            processReportResult.processResult != null)
+      "
+      :process-report-result="processReportResult"
     />
+  </Modal>
 
-    <div class="flex-container">
-      <div class="flex-header">
-        <!-- 按钮 -->
-        <div style="margin-top: 5px; margin-bottom: 5px">
-          <button
-            id="filter"
-            type="button"
-            class="btn btn-default"
-            @click="printByPrinter()"
-          >
-            {{ $t("lang.AssetInstancePrint.printing") }}
-          </button>
-          <button
-            id="filter"
-            type="button"
-            class="btn btn-default"
-            @click="printPdf"
-          >
-            {{ $t("lang.AssetInstancePrint.printPdf") }}
-          </button>
-          <button
-            id="filter"
-            type="button"
-            class="btn btn-default"
-            @click="deleteByAssetInstanceIds()"
-          >
-            {{ $t("lang.AssetInstancePrint.delete") }}
-          </button>
-        </div>
-      </div>
-      <!-- 表格 -->
-      <div class="flex-content">
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 50px">
-                <input
-                  v-model="checked"
-                  autocomplete="off"
-                  type="checkbox"
-                  :checked="!checked"
-                  @change="selectAll()"
-                />
-              </th>
-              <th style="width: 270px">
-                {{ $t("lang.AssetInstancePrint.cardOwnerClient") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.cardOwnerDepartment") }}
-              </th>
-              <th style="width: 270px">
-                {{ $t("lang.AssetInstancePrint.cardUseClient") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.cardUseDepartment") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.assetNumber") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.cardNumber") }}
-              </th>
-              <th style="width: 200px">
-                {{ $t("lang.AssetInstancePrint.epc") }}
-              </th>
-              <th style="width: 165px">
-                {{ $t("lang.AssetInstancePrint.cardName") }}
-              </th>
-              <th style="width: 195px">
-                {{ $t("lang.AssetInstancePrint.categoryName") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.assetName") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.projectName") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.startDate") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.type") }}
-              </th>
-              <th style="width: 80px">
-                {{ $t("lang.AssetInstancePrint.unitOfMeasurement") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInstancePrint.unitPrice") }}
-              </th>
-              <th style="width: 80px">
-                {{ $t("lang.AssetInstancePrint.usageStatus") }}
-              </th>
-              <th style="width: 90px">
-                {{ $t("lang.AssetInstancePrint.user") }}
-              </th>
-              <th style="width: 90px">
-                {{ $t("lang.AssetInstancePrint.user")
-                }}{{ $t("lang.AssetInstancePrint.userInput") }}
-              </th>
-              <th style="width: 150px">
-                {{ $t("lang.AssetInstancePrint.remarks") }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in assetInstanceDtoList" :key="item.id">
-              <td>
-                <input v-model="item.checked" autocomplete="off" type="checkbox" />
-              </td>
-              <td>{{ item.clientName }}</td>
-              <td>{{ item.organizationName }}</td>
-              <td>{{ item.responseClientName }}</td>
-              <td>{{ item.responseOrganizationName }}</td>
-              <td>{{ item.assetNo }}</td>
-              <td>{{ item.no }}</td>
-              <td>{{ item.epc }}</td>
-              <td>{{ item.cardName }}</td>
-              <td>{{ item.categoryName }}</td>
-              <td>{{ item.name }}</td>
-              <td>{{ item.projectItemName }}</td>
-              <td>{{ item.depreciationStartDate }}</td>
-              <td>{{ item.assetInstanceType }}</td>
-              <td>{{ item.computationUnit }}</td>
-              <td>{{ item.orginalValue }}</td>
-              <td>{{ item.useStatusName }}</td>
-              <td>{{ item.useUserName }}</td>
-              <td>{{ item.useUserNameInput }}</td>
-              <td>{{ item.description }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="flex-header-2" style="margin-top: 5px">
-        <div class="m-row">
-          <div class="col-md-12 col-sm-12 col-xs-12">
-            <div class="table-header-left">
-              <span>{{ $t("lang.AssetInstancePrint.the")
-              }}{{
-                (pagination.current_page - 1) * pagination.per_page + 1
-              }}-{{ pagination.current_page * pagination.per_page
-              }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-                $t("lang.AssetInstancePrint.total")
-              }}{{ pagination.total
-              }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-                $t("lang.AssetInstancePrint.displayOnEachPage")
-              }}</span>
-              <PageSizeSelect @page-size-changed="gridSizeSelect" />
-              <span>{{ $t("lang.AssetInstancePrint.strip") }}</span>
-            </div>
-            <div class="table-header-right">
-              <VueBootstrapPagination
-                :pagination="pagination"
-                :callback="getAssetInstancePrint"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <Modal v-model:show="modal">
-      <template #header>
-        {{ $t("lang.AssetInstancePrint.assetCardPrintingReport") }}
-      </template>
-      <ProcessReportResult
-        v-if="
-          processReportResult != null &&
-            (processReportResult.reportResults != null ||
-              processReportResult.processResult != null)
-        "
-        :process-report-result="processReportResult"
-      />
-    </Modal>
-
-    <Loading v-if="loading" />
-  </div>
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -191,20 +43,11 @@ import { ProcessReportResource } from 'pc-component-v3';
 
 import { Notify } from 'pc-component-v3';
 
-
-
-
-
-
-
+import CommonTable from '../../common/CommonTable.vue';
 export default {
 
   components: {
-    
-    
-    
-    
-    
+    CommonTable,
   },
   data: function () {
     this.Common = Common;
@@ -220,6 +63,109 @@ export default {
       processReportResult: {},
       loading: false,
       modal: false,
+      columns: [
+        {
+          title: this.$t('lang.AssetInstancePrint.cardOwnerClient'),
+          dataIndex: 'clientName',
+          width: 270,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.cardOwnerDepartment'),
+          dataIndex: 'organizationName',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.cardUseClient'),
+          dataIndex: 'responseClientName',
+          width: 270,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.cardUseDepartment'),
+          dataIndex: 'responseOrganizationName',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.assetNumber'),
+          dataIndex: 'assetNo',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.cardNumber'),
+          dataIndex: 'no',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.epc'),
+          dataIndex: 'epc',
+          width: 200,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.cardName'),
+          dataIndex: 'cardName',
+          width: 165,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.categoryName'),
+          dataIndex: 'categoryName',
+          width: 195,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.assetName'),
+          dataIndex: 'name',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.projectName'),
+          dataIndex: 'projectItemName',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.startDate'),
+          dataIndex: 'depreciationStartDate',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.type'),
+          dataIndex: 'assetInstanceType',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.unitOfMeasurement'),
+          dataIndex: 'computationUnit',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.unitPrice'),
+          dataIndex: 'orginalValue',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.usageStatus'),
+          dataIndex: 'useStatusName',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.user'),
+          dataIndex: 'useUserName',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.userInput'),
+          dataIndex: 'useUserNameInput',
+          width: 150,
+        },
+        {
+          title: this.$t('lang.AssetInstancePrint.remarks'),
+          dataIndex: 'description',
+          width: 150,
+        },
+      ].map(item => ({
+        ...item,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
+      selectAssetIds: [],
     };
   },
 
@@ -231,53 +177,17 @@ export default {
   mounted: function () {
     this.pagination.current_page = 1;
     this.getAssetInstancePrint();
-
-    this.fixedTableHeader();
-
-    this.$nextTick(function () {
-      // 可调整表格列宽
-      $('.fixed-table').resizableColumns();
-    });
   },
 
   methods: {
-    /**
-     * 20200615
-     * 点击全选
-     */
-    selectAll: function () {
-      var _self = this;
-      for (var i = 0; i < _self.assetInstanceDtoList.length; i++) {
-        _self.assetInstanceDtoList[i].checked = _self.checked;
-        // _self.assetInstanceDtoList[i] = _self.assetInstanceDtoList[i];
-      }
-    },
 
-    /**
-     * 根据选中状态获取recordIds
-     */
-    getSelectedRecordIds: function () {
-      var _self = this;
-      var recordIds = [];
-      for (var i = 0; i < _self.assetInstanceDtoList.length; i++) {
-        if (_self.assetInstanceDtoList[i].checked) {
-          recordIds.push(_self.assetInstanceDtoList[i].id);
-        } else {
-          continue;
-        }
-      }
-      console.log(recordIds);
-      return recordIds;
+    getPageParams(page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInstancePrint();
     },
-
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      let _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({ left: 3, head: true });
-      });
+    getSelectParams(selected) {
+      this.selectAssetIds = selected.selectedRowKeys;
     },
 
     /**
@@ -292,22 +202,18 @@ export default {
 
       AssetInstancePrintResource.findByLoginUserId(range).then(
         baseObjectResponse => {
-          if(baseObjectResponse.errorCode == 0){
-            _self.assetInstanceDtoList = baseObjectResponse.data.dataList;
-
-            _self.assetInstanceDtoList.forEach(function (item) {
-              item.checked = false;
-            });
-
+          if (baseObjectResponse.errorCode == 0) {
+            if (baseObjectResponse.data.dataList.length > 0) {
+              _self.assetInstanceDtoList = baseObjectResponse.data.dataList;
+            } else {
+              _self.assetInstanceDtoList.splice(0, _self.assetInstanceDtoList.length);
+            }
             _self.pagination.total = baseObjectResponse.data.totalSize;
-            _self.pagination.last_page = Math.ceil(
-              baseObjectResponse.data.totalSize / baseObjectResponse.data.range.length,
-            );
-          }else{
+            _self.selectAssetIds = [];
+          } else {
             _self.pagination.total = 0;
             _self.assetInstanceDtoList.splice(0, _self.assetInstanceDtoList.length);
           }
-          _self.fixedTableHeader();
         },
         errorData => {
           Common.processException(errorData);
@@ -320,8 +226,11 @@ export default {
      */
     printByPrinter: function () {
       var _self = this;
-      var recordIds = _self.getSelectedRecordIds();
-
+      var recordIds = _self.selectAssetIds;
+      if (recordIds == null || recordIds.length == 0) {
+        Notify.error('错误', '请在下方的表格中勾选要打印的数据。', 3000);
+        return;
+      }
       //console.log(recordIds);
       var path =
         './#/single/PrintPage?printApi=AssetInstanceResource%2Fprint&recordIds={RecordIds}';
@@ -335,11 +244,16 @@ export default {
      */
     deleteByAssetInstanceIds: function () {
       var _self = this;
-      var recordIds = _self.getSelectedRecordIds();
+      var recordIds = _self.selectAssetIds;
+      if (recordIds == null || recordIds.length == 0) {
+        Notify.error('错误', '请在下方的表格中勾选要打印的数据。', 3000);
+        return;
+      }
 
       AssetInstancePrintResource.deleteByAssetInstanceIds(recordIds).then(
         successData => {
           _self.getAssetInstancePrint();
+          _self.selectAssetIds = [];
         },
         errorData => {
           Common.processException(errorData);
@@ -347,36 +261,27 @@ export default {
       );
     },
 
-    /**
-     * 修改页Size
-     */
-    gridSizeSelect: function (newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      this.getAssetInstancePrint();
-    },
-
     /**
      * 打印PDF
      */
     printPdf: function () {
       var _self = this;
-      var recordIds = _self.getSelectedRecordIds();
+      var recordIds = _self.selectAssetIds;
       if (recordIds == null || recordIds.length == 0) {
-        Notify.error('错误', '请在下方的表格中勾选要打印的数据。', false);
+        Notify.error('错误', '请在下方的表格中勾选要打印的数据。', 3000);
         return;
       }
 
-      _self.loading=true;
+      _self.loading = true;
       // 运行流程和报表
       ProcessReportResource.runProcessByIds('202006161849', recordIds).then(
         successData => {
-          _self.loading=false;
+          _self.loading = false;
           _self.modal = true;
           _self.processReportResult = successData;
         },
         errorData => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(errorData);
         },
       );

src/components/customer/AssetInstanceSearchDetail.vue

@@ -964,7 +964,7 @@ export default {
      */
     openCurdWindow: function (assetInstance) {
       let url = Common.getRedirectUrl(
-        '#/desktop/window/window-read/view/040701/0/' +
+        '#/desktop/window1/window-read/view/040701/0/' +
         assetInstance.assetInstanceId +
         '?currPage=1&currIndex=1&totalCount=1&uuid=' +
         Uuid.createUUID(),

src/components/customer/AssetInventoryLostConfirm.vue

@@ -1,179 +1,93 @@
 <template>
   <div>
-    <Navbar
-      title="盘亏数据确认"
-      is-go-back="true"
-    />
-
-    <div class="grid-container">
-      <div class="grid-item-row1">
-        <div
-          class="btn-group m-panel"
-          role="group"
-        >
-          <div class="form-inline">
-            <div class="form-group">
-              <label for="assetName">资产名称</label>
-              <input
-                id="assetName"
-                v-model="assetName"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="资产名称"
-                @keyup.enter="getAssetInventoryLine(false)"
-              />
-            </div>
-            <div class="form-group">
-              <label for="assetNo">资产编号</label>
-              <input
-                id="assetNo"
-                v-model="assetNo"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="资产编号"
-                @keyup.enter="getAssetInventoryLine(false)"
-              />
-            </div>
-            <div class="form-group">
-              <label for="cardNo">卡片编号</label>
-              <input
-                id="cardNo"
-                v-model="cardNo"
-                autocomplete="off"
-                type="text"
-                class="form-control"
-                placeholder="卡片编号"
-                @keyup.enter="getAssetInventoryLine(false)"
-              />
-            </div>
-            <button
-              class="btn btn-default"
-              @click="getAssetInventoryLine(false)"
-            >
-              查询
-            </button>
-            <button
-              class="btn btn-default"
-              @click="clearFilter"
-            >
-              清空
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="grid-item-row2">
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 130px;">资产名称</th>
-              <th style="width: 130px;">资产编号</th>
-              <th style="width: 130px;">卡片编号</th>
-              <td style="width: 150px;">盘点使用状态</td>
-              <td style="width: 200px;">备注</td>
-              <th style="width: 90px;">账面位置</th>
-              <th style="width: 100px;">账面使用状态</th>
-              <th style="width: 100px;">确认</th>
-              <th style="width: 130px;">规格型号</th>
-              <th style="width: 130px;">类别名称</th>
-              <th style="width: 130px;">责任人</th>
-              <th style="width: 130px;">使用人</th>
-              <th style="width: 130px;">保管人</th>
-              <th style="width: 130px;">所属单位</th>
-              <th style="width: 130px;">所属部门</th>
-              <th style="width: 130px;">使用单位</th>
-              <th style="width: 130px;">使用部门</th>
-              <th style="width: 130px;">详细信息</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(assetInventoryLine, index) in assetInventoryLines"
-              :key="assetInventoryLine.assetInventoryLineId"
-            >
-              <td>{{ assetInventoryLine['资产名称'] }}</td>
-              <td>{{ assetInventoryLine['资产编号'] }}</td>
-              <td>{{ assetInventoryLine['卡片编号'] }}</td>
-              <td>
-                <select
-                  v-model="assetInventoryLine.useStatusId"
-                  class="form-control"
-                  placeholder="盘点使用状态"
-                >
-                  <option
-                    v-for="useStatus in useStatusList"
-                    :key="useStatus.id"
-                    :value="useStatus.id"
-                  >
-                    {{ useStatus.text }}
-                  </option>
-                </select>
-              </td>
-              <td>
-                <input
-                  id="cardNo"
-                  v-model="assetInventoryLine.description"
-                  autocomplete="off"
-                  type="text"
-                  class="form-control"
-                  placeholder="备注"
+    <Navbar title="盘亏数据确认" is-go-back="true" />
+
+    <div>
+      <div class="grid-form-row1">
+        <a-form :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-row :gutter="[8, 14]" justify="space-start">
+            <a-col class="form-item-col">
+              <a-form-item label="资产名称" class="horizontal-form-item">
+                <a-input
+                  v-model:value="assetName"
+                  placeholder="资产名称"
+                  @press-enter="goFirstPage"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col class="form-item-col">
+              <a-form-item label="资产编号" class="horizontal-form-item">
+                <a-input
+                  v-model:value="assetNo"
+                  placeholder="资产编号"
+                  @press-enter="goFirstPage"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col class="form-item-col">
+              <a-form-item label="卡片编号" class="horizontal-form-item">
+                <a-input
+                  v-model:value="cardNo"
+                  placeholder="卡片编号"
+                  @press-enter="goFirstPage"
                 />
-              </td>
-              <td>
-                <button
-                  class="btn btn-default"
-                  @click="updateAssetInventoryLine(assetInventoryLine, index)"
-                >
-                  提交
-                </button>
-              </td>
-              <td>{{ assetInventoryLine['账面位置'] }}</td>
-              <td>{{ assetInventoryLine['账面使用状态'] }}</td>
-              <td>{{ assetInventoryLine['规格型号'] }}</td>
-              <td>{{ assetInventoryLine['类别名称'] }}</td>
-              <td>{{ assetInventoryLine['责任人'] }}</td>
-              <td>{{ assetInventoryLine['使用人'] }}</td>
-              <td>{{ assetInventoryLine['保管人'] }}</td>
-              <td>{{ assetInventoryLine['所属单位'] }}</td>
-              <td>{{ assetInventoryLine['所属部门'] }}</td>
-              <td>{{ assetInventoryLine['使用单位'] }}</td>
-              <td>{{ assetInventoryLine['使用部门'] }}</td>
-              <td>
-                <button
-                  class="btn btn-link"
-                  @click="openCurdWindow(assetInventoryLine)"
-                >
-                  查看
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              </a-form-item>
+            </a-col>
+            <a-col class="form-item-col">
+              <a-form-item class="horizontal-form-item">
+                <a-space>
+                  <a-button
+                    type="primary"
+                    @click="goFirstPage"
+                  >
+                    查询
+                  </a-button>
+                  <a-button @click="clearFilter">清空</a-button>
+                </a-space>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
       </div>
-      <div class="grid-item-row3">
-        <div>
-          <div class="pull-left">
-            <span>
-              {{ $t('lang.AssetInventorySearch.the') }}
-              {{ (pagination.current_page-1)*pagination.per_page+1 }}
-              -
-              {{ pagination.current_page*pagination.per_page }}
-              {{ $t('lang.AssetInventorySearch.strip') }},
-              {{ $t('lang.AssetInventorySearch.inTotal') }}
-              {{ pagination.total }}{{ $t('lang.AssetInventorySearch.strip') }},
-              {{ $t('lang.AssetInventorySearch.eachPage') }}
-            </span>
-            <PageSizeSelect @page-size-changed="pageSizeChanged" />
-            <span>{{ $t('lang.AssetInventorySearch.strip') }}</span>
-          </div>
-          <div class="pull-right">
-            <VueBootstrapPagination
-              :pagination="pagination"
-              :callback="pageStartChanged"
-            />
-          </div>
-        </div>
+
+      <div class="grid-form-row2">
+        <CommonTable
+          ref="tableRef"
+          :columns="columns"
+          :data-source="assetInventoryLines"
+          :total="totalCount"
+          :extra-height="80"
+          @get-pager="getPageParams"
+        >
+          <template #bodyCell="{ column, record, index }">
+            <template v-if="column.dataIndex === 'operation'">
+              <a-select
+                v-model:value="record.useStatusId"
+                placeholder="盘点使用状态"
+                style="width: 100%"
+                :field-names="{ label: 'text', value: 'id' }"
+                allow-clear
+                :options="useStatusList"
+              />
+            </template>
+            <template v-else-if="column.dataIndex === 'description'">
+              <a-input v-model:value="record.description" placeholder="备注" />
+            </template>
+            <template v-else-if="column.dataIndex === 'confirm'">
+              <a-button
+                type="link"
+                @click="updateAssetInventoryLine(record, index)"
+              >
+                提交
+              </a-button>
+            </template>
+            <template v-else-if="column.dataIndex === 'action'">
+              <a-button type="link" @click="openCurdWindow(record)">
+                查看
+              </a-button>
+            </template>
+          </template>
+        </CommonTable>
       </div>
     </div>
 
@@ -187,35 +101,35 @@ import Common from '../../common/Common.js';
 import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
 import AssetInventoryLineResource from '../../api/asset/AssetInventoryLineResource.js';
 
-
-
-
-
-
 import { Notify, Uuid } from 'pc-component-v3';
 
 import { SqlApi } from 'pc-component-v3';
 import { UserStorageResource } from 'pc-component-v3';
 import UseStatusResource from '../../api/asset/UseStatusResource.js';
+import CommonTable from '../../common/CommonTable.vue';
 
+const labelCol = {
+  style: {
+    width: '108px',
+  },
+};
+const wrapperCol = {
+  style: {
+    width: '230px',
+  },
+};
 export default {
-
   components: {
-    
-    
-    
-    
-    
-    
+    CommonTable,
   },
   data: function () {
     return {
       assetInventoryId: null, // 资产盘点单Id
       assetInventory: {}, // 资产盘点
 
-      assetName: null,    // 资产名称
-      assetNo: null,      // 资产编号
-      cardNo: null,       // 卡片编号
+      assetName: null, // 资产名称
+      assetNo: null, // 资产编号
+      cardNo: null, // 卡片编号
 
       assetInventoryLines: [],
       pagination: {
@@ -228,32 +142,55 @@ export default {
       uuid: Uuid.createUUID(),
       useStatusList: [],
       loading: false,
+      columns: [
+        { title: '资产名称', dataIndex: '资产名称', width: 130 },
+        { title: '资产编号', dataIndex: '资产编号', width: 130 },
+        { title: '卡片编号', dataIndex: '卡片编号', width: 130 },
+        { title: '盘点使用状态', dataIndex: 'operation', width: 150 },
+        { title: '备注', dataIndex: 'description', width: 200 },
+        { title: '账面位置', dataIndex: '账面位置', width: 90 },
+        { title: '账面使用状态', dataIndex: '账面使用状态', width: 150 },
+        { title: '确认', dataIndex: 'confirm', width: 130 },
+        { title: '规格型号', dataIndex: '规格型号', width: 130 },
+        { title: '类别名称', dataIndex: '类别名称', width: 130 },
+        { title: '责任人', dataIndex: '责任人', width: 130 },
+        { title: '使用人', dataIndex: '使用人', width: 130 },
+        { title: '保管人', dataIndex: '保管人', width: 130 },
+        { title: '所属单位', dataIndex: '所属单位', width: 130 },
+        { title: '所属部门', dataIndex: '所属部门', width: 130 },
+        { title: '使用单位', dataIndex: '使用单位', width: 130 },
+        { title: '使用部门', dataIndex: '使用部门', width: 130 },
+        { title: '详细信息', dataIndex: 'action', width: 130 },
+      ].map(column => ({
+        ...column,
+        align: 'center',
+        resizable: true,
+        ellipsis: true,
+      })),
     };
   },
 
-
-
   mounted: function () {
     var _self = this;
 
     // 根据UUID获取盘点单的id
     var uuid = _self.$route.params.uuid;
-    UserStorageResource.uniqueByKey(uuid + '_modelData').then(data => {
-      if(data.errorCode != 0) {
-        Notify.error('提示', data.errorMessage, false);
-        return;
-      }
-      if (data.data != null) {
-        var modelData = JSON.parse(data.data);
-        _self.assetInventoryId = modelData.id;
-        _self.getAssetInventory();
-      }
-    }, errorData => {
-      Common.processException(errorData);
-    });
-
-    // 固定行
-    _self.fixedTableHeader();
+    UserStorageResource.uniqueByKey(uuid + '_modelData').then(
+      data => {
+        if (data.errorCode != 0) {
+          Notify.error('提示', data.errorMessage, false);
+          return;
+        }
+        if (data.data != null) {
+          var modelData = JSON.parse(data.data);
+          _self.assetInventoryId = modelData.id;
+          _self.getAssetInventory();
+        }
+      },
+      errorData => {
+        Common.processException(errorData);
+      },
+    );
 
     // 可调整表格列宽
     _self.$nextTick(function () {
@@ -269,69 +206,83 @@ export default {
     },
 
     /**
-         * 查询盘点单DTO,
-         * 主要是获取资产盘点中的所属部门集合、使用部门集合、资产类别结合。
-         * @author yangzhijie 20200806
-         */
+     * 查询盘点单DTO,
+     * 主要是获取资产盘点中的所属部门集合、使用部门集合、资产类别结合。
+     * @author yangzhijie 20200806
+     */
     getAssetInventory: function () {
       var _self = this;
-      AssetInventoryResource.getResponseOrganizationsAndOrganizationsAndCategory(_self.assetInventoryId).then(baseObjectResponse => {
-        if(baseObjectResponse.errorCode == 0){
-          _self.assetInventory = baseObjectResponse.data;
-          // 查询资产卡片的数据
-          _self.getAssetInventoryLine();
-        }else{
-          Notify.error('提示', baseObjectResponse.errorMessage, false);
-        }
-      }, xmlHttpRequest => {
-        Common.processException(xmlHttpRequest);
-      });
+      AssetInventoryResource.getResponseOrganizationsAndOrganizationsAndCategory(
+        _self.assetInventoryId,
+      ).then(
+        baseObjectResponse => {
+          if (baseObjectResponse.errorCode == 0) {
+            _self.assetInventory = baseObjectResponse.data;
+            // 查询资产卡片的数据
+            _self.getAssetInventoryLine();
+          } else {
+            Notify.error('提示', baseObjectResponse.errorMessage, false);
+          }
+        },
+        xmlHttpRequest => {
+          Common.processException(xmlHttpRequest);
+        },
+      );
+    },
+
+    goFirstPage: function () {
+      this.$refs.tableRef.backFirstPage();
     },
 
     /**
-         * 根据界面选中的所属部门、使用部门、资产类别、项目查询资产清单
-         * @author yangzhijie 20200806
-         */
-    getAssetInventoryLine: function (isPageChange) {
+     * 根据界面选中的所属部门、使用部门、资产类别、项目查询资产清单
+     * @author yangzhijie 20200806
+     */
+    getAssetInventoryLine: function () {
       var _self = this;
 
-      if (!isPageChange) {
-        _self.pagination.current_page = 1;
-      }
-
-      _self.clearPageData();
-
-      _self.loading=true;
+      _self.loading = true;
 
       var parameter = {
         assetInventoryId: _self.assetInventoryId,
-        assetNo: (_self.assetNo != null && _self.assetNo.length > 0) ? ('%' + _self.assetNo + '%') : null,
-        assetName: (_self.assetName != null && _self.assetName.length > 0) ? ('%' + _self.assetName + '%') : null,
-        no: (_self.cardNo != null && _self.cardNo.length > 0) ? ('%' + _self.cardNo + '%') : null,
-        pageStart: (_self.pagination.current_page - 1) * _self.pagination.per_page,
+        assetNo:
+          _self.assetNo != null && _self.assetNo.length > 0
+            ? '%' + _self.assetNo + '%'
+            : null,
+        assetName:
+          _self.assetName != null && _self.assetName.length > 0
+            ? '%' + _self.assetName + '%'
+            : null,
+        no:
+          _self.cardNo != null && _self.cardNo.length > 0
+            ? '%' + _self.cardNo + '%'
+            : null,
+        pageStart:
+          (_self.pagination.current_page - 1) * _self.pagination.per_page,
         pageLength: _self.pagination.per_page,
       };
 
-      SqlApi.execute('202112091131', parameter).then(successData => {
-        if (successData.errorCode == 0) {
-          _self.redrawAssetInstance(successData);
-        } else {
-          Notify.error('盘亏数据查询异常', successData.errorMessage, true);
-        }
+      SqlApi.execute('202112091131', parameter).then(
+        successData => {
+          if (successData.errorCode == 0) {
+            _self.redrawAssetInstance(successData);
+          } else {
+            Notify.error('盘亏数据查询异常', successData.errorMessage, true);
+          }
 
-        _self.loading=false;
-      }, errorData => {
-        Common.processException(errorData);
-        _self.loading=false;
-      });
+          _self.loading = false;
+        },
+        errorData => {
+          Common.processException(errorData);
+          _self.loading = false;
+        },
+      );
     },
 
-
-
     /**
-         * 重新绘制资产卡片
-         * @author YangZhiJie 20200806
-         */
+     * 重新绘制资产卡片
+     * @author YangZhiJie 20200806
+     */
     redrawAssetInstance: function (data) {
       var _self = this;
       if (data.dataList != null) {
@@ -341,16 +292,13 @@ export default {
         });
       }
       _self.assetInventoryLines = data.dataList;
-      _self.pagination.total = data.totalSize;
-      _self.pagination.last_page = Math.ceil(data.totalSize / _self.pagination.per_page);
       _self.totalCount = data.totalSize;
-      _self.fixedTableHeader();
     },
 
     /**
-         * 清空分页数据
-         * @author YangZhiJie 20200806
-         */
+     * 清空分页数据
+     * @author YangZhiJie 20200806
+     */
     clearPageData: function () {
       var data = {
         dataList: [],
@@ -364,99 +312,96 @@ export default {
     },
 
     /**
-         * 清空界面的搜索条件
-         * @author YangZhiJie 20200806
-         */
+     * 清空界面的搜索条件
+     * @author YangZhiJie 20200806
+     */
     clearFilter: function () {
       this.assetName = null;
       this.assetNo = null;
       this.cardNo = null;
-      this.getAssetInventoryLine();
-    },
-
-
-    /**
-         * 表格显示行数发生改变
-         * @author YangZhiJie 20200806
-         */
-    pageSizeChanged: function (newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      this.getAssetInventoryLine();
+      this.$refs.tableRef.backFirstPage();
     },
 
     /**
-         * 页数发生变化
-         * @author YangZhiJie 20200806
-         */
-    pageStartChanged: function () {
-      this.getAssetInventoryLine(true);
-    },
+     * 表格显示行数发生改变
+     * @author YangZhiJie 20200806
+     */
 
-    /**
-         * 冻结表头
-         */
-    fixedTableHeader: function () {
-      var _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          'head': true,
-        });
-      });
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInventoryLine();
     },
 
     /**
-         * 打开资产卡片的CURD窗口
-         */
+     * 打开资产卡片的CURD窗口
+     */
     openCurdWindow: function (assetInventoryLine) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/040701/0/' + assetInventoryLine.assetInstanceId +
-                '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
+      let url = Common.getRedirectUrl(
+        '#/desktop/window1/window-read/view/040701/0/' +
+          assetInventoryLine.assetInstanceId +
+          '?currPage=1&currIndex=1&totalCount=1&uuid=' +
+          Uuid.createUUID(),
+      );
       window.open(url);
     },
 
     /**
-        * 获取使用状况
-        */
+     * 获取使用状况
+     */
     getUseStatusList: function () {
       var _self = this;
-      UseStatusResource.getUseStatus().then(baseListResponse => {
-        if(baseListResponse.errorCode == 0){
-          _self.useStatusList = baseListResponse.datas;
-        }else{
-          Notify.error('提示', baseListResponse.errorMessage, false);
-        }
-      }, errorData => {
-        Common.processException(errorData);
-      });
+      UseStatusResource.getUseStatus().then(
+        baseListResponse => {
+          if (baseListResponse.errorCode == 0) {
+            _self.useStatusList = baseListResponse.datas;
+          } else {
+            Notify.error('提示', baseListResponse.errorMessage, false);
+          }
+        },
+        errorData => {
+          Common.processException(errorData);
+        },
+      );
     },
 
     /**
-         * 更新资产盘点明细中的备注和使用状态。
-         */
+     * 更新资产盘点明细中的备注和使用状态。
+     */
     updateAssetInventoryLine: function (assetInventoryLine, index) {
       let _self = this;
-      if ((assetInventoryLine.description == null || assetInventoryLine.description === '')
-                && ((assetInventoryLine.useStatusId == null || assetInventoryLine.useStatusId === ''))) {
+      console.log(assetInventoryLine);
+      if (
+        (assetInventoryLine.description == null ||
+          assetInventoryLine.description === '') ||
+        (assetInventoryLine.useStatusId == null ||
+          assetInventoryLine.useStatusId === '')
+      ) {
         Notify.error('错误', '请填写"盘点使用状态"和"备注"信息\'。');
         return;
       }
-      AssetInventoryLineResource.checkLossConfirm(assetInventoryLine.assetInventoryLineId, 
-        assetInventoryLine.description, true, assetInventoryLine.useStatusId).then(baseObjectResponse => {
-        if(baseObjectResponse.errorCode == 0){
-          if (baseObjectResponse.data === true) {
-            _self.assetInventoryLines.splice(index, 1);
-            _self.pagination.total = _self.pagination.total - 1;
-            _self.pagination.last_page = Math.ceil(_self.pagination.total / _self.pagination.per_page);
+      AssetInventoryLineResource.checkLossConfirm(
+        assetInventoryLine.assetInventoryLineId,
+        assetInventoryLine.description,
+        true,
+        assetInventoryLine.useStatusId,
+      ).then(
+        baseObjectResponse => {
+          if (baseObjectResponse.errorCode == 0) {
+            if (baseObjectResponse.data === true) {
+              _self.assetInventoryLines.splice(index, 1);
+              _self.pagination.total = _self.pagination.total - 1;
+            } else {
+              Notify.error('错误', '该盘点明细已经被删除，请确认');
+            }
           } else {
-            Notify.error('错误', '该盘点明细已经被删除，请确认');
+            Notify.error('错误', baseObjectResponse.errorMessage);
           }
-        }else{
-          Notify.error('错误', baseObjectResponse.errorMessage);
-        }
-        
-      }, errorData => {
-        Common.processException(errorData);
-      });
+        },
+        errorData => {
+          Common.processException(errorData);
+        },
+      );
     },
   },
 };
@@ -464,63 +409,57 @@ export default {
 
 <style scoped>
 .grid-container {
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: auto 1fr 40px;
-    gap: 10px;
-    justify-items: stretch;
-    align-items: stretch;
-    height: calc(100vh - 170px);
-    overflow: auto;
+  margin-top: 10px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: calc(100vh - 170px);
 }
 
-.grid-item-row1 {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 1;
-    grid-column-end: 2;
+.search-form {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
 }
 
-.grid-item-row2 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    overflow: auto;
+.grid-form-row1 {
+  margin-top: 8px;
 }
 
-.grid-item-row3 {
-    grid-row-start: 3;
-    grid-row-end: 4;
-    grid-column-start: 1;
-    grid-column-end: 2;
+.grid-form-row2 {
+  overflow: auto;
+  margin: 12px 0;
 }
-</style>
 
-<style scoped>
-.m-grid-footer {
-    padding: 10px;
+.form-item-col {
+  display: flex;
+  align-items: center;
 }
 
-.m-panel {
-    margin-bottom: 0px;
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.fixed-table {
-    table-layout: fixed;
-    width: 800px !important;
-    min-width: 800px !important;
+:deep(.ant-form-item) {
+  margin-bottom: -5px !important;
 }
 
-table.fixed-table tr {
-    height: 40px;
+/* 调整标签样式 */
+:deep(.ant-form-item-label) {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: unset;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+/* 确保控件容器填充剩余空间 */
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 0;
+}
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
 }
 </style>

src/components/customer/AssetInventoryOverallSearch.vue

@@ -1,243 +1,100 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-row1-column1">
-        <div class="btn-group m-panel" role="group">
-          <button
-            type="button"
-            class="btn btn-success"
-            @click="getAssetInstance"
+  <div class="container">
+    <!-- 操作按钮组 -->
+    <a-space>
+      <a-button type="primary" @click="goFirstPage">
+        {{ $t("lang.AssetInventorySearch.query") }}
+      </a-button>
+
+      <a-button @click="generateAssetInventoryLine">
+        {{ $t("lang.AssetInventorySearch.generateAssetCountDetails") }}
+      </a-button>
+
+      <a-button danger @click="clearFilter">
+        {{ $t("lang.AssetInventorySearch.empty") }}
+      </a-button>
+    </a-space>
+
+    <div class="main-layout">
+      <!-- 左侧筛选面板 -->
+      <div class="filter-panel">
+        <a-collapse v-model:activeKey="activePanels" accordion>
+          <!-- 所属部门 -->
+          <a-collapse-panel
+            key="1"
+            :show-arrow="false"
+            :force-render="true"
+            :header="$t('lang.AssetInventorySearch.ownerDepartment')"
           >
-            {{ $t("lang.AssetInventorySearch.query") }}
-          </button>
-
-          <button
-            type="button"
-            class="btn btn-info"
-            @click="generateAssetInventoryLine"
+            <ClientOrganizationTree
+              ref="organization"
+              :ids="assetInventoryOrganizationIds"
+              @select-changed="selectChanged"
+            />
+          </a-collapse-panel>
+
+          <!-- 使用部门 -->
+          <a-collapse-panel
+            key="3"
+            :show-arrow="false"
+            :force-render="true"
+            :header="$t('lang.AssetInventorySearch.useDepartment')"
           >
-            {{ $t("lang.AssetInventorySearch.generateAssetCountDetails") }}
-          </button>
-
-          <button type="button" class="btn btn-danger" @click="clearFilter">
-            {{ $t("lang.AssetInventorySearch.empty") }}
-          </button>
-        </div>
-      </div>
-      <div class="grid-item-row2-column1">
-        <div>
-          <div class="panel panel-default m-panel">
-            <div
-              class="panel-heading"
-              @click="type == 1 ? (type = 0) : (type = 1)"
-            >
-              {{ $t("lang.AssetInventorySearch.ownerDepartment") }}
-            </div>
-            <div v-show="type == 1" class="panel-body">
-              <ClientOrganizationTree
-                ref="organization"
-                :ids="assetInventoryOrganizationIds"
-                @select-changed="selectChanged"
-              />
-            </div>
-          </div>
-
-          <div class="panel panel-default m-panel">
-            <div
-              class="panel-heading"
-              @click="type == 3 ? (type = 0) : (type = 3)"
-            >
-              {{ $t("lang.AssetInventorySearch.useDepartment") }}
-            </div>
-            <div v-show="type == 3" class="panel-body">
-              <ClientOrganizationTree
-                ref="responseOrganization"
-                :ids="assetInventoryResponseOrganizationIds"
-                @select-changed="selectChanged"
-              />
-            </div>
-          </div>
-
-          <div class="panel panel-default m-panel">
-            <div
-              class="panel-heading"
-              @click="type == 2 ? (type = 0) : (type = 2)"
-            >
-              {{ $t("lang.AssetInventorySearch.category") }}
-            </div>
-            <div v-show="type == 2" class="panel-body">
-              <div>
-                <AssetCategoryTree
-                  ref="assetCategory"
-                  :ids="assetInventoryCategoryIds"
-                  @select-changed="selectChanged"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="panel panel-default m-panel">
-            <div
-              class="panel-heading"
-              @click="type == 4 ? (type = 0) : (type = 4)"
-            >
-              {{ $t("lang.AssetInventorySearch.project") }}
-            </div>
-            <div v-show="type == 4" class="panel-body">
-              <div>
-                <ProjectItemTree
-                  ref="projectItem"
-                  :ids="assetInventoryProjectItemIds"
-                  @select-changed="selectChanged"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="grid-item-row2-column2">
-        <table class="fixed-table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.ownerClient") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.ownerDepartment") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.useClient") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.useDepartment") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.assetName") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.assetNumber") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.cardNumber") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.type") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.assetClassification") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.subordinateToTheProject") }}
-              </th>
-              <th style="width: 90px">
-                {{ $t("lang.AssetInventorySearch.originalValue") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.placeOfPlacement") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.placementLocation") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.unitOfMeasurement") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.user") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.usageStatus") }}
-              </th>
-              <th style="width: 100px">
-                {{ $t("lang.AssetInventorySearch.userInput") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.licensePlate") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.selfNumbering") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.startUseDate") }}
-              </th>
-              <th style="width: 130px">
-                {{ $t("lang.AssetInventorySearch.remarks") }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="assetInstance in assetInstances"
-              :key="assetInstance.id"
-              @dblclick="openCurdWindow(assetInstance)"
-            >
-              <td>{{ assetInstance.clientName }}</td>
-              <td>{{ assetInstance.organizationName }}</td>
-              <td>{{ assetInstance.responseClientName }}</td>
-              <td>{{ assetInstance.responseOrganizationName }}</td>
-              <td>{{ assetInstance.name }}</td>
-              <td>{{ assetInstance.assetNo }}</td>
-              <td>{{ assetInstance.no }}</td>
-              <td>{{ assetInstance.type }}</td>
-              <td>{{ assetInstance.categoryName }}</td>
-              <td>{{ assetInstance.projectItemName }}</td>
-              <td>{{ assetInstance.orginalValue }}</td>
-              <td>{{ assetInstance.savePosition }}</td>
-              <td>{{ assetInstance.locationName }}</td>
-              <td>{{ assetInstance.computationUnitName }}</td>
-              <td>{{ assetInstance.useUserName }}</td>
-              <td>{{ assetInstance.useStatusName }}</td>
-              <td>{{ assetInstance.useUserNameInput }}</td>
-              <td>{{ assetInstance.vehicleNo }}</td>
-              <td>{{ assetInstance.selfNo }}</td>
-              <td>{{ assetInstance.depreciationStartDate }}</td>
-              <td>{{ assetInstance.description }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="grid-item-row3-column2">
-        <div>
-          <p class="bg-success m-grid-footer">
-            {{ $t("lang.AssetInventorySearch.totalOfOriginalValue") }}:{{
-              orginalValueTotal
-            }}
-          </p>
-        </div>
-      </div>
-      <div class="grid-item-row4-column2">
-        <div>
-          <div class="pull-left">
-            <span>{{ $t("lang.AssetInventorySearch.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.AssetInventorySearch.strip") }},{{
-              $t("lang.AssetInventorySearch.inTotal")
-            }}{{ pagination.total
-            }}{{ $t("lang.AssetInventorySearch.strip") }},{{
-              $t("lang.AssetInventorySearch.eachPage")
-            }}</span>
-            <PageSizeSelect @page-size-changed="pageSizeChanged" />
-            <span>{{ $t("lang.AssetInventorySearch.strip") }}</span>
-          </div>
-          <div class="pull-right">
-            <VueBootstrapPagination :pagination="pagination" :callback="pageStartChanged" />
-          </div>
-        </div>
+            <ClientOrganizationTree
+              ref="responseOrganization"
+              :ids="assetInventoryResponseOrganizationIds"
+              @select-changed="selectChanged"
+            />
+          </a-collapse-panel>
+
+          <!-- 资产分类 -->
+          <a-collapse-panel
+            key="2"
+            :show-arrow="false"
+            :force-render="true"
+            :header="$t('lang.AssetInventorySearch.category')"
+          >
+            <AssetCategoryTree
+              ref="assetCategory"
+              :ids="assetInventoryCategoryIds"
+              @select-changed="selectChanged"
+            />
+          </a-collapse-panel>
+
+          <!-- 项目选择 -->
+          <a-collapse-panel
+            key="5"
+            :show-arrow="false"
+            :force-render="true"
+            :header="$t('lang.AssetInventorySearch.project')"
+          >
+            <ProjectItemTree
+              ref="projectItem"
+              :ids="assetInventoryProjectItemIds"
+              @select-changed="selectChanged"
+            />
+          </a-collapse-panel>
+        </a-collapse>
       </div>
-    </div>
-    <div class="flex-container-1">
-      <div class="flex-content-1">
-        <div class="flex-main-1">
-          <div>
-            <div class="flex-container-2">
-              <div class="flex-header-2">
-                <div class="m-row" />
-              </div>
-              <div class="flex-content-2">
-                <div class="flex-main-2" />
-              </div>
-            </div>
-          </div>
+
+      <!-- 右侧表格区域 -->
+      <div class="table-container">
+        <CommonTable
+          ref="table"
+          :columns="columns"
+          :data-source="assetInstances"
+          :total="totalCount"
+          :extra-height="150"
+          :is-custom-row-click="true"
+          @custom-row-click="openCurdWindow"
+          @get-pager="getPageParams"
+        />
+
+        <!-- 底部统计信息 -->
+        <div class="footer-info">
+          {{ $t("lang.AssetInventorySearch.totalOfOriginalValue") }}:{{
+            orginalValueTotal
+          }}
         </div>
       </div>
     </div>
@@ -252,53 +109,52 @@ import Common from '../../common/Common.js';
 import AssetInstanceResource from '../../api/asset/AssetInstanceResource.js';
 import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
 
-
-import ClientOrganizationTree  from '../../widget/ClientOrganizationTree.vue';
+import AssetInventoryLineResource from '../../api/asset/AssetInventoryLineResource.js';
+import ClientOrganizationTree from '../../widget/ClientOrganizationTree.vue';
 import ProjectItemTree from '../../widget/ProjectItemTree.vue';
 import AssetCategoryTree from '../../widget/AssetCategoryTree.vue';
-import { Notify, Uuid } from 'pc-component-v3';
-
-
-
-
+import { Notify, Uuid, SqlApi } from 'pc-component-v3';
+import { message } from 'ant-design-vue';
+import CommonTable from '../../common/CommonTable.vue';
 
+import dayjs from 'dayjs';
 
+import { Date } from 'pc-component-v3';
 
 export default {
-
-  components: {    
+  components: {
+    Date,
+    CommonTable,
     ProjectItemTree,
     AssetCategoryTree,
     ClientOrganizationTree,
   },
 
-  
   props: {
     assetInventoryId: {
       type: Number,
       default: null,
     },
   },
-  
+  // 定义抛出的事件名称
+  emits: ['previous', 'next'],
   data: function () {
     return {
       assetInventory: {}, // 资产盘点
+      visible: false, //模态框状态
       clientOrganizations: [], // 所属部门
       responseClientOrganizations: [], // 使用部门
       categories: [], // 资产类别
       projectItems: [], // 项目类别
-      useStatus: [], //使用状态
       type: null, //全盘搜索条件
       assetInstances: [],
-
+      filter: {},
+      locationData: [],
       additionalHql: '',
       pagination: {
-        total: 0,
         per_page: Common.pageSize, // required
         current_page: 1, // required
-        last_page: 1, // required
       },
-      filter: {},
       totalCount: 0,
       orginalValueTotal: 0,
       totalAmountOfImpairmentTotal: 0,
@@ -308,30 +164,211 @@ export default {
       assetInventoryResponseOrganizationIds: [], // 盘点单中已经选中的所属部门
       assetInventoryCategoryIds: [], // 盘点单中已经选中的资产类别
       assetInventoryProjectItemIds: [], // 盘点单中已经选择的项目
+      locationWindowNo: '109494',
+      locationField: {
+        name: '',
+        listDisplayFieldName: 'ar.name',
+      },
+      locationFieldValue: {
+        id: null,
+        displayValue: [''],
+        fieldType: 'Key',
+      },
+      whereClauseSource: {
+        customerDataDimensions: [
+          {
+            fieldName: 'ar.client.id',
+            dataDimensionTypeNo: '202201191757',
+            defaultDataDimensionTypeValueNo: '1',
+          },
+        ],
+      },
+      userWindowNo: '050408',
+      userField: {
+        name: '',
+        listDisplayFieldName: 'name',
+      },
+      userFieldValue: {
+        id: null,
+        displayValue: [''],
+        fieldType: 'Key',
+      },
+      custodianNameField: {
+        name: '',
+        listDisplayFieldName: 'name',
+      },
+      custodianNameFieldValue: {
+        id: null,
+        displayValue: [''],
+        fieldType: 'Key',
+      },
+      userIdWhereClauseSource: {
+        customerDataDimensions: [
+          {
+            fieldName: 'client.id',
+            dataDimensionTypeNo: '202201191757',
+            defaultDataDimensionTypeValueNo: '4',
+          },
+        ],
+      },
+      custodianIdWhereClauseSource: {
+        customerDataDimensions: [
+          {
+            fieldName: 'client.id',
+            dataDimensionTypeNo: '202201191757',
+            defaultDataDimensionTypeValueNo: '4',
+          },
+        ],
+      },
+      checkedIds: [],
       loading: false,
+      inventorySheetName: undefined, //盘点单名称
+
+      accountDate: dayjs().format('YYYY-MM-DD'), //账面日期
+      plannedStartDate: null, //计划开始时间
+      plannedEndDate: null, //计划结束时间
+
+      assetInstancesTempory: [], //盘点清单展示
+      fileList: [],
+      activePanels: [],
+      columns: [
+        {
+          title: this.$t('lang.AssetInventorySearch.ownerClient'),
+          dataIndex: 'clientName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.ownerDepartment'),
+          dataIndex: 'organizationName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.useClient'),
+          dataIndex: 'responseClientName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.useDepartment'),
+          dataIndex: 'responseOrganizationName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.assetName'),
+          dataIndex: 'name',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.assetNumber'),
+          dataIndex: 'assetNo',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.cardNumber'),
+          dataIndex: 'no',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.type'),
+          dataIndex: 'type',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.assetClassification'),
+          dataIndex: 'categoryName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.subordinateToTheProject'),
+          dataIndex: 'projectItemName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.originalValue'),
+          dataIndex: 'orginalValue',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.placeOfPlacement'),
+          dataIndex: 'savePosition',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.placementLocation'),
+          dataIndex: 'locationName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.unitOfMeasurement'),
+          dataIndex: 'computationUnitName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.user'),
+          dataIndex: 'useUserName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.custodianName'),
+          dataIndex: 'custodianName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.depositoryUserName'),
+          dataIndex: 'depositoryUserName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.usageStatus'),
+          dataIndex: 'useStatusName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.userInput'),
+          dataIndex: 'useUserNameInput',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.licensePlate'),
+          dataIndex: 'vehicleNo',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.selfNumbering'),
+          dataIndex: 'selfNo',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.startUseDate'),
+          dataIndex: 'depreciationStartDate',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.remarks'),
+          dataIndex: 'description',
+        },
+      ].map(item => ({
+        ...item,
+        key: item.dataIndex,
+        align: 'center',
+        ellipsis: true,
+        width: 200,
+        resizable: true,
+      })),
+      detailColumns: [
+        {
+          title: this.$t('lang.AssetInventorySearch.assetName'),
+          dataIndex: 'name',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.assetNumber'),
+          dataIndex: 'assetNo',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.cardNumber'),
+          dataIndex: 'no',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.assetClassification'),
+          dataIndex: 'categoryName',
+        },
+        {
+          title: this.$t('lang.AssetInventorySearch.operation'),
+          dataIndex: 'operation',
+        },
+      ],
     };
   },
 
+  computed: {},
+
   mounted: function () {
     var _self = this;
 
-    _self.$nextTick(function () {
+    _self.$nextTick(() => {
       _self.getAssetInventory();
-      // 固定行
-      _self.fixedTableHeader();
-    });
-
-    // 可调整表格列宽
-    _self.$nextTick(function () {
-      $('.fixed-table').resizableColumns();
+      _self.getAssetInstance();
     });
   },
-  methods: {
-    selectChanged: function () {
-      var _self = this;
-      _self.getAssetInstance();
-    },
 
+  methods: {
     /**
      * 查询盘点单DTO,
      * 主要是获取资产盘点中的所属部门集合、使用部门集合、资产类别结合。
@@ -344,15 +381,18 @@ export default {
         _self.assetInventoryId,
       ).then(
         baseObjectResponse => {
-          if(baseObjectResponse.errorCode == 0){
-            _self.assetInventoryOrganizationIds = baseObjectResponse.data.organizationIds;
+          if (baseObjectResponse.errorCode == 0) {
+            _self.assetInventoryOrganizationIds =
+              baseObjectResponse.data.organizationIds;
 
             _self.assetInventoryResponseOrganizationIds =
-            baseObjectResponse.data.responseOrganizationIds;
+              baseObjectResponse.data.responseOrganizationIds;
 
-            _self.assetInventoryCategoryIds = baseObjectResponse.data.categoryIds;
+            _self.assetInventoryCategoryIds =
+              baseObjectResponse.data.categoryIds;
 
-            _self.assetInventoryProjectItemIds = baseObjectResponse.data.projectIds;
+            _self.assetInventoryProjectItemIds =
+              baseObjectResponse.data.projectIds;
 
             _self.assetInventory = baseObjectResponse.data;
 
@@ -372,7 +412,7 @@ export default {
             });
             // 查询资产卡片的数据
             _self.getAssetInstance();
-          }else{
+          } else {
             Notify.error('提示', baseObjectResponse.errorMessage, false);
           }
         },
@@ -382,30 +422,29 @@ export default {
       );
     },
 
+    selectChanged: function () {
+      var _self = this;
+      _self.$refs.table.backFirstPage();
+    },
+
     /**
      * 根据界面选中的所属部门、使用部门、资产类别、项目查询资产清单
      * @author yangzhijie 20200806
      */
-    getAssetInstance: function (isPageChange) {
+    getAssetInstance: function () {
       var _self = this;
 
-      if (!isPageChange) {
-        _self.pagination.current_page = 1;
-      }
+      // 盘点状态
       var projectItemIds = _self.$refs.projectItem.getSelectedIds();
       var organizationIds = _self.$refs.organization.getSelectedIds();
       var responseOrganizationIds =
         _self.$refs.responseOrganization.getSelectedIds();
       var categoryIds = _self.$refs.assetCategory.getSelectedIds();
 
-      _self.clearPageData();
-
-      _self.loading=true;
-
       _self.filter.assetDecrease = 0;
-
-      // 账套时间
-      _self.filter.depreciationStartDate2 = `${_self.assetInventory.accountDate} 00:00:00`;
+      _self.filter.depreciationStartDate2 = _self.assetInventory.accountDate
+        ? `${_self.assetInventory.accountDate} 00:00:00`
+        : null;
 
       var obj = {
         organizationIds: organizationIds,
@@ -420,22 +459,36 @@ export default {
         },
         inventoryStatus: 'OVERALL',
       };
+      _self.loading = true;
 
       AssetInstanceResource.getByOrganizationAndCategory(obj).then(
-        baseObjectResponse => {
-          _self.loading=false;
-          if(baseObjectResponse.errorCode != 0) {
-            Notify.error('提示', baseObjectResponse.errorMessage, false);
-            return;
+        data => {
+          if (data.errorCode == 0) {
+            _self.redrawAssetInstance(data.data);
+            _self.loading = false;
+          } else {
+            Notify.error('提示', data.errorMessage, false);
           }
-          _self.redrawAssetInstance(baseObjectResponse.data);
+          _self.loading = false;
         },
         xmlHttpRequest => {
+          _self.loading = false;
           Common.processException(xmlHttpRequest);
         },
       );
     },
 
+    /**
+     * 重新绘制资产卡片
+     * @author YangZhiJie 20200806
+     */
+    redrawAssetInstance: function (data) {
+      var _self = this;
+      _self.assetInstances = data.dataList;
+      _self.totalCount = data.totalSize;
+      _self.orginalValueTotal = data.totalOrginalValue;
+    },
+
     /**
      * 生成资产盘点明细
      * @author YangZhiJie 20200806
@@ -449,7 +502,7 @@ export default {
       var categoryIds = _self.$refs.assetCategory.getSelectedIds();
       var projectItemIds = _self.$refs.projectItem.getSelectedIds();
 
-      _self.loading=true;
+      _self.loading = true;
       var obj = {
         assetInventoryId: _self.assetInventoryId,
         organizationIds: organizationIds,
@@ -461,57 +514,24 @@ export default {
         obj,
       ).then(
         baseObjectResponse => {
-          if(baseObjectResponse.errorCode == 0){
-            Common.showDialog('提示', baseObjectResponse.errorMessage, 'success');
+          if (baseObjectResponse.errorCode == 0) {
+            Common.showDialog(
+              '提示',
+              baseObjectResponse.errorMessage,
+              'success',
+            );
+          } else {
+            Notify.error('提示', baseObjectResponse.errorMessage, false);
           }
-          _self.loading=false;
+          _self.loading = false;
         },
         xmlHttpRequest => {
-          _self.loading=false;
+          _self.loading = false;
           Common.processException(xmlHttpRequest);
         },
       );
     },
 
-    /**
-     * 重新绘制资产卡片
-     * @author YangZhiJie 20200806
-     */
-    redrawAssetInstance: function (data) {
-      var _self = this;
-      console.log(data);
-      _self.assetInstances = data.dataList;
-      _self.pagination.total = data.totalSize;
-      _self.pagination.last_page = Math.ceil(
-        data.totalSize / data.range.length,
-      );
-      _self.totalCount = data.totalSize;
-      _self.orginalValueTotal = data.totalOrginalValue;
-      _self.totalAmountOfImpairmentTotal = data.totalAmountOfImpairment;
-      _self.netSalvageTotal = data.totalNetSalvage;
-
-      _self.fixedTableHeader();
-    },
-
-    /**
-     * 清空分页数据
-     * @author YangZhiJie 20200806
-     */
-    clearPageData: function () {
-      var data = {
-        dataList: [],
-        totalSize: 0,
-        range: {
-          start: 0,
-          length: this.pagination.per_page,
-        },
-        totalOrginalValue: 0,
-        totalAmountOfImpairment: 0,
-        totalNetSalvage: 0,
-      };
-      this.redrawAssetInstance(data);
-    },
-
     /**
      * 清空界面的搜索条件
      * @author YangZhiJie 20200806
@@ -519,10 +539,12 @@ export default {
      */
     clearFilter: function () {
       this.filter.assetDecrease = 0;
-      // 账套时间
-      this.filter.depreciationStartDate2 = `${this.assetInventory.accountDate} 00:00:00`;
+
       this.initTreeData();
-      this.getAssetInstance();
+      this.filter.depreciationStartDate2 = this.assetInventory.accountDate
+        ? `${this.assetInventory.accountDate} 00:00:00`
+        : null;
+      this.$refs.table.backFirstPage();
     },
 
     /**
@@ -538,46 +560,27 @@ export default {
       _self.$refs.assetCategory.initAssetCategory1();
     },
 
-    /**
-     * 表格显示行数发生改变
-     * @author YangZhiJie 20200806
-     */
-    pageSizeChanged: function (newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      this.getAssetInstance();
+    goFirstPage: function () {
+      this.$refs.table.backFirstPage();
     },
 
-    /**
-     * 页数发生变化
-     * @author YangZhiJie 20200806
-     */
-    pageStartChanged: function () {
-      this.getAssetInstance(true);
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInstance();
     },
-
-    /**
-     * 冻结表头
-     */
-    fixedTableHeader: function () {
-      var _self = this;
-      _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
-          head: true,
-        });
-      });
-
-      // 给table的外面的div设置固定的高度，如果不设置固定高度，无法固定表格的表头
-      // let height = $(".flex-content").outerHeight(true) - 20;
-      // $(".table-fixed-out").css("height", height);
+    getSelectedData: function (selectedData) {
+      this.checkedIds = selectedData.selectedRowKeys;
+      this.assetInstancesTempory = selectedData.selectedRows;
     },
 
     /**
      * 打开资产卡片的CURD窗口
      */
     openCurdWindow: function (assetInstance) {
+      console.log(assetInstance);
       let url = Common.getRedirectUrl(
-        '#/desktop/window/window-read/view/040701/0/' +
+        '#/desktop/window1/window-read/view/040701/0/' +
           assetInstance.id +
           '?currPage=1&currIndex=1&totalCount=1&uuid=' +
           Uuid.createUUID(),
@@ -589,79 +592,73 @@ export default {
 </script>
 
 <style scoped>
-.grid-container {
-  margin-top: 10px;
-  display: grid;
-  grid-template-columns: 300px auto;
-  grid-template-rows: 35px 1fr 40px 40px;
-  gap: 10px;
-  justify-items: stretch;
-  align-items: stretch;
-  height: calc(100vh - 170px);
-  overflow: auto;
+.container {
+  display: flex;
+  flex-direction: column;
 }
 
-.grid-item-row1-column1 {
-  grid-row-start: 1;
-  grid-row-end: 2;
-  grid-column-start: 1;
-  grid-column-end: 3;
+.main-layout {
+  flex: 1;
+  display: flex;
+  gap: 24px;
+  overflow: hidden;
+  /* margin-top: 8px; */
 }
 
-.grid-item-row2-column1 {
-  grid-row-start: 2;
-  grid-row-end: 5;
-  grid-column-start: 1;
-  grid-column-end: 2;
-  overflow: auto;
+.filter-panel {
+  width: 300px;
+  overflow-y: auto;
+  margin-top: 8px;
 }
 
-.grid-item-row2-column2 {
-  grid-row-start: 2;
-  grid-row-end: 3;
-  grid-column-start: 2;
-  grid-column-end: 3;
-  overflow: auto;
+.table-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.grid-item-row3-column2 {
-  grid-row-start: 3;
-  grid-row-end: 4;
-  grid-column-start: 2;
-  grid-column-end: 3;
+.footer-info {
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e8e8e8;
+  font-size: 14px;
+  background: #dff0d8;
 }
 
-.grid-item-row4-column2 {
-  grid-row-start: 4;
-  grid-row-end: 5;
-  grid-column-start: 2;
-  grid-column-end: 3;
+.range-symbol {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
 }
-</style>
 
-<style scoped>
-.m-grid-footer {
-  padding: 10px;
+.pagination-row {
+  margin: 8px;
 }
 
-.m-panel {
-  margin-bottom: 0px;
+:deep(.ant-collapse) {
+  margin-bottom: 16px;
+  background: #fff;
 }
 
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
+:deep(.ant-collapse-header) {
+  background: #efefef;
 }
 
-table.fixed-table tr {
-  height: 40px;
+:deep(.ant-collapse-content) {
+  background: #fff;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+:deep(.ant-collapse-content-box) {
+  max-height: 440px;
+  overflow: auto;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 4px !important;
+}
+
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 500 !important;
 }
 </style>

src/components/customer/AssetInventorySearch.vue

@@ -2,11 +2,13 @@
   <div>
     <Navbar
       :title="$t('lang.AssetInventorySearch.generateAssetCountDetails')"
-      is-go-back="true"
+      :is-go-back="false"
     />
     <AssetInventoryOverallSearch v-if="inventoryStatus == 'OVERALL'" :asset-inventory-id="assetInventoryId" />
 
     <AssetInventoryRandomSearch v-if="inventoryStatus == 'RANDOM_STOCKTAKING'" :asset-inventory-id="assetInventoryId" />
+
+    <a-empty v-if="!inventoryStatus" description="此盘点单未指定状态！" />
   </div>
 </template>
 

src/components/customer/AssetInventoryStep1.vue

@@ -1,83 +1,79 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <Navbar
-          :title="$t('lang.InitiateCountingTask.initiateCountingTask')"
-          :is-go-back="false"
-        />
-      </div>
-
-      <section style="margin-top: 20px">
-        <a-steps :current="pageInformation.currentStep">
-          <a-step title="选择盘点类型" />
-          <a-step title="确认盘点数据" />
-          <a-step title="生成盘点单" />
-        </a-steps>
-      </section>
-
-      <a-divider />
-
-      <section>
-        <asset-inventory-step2
-          v-if="pageInformation.showPage == 0"
-          :current-step="pageInformation"
-          @next="nextStep"
-        />
-        <asset-inventory-step3
-          v-if="pageInformation.showPage == 1"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-          @update="update"
-        />
-        <asset-inventory-step4
-          v-if="pageInformation.showPage == 2"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-          @update="update"
-        />
-        <asset-inventory-step5
-          v-if="pageInformation.showPage == 3"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-          @update="update"
-        />
-        <asset-inventory-step6
-          v-if="pageInformation.showPage == 4"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-        />
-        <asset-inventory-step7
-          v-if="pageInformation.showPage == 5"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-        />
-        <asset-inventory-step8
-          v-if="pageInformation.showPage == 6"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-        />
-        <asset-inventory-step9
-          v-if="pageInformation.showPage == 7"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-        />
-        <asset-inventory-step10
-          v-if="pageInformation.showPage == 8"
-          :current-step="pageInformation"
-          @next="nextStep"
-          @previous="previousStep"
-        />
-      </section>
-    </div>
+  <div>
+    <Navbar
+      :title="$t('lang.InitiateCountingTask.initiateCountingTask')"
+      :is-go-back="false"
+    />
   </div>
+
+  <section style="margin-top: 20px">
+    <a-steps :current="pageInformation.currentStep">
+      <a-step title="选择盘点类型" />
+      <a-step title="确认盘点数据" />
+      <a-step title="生成盘点单" />
+    </a-steps>
+  </section>
+
+  <a-divider style="margin:20px 0  6px 0 !important;" />
+
+  <section>
+    <asset-inventory-step2
+      v-if="pageInformation.showPage == 0"
+      :current-step="pageInformation"
+      @next="nextStep"
+    />
+    <asset-inventory-step3
+      v-if="pageInformation.showPage == 1"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+      @update="update"
+    />
+    <asset-inventory-step4
+      v-if="pageInformation.showPage == 2"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+      @update="update"
+    />
+    <asset-inventory-step5
+      v-if="pageInformation.showPage == 3"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+      @update="update"
+    />
+    <asset-inventory-step6
+      v-if="pageInformation.showPage == 4"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+    />
+    <asset-inventory-step7
+      v-if="pageInformation.showPage == 5"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+    />
+    <asset-inventory-step8
+      v-if="pageInformation.showPage == 6"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+    />
+    <asset-inventory-step9
+      v-if="pageInformation.showPage == 7"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+    />
+    <asset-inventory-step10
+      v-if="pageInformation.showPage == 8"
+      :current-step="pageInformation"
+      @next="nextStep"
+      @previous="previousStep"
+    />
+  </section>
 </template>
 
 <script>
@@ -177,4 +173,8 @@ export default {
 .div-form {
     margin-bottom: 10px;
 }
+
+:deep(.ant-divider-horizontal) {
+  margin: 0 !important;
+}
 </style>

src/components/customer/AssetInventoryStep10.vue

@@ -45,7 +45,7 @@
     >
       AGV抽盘生成盘点单
     </a-button>
-    <a-divider />
+    <a-divider style="margin:20px 0 !important;" />
     <Loading v-if="loading" />
     <a-button
       key="console"
@@ -146,7 +146,7 @@ export default {
                    * 打开资产盘点单的CURD窗口
                    */
     openCurdWindow: function (data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
                 '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/AssetInventoryStep2.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <a-radio-group v-model:value="value">
-          <a-radio :style="radioStyle" :value="1">全单位盘点，每个部门生成一个盘点单。</a-radio>
-          <a-radio :style="radioStyle" :value="2">对一个部门进行盘点。</a-radio>
-          <a-radio :style="radioStyle" :value="3">抽盘。</a-radio>
-          <a-radio :style="radioStyle" :value="7">AGV盘点。</a-radio>
-        </a-radio-group>
-      </div>
-      <a-divider />
-      <a-button type="primary" @click="previousStep">上一步</a-button>
-      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
-    </div>
+  <div>
+    <a-radio-group v-model:value="value">
+      <a-radio :style="radioStyle" :value="1">全单位盘点，每个部门生成一个盘点单。</a-radio>
+      <a-radio :style="radioStyle" :value="2">对一个部门进行盘点。</a-radio>
+      <a-radio :style="radioStyle" :value="3">抽盘。</a-radio>
+      <a-radio :style="radioStyle" :value="7">AGV盘点。</a-radio>
+    </a-radio-group>
   </div>
+  <a-divider style="margin:14px 0 20px 0 !important;" />
+  <a-button type="primary" @click="previousStep">上一步</a-button>
+  <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
 </template>
 
 <script>

src/components/customer/AssetInventoryStep3.vue

@@ -1,42 +1,40 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <a-form
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 16 }"
-      >
-        <a-form-item label="盘点单名称" extra="全单位范围内每个部门一个盘点单" class="m-form-item">
-          <a-input v-model:value="inventorySheetName" size="default" />
-        </a-form-item>
-
-        <a-form-item label="会计期间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="accountDate" />
-        </a-form-item>
-
-        <a-form-item label="计划开始时间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="plannedStartDate" />
-        </a-form-item>
-
-        <a-form-item label="计划结束时间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="plannedEndDate" />
-        </a-form-item>
-
-
-        <a-form-item label="待盘点的部门">
-          <a-tree
-            v-if="treeData.length > 0" :tree-data="treeData" :auto-expand-parent="autoExpandParent"
-            default-expand-all="true" :checked-keys="checkedKeys" @expand="onExpand" @check="onTreeItemCheck"
-          >
-            <template #title="{key: treeKey, title}">
-              <span>{{ title }}<small>{{ treeKey }}</small></span>
-            </template>
-          </a-tree>
-        </a-form-item>
-      </a-form>
-      <a-divider />
-      <a-button type="primary" @click="previous">上一步</a-button>
-      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
-    </div>
+  <div>
+    <a-form
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item label="盘点单名称" extra="全单位范围内每个部门一个盘点单" class="m-form-item">
+        <a-input v-model:value="inventorySheetName" size="default" />
+      </a-form-item>
+
+      <a-form-item label="会计期间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="accountDate" />
+      </a-form-item>
+
+      <a-form-item label="计划开始时间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="plannedStartDate" />
+      </a-form-item>
+
+      <a-form-item label="计划结束时间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="plannedEndDate" />
+      </a-form-item>
+
+
+      <a-form-item label="待盘点的部门">
+        <a-tree
+          v-if="treeData.length > 0" :tree-data="treeData" :auto-expand-parent="autoExpandParent"
+          default-expand-all="true" :checked-keys="checkedKeys" @expand="onExpand" @check="onTreeItemCheck"
+        >
+          <template #title="{key: treeKey, title}">
+            <span>{{ title }}<small>{{ treeKey }}</small></span>
+          </template>
+        </a-tree>
+      </a-form-item>
+    </a-form>
+    <a-divider style="margin:14px 0 20px 0 !important;" />
+    <a-button type="primary" @click="previous">上一步</a-button>
+    <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
   </div>
 </template>
 
@@ -331,4 +329,10 @@ export default {
   .m-form-item{
     margin-bottom: 5px;
   }
+
+  :deep(.ant-form-item-label > label) {
+    font-size: 14px !important;
+    font-weight: 500 !important;
+  }
+
 </style>

src/components/customer/AssetInventoryStep4.vue

@@ -1,41 +1,39 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <a-form
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 16 }"
-      >
-        <a-form-item label="盘点单名称" class="m-form-item">
-          <a-input v-model:value="inventorySheetName" size="default" />
-        </a-form-item>
+  <div>
+    <a-form
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 16 }"
+    >
+      <a-form-item label="盘点单名称" class="m-form-item">
+        <a-input v-model:value="inventorySheetName" size="default" />
+      </a-form-item>
         
-        <a-form-item label="会计期间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="accountDate" />
-        </a-form-item>
+      <a-form-item label="会计期间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="accountDate" />
+      </a-form-item>
 
-        <a-form-item label="计划开始时间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="plannedStartDate" />
-        </a-form-item>
+      <a-form-item label="计划开始时间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="plannedStartDate" />
+      </a-form-item>
 
-        <a-form-item label="计划结束时间" :rules="[{ required: true }]" class="m-form-item">
-          <Date v-model="plannedEndDate" />
-        </a-form-item>
+      <a-form-item label="计划结束时间" :rules="[{ required: true }]" class="m-form-item">
+        <Date v-model="plannedEndDate" />
+      </a-form-item>
 
-        <a-form-item label="选择单个部门生成盘点单">
-          <a-tree
-            v-if="treeData.length > 0" checkable check-strictly :tree-data="treeData" default-expand-all="true"
-            :checked-keys="checkedKeys" :auto-expand-parent="autoExpandParent" @expand="onExpand" @check="onTreeItemCheck"
-          >
-            <template #title="{key: treeKey, title}">
-              <span>{{ title }}<small>{{ treeKey }}</small></span>
-            </template>
-          </a-tree>
-        </a-form-item>
-      </a-form>
-      <a-divider />
-      <a-button type="primary" @click="previous">上一步</a-button>
-      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
-    </div>
+      <a-form-item label="选择单个部门生成盘点单">
+        <a-tree
+          v-if="treeData.length > 0" checkable check-strictly :tree-data="treeData" default-expand-all="true"
+          :checked-keys="checkedKeys" :auto-expand-parent="autoExpandParent" @expand="onExpand" @check="onTreeItemCheck"
+        >
+          <template #title="{key: treeKey, title}">
+            <span>{{ title }}<small>{{ treeKey }}</small></span>
+          </template>
+        </a-tree>
+      </a-form-item>
+    </a-form>
+    <a-divider style="margin:14px 0 20px 0 !important;" />
+    <a-button type="primary" @click="previous">上一步</a-button>
+    <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
   </div>
 </template>
 
@@ -318,4 +316,8 @@ export default {
   .m-form-item{
     margin-bottom: 5px;
   }
+  :deep(.ant-form-item-label > label) {
+    font-size: 14px !important;
+    font-weight: 500 !important;
+  }
 </style>

src/components/customer/AssetInventoryStep6.vue

@@ -32,7 +32,7 @@
     </a-result>
 
     
-    <a-divider style="margin-top: 10px;" />
+    <a-divider style="margin:14px 0 20px 0 !important;" />
 
     <a-button key="console" type="primary" @click="previous">上一步</a-button>
     <a-button key="console" style="float: right;" type="primary" @click="next">返回</a-button>
@@ -129,7 +129,7 @@ export default {
        * 打开资产盘点单的CURD窗口
        */
     openCurdWindow: function(data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
           '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/AssetInventoryStep7.vue

@@ -32,10 +32,10 @@
       </template>
     </a-result>
 
-    <a-divider />
-    <Loading v-if="loading" />
+    <a-divider style="margin:14px 0 20px 0 !important;" />
     <a-button key="console" type="primary" @click="previous">上一步</a-button>
     <a-button key="console" style="float: right;" type="primary" @click="next">返回</a-button>
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -128,7 +128,7 @@ export default {
        * 打开资产盘点单的CURD窗口
        */
     openCurdWindow: function(data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
           '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/AssetInventoryStep8.vue

@@ -33,10 +33,10 @@
     </a-result>
 
 
-    <a-divider />
-    <Loading v-if="loading" />
+    <a-divider style="margin:14px 0 20px 0 !important;" />
     <a-button key="console" type="primary" @click="previous">上一步</a-button>
     <a-button key="console" style="float: right;" type="primary" @click="next">返回</a-button>
+    <Loading v-if="loading" />
   </div>
 </template>
 
@@ -131,7 +131,7 @@ export default {
        * 打开资产盘点单的CURD窗口
        */
     openCurdWindow: function(data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
           '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/AssetInventoryStep9.vue

@@ -1,69 +1,48 @@
 <template>
-  <div>
-    <div class="grid-container">
-      <div class="grid-item-row1-column1">
-        <div
-          class="btn-group m-panel"
-          role="group"
-        >
-          <button
-            type="button"
-            class="btn btn-success"
-            @click="getAssetInstance(false)"
-          >
-            {{ $t("lang.AssetInventorySearch.query") }}
-          </button>
-          <button
-            type="button"
-            class="btn btn-danger"
-            @click="clearFilter"
-          >
-            {{ $t("lang.AssetInventorySearch.empty") }}(已选择:{{ selectedShelvesIdArray.length }})
-          </button>
-        </div>
-      </div>
-
-      <div class="grid-item-row1-column2">
-        <a-form-item label="盘点单名称">
-          <a-input
-            v-model:value="inventorySheetName"
-            size="default"
-          />
-        </a-form-item>
-      </div>
-      <div class="grid-item-row2-column2">
-        <a-table
-          :row-selection="{ selectedRowKeys: selectedShelvesIdArray, onChange: onSelectChange }"
-          :columns="columns"
-          :data-source="dataSource"
-        />
-      </div>
-      <div class="grid-item-row3-column2">
-        <div>
-          <a-button
-            type="primary"
-            @click="previous"
-          >
-            上一步
-          </a-button>
-          <a-button
-            style="float: right;"
-            type="primary"
-            @click="next"
-          >
-            下一步
-          </a-button>
-        </div>
-      </div>
-      <Loading v-if="loading" />
-    </div>
+  <div class="container">
+    <a-space direction="vertical" :size="4" class="w-full">
+      <!-- 操作按钮组 -->
+      <a-row :gutter="4" align="middle">
+        <a-col :xxl="4" :xl="4" :lg="6" :md="12" :sm="24" :xs="24" style="margin-top: 8px;">
+          <a-space>
+            <a-button type="primary" @click="getAssetInstance(false)">
+              {{ $t("lang.AssetInventorySearch.query") }}
+            </a-button>
+            <a-button danger @click="clearFilter">
+              {{ $t("lang.AssetInventorySearch.empty") }}（已选择:{{ selectedShelvesIdArray.length }}）
+            </a-button>
+          </a-space>
+        </a-col>
+
+        <!-- 盘点单名称输入 -->
+        <a-col :xxl="8" :xl="8" :lg="8" :md="12" :sm="24" :xs="24" style="margin-top: 8px;">
+          <a-form-item label="盘点单名称" class="mb-0">
+            <a-input v-model:value="inventorySheetName" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 货架表格 -->
+      <a-table
+        :row-selection="{
+          selectedRowKeys: selectedShelvesIdArray,
+          onChange: onSelectChange
+        }" :columns="columns" :data-source="dataSource" :pagination="false" bordered
+      />
+
+      <!-- 操作按钮 -->
+      <a-row justify="space-between">
+        <a-button type="primary" @click="previous">上一步</a-button>
+        <a-button type="primary" @click="next">下一步</a-button>
+      </a-row>
+    </a-space>
+    <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
 import Common from '../../common/Common.js';
-import { Notify } from 'pc-component-v3';
-import { SqlApi } from 'pc-component-v3';
+import { Notify, SqlApi } from 'pc-component-v3';
 export default {
   components: {
   },
@@ -99,12 +78,12 @@ export default {
     next: function () {
       var _self = this;
       if (_self.inventorySheetName == null || _self.inventorySheetName == undefined || _self.inventorySheetName ==
-                '') {
-        Notify.error('错误', '请填写盘点单名称', 1000);
+        '') {
+        Notify.error('错误', '请填写盘点单名称', 2000);
         return;
       }
       if (_self.selectedShelvesIdArray == null || _self.selectedShelvesIdArray.length < 1) {
-        Notify.error('错误', '请至少选择一个货架', 1000);
+        Notify.error('错误', '请至少选择一个货架', 2000);
         return;
       }
       var param = {
@@ -168,100 +147,29 @@ export default {
 </script>
 
 <style scoped>
-.grid-container {
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: 300px auto;
-    grid-template-rows: 35px 30px 1fr 40px;
-    gap: 10px;
-    justify-items: stretch;
-    align-items: stretch;
-    height: calc(100vh - 170px);
-    overflow: auto;
-}
-
-.grid-item-row1-column1 {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 1;
-    grid-column-end: 3;
-}
-
-.grid-item-row1-column2 {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 2;
-    grid-column-end: 3;
-}
-
-/* .grid-item-row2-column1 {
-    grid-row-start: 2;
-    grid-row-end: 3;
-    grid-column-start: 1;
-    grid-column-end: 3;
-  }
- */
-.grid-item-row2-column2 {
-    grid-row-start: 2;
-    grid-row-end: 4;
-    grid-column-start: 2;
-    grid-column-end: 3;
-    overflow: auto;
-}
-
-.grid-item-row3-column1 {
-    grid-row-start: 2;
-    grid-row-end: 6;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    overflow: auto;
+.container {
+  display: flex;
+  flex-direction: column;
 }
 
-.grid-item-row3-column2 {
-    grid-row-start: 4;
-    grid-row-end: 5;
-    grid-column-start: 2;
-    grid-column-end: 3;
+.w-full {
+  width: 100%;
 }
 
-.grid-item-row4-column2 {
-    grid-row-start: 5;
-    grid-row-end: 6;
-    grid-column-start: 2;
-    grid-column-end: 3;
+:deep(.ant-table) {
+  margin: 16px 0;
 }
 
-.grid-item-row5-column2 {
-    grid-row-start: 6;
-    grid-row-end: 7;
-    grid-column-start: 2;
-    grid-column-end: 3;
+:deep(.ant-table-thead > tr > th) {
+  background: #fafafa;
+  font-weight: 600;
 }
-</style>
 
-<style scoped>
-.m-grid-footer {
-    padding: 10px;
+:deep(.ant-form-item) {
+  margin-bottom: 0;
 }
-
-.m-panel {
-    margin-bottom: 0px;
-}
-
-.fixed-table {
-    table-layout: fixed;
-    width: 600px !important;
-    min-width: 600px !important;
-}
-
-table.fixed-table tr {
-    height: 40px;
-}
-
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 500 !important;
 }
 </style>

src/components/customer/AssetLabelPrint.vue

@@ -71,7 +71,7 @@
               <a-input
                 v-model:value="searchParams.assetInstanceName"
                 class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -82,7 +82,7 @@
               <a-input
                 v-model:value="searchParams.assetNo"
                 class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -93,7 +93,7 @@
               <a-input
                 v-model:value="searchParams.type"
                 class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -104,7 +104,7 @@
               <a-input
                 v-model:value="searchParams.epc"
                 class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -114,19 +114,18 @@
               $t("lang.AssetLabelPrint.printStatus")
             }}</label>
             <div class="form-inline-div">
-              <select
-                v-model="searchParams.printStatus"
-                class="form-control m-form-input"
-                style="width: 15em"
+              <a-select
+                v-model:value="searchParams.printStatus"
+                style="width: 200px"
               >
-                <option value="">{{ $t("lang.AssetLabelPrint.all") }}</option>
-                <option value="false">
+                <a-select-option value="">{{ $t("lang.AssetLabelPrint.all") }}</a-select-option>
+                <a-select-option value="false">
                   {{ $t("lang.AssetLabelPrint.notPrint") }}
-                </option>
-                <option value="true">
+                </a-select-option>
+                <a-select-option value="true">
                   {{ $t("lang.AssetLabelPrint.havePrint") }}
-                </option>
-              </select>
+                </a-select-option>
+              </a-select>
             </div>
           </li>
 
@@ -156,20 +155,19 @@
             $t("lang.AssetLabelPrint.selectPrintTemplate")
           }}</label>
           <div class="form-inline-div">
-            <select
-              v-model="templateId"
-              class="form-control m-form-input"
-              style="width: 15em"
+            <a-select
+              v-model:value="templateId"
+              style="width: 200px"
             >
-              <option value="" />
-              <option
+              <a-select-option value="" />
+              <a-select-option
                 v-for="item in templates"
                 :key="'templates' + item.name"
                 :value="item.id"
               >
                 {{ item.name }}
-              </option>
-            </select>
+              </a-select-option>
+            </a-select>
           </div>
         </li>
         <li class="site">
@@ -177,20 +175,19 @@
             $t("lang.AssetLabelPrint.selectPrinter")
           }}</label>
           <div class="form-inline-div">
-            <select
-              v-model="selectedPrinter"
-              class="form-control m-form-input"
-              style="width: 15em"
+            <a-select
+              v-model:value="selectedPrinter"
+              style="width: 200px"
             >
-              <option value="" />
-              <option
+              <a-select-option value="" />
+              <a-select-option
                 v-for="printer in printers"
-                :key="printer.name"
-                :value="printer.name"
+                :key="printer"
+                :value="printer"
               >
-                {{ printer.name }}
-              </option>
-            </select>
+                {{ printer }}
+              </a-select-option>
+            </a-select>
           </div>
         </li>
         <li
@@ -271,29 +268,11 @@
       </table>
     </div>
     <div class="grid-item-4">
-      <div class="m-row">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-          <div class="table-header-left">
-            <span>{{ $t("lang.AssetInstancePrint.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-              $t("lang.AssetInstancePrint.total")
-            }}{{ pagination.total
-            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-              $t("lang.AssetInstancePrint.displayOnEachPage")
-            }}</span>
-            <PageSizeSelect @page-size-changed="gridSizeSelect" />
-            <span>{{ $t("lang.AssetInstancePrint.strip") }}</span>
-          </div>
-          <div class="table-header-right">
-            <VueBootstrapPagination
-              :pagination="pagination"
-              :callback="getAssetInstancePrint"
-            />
-          </div>
-        </div>
-      </div>
+      <AntdPagination
+        ref="paginationRef"
+        :pagination="pagination"
+        @get-page-params="getPageParams"
+      />
     </div>
     <Loading v-if="loading" />
   </div>
@@ -331,7 +310,7 @@ export default {
       organizationWindowNo: '20220420_233656',
       organizationField: {
         name: '',
-        listDisplayFieldName: 'name',
+        listDisplayFieldName: 'organization.name',
       },
       organizationFieldValue: {
         id: null,
@@ -772,8 +751,13 @@ export default {
      */
     reQuery: function () {
       let _self = this;
-      _self.pagination.current_page = 1;
-      _self.getAssetInstancePrint();
+      _self.$refs.paginationRef.backFirstPage();
+    },
+    // 页数改变
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInstancePrint();
     },
 
     /**

src/components/customer/AssetLabelPrinting.vue

@@ -70,8 +70,7 @@
             <div class="form-inline-div">
               <a-input
                 v-model:value="searchParams.assetInstanceName"
-                class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -81,8 +80,7 @@
             <div class="form-inline-div">
               <a-input
                 v-model:value="searchParams.assetNo"
-                class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -92,8 +90,7 @@
             <div class="form-inline-div">
               <a-input
                 v-model:value="searchParams.type"
-                class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -103,8 +100,7 @@
             <div class="form-inline-div">
               <a-input
                 v-model:value="searchParams.epc"
-                class="form-control"
-                style="width: 200px"
+                style="width: 200px;height: 30px;"
                 @keyup.enter="reQuery"
               />
             </div>
@@ -114,19 +110,18 @@
               $t("lang.AssetLabelPrint.printStatus")
             }}</label>
             <div class="form-inline-div">
-              <select
-                v-model="searchParams.printStatus"
-                class="form-control m-form-input"
-                style="width: 15em"
+              <a-select
+                v-model:value="searchParams.printStatus"
+                style="width: 200px"
               >
-                <option value="">{{ $t("lang.AssetLabelPrint.all") }}</option>
-                <option value="false">
+                <a-select-option value="">{{ $t("lang.AssetLabelPrint.all") }}</a-select-option>
+                <a-select-option value="false">
                   {{ $t("lang.AssetLabelPrint.notPrint") }}
-                </option>
-                <option value="true">
+                </a-select-option>
+                <a-select-option value="true">
                   {{ $t("lang.AssetLabelPrint.havePrint") }}
-                </option>
-              </select>
+                </a-select-option>
+              </a-select>
             </div>
           </li>
 
@@ -156,20 +151,19 @@
             $t("lang.AssetLabelPrint.selectPrintTemplate")
           }}</label>
           <div class="form-inline-div">
-            <select
-              v-model="templateId"
-              class="form-control m-form-input"
-              style="width: 15em"
+            <a-select
+              v-model:value="templateId"
+              style="width: 200px"
             >
-              <option value="" />
-              <option
+              <a-select-option value="" />
+              <a-select-option
                 v-for="item in templates"
                 :key="'templates' + item.name"
                 :value="item.id"
               >
                 {{ item.name }}
-              </option>
-            </select>
+              </a-select-option>
+            </a-select>
           </div>
         </li>
         <li class="site">
@@ -177,20 +171,19 @@
             $t("lang.AssetLabelPrint.selectPrinter")
           }}</label>
           <div class="form-inline-div">
-            <select
-              v-model="selectedPrinter"
-              class="form-control m-form-input"
-              style="width: 15em"
+            <a-select
+              v-model:value="selectedPrinter"
+              style="width: 200px"
             >
-              <option value="" />
-              <option
+              <a-select-option value="" />
+              <a-select-option
                 v-for="printer in printers"
                 :key="printer"
                 :value="printer"
               >
                 {{ printer }}
-              </option>
-            </select>
+              </a-select-option>
+            </a-select>
           </div>
         </li>
         <li
@@ -271,29 +264,11 @@
       </table>
     </div>
     <div class="grid-item-4">
-      <div class="m-row">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-          <div class="table-header-left">
-            <span>{{ $t("lang.AssetInstancePrint.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-              $t("lang.AssetInstancePrint.total")
-            }}{{ pagination.total
-            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
-              $t("lang.AssetInstancePrint.displayOnEachPage")
-            }}</span>
-            <PageSizeSelect @page-size-changed="gridSizeSelect" />
-            <span>{{ $t("lang.AssetInstancePrint.strip") }}</span>
-          </div>
-          <div class="table-header-right">
-            <VueBootstrapPagination
-              :pagination="pagination"
-              :callback="getAssetInstancePrint"
-            />
-          </div>
-        </div>
-      </div>
+      <AntdPagination
+        ref="paginationRef"
+        :pagination="pagination"
+        @get-page-params="getPageParams"
+      />
     </div>
     <Loading v-if="loading" />
   </div>
@@ -333,7 +308,7 @@ export default {
       organizationWindowNo: '20220420_233656',
       organizationField: {
         name: '',
-        listDisplayFieldName: 'name',
+        listDisplayFieldName: 'organization.name',
       },
       organizationFieldValue: {
         id: null,
@@ -693,7 +668,6 @@ export default {
           } else {
             message.warning(success.errorMessage);
           }
-          console.log(success, '11111111111111111111111');
         },
         error => {
           Common.processException(error);
@@ -742,8 +716,16 @@ export default {
      */
     reQuery: function () {
       let _self = this;
-      _self.pagination.current_page = 1;
-      _self.getAssetInstancePrint();
+      // _self.pagination.current_page = 1;
+      // _self.getAssetInstancePrint();
+      _self.$refs.paginationRef.backFirstPage();
+    },
+
+    // 页数改变
+    getPageParams: function (page, pageSize) {
+      this.pagination.current_page = page;
+      this.pagination.per_page = pageSize;
+      this.getAssetInstancePrint();
     },
 
     /**
@@ -1048,4 +1030,4 @@ table.fixed-table td {
   list-style: none;
   box-sizing: border-box;
 }
-</style>../../api/printer/printer.js
+</style>

src/components/customer/AutoGenerateAsset.vue

@@ -1,68 +1,62 @@
 <template>
-  <div class="container-fluid">
-    <div class="row">
-      <Navbar
-        :title="
-          $t('lang.AutoGenerateAsset.assetPurchaseOrderDetailsGenerateAsset')
-        "
-        is-go-back="true"
-      />
-    </div>
-    <div v-for="modelData in modelDatas" :key="modelData.id" class="row box">
-      <div class="form-inline">
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.documentNumber") }}：</strong>{{ modelData.data["ao.documentNo"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.assetName") }}：</strong>{{ modelData.data["aol.assetName"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.type") }}：</strong>{{ modelData.data["aol.type"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.unitPrice") }}：</strong>{{ modelData.data["aol.unitPrice"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.number") }}：</strong>{{ modelData.data["aol.qty"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-4 col-sm-6 col-sm-12 div-form">
-          <p>
-            <strong>{{ $t("lang.AutoGenerateAsset.totalprice") }}：</strong>{{ modelData.data["aol.totalPrice"].displayValue[0] }}
-          </p>
-        </div>
-        <div class="col-md-12 col-sm-12 col-sm-12 div-form">
-          <strong>{{ $t("lang.AutoGenerateAsset.assetclassification") }}：</strong>
+  <Navbar :title="$t('lang.AutoGenerateAsset.assetPurchaseOrderDetailsGenerateAsset')" :is-go-back="true" />
+
+  <a-card v-for="modelData in modelDatas" :key="modelData.id" class="box">
+    <a-row :gutter="16">
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.documentNumber') + '：'">
+          <span>{{ modelData.data['ao.documentNo'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.assetName') + '：'">
+          <span>{{ modelData.data['aol.assetName'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.type') + '：'">
+          <span>{{ modelData.data['aol.type'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.unitPrice') + '：'">
+          <span>{{ modelData.data['aol.unitPrice'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.number') + '：'">
+          <span>{{ modelData.data['aol.qty'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :sm="12" :md="8">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.totalprice') + '：'">
+          <span>{{ modelData.data['aol.totalPrice'].displayValue[0] }}</span>
+        </a-form-item>
+      </a-col>
+
+      <a-col v-if="!isGenerate" :span="24">
+        <a-form-item :label="$t('lang.AutoGenerateAsset.assetclassification') + '：'">
           <SearchWidget
-            :info-window-no="infoWindowNo"
-            :where-clause-source="whereClauseSource"
-            :field-value="fieldValue"
-            :display-name="displayName"
-            @value-changed="tabValueChanged($event, modelData)"
+            :info-window-no="infoWindowNo" :where-clause-source="whereClauseSource" :readonly="isGenerate"
+            :field-value="fieldValue" :display-name="displayName" @value-changed="tabValueChanged($event, modelData)"
           />
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <button
-        type="button"
-        class="btn btn-primary btn-block"
-        @click="generateAsset()"
-      >
-        {{ $t("lang.AutoGenerateAsset.generateassets") }}
-      </button>
-    </div>
-    <Loading v-if="loading" />
-  </div>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-card>
+  
+  <a-col v-if="isGenerate" :span="24">
+    <a-alert
+      :message="message"
+      type="warning" show-icon style="margin-top: 12px;"
+    />
+  </a-col>
+  <a-button v-else type="primary" block class="generate-btn" @click="generateAsset()">
+    {{ $t("lang.AutoGenerateAsset.generateassets") }}
+  </a-button>
+
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -75,16 +69,13 @@ import AssetOrderResource from '../../api/asset/AssetOrderResource.js';
 
 export default {
   components: {
-    
-    
-    
   },
   data: function () {
     return {
       modelDatas: [],
       infoWindowNo: 12629,
       whereClauseSource: {
-        customerDataDimensions:[{
+        customerDataDimensions: [{
           fieldName: 'client.id',
           dataDimensionTypeNo: '202201191757',
           defaultDataDimensionTypeValueNo: '1',
@@ -93,6 +84,8 @@ export default {
       fieldValue: {},
       displayName: 'ac.name',
       loading: false,
+      isGenerate: false,
+      message: '',
     };
   },
   mounted: function () {
@@ -105,7 +98,7 @@ export default {
       if (uuid != null) {
         UserStorageResource.uniqueByKey(uuid).then(
           data => {
-            if(data.errorCode != 0) {
+            if (data.errorCode != 0) {
               Notify.error('提示', data.errorMessage, false);
               return;
             }
@@ -119,6 +112,7 @@ export default {
                   }
                 });
               }
+              this.generateAsset(true);
             }
           },
           errorData => {
@@ -133,25 +127,38 @@ export default {
       modelData.data['assetCategory'] = newFieldValue;
     },
 
-    generateAsset: function () {
+    generateAsset: function (isInit) {
       var _self = this;
       if (_self.modelDatas.length == 0) {
-        Notify.error('错误', '没有可操作的数据', false);
+        _self.isGenerate = true;
+        _self.message = '没有可操作的数据';
         return;
       }
-      _self.loading=true;
+      _self.loading = true;
       AssetOrderResource.generateAsset(_self.modelDatas).then(
         successData => {
-          _self.loading=false;
+          _self.loading = false;
           if (successData.success) {
-            Notify.success('成功', successData.result, false);
-          } else {
-            Notify.error('失败', successData.result, false);
+            Notify.success('成功', successData.result, 3000);
+            _self.initData();
+            _self.isGenerate = true;
+            _self.modelDatas.splice(0, _self.modelDatas.length);
           }
         },
         errorData => {
-          _self.loading=false;
-          Common.processException(errorData);
+          _self.loading = false;
+          if (isInit) {
+            if (errorData.status == 500) {
+              if(errorData.responseText.indexOf('未设置资产类别') > 0){
+                _self.isGenerate = false;
+              }else{
+                _self.isGenerate = true;
+                _self.message = errorData.responseText;
+              }
+            }
+          } else {
+            Common.processException(errorData);
+          }
         },
       );
     },
@@ -161,20 +168,25 @@ export default {
 
 <style scoped>
 .box {
-  border: 1px #ccc solid;
-  margin-bottom: 15px;
-  padding-top: 10px;
-  border-radius: 5px;
-  background-color: #ffffff;
+  background: #ffffff;
+  border: none;
 }
 
-.div-form {
-  margin-bottom: 10px;
+.generate-btn {
+  margin-top: 12px;
 }
-.img-back {
-  width: 40px;
+
+:deep(.ant-form-item) {
+  margin-bottom: 6px;
 }
-.img-navbar-brand {
-  padding: 5px !important;
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
+}
+
+:deep(.ant-card-body) {
+  padding: 0 !important;
+  border: none !important;
 }
 </style>

src/components/customer/CopyProperty.vue

@@ -1,207 +1,109 @@
 <template>
-  <div>
-    <div class="flex-container">
-      <div class=" flex-header">
-        <Navbar
-          title="资产卡片复制"
-          :is-go-back="false"
-        />
-      </div>
-      <div class="panel panel-info">
-        <div class="panel-heading">
-          <h3 class="panel-title">被复制资产的关键信息</h3>
-        </div>
-        <div class="panel-body">
-          <div class="form-horizontal">
-            <div class="form-group">
-              <label
-                for="name"
-                class="col-sm-1 control-label"
-              >资产名称</label>
-              <div class="col-sm-11">
-                <input
-                  id="name"
-                  v-model="assetInstance.name"
-                  autocomplete="off"
-                  type="type"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label
-                for="assetNo"
-                class="col-sm-1 control-label"
-              >资产编号</label>
-              <div class="col-sm-11">
-                <input
-                  id="assetNo"
-                  v-model="assetInstance.assetNo"
-                  autocomplete="off"
-                  type="type"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label
-                for="no"
-                class="col-sm-1 control-label"
-              >卡片编号</label>
-              <div class="col-sm-11">
-                <input
-                  id="no"
-                  v-model="assetInstance.no"
-                  autocomplete="off"
-                  type="type"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label
-                for="type"
-                class="col-sm-1 control-label"
-              >规格型号</label>
-              <div class="col-sm-11">
-                <input
-                  id="type"
-                  v-model="assetInstance.type"
-                  autocomplete="off"
-                  type="type"
-                  class="form-control"
-                  readonly
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="copyIsSuccess == false"
-        class="panel panel-info"
-      >
-        <div class="panel-heading">
-          <h3 class="panel-title">复制选项</h3>
-        </div>
-        <div class="panel-body">
-          <div class="form-horizontal">
-            <div class="form-group">
-              <label
-                for="copyQuantity"
-                class="col-sm-1 control-label"
-              >复制数量</label>
-              <div class="col-sm-11">
-                <input
-                  id="copyQuantity"
-                  v-model="quantity"
-                  autocomplete="off"
-                  type="number"
-                  class="form-control"
-                />
-              </div>
-            </div>
-            <div class="form-group">
-              <label
-                for="assetNoGenerateMethod"
-                class="col-sm-1 control-label"
-              >资产编号生成规则</label>
-              <div class="col-sm-11">
-                <select
-                  v-model="assetNoGenerateMethod"
-                  class="form-control"
-                >
-                  <option value="AssetConfigSetting">根据资产设置生成新的资产编号</option>
-                  <option value="EqualsAssetNo">与被复制的资产编号相同</option>
-                  <option value="AssetNoAndSerialNo">被复制的资产编号-序列号</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group">
-              <label
-                for="noGenerateMethod"
-                class="col-sm-1 control-label"
-              >卡片编号生成规则</label>
-              <div class="col-sm-11">
-                <select
-                  v-model="noGenerateMethod"
-                  class="form-control"
-                >
-                  <option value="AssetConfigSetting">根据资产设置生成新的卡片编号</option>
-                  <option value="NoAndSerialNo">卡片编号-序列号</option>
-                </select>
-              </div>
-            </div>
-            <button
-              type="button"
-              class="btn btn-info col-sm-12"
-              @click="confirmCopy"
-            >
-              确认
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else
-        class="panel panel-info"
-      >
-        <div class="panel-heading">
-          <h3 class="panel-title">复制成功</h3>
-        </div>
-        <div class="panel-body">
-          <table class="table table-responsive table-bordered">
-            <thead>
-              <tr>
-                <td>
-                  序号
-                </td>
-                <td>
-                  资产名称
-                </td>
-                <td>
-                  资产编号
-                </td>
-                <td>
-                  卡片编号
-                </td>
-                <td>
-                  规格型号
-                </td>
-                <td>
-                  操作
-                </td>
-              </tr>
-            </thead>
-            <tbody v-if="assetInstances != null && assetInstances.length > 0">
-              <tr
-                v-for="(item, index) in assetInstances"
-                :key="item.id"
-              >
-                <td>{{ index + 1 }}</td>
-                <td>{{ item.name }}</td>
-                <td>{{ item.assetNo }}</td>
-                <td>{{ item.no }}</td>
-                <td>{{ item.type }}</td>
-                <td>
-                  <button
-                    class="btn btn-link"
-                    @click="viewAssetInstance(item)"
-                  >
-                    查看
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-    <Loading v-if="loading" />
-  </div>
+  <Navbar title="资产卡片复制" :is-go-back="false" />
+
+  <!-- 被复制资产信息 -->
+  <a-card title="被复制资产的关键信息" class="info-card">
+    <!-- :head-style="{ backgroundColor: '#d1e9f5', color: '#31708f', fontWeight: 500 }" -->
+    <a-form :label-col="{ style: 'width: 120px' }">
+      <a-row :gutter="[16, 12]">
+        <a-col :span="24">
+          <a-form-item label="资产名称">
+            <a-input v-model:value="assetInstance.name" readonly />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="资产编号">
+            <a-input v-model:value="assetInstance.assetNo" readonly />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="卡片编号">
+            <a-input v-model:value="assetInstance.no" readonly />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="规格型号">
+            <a-input v-model:value="assetInstance.type" readonly />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-card>
+
+  <!-- 复制选项 -->
+  <a-card v-if="!copyIsSuccess" title="复制选项" class="action-card">
+    <a-form :label-col="{ style: 'width: 120px' }">
+      <a-row :gutter="[16, 12]">
+        <a-col :span="24">
+          <a-form-item label="复制数量">
+            <a-input-number v-model:value="quantity" :min="1" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="24">
+          <a-form-item label="资产编号生成规则">
+            <a-select v-model:value="assetNoGenerateMethod">
+              <a-select-option value="AssetConfigSetting">
+                根据资产设置生成新的资产编号
+              </a-select-option>
+              <a-select-option value="EqualsAssetNo">
+                与被复制的资产编号相同
+              </a-select-option>
+              <a-select-option value="AssetNoAndSerialNo">
+                被复制的资产编号-序列号
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="24">
+          <a-form-item label="卡片编号生成规则">
+            <a-select v-model:value="noGenerateMethod">
+              <a-select-option value="AssetConfigSetting">
+                根据资产设置生成新的卡片编号
+              </a-select-option>
+              <a-select-option value="NoAndSerialNo">
+                卡片编号-序列号
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="24">
+          <a-button type="primary" block @click="confirmCopy">
+            确认
+          </a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-card>
+
+  <!-- 复制结果 -->
+  <a-card
+    v-else title="复制成功" class="result-card"
+    :head-style="{ backgroundColor: '#d1e9f5', color: '#31708f', fontWeight: 500 }"
+  >
+    <a-table :data-source="assetInstances" :pagination="false" bordered>
+      <a-table-column key="index" title="序号">
+        <template #default="{ index }">
+          {{ index + 1 }}
+        </template>
+      </a-table-column>
+      <a-table-column title="资产名称" data-index="name" />
+      <a-table-column title="资产编号" data-index="assetNo" />
+      <a-table-column title="卡片编号" data-index="no" />
+      <a-table-column title="规格型号" data-index="type" />
+      <a-table-column key="action" title="操作">
+        <template #default="{ record }">
+          <a-button type="link" @click="viewAssetInstance(record)">
+            查看
+          </a-button>
+        </template>
+      </a-table-column>
+    </a-table>
+  </a-card>
+
+  <Loading v-if="loading" />
 </template>
 
 <script>
@@ -216,8 +118,8 @@ import { Notify, Uuid } from 'pc-component-v3';
 
 export default {
   components: {
-     
-    
+
+
   },
   data: function () {
     return {
@@ -238,10 +140,10 @@ export default {
     // 根据UUID获取资产的id
     var uuid = _self.$route.params.uuid;
     UserStorageResource.uniqueByKey(uuid + '_modelData').then(data => {
-      if(data.errorCode != 0) {
+      if (data.errorCode != 0) {
         Notify.error('提示', data.errorMessage, false);
         return;
-      }else{
+      } else {
         let modelData = JSON.parse(data.data);
         _self.assetInstanceId = modelData.id;
         _self.findByAssetInstanceId();
@@ -258,10 +160,10 @@ export default {
     findByAssetInstanceId: function () {
       const _self = this;
       AssetInstanceResource.uniqueAssetInstance(_self.assetInstanceId).then(successData => {
-        if(successData.errorCode != 0) {
+        if (successData.errorCode != 0) {
           Notify.error('提示', successData.errorMessage, false);
           return;
-        }else{
+        } else {
           _self.assetInstance = successData.data;
         }
       }, errorData => {
@@ -280,22 +182,22 @@ export default {
         'assetNoGenerateMethod': _self.assetNoGenerateMethod,
         'noGenerateMethod': _self.noGenerateMethod,
       };
-      _self.loading=true;
+      _self.loading = true;
       AssetInstanceResource.copy(assetInstanceCopyRequest).then(successData => {
         if (successData.errorCode == 0) {
           _self.assetInstances = successData.assetSimpleResponses;
           _self.copyIsSuccess = true;
-          _self.loading=false;
+          _self.loading = false;
           Notify.success('资产卡片复制成功', '资产卡片复制成功。', true);
-        }else{
+        } else {
           _self.assetInstances = [];
           _self.copyIsSuccess = false;
-          _self.loading=false;
+          _self.loading = false;
           Notify.error('资产卡片复制失败', successData.errorMessage, true);
         }
       }, errorData => {
         Common.processException(errorData);
-        _self.loading=false;
+        _self.loading = false;
       },
       );
     },
@@ -305,10 +207,10 @@ export default {
          */
     viewAssetInstance: function (assetInstance) {
       let url = Common.getRedirectUrl(
-        '#/desktop/window/window-read/view/040701/0/' +
-                assetInstance.id +
-                '?currPage=1&currIndex=1&totalCount=1&uuid=' +
-                Uuid.createUUID(),
+        '#/desktop/window1/window-read/view/040701/0/' +
+        assetInstance.id +
+        '?currPage=1&currIndex=1&totalCount=1&uuid=' +
+        Uuid.createUUID(),
       );
       window.open(url);
     },
@@ -318,27 +220,24 @@ export default {
 </script>
 
 <style scoped>
-.fixed-table {
-    table-layout: fixed;
+.info-card,
+.action-card,
+.result-card {
+  margin-bottom: 24px;
+  border-radius: 4px;
 }
 
-table.fixed-table tr {
-    height: 40px;
+.result-card :deep(.ant-table) {
+  margin-top: 12px;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.antd-header {
+  background-color: #d1e9f5 !important;
+  color: #31708f !important;
 }
 
-.flex-container {
-    display: flex;
-    /* 垂直*/
-    flex-direction: column;
-    width: 100%;
-    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
-    height: calc(100vh - 100px);
+:deep(.ant-form-item-label > label) {
+  font-weight: 500 !important;
+  font-size: 14px !important;
 }
 </style>

src/components/customer/GenerateDocumentTool.vue

@@ -1,37 +1,23 @@
 <template>
   <div class="grid-container">
     <div class="grid-item-1">
-      <Navbar
-        :title="title"
-        :is-go-back="false"
-      />
+      <Navbar :title="title" :is-go-back="false" />
     </div>
 
-    <div
-      style="margin-bottom: 5px;"
-      class="grid-item-2"
-    >
-      <div class="btn-group">
-        <button
-          class="btn btn-primary"
-          @click="generate()"
-        >
+    <div style="margin-bottom: 5px;" class="grid-item-2">
+      <a-space>
+        <a-button type="primary" @click="generate()">
           确定
-        </button>
-        <button
-          class="btn btn-warning"
-          @click="back()"
-        >
+        </a-button>
+        <a-button danger @click="back()">
           撤销
-        </button>
-      </div>
+        </a-button>
+      </a-space>
     </div>
 
     <div class="grid-item-3">
       <DocGenerator
-        ref="docGenerator"
-        :info-window-no="infoWindowNo"
-        :generate-ids="generateIds"
+        ref="docGenerator" :info-window-no="infoWindowNo" :generate-ids="generateIds"
         @show-title="title = $event"
       />
     </div>
@@ -46,7 +32,7 @@ import { IFrameUtil } from 'pc-component-v3';
 
 export default {
 
-  components: {  },
+  components: {},
   data: function () {
     return {
       uuid: '',
@@ -86,7 +72,7 @@ export default {
       } else if (_self.type == 'newAssetCheck') {
         //资产采购单生成验收单
         url = 'assetCheckResource/generateModelData';
-      }else{
+      } else {
         Notify.error('提示', '不识别的生单地址。' + _self.type, false);
         return;
       }
@@ -110,7 +96,7 @@ export default {
           if (modelData != undefined) {
             if (modelData.saveDatas != undefined) {
               modelData.saveDatas.forEach(function (item) {
-                if(item.editMode == null){
+                if (item.editMode == null) {
                   item.editMode = true;
                 }
                 item.tabIndex = 1;
@@ -139,28 +125,28 @@ export default {
 
 <style scoped>
 .grid-container {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: min-content min-content auto;
-    height: calc(100vh - 35px);
-    width: 100%;
-    padding: 10px;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: min-content min-content auto;
+  height: calc(100vh - 35px);
+  width: 100%;
+  padding: 10px;
 }
 
 .grid-item-1 {
-    grid-row: 1 / 2;
-    grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
 }
 
 .grid-item-2 {
-    grid-row: 2 / 3;
-    grid-column: 1 / 2;
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
 }
 
 .grid-item-3 {
-    overflow: auto;
-    grid-row: 3/4;
-    grid-column: 1 / 2;
-    height: 100%;
+  overflow: auto;
+  grid-row: 3/4;
+  grid-column: 1 / 2;
+  height: 100%;
 }
 </style>

src/components/customer/InventoryDataProcessing.vue

@@ -1,18 +1,16 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div v-if="pageInformation.showPage != 1 && pageInformation.showPage != 7 ">
-        <Navbar :title="$t('lang.AssetInventory.inventoryDataProcessing')" :is-go-back="false" />
-      </div>
-      <div id="step-container" style="margin-top: 20px;">
-        <section v-if="pageInformation.showPage != 1 && pageInformation.showPage != 7 ">
+  <div>
+    <div>
+      <Navbar v-if="pageInformation.showPage === 0" :title="$t('lang.AssetInventory.inventoryDataProcessing')" :is-go-back="false" />
+      <div v-if="pageInformation.showPage === 0 " id="step-container" style="margin-top: 20px;">
+        <section>
           <a-steps :current="pageInformation.currentStep">
-            <a-step title="选择处理盘点数据类型" />
-            <a-step title="处理盘点数据" />
+            <a-step :title="$t('lang.ConsolidatedAssetInventory.selectInventoryDataProcessingType')" />
+            <a-step :title="$t('lang.ConsolidatedAssetInventory.processInventoryData')" />
           </a-steps>
         </section>
+        <a-divider style="margin:20px 0  6px 0 !important;" />
       </div>
-      <a-divider v-if="pageInformation.showPage != 1" />
       <section>
         <inventory-data-processing-step1 v-if="pageInformation.showPage == 0" :current-step="pageInformation" @next="nextStep" />
         <inventory-data-processing-step2 v-if="pageInformation.showPage == 1" :current-step="pageInformation" @next="nextStep" @previous="previousStep" />
@@ -80,42 +78,7 @@ export default {
 };
 </script>
 <style scoped>
-  .grid-container {
-    display: grid;
-    grid-template-rows: 8% 8% 84%;
-    grid-template-columns: 100%;
-    width: 100%;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 130px);
-  }
-
-  .grid-item-1 {
-    grid-row: 1/2;
-  }
-
-  .grid-item-2 {
-    grid-row: 2/3;
-  }
-
-  .grid-item-3 {
-    grid-row: 3/4;
-  }
-
-  .box {
-    border: 1px #ccc solid;
-    margin-bottom: 15px;
-    padding-top: 10px;
-    border-radius: 5px;
-    background-color: #ffffff;
-  }
-
-  .label {
-    float: left;
-  }
-
-  .div-form {
-    margin-bottom: 10px;
-  }
+ 
   #step-container{
     margin: 0 !important;
   }

src/components/customer/InventoryDataProcessingStep1.vue

@@ -1,17 +1,15 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <a-radio-group v-model:value="value">
-          <a-radio :style="radioStyle" :value="1">合并盘点单</a-radio>
-          <a-radio :style="radioStyle" :value="2">生成盘点报表</a-radio>
-          <a-radio :style="radioStyle" :value="3">关闭盘点单</a-radio>
-        </a-radio-group>
-      </div>
-      <a-divider />
-      <a-button type="primary" @click="previousStep">上一步</a-button>
-      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
+  <div>
+    <div>
+      <a-radio-group v-model:value="value">
+        <a-radio :style="radioStyle" :value="1">{{ $t("lang.ConsolidatedAssetInventory.mergeInventorySheet") }}</a-radio>
+        <a-radio :style="radioStyle" :value="2">{{ $t("lang.ConsolidatedAssetInventory.generateInventoryReport") }}</a-radio>
+        <a-radio :style="radioStyle" :value="3">{{ $t("lang.ConsolidatedAssetInventory.closeInventorySheet") }}</a-radio>
+      </a-radio-group>
     </div>
+    <a-divider style="margin:14px 0 20px 0 !important;" />
+    <a-button type="primary" @click="previousStep">上一步</a-button>
+    <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
   </div>
 </template>
 

src/components/customer/InventoryDataProcessingStep2.vue

@@ -1,121 +1,27 @@
 <template>
   <div>
     <Navbar :title="$t('lang.ConsolidatedAssetInventory.consolidatedAssetInventory')" :is-go-back="false" />
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <div style="margin-top: 10px">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label for="name">{{
-                  $t("lang.ConsolidatedAssetInventory.inventoryName") 
-                }}</label>
-                <input
-                  id="name" v-model="name" autocomplete="off" type="text" class="form-control"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-              <div class="form-group">
-                <label for="documentNo">{{
-                  $t("lang.ConsolidatedAssetInventory.inventoryNo")
-                }}</label>
-                <input
-                  id="documentNo" v-model="documentNo" autocomplete="off" type="text"
-                  class="form-control" @keydown.enter="resetQuery"
-                />
-              </div>
-              <div class="form-group">
-                <button class="btn btn-primary" @click="resetQuery">
-                  {{ $t("lang.ConsolidatedAssetInventory.query") }}
-                </button>
-                <button class="btn btn-success">
-                  {{
-                    $t(
-                      "lang.ConsolidatedAssetInventory.mergeInventorySheet"
-                    )
-                  }}
-                  <span class="badge">{{ mergeInventorySheetId == null?0:1 }}</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-2">
-        <table class="fixed-table table-striped table-bordered" style="margin-top: 10px">
-          <thead>
-            <tr>
-              <th class="col-md-1" />
-              <th class="col-md-2">
-                {{ $t("lang.ConsolidatedAssetInventory.departmentName") }}
-              </th>
-              <th class="col-md-3">
-                {{ $t("lang.ConsolidatedAssetInventory.organizationName") }}
-              </th>
-              <th class="col-md-4">
-                {{ $t("lang.ConsolidatedAssetInventory.inventoryName") }}
-              </th>
-              <th class="col-md-5">
-                {{ $t("lang.ConsolidatedAssetInventory.inventoryNo") }}
-              </th>
-              <th class="col-md-6">
-                {{ $t("lang.ConsolidatedAssetInventory.startDate") }}
-              </th>
-              <th class="col-md-7">
-                {{ $t("lang.ConsolidatedAssetInventory.expirationDate") }}
-              </th>
-              <th class="col-md-8">
-                {{ $t("lang.ConsolidatedAssetInventory.accountDate") }}
-              </th>
-            </tr>
-          </thead>
-          <tbody v-if="inventoryDtos.length > 0">
-            <tr v-for="item in inventoryDtos" :key="item.id">
-              <td class="col-md-1">
-                <input
-                  id="item.id" v-model="mergeInventorySheetId" autocomplete="off" type="radio"
-                  :value="item.id"
-                />
-              </td>
-              <td class="col-md-2">{{ item.organizationName }}</td>
-              <td class="col-md-3">{{ item.clientName }}</td>
-              <td class="col-md-4">{{ item.name }}</td>
-              <td class="col-md-5">{{ item.documentNo }}</td>
-              <td class="col-md-6">{{ item.inventoryStartDate }}</td>
-              <td class="col-md-7">{{ item.inventoryEndDate }}</td>
-              <td class="col-md-8">{{ item.accountDate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="grid-item-3">
-        <div>
-          <div class="pull-left">
-            <span>{{ $t("lang.ConsolidatedAssetInventory.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.ConsolidatedAssetInventory.strip") }},{{
-              $t("lang.ConsolidatedAssetInventory.inTotal")
-            }}{{ pagination.total
-            }}{{ $t("lang.ConsolidatedAssetInventory.strip") }},{{
-              $t("lang.ConsolidatedAssetInventory.eachPage")
-            }}</span>
-            <PageSizeSelect @page-size-changed="pageSizeChanged" />
-            <span>{{ $t("lang.ConsolidatedAssetInventory.strip") }}</span>
-          </div>
-          <div class="pull-right">
-            <VueBootstrapPagination
-              v-if="pagination.last_page > 0" :pagination="pagination"
-              :callback="getDatas" :show-head-and-tail="true"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="grid-item-4">
-        <a-button type="primary" @click="previous">上一步</a-button>
-        <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
-      </div>
+    <a-space>
+      <label>{{ $t("lang.ConsolidatedAssetInventory.inventoryName") }}</label>
+      <a-input v-model:value="name" @press-enter="resetQuery" />
+      <label>{{ $t("lang.ConsolidatedAssetInventory.inventoryNo") }}</label>
+      <a-input v-model:value="documentNo" @press-enter="resetQuery" />
+      <a-button type="primary" @click="resetQuery">
+        {{ $t("lang.ConsolidatedAssetInventory.query") }}
+      </a-button>
+      <a-button style="background-color: #4aa14a; color: white;" @click="resetQuery">
+        {{ $t("lang.ConsolidatedAssetInventory.mergeInventorySheet") }}
+        <span style="color: white;">{{ '(' + (mergeInventorySheetId == null ? 0 : 1) + ')' }}</span>
+      </a-button>
+    </a-space>
+    <CommonTable
+      ref="table1" :columns="columns" :data-source="inventoryDtos" :total="pagination.total"
+      :is-select="true" :select-type="'radio'" :extra-height="120" @get-pager="getPageParams"
+      @get-selected="getSelectParams"
+    />
+    <div class="footer">
+      <a-button type="primary" @click="previous">上一步</a-button>
+      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
     </div>
     <Loading v-if="loading" />
   </div>
@@ -124,21 +30,23 @@
 <script>
 import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
 import Common from '../../common/Common.js';
-import { Notify} from 'pc-component-v3';
+import { Notify } from 'pc-component-v3';
+import CommonTable from '../../common/CommonTable.vue';
+
 export default {
   components: {
-
+    CommonTable,
   },
   props: {
     currentStep: {
       type: Object,
-      default () {
+      default() {
         return {};
       },
     },
   },
   emits: ['next', 'previous'],
-  data: function() {
+  data: function () {
     return {
       inventoryDtos: [],
       mergeInventorySheetId: null, //合并盘点单
@@ -148,17 +56,46 @@ export default {
         current_page: 1, // required
         last_page: 0, // required
       },
-      pagination1: {
-        total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
-      },
       name: null,
       documentNo: null,
       checked: false,
       loading: false,
       modal: false,
+      columns: [
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.departmentName'),
+          dataIndex: 'organizationName',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.organizationName'),
+          dataIndex: 'clientName',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.inventoryName'),
+          dataIndex: 'name',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.inventoryNo'),
+          dataIndex: 'documentNo',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.startDate'),
+          dataIndex: 'inventoryStartDate',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.expirationDate'),
+          dataIndex: 'inventoryEndDate',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.accountDate'),
+          dataIndex: 'accountDate',
+        },
+      ].map(column => ({
+        ...column,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
     };
   },
   computed: {},
@@ -168,19 +105,28 @@ export default {
     $route: 'init',
   },
 
-  mounted: function() {
+  mounted: function () {
     this.init();
   },
 
   methods: {
-    previous: function() {
+    getPageParams(current, pageSize) {
+      this.pagination.current_page = current;
+      this.pagination.per_page = pageSize;
+      this.getDatas();
+    },
+    getSelectParams(selected) {
+      this.mergeInventorySheetId = selected.selectedRowKeys[0];
+    },
+
+    previous: function () {
       var data = {
         currentStep: 0,
         showPage: 0,
       };
       this.$emit('previous', data);
     },
-    next: function() {
+    next: function () {
       var _self = this;
       if (_self.mergeInventorySheetId == undefined || _self.mergeInventorySheetId == null) {
         Notify.error('错误', '未选择合并盘点单', 1000);
@@ -194,27 +140,16 @@ export default {
       _self.$emit('next', data);
     },
     /**
-			 * 重置分页，然后查询
-			 */
-    resetQuery: function() {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.getDatas();
+       * 重置分页，然后查询
+       */
+    resetQuery: function () {
+      this.$refs.table1.backFirstPage();
     },
 
     /**
-			 * 表格显示行数发生改变
-			 */
-    pageSizeChanged: function(newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      this.getDatas();
-    },
-
-    /**
-			 * 查询数据
-			 */
-    getDatas: function() {
+       * 查询数据
+       */
+    getDatas: function () {
       var _self = this;
       _self.loading = true;
       var param = {
@@ -237,17 +172,13 @@ export default {
           _self.loading = false;
           if (
             successData.dataList == undefined ||
-							successData.dataList.length == 0
+            successData.dataList.length == 0
           ) {
             return;
           }
           _self.pagination.last_page = Math.ceil(
             successData.totalSize / successData.range.length,
           );
-          _self.pagination1.last_page = Math.ceil(
-            successData.totalSize / successData.range.length,
-          );
-          _self.fixedTableHeader();
         },
         errorData => {
           _self.loading = false;
@@ -256,26 +187,9 @@ export default {
       );
     },
 
-    /**
-			 * 冻结表头
-			 */
-    fixedTableHeader: function() {
-      let _self = this;
-      _self.$nextTick(function() {
-        $('.fixed-table').tableFixer({
-          head: true,
-        });
-      });
-    },
-
-    init: function() {
+    init: function () {
       var _self = this;
       _self.getDatas();
-      this.fixedTableHeader();
-      // 可调整表格列宽
-      _self.$nextTick(function() {
-        $('.fixed-table').resizableColumns();
-      });
     },
   },
 };
@@ -283,59 +197,9 @@ export default {
 
 
 <style scoped>
-	.grid-container {
-		margin-top: 10px;
-		display: grid;
-		grid-template-columns: 300px auto;
-		grid-template-rows: 35px 1fr 40px 40px;
-		gap: 10px;
-		justify-items: stretch;
-		align-items: stretch;
-		height: calc(100vh - 170px);
-		overflow: auto;
-	}
-
-	.grid-item-1 {
-		grid-row-start: 1;
-		grid-row-end: 3;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.grid-item-2 {
-		grid-row-start: 2;
-		grid-row-end: 3;
-		grid-column-start: 1;
-		grid-column-end: 3;
-		overflow: auto;
-	}
-
-	.grid-item-3 {
-		grid-row-start: 3;
-		grid-row-end: 4;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.grid-item-4 {
-		grid-row-start: 4;
-		grid-row-end: 5;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.fixed-table {
-		table-layout: fixed;
-	}
-
-	table.fixed-table tr {
-		height: 40px;
-	}
-
-	table.fixed-table th,
-	table.fixed-table td {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+.footer {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/components/customer/InventoryDataProcessingStep3.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <InfoWindow
+      :show-back="false"
       :info-window-no="infoWindowNo" 
       :where-clause-source="whereClauseSource"
     />

src/components/customer/InventoryDataProcessingStep4.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <Navbar :title="$t('lang.ConsolidatedAssetInventory.closeInventorySheet')" :is-go-back="false" />
     <div>
       <label>单据号</label>
       <a-input
@@ -124,7 +125,7 @@ const columns = reactive(
       dataIndex: 'operation',
       fixed: 'right',
     },
-  ].map(item => ({ ...item, align: 'center' })),
+  ].map(item => ({ ...item, align: 'center', resizable: true ,ellipsis: true})),
 );
 const dataSource = ref([]);
 const total = ref(0); // 数据总数

src/components/customer/InventoryDataProcessingStep6.vue

@@ -97,7 +97,7 @@ module.exports = {
        * 打开资产盘点单的CURD窗口
        */
     openCurdWindow: function(data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
           '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/InventoryDataProcessingStep7.vue

@@ -1,123 +1,26 @@
 <template>
   <div>
     <Navbar :title="$t('lang.ConsolidatedAssetInventory.consolidatedAssetInventory')" :is-go-back="false" />
-    <div class="grid-container">
-      <div class="grid-item-1">
-        <div style="margin-top: 10px">
-          <div class="col-md-12">
-            <div class="form-inline">
-              <div class="form-group">
-                <label for="name">{{
-                  $t("lang.ConsolidatedAssetInventory.inventoryName") 
-                }}</label>
-                <input
-                  id="name" v-model="name" autocomplete="off" type="text" class="form-control"
-                  @keydown.enter="resetQuery"
-                />
-              </div>
-              <div class="form-group">
-                <label for="documentNo">{{
-                  $t("lang.ConsolidatedAssetInventory.inventoryNo")
-                }}</label>
-                <input
-                  id="documentNo" v-model="documentNo" autocomplete="off" type="text"
-                  class="form-control" @keydown.enter="resetQuery"
-                />
-              </div>
-              <div class="form-group">
-                <button class="btn btn-primary" @click="resetQuery">
-                  {{ $t("lang.ConsolidatedAssetInventory.query") }}
-                </button>
-                <button class="btn btn-success">
-                  {{
-                    $t(
-                      "lang.ConsolidatedAssetInventory.combinedInventory"
-                    )
-                  }}
-                  <span class="badge">{{ consolidatedInventorySheetIds.length }}</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-item-2">
-        <table class="fixed-table table-striped table-bordered" style="margin-top: 10px">
-          <thead>
-            <tr>
-              <th class="col-md-1">
-                <input autocomplete="off" type="checkbox" :checked="allChecked" @change="selectAll()" />
-              </th>
-              <th class="col-md-2">
-                {{ $t("lang.ConsolidatedAssetInventory.departmentName") }}
-              </th>
-              <th class="col-md-3">
-                {{ $t("lang.ConsolidatedAssetInventory.organizationName") }}
-              </th>
-              <th class="col-md-4">
-                {{ $t("lang.ConsolidatedAssetInventory.inventoryName") }}
-              </th>
-              <th class="col-md-5">
-                {{ $t("lang.ConsolidatedAssetInventory.inventoryNo") }}
-              </th>
-              <th class="col-md-6">
-                {{ $t("lang.ConsolidatedAssetInventory.startDate") }}
-              </th>
-              <th class="col-md-7">
-                {{ $t("lang.ConsolidatedAssetInventory.expirationDate") }}
-              </th>
-              <th class="col-md-8">
-                {{ $t("lang.ConsolidatedAssetInventory.accountDate") }}
-              </th>
-            </tr>
-          </thead>
-          <tbody v-if="inventoryDtos.length > 0">
-            <tr v-for="item in inventoryDtos" :key="item.id">
-              <td class="col-md-1">
-                <input
-                  id="item.id" v-model="consolidatedInventorySheetIds" autocomplete="off" type="checkbox"
-                  :value="item.id"
-                />
-              </td>
-              <td class="col-md-2">{{ item.organizationName }}</td>
-              <td class="col-md-3">{{ item.clientName }}</td>
-              <td class="col-md-4">{{ item.name }}</td>
-              <td class="col-md-5">{{ item.documentNo }}</td>
-              <td class="col-md-6">{{ item.inventoryStartDate }}</td>
-              <td class="col-md-7">{{ item.inventoryEndDate }}</td>
-              <td class="col-md-8">{{ item.accountDate }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="grid-item-3">
-        <div>
-          <div class="pull-left">
-            <span>{{ $t("lang.ConsolidatedAssetInventory.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.ConsolidatedAssetInventory.strip") }},{{
-              $t("lang.ConsolidatedAssetInventory.inTotal")
-            }}{{ pagination.total
-            }}{{ $t("lang.ConsolidatedAssetInventory.strip") }},{{
-              $t("lang.ConsolidatedAssetInventory.eachPage")
-            }}</span>
-            <PageSizeSelect @page-size-changed="pageSizeChanged" />
-            <span>{{ $t("lang.ConsolidatedAssetInventory.strip") }}</span>
-          </div>
-          <div class="pull-right">
-            <VueBootstrapPagination
-              v-if="pagination.last_page > 0" :pagination="pagination"
-              :callback="getDatas" :show-head-and-tail="true"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="grid-item-4">
-        <a-button type="primary" @click="previous">上一步</a-button>
-        <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
-      </div>
+    <a-space>
+      <label>{{ $t("lang.ConsolidatedAssetInventory.inventoryName") }}</label>
+      <a-input v-model:value="name" @press-enter="resetQuery" />
+      <label>{{ $t("lang.ConsolidatedAssetInventory.inventoryNo") }}</label>
+      <a-input v-model:value="documentNo" @press-enter="resetQuery" />
+      <a-button type="primary" @click="resetQuery">
+        {{ $t("lang.ConsolidatedAssetInventory.query") }}
+      </a-button>
+      <a-button style="background-color: #4aa14a; color: white;" @click="resetQuery">
+        {{ $t("lang.ConsolidatedAssetInventory.combinedInventory") }}
+        <span style="color: white;">{{ '(' + consolidatedInventorySheetIds.length + ')' }}</span>
+      </a-button>
+    </a-space>
+    <CommonTable
+      ref="table2" :columns="columns" :data-source="inventoryDtos" :total="pagination.total"
+      :is-select="true" :extra-height="120" @get-pager="getPageParams" @get-selected="getSelectParams"
+    />
+    <div class="footer">
+      <a-button type="primary" @click="previous">上一步</a-button>
+      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
     </div>
     <Loading v-if="loading" />
   </div>
@@ -126,21 +29,22 @@
 <script>
 import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
 import Common from '../../common/Common.js';
-import { Notify} from 'pc-component-v3';
+import { Notify } from 'pc-component-v3';
+import CommonTable from '../../common/CommonTable.vue';
 export default {
   components: {
-
+    CommonTable,
   },
   props: {
     currentStep: {
       type: Object,
-      default () {
+      default() {
         return {};
       },
     },
   },
-  emits: ['previous','next'],
-  data: function() {
+  emits: ['previous', 'next'],
+  data: function () {
     return {
       inventoryDtos: [],
       consolidatedInventorySheetIds: [], //被合并的盘点单
@@ -150,29 +54,48 @@ export default {
         current_page: 1, // required
         last_page: 0, // required
       },
-      pagination1: {
-        total: 0,
-        per_page: Common.pageSize, // required
-        current_page: 1, // required
-        last_page: 0, // required
-      },
       name: null,
       documentNo: null,
       checked: false,
       loading: false,
+      columns: [
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.departmentName'),
+          dataIndex: 'organizationName',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.organizationName'),
+          dataIndex: 'clientName',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.inventoryName'),
+          dataIndex: 'name',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.inventoryNo'),
+          dataIndex: 'documentNo',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.startDate'),
+          dataIndex: 'inventoryStartDate',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.expirationDate'),
+          dataIndex: 'inventoryEndDate',
+        },
+        {
+          title: this.$t('lang.ConsolidatedAssetInventory.accountDate'),
+          dataIndex: 'accountDate',
+        },
+      ].map(column => ({
+        ...column,
+        ellipsis: true,
+        align: 'center',
+        resizable: true,
+      })),
     };
   },
   computed: {
-    allChecked: function() {
-      for (
-        let index = 0, size = this.inventoryDtos.length; index < size; index++
-      ) {
-        if (this.consolidatedInventorySheetIds.indexOf(this.inventoryDtos[index].id) < 0) {
-          return false;
-        }
-      }
-      return true;
-    },
   },
 
   watch: {
@@ -180,21 +103,28 @@ export default {
     $route: 'init',
   },
 
-  mounted: function() {
+  mounted: function () {
     this.init();
-    console.log('11111');
     console.log(this.currentStep);
   },
 
   methods: {
-    previous: function() {
+    getPageParams(current, pageSize) {
+      this.pagination.current_page = current;
+      this.pagination.per_page = pageSize;
+      this.getDatas();
+    },
+    getSelectParams(selected) {
+      this.consolidatedInventorySheetIds = selected.selectedRowKeys;
+    },
+    previous: function () {
       var data = {
         currentStep: 1,
         showPage: 1,
       };
       this.$emit('previous', data);
     },
-    next: function() {
+    next: function () {
       var _self = this;
       if (_self.consolidatedInventorySheetIds == undefined || _self.consolidatedInventorySheetIds == null || _self.consolidatedInventorySheetIds.length < 1) {
         Notify.error('错误', '未选择被合并盘点单', 1000);
@@ -208,47 +138,18 @@ export default {
       };
       _self.$emit('next', data);
     },
-    /**
-			 * 全选和反选
-			 */
-    selectAll: function() {
-      let _self = this;
-      if (_self.checked == false) {
-        _self.checked = true;
-        _self.inventoryDtos.forEach(function(item) {
-          _self.consolidatedInventorySheetIds.push(item.id);
-        });
-      } else {
-        _self.inventoryDtos.forEach(function(item) {
-          _self.checked = false;
-          let index = _self.consolidatedInventorySheetIds.indexOf(item.id);
-          _self.consolidatedInventorySheetIds.splice(index, 1);
-        });
-      }
-    },
-
-    /**
-			 * 重置分页，然后查询
-			 */
-    resetQuery: function() {
-      var _self = this;
-      _self.pagination.current_page = 1;
-      _self.getDatas();
-    },
 
     /**
-			 * 表格显示行数发生改变
-			 */
-    pageSizeChanged: function(newPageSize) {
-      this.pagination.per_page = newPageSize;
-      this.pagination.current_page = 1;
-      this.getDatas();
+       * 重置分页，然后查询
+       */
+    resetQuery: function () {
+      this.$refs.table2.backFirstPage();
     },
 
     /**
-			 * 查询数据
-			 */
-    getDatas: function() {
+       * 查询数据
+       */
+    getDatas: function () {
       var _self = this;
       _self.loading = true;
       var param = {
@@ -271,17 +172,13 @@ export default {
           _self.loading = false;
           if (
             successData.dataList == undefined ||
-							successData.dataList.length == 0
+            successData.dataList.length == 0
           ) {
             return;
           }
           _self.pagination.last_page = Math.ceil(
             successData.totalSize / successData.range.length,
           );
-          _self.pagination1.last_page = Math.ceil(
-            successData.totalSize / successData.range.length,
-          );
-          _self.fixedTableHeader();
         },
         errorData => {
           _self.loading = false;
@@ -290,26 +187,11 @@ export default {
       );
     },
 
-    /**
-	  * 冻结表头
-	  */
-    fixedTableHeader: function() {
-      let _self = this;
-      _self.$nextTick(function() {
-        $('.fixed-table').tableFixer({
-          head: true,
-        });
-      });
-    },
 
-    init: function() {
+
+    init: function () {
       var _self = this;
       _self.getDatas();
-      this.fixedTableHeader();
-      // 可调整表格列宽
-      _self.$nextTick(function() {
-        $('.fixed-table').resizableColumns();
-      });
     },
   },
 };
@@ -317,59 +199,8 @@ export default {
 
 
 <style scoped>
-	.grid-container {
-		margin-top: 10px;
-		display: grid;
-		grid-template-columns: 300px auto;
-		grid-template-rows: 35px 1fr 40px 40px;
-		gap: 10px;
-		justify-items: stretch;
-		align-items: stretch;
-		height: calc(100vh - 170px);
-		overflow: auto;
-	}
-
-	.grid-item-1 {
-		grid-row-start: 1;
-		grid-row-end: 3;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.grid-item-2 {
-		grid-row-start: 2;
-		grid-row-end: 3;
-		grid-column-start: 1;
-		grid-column-end: 3;
-		overflow: auto;
-	}
-
-	.grid-item-3 {
-		grid-row-start: 3;
-		grid-row-end: 4;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.grid-item-4 {
-		grid-row-start: 4;
-		grid-row-end: 5;
-		grid-column-start: 1;
-		grid-column-end: 3;
-	}
-
-	.fixed-table {
-		table-layout: fixed;
-	}
-
-	table.fixed-table tr {
-		height: 40px;
-	}
-
-	table.fixed-table th,
-	table.fixed-table td {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/components/customer/InventoryDataProcessingStep8.vue

@@ -100,7 +100,7 @@ export default {
 			 * 打开资产盘点单的CURD窗口
 			 */
     openCurdWindow: function(data) {
-      let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + data +
+      let url = Common.getRedirectUrl('#/desktop/window1/window-read/view/041101/0/' + data +
 					'?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
       window.open(url);
     },

src/components/customer/ManuallyConfirmCountingDataStep1.vue

@@ -158,7 +158,7 @@ const columns = reactive(
       fixed: 'right',
       width: 180,
     },
-  ].map(item => ({ ...item, align: 'center' })),
+  ].map(item => ({ ...item, align: 'center', resizable: true, ellipsis: true })),
 );
 const dataSource = ref([]);
 const total = ref(0); // 数据总数
@@ -236,6 +236,7 @@ onMounted(() => {
 
 // 资产盘点单查询，用于界面设置盘点单状态
 const queryAssetDiscovery = () => {
+  loading.value = true;
   SqlApi.execute('20230517_175800', searchParams).then(
     successData => {
       // console.log(successData);
@@ -243,8 +244,10 @@ const queryAssetDiscovery = () => {
         dataSource.value = successData.items;
         total.value = successData.total;
       }
+      loading.value = false;
     },
     errorData => {
+      loading.value = false;
       Common.processException(errorData);
     },
   );
@@ -255,7 +258,7 @@ const queryAssetDiscovery = () => {
  */
 const openCurdWindow = () => {
   let url = Common.getRedirectUrl(
-    '#/desktop/window/window-read/view/041101/0/' +
+    '#/desktop/window1/window-read/view/041101/0/' +
       inventoryId.value +
       '?currPage=1&currIndex=1&totalCount=1&uuid=' +
       Uuid.createUUID(),
@@ -280,7 +283,7 @@ input {
 }
 .previousBtn {
   position: fixed;
-  top: 93%;
+  top: 94%;
 }
 .grid-item-row2-column2 {
   overflow: hidden !important;

src/components/customer/PerformInventoryTasks.vue

@@ -1,68 +1,58 @@
 <template>
+  <a-form :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-row :gutter="[8, 14]" justify="space-start">
+      <a-col class="form-item-col">
+        <a-form-item label="盘点单名称" class="horizontal-form-item">
+          <strong>{{ assetInventoryName }}</strong>
+        </a-form-item>
+      </a-col>
+      <a-col class="form-item-col">
+        <a-form-item label="盘点单编号" class="horizontal-form-item">
+          <strong>{{ assetInventoryNo }}</strong>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <a-form :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-row :gutter="[8, 14]" justify="space-start">
+      <a-col class="form-item-col">
+        <a-form-item label="资产名称" class="horizontal-form-item">
+          <a-input
+            v-model:value="assetName"
+            placeholder="资产名称"
+            @keyup.enter="goFirstPage"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col class="form-item-col">
+        <a-form-item label="资产编号" class="horizontal-form-item">
+          <a-input
+            v-model:value="assetNo"
+            placeholder="资产名称"
+            @keyup.enter="goFirstPage"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col class="form-item-col">
+        <a-form-item label="卡片编号" class="horizontal-form-item">
+          <a-input
+            v-model:value="cardNo"
+            placeholder="卡片编号"
+            @keyup.enter="goFirstPage"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col class="form-item-col">
+        <a-form-item class="horizontal-form-item">
+          <a-space>
+            <a-button type="primary" @click="goFirstPage"> 查询 </a-button>
+            <a-button @click="clearFilter">清空</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
   <div>
-    <div class="grid-item-row1">
-      <div class="btn-group m-panel" role="group">
-        <div class="form-inline">
-          <div class="form-group">
-            <label for="assetName">盘点单名称：</label>
-            <label for="assetName"> {{ assetInventoryName }}</label>
-          </div>
-          <div class="form-group">
-            <label class="common" for="assetName">盘点单编号：</label>
-            <label for="assetName"> {{ assetInventoryNo }}</label>
-          </div>
-        </div>
-        <div class="form-inline">
-          <div class="form-group">
-            <label for="assetName">资产名称</label>
-            <input
-              id="assetName"
-              v-model="assetName"
-              autocomplete="off"
-              type="text"
-              class="common form-control"
-              placeholder="资产名称"
-              @keyup.enter="searchDatas"
-            />
-          </div>
-          <div class="form-group">
-            <label class="common" for="assetNo">资产编号</label>
-            <input
-              id="assetNo"
-              v-model="assetNo"
-              autocomplete="off"
-              type="text"
-              class="common form-control"
-              placeholder="资产编号"
-              @keyup.enter="searchDatas"
-            />
-          </div>
-          <div class="form-group">
-            <label class="common" for="cardNo">卡片编号</label>
-            <input
-              id="cardNo"
-              v-model="cardNo"
-              autocomplete="off"
-              type="text"
-              class="common form-control"
-              placeholder="卡片编号"
-              @keyup.enter="searchDatas"
-            />
-          </div>
-          <a-button
-            type="primary"
-            class="common"
-            @click="searchDatas"
-          >
-            查询
-          </a-button>
-          <a-button type="primary" danger class="common" @click="clearFilter">
-            清空
-          </a-button>
-        </div>
-      </div>
-    </div>
-
     <CommonTable
       ref="table"
       :columns="columns"
@@ -72,75 +62,46 @@
     >
       <template #bodyCell="{ column, record, index }">
         <template v-if="column.key == 'useStatusId'">
-          <select
-            v-model="record.useStatusId"
-            class="form-control"
+          <a-select
+            v-model:value="record.useStatusId"
             placeholder="盘点使用状态"
+            style="width: 100%;text-align: left"
           >
-            <option />
-            <option
+            <a-select-option value="" />
+            <a-select-option
               v-for="useStatus in useStatusList"
               :key="useStatus.id"
               :value="useStatus.id"
             >
               {{ useStatus.text }}
-            </option>
-          </select>
+            </a-select-option>
+          </a-select>
         </template>
         <template v-if="column.key == 'description'">
-          <input
-            id="cardNo"
-            v-model="record.description"
-            autocomplete="off"
-            type="text"
-            class="form-control"
-            placeholder="备注"
-          />
+          <a-input v-model:value="record.description" placeholder="备注" />
         </template>
         <template v-if="column.key == 'affirm'">
-          <a-button
-            class="btn btn-default"
-            @click="updateAssetInventoryLine(record, index)"
-          >
+          <a-button @click="updateAssetInventoryLine(record, index)">
             人工确认
           </a-button>
         </template>
         <template v-if="column.key == 'info'">
-          <button class="btn btn-link" @click="openCurdWindow(record)">
+          <a-button type="link" @click="openCurdWindow(record)">
             查看
-          </button>
+          </a-button>
         </template>
       </template>
     </CommonTable>
     <div>
-      <a-button v-if="currentStep == 1" type="primary" class="previousBtn" @click="previous">
+      <a-button
+        v-if="currentStep == 1"
+        type="primary"
+        class="previousBtn"
+        @click="previous"
+      >
         上一步
       </a-button>
     </div>
-    <!-- <div class="grid-item-row3">
-        <div>
-          <div class="pull-left">
-            <span>
-              {{ $t("lang.AssetInventorySearch.the") }}
-              {{ (pagination.current_page - 1) * pagination.per_page + 1 }}
-              -
-              {{ pagination.current_page * pagination.per_page }}
-              {{ $t("lang.AssetInventorySearch.strip") }},
-              {{ $t("lang.AssetInventorySearch.inTotal") }}
-              {{ pagination.total }}{{ $t("lang.AssetInventorySearch.strip") }},
-              {{ $t("lang.AssetInventorySearch.eachPage") }}
-            </span>
-            <PageSizeSelect @page-size-changed="pageSizeChanged" />
-            <span>{{ $t("lang.AssetInventorySearch.strip") }}</span>
-          </div>
-          <div class="pull-right">
-            <VueBootstrapPagination
-              :pagination="pagination"
-              :callback="pageStartChanged"
-            />
-          </div>
-        </div>
-      </div> -->
 
     <Loading v-if="loading" />
   </div>
@@ -210,7 +171,7 @@ export default {
           title: '确认',
           key: 'affirm',
           dataIndex: 'affirm',
-          width: 100,
+          width: 120,
         },
         {
           title: '账面位置',
@@ -285,7 +246,12 @@ export default {
           width: 100,
           fixed: 'right',
         },
-      ].map(item => ({ ...item, align: 'center' })),
+      ].map(item => ({
+        ...item,
+        align: 'center',
+        resizable: true,
+        ellipsis: true,
+      })),
       dataSource: [],
       assetInventoryId: null, // 资产盘点单Id
       assetInventory: {}, // 资产盘点
@@ -313,19 +279,9 @@ export default {
   mounted: function () {
     var _self = this;
 
-    // 根据UUID获取盘点单的id
-    // var uuid = _self.$route.params;
     _self.assetInventoryId = this.$props.id;
     _self.getAssetInventory();
 
-    // 固定行
-    // _self.fixedTableHeader();
-
-    // 可调整表格列宽
-    // _self.$nextTick(function () {
-    //   $('.fixed-table').resizableColumns();
-    // });
-
     _self.getUseStatusList();
   },
   methods: {
@@ -334,6 +290,10 @@ export default {
       _self.getAssetInventoryLine();
     },
 
+    goFirstPage: function () {
+      this.$refs.table.backFirstPage();
+    },
+
     // 从子组件获取的分页参数
     getPageParams: function (start, length) {
       this.pagination.current_page = start;
@@ -374,14 +334,6 @@ export default {
      */
     getAssetInventoryLine: function () {
       var _self = this;
-      // _self.pagination.current_page = 1;
-
-      // if (!isPageChange) {
-      //   _self.pagination.current_page = 1;
-      // }
-
-      // _self.clearPageData();
-
       _self.loading = true;
 
       var parameter = {
@@ -509,16 +461,10 @@ export default {
       let url = window.location.href.slice(0, index);
       let path =
         url +
-        '#/desktop/window/window-read/view/040701/0/' +
+        '#/desktop/window1/window-read/view/040701/0/' +
         assetInventoryLine.assetInstanceId +
         '?currPage=1&currIndex=1&totalCount=1&uuid=' +
         Uuid.createUUID();
-      // let url = Common.getRedirectUrl(
-      //   '#/desktop/window/window-read/view/040701/0/' +
-      //     assetInventoryLine.assetInstanceId +
-      //     '?currPage=1&currIndex=1&totalCount=1&uuid=' +
-      //     Uuid.createUUID(),
-      // );
 
       window.open(path);
     },
@@ -544,7 +490,7 @@ export default {
     // 回到上一步
     previous: function () {
       var _self = this;
-      _self.$emit('changeStep', {step:0});
+      _self.$emit('changeStep', { step: 0 });
     },
     /**
      * 更新资产盘点明细中的备注和使用状态。
@@ -560,6 +506,7 @@ export default {
         Notify.error('错误', '请填写"盘点使用状态"和"备注"信息\'。');
         return;
       }
+      _self.loading = true;
       AssetInventoryLineResource.checkLossConfirm(
         assetInventoryLine.assetInventoryLineId,
         assetInventoryLine.description,
@@ -581,9 +528,11 @@ export default {
           } else {
             Notify.error('错误', '该盘点明细已经被删除，请确认');
           }
+          _self.loading = false;
         },
         errorData => {
           Common.processException(errorData);
+          _self.loading = false;
         },
       );
     },
@@ -640,27 +589,41 @@ export default {
   margin-bottom: 0px;
 }
 
-.fixed-table {
-  table-layout: fixed;
-  width: 800px !important;
-  min-width: 800px !important;
+.previousBtn {
+  position: fixed;
+  top: 94%;
+}
+
+.form-item-col {
+  display: flex;
+  align-items: center;
+}
+
+.horizontal-form-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-table.fixed-table tr {
-  height: 40px;
+:deep(.ant-form-item) {
+  margin-bottom: 0px !important;
 }
 
-table.fixed-table th,
-table.fixed-table td {
-  overflow: hidden;
+/* 调整标签样式 */
+:deep(.ant-form-item-label) {
+  flex: 0 0 auto;
   white-space: nowrap;
-  text-overflow: ellipsis;
+  overflow: visible;
+  text-overflow: unset;
 }
-:deep(.ant-table-pagination.ant-pagination) {
-  margin: 4px 0;
+
+/* 确保控件容器填充剩余空间 */
+:deep(.ant-form-item-control) {
+  flex: 1;
+  min-width: 0;
 }
-.previousBtn {
-  position: fixed;
-  top: 90%;
+:deep(.ant-form-item-label > label) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
 }
 </style>

src/components/customer/RunDataArchive.vue

@@ -1,29 +1,18 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <Navbar
-          title="盘点数据归档"
-          :is-go-back="false"
-        />
-      </div>
-      <div id="step-container" style="margin-top: 20px">
-        <section>
-          <a-steps :current="pageInformation.currentStep">
-            <a-step title="选择归档操作" />
-            <a-step title="数据归档" />
-          </a-steps>
-        </section>
-      </div>
-      <a-divider />
+  <div>
+    <Navbar title="盘点数据归档" :is-go-back="false" />
+    <div style="margin-top: 20px">
       <section>
-        <RunDataArchiveStep
-          v-if="pageInformation.showPage == 0"
-          :current-step="pageInformation"
-          @next="nextStep"
-        />
+        <a-steps :current="pageInformation.currentStep">
+          <a-step title="选择归档操作" />
+          <a-step title="数据归档" />
+        </a-steps>
       </section>
     </div>
+    <a-divider style="margin:20px 0  6px 0 !important;" />
+    <section>
+      <RunDataArchiveStep v-if="pageInformation.showPage == 0" :current-step="pageInformation" @next="nextStep" />
+    </section>
   </div>
 </template>
 
@@ -54,9 +43,9 @@ export default {
       var _self = this;
       _self.pageInformation = data;
     },
-   
 
-    mounted: function () {},
+
+    mounted: function () { },
   },
 };
 </script>

src/components/customer/RunDataArchiveStep.vue

@@ -1,16 +1,14 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <a-radio-group v-model:value="value">
-          <a-radio :style="radioStyle" :value="1">执行数据归档</a-radio>
-          <a-radio :style="radioStyle" :value="2">查看历史归档数据</a-radio>
-        </a-radio-group>
-      </div>
-      <a-divider />
-      <a-button type="primary" @click="previousStep">上一步</a-button>
-      <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
+  <div>
+    <div>
+      <a-radio-group v-model:value="value">
+        <a-radio :style="radioStyle" :value="1">执行数据归档</a-radio>
+        <a-radio :style="radioStyle" :value="2">查看历史归档数据</a-radio>
+      </a-radio-group>
     </div>
+    <a-divider style="margin:14px 0 20px 0 !important;" />
+    <a-button type="primary" @click="previousStep">上一步</a-button>
+    <a-button style="float: right;" type="primary" @click="next">下一步</a-button>
   </div>
 </template>
 
@@ -20,19 +18,19 @@ import { Notify } from 'pc-component-v3';
 export default {
 
   components: {
-    
-    
+
+
   },
   props: {
     currentStep: {
       type: Object,
-      default(){
+      default() {
         return {};
       },
     },
   },
   emits: ['next'],
-  data: function() {
+  data: function () {
     return {
       value: undefined,
       radioStyle: {
@@ -47,10 +45,10 @@ export default {
   },
 
   methods: {
-    next: function() {
+    next: function () {
       var _self = this;
-      if(_self.value == undefined || _self.value == null){
-        Notify.error('错误','未选择数据归档操作',1000);
+      if (_self.value == undefined || _self.value == null) {
+        Notify.error('错误', '未选择数据归档操作', 1000);
         return;
       }
       // var data = {
@@ -58,59 +56,59 @@ export default {
       //   showPage: _self.value,
       //   assetInventoryStep3: undefined,
       // };
-      if(_self.value == 1){
-        this.$router.push({path:'/desktop/dataArchive',query:{businessName:'资产盘点'}});
+      if (_self.value == 1) {
+        this.$router.push({ path: '/desktop/dataArchive', query: { businessName: '资产盘点' } });
       } else {
-        this.$router.push({path:'/desktop/info/20231117_152804'});
+        this.$router.push({ path: '/desktop/info/20231117_152804' });
       }
     },
-    previousStep: function() {
+    previousStep: function () {
       var _self = this;
       _self.$router.push('/eam/assetInventory');
     },
 
-    mounted: function() {
+    mounted: function () {
 
     },
   },
 };
 </script>
 <style scoped>
-  .grid-container {
-    display: grid;
-    grid-template-rows: 8% 8% 84%;
-    grid-template-columns: 100%;
-    width: 100%;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 130px);
-    margin-top: 10px;
-  }
+.grid-container {
+  display: grid;
+  grid-template-rows: 8% 8% 84%;
+  grid-template-columns: 100%;
+  width: 100%;
+  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
+  height: calc(100vh - 130px);
+  margin-top: 10px;
+}
 
-  .grid-item-1 {
-    grid-row: 1/2;
-  }
+.grid-item-1 {
+  grid-row: 1/2;
+}
 
-  .grid-item-2 {
-    grid-row: 2/3;
-  }
+.grid-item-2 {
+  grid-row: 2/3;
+}
 
-  .grid-item-3 {
-    grid-row: 3/4;
-  }
+.grid-item-3 {
+  grid-row: 3/4;
+}
 
-  .box {
-    border: 1px #ccc solid;
-    margin-bottom: 15px;
-    padding-top: 10px;
-    border-radius: 5px;
-    background-color: #ffffff;
-  }
+.box {
+  border: 1px #ccc solid;
+  margin-bottom: 15px;
+  padding-top: 10px;
+  border-radius: 5px;
+  background-color: #ffffff;
+}
 
-  .label {
-    float: left;
-  }
+.label {
+  float: left;
+}
 
-  .div-form {
-    margin-bottom: 10px;
-  }
+.div-form {
+  margin-bottom: 10px;
+}
 </style>

src/components/inventory1/InventoryPage1.vue

@@ -115,7 +115,7 @@ const columns = [
     key: 'checkLossQuantity',
     width: 200,
   },
-].map(item => ({ ...item, align: 'center' }));
+].map(item => ({ ...item, align: 'center', resizable: true, ellipsis: true }));
 
 </script>
 

src/components/sonicAlbumUpload/index.vue

@@ -4,25 +4,25 @@
     <div class="step">
       <label>1. 选择公司</label>
       <a-select v-model:value="company" style="width: 200px; margin: 0 12px" :options="companies" />
-      <a-button :disabled="company==''?true:false" @click="downloadBtn">下载导入模板</a-button>
+      <a-button :disabled="company == '' ? true : false" @click="downloadBtn">下载导入模板</a-button>
     </div>
     <div class="step">
       <label style="margin-bottom: 12px">2. 上传资产图片文件夹</label>
       <div>
-        <ImagesUpload v-show="company==''?false:true" />
+        <ImagesUpload v-show="company == '' ? false : true" />
         <p class="pStyle">支持拓展名：.png .jpg .jpeg .gif 注意：文件小于1GB</p>
-        <p class="pStyle">
-          <a :style="company==''?style3:style4" @click="viewImage">查看上传的图片</a>
+        <p class="pStyle" style="cursor: pointer;">
+          <a :style="company == '' ? style3 : style4" @click="viewImage">查看上传的图片</a>
         </p>
       </div>
       <div class="step">
         <label style="margin-bottom: 12px">3. 上传资产图片名称Excel</label>
         <div style="display: flex">
           <a-upload
-            v-model:file-list="excelFiles" :max-count="1" :before-upload="beforeUpload" :show-upload-list="{ showRemoveIcon: false }"
-            @change="excelFileChange"
+            v-model:file-list="excelFiles" :max-count="1" :before-upload="beforeUpload"
+            :show-upload-list="{ showRemoveIcon: false }" @change="excelFileChange"
           >
-            <a-button :disabled="company==''?true:false">
+            <a-button :disabled="company == '' ? true : false">
               <upload-outlined />
               上传资产图片Excel
             </a-button>
@@ -38,14 +38,14 @@
           </a-button>
         </div>
         <p class="pStyle">支持拓展名：.xlsx</p>
-        <div v-show="company==''?false:true">
+        <div v-show="company == '' ? false : true">
           <CommonTable
-            ref="table" :total="totalResult" :is-select="false" :columns="resultImageColumns" :is-loading="isLoading"
-            :data-source="resultImageDatas"
+            ref="table" :total="totalResult" :is-select="false" :columns="resultImageColumns"
+            :is-loading="isLoading" :data-source="resultImageDatas"
           >
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'result'">
-                <div :style="record.result === '校验成功'|| record.result === '导入成功' ?style1:style2">
+                <div :style="record.result === '校验成功' || record.result === '导入成功' ? style1 : style2">
                   {{ record.result }}
                 </div>
               </template>
@@ -62,8 +62,8 @@
             <label>资产编号</label>
           </span>
           <a-input
-            v-model:value="assetNo" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产编号"
-            @press-enter="searchDatas"
+            v-model:value="assetNo" :disabled="company == '' ? true : false" style="width: 70%; height: 30px"
+            placeholder="请输入资产编号" @press-enter="searchDatas"
           />
         </li>
         <li class="site">
@@ -71,8 +71,8 @@
             <label>资产名称</label>
           </span>
           <a-input
-            v-model:value="assetName" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产名称"
-            @press-enter="searchDatas"
+            v-model:value="assetName" :disabled="company == '' ? true : false" style="width: 70%; height: 30px"
+            placeholder="请输入资产名称" @press-enter="searchDatas"
           />
         </li>
         <li class="site">
@@ -80,12 +80,17 @@
             <label>图片状态</label>
           </span>
           <a-select
-            v-model:value="imageStatus" :disabled="company==''?true:false" style="width: 70%" placeholder="请选择图片状态"
-            :options="imageAllStatus" @change="searchDatas"
+            v-model:value="imageStatus" :disabled="company == '' ? true : false" style="width: 70%"
+            placeholder="请选择图片状态" :options="imageAllStatus" @change="searchDatas"
           />
         </li>
         <li class="site">
-          <a-button :disabled="company==''?true:false" style="margin-left: -200px;" type="primary" @click="searchDatas">查询</a-button>
+          <a-button
+            :disabled="company == '' ? true : false" style="margin-left: -200px;" type="primary"
+            @click="searchDatas"
+          >
+            查询
+          </a-button>
         </li>
       </ul>
       <CommonTable
@@ -94,19 +99,19 @@
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'mainImageName'">
-            <a-image
-              v-if="record.mainImageName !== ''&&record.mainImageName !== null" :width="50" :preview="false" 
-              :src="getThumbnailImageSrc(record.className, record.mainImageName)"
-              @click="handlePreview(record.className, record.mainImageName)"
+            <AntdAuthImage
+              v-if="record.mainImageName !== '' && record.mainImageName !== null"
+              :auth-src="getThumbnailImageSrc(record.mainImageName, record.className)" :width="60"
+              :preview-src="getImageSrc(record.mainImageName, record.className)"
             />
           </template>
           <template v-if="column.key === 'otherImageName'">
-            <template v-if="record.otherImageName !== ''&&record.otherImageName !== null">
+            <template v-if="record.otherImageName !== '' && record.otherImageName !== null">
               <div style="display: flex">
-                <a-image
-                  v-for="item in record.otherImageNameArr" :key="item" :preview="false" :width="50" 
-                  :src="getThumbnailImageSrc(record.className, item)"
-                  @click="handlePreview(record.className, item)"
+                <AntdAuthImage
+                  v-if="record.mainImageName !== '' && record.mainImageName !== null"
+                  :auth-src="getThumbnailImageSrc(record.mainImageName, record.className)" :width="60"
+                  :preview-src="getImageSrc(record.mainImageName, record.className)"
                 />
               </div>
             </template>
@@ -141,12 +146,15 @@
       />
     </div>
     <CommonTable
-      ref="table" :total="total" :is-select="true" :columns="viewColumns" :is-loading="isLoading" :data-source="viewDatas"
-      @select-column="selectColumn"
+      ref="table" :total="total" :is-select="true" :columns="viewColumns" :is-loading="isLoading"
+      :data-source="viewDatas" @select-column="selectColumn"
     >
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'imageName'">
-          <a-image v-if="record.imageName !== ''" :width="50" :src="getImageSrc(record.className, record.imageName)" />
+          <AntdAuthImage
+            v-if="record.imageName !== ''" :auth-src="getImageSrc(record.imageName, record.className)"
+            :width="60"
+          />
         </template>
         <template v-if="column.key === 'name'">
           <span>{{ record.imageName }}</span>
@@ -158,7 +166,7 @@
     </template>
   </a-modal>
   <a-modal v-model:open="showLargeImage">
-    <a-image :preview="false" :src="getImageSrc(className, imageName)" />
+    <a-image :preview="false" :src="getImageSrc(imageName, className)" />
     <template #footer>
       <a-button @click="showLargeImage = false">取消</a-button>
     </template>
@@ -176,6 +184,7 @@ import {
 } from 'ant-design-vue';
 import ImagesUpload from './ImagesUpload.vue';
 import CommonTable from './CommonTable.vue';
+import AntdAuthImage from '../../widget/AntdAuthImage.vue';
 import {
   UploadOutlined,
 } from '@ant-design/icons-vue';
@@ -199,10 +208,6 @@ import {
   testImportExcel,
   listClientCanAccess,
 } from './configData.js';
-import {
-  getImageSrc,
-  getThumbnailImageSrc,
-} from '../../common/image-src.js';
 
 const total = ref(0);
 const totalResult = ref(0);
@@ -271,7 +276,7 @@ const downloadBtn = () => {
   downloadVisible.value = true;
 };
 
-const handlePreview = (className1,image) => {
+const handlePreview = (className1, image) => {
   className.value = className1;
   imageName.value = image;
   showLargeImage.value = true;
@@ -298,6 +303,21 @@ const viewImage = () => {
   }
 };
 
+const getImageSrc = (item, className) => {
+  if (item != undefined && item != null) {
+    return Common.getImageSrc(className, item);
+  } else {
+    return '';
+  }
+};
+const getThumbnailImageSrc = (item, className) => {
+  if (item != undefined && item != null) {
+    return Common.getThumbnailImageSrc(className, item);
+  } else {
+    return '';
+  }
+};
+
 // 查询上传图片接口
 const queryUploadImage = () => {
   loading.value = true;
@@ -413,7 +433,7 @@ const importImageExcel = () => {
         showFormal.value = false;
       } else {
         var strarr = successData.errorMessage.replace(/\n+$/, '').split('\n');
-        strarr.forEach(function(item) {
+        strarr.forEach(function (item) {
           message.warning(item);
         });
       }
@@ -536,81 +556,81 @@ const getClient = () => {
 </script>
 
 <style scoped>
-	.step {
-		margin-bottom: 12px;
-	}
-
-	.step>label {
-		font-size: 16px;
-	}
-
-	.pStyle {
-		margin: 6px 0;
-		color: rgba(0, 0, 0, 0.65);
-	}
-
-	.table {
-		margin-top: 2px !important;
-	}
-
-	.siteList {
-		margin-bottom: 0 !important;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-
-	.siteList .site {
-		width: 300px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		position: relative;
-	}
-
-	.siteList>li {
-		margin-bottom: 8px;
-		margin-left: 0px;
-	}
-
-	@media (min-width: 500px) {
-		.siteList {
-			margin-left: 0;
-			margin-right: -20px;
-			justify-content: flex-start;
-		}
-
-		/* 
+.step {
+  margin-bottom: 12px;
+}
+
+.step>label {
+  font-size: 16px;
+}
+
+.pStyle {
+  margin: 6px 0;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.table {
+  margin-top: 2px !important;
+}
+
+.siteList {
+  margin-bottom: 0 !important;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.siteList .site {
+  width: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.siteList>li {
+  margin-bottom: 8px;
+  margin-left: 0px;
+}
+
+@media (min-width: 500px) {
+  .siteList {
+    margin-left: 0;
+    margin-right: -20px;
+    justify-content: flex-start;
+  }
+
+  /* 
 		.siteList>li {
 			margin-right: 8px;
 		} */
-	}
-
-	.labels {
-		width: 80px;
-		text-align: center;
-	}
-
-	.labels>label {
-		font-weight: 400 !important;
-	}
-
-	.operation {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.tablePaganations {
-		margin-top: 6px;
-	}
-
-	:deep(.ant-image-img) {
-		width: 50px !important;
-		height: 50px !important;
-	}
-
-	.ant-image {
-		margin-right: 6px !important;
-	}
+}
+
+.labels {
+  width: 80px;
+  text-align: center;
+}
+
+.labels>label {
+  font-weight: 400 !important;
+}
+
+.operation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tablePaganations {
+  margin-top: 6px;
+}
+
+:deep(.ant-image-img) {
+  width: 50px !important;
+  height: 50px !important;
+}
+
+.ant-image {
+  margin-right: 6px !important;
+}
 </style>

src/customer/InventoryAssetInstanceSearch.vue

@@ -1,104 +1,111 @@
 <template>
-  <div class="container-fluid">
-    <div>
-      <div class="row">
-        <div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
-          <div class="input-group">
-            <input
-              v-model="condition"
-              autocomplete="off"
-              type="text"
-              class="form-control"
-              :placeholder="$t('lang.InventoryAssetInstanceSearch.condition')"
-              @keyup.enter="inputSearch"
-            />
-            <span class="input-group-btn">
-              <button
-                class="btn btn-primary"
-                type="button"
-                @click="inputSearch"
-              >{{ $t('lang.InventoryAssetInstanceSearch.search') }}</button>
-            </span>
-          </div>
-
-
-          <p v-show="showPager">{{ $t('lang.InventoryAssetInstanceSearch.describe1') }}{{ assetInstancesTotalSize }}{{ $t('lang.InventoryAssetInstanceSearch.individual') }}</p>
-
-          <div
-            v-for="item in results"
-            :key="item.id"
-            style="margin-top: 15px;"
-          >
-            <div
-              v-if="item.resultType == 'asseetResult'"
-              class="media"
-            >
-              <div class="media-left">
-                <a href="javascript:void(0);">
-                  <AuthImage
-                    :auth-src="Common.getThumbnailImageSrc(assetClassName, item.resultValue.imageName)"
-                    class="img-thumbnail media-object"
-                    style="width: 64px; height: 64px;"
-                    @click="$refs.imagePreview.preview(assetClassName, item.resultValue.imageName)"
-                  />
-
-                </a>
-              </div>
-              <div class="media-body">
-                <h4
-                  class="media-heading"
-                  @click="openAssetInstanceDetail(item.resultValue)"
-                >
-                  {{ item.resultValue.name }},
-                  {{ item.resultValue.assetNo }}
-                  {{ item.resultValue.no }},
-                </h4>
-
-                {{ $t('lang.InventoryAssetInstanceSearch.assetName') }}:{{ item.resultValue.name==""?"无":item.resultValue.name }};
-                {{ $t('lang.InventoryAssetInstanceSearch.assetNumber') }}:{{ item.resultValue.assetNo==""?"无":item.resultValue.assetNo }};
-
-                {{ $t('lang.InventoryAssetInstanceSearch.assetCategory') }}:{{ item.resultValue.categoryName==""?"无":item.resultValue.categoryName }};
-                {{ $t('lang.InventoryAssetInstanceSearch.storageLocation') }}:{{ item.resultValue.locationName==""?"无":item.resultValue.locationName }};
-
-                {{ $t('lang.InventoryAssetInstanceSearch.cost') }}:{{ item.resultValue.orginalValue==""?"无":item.resultValue.orginalValue }};
-                                
-                {{ $t('lang.InventoryAssetInstanceSearch.useStatus') }}:{{ item.resultValue.useStatusName==""?"无":item.resultValue.useStatusName }};
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="showPager"
-            style="margin-top: 15px;"
-          >
-            <VueBootstrapPagination
-              :pagination="pagination"
-              :callback="checkDataChangedQueryGridData"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
+  <a-row class="container">
+    <a-col :span="24">
+      <a-space direction="vertical" :size="20" style="width: 100%">
+        <a-input-group compact>
+          <a-input
+            v-model:value="condition"
+            style="width: calc(100% - 100px)"
+            :placeholder="$t('lang.InventoryAssetInstanceSearch.condition')"
+            @press-enter="inputSearch"
+          />
+          <a-button type="primary" @click="inputSearch">
+            {{ $t("lang.InventoryAssetInstanceSearch.search") }}
+          </a-button>
+        </a-input-group>
+
+        <a-typography-text v-if="showPager">
+          {{ $t("lang.InventoryAssetInstanceSearch.describe1") }}
+          {{ assetInstancesTotalSize }}
+          {{ $t("lang.InventoryAssetInstanceSearch.individual") }}
+        </a-typography-text>
+
+        <a-list item-layout="horizontal" :data-source="results">
+          <template #renderItem="{ item }">
+            <a-list-item v-if="item.resultType === 'asseetResult'">
+              <a-flex gap="middle" align="flex-start">
+                <AuthImage
+                  :auth-src="
+                    Common.getThumbnailImageSrc(
+                      assetClassName,
+                      item.resultValue.imageName
+                    )
+                  "
+                  class="img-thumbnail media-object"
+                  style="width: 64px; height: 64px"
+                  @click="$refs.imagePreview.preview( Common.getImageSrc(
+                    assetClassName,
+                    item.resultValue.imageName
+                  ))"
+                />
+                <a-flex vertical :style="{ flex: 1 }">
+                  <a-typography-link
+                    @click="openAssetInstanceDetail(item.resultValue)"
+                  >
+                    {{ item.resultValue.name }},
+                    {{ item.resultValue.assetNo }}
+                    {{ item.resultValue.no }}
+                  </a-typography-link>
+
+                  {{ $t("lang.InventoryAssetInstanceSearch.assetName") }}
+                  :{{ item.resultValue.name || "无" }}
+                  {{ $t("lang.InventoryAssetInstanceSearch.assetNumber") }}
+                  :{{
+                    item.resultValue.assetNo == ""
+                      ? "无"
+                      : item.resultValue.assetNo
+                  }};
+                  {{ $t("lang.InventoryAssetInstanceSearch.assetCategory") }}
+                  :{{
+                    item.resultValue.categoryName == ""
+                      ? "无"
+                      : item.resultValue.categoryName
+                  }};
+                  {{ $t("lang.InventoryAssetInstanceSearch.storageLocation") }}
+                  :{{
+                    item.resultValue.locationName == ""
+                      ? "无"
+                      : item.resultValue.locationName
+                  }};
+                  {{ $t("lang.InventoryAssetInstanceSearch.cost") }}
+                  :{{
+                    item.resultValue.orginalValue == ""
+                      ? "无"
+                      : item.resultValue.orginalValue
+                  }};
+                  {{ $t("lang.InventoryAssetInstanceSearch.useStatus") }}
+                  :{{
+                    item.resultValue.useStatusName == ""
+                      ? "无"
+                      : item.resultValue.useStatusName
+                  }};
+                </a-flex>
+              </a-flex>
+            </a-list-item>
+          </template>
+        </a-list>
+        <a-pagination
+          v-model:current="pagination.current_page"
+          v-model:pageSize="pagination.per_page"
+          :show-size-changer="false"
+          :total="pagination.total"
+          @change="checkDataChangedQueryGridData"
+        />
+      </a-space>
+    </a-col>
     <Loading v-if="loading" />
     <ImagePreview ref="imagePreview" />
-  </div>
+  </a-row>
 </template>
 
 <script>
 import Common from '../common/Common';
 import AssetInstanceResource from '../api/asset/AssetInstanceResource';
 
-
-
-
-
-
 import AuthImage from '../widget/AuthImage.vue';
 
-
 export default {
-
   components: {
-    
     AuthImage,
   },
   data: function () {
@@ -128,20 +135,16 @@ export default {
       endDate: '',
       firstSearch: true,
       loading: false,
+      viewImage: false,
+      viewImageName: '',
     };
   },
 
-  computed: {
+  computed: {},
 
-  },
-
-  watch: {
-   
-
-  },
+  watch: {},
 
   mounted: function () {
-    $('#right-container').css('background-color', '#ffffff');
     var _self = this;
     if (_self.firstSearch) {
       _self.condition = localStorage.getItem('##searchStr##');
@@ -150,23 +153,18 @@ export default {
     }
   },
 
-  beforeUnmount: function () {
-    $('#right-container').css('background-color', '#f7f7f7');
-  },
-
   methods: {
-
     /**
-         * 修改页Size
-         */
+     * 修改页Size
+     */
     gridSizeSelect: function (newPageSize) {
       this.pagination.per_page = newPageSize;
       this.pagination.current_page = 1;
       this.search();
     },
     /**
-         * 页数发生变化
-         */
+     * 页数发生变化
+     */
     checkDataChangedQueryGridData: function () {
       this.search();
     },
@@ -178,14 +176,15 @@ export default {
     },
 
     /**
-         * 搜索
-         */
+     * 搜索
+     */
     search: function () {
       var _self = this;
 
       var queryParam = {
         range: {
-          start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
+          start:
+            (_self.pagination.current_page - 1) * _self.pagination.per_page,
           length: _self.pagination.per_page,
         },
         condition: _self.condition,
@@ -196,22 +195,23 @@ export default {
       _self.results.splice(0, _self.results.length);
 
       _self.assetInstancesLoaded = false;
-      AssetInstanceResource.assetInstanceSearch(queryParam).then(data => {
-        _self.assetInstances = data.dataList;
-        _self.assetInstancesTotalSize = data.totalSize;
-        _self.assetInstancesLoaded = true;
-        _self.intersectResult();
-      }, errorData => {
-        _self.assetInstancesLoaded = true;
-        Common.processException(errorData);
-      });
-      
-
+      AssetInstanceResource.assetInstanceSearch(queryParam).then(
+        data => {
+          _self.assetInstances = data.dataList;
+          _self.assetInstancesTotalSize = data.totalSize;
+          _self.assetInstancesLoaded = true;
+          _self.intersectResult();
+        },
+        errorData => {
+          _self.assetInstancesLoaded = true;
+          Common.processException(errorData);
+        },
+      );
     },
 
     /**
-         * 将查询结果交叉放入
-         */
+     * 将查询结果交叉放入
+     */
     intersectResult: function () {
       var _self = this;
 
@@ -227,7 +227,9 @@ export default {
       }
 
       _self.pagination.total = totalSize;
-      _self.pagination.last_page = Math.ceil(totalSize / _self.pagination.per_page);
+      _self.pagination.last_page = Math.ceil(
+        totalSize / _self.pagination.per_page,
+      );
 
       let maxTotal = Math.max(_self.assetInstances.length, 0);
 
@@ -246,22 +248,27 @@ export default {
       }
     },
 
-
-
     /**
-         * 显示资产卡片详细信息
-         */
+     * 显示资产卡片详细信息
+     */
     openAssetInstanceDetail: function (assetInstance) {
       var _self = this;
-      window.open('#/eam/assetInstanceSearchDetail?assetInstanceId=' + assetInstance.id);
+      window.open(
+        '#/eam/assetInstanceSearchDetail?assetInstanceId=' + assetInstance.id,
+      );
     },
-
   },
 };
 </script>
 <style scoped>
-.media-left,
-.media-heading {
-    cursor: pointer;
+.container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.ant-typography-link {
+  cursor: pointer;
+  margin-bottom: 8px;
+  display: block;
 }
 </style>

src/locales/en-US.json

@@ -233,7 +233,9 @@
       "cancelEdit": "Cancel Edit",
       "exampleImportAssetCategoriesConfiguredByTheSystem":"Example Import asset categories configured by the system",
       "importCommonAssetsByCategory":"Import common assets by category",
-      "importDetailedAssetsByCategory":"Import detailed assets by category"
+      "importDetailedAssetsByCategory":"Import detailed assets by category",
+      "dataSource":"DataSource",
+      "timeSeriesDatabase":"Time Series Database"
     },
     "AssetDetailList": {
       "assetList": "Asset List",
@@ -260,6 +262,10 @@
       "selfNumbering": "Self No",
       "vehicleNo": "Vehicle No",
       "areThereAnyPictures": "Are There Any Pictures",
+      "scrapCondition": "Scrap Condition",
+      "all": "All",
+      "scraped": "Scraped",
+      "notScraped": "Not Scraped",
       "true": "True",
       "false": "False",
       "amountTo": "Amount To",
@@ -482,7 +488,10 @@
     "strip": "Strip", 
     "true": "True", 
     "false": "False",
-    "actionType": "Action Type"
+    "actionType": "Action Type",
+    "parentName": "Parent Name",
+    "uniqueNumber": "Unique Number",
+    "assetChildrenList": "Asset Children List"
     },
     "AssetInventorySearch": {
       "generateAssetCountDetails": "Generate Asset Count Details",
@@ -529,7 +538,8 @@
       "number": "Number",
       "totalprice": "Total Price",
       "assetclassification": "Asset Classification",
-      "generateassets": "Generate Assets"
+      "generateassets": "Generate Assets",
+      "isGenerate": "The Asset Purchase Order Details Has Generated Assets"
     },
     "CopyAsset": {
       "copyAssets": "Copy Assets",
@@ -1032,7 +1042,14 @@
       "strip": " Strip",
       "inTotal": "In Total ",
       "eachPage": "Each Page",
-      "serialNumber": "Serial Number"
+      "serialNumber": "Serial Number",
+      "lastStep": "Last Step",
+      "nextStep": "Next Step",
+      "mergeInventorySheet": "Merge Inventory Sheet",
+      "generateInventoryReport": "Generate Inventory Report",
+      "closeInventorySheet": "Close Inventory Sheet",
+      "selectInventoryDataProcessingType": "Select Inventory Data Processing Type",
+      "processInventoryData": "Process Inventory Data"
     },
     "AssetLabelPrint": {
       "assetLabelPrint": "Asset Label Print",

src/locales/zh-CN.json

@@ -257,7 +257,9 @@
       "pleaseEnterDeploymentAddress": "请输入部署地址",
       "exampleImportAssetCategoriesConfiguredByTheSystem":"导入系统设置的资产分类",
       "importCommonAssetsByCategory":"常用资产分类导入",
-      "importDetailedAssetsByCategory":"明细资产分类导入"
+      "importDetailedAssetsByCategory":"明细资产分类导入",
+      "dataSource":"数据源",
+      "timeSeriesDatabase":"时序数据库"
     },
     "assetBasicSetting1": {
       "baseInformation": "基本信息",
@@ -347,6 +349,10 @@
       "selfNumbering": "图号",
       "vehicleNo": "车牌号",
       "areThereAnyPictures": "是否有图片",
+      "scrapCondition": "报废状态",
+      "all": "全部",
+      "scraped": "已报废",
+      "notScraped": "未报废",
       "true": "是",
       "false": "否",
       "amountTo": "总计",
@@ -570,7 +576,10 @@
     "strip": "条", 
     "true": "是", 
     "false": "否",
-    "actionType": "动作类型"
+    "actionType": "动作类型",
+    "parentName": "父设备名称",
+    "uniqueNumber": "唯一识别号",
+    "assetChildrenList": "子资产清单"
     },
     "AssetInventorySearch": {
       "generateAssetCountDetails": "生成资产盘点明细",
@@ -619,7 +628,8 @@
       "number": "数量",
       "totalprice": "总价",
       "assetclassification": "资产分类",
-      "generateassets": "生成资产"
+      "generateassets": "生成资产",
+      "isGenerate": "已经生成了资产卡片"
     },
     "CopyAsset": {
       "copyAssets": "复制资产",
@@ -1163,7 +1173,13 @@
       "viewConsolidatedCountSheet": "查看被合并盘点单",
       "delete": "删除",
       "isNew": "是否新建合并盘点单",
-	  "mergeInventorySheet": "合并盘点单",
+      "mergeInventorySheet": "合并盘点单",
+      "generateInventoryReport": "生成盘点报表",
+      "closeInventorySheet": "关闭盘点单",
+      "lastStep": "上一步",
+      "nextStep": "下一步",
+      "selectInventoryDataProcessingType": "选择盘点数据处理类型",
+      "processInventoryData": "处理盘点数据"
     },
     "AssetInventory": {
       "assetInventory": "资产盘点",

src/router/index.js

@@ -46,6 +46,7 @@ const AssetManagerDepreciation = () => import('../components/assetManagerDepreci
 const AssetsDisposal = () => import('../components/assetsDisposal/AssetsDisposal.vue');
 const ExecuteAssetDisposal = () => import('../components/executeAssetDisposal/AssetsDisposal.vue');
 const AccountingSubject = ()=> import('../components/assetPeriodDepreciate/AccountingSubject.vue');
+const InventoryAssetInstanceSearch = () => import('../customer/InventoryAssetInstanceSearch.vue');
 
 const routes = [
 
@@ -327,6 +328,7 @@ const routes = [
   { path: '/eam/disposalApplication', component: AssetsDisposal }, // 处置申请单
   { path: '/eam/executeAssetDisposal', component: ExecuteAssetDisposal }, // 执行处置
   { path: '/eam/accountingSubject', component: AccountingSubject }, // 会计科目
+  { path: '/eam/inventoryAssetInstanceSearch', component: InventoryAssetInstanceSearch }, // 资产搜索
 ];
 
 

src/widget/AntdAuthImage.vue

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

src/widget/ImageWidget.vue

@@ -1,32 +1,29 @@
 <template>
   <div class="input-group">
     <div class="row">
-      <span class="col-md-12">
+      <span>
         <div v-if="hasImage" class="finish_room2">
           <div class="room_img">
-            <!-- <img :src="getImageSrc(imageSrc)" /> -->
-            <AuthImage
-              :auth-src="Common.getThumbnailImageSrc(className, imageName)"
-              class="image img-thumbnail"
-              style="width: 78px; height: 78px"
-            />
+            <AntdAuthImage :auth-src="Common.getThumbnailImageSrc(className, imageName)" :width="78" :height="78" />
           </div>
-          <button
+          <a-button
             v-if="!readonly"
-            class="btn btn-danger"
+            danger
             @click="emitFieldValue(null)"
           >
             删除
-          </button>
+          </a-button>
         </div>
         <div v-else>
-          <button
-            class="btn btn-primary"
-            :readonly="!readonly"
-            @click="showUploadImageModal"
+          <a-upload
+            :id="'file1' + uuid"
+            :show-upload-list="false"
+            :max-count="1"
+            :before-upload="beforeUpload"
+            @change="onFileChanges"
           >
-            添加图片
-          </button>
+            <a-button type="primary">添加图片</a-button>
+          </a-upload>
         </div>
       </span>
     </div>
@@ -68,7 +65,7 @@
 import Common from '../common/Common.js';
 
 import AuthImage from './AuthImage.vue';
-
+import AntdAuthImage from './AntdAuthImage.vue';
 import ImageService from './ImageService.js';
 import FileService from './FileService.js';
 
@@ -79,6 +76,7 @@ export default {
   components: {
     Cropper,
     AuthImage,
+    AntdAuthImage,
   },
 
   props: {
@@ -177,6 +175,20 @@ export default {
     getImageSrc: function (src) {
       return src;
     },
+    // 返回 false 会阻止默认上传行为
+    beforeUpload(file) {
+      return false;
+    },
+  
+
+    // 上传图片
+    onFileChanges: function (info) {
+      if (info.file.size > 5 * 1024 * 1024) {
+        Notify.error('提示', '图片大小超过限制，最大5M', false);
+        return;
+      }
+      this.fileUpload(info.file);
+    },
     /**
      * 上传图片
      */
@@ -222,6 +234,15 @@ export default {
      */
     fileUpload: function (selectedFile) {
       var _self = this;
+      console.log(selectedFile);
+      const fileName = selectedFile.name.toLowerCase();
+      const isImage = ['.jpg', '.jpeg', '.bmp', '.gif', '.png'].some(ext => 
+        fileName.endsWith(ext),
+      );
+      if (!isImage) {
+        Notify.error('提示', '请上传图片类型文件(.jpg, .jpeg, .bmp, .gif, .png)', false);
+        return;
+      }
       var formData = new FormData();
       formData.append('uploadImage', selectedFile);
       formData.append('className', _self.className);