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

129 lines
3.6 KiB
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";
// 模拟数据
const tableData = ref([])
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total= ref(0)
// 查询条件
const code = ref('')
onMounted(()=>{
init()
})
let init = ()=>{
const query = {
page: 1,
pageSize: 20,
code: code.value
}
post("social/upload/get3505List",{query: query}).then((res:any)=>{
tableData.value = res.list
})
}
let changePage = (value: number) => {
currentPage.value = value
const query = {
pageNum: value,
pageSize: pageSize.value,
code: code.value
}
post("social/upload/get3505List",{query: query}).then((res:any)=>{
tableData.value = res.list
total.value = res.total_count
})
}
let change_search = ()=>{
init()
}
// 转成YYYY-MM-DD格式
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"
placeholder="请输入库存初始化编码"
:suffix-icon="Search"
clearable
@change="change_search"/>
<el-button type="primary" style="margin-left: 10px" @click="change_search">搜索</el-button>
</div>
<div class="content">
<el-table :data="tableData" style="width: 100%;height: 100%">
<el-table-column prop="goodsName" label="商品名称"/>
<el-table-column prop="chargeOrderCode" label="订单号" show-overflow-tooltip/>
<el-table-column prop="number" label="变化量">
<template #default="{row}">
{{row.type ==1 ? row.number : "+"+row.number }}{{row.unit}}
</template>
</el-table-column>
<el-table-column prop="uploadMessage" label="变更类型" show-overflow-tooltip>
<template #default="{row}">
{{row.type ==1 ? '销售' :row.type ==2 ? '退货': '异常' }}
</template>
</el-table-column>
<el-table-column prop="feedetlSn" label="详情流水号" width="250"/>
<el-table-column prop="createTime" label="初始化日期">
<template #default="{row}">
{{formatDate(row.createTime)}}
</template>
</el-table-column>
<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="uploadDatetime" label="最近上传时间"/>
</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%;
.top {
height: 60px;
}
.content {
flex: 1;
min-height: 0;
}
.bottom {
height: 60px;
display: flex;
align-items: center;
background: base.$background-color-base;
}
}
</style>