Update index.vue
This commit is contained in:
parent
276341dadc
commit
4d1b33f691
|
|
@ -1,4 +1,329 @@
|
||||||
|
<!-- 结算管理 -->
|
||||||
<template>
|
<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>
|
</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