120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<TablePro
|
|
ref="tableRef"
|
|
:request-api="reqApi"
|
|
:search-form-options="searchFormOptions"
|
|
:columns="columns"
|
|
:isPageTable="true"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup lang="tsx">
|
|
import {
|
|
TablePro,
|
|
type TableProProps,
|
|
FormPro,
|
|
type FormItemOptions,
|
|
type TableProInst,
|
|
Icon,
|
|
} from "@/components";
|
|
import { NPerformantEllipsis, NTag } from "naive-ui";
|
|
const tableRef = useTemplateRef<TableProInst>("tableRef");
|
|
const reqApi: TableType["requestApi"] = (params) => {
|
|
return new Promise((resolve) => {
|
|
resolve({
|
|
code: 200,
|
|
data: {
|
|
current: "1",
|
|
// @ts-ignore
|
|
pages: "2",
|
|
records: [
|
|
{
|
|
goods_name: "菠菜",
|
|
company: "长沙xxx食品有限公司",
|
|
out_and_in: "70/80",
|
|
num: 78,
|
|
time: "2025-3-16",
|
|
handlers: "李xx",
|
|
},
|
|
{
|
|
goods_name: "菠菜",
|
|
company: "长沙xxx食品有限公司",
|
|
out_and_in: "70/80",
|
|
num: 78,
|
|
time: "2025-3-16",
|
|
handlers: "李xx",
|
|
},
|
|
],
|
|
size: "10",
|
|
total: "12",
|
|
},
|
|
message: "操作成功！",
|
|
});
|
|
});
|
|
};
|
|
type TableType = TableProProps<any, any>;
|
|
const searchFormOptions = reactive<TableType["searchFormOptions"]>({
|
|
name: {
|
|
type: "input",
|
|
label: "姓名",
|
|
},
|
|
});
|
|
const columns = ref<TableType["columns"]>([
|
|
// {
|
|
// key: "index",
|
|
// title: "序号",
|
|
// width: 20,
|
|
// render: (_rowData: object, _rowIndex: number) => {
|
|
// return _rowIndex + 1;
|
|
// },
|
|
// },
|
|
|
|
{
|
|
key: "goods_name",
|
|
title: "商品名称",
|
|
width: 70,
|
|
render: ({ goods_name }) => {
|
|
return (
|
|
<NPerformantEllipsis style={{ maxWidth: "70px" }}>
|
|
{goods_name}
|
|
</NPerformantEllipsis>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "company",
|
|
title: "商品名称",
|
|
width: 200,
|
|
render: ({ company }) => {
|
|
return (
|
|
<NPerformantEllipsis style={{ maxWidth: "200px" }}>
|
|
{company}
|
|
</NPerformantEllipsis>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: "out_and_in",
|
|
title: "出/入库",
|
|
width: 70,
|
|
},
|
|
{
|
|
key: "num",
|
|
title: "数量",
|
|
width: 70,
|
|
},
|
|
{
|
|
key: "time",
|
|
title: "时间",
|
|
width: 70,
|
|
},
|
|
{
|
|
key: "handlers",
|
|
title: "操作者",
|
|
width: 100,
|
|
},
|
|
]);
|
|
</script>
|
|
<style scoped lang="scss"></style>
|