baozhida_erp/src/views/storehouse/ValidationTool/validation.vue

<script setup lang="ts">
import {
  exportFile,
  readvaildation,
  Storehouse_ProductClass_List,
  updatevaildation,
  uploadFile,
  validation_add,
  validation_del,
  validation_List,
  validation_update
} from '@/api/storehouse'
import TableBase from '@/components/TableBase/index.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { GlobalStore } from '@/stores'
import type { ColumnProps } from '@/components/TableBase/interface'
import { Delete, Edit } from '@element-plus/icons-vue'
import type { FormInstance, UploadInstance } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'

const uploadRef = ref<UploadInstance>()
const uploadFiles = ref<File[]>([]) // 新增：用于存储上传的文件

const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  Validationnumber: '',
  T_state: '',
  T_sn: '',
  T_imei: '',
  T_iccid: '',
  LendUser: '',
  T_project: '',
  T_class: ''
})
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'Validationnumber', label: '设备编号', ellipsis: true },
  { prop: 'T_sn', label: '设备SN', ellipsis: true },
  { prop: 'T_imei', label: '模组imei', ellipsis: true },
  { prop: 'T_iccid', label: '物联网卡号', ellipsis: true },
  { prop: 'T_state', label: '状态', name: 'T_state' },
  { prop: 'T_class', label: '设备类型', name: 'T_class' },
  { prop: 'LendUser', label: '借出人', ellipsis: true },
  { prop: 'T_project', label: '借出项目', ellipsis: true },
  { prop: 'T_remark', label: '备注', name: 'T_remark', ellipsis: true },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]
// 搜索
const options = reactive([
  { name: '已出库', id: 1 },
  { name: '未出库', id: 2 },
  { name: '已损坏', id: 3 }
])
const searchHandle = () => {
  TableRef.value?.searchTable()
}
/**
 * 删除
 */
const deleteFun = (row: any) => {
  ElMessageBox.confirm('删除操作，是否立即删除?', '删除', {
    confirmButtonText: '立即删除',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  })
    .then(async () => {
      const result: any = await validation_del({ t_sn: row })
      if (result.Code == 200) {
        ElMessage.success('删除成功')
        TableRef.value?.searchTable()
      }
    })
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    .catch(() => {})
}
//导出文件execl
const exportExecl = async () => {
  try {
    const response: any = await exportFile({
      User_tokey: globalStore.GET_User_tokey,
      Validationnumber: initParam.Validationnumber,
      T_state: initParam.T_state,
      T_sn: initParam.T_sn,
      T_imei: initParam.T_imei,
      T_iccid: initParam.T_iccid,
      LendUser: initParam.LendUser,
      T_project: initParam.T_project,
      T_class: initParam.T_class
    })
    // 处理返回的二进制文件并触发下载
    const blob = new Blob([response], { type: 'application/vnd.ms-excel;charset=utf8' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'filename.xlsx' // 设置下载的文件名
    document.body.appendChild(a)
    a.click()
    a.remove()
    window.URL.revokeObjectURL(url)
    ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出失败，请检查网络连接')
  }
}

const showInStorageForm = ref(false)
const showrRepaidForm = ref(false)

const inStorageFormRef = ref<FormInstance | null>(null)
const inStorageForm = reactive({
  T_sn: '',
  Validationnumber: '',
  T_remark: '',
  T_class: ''
})

interface InStorageItem {
  T_sn: string
  Validationnumber: string
  T_remark: string
}

// 获取产品分类
const Pruductoptions = ref<any[]>([
  {
    Id: '',
    T_name: ''
  }
])
const getProductClassList = async () => {
  const res: any = await Storehouse_ProductClass_List({ page: 1, page_z: 999 })
  Pruductoptions.value = res.Data.Data
}

const pendingItems = ref<InStorageItem[]>([])
const pageSize = ref(8)
const currentPage = ref(1)

const paginatedPendingItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return pendingItems.value.slice(start, end)
})
const rules = reactive({
  T_sn: [{ required: true, message: '请输入SN', trigger: 'blur' }],
  Validationnumber: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  T_class: [{ required: true, message: '请选择产品分类', trigger: 'blur' }]
})
const rulesrepaid = reactive({
  T_sn: [{ required: true, message: '请输入SN', trigger: 'blur' }]
})

const extractSN = (fullSN: string): string => {
  if (fullSN.length === 24 && fullSN.startsWith('03') && fullSN.endsWith('000001')) {
    return fullSN.substring(2, 18)
  }
  return fullSN
}

const submitInStorageForm = () => {
  inStorageFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      const extractedSN = extractSN(inStorageForm.T_sn)
      if (pendingItems.value.some((item: any) => item.T_sn === extractedSN)) {
        ElMessage.warning('已存在相同的SN，不能添加')
        return
      }
      pendingItems.value.unshift({ ...inStorageForm, T_sn: extractedSN })
      inStorageForm.T_sn = ''
      inStorageForm.Validationnumber = ''
      inStorageForm.T_remark = ''
      ElMessage.success('已添加到待提交列表')
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance('添加成功')
        window.speechSynthesis.speak(utterance)
      } else {
        console.warn('Web Speech API 不被支持')
      }
    }
  })
}
const submitRepaidForm = () => {
  inStorageFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const extractedSN = extractSN(inStorageForm.T_sn)

      if (pendingItems.value.some((item: any) => item.T_sn === extractedSN)) {
        ElMessage.warning('已存在相同的SN，不能添加')
        return
      }
      const result: any = await readvaildation({ sn: extractedSN })
      if (result.Code !== 200) {
        ElMessage.warning('当前SN未入库不能归还')
        return
      }

		pendingItems.value.unshift({ ...inStorageForm, T_sn: extractedSN })

		inStorageForm.T_sn = ''
      inStorageForm.Validationnumber = ''
      inStorageForm.T_remark = ''
      ElMessage.success('已添加到待提交列表')
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance('添加成功')
        window.speechSynthesis.speak(utterance)
      } else {
        console.warn('Web Speech API 不被支持')
      }
    }
  })
}

const removePendingItem = (index: number) => {
  pendingItems.value.splice(index, 1)
  ElMessage.success('已从待提交列表中移除')
}

const submitInStoragePendingItems = async () => {
  if (pendingItems.value.length === 0) {
    ElMessage.warning('暂无数据可提交')
    return
  }

  const rest = JSON.parse(JSON.stringify(pendingItems.value))
  try {
    const result: any = await validation_add(rest)
    if (result.Code === 200) {
      ElMessage.success('提交成功')
      pendingItems.value = []
      inStorageForm.T_sn = ''
      inStorageForm.Validationnumber = ''
      inStorageForm.T_remark = ''
      searchHandle()
    } else {
      ElMessage.error('提交失败')
    }
  } catch (error) {
    ElMessage.error('提交失败，请检查网络连接')
  }
}
const handlePageChange = (page: number) => {
  currentPage.value = page
}

const showLendForm = ref(false)
const lendFormRef = ref<FormInstance | null>(null)
const lendForm = reactive({
  T_sn: '',
  Validationnumber: '',
  T_remark: '',
  LendUser: '',
  T_project: ''
})

interface LendItem {
  T_sn: string
  Validationnumber: string
  T_remark: string
  LendUser: string
  T_project: string
}

const pendingLendItems = ref<LendItem[]>([])
const lendPageSize = ref(8)
const lendCurrentPage = ref(1)

const paginatedPendingLendItems = computed(() => {
  const start = (lendCurrentPage.value - 1) * lendPageSize.value
  const end = start + lendPageSize.value
  return pendingLendItems.value.slice(start, end)
})

const lendRules = reactive({
  T_sn: [{ required: true, message: '请输入SN', trigger: 'blur' }]
})

const submitLendForm = () => {
  lendFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const extractedSN = extractSN(lendForm.T_sn)
      if (pendingLendItems.value.some((item: any) => item.T_sn === extractedSN)) {
        ElMessage.warning('已存在相同的SN，不能添加')
        return
      }
      const result: any = await readvaildation({ sn: extractedSN })
      if (result.Code !== 200) {
        ElMessage.warning('当前SN未入库不能借出')
        return
      }

      pendingLendItems.value.unshift({
        T_sn: extractedSN,
        Validationnumber: lendForm.Validationnumber,
        T_remark: lendForm.T_remark,
        LendUser: lendForm.LendUser,
        T_project: lendForm.T_project
      })
      lendForm.T_sn = ''
      lendForm.T_remark = ''
      ElMessage.success('已添加到待提交列表')
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance('添加成功')
        window.speechSynthesis.speak(utterance)
      } else {
        console.warn('Web Speech API 不被支持')
      }
    } else {
    }
  })
}

const removePendingLendItem = (index: number) => {
  pendingLendItems.value.splice(index, 1)
  ElMessage.success('已从待提交列表中移除')
}

const submitLendPendingItems = async () => {
  if (pendingLendItems.value.length === 0) {
    ElMessage.warning('暂无数据可提交')
    return
  }
  const rest = JSON.parse(JSON.stringify(pendingLendItems.value))

  const result: any = await validation_update(rest)
  if (result.Code == 200) {
    ElMessage.success('提交成功')
    pendingLendItems.value = []
    lendForm.T_sn = ''
    lendForm.T_remark = ''
    lendForm.LendUser = ''
    lendForm.T_project = ''
    searchHandle()
  } else {
    ElMessage.error('提交失败')
  }
}
const handleLendPageChange = (page: number) => {
  lendCurrentPage.value = page
}

const showEditForm = ref(false)
const ImportEdit = ref(false)
const editFormRef = ref<FormInstance | null>(null)
const editForm = reactive({
  T_sn: '',
  Validationnumber: '',
  T_remark: '',
  T_state: '',
  T_class: ''
})

const Repaid = () => {
  submitRepaidForm()
}

const previewEdit = async (row: any) => {
  showEditForm.value = true
  const result: any = await readvaildation({ sn: row.T_sn })
  if (result.Code === 200) {
    Object.assign(editForm, result.Data)
  } else {
    ElMessage.error('获取数据失败')
  }
}

const submitEditForm = () => {
  editFormRef.value?.validate(async (valid: boolean): Promise<void> => {
    if (valid) {
      const result: any = await updatevaildation(editForm)
      if (result.Code === 200) {
        ElMessage.success('编辑成功')
        showEditForm.value = false
        searchHandle()
      } else {
        ElMessage.error('编辑失败')
      }
    } else {
      // do nothing
    }
  })
}

const handleFileChange = (file: any, fileList: any) => {
  uploadFiles.value = fileList.map((item: any) => item.raw) // 新增：更新上传文件列表
}

const submitUpload = async () => {
  if (uploadFiles.value.length === 0) {
    // 修改：使用 uploadFiles.value
    ElMessage.warning('请先选择文件')
    return
  }
  const formData = new FormData()
  uploadFiles.value.forEach((file: File) => {
    // 修改：遍历 uploadFiles.value
    formData.append('excelFile', file)
  })
  const loading = ElLoading.service({
    // 新增：显示加载动画
    lock: true,
    text: '正在上传文件...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  try {
    const result: any = await uploadFile(formData)
    if (result.Code === 200) {
      ElMessage.success('文件上传成功')
      // 处理上传成功后的逻辑
      searchHandle()
      uploadFiles.value = [] // 新增：清除文件上传列表
    } else {
      ElMessage.error('文件上传失败')
    }
  } catch (error) {
    ElMessage.error('文件上传失败，请检查网络连接')
  } finally {
    loading.close() // 新增：关闭加载动画
  }
}

onMounted(() => {
  getProductClassList()
})
</script>
<template>
  <div class="list">
    <TableBase
      ref="TableRef"
      :columns="columns"
      :requestApi="validation_List"
      :initParam="initParam"
      :pagination="true"
    >
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">设备编号：</span>
              <el-input
                v-model="initParam.Validationnumber"
                class="w-50 m-2"
                type="text"
                placeholder="设备编号搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">状态：</span>
              <el-select v-model="initParam.T_state" class="w-50 m-2" clearable placeholder="请选择状态~">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">SN：</span>
              <el-input
                class="w-50 m-2"
                v-model="initParam.T_sn"
                type="text"
                placeholder="按SN搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">产品分类：</span>
              <el-select v-model="initParam.T_class" class="w-50 m-2" clearable placeholder="请选择分类~">
                <el-option v-for="item in Pruductoptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
              </el-select>
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">模组imei：</span>
              <el-input
                class="w-50 m-2"
                v-model="initParam.T_imei"
                type="text"
                placeholder="按模组imei搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">借出人</span>
              <el-input
                class="w-50 m-2"
                v-model="initParam.LendUser"
                type="text"
                placeholder="按借出人搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">借出项目</span>
              <el-input
                class="w-50 m-2"
                v-model="initParam.T_project"
                type="text"
                placeholder="按借出项目搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="3" :lg="3" :md="3">
              <span class="inline-flex items-center">物联网卡号：</span>
              <el-input
                class="w-50 m-2"
                v-model="initParam.T_iccid"
                type="text"
                placeholder="按物联网卡号搜索"
                clearable
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="10" :lg="10" :md="10" style="margin-top: 10px">
              <el-button type="primary" @click="searchHandle">搜索</el-button>
              <el-button type="primary" @click="showInStorageForm = true">入库</el-button>
              <el-button type="primary" @click="showLendForm = true">借出</el-button>
              <el-button type="primary" @click="showrRepaidForm = true">归还</el-button>
              <el-button type="success" @click="ImportEdit = true">模板导入</el-button>
              <el-button type="success" @click="exportExecl">导出</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #T_state="{ row }">
        <el-tag v-if="row.T_state == 1" type="success" effect="dark"> 已出库</el-tag>
        <el-tag v-if="row.T_state == 2" effect="dark">未出库</el-tag>
        <el-tag v-if="row.T_state == 3" effect="dark" type="danger">已损坏</el-tag>
      </template>
      <template #T_class="{ row }">
        <el-tag>{{ Pruductoptions.find(option => option.Id === row.T_class)?.T_name || '' }}</el-tag>
      </template>
      <template #right="{ row }">
        <el-button link type="success" size="small" :icon="Edit" @click="previewEdit(row)">编辑</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="deleteFun(row.T_sn)">删除</el-button>
      </template>
    </TableBase>
  </div>
  <!-- 新增入库表单 -->
  <el-dialog title="入库" v-model="showInStorageForm" width="50%">
    <el-form :model="inStorageForm" :rules="rules" ref="inStorageFormRef">
      <el-form-item label="SN" prop="T_sn">
        <el-input v-model="inStorageForm.T_sn" placeholder="请输入SN"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="Validationnumber">
        <el-input v-model="inStorageForm.Validationnumber" placeholder="请输入设备编号"></el-input>
      </el-form-item>
      <el-form-item label="产品分类" prop="T_class">
        <el-select v-model="inStorageForm.T_class" class="w-50 m-2" clearable placeholder="请选择分类~">
          <el-option v-for="item in Pruductoptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="inStorageForm.T_remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <!-- 新增数据条数提示 -->
    <div style="margin: 10px 0">
      <span>当前待提交数据条数: {{ pendingItems.length }}</span>
    </div>
    <el-table :data="paginatedPendingItems" style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <!-- 添加序号列 -->
      <el-table-column prop="T_sn" label="SN" width="300"></el-table-column>
      <el-table-column prop="Validationnumber" label="设备编号"></el-table-column>
      <el-table-column prop="T_class" label="产品分类"></el-table-column>
      <el-table-column prop="T_remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="danger" size="small" @click="removePendingItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pendingItems.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      style="margin-top: 20px; text-align: right"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showInStorageForm = false">取消</el-button>
        <el-button type="primary" @click="submitInStorageForm">添加到暂存</el-button>
        <!-- 新增提交按钮 -->
        <el-button type="primary" @click="submitInStoragePendingItems">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 新增借出表单 -->
  <el-dialog title="借出" v-model="showLendForm" width="50%">
    <el-form :model="lendForm" :rules="lendRules" ref="lendFormRef">
      <el-form-item label="SN" prop="T_sn">
        <el-input v-model="lendForm.T_sn" placeholder="请输入SN" @keyup.enter="submitLendForm"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="lendForm.T_remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
      <!-- 新增借出人和借出项目 -->
      <el-form-item label="借出人" prop="LendUser">
        <el-input v-model="lendForm.LendUser" placeholder="请输入借出人"></el-input>
      </el-form-item>
      <el-form-item label="借出项目" prop="T_project">
        <el-input v-model="lendForm.T_project" placeholder="请输入借出项目"></el-input>
      </el-form-item>
    </el-form>
    <!-- 新增数据条数提示 -->
    <div style="margin: 10px 0">
      <span>当前待提交数据条数: {{ pendingLendItems.length }}</span>
    </div>
    <el-table :data="paginatedPendingLendItems" style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <!-- 添加序号列 -->
      <el-table-column prop="T_sn" label="SN" width="300"></el-table-column>
      <el-table-column prop="LendUser" label="借出人"></el-table-column>
      <el-table-column prop="T_project" label="借出项目"></el-table-column>
      <el-table-column prop="T_remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="danger" size="small" @click="removePendingLendItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pendingLendItems.length"
      :page-size="lendPageSize"
      :current-page="lendCurrentPage"
      @current-change="handleLendPageChange"
      style="margin-top: 20px; text-align: right"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showLendForm = false">取消</el-button>
        <el-button type="primary" @click="submitLendForm">添加到暂存</el-button>
        <!-- 新增提交按钮 -->
        <el-button type="primary" @click="submitLendPendingItems">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="编辑" v-model="showEditForm" width="50%">
    <el-form :model="editForm" ref="editFormRef">
      <el-form-item label="SN" prop="T_sn">
        <el-input v-model="editForm.T_sn" placeholder="请输入SN"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="Validationnumber">
        <el-input v-model="editForm.Validationnumber" placeholder="请输入设备编号"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="editForm.T_state" class="w-50 m-2" clearable placeholder="请选择状态~">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="editForm.T_class" class="w-50 m-2" clearable placeholder="请选择分类~">
          <el-option v-for="item in Pruductoptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="editForm.T_remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showEditForm = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 新增归还表单 -->
  <el-dialog title="归还" v-model="showrRepaidForm" width="50%">
    <el-form :model="inStorageForm" :rules="rulesrepaid" ref="inStorageFormRef">
      <el-form-item label="SN" prop="T_sn">
        <el-input v-model="inStorageForm.T_sn" placeholder="请输入SN" @keyup.enter="Repaid"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="inStorageForm.T_remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <!-- 新增数据条数提示 -->
    <div style="margin: 10px 0">
      <span>当前待提交数据条数: {{ pendingItems.length }}</span>
    </div>
    <el-table :data="paginatedPendingItems" style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <!-- 添加序号列 -->
      <el-table-column prop="T_sn" label="SN"></el-table-column>
      <el-table-column prop="T_remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="danger" size="small" @click="removePendingItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pendingItems.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      style="margin-top: 20px; text-align: right"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showInStorageForm = false">取消</el-button>
        <el-button type="primary" @click="submitInStorageForm">添加到暂存</el-button>
        <!-- 新增提交按钮 -->
        <el-button type="primary" @click="submitInStoragePendingItems">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="模板导入" v-model="ImportEdit" width="50%">
    <el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" @change="handleFileChange">
      <template #trigger>
        <el-button type="primary">模板导入</el-button>
      </template>

      <el-button class="ml-3" type="success" @click="submitUpload"> 提交文件</el-button>
      <template #tip></template>
    </el-upload>
  </el-dialog>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.list {
  @include f-direction;
}

// .input-suffix {
//    width: 100%;
//    .w-50 {
//      width: 33.33%;
//    }
// }
</style>