web/src/components/social/inventoryUp/List_3501.vue

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import {ElInput, ElTable, ElTableColumn, ElPagination} from 'element-plus'
import {post} from "@/utils/request.ts";
import {Search} from "@element-plus/icons-vue";

interface TableItem {
  name: string;
  status: string;
  code: string;
  wholeNumber: number;
  createDate: string;
  uploadStatus: number;
  uploadMessage: string;
  uploadDatetime: string;
  fragmentNumber: number;
}

// 模拟数据
const tableData = ref<TableItem[]>([])

// 搜索相关
const searchQuery = ref('')
const filteredData = computed(() => {
  return tableData.value.filter(item =>
      item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.status.includes(searchQuery.value)
  )
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
// 搜索条件
const code = ref('')
onMounted(() => {
  init()
})
let init = () => {
  const query = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    code: code.value
  }
  post("social/upload/get3501List", {query: query}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
}
let changePage = (value: number) => {
  currentPage.value = value
  const query = {
    pageNum: value,
    pageSize: pageSize.value,
  }
  post("social/upload/get3501List", {query: query}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })
}
let change_search = () => {
  init()
}
const formatDate = (isoStr: any) => {
  if (!isoStr) {
    return ''
  }
  const date = new Date(isoStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
</script>

<template>
  <div class="container">
    <div class="tip">
      <el-input
          v-model="code"
          style="width: 240px;height: 100%"
          placeholder="请输入库存初始化编码"
          :suffix-icon="Search"
          size="large" clearable
          @change="change_search"/>
      <div class="default-btn" @click="change_search" style="margin-left: 24px">
        <span class="iconfont icon-RectangleCopy"></span>
        搜索
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%;height: 100%">
        <el-table-column prop="name" label="商品名称"/>
        <el-table-column prop="code" label="库存初始化编码"/>
        <el-table-column prop="wholeNumber" label="初始化商品整量数量">
          <template #default="scope">
            {{ scope.row.wholeNumber }}{{ scope.row.packagingUnit }}
          </template>

        </el-table-column>
        <el-table-column prop="fragmentNumber" label="初始化商品分量数量">
          <template #default="scope">
            {{ scope.row.fragmentNumber }}{{ scope.row.minPackagingUnit }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="初始化日期"/>
        <el-table-column prop="uploadStatus" label="状态">
          <template #default="{row}">
            {{
              row.uploadStatus == 0 ? '未上传' : row.uploadStatus == 1 ? '已上传' : row.uploadStatus == 2 ? '异常' : "无需上报"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="uploadMessage" label="上传状态信息" show-overflow-tooltip/>
        <el-table-column prop="uploadDatetime" label="最近上传时间">
          <template #default="{row}">
            {{ formatDate(row.uploadDatetime) }}
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="bottom">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @current-change="changePage"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/assets/scss/base.scss";
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .tip {
    height: 42px;
  }

  .content {
    margin-top: 24px;
    flex: 1;
    min-height: 0;
  }

  .bottom {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>