From 3ebd45a40b4aaa64938a01a14b194ece57843abc Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Fri, 24 Nov 2023 22:35:56 +0800
Subject: [PATCH] new: add other storage views

---
 .../components/AddEditOtherStorageModal.vue   | 637 ++++++++++++++++++
 .../components/ViewOtherStorageModal.vue      | 128 ++++
 web/src/views/warehouse/storage/index.vue     | 201 ++++++
 3 files changed, 966 insertions(+)
 create mode 100644 web/src/views/warehouse/storage/components/AddEditOtherStorageModal.vue
 create mode 100644 web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue
 create mode 100644 web/src/views/warehouse/storage/index.vue

diff --git a/web/src/views/warehouse/storage/components/AddEditOtherStorageModal.vue b/web/src/views/warehouse/storage/components/AddEditOtherStorageModal.vue
new file mode 100644
index 00000000..9449473a
--- /dev/null
+++ b/web/src/views/warehouse/storage/components/AddEditOtherStorageModal.vue
@@ -0,0 +1,637 @@
+<template>
+  <a-modal
+      :title="title"
+      :width="width"
+      :confirm-loading="confirmLoading"
+      :forceRender="true"
+      :keyboard="true"
+      switchHelp
+      switchFullscreen
+      @cancel="handleCancelModal"
+      v-model:open="open"
+      style="left: 5%; height: 95%;">
+    <template #footer>
+      <a-button @click="handleCancelModal">取消</a-button>
+      <a-button v-if="checkFlag" :loading="confirmLoading" @click="handleOk(1)">保存并审核</a-button>
+      <a-button type="primary" :loading="confirmLoading" @click="handleOk(0)">保存</a-button>
+      <!--发起多级审核-->
+      <a-button v-if="!checkFlag" @click="" type="primary">提交流程</a-button>
+    </template>
+    <a-spin :spinning="confirmLoading">
+      <a-form ref="formRef" :model="otherStorageFormState" style="margin-top: 20px; margin-right: 20px; margin-left: 20px; margin-bottom: -150px">
+        <a-row class="form-row" :gutter="24">
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-input v-model:value="otherStorageFormState.id" v-show="false"/>
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="供应商" data-step="1"
+                         data-title="供应商" :rules="[{ required: true}]">
+              <a-select v-model:value="otherStorageFormState.supplierId"
+                        :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children"
+                        placeholder="请选择供应商"
+                        :options="supplierList.map(item => ({ value: item.id, label: item.supplierName }))">
+                <template #dropdownRender="{ menuNode: menu }">
+                  <v-nodes :vnodes="menu"/>
+                  <a-divider style="margin: 4px 0"/>
+                  <div style="padding: 4px 8px; cursor: pointer;"
+                       @mousedown="e => e.preventDefault()" @click="addSupplier">
+                    <plus-outlined/>
+                    新增供应商
+                  </div>
+                </template>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据日期" :rules="[{ required: true}]">
+              <a-date-picker v-model:value="otherStorageFormState.receiptDate" show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm:ss"/>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="7" :md="12" :sm="24">
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据编号" data-step="2"
+                         data-title="单据编号"
+                         data-intro="单据编号自动生成、自动累加、开头是单据类型的首字母缩写，累加的规则是每次打开页面会自动占用一个新的编号">
+              <a-input placeholder="请输入单据编号" v-model:value="otherStorageFormState.receiptNumber" :readOnly="true"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row class="form-row" :gutter="24">
+          <a-col :lg="24" :md="12" :sm="24" style="margin-bottom: 150px;">
+            <div class="table-operations">
+              <vxe-grid ref='xGrid' v-bind="gridOptions">
+                <template #toolbar_buttons="{ row }">
+                  <a-button v-if="showScanButton" type="primary"  @click="scanEnter" style="margin-right: 10px">扫条码录入数据</a-button>
+                  <a-input v-if="showScanPressEnter" placeholder="鼠标点击此处扫条码" style="width: 150px; margin-right: 10px" v-model:value="barCode"
+                           @pressEnter="scanPressEnter" ref="scanBarCode"/>
+                  <a-button v-if="showScanPressEnter" style="margin-right: 10px" @click="stopScan">收起扫码</a-button>
+                  <a-button @click="productModal" style="margin-right: 10px">选择添加入库商品</a-button>
+                  <a-button @click="deleteRowData" style="margin-right: 10px">删除选中行</a-button>
+                </template>
+                <template #warehouseId_default="{ row }">
+                  <span>{{ formatWarehouseId(row.warehouseId) }}</span>
+                </template>
+                <template #warehouseId_edit="{ row }">
+                  <vxe-select placeholder="请选择仓库" v-model="row.warehouseId">
+                    <vxe-option v-for="item in warehouseList" :key="item.id" :value="item.id" :label="item.warehouseName"></vxe-option>
+                  </vxe-select>
+                </template>
+                <template #barCode_edit="{ row }">
+                  <vxe-input type="search" clearable v-model="row.barCode"></vxe-input>
+                </template>
+                <template #product_number_edit="{ row }">
+                  <vxe-input v-model="row.productNumber" @change="productNumberChange"></vxe-input>
+                </template>
+                <template #price_edit="{ row }">
+                  <vxe-input v-model="row.unitPrice" @change="unitPriceChange"></vxe-input>
+                </template>
+                <template #amount_edit="{ row }">
+                  <vxe-input v-model="row.amount"  @change="amountChange"></vxe-input>
+                </template>
+              </vxe-grid>
+            </div>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="24" :md="24" :sm="24">
+                <a-form-item :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 24 }}" label="">
+                  <a-textarea :rows="3" placeholder="请输入备注" v-model:value="otherStorageFormState.remark"
+                              style="margin-top:8px;"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="6" :md="12" :sm="24">
+                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="附件" data-step="9"
+                             data-title="附件"
+                             data-intro="可以上传与单据相关的图片、文档，支持多个文件">
+                  <a-upload
+                      v-model:file-list="fileList"
+                      :custom-request="uploadFiles"
+                      :before-upload="beforeUpload"
+                      multiple>
+                    <a-button>
+                      <upload-outlined/>
+                      点击上传附件
+                    </a-button>
+                  </a-upload>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+  <SupplierModal @register="supplierModal"/>
+  <SelectProductModal @register="selectProductModal" @handleCheckSuccess="handleCheckSuccess"/>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, h} from 'vue';
+import {AccountBookTwoTone, PlusOutlined, UploadOutlined} from '@ant-design/icons-vue';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import {
+  Textarea,
+  DatePicker,
+  Button,
+  Checkbox,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Modal,
+  Row,
+  Select,
+  SelectOption,
+  Spin,
+  Table,
+  TabPane,
+  Tabs,
+  Tooltip,
+  TreeSelect,
+  Upload,
+} from "ant-design-vue";
+import {
+  otherStorageFormState,
+  xGrid,
+  tableData,
+  gridOptions,
+} from '/@/views/warehouse/storage/addEditOtherStorage.data';
+import {useModal} from "@/components/Modal";
+import {generateId, uploadOss} from "@/api/basic/common";
+import {VXETable, VxeGrid, VxeInput, VxeButton, VxeSelect, VxeOption} from 'vxe-table'
+import {useMessage} from "@/hooks/web/useMessage";
+import { addOrUpdateOtherStorage, getOtherStorageDetailById} from "@/api/warehouse/storage"
+import {getSupplierList} from "@/api/basic/supplier";
+import SupplierModal from "@/views/basic/supplier/components/SupplierModal.vue";
+import PurchaseArrearsModal from "@/views/financial/payment/components/PurchaseArrearsModal.vue"
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+import {SupplierResp} from "@/api/basic/model/supplierModel";
+import {WarehouseResp} from "@/api/basic/model/warehouseModel";
+import {getDefaultWarehouse, getWarehouseList} from "@/api/basic/warehouse";
+import {getProductSkuByBarCode} from "@/api/product/product";
+import SelectProductModal from "@/views/product/info/components/SelectProductModal.vue";
+const VNodes = {
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    return this.vnodes;
+  },
+};
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.locale('zh-cn');
+export default defineComponent({
+  name: 'AddEditPaymentModal',
+  emits: ['success', 'cancel', 'error'],
+  components: {
+    SupplierModal,
+    SelectProductModal,
+    'a-modal': Modal,
+    'a-upload': Upload,
+    'a-button': Button,
+    'a-spin': Spin,
+    'a-row': Row,
+    'a-col': Col,
+    'a-form': Form,
+    'a-form-item': FormItem,
+    'a-input': Input,
+    'a-input-number': InputNumber,
+    'a-select': Select,
+    'a-select-option': SelectOption,
+    'a-tree-select': TreeSelect,
+    'a-checkbox': Checkbox,
+    'a-tooltip': Tooltip,
+    'a-tabs': Tabs,
+    'a-tab-pane': TabPane,
+    'a-table': Table,
+    'v-nodes': VNodes,
+    'a-textarea': Textarea,
+    'a-date-picker': DatePicker,
+    'vxe-table': VXETable,
+    'vxe-grid': VxeGrid,
+    'vxe-input': VxeInput,
+    'vxe-select': VxeSelect,
+    'vxe-option': VxeOption,
+    'vxe-button': VxeButton,
+    'plus-outlined': PlusOutlined,
+    'upload-outlined': UploadOutlined,
+  },
+  setup(_, context) {
+    const [supplierModal, {openModal}] = useModal();
+    const [selectProductModal, {openModal: openProductModal}] = useModal();
+    const {createMessage} = useMessage();
+    const confirmLoading = ref<boolean>(false);
+    const open = ref<boolean>(false);
+    const checkFlag = ref<boolean>(true);
+    const showScanButton = ref(true);
+    const showScanPressEnter = ref(false);
+    const title = ref<string>("操作");
+    const width = ref('1200px');
+    const addDefaultRowNum = ref(1);
+    const fileList = ref<any[]>([]);
+    const minWidth = ref(1200);
+    const model = ref({});
+    const labelCol = ref({
+      xs: {span: 24},
+      sm: {span: 8},
+    });
+    const wrapperCol = ref({
+      xs: {span: 24},
+      sm: {span: 16},
+    });
+    const barCode = ref('');
+    const supplierList = ref<SupplierResp[]>([]);
+    const warehouseList = ref<WarehouseResp[]>([]);
+
+    function handleCancelModal() {
+      close();
+      clearData();
+      open.value = false;
+      context.emit('cancel');
+    }
+
+    function openAddEditModal(id: string | undefined) {
+      open.value = true
+      loadSupplierList();
+      loadWarehouseList();
+      loadDefaultWarehouse();
+      if (id) {
+        title.value = '编辑-其他入库'
+        loadOtherStorageDetail(id);
+      } else {
+        title.value = '新增-其他入库'
+        loadGenerateId();
+        otherStorageFormState.receiptDate = dayjs(new Date());
+      }
+    }
+
+    function loadDefaultWarehouse() {
+      getDefaultWarehouse().then(res => {
+        const data = res.data
+        if(data) {
+          otherStorageFormState.warehouseId = data.id
+        }
+      })
+    }
+
+    function loadSupplierList() {
+      getSupplierList().then(res => {
+        supplierList.value = res.data
+      })
+    }
+
+    function loadWarehouseList() {
+      getWarehouseList().then(res => {
+        warehouseList.value = res.data
+      })
+    }
+
+    function loadGenerateId() {
+      generateId("其他入库").then(res => {
+        otherStorageFormState.receiptNumber = res.data
+      })
+    }
+
+    async function loadOtherStorageDetail(id) {
+      clearData();
+      const result = await getOtherStorageDetailById(id)
+      if(result) {
+        const data = result.data
+        otherStorageFormState.id = data.id
+        otherStorageFormState.supplierId = data.supplierId
+        otherStorageFormState.receiptDate = dayjs(data.receiptDate);
+        otherStorageFormState.receiptNumber = data.receiptNumber
+        otherStorageFormState.remark = data.remark
+        // file
+        fileList.value = data.files.map(item => ({
+          id: item.id,
+          uid: item.uid,
+          name: item.fileName,
+          status: 'done',
+          url: item.fileUrl,
+          type: item.fileType,
+          size: item.fileSize,
+        }))
+
+        // table
+        const table = xGrid.value
+        if(table) {
+          data.tableData.forEach(item => {
+            const tableData : any = {
+              warehouseId: item.warehouseId,
+              productId: item.productId,
+              barCode: item.barCode,
+              productName: item.productName,
+              productStandard: item.productStandard,
+              stock: item.stock,
+              productUnit: item.productUnit,
+              productNumber: item.productNumber,
+              unitPrice: item.unitPrice,
+              amount: item.amount,
+              remark: item.remark,
+            };
+            table.insert(tableData)
+          })
+        }
+      }
+    }
+
+    async function handleOk(type: number) {
+      if (!otherStorageFormState.supplierId) {
+        createMessage.error('请选择供应商');
+        return;
+      }
+      if (!otherStorageFormState.receiptDate) {
+        createMessage.error('请选择单据日期');
+        return;
+      }
+      const table = xGrid.value
+      if(table) {
+        const insertRecords = table.getInsertRecords()
+        if(insertRecords.length === 0) {
+          createMessage.error("请添加一行数据")
+          return;
+        }
+      }
+
+      const files :any = [];
+      if (fileList && fileList.value) {
+        for (let i = 0; i < fileList.value.length; i++) {
+          if (fileList.value[i].url) {
+            const file = {
+              uid: fileList.value[i].uid,
+              fileType: fileList.value[i].type,
+              fileName: fileList.value[i].name,
+              fileUrl: fileList.value[i].url || null,
+              fileSize: fileList.value[i].size,
+            }
+            files.push(file)
+          } else {
+            const file = {
+              uid: fileList.value[i].uid,
+              fileType: fileList.value[i].type,
+              fileName: fileList.value[i].name,
+              fileUrl: fileList.value[i].response.data[0] as string,
+              fileSize: fileList.value[i].size,
+            }
+            files.push(file)
+          }
+        }
+      }
+
+      const dataArray: any = []
+      table?.getInsertRecords().forEach(item => {
+        const data: any = {
+          warehouseId: item.warehouseId,
+          productId: item.productId,
+          barCode: item.barCode,
+          productName: item.productName,
+          productStandard: item.productStandard,
+          stock: item.stock,
+          productUnit: item.productUnit,
+          productNumber: item.productNumber,
+          unitPrice: item.unitPrice,
+          amount: item.amount,
+          remark: item.remark,
+        }
+        dataArray.push(data)
+      })
+      const params: any = {
+        ...otherStorageFormState,
+        tableData: dataArray,
+        files: files,
+        status: type,
+      }
+      console.info(params)
+      const result = await addOrUpdateOtherStorage(params)
+      if (result.code === 'P0024' || 'P0025') {
+        createMessage.success('操作成功');
+        handleCancelModal();
+        clearData();
+
+      } else {
+        createMessage.error('操作失败');
+      }
+      clearData();
+    }
+
+    function clearData() {
+      otherStorageFormState.id = undefined
+      otherStorageFormState.receiptNumber = ''
+      otherStorageFormState.supplierId = undefined
+      otherStorageFormState.remark = ''
+      otherStorageFormState.receiptDate = undefined
+      fileList.value = []
+      const table = xGrid.value
+      if(table) {
+        table.remove()
+      }
+    }
+
+    function beforeUpload(file: any) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        createMessage.error(`${file.name}，该文件超过2MB大小限制`);
+        return isLt2M || Upload.LIST_IGNORE
+      }
+    }
+
+    const uploadFiles = (options) => {
+      const { file, onSuccess, onError, onProgress } = options;
+      const formData = new FormData();
+      formData.append('files', file);
+      // 调用 uploadOss 方法进行上传
+      uploadOss(formData, {
+        onUploadProgress: ({total, loaded}) => {
+          onProgress(
+              {percent: Math.round((loaded / total) * 100).toFixed(2)},
+              file
+          );
+        },
+      }).then((res) => {
+        onSuccess(res, file);
+      }).catch((error) => {
+        onError(error);
+      });
+    }
+
+    function addSupplier() {
+      openModal(true, {
+        isUpdate: false,
+      });
+    }
+
+    async function deleteRowData() {
+      const type = await VXETable.modal.confirm('确定要删除选中的数据?')
+      const table = xGrid.value
+      const selectRow = table?.getCheckboxRecords()
+      if (table) {
+        if (type === 'confirm') {
+          await table.remove(selectRow)
+        }
+      }
+    }
+
+    const formatWarehouseId = (value: string) => {
+      const item = warehouseList.value.find(item => item.id === value)
+      if(item) {
+        return item.warehouseName
+      }
+    }
+
+    function scanEnter() {
+      showScanButton.value = !showScanButton.value;
+      showScanPressEnter.value = !showScanPressEnter.value;
+    }
+
+    function stopScan() {
+      showScanButton.value = !showScanButton.value;
+      showScanPressEnter.value = !showScanPressEnter.value;
+    }
+
+    function scanPressEnter() {
+      getProductSkuByBarCode(barCode.value, otherStorageFormState.warehouseId).then(res => {
+        const {columns} = gridOptions
+        if (columns) {
+          const {data} = res
+          if (data) {
+            const storageData : any = data
+            const table = xGrid.value
+            console.info(storageData)
+            if (table) {
+              const tableData = table.getTableData().tableData
+              const index = tableData.findIndex(item => item.barCode === storageData.barCode)
+              if (index > -1) {
+                const row = tableData[index]
+                row.productNumber = Number(row.productNumber) + 1
+                row.amount = row.productNumber * row.unitPrice
+                row.amount = Number(row.amount.toFixed(2))
+                table.updateData()
+              } else {
+                const tableData : any = {
+                  warehouseId: storageData.warehouseId,
+                  productId: storageData.productId,
+                  barCode: storageData.barCode,
+                  productName: storageData.productName,
+                  productStandard: storageData.productStandard,
+                  productUnit: storageData.productUnit,
+                  stock: storageData.stock,
+                  productNumber: 1,
+                  amount: storageData.retailPrice,
+                  unitPrice: storageData.retailPrice,
+                };
+                table.insert(tableData)
+              }
+            }
+          }
+        }
+      })
+      // 清除扫码框的值
+      barCode.value = ''
+    }
+
+    function handleCheckSuccess(data) {
+      const table = xGrid.value
+      if(table) {
+        data = data.map(item => {
+          item.unitPrice = item.retailPrice
+          item.productNumber = 1
+          item.amount = item.retailPrice * item.productNumber
+          return item
+        })
+        table.insert(data)
+      }
+    }
+
+
+    function productModal() {
+      openProductModal(true, {
+        isUpdate: false,
+      });
+    }
+
+    function productNumberChange() {
+      const table = xGrid.value
+      if(table) {
+        const data = table.getEditRecord().row;
+        data.amount = data.productNumber * data.unitPrice
+        data.amount = Number(data.amount.toFixed(2))
+        table.updateData()
+      }
+    }
+
+    function unitPriceChange() {
+      const table = xGrid.value
+      if(table) {
+        const data = table.getEditRecord().row;
+        data.amount = data.unitPrice * data.productNumber
+        data.amount = Number(data.amount.toFixed(2))
+        table.updateData()
+      }
+    }
+
+    function amountChange() {
+      const table = xGrid.value
+      if(table) {
+        const data = table.getEditRecord().row;
+        data.unitPrice = data.amount / data.productNumber
+        data.unitPrice = Number(data.unitPrice.toFixed(2))
+        table.updateData()
+      }
+    }
+
+    return {
+      h,
+      AccountBookTwoTone,
+      open,
+      checkFlag,
+      confirmLoading,
+      handleCancelModal,
+      openAddEditModal,
+      otherStorageFormState,
+      title,
+      width,
+      barCode,
+      showScanButton,
+      showScanPressEnter,
+      scanEnter,
+      stopScan,
+      scanPressEnter,
+      addDefaultRowNum,
+      fileList,
+      minWidth,
+      model,
+      labelCol,
+      wrapperCol,
+      supplierList,
+      handleOk,
+      beforeUpload,
+      uploadFiles,
+      gridOptions,
+      xGrid,
+      tableData,
+      deleteRowData,
+      supplierModal,
+      addSupplier,
+      PurchaseArrearsModal,
+      warehouseList,
+      formatWarehouseId,
+      selectProductModal,
+      productModal,
+      handleCheckSuccess,
+      productNumberChange,
+      unitPriceChange,
+      amountChange
+    };
+  },
+});
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue b/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue
new file mode 100644
index 00000000..a69f2c77
--- /dev/null
+++ b/web/src/views/warehouse/storage/components/ViewOtherStorageModal.vue
@@ -0,0 +1,128 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <div class="components-page-header-demo-responsive" style="border: 1px solid rgb(235, 237, 240)">
+      <a-page-header
+          title="销售出库-详情"
+          :sub-title= "receiptNumber">
+        <template #extra>
+          <a-button key="1">导出</a-button>
+          <a-button key="1">普通打印</a-button>
+          <a-button key="1">三联打印</a-button>
+          <a-button key="2" type="primary">发起流程审批</a-button>
+        </template>
+        <a-descriptions size="small" :column="3">
+          <a-descriptions-item label="供应商">{{ supplierName }}</a-descriptions-item>
+          <a-descriptions-item label="单据日期">{{ receiptDate }}</a-descriptions-item>
+          <a-descriptions-item ></a-descriptions-item>
+          <a-descriptions-item label="备注">
+            {{ remark }}
+          </a-descriptions-item>
+        </a-descriptions>
+        <div class="extra">
+          <div
+              class="descriptions-context"
+              :style="{
+              display: 'flex',
+              width: 'max-content',
+              justifyContent: 'flex-end',
+            }"
+          >
+            <a-statistic
+                title="单据状态"
+                :value="status === 1 ? '已审核' : '未审核'"
+                :value-style="status === 1 ? { color: '#3f8600' } : { color: '#cf1322' }"
+                :style="{
+                marginRight: '32px',
+                color: 'green',
+              }"
+            />
+          </div>
+        </div>
+      </a-page-header>
+      <BasicTable @register="registerTable">
+      </BasicTable>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {BasicTable, useTable} from '/src/components/Table';
+import {BasicModal, useModal, useModalInner} from "@/components/Modal";
+import {getOtherStorageDetailById} from "@/api/warehouse/storage";
+import {otherStorageTableColumns} from "@/views/warehouse/storage/otherStorage.data";
+import {
+  Descriptions,
+  DescriptionsItem,
+  PageHeader,
+  Statistic,
+} from 'ant-design-vue';
+
+export default defineComponent({
+  name: 'ViewOtherStorageModal',
+  components: {
+    BasicModal,
+    BasicTable,
+    'a-page-header': PageHeader,
+    'a-descriptions': Descriptions,
+    'a-descriptions-item': DescriptionsItem,
+    'a-statistic': Statistic,
+  },
+  setup() {
+    const receiptNumber = ref('');
+    const otherReceipt = ref('');
+    const receiptDate = ref('');
+    const supplierName = ref('');
+    const remark = ref('')
+    const status = ref();
+    const [viewOrderReceiptModal, {openModal: openViewOrderModal}] = useModal();
+    const tableData = ref([]);
+    const [registerTable] = useTable({
+      title: '其他入库表数据',
+      columns: otherStorageTableColumns,
+      dataSource: tableData,
+      pagination: false,
+      showIndexColumn: false,
+      bordered: true,
+    });
+    const getTitle = ref('单据详情');
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+      setModalProps({confirmLoading: false, destroyOnClose: true, width: 1200, showOkBtn: false});
+      const res = await getOtherStorageDetailById(data.id);
+      tableData.value = res.data.tableData;
+      receiptNumber.value = res.data.receiptNumber;
+      supplierName.value = res.data.supplierName;
+      receiptDate.value = res.data.receiptDate;
+      remark.value = res.data.remark;
+      status.value = res.data.status;
+    });
+
+    function viewOrderReceipt() {
+      closeModal();
+      openViewOrderModal(true, {
+        receiptNumber: otherReceipt.value
+      });
+    }
+
+    function handleSubmit() {
+      closeModal();
+    }
+
+    return {
+      receiptNumber,
+      supplierName,
+      receiptDate,
+      remark,
+      status,
+      registerTable,
+      registerModal,
+      getTitle,
+      handleSubmit,
+      viewOrderReceiptModal,
+      viewOrderReceipt
+    };
+  },
+});
+</script>
+<style scoped>
+
+</style>
diff --git a/web/src/views/warehouse/storage/index.vue b/web/src/views/warehouse/storage/index.vue
new file mode 100644
index 00000000..ffabdccb
--- /dev/null
+++ b/web/src/views/warehouse/storage/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增</a-button>
+        <a-button type="primary" @click="handleBatchDelete"> 批量删除</a-button>
+        <a-button type="primary" @click="handleExport"> 导出</a-button>
+        <a-button type="primary" @click="handleOnStatus(1)"> 审核</a-button>
+        <a-button type="primary" @click="handleOnStatus(0)"> 反审核</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+              :actions="[
+              {
+                icon: 'clarity:info-standard-line',
+                tooltip: '查看单据详情',
+                onClick: handleView.bind(null, record),
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <Tag :color="record.status === 1 ? 'green' : 'red'">
+            {{ record.status === 1 ? '已审核' : '未审核' }}
+          </Tag>
+        </template>
+      </template>
+    </BasicTable>
+    <AddEditOtherStorageModal ref="addEditModalRef" @cancel="handleCancel" />
+    <ViewOtherStorageModal @register="receiptViewModal" @ok="handleOk"/>
+  </div>
+</template>
+<div>
+</div>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {useMessage} from "@/hooks/web/useMessage";
+import {columns, searchFormSchema} from "@/views//warehouse/storage/otherStorage.data";
+import {exportXlsx} from "@/api/basic/common";
+import {useI18n} from "vue-i18n";
+import {getOtherStoragePageList, deleteBatchOtherStorage, updateOtherStorageStatus} from "@/api/warehouse/storage";
+import AddEditOtherStorageModal from "@/views/warehouse/storage/components/AddEditOtherStorageModal.vue"
+import ViewOtherStorageModal from "@/views/warehouse/storage/components/ViewOtherStorageModal.vue";
+import {Tag} from "ant-design-vue";
+import {useModal} from "@/components/Modal";
+export default defineComponent({
+  name: 'OtherStorage',
+  components: {Tag, TableAction, BasicTable, AddEditOtherStorageModal, ViewOtherStorageModal},
+  setup() {
+    const { t } = useI18n();
+    const { createMessage } = useMessage();
+    const addEditModalRef = ref(null);
+    const [receiptViewModal, {openModal: openReceiptViewModal}] = useModal();
+    const [registerTable, { reload, getSelectRows }] = useTable({
+      title: '其他入库列表',
+      rowKey: 'id',
+      api: getOtherStoragePageList,
+      columns: columns,
+      rowSelection: {
+        type: 'checkbox',
+      },
+      formConfig: {
+        labelWidth: 110,
+        schemas: searchFormSchema,
+      },
+      bordered: true,
+      tableSetting: { fullScreen: true },
+      useSearchForm: true,
+      clickToRowSelect: false,
+      showTableSetting: true,
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: undefined,
+      },
+    });
+
+    function handleCreate() {
+      addEditModalRef.value.openAddEditModal();
+    }
+
+    async function handleBatchDelete() {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+      const ids = data.map((item) => item.id);
+      const result = await deleteBatchOtherStorage(ids);
+      if (result.code === 'S0018') {
+        await reload();
+      }
+    }
+
+    function handleEdit(record: Recordable) {
+      if (record.status === 1) {
+        createMessage.warn('抱歉，只有未审核的单据才能编辑！');
+        return;
+      }
+      addEditModalRef.value.openAddEditModal(record.id);
+    }
+
+    async function handleDelete(record: Recordable) {
+      const result = await deleteBatchOtherStorage([record.id]);
+      if (result.code === 'S0018') {
+        await reload();
+      }
+    }
+
+    async function handleSuccess() {
+      await reload();
+    }
+
+    async function handleCancel() {
+      await reload();
+    }
+
+    async function handleOk() {
+      await reload();
+    }
+
+    function handleView(record: Recordable){
+      openReceiptViewModal(true, {
+        isUpdate: false,
+        id: record.id,
+      });
+    }
+
+    const getTimestamp = (date) => {
+      return (
+          date.getFullYear() * 10000000000 +
+          (date.getMonth() + 1) * 100000000 +
+          date.getDate() * 1000000 +
+          date.getHours() * 10000 +
+          date.getMinutes() * 100 +
+          date.getSeconds()
+      ).toString();
+    };
+
+    async function handleOnStatus(newStatus: number) {
+      const data = getSelectRows();
+      if (data.length === 0) {
+        createMessage.warn('请选择一条数据');
+        return;
+      }
+
+      const ids = data.map((item) => item.id);
+      const {code} = await updateOtherStorageStatus(ids, newStatus);
+      if (code === "S0017") {
+        await reload();
+      }
+    }
+
+    async function handleExport() {
+      const file = await exportXlsx("其他入库列表")
+      const blob = new Blob([file]);
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      const timestamp = getTimestamp(new Date());
+      link.download = "其他入库数据" + timestamp + ".xlsx";
+      link.target = "_blank";
+      link.click();
+    }
+
+
+    return {
+      t,
+      receiptViewModal,
+      addEditModalRef,
+      registerTable,
+      handleCreate,
+      handleDelete,
+      handleBatchDelete,
+      handleEdit,
+      handleSuccess,
+      handleOnStatus,
+      handleCancel,
+      handleView,
+      handleOk,
+      handleExport,
+    }
+  }
+})
+</script>
\ No newline at end of file