仓储物流：库存管理 下载模板，导入库存

huminmin

2 天以前 d7e004728d697056aa093e29534b07def1ad66bc

仓储物流：库存管理 下载模板，导入库存

 src/views/inventoryManagement/stockManagement/Import.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,86 @@
<template>
  <el-dialog  v-model="isShow" title="导入库存" @close="closeModal">
    <FileUpload
      ref="fileUploadRef"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :action="upload.url"
      :disabled="upload.isUploading"
      :showTip="false"
      @success="handleFileSuccess"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
        <el-button @click="closeModal">取 æ¶ˆ</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {computed, reactive} from "vue";
import { getToken } from "@/utils/auth.js";
import { FileUpload } from "@/components/Upload";
import { ElMessage } from "element-plus";

defineOptions({
  name: "导入库存",
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },

  type: {
    type: String,
    required: true,
    default: 'qualified',
  },
});

const emit = defineEmits(['update:visible', 'uploadSuccess']);


const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});

const fileUploadRef = ref();
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（库存导入）
  open: false,
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/stockInventory/importStockInventory",
});

const submitFileForm = () => {
  fileUploadRef.value.uploadApi();
};

const handleFileSuccess = (response) => {
  const { code, msg } = response;
  if (code == 200) {
    ElMessage({ message: "导入成功", type: "success" });
    emit('uploadSuccess');
    closeModal();
  } else {
    ElMessage({ message: msg, type: "error" });
  }
};

const closeModal = () => {
  isShow.value = false;
};
</script>

 src/views/inventoryManagement/stockManagement/Qualified.vue

@@ -11,6 +11,10 @@
      </div>
      <div>
         <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button>
        <el-button @click="importTemplate">下载导入模板</el-button>
        <el-button type="info" plain icon="Upload" @click="isShowImportModal = true">
          å¯¼å…¥åº“å­˜
        </el-button>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
@@ -45,17 +49,22 @@
                 v-model:visible="isShowSubtractModal"
                 :record="record"
                 @completed="handleQuery" />
    <!-- å¯¼å…¥åº“å­˜-->
    <import-stock-inventory v-if="isShowImportModal"
                 v-model:visible="isShowImportModal"
                 type="qualified"
                 @uploadSuccess="handleQuery" />
  </div>
</template>

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { ElMessageBox } from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import { getStockInventoryListPage } from "@/api/inventoryManagement/stockInventory.js";
const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue"));
const SubtractStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Subtract.vue"));

const ImportStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Import.vue"));
const { proxy } = getCurrentInstance()
const tableData = ref([])
const selectedRows = ref([])
@@ -70,6 +79,8 @@
const isShowNewModal = ref(false)
// æ˜¯å¦æ˜¾ç¤ºé¢†ç”¨å¼¹æ¡†
const isShowSubtractModal = ref(false)
// æ˜¯å¦æ˜¾ç¤ºå¯¼å…¥å¼¹æ¡†
const isShowImportModal = ref(false)
const data = reactive({
  searchForm: {
    productName: '',
@@ -100,6 +111,17 @@
    tableLoading.value = false
  })
}

const handleFileSuccess = (response) => {
  const { code, msg } = response;
  if (code == 200) {
    ElMessage({ message: "导入成功", type: "success" });
    upload.open = false;
    emits("uploadSuccess");
  } else {
    ElMessage({ message: msg, type: "error" });
  }
};

// ç‚¹å‡»é¢†ç”¨
const showSubtractModal = (row) => {
@@ -141,6 +163,10 @@
  })
}

const importTemplate =() =>{
  proxy.download("/stockInventory/downloadStockInventory", {}, "库存导入模板.xlsx");
}

onMounted(() => {
  getList()
})