Update index.vue
This commit is contained in:
parent
276341dadc
commit
4d1b33f691
|
|
@ -1,4 +1,329 @@
|
|||
<!-- 结算管理 -->
|
||||
<template>
|
||||
<div>结算管理</div>
|
||||
<div class="departmentStructure">
|
||||
<TablePro
|
||||
ref="tableRef"
|
||||
:request-api="reqApi"
|
||||
:search-form-options="searchFormOptions"
|
||||
:columns="columns"
|
||||
:single-line="false"
|
||||
:isPageTable="true"
|
||||
>
|
||||
<template #headerExtra>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="() => {}"
|
||||
>
|
||||
导出所有供应商汇总
|
||||
</n-button>
|
||||
</template>
|
||||
</TablePro>
|
||||
<n-modal v-model:show="showModal">
|
||||
<n-card
|
||||
style="width: 1400px"
|
||||
:title="title"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<template #header-extra></template>
|
||||
<template #footer>
|
||||
<n-button
|
||||
@click="() => (showModal = false)"
|
||||
type="primary"
|
||||
>
|
||||
Ok
|
||||
</n-button>
|
||||
</template>
|
||||
<TablePro
|
||||
ref="tableRef"
|
||||
:request-api="reqApi__"
|
||||
:columns="columns__"
|
||||
:isPageTable="true"
|
||||
>
|
||||
<template #headerExtra>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="() => {}"
|
||||
>
|
||||
导出供货食材明细表
|
||||
</n-button>
|
||||
</template>
|
||||
</TablePro>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
|
||||
<n-modal v-model:show="showModal____">
|
||||
<n-card
|
||||
style="width: 1400px"
|
||||
:title="title____"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<template #header-extra></template>
|
||||
<template #footer>
|
||||
<n-button
|
||||
@click="() => (showModal____ = false)"
|
||||
type="primary"
|
||||
>
|
||||
Ok
|
||||
</n-button>
|
||||
</template>
|
||||
<TablePro
|
||||
ref="tableRef"
|
||||
:request-api="reqApi____"
|
||||
:columns="columns____"
|
||||
:isPageTable="true"
|
||||
>
|
||||
<template #headerExtra>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="() => {}"
|
||||
>
|
||||
导出结算汇总表
|
||||
</n-button>
|
||||
</template>
|
||||
</TablePro>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup></script>
|
||||
<script setup lang="tsx">
|
||||
import { NButton, useModal, type FormInst } from "naive-ui";
|
||||
import { reactive, ref } from "vue";
|
||||
import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
|
||||
import {
|
||||
TablePro,
|
||||
type TableProProps,
|
||||
FormPro,
|
||||
type FormItemOptions,
|
||||
type TableProInst,
|
||||
} from "@/components";
|
||||
const showModal = ref(false);
|
||||
const showModal____ = ref(false);
|
||||
const title____ = ref("");
|
||||
|
||||
const title = ref("");
|
||||
|
||||
type TableType = TableProProps<any, any>;
|
||||
|
||||
const reqApi: TableType["requestApi"] = (params) => {
|
||||
return new Promise((resolve: any) => {
|
||||
resolve({
|
||||
code: 200,
|
||||
data: {
|
||||
pages: "2",
|
||||
current: "1",
|
||||
records: [
|
||||
{
|
||||
companyName: "供应商A",
|
||||
goodsDetails: {
|
||||
isTrue: true,
|
||||
},
|
||||
priceDetails: {
|
||||
isTrue: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
companyName: "供应商B",
|
||||
goodsDetails: {
|
||||
isTrue: true,
|
||||
},
|
||||
priceDetails: {
|
||||
isTrue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
size: "5",
|
||||
total: "10",
|
||||
},
|
||||
success: "成功",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const reqApi__: TableType["requestApi"] = (params) => {
|
||||
return new Promise((resolve: any) => {
|
||||
resolve({
|
||||
code: 200,
|
||||
data: {
|
||||
pages: "2",
|
||||
current: "1",
|
||||
records: [
|
||||
{
|
||||
commodity: "金煌芒果",
|
||||
price: "19元",
|
||||
specifications: "无",
|
||||
brand: "品牌A",
|
||||
units: "斤",
|
||||
commodityType: "蔬菜豆制品",
|
||||
inventory: 99,
|
||||
total: 99,
|
||||
warningValue: 10,
|
||||
replenishment: "否",
|
||||
},
|
||||
{
|
||||
commodity: "大红薯",
|
||||
specifications: "无",
|
||||
price: "19元",
|
||||
brand: "无",
|
||||
units: "斤",
|
||||
commodityType: "蔬菜豆制品",
|
||||
inventory: 99,
|
||||
total: 99,
|
||||
warningValue: 10,
|
||||
replenishment: "是",
|
||||
},
|
||||
],
|
||||
size: "5",
|
||||
total: "10",
|
||||
},
|
||||
success: "成功",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const reqApi____: TableType["requestApi"] = (params) => {
|
||||
return new Promise((resolve: any) => {
|
||||
resolve({
|
||||
code: 200,
|
||||
data: {
|
||||
pages: "2",
|
||||
current: "1",
|
||||
records: [
|
||||
{
|
||||
type: "月结",
|
||||
phoneNumber: "173xxxx3652",
|
||||
price: "10658",
|
||||
},
|
||||
{
|
||||
type: "日结",
|
||||
phoneNumber: "173xxxx3652",
|
||||
price: "368",
|
||||
},
|
||||
],
|
||||
size: "5",
|
||||
total: "10",
|
||||
},
|
||||
success: "成功",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const searchFormOptions = reactive<TableType["searchFormOptions"]>({
|
||||
companyName: {
|
||||
type: "input",
|
||||
label: "供应商名称",
|
||||
},
|
||||
});
|
||||
|
||||
const columns = ref<TableType["columns"]>([
|
||||
{
|
||||
key: "companyName",
|
||||
title: "供应商名称",
|
||||
},
|
||||
{
|
||||
key: "companyName",
|
||||
title: "供货食材明细表",
|
||||
render: (value) => {
|
||||
return (
|
||||
value.goodsDetails.isTrue && (
|
||||
<NButton
|
||||
onClick={() => {
|
||||
showModal.value = true;
|
||||
title.value = `${value.companyName}__供货食材明细表`;
|
||||
}}
|
||||
type="success"
|
||||
>
|
||||
查看详情
|
||||
</NButton>
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "companyName",
|
||||
title: "结算汇总表",
|
||||
render: (value) => {
|
||||
return (
|
||||
value.priceDetails.isTrue && (
|
||||
<NButton
|
||||
onClick={() => {
|
||||
showModal____.value = true;
|
||||
title____.value = `${value.companyName}__结算汇总表`;
|
||||
}}
|
||||
type="success"
|
||||
>
|
||||
查看详情
|
||||
</NButton>
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "",
|
||||
title: "操作",
|
||||
render: (value: modelDefaultValue) => {
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<n-button
|
||||
style={{ marginLeft: "10px" }}
|
||||
onClick={() => {}}
|
||||
>
|
||||
汇总
|
||||
</n-button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]);
|
||||
const columns__ = ref<TableType["columns"]>([
|
||||
{
|
||||
key: "commodity",
|
||||
title: "商品名称",
|
||||
},
|
||||
{
|
||||
key: "price",
|
||||
title: "采购价格",
|
||||
render: (value) => {
|
||||
return <span>{`${value.price}/${value.units}`}</span>;
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
key: "brand",
|
||||
title: "品牌",
|
||||
},
|
||||
|
||||
{
|
||||
key: "commodityType",
|
||||
title: "商品类型",
|
||||
},
|
||||
{
|
||||
key: "total",
|
||||
title: "供货数量",
|
||||
},
|
||||
]);
|
||||
|
||||
const columns____ = ref<TableType["columns"]>([
|
||||
{
|
||||
key: "type",
|
||||
title: "结算方式",
|
||||
},
|
||||
{
|
||||
key: "phoneNumber",
|
||||
title: "联系电话",
|
||||
},
|
||||
|
||||
{
|
||||
key: "price",
|
||||
title: "总价格",
|
||||
render: (value) => {
|
||||
return <span>{`${value.price}/元`}</span>;
|
||||
},
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue