618 lines
15 KiB
Vue
618 lines
15 KiB
Vue
<template>
|
||
<div class="departmentStructure">
|
||
<TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns"
|
||
:single-line="false"
|
||
:isPageTable="true">
|
||
<template #headerExtra>
|
||
<n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加食材原料</n-button>
|
||
<n-button strong secondary type="primary"> 导入</n-button>
|
||
</template>
|
||
</TablePro>
|
||
</div>
|
||
</template>
|
||
<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";
|
||
|
||
type TableType = TableProProps<any, any>
|
||
import api from "@/axios";
|
||
import datalist, { type FoodItemValue } from "@/views/smartRecipes/foodManagement/index.ts";
|
||
import CustomImageUpload from "@/components/customImageUpload/index.vue";
|
||
|
||
const modal = useModal();
|
||
const form = ref<FormInst | null>(null);
|
||
const reqApi: TableType["requestApi"] = (params) => {
|
||
return new Promise((resolve: any) => {
|
||
resolve({
|
||
code: 200,
|
||
data: {
|
||
pages: "2",
|
||
current: "1",
|
||
records: datalist,
|
||
size: "5",
|
||
total: "10"
|
||
},
|
||
success: "成功"
|
||
});
|
||
});
|
||
};
|
||
const searchFormOptions = reactive<TableType["searchFormOptions"]>({
|
||
categories: {
|
||
type: "select",
|
||
label: "食物大类",
|
||
options: [
|
||
{
|
||
value: "蛋类及制品",
|
||
label: "蛋类及制品"
|
||
},
|
||
{
|
||
value: "干豆类及制品",
|
||
label: "干豆类及制品"
|
||
},
|
||
{
|
||
value: "禽肉类及制品",
|
||
label: "禽肉类及制品"
|
||
},
|
||
{
|
||
value: "谷类及制品",
|
||
label: "谷类及制品"
|
||
},
|
||
{
|
||
value: "坚果、种子类",
|
||
label: "坚果、种子类"
|
||
},
|
||
{
|
||
value: "粮油调料",
|
||
label: "粮油调料"
|
||
},
|
||
{
|
||
value: "菌藻类",
|
||
label: "菌藻类"
|
||
},
|
||
{
|
||
value: "蔬菜类",
|
||
label: "蔬菜类"
|
||
},
|
||
{
|
||
value: "厨房用品",
|
||
label: "厨房用品"
|
||
},
|
||
{
|
||
value: "水果类",
|
||
label: "水果类"
|
||
},
|
||
{
|
||
value: "其他",
|
||
label: "其他"
|
||
}
|
||
]
|
||
},
|
||
subCategories: {
|
||
type: "select",
|
||
label: "食物小类",
|
||
options: [
|
||
{
|
||
value: "食物小类",
|
||
label: "食物小类"
|
||
}
|
||
]
|
||
},
|
||
goodsLabel: {
|
||
type: "select",
|
||
label: "标签",
|
||
options: [{
|
||
value: "谷薯",
|
||
label: "谷薯"
|
||
}, {
|
||
value: "肉蛋",
|
||
label: "肉蛋"
|
||
}, {
|
||
value: "果蔬",
|
||
label: "果蔬"
|
||
}, {
|
||
value: "豆类坚果",
|
||
label: "豆类坚果"
|
||
}, {
|
||
value: "其他",
|
||
label: "其他"
|
||
}]
|
||
},
|
||
name: {
|
||
type: "input",
|
||
label: "名称"
|
||
}
|
||
});
|
||
|
||
const columns = ref<TableType["columns"]>([
|
||
{
|
||
key: "image",
|
||
title: "食物图片",
|
||
width: 100,
|
||
render: (value: any) => {
|
||
return (
|
||
<n-avatar
|
||
round
|
||
src={value.image}
|
||
/>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
key: "primaryTypeName",
|
||
title: "食物大类",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "secondaryTypeName",
|
||
title: "食物小类",
|
||
width: 150
|
||
},
|
||
{
|
||
key: "name",
|
||
title: "食物名称",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "labelStr",
|
||
title: "食物标签",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "power",
|
||
title: "热量",
|
||
width: 60
|
||
},
|
||
{
|
||
key: "protein",
|
||
title: "蛋白质",
|
||
width: 70
|
||
},
|
||
{
|
||
key: "fat",
|
||
title: "脂肪",
|
||
width: 60
|
||
},
|
||
{
|
||
key: "carbs",
|
||
title: "碳水化合物",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "dietaryFiber",
|
||
title: "不溶性膳食纤维",
|
||
width: 140
|
||
},
|
||
{
|
||
key: "vitaminA",
|
||
title: "总维生素A",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "vitaminB1",
|
||
title: "维生素B₁",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "vitaminB2",
|
||
title: "维生素B₂",
|
||
width: 100
|
||
},
|
||
{
|
||
key: "vitaminC",
|
||
title: "维生素C",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "vitaminE",
|
||
title: "维生素E",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "ca",
|
||
title: "钙",
|
||
width: 50
|
||
},
|
||
{
|
||
key: "zn",
|
||
title: "锌",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "fe",
|
||
title: "铁",
|
||
width: 20
|
||
},
|
||
{
|
||
key: "createUserName",
|
||
title: "提交人",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "createTime",
|
||
title: "提交时间",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "updateTime",
|
||
title: "更新时间",
|
||
width: 80
|
||
},
|
||
{
|
||
key: "",
|
||
title: "操作",
|
||
fixed: "right",
|
||
render: (value: FoodItemValue) => {
|
||
return (
|
||
<div style={{ display: "flex" }}>
|
||
<n-button
|
||
strong
|
||
secondary
|
||
style={{ marginLeft: "10px" }}
|
||
type="warning"
|
||
onClick={() => {
|
||
console.log(value, "000");
|
||
title.value = `修改食材原料`;
|
||
userValue.value.image = value.image
|
||
userValue.value.ca = value.ca
|
||
userValue.value.carbs = value.carbs
|
||
userValue.value.fat = value.fat
|
||
userValue.value.fe = value.fe
|
||
userValue.value.power = value.power
|
||
userValue.value.se = value.se
|
||
userValue.value.vitaminA = value.vitaminA
|
||
userValue.value.vitaminC = value.vitaminC
|
||
userValue.value.vitaminE = value.vitaminE
|
||
userValue.value.vitaminB1 = value.vitaminB1
|
||
userValue.value.vitaminB2 = value.vitaminB2
|
||
userValue.value.name = value.name
|
||
userValue.value.zn = value.zn
|
||
userValue.value.dietaryFiber = value.dietaryFiber
|
||
userValue.value.protein = value.protein
|
||
userValue.value.labelStr = value.labelStr
|
||
userValue.value.primaryTypeName = value.primaryTypeName
|
||
userValue.value.secondaryTypeName = value.secondaryTypeName
|
||
|
||
modalRef.value = modal.create({
|
||
title: title.value,
|
||
preset: "card",
|
||
style: {
|
||
width: "1000px"
|
||
},
|
||
content: () => (
|
||
<div style="height:600px;overflow-y: auto;scrollbar-width: none;">
|
||
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||
form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
|
||
</FormPro>
|
||
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||
form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
|
||
</FormPro>
|
||
</div>
|
||
|
||
),
|
||
footer: () => (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "flex-end"
|
||
}}
|
||
>
|
||
<n-button
|
||
loading={loading.value}
|
||
style={{ marginRight: "10px" }}
|
||
type="primary"
|
||
onClick={() => {
|
||
modalRef.value.destroy();
|
||
resetModelValue();
|
||
}}
|
||
>
|
||
确认
|
||
</n-button>
|
||
<n-button
|
||
onClick={() => {
|
||
modalRef.value.destroy();
|
||
resetModelValue();
|
||
}}
|
||
>
|
||
取消
|
||
</n-button>
|
||
</div>
|
||
),
|
||
onAfterLeave: () => {
|
||
resetModelValue();
|
||
}
|
||
});
|
||
}}
|
||
>编辑
|
||
</n-button>
|
||
<n-button type="error" style={{ margin: "0 10px" }}>
|
||
删除
|
||
</n-button>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
]);
|
||
const userDefaultValue = {
|
||
ca: "",
|
||
carbs: "",
|
||
code: "",
|
||
createTime: "",
|
||
createUserId: "",
|
||
createUserName: "",
|
||
dietaryFiber: "",
|
||
fat: "",
|
||
fe: "",
|
||
id: "",
|
||
image: "",
|
||
label: "",
|
||
labelStr: "",
|
||
name: "",
|
||
power: "",
|
||
primaryType: "",
|
||
primaryTypeName: "",
|
||
protein: "",
|
||
se: "",
|
||
secondaryType: "",
|
||
secondaryTypeName: "",
|
||
supplier: "",
|
||
supplyCost: "",
|
||
supplyProductCode: "",
|
||
supplyProductName: "",
|
||
updateTime: "",
|
||
vitaminA: "",
|
||
vitaminB1: "",
|
||
vitaminB2: "",
|
||
vitaminC: "",
|
||
vitaminE: "",
|
||
zn: ""
|
||
};
|
||
|
||
const userValue = ref<FoodItemValue>({
|
||
...userDefaultValue
|
||
});
|
||
|
||
const resetModelValue = () => {
|
||
userValue.value = { ...userDefaultValue };
|
||
};
|
||
|
||
const addUserOrUpdate = () => {
|
||
form.value?.validate().then(() => {
|
||
// loading.value = true
|
||
|
||
});
|
||
};
|
||
const formOptionsUser = reactive<FormItemOptions<FoodItemValue>>({
|
||
primaryTypeName: {
|
||
type: "select",
|
||
label: "食物大类",
|
||
required: true,
|
||
labelAlign: "center",
|
||
options: [
|
||
{
|
||
value: "蛋类及制品",
|
||
label: "蛋类及制品"
|
||
},
|
||
{
|
||
value: "干豆类及制品",
|
||
label: "干豆类及制品"
|
||
},
|
||
{
|
||
value: "禽肉类及制品",
|
||
label: "禽肉类及制品"
|
||
},
|
||
{
|
||
value: "谷类及制品",
|
||
label: "谷类及制品"
|
||
},
|
||
{
|
||
value: "坚果、种子类",
|
||
label: "坚果、种子类"
|
||
},
|
||
{
|
||
value: "粮油调料",
|
||
label: "粮油调料"
|
||
},
|
||
{
|
||
value: "菌藻类",
|
||
label: "菌藻类"
|
||
},
|
||
{
|
||
value: "蔬菜类",
|
||
label: "蔬菜类"
|
||
},
|
||
{
|
||
value: "厨房用品",
|
||
label: "厨房用品"
|
||
},
|
||
{
|
||
value: "水果类",
|
||
label: "水果类"
|
||
},
|
||
{
|
||
value: "其他",
|
||
label: "其他"
|
||
}
|
||
]
|
||
},
|
||
secondaryTypeName: {
|
||
type: "select",
|
||
label: "食物小类",
|
||
required: true,
|
||
options: [
|
||
{
|
||
value: "大豆",
|
||
label: "大豆"
|
||
},
|
||
{
|
||
value: "红豆",
|
||
label: "红豆"
|
||
},
|
||
{
|
||
value: "绿豆",
|
||
label: "绿豆"
|
||
}
|
||
]
|
||
},
|
||
name: {
|
||
type: "input",
|
||
label: "食物名称",
|
||
required: true
|
||
},
|
||
labelStr: {
|
||
type: "radioGroup",
|
||
label: "食物标签",
|
||
required: true,
|
||
options: [{
|
||
value: "谷薯",
|
||
label: "谷薯"
|
||
}, {
|
||
value: "肉蛋",
|
||
label: "肉蛋"
|
||
}, {
|
||
value: "果蔬",
|
||
label: "果蔬"
|
||
}, {
|
||
value: "豆类坚果",
|
||
label: "豆类坚果"
|
||
}, {
|
||
value: "其他",
|
||
label: "其他"
|
||
}]
|
||
},
|
||
power: {
|
||
type: "input",
|
||
label: "能量（kcal/100g）"
|
||
},
|
||
protein: {
|
||
type: "input",
|
||
label: "蛋白质（g/100g）"
|
||
},
|
||
fat: {
|
||
type: "input",
|
||
label: "脂肪（g/100g）"
|
||
},
|
||
carbs: {
|
||
type: "input",
|
||
label: "碳水化合物（g/100g）"
|
||
},
|
||
dietaryFiber: {
|
||
type: "input",
|
||
label: "不溶性膳食纤维（g/100g）"
|
||
},
|
||
vitaminA: {
|
||
type: "input",
|
||
label: "维生素A（μgRAE/100g）"
|
||
},
|
||
vitaminB1: {
|
||
type: "input",
|
||
label: "维生素B1（mg/100g）"
|
||
},
|
||
vitaminB2: {
|
||
type: "input",
|
||
label: "维生素B2（mg/100g）"
|
||
},
|
||
vitaminC: {
|
||
type: "input",
|
||
label: "维生素C（mg/100g）"
|
||
},
|
||
vitaminE: {
|
||
type: "input",
|
||
label: "维生素E（mg/100g）"
|
||
},
|
||
ca: {
|
||
type: "input",
|
||
label: "钙（mg/100g）"
|
||
},
|
||
zn: {
|
||
type: "input",
|
||
label: "锌（mg/100g）"
|
||
},
|
||
fe: {
|
||
type: "input",
|
||
label: "铁（mg/100g）"
|
||
}
|
||
});
|
||
const formOptions1User = reactive<FormItemOptions<FoodItemValue>>({
|
||
// // form表单
|
||
image: {
|
||
type: "custom",
|
||
label: "",
|
||
customRender: (modelValue) => {
|
||
return (
|
||
<div style="margin: auto;text-align: center">
|
||
<div>
|
||
<n-image
|
||
width="150"
|
||
height="150"
|
||
src={modelValue.image}
|
||
/>
|
||
</div>
|
||
上传菜品图片
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
});
|
||
const loading = ref<boolean>(false);
|
||
const modalRef = ref();
|
||
const title = ref("添加食材原料");
|
||
const addDepartmentStructure = () => {
|
||
modalRef.value = modal.create({
|
||
title: title.value,
|
||
preset: "card",
|
||
style: {
|
||
width: "1000px"
|
||
},
|
||
content: () => (
|
||
<div style="height:600px;overflow-y: auto;scrollbar-width: none;">
|
||
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||
form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
|
||
</FormPro>
|
||
<FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
|
||
form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
|
||
</FormPro>
|
||
</div>
|
||
|
||
),
|
||
footer: () => (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "flex-end"
|
||
}}
|
||
>
|
||
<n-button
|
||
loading={loading.value}
|
||
style={{ marginRight: "10px" }}
|
||
type="primary"
|
||
onClick={() => {
|
||
addUserOrUpdate();
|
||
}}
|
||
>
|
||
确认
|
||
</n-button>
|
||
<n-button
|
||
onClick={() => {
|
||
modalRef.value.destroy();
|
||
resetModelValue();
|
||
}}
|
||
>
|
||
取消
|
||
</n-button>
|
||
</div>
|
||
),
|
||
onAfterLeave: () => {
|
||
resetModelValue();
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.departmentStructure {
|
||
//overflow-y: auto;
|
||
|
||
}
|
||
</style> |