113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<template>
|
||
<page-container>
|
||
<!-- 页面操作栏 -->
|
||
<template #ops>
|
||
<a-row>
|
||
<a-col :span="18">
|
||
<a-input-search
|
||
v-model:value="searchKey"
|
||
placeholder="名称/编码/类型"
|
||
allow-clear
|
||
enter-button
|
||
@search="loadData()"
|
||
></a-input-search>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
<!-- 页面表格内容 -->
|
||
<div style="min-height: calc(100vh - 305px)">
|
||
<!-- 表格行 -->
|
||
<a-table
|
||
:columns="columns"
|
||
:data-source="materialPage?.records"
|
||
bordered
|
||
:pagination="pagination"
|
||
:loading="loading"
|
||
row-key="key"
|
||
>
|
||
<!-- 操作按钮列 -->
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'assignRule'">
|
||
{{ record.assignRule ? '是' : '否' }}
|
||
<!-- 这里定义为0和1，0再回显的时候不展示？-->
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</page-container>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import api from '@/api'
|
||
import { IPage } from '@/api/api'
|
||
const searchKey = ref('')
|
||
|
||
const materialPage = ref<IPage<material.Material>>()
|
||
const loading = ref(false)
|
||
|
||
// 加载数据的方法
|
||
const loadData = async (page = 1, size = 10) => {
|
||
loading.value = true
|
||
api.materialApi.material.materials(
|
||
{ page: page || materialPage.value?.current, size: size || materialPage.value?.size, key: searchKey.value },
|
||
(data) => {
|
||
loading.value = false
|
||
materialPage.value = data
|
||
},
|
||
)
|
||
}
|
||
//初始加载
|
||
loadData()
|
||
|
||
//表格列
|
||
const columns = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'key',
|
||
customRender: ({ index }: { index: number }) => `${index + 1}`,
|
||
},
|
||
{
|
||
title: '物料名称',
|
||
dataIndex: 'name',
|
||
},
|
||
{
|
||
title: '物料编码',
|
||
dataIndex: 'code',
|
||
},
|
||
|
||
{
|
||
title: '物料类型',
|
||
dataIndex: 'typeName',
|
||
},
|
||
{
|
||
title: '物料型号',
|
||
dataIndex: 'spec',
|
||
},
|
||
{
|
||
title: '是否赋码',
|
||
dataIndex: 'assignRule',
|
||
},
|
||
{
|
||
title: '库存数量',
|
||
dataIndex: 'stock',
|
||
},
|
||
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'description',
|
||
},
|
||
]
|
||
|
||
//分页信息
|
||
const pagination = computed(() => {
|
||
return {
|
||
current: materialPage.value?.current,
|
||
pageSize: materialPage.value?.size,
|
||
total: materialPage.value?.total,
|
||
onChange: (page: number, pageSize: number) => {
|
||
loadData(page, pageSize)
|
||
},
|
||
}
|
||
})
|
||
</script>
|