no message

smart-admin-web-typescript/src/api/business/base/item/item-api.ts

@@ -5,7 +5,7 @@
  * @Date:      2024-11-25 17:08:18
  * @Copyright  友仓
  */
-import {postRequest, getRequest} from '/@/lib/axios';
+import {postRequest, getRequest, getDownload} from '/@/lib/axios';
 
 export const itemApi = {
 
@@ -34,8 +34,8 @@ export const itemApi = {
     /**
      * 删除  @author  霍锦
      */
-    delete: (id: number) => {
+    delete: (itemId: number) => {
-        return getRequest('/item/delete', {id});
+        return getRequest('/item/delete', {itemId});
     },
 
     /**
@@ -52,4 +52,18 @@ export const itemApi = {
         return postRequest('/item/queryItem', param);
     },
 
+    /**
+     * 导入  @author  hj
+     */
+    importItems: (file: object) => {
+        return postRequest('/item/importItems', file);
+    },
+
+    /**
+     * 导出  @author  hj
+     */
+    exportItems: () => {
+        return getDownload('/item/exportItems',{});
+    }
+
 };

smart-admin-web-typescript/src/api/business/base/location/location-api.ts

@@ -5,7 +5,7 @@
  * @Date:      2024-11-18 14:17:31
  * @Copyright  友仓
  */
-import {postRequest, getRequest} from '/@/lib/axios';
+import {postRequest, getRequest, getDownload} from '/@/lib/axios';
 
 export const locationApi = {
 
@@ -69,7 +69,14 @@ export const locationApi = {
     /**
      * 导入  @author  hj
      */
-    importLocations: (file: object, config = {}) => {
+    importLocations: (file: object) => {
-        return postRequest('/location/importLocations', file, config);
+        return postRequest('/location/importLocations', file);
     },
+
+    /**
+     * 导出  @author  hj
+     */
+    exportLocations : () =>{
+        return getDownload('/location/exportLocations',{});
+    }
 };

smart-admin-web-typescript/src/api/business/base/stock/stock-api.ts

@@ -0,0 +1,69 @@
+/**
+ * 容器信息 api 封装
+ *
+ * @Author:    霍锦
+ * @Date:      2024-11-26 11:37:48
+ * @Copyright  友仓
+ */
+import {postRequest, getRequest,getDownload} from '/@/lib/axios';
+
+export const stockApi = {
+
+    /**
+     * 分页查询  @author  霍锦
+     */
+    queryPage: (param: object) => {
+        return postRequest('/stock/queryPage', param);
+    },
+
+    /**
+     * 增加  @author  霍锦
+     */
+    add: (param: object) => {
+        return postRequest('/stock/add', param);
+    },
+
+    /**
+     * 修改  @author  霍锦
+     */
+    update: (param: object) => {
+        return postRequest('/stock/update', param);
+    },
+
+
+    /**
+     * 删除  @author  霍锦
+     */
+    delete: (stockId: number) => {
+        return getRequest('/stock/delete', {stockId});
+    },
+
+    /**
+     * 批量删除  @author  霍锦
+     */
+    batchDelete: (idList: number[]) => {
+        return postRequest('/stock/batchDelete', idList);
+    },
+    /**
+     * 下拉查询  @author  hj
+     */
+    queryStock: (param: object) => {
+        return postRequest('/stock/queryStock', param);
+    },
+
+    /**
+     * 导入  @author  hj
+     */
+    importStocks: (file: object) => {
+        return postRequest('/stock/importStocks', file);
+    },
+
+    /**
+     * 导出  @author  hj
+     */
+    exportStocks: () => {
+        return getDownload('/stock/exportStocks', {});
+    }
+
+
+};

smart-admin-web-typescript/src/api/business/base/stock/stock-const.ts

@@ -0,0 +1,11 @@
+/**
+ * 容器信息 枚举
+ *
+ * @Author:    霍锦
+ * @Date:      2024-11-26 11:37:48
+ * @Copyright  友仓
+ */
+
+
+export default {
+};

smart-admin-web-typescript/src/constants/support/table-id-const.ts

@@ -38,6 +38,7 @@ export const TABLE_ID_CONST = {
       AREA:businessBASEInitTableId+1,//库区
       LOCATION:businessBASEInitTableId+2,//库位
       ITEM:businessBASEInitTableId+3,//商品
+      STOCK:businessBASEInitTableId+4,//容器
     }
   },
 

smart-admin-web-typescript/src/lib/axios.ts

@@ -146,12 +146,11 @@ export const request = (config) => {
 /**
  * post请求
  */
-export const postRequest = (url, data,configs = {}) => {
+export const postRequest = (url, data) => {
   return request({
     data,
     url,
-    method: 'post',
+    method: 'post'
-    ...configs,
   });
 };
 

smart-admin-web-typescript/src/views/business/base/area/area-list.vue

@@ -180,7 +180,7 @@ const columns = ref([
     title: '操作',
     dataIndex: 'action',
     fixed: 'right',
-    width: 90,
+    width: 140,
   },
 ]);
 

smart-admin-web-typescript/src/views/business/base/area/area-select.vue

@@ -49,7 +49,7 @@ const props = defineProps({
     default: false,
   },
   areaNames: {
-    type: Array as () => any[],
+    type: Array as () => string[],
     default: () => []
   },
   disabledFlag: {

smart-admin-web-typescript/src/views/business/base/item/item-list.vue

@@ -53,6 +53,19 @@
           </template>
           批量删除
         </a-button>
+        <a-button @click="showImportModal" type="primary" v-privilege="'item:importItems'">
+          <template #icon>
+            <ImportOutlined/>
+          </template>
+          导入
+        </a-button>
+
+        <a-button @click="onExportItems" type="primary" v-privilege="'item:exportItems'">
+          <template #icon>
+            <ExportOutlined/>
+          </template>
+          导出
+        </a-button>
       </div>
       <div class="smart-table-setting-block">
         <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.ITEM" :refresh="queryData"/>
@@ -121,8 +134,41 @@
       />
     </div>
 
+    <!--    新建/编辑-->
     <ItemForm ref="formRef" @reloadList="queryData"/>
 
+    <!--    导入-->
+    <a-modal v-model:open="importModalShowFlag" title="导入" footer>
+      <div style="text-align: center; width: 400px; margin: 0 auto">
+        <a-button @click="downloadExcel">
+          <download-outlined/>
+          第一步：下载模板
+        </a-button>
+        <br/>
+        <br/>
+        <a-upload
+            v-model:fileList="fileList"
+            name="file"
+            :multiple="false"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+            @remove="handleRemove"
+        >
+          <a-button>
+            <upload-outlined/>
+            第二步：选择文件
+          </a-button>
+        </a-upload>
+
+        <br/>
+        <a-button @click="onImportItems">
+          <ImportOutlined/>
+          第三步：开始导入
+        </a-button>
+      </div>
+    </a-modal>
+
   </a-card>
 </template>
 <script setup lang="ts">
@@ -138,11 +184,16 @@ import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
 import DictPreview from '/@/components/dict-preview/index.vue';
 import {useDict} from '/@/utils/dict';
 import ItemSelect from "/@/views/business/base/item/item-select.vue";
+import {UploadFile} from 'ant-design-vue';
+import {fileApi} from "/@/api/support/file-api";
 
-const itemUnit = useDict('ITEM_UNIT');
+//物料类型
 const itemType = useDict('ITEM_TYPE');
-// ---------------------------- 表格列 ----------------------------
 
+//包装单位
+const itemUnit = useDict('ITEM_UNIT');
+
+// ---------------------------- 表格列 ----------------------------
 const columns = ref([
   {
     title: '物料id',
@@ -189,7 +240,7 @@ const columns = ref([
     title: '操作',
     dataIndex: 'action',
     fixed: 'right',
-    width: 90,
+    width: 140,
   },
 ]);
 
@@ -324,4 +375,72 @@ async function requestBatchDelete() {
     SmartLoading.hide();
   }
 }
+
+// ------------------------------- 导出和导入 ---------------------------------
+// 导入弹窗
+const importModalShowFlag = ref(false);
+
+const fileList = ref<UploadFile[]>([])
+
+// 显示导入
+function showImportModal() {
+  fileList.value = [];
+  importModalShowFlag.value = true;
+}
+
+//下载模板
+async function downloadExcel() {
+  try {
+    //默认库位模板fileKey
+    let fileKey = 'public/common/757c986a8e324b73b62b30f44c826b98_20250319102103.xlsx';
+    fileApi.downLoadFile(fileKey);
+  } catch (e) {
+    smartSentry.captureError(e);
+  }
+}
+
+// 移除文件
+function handleRemove(file: UploadFile) {
+  const index = fileList.value.indexOf(file);
+  const newFileList = fileList.value.slice();
+  newFileList.splice(index, 1);
+  fileList.value = newFileList;
+}
+
+// 上传文件
+function beforeUpload(file: UploadFile) {
+  fileList.value = [...(fileList.value || []), file];
+
+  return false;
+}
+
+
+//导入
+async function onImportItems() {
+  if (fileList.value.length === 0) {
+    return message.error('请选择文件');
+  }
+  const formData = new FormData();
+  fileList.value.forEach((file: UploadFile) => {
+    formData.append('file', file.originFileObj!);
+  });
+
+  SmartLoading.show();
+  try {
+    const response = await itemApi.importItems(formData);
+    const {success} = JSON.parse(response.msg);
+    message.success(success);
+    importModalShowFlag.value = false;
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+//导出
+function onExportItems() {
+  itemApi.exportItems();
+}
 </script>

smart-admin-web-typescript/src/views/business/base/location/location-form.vue

@@ -16,7 +16,7 @@
   >
     <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
       <a-form-item label="库区" name="areaId">
-        <AreaSelect style="width: 100%" v-model:value="form.areaId" :disabledFlag="true" @change="changeAreaSelect"/>
+        <AreaSelect style="width: 100%" v-model:value="form.areaId" :disabled-flag="true" @change="changeAreaSelect"/>
       </a-form-item>
       <a-form-item label="库位" name="locationCode">
         <a-input style="width: 100%" v-model:value="form.locationCode" placeholder="库位编码"/>
@@ -57,7 +57,6 @@ import {USAGE_STATUS_ENUM} from '/@/constants/business/base/usagestatus-const';
 import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
 import AreaSelect from "/@/views/business/base/area/area-select.vue";
 import DictSelect from "/@/components/support/dict-select/index.vue";
-
 // ------------------------ 事件 ------------------------
 
 const emits = defineEmits(['reloadList']);
@@ -94,7 +93,7 @@ const formDefault = {
   status: USAGE_STATUS_ENUM.FREE.value, //状态
   areaId: undefined, //库区ID
   disabledFlag: true, //是否禁用
-  locationType: [] //库位类型
+  locationType: [], //库位类型
 };
 
 let form = reactive({...formDefault});

smart-admin-web-typescript/src/views/business/base/location/location-list.vue

@@ -10,7 +10,7 @@
   <a-form class="smart-query-form">
     <a-row class="smart-query-form-row">
       <a-form-item label="库区" class="smart-query-form-item">
-        <AreaSelect v-model:value="queryForm.areaId" :disabledFlag="true" @change="changeAreaSelect"/>
+        <AreaSelect v-model:value="queryForm.areaId" :disabled-flag="true" @change="changeAreaSelect"/>
       </a-form-item>
       <a-form-item label="库位" class="smart-query-form-item">
         <LocationSelect v-model:value="queryForm.locationId" :disabledFlag="true" @change="changeLocationSelect"/>
@@ -81,6 +81,13 @@
           导入
         </a-button>
 
+        <a-button @click="onExportLocations" type="primary" v-privilege="'location:exportLocations'">
+          <template #icon>
+            <ExportOutlined/>
+          </template>
+          导出
+        </a-button>
+
       </div>
       <div class="smart-table-setting-block">
         <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.LOCATION" :refresh="queryData"/>
@@ -173,7 +180,8 @@
     <!--    批量新建-->
     <MultipleInsert ref="multipleInsertFormRef" @reloadList="queryData"/>
 
-    <a-modal v-model:open="importModalShowFlag" title="导入" @onCancel="hideImportModal" @ok="hideImportModal">
+    <!--    导入-->
+    <a-modal v-model:open="importModalShowFlag" title="导入" footer>
       <div style="text-align: center; width: 400px; margin: 0 auto">
         <a-button @click="downloadExcel">
           <download-outlined/>
@@ -201,8 +209,6 @@
           <ImportOutlined/>
           第三步：开始导入
         </a-button>
-        <!-- 新增进度条 -->
-        <a-progress v-if="uploadProgress > 0" :percent="uploadProgress" status="active" />
       </div>
     </a-modal>
 
@@ -226,9 +232,11 @@ import DictPreview from '/@/components/dict-preview/index.vue';
 import {useDict} from '/@/utils/dict';
 import MultipleInsert from "/@/views/business/base/location/multiple-insert.vue";
 import {UploadFile} from 'ant-design-vue';
+import {fileApi} from "/@/api/support/file-api";
 
-
+//库位字典类型
 const locType = useDict('LOC_TYPE');
+
 // ---------------------------- 表格列 ----------------------------
 
 const columns = ref([
@@ -286,7 +294,7 @@ const columns = ref([
     title: '操作',
     dataIndex: 'action',
     fixed: 'right',
-    width: 90,
+    width: 140,
   },
 ]);
 
@@ -455,25 +463,21 @@ const importModalShowFlag = ref(false);
 
 const fileList = ref<UploadFile[]>([])
 
-// 新增上传进度
-const uploadProgress = ref(0);
-
 // 显示导入
 function showImportModal() {
   fileList.value = [];
-  uploadProgress.value = 0;
   importModalShowFlag.value = true;
 }
 
-// 关闭 导入
-function hideImportModal() {
-  importModalShowFlag.value = false;
-  uploadProgress.value = 0;
-}
-
 //下载模板
-function downloadExcel() {
+async function downloadExcel() {
-  window.open('https://smartadmin.vip/cdn/%E5%95%86%E5%93%81%E6%A8%A1%E6%9D%BF.xls');
+  try {
+    //默认库位模板fileKey
+    let fileKey = 'public/common/2aa16b3d4c474efaad9057d3ce722067_20250317102514.xlsx';
+    fileApi.downLoadFile(fileKey);
+  } catch (e) {
+    smartSentry.captureError(e);
+  }
 }
 
 // 移除文件
@@ -492,10 +496,8 @@ function beforeUpload(file:UploadFile) {
 }
 
 
-
 //导入
 async function onImportLocations() {
-  console.log(fileList.value.length);
   if (fileList.value.length === 0) {
     return message.error('请选择文件');
   }
@@ -506,24 +508,21 @@ async function onImportLocations() {
 
   SmartLoading.show();
   try {
-    // 补全进度条的显示代码
+    const response = await locationApi.importLocations(formData);
-    const config = {
+    const {success} = JSON.parse(response.msg);
-      onUploadProgress: (progressEvent) => {
+    message.success(success);
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+    importModalShowFlag.value = false;
-        // 更新进度条状态
-        console.log(`上传进度: ${percentCompleted}%`);
-        uploadProgress.value = percentCompleted;
-      },
-    };
-    let res = await locationApi.importLocations(formData, config);
-    message.success(res.msg);
     await queryData();
   } catch (e) {
     smartSentry.captureError(e);
-    message.error('导入失败');
   } finally {
     SmartLoading.hide();
   }
 }
 
+//导出
+function onExportLocations() {
+  locationApi.exportLocations();
+}
+
 </script>

smart-admin-web-typescript/src/views/business/base/location/multiple-insert.vue

@@ -19,7 +19,8 @@
       <a-row :gutter="24">
         <a-col :span="12">
           <a-form-item label="库区" name="areaId">
-            <AreaSelect width="100%" v-model:value="form.areaId" :disabledFlag="true" @change="changeAreaSelect"/>
+            <AreaSelect width="100%" v-model:value="form.areaId" :area-names="['存储区']" :disabled-flag="true"
+                        @change="changeAreaSelect"/>
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -209,7 +210,7 @@ async function save() {
       areaId: form.areaId,
       locationType: form.locationType
     });
-    const {error, success} = JSON.parse(response.data);
+    const {error, success} = JSON.parse(response.msg);
     if (error) {
       message.error(error);
     }

smart-admin-web-typescript/src/views/business/base/stock/stock-form.vue

@@ -0,0 +1,157 @@
+<!--
+  * 容器信息
+  *
+  * @Author:    霍锦
+  * @Date:      2024-11-26 11:37:48
+  * @Copyright  友仓
+-->
+<template>
+  <a-modal
+      :title="form.stockId ? '编辑' : '添加'"
+      :width="600"
+      :open="visibleFlag"
+      @cancel="onClose"
+      :maskClosable="false"
+      :destroyOnClose="true"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
+        <a-form-item label="容器id"  name="stockId">
+          <a-input-number style="width: 100%" v-model:value="form.stockId" placeholder="容器id" />
+        </a-form-item>
+        <a-form-item label="容器编码"  name="stockCode">
+          <a-input style="width: 100%" v-model:value="form.stockCode" placeholder="容器编码" />
+        </a-form-item>
+        <a-form-item label="状态"  name="status">
+          <SmartEnumSelect width="100%" v-model:value="form.status" enumName="" placeholder="状态"/>
+        </a-form-item>
+        <a-form-item label="启用状态"  name="disabledFlag">
+          <BooleanSelect v-model:value="form.disabledFlag" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="容器类型"  name="stockType">
+          <DictSelect width="100%" v-model:value="form.stockType" keyCode="STOCK_TYPE" placeholder="容器类型"/>
+        </a-form-item>
+        <a-form-item label="创建人ID"  name="createUserId">
+          <a-input-number style="width: 100%" v-model:value="form.createUserId" placeholder="创建人ID" />
+        </a-form-item>
+        <a-form-item label="创建人"  name="createUserName">
+          <a-input style="width: 100%" v-model:value="form.createUserName" placeholder="创建人" />
+        </a-form-item>
+        <a-form-item label="创建时间"  name="createTime">
+          <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.createTime" style="width: 100%" placeholder="创建时间" />
+        </a-form-item>
+        <a-form-item label="更新时间"  name="updateTime">
+          <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.updateTime" style="width: 100%" placeholder="更新时间" />
+        </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onSubmit">保存</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+<script setup lang="ts">
+  import { reactive, ref, nextTick } from 'vue';
+  import _ from 'lodash';
+  import { message } from 'ant-design-vue';
+  import { SmartLoading } from '/@/components/framework/smart-loading';
+  import { stockApi } from '/@/api/business/base/stock/stock-api';
+  import { smartSentry } from '/@/lib/smart-sentry';
+  import BooleanSelect from '/@/components/framework/boolean-select/index.vue';
+  import DictSelect from '/@/components/support/dict-select/index.vue';
+  import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
+
+  // ------------------------ 事件 ------------------------
+
+  const emits = defineEmits(['reloadList']);
+
+  // ------------------------ 显示与隐藏 ------------------------
+  // 是否显示
+  const visibleFlag = ref(false);
+
+  function show(rowData:object) {
+    Object.assign(form, formDefault);
+    if (rowData && !_.isEmpty(rowData)) {
+      Object.assign(form, rowData);
+    }
+    // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
+    // if (form.status && form.status.length > 0) {
+    //   form.status = form.status.map((e) => e.valueCode);
+    // }
+    visibleFlag.value = true;
+    nextTick(() => {
+      formRef.value.clearValidate();
+    });
+  }
+
+  function onClose() {
+    Object.assign(form, formDefault);
+    visibleFlag.value = false;
+  }
+
+  // ------------------------ 表单 ------------------------
+
+  // 组件ref
+  const formRef = ref();
+
+  const formDefault = {
+      stockId: undefined, //容器id
+      stockCode: undefined, //容器编码
+      status: undefined, //状态
+      disabledFlag: undefined, //启用状态
+      stockType: undefined, //容器类型
+      createUserId: undefined, //创建人ID
+      createUserName: undefined, //创建人
+      createTime: undefined, //创建时间
+      updateTime: undefined, //更新时间
+  };
+
+  let form = reactive({ ...formDefault });
+
+  const rules = {
+      stockId: [{ required: true, message: '容器id 必填' }],
+      stockCode: [{ required: true, message: '容器编码 必填' }],
+      status: [{ required: true, message: '状态 必填' }],
+      disabledFlag: [{ required: true, message: '启用状态 必填' }],
+      stockType: [{ required: true, message: '容器类型 必填' }],
+      createUserId: [{ required: true, message: '创建人ID 必填' }],
+      createUserName: [{ required: true, message: '创建人 必填' }],
+      createTime: [{ required: true, message: '创建时间 必填' }],
+      updateTime: [{ required: true, message: '更新时间 必填' }],
+  };
+
+  // 点击确定，验证表单
+  async function onSubmit() {
+    try {
+      await formRef.value.validateFields();
+      save();
+    } catch (err) {
+      message.error('参数验证错误，请仔细填写表单数据!');
+    }
+  }
+
+  // 新建、编辑API
+  async function save() {
+    SmartLoading.show();
+    try {
+      if (form.stockId) {
+        await stockApi.update(form);
+      } else {
+        await stockApi.add(form);
+      }
+      message.success('操作成功');
+      emits('reloadList');
+      onClose();
+    } catch (err) {
+      smartSentry.captureError(err);
+    } finally {
+      SmartLoading.hide();
+    }
+  }
+
+  defineExpose({
+    show,
+  });
+</script>

smart-admin-web-typescript/src/views/business/base/stock/stock-list.vue

@@ -0,0 +1,426 @@
+<!--
+  * 容器信息
+  *
+  * @Author:    霍锦
+  * @Date:      2024-11-26 11:37:48
+  * @Copyright  友仓
+-->
+<template>
+  <!---------- 查询表单form begin ----------->
+  <a-form class="smart-query-form">
+    <a-row class="smart-query-form-row">
+      <a-form-item label="容器编码" class="smart-query-form-item">
+        <a-input style="width: 200px" v-model:value="queryForm.stockCode" placeholder="容器编码"/>
+      </a-form-item>
+      <a-form-item class="smart-query-form-item">
+        <a-button type="primary" @click="onSearch" class="smart-margin-left10">
+          <template #icon>
+            <SearchOutlined/>
+          </template>
+          查询
+        </a-button>
+        <a-button @click="resetQuery" class="smart-margin-left10">
+          <template #icon>
+            <ReloadOutlined/>
+          </template>
+          重置
+        </a-button>
+      </a-form-item>
+    </a-row>
+  </a-form>
+  <!---------- 查询表单form end ----------->
+
+  <a-card size="small" :bordered="false" :hoverable="true">
+    <!---------- 表格操作行 begin ----------->
+    <a-row class="smart-table-btn-block">
+      <div class="smart-table-operate-block">
+        <a-button @click="showForm" type="primary" v-privilege="'stock:add'">
+          <template #icon>
+            <PlusOutlined/>
+          </template>
+          新建
+        </a-button>
+        <a-button @click="confirmBatchDelete" type="primary" danger v-privilege="'stock:batchDelete'"
+                  :disabled="selectedRowKeyList.length == 0">
+          <template #icon>
+            <DeleteOutlined/>
+          </template>
+          批量删除
+        </a-button>
+        <a-button @click="showImportModal" type="primary" v-privilege="'stock:importStocks'">
+          <template #icon>
+            <ImportOutlined/>
+          </template>
+          导入
+        </a-button>
+
+        <a-button @click="onExportStocks" type="primary" v-privilege="'stock:exportStocks'">
+          <template #icon>
+            <ExportOutlined/>
+          </template>
+          导出
+        </a-button>
+      </div>
+      <div class="smart-table-setting-block">
+        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.BASE.STOCK" :refresh="queryData"/>
+      </div>
+    </a-row>
+    <!---------- 表格操作行 end ----------->
+
+    <!---------- 表格 begin ----------->
+    <a-table
+        size="small"
+        :dataSource="tableData"
+        :columns="columns"
+        rowKey="stockId"
+        bordered
+        :loading="tableLoading"
+        :pagination="false"
+        :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+    >
+      <template #bodyCell="{ text, record, column }">
+
+        <template v-if="column.dataIndex === 'stockType'">
+          <DictPreview :options="stockType.STOCK_TYPE" :value="text"/>
+        </template>
+
+        <template v-if="column.dataIndex === 'status'">
+          <a-tag :color="text==='FREE' ? 'success' : 'error'">
+            {{ $smartEnumPlugin.getDescByValue('USAGE_STATUS_ENUM', text) }}
+          </a-tag>
+        </template>
+
+        <template v-if="column.dataIndex === 'disabledFlag'">
+          <a-tag :color="text ? 'processing' : 'error'">{{ text ? '启用' : '禁用' }}</a-tag>
+        </template>
+
+        <template v-if="column.dataIndex === 'action'">
+          <div class="smart-table-operate">
+            <a-button @click="showForm(record)" type="link" v-privilege="'stock:update'">
+              <template #icon>
+                <EditOutlined/>
+              </template>
+              编辑
+            </a-button>
+            <a-button @click="onDelete(record)" danger type="link" v-privilege="'stock:delete'">
+              <template #icon>
+                <DeleteOutlined/>
+              </template>
+              删除
+            </a-button>
+          </div>
+        </template>
+      </template>
+    </a-table>
+    <!---------- 表格 end ----------->
+
+    <div class="smart-query-table-page">
+      <a-pagination
+          showSizeChanger
+          showQuickJumper
+          show-less-items
+          :pageSizeOptions="PAGE_SIZE_OPTIONS"
+          :defaultPageSize="queryForm.pageSize"
+          v-model:current="queryForm.pageNum"
+          v-model:pageSize="queryForm.pageSize"
+          :total="total"
+          @change="queryData"
+          @showSizeChange="queryData"
+          :show-total="(total:number) => `共${total}条`"
+      />
+    </div>
+
+    <!--    新建/编辑-->
+    <StockForm ref="formRef" @reloadList="queryData"/>
+
+    <!--    导入-->
+    <a-modal v-model:open="importModalShowFlag" title="导入" footer>
+      <div style="text-align: center; width: 400px; margin: 0 auto">
+        <a-button @click="downloadExcel">
+          <download-outlined/>
+          第一步：下载模板
+        </a-button>
+        <br/>
+        <br/>
+        <a-upload
+            v-model:fileList="fileList"
+            name="file"
+            :multiple="false"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+            @remove="handleRemove"
+        >
+          <a-button>
+            <upload-outlined/>
+            第二步：选择文件
+          </a-button>
+        </a-upload>
+
+        <br/>
+        <a-button @click="onImportStocks">
+          <ImportOutlined/>
+          第三步：开始导入
+        </a-button>
+      </div>
+    </a-modal>
+
+  </a-card>
+</template>
+<script setup lang="ts">
+import {reactive, ref, onMounted} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {SmartLoading} from '/@/components/framework/smart-loading';
+import {stockApi} from '/@/api/business/base/stock/stock-api';
+import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
+import {smartSentry} from '/@/lib/smart-sentry';
+import TableOperator from '/@/components/support/table-operator/index.vue';
+import StockForm from '/@/views/business/base/stock/stock-form.vue';
+import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
+import DictPreview from "/@/components/dict-preview/index.vue";
+import {useDict} from "/@/utils/dict";
+import {UploadFile} from 'ant-design-vue';
+import {fileApi} from "/@/api/support/file-api";
+
+
+//容器类型
+const stockType = useDict('STOCK_TYPE');
+// ---------------------------- 表格列 ----------------------------
+
+const columns = ref([
+  {
+    title: '容器id',
+    dataIndex: 'stockId',
+    ellipsis: true,
+  },
+  {
+    title: '容器编码',
+    dataIndex: 'stockCode',
+    ellipsis: true,
+  },
+  {
+    title: '容器类型',
+    dataIndex: 'stockType',
+    ellipsis: true,
+  },
+  {
+    title: '库位',
+    dataIndex: 'locationCode',
+    ellipsis: true,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    ellipsis: true,
+  },
+  {
+    title: '启用状态',
+    dataIndex: 'disabledFlag',
+    ellipsis: true,
+  },
+
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    width: 140,
+  },
+]);
+
+// ---------------------------- 查询数据表单和方法 ----------------------------
+
+const queryFormState = {
+  stockCode: undefined, //容器编码
+  pageNum: 1,
+  pageSize: 10,
+};
+// 查询表单form
+const queryForm = reactive({...queryFormState});
+// 表格加载loading
+const tableLoading = ref(false);
+// 表格数据
+const tableData = ref([]);
+// 总数
+const total = ref(0);
+
+// 重置查询条件
+function resetQuery() {
+  let pageSize = queryForm.pageSize;
+  Object.assign(queryForm, queryFormState);
+  queryForm.pageSize = pageSize;
+  queryData();
+}
+
+// 搜索
+function onSearch() {
+  queryForm.pageNum = 1;
+  queryData();
+}
+
+// 查询数据
+async function queryData() {
+  tableLoading.value = true;
+  try {
+    let queryResult = await stockApi.queryPage(queryForm);
+    tableData.value = queryResult.data.list;
+    total.value = queryResult.data.total;
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+
+onMounted(queryData);
+
+// ---------------------------- 添加/修改 ----------------------------
+const formRef = ref();
+
+function showForm(data: object) {
+  formRef.value.show(data);
+}
+
+// ---------------------------- 单个删除 ----------------------------
+//确认删除
+function onDelete(data: object) {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选吗?',
+    okText: '删除',
+    okType: 'danger',
+    onOk() {
+      requestDelete(data);
+    },
+    cancelText: '取消',
+    onCancel() {
+    },
+  });
+}
+
+//请求删除
+async function requestDelete(data: any) {
+  SmartLoading.show();
+  try {
+    await stockApi.delete(data.stockId);
+    message.success('删除成功');
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+// ---------------------------- 批量删除 ----------------------------
+
+// 选择表格行
+const selectedRowKeyList = ref([]);
+
+function onSelectChange(selectedRowKeys: any) {
+  selectedRowKeyList.value = selectedRowKeys;
+}
+
+// 批量删除
+function confirmBatchDelete() {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要批量删除这些数据吗?',
+    okText: '删除',
+    okType: 'danger',
+    onOk() {
+      requestBatchDelete();
+    },
+    cancelText: '取消',
+    onCancel() {
+    },
+  });
+}
+
+//请求批量删除
+async function requestBatchDelete() {
+  try {
+    SmartLoading.show();
+    await stockApi.batchDelete(selectedRowKeyList.value);
+    message.success('删除成功');
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+// ------------------------------- 导出和导入 ---------------------------------
+// 导入弹窗
+const importModalShowFlag = ref(false);
+
+const fileList = ref<UploadFile[]>([])
+
+// 显示导入
+function showImportModal() {
+  fileList.value = [];
+  importModalShowFlag.value = true;
+}
+
+//下载模板
+async function downloadExcel() {
+  try {
+    //默认库位模板fileKey
+    let fileKey = 'public/common/d7ece9dda26b4b4b81fe3f7f88f7a707_20250319174104.xlsx';
+    fileApi.downLoadFile(fileKey);
+  } catch (e) {
+    smartSentry.captureError(e);
+  }
+}
+
+// 移除文件
+function handleRemove(file: UploadFile) {
+  const index = fileList.value.indexOf(file);
+  const newFileList = fileList.value.slice();
+  newFileList.splice(index, 1);
+  fileList.value = newFileList;
+}
+
+// 上传文件
+function beforeUpload(file: UploadFile) {
+  fileList.value = [...(fileList.value || []), file];
+
+  return false;
+}
+
+
+//导入
+async function onImportStocks() {
+  if (fileList.value.length === 0) {
+    return message.error('请选择文件');
+  }
+  const formData = new FormData();
+  fileList.value.forEach((file: UploadFile) => {
+    formData.append('file', file.originFileObj!);
+  });
+
+  SmartLoading.show();
+  try {
+    const response = await stockApi.importStocks(formData);
+    const {success} = JSON.parse(response.msg);
+    message.success(success);
+    importModalShowFlag.value = false;
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+//导出
+function onExportStocks() {
+  stockApi.exportStocks();
+}
+</script>