优化资产图片批量导入界面

src/components/customer/ManuallyConfirmCountingData.vue

@@ -1,25 +1,21 @@
 <template>
-  <div class="grid-container">
-    <div class="grid-item-1">
-      <div>
-        <Navbar :title="$t('lang.AssetInventory.performInventoryTasks')" :is-go-back="false" style="margin-left: 14px" />
-      </div>
-      <section>
-        <a-steps :current="currentStep">
-          <a-step title="选择盘点单" />
-          <a-step title="人工确认盘点数据" />
-        </a-steps>
-      </section>
-      <a-divider />
-      <section>
-        <manually-confirm-counting-data-step1
-          v-if="currentStep == 0" :current-step="currentStep" @change-step="nextStep"
-          @previous="previousStep"
-        />
-        <PerformInventoryTasks v-if="currentStep == 1" :id="id" :current-step="currentStep" @change-step="nextStep" @next="nextStep" />
-      </section>
-    </div>
+  <div>
+    <Navbar :title="$t('lang.AssetInventory.performInventoryTasks')" :is-go-back="false" style="margin-left: 14px" />
   </div>
+  <section>
+    <a-steps :current="currentStep">
+      <a-step title="选择盘点单" />
+      <a-step title="人工确认盘点数据" />
+    </a-steps>
+  </section>
+  <a-divider />
+  <section>
+    <manually-confirm-counting-data-step1
+      v-if="currentStep == 0" :current-step="currentStep" @change-step="nextStep"
+      @previous="previousStep"
+    />
+    <PerformInventoryTasks v-if="currentStep == 1" :id="id" :current-step="currentStep" @change-step="nextStep" @next="nextStep" />
+  </section>
 </template>
 
 <script>

src/components/customer/ManuallyConfirmCountingDataStep1.vue

@@ -47,6 +47,9 @@
       上一步
     </a-button>
     <a-modal v-model:visible="visible" width="800px" title="查看盘点单">
+      <template #footer>
+        <a-button key="back" type="primary" @click="handleCancel">确认</a-button>
+      </template>
       <li class="site">
         <span class="labels">
           <label>盘点单名称:{{ inventoryName }}</label>
@@ -187,6 +190,11 @@ const confirmInventory = id => {
   emits('changeStep', { step: 1, id });
 };
 
+// 关闭模态框
+const handleCancel = () => {
+  visible.value = false;
+};
+
 //盘亏数据生成盘点单
 const generateInventory = id => {
   const params = new FormData();
@@ -204,7 +212,6 @@ const generateInventory = id => {
 
     success: function (data) {
       if (data.errorCode === 0) {
-        Notify.success('提示', '盘亏数据生成盘点单成功!', 1500);
         loading.value = false;
         visible.value = true;
         inventoryName.value = data.data.name;

src/components/sonicAlbumUpload/ImagesUpload.vue

@@ -1,12 +1,6 @@
 <template>
   <div style="height: 30px">
-    <a-upload
-      directory
-      :file-list="files.allFiles"
-      :show-upload-list="false"
-      :before-upload="beforeUpload"
-      @change="handleFolderUpload"
-    >
+    <a-upload directory :file-list="files.allFiles" :show-upload-list="false" :before-upload="beforeUpload" @change="handleFolderUpload">
       <a-button>
         <upload-outlined />
         选择资产图片文件夹
@@ -18,11 +12,21 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import {
+  ref,
+  reactive,
+} from 'vue';
 import Common from '../../common/Common.js';
-import { message } from 'ant-design-vue';
-import { debounce, multipleImageUpload } from './configData.js';
-import { UploadOutlined } from '@ant-design/icons-vue';
+import {
+  message,
+} from 'ant-design-vue';
+import {
+  debounce,
+  multipleImageUpload,
+} from './configData.js';
+import {
+  UploadOutlined,
+} from '@ant-design/icons-vue';
 
 const loading = ref(false);
 const imageFiles = ref([]); // 图片文件列表
@@ -50,19 +54,24 @@ const uploadImages = debounce(() => {
 const uploadFile = () => {
   if (imagesTotal.value == 0) {
     message.warning('请选择含有图片的文件夹！');
-  } 
-  // else if(imagesSize.value > 209715200) {
-  //   message.warning('文件夹内文件大小超过200M无法上传！');
-  // } 
-  else{
+  } else if (imagesSize.value > 1073741824) {
+    imageFiles.value = [];
+    imagesSize.value = 0;
+    files.fileList = [];
+    files.allFiles = [];
+    message.warning('文件夹内文件大小超过1GB无法上传！');
+  } else {
     const formData = new FormData();
     imageFiles.value.map(item => {
       formData.append('imageFiles', item);
     });
-    loading.value = true;
     multipleImageUpload(formData).then(
       successData => {
         if (successData.errorCode === 0) {
+          imageFiles.value = [];
+          imagesSize.value = 0;
+          files.fileList = [];
+          files.allFiles = [];
           message.success(
             `上传成功！该文件夹共上传${imagesTotal.value}张资产图片。`,
           );
@@ -95,24 +104,26 @@ const clearFile = () => {
 };
 </script>
 <style scoped>
-.files {
-  margin-right: 6px;
-  margin-left: 4px;
-}
+	.files {
+		margin-right: 6px;
+		margin-left: 4px;
+	}
 
-.upload-list-inline :deep(.ant-upload-list-item) {
-  float: left;
-  width: 200px;
-  margin-right: 8px;
-}
+	.upload-list-inline :deep(.ant-upload-list-item) {
+		float: left;
+		width: 200px;
+		margin-right: 8px;
+	}
 
-.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
-  float: right;
-}
-.ok {
-  margin-left: 8px;
-}
-.describe {
-  color: red;
-}
-</style>
+	.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
+		float: right;
+	}
+
+	.ok {
+		margin-left: 8px;
+	}
+
+	.describe {
+		color: red;
+	}
+</style>

src/components/sonicAlbumUpload/configData.js

@@ -54,12 +54,12 @@ export const assetColumns = [{
   key: 'assetNo',
   dataIndex: 'assetNo',
   width: 100,
-},{
+}, {
   title: '使用人',
   key: 'useUser',
   dataIndex: 'useUser',
   width: 100,
-},{
+}, {
   title: '保管人',
   key: 'custodianUser',
   dataIndex: 'custodianUser',
@@ -86,13 +86,13 @@ export const multipleImageUpload = params => {
       contentType: false,
       processData: false,
       data: params,
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -106,13 +106,13 @@ export const queryImages = imageName => {
       url: Common.getApiURL(requestUrl),
       type: 'get',
       dataType: 'json',
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -129,13 +129,13 @@ export const deleteImage = params => {
       contentType: 'application/json',
       dataType: 'json',
       data: JSON.stringify(params),
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -151,34 +151,35 @@ export const testImportExcel = params => {
       contentType: false,
       processData: false,
       data: params,
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
   });
 };
 // 正式上传excel
-export const importExcel = () => {
+export const importExcel = params => {
   var requestUrl = 'AssetImageImportResource/importingTemporaryTables';
   return new Promise((resolve, reject) => {
     $.ajax({
       url: Common.getApiURL(requestUrl),
       type: 'post',
-      contentType: 'application/json',
-      dataType: 'json',
-      beforeSend: function (request) {
+      contentType: false,
+      processData: false,
+      data: params,
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -194,13 +195,13 @@ export const queryAssetData = params => {
       contentType: 'application/json',
       dataType: 'json',
       data: JSON.stringify(params),
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -215,13 +216,13 @@ export const deleteAssetData = () => {
       type: 'post',
       contentType: 'application/json',
       dataType: 'json',
-      beforeSend: function (request) {
+      beforeSend: function(request) {
         Common.addTokenToRequest(request);
       },
-      success: function (data) {
+      success: function(data) {
         resolve(data);
       },
-      error: function (XMLHttpRequest, textStatus, errorThrown) {
+      error: function(XMLHttpRequest, textStatus, errorThrown) {
         reject(XMLHttpRequest);
       },
     });
@@ -229,7 +230,7 @@ export const deleteAssetData = () => {
 };
 
 
-export const listClientCanAccess = ()=>{
+export const listClientCanAccess = () => {
   var requestUrl = 'clientResourceV2/listClientCanAccess';
 
   return new Promise((resolve, reject) => {
@@ -253,10 +254,10 @@ export const listClientCanAccess = ()=>{
 // 防抖函数
 export const debounce = (fn, wait = 1000) => {
   let timer;
-  return function (...args) {
+  return function(...args) {
     clearTimeout(timer);
     timer = setTimeout(() => {
       fn.call(this, args);
     }, wait);
   };
-};
+};

src/components/sonicAlbumUpload/index.vue

@@ -10,7 +10,7 @@
       <label style="margin-bottom: 12px">2. 上传资产图片文件夹</label>
       <div>
         <ImagesUpload v-show="company==''?false:true" />
-        <p class="pStyle">支持拓展名：.png .jpg .jpeg .gif</p>
+        <p class="pStyle">支持拓展名：.png .jpg .jpeg .gif 注意：文件小于1GB</p>
         <p class="pStyle">
           <a @click="viewImage">查看上传的图片</a>
         </p>
@@ -27,12 +27,15 @@
               上传资产图片Excel
             </a-button>
           </a-upload>
-          <a-button :disabled="company==''?true:false" style="margin-left: 8px" type="primary" @click="testImport">
+          <a-button v-show="showTest" style="margin-left: 8px" type="primary" @click="testImport">
             测试导入
           </a-button>
-          <a-button :disabled="company==''?true:false" style="margin-left: 8px" type="primary" @click="importImageExcel">
+          <a-button v-show="showFormal" style="margin-left: 8px" type="primary" @click="importImageExcel">
             正式导入
           </a-button>
+          <a-button style="margin-left: 8px" type="primary" @click="cleanUp">
+            清空
+          </a-button>
         </div>
         <p class="pStyle">支持拓展名：.xlsx</p>
         <div v-show="company==''?false:true">
@@ -42,7 +45,7 @@
           >
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'result'">
-                <div :style="record.result === '校验成功'?style1:style2">
+                <div :style="record.result === '校验成功'|| record.result === '导入成功' ?style1:style2">
                   {{ record.result }}
                 </div>
               </template>
@@ -56,19 +59,19 @@
       <ul class="siteList">
         <li class="site">
           <span class="labels">
-            <label>资产名称</label>
+            <label>资产编号</label>
           </span>
           <a-input
-            v-model:value="assetName" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产名称"
+            v-model:value="assetNo" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产编号"
             @change="searchDatas"
           />
         </li>
         <li class="site">
           <span class="labels">
-            <label>资产编号</label>
+            <label>资产名称</label>
           </span>
           <a-input
-            v-model:value="assetNo" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产编号"
+            v-model:value="assetName" :disabled="company==''?true:false" style="width: 70%; height: 30px" placeholder="请输入资产名称"
             @change="searchDatas"
           />
         </li>
@@ -202,6 +205,8 @@ const resultImageDatas = ref([]);
 const excelFiles = ref([]);
 const loading = ref(false);
 const isLoading = ref(false);
+const showTest = ref(false);
+const showFormal = ref(false);
 const deleteParams = ref([]);
 const assetImageDatas = ref([]);
 const imageNameParams = ref('');
@@ -331,6 +336,7 @@ const excelFileChange = e => {
     message.warning('请选择.xlsx格式的文件！');
     return;
   }
+  showTest.value = true;
   excelFile.value = e.file;
 };
 
@@ -339,12 +345,15 @@ const testImport = () => {
   if (excelFiles.value.length > 0) {
     const formData = new FormData();
     formData.append('imageSheet', excelFile.value);
+    formData.append('clientId', company.value);
     loading.value = true;
     testImportExcel(formData).then(
       successData => {
         if (successData.errorCode == 0) {
           message.success('测试导入资产excel成功，请点击正式导入！');
+          showFormal.value = true;
           resultImageDatas.value = successData.datas;
+          showTest.value = false;
         } else {
           message.warning(successData.errorMessage);
           resultImageDatas.value = successData.datas;
@@ -363,12 +372,16 @@ const testImport = () => {
 
 // 正式导入
 const importImageExcel = () => {
+  const formData = new FormData();
+  formData.append('clientId', company.value);
   loading.value = true;
-  importExcel().then(
+  importExcel(formData).then(
     successData => {
       if (successData.errorCode == 0) {
         message.success('正式导入资产图片Excel成功！');
         searchAsset();
+        resultImageDatas.value = successData.datas;
+        showFormal.value = false;
       } else {
         var strarr = successData.errorMessage.replace(/\n+$/, '').split('\n');
         strarr.forEach(function(item) {
@@ -394,6 +407,8 @@ const searchAsset = () => {
     ...pager,
   };
   loading.value = true;
+  assetImageDatas.value = null;
+  assetTotal.value = 0;
   queryAssetData(params).then(
     successData => {
       if (successData.errorCode == 0) {
@@ -430,6 +445,21 @@ const downloadReport = type => {
   window.open(url);
 };
 
+// 清空临时表数据
+const cleanUp = () => {
+  loading.value = true;
+  deleteAssetData().then(
+    successData => {
+      loading.value = false;
+      resultImageDatas.value = null;
+    },
+    errorData => {
+      Common.processException(errorData);
+      loading.value = false;
+    },
+  );
+};
+
 // 禁止自带默认上传
 const beforeUpload = file => {
   return false;