添加输入结果页面雏形

2024-12-25 22:19:05 +08:00 · 2024-12-25 22:19:05 +08:00 · 35b77f225f
commit 35b77f225f
parent f30cde879c
7 changed files with 156 additions and 24 deletions
--- a/src/components/page-header.vue
+++ b/src/components/page-header.vue
@ -3,9 +3,12 @@ const props = defineProps(["title", "description"]);
 </script>

 <template>
-    <div class="page-content-header">
-        <div class="page-content-title" v-html="props.title"></div>
-        <div class="page-content-desc" v-html="props.description"></div>
+    <div class="page-content-header flex justify-between">
+        <div class="left-intro-content flex-1">
+            <div class="page-content-title" v-html="props.title"></div>
+            <div class="page-content-desc" v-html="props.description"></div>
+        </div>
+        <div class="right-content"><slot></slot></div>
    </div>
 </template>

--- a/src/pages/product/edit-modal.vue
+++ b/src/pages/product/edit-modal.vue
@ -59,34 +59,34 @@ function onValuesChange() {
                            <SelectOption value="vein">静脉制剂</SelectOption>
                        </Select>
                    </Form.Item>
-                    <Form.Item label="能量密度" name="power" :rules="[{ required: true, message: '请输入能量密度' }]">
+                    <Form.Item label="能量密度" name="power">
                        <Input placeholder="请输入能量密度" v-model:value="currentData.power" />
                    </Form.Item>
-                    <Form.Item label="蛋白Pro" name="protein" :rules="[{ required: true, message: '请输入蛋白Pro' }]">
+                    <Form.Item label="蛋白Pro" name="protein">
                        <Input placeholder="请输入蛋白Pro" v-model:value="currentData.protein" />
                    </Form.Item>
-                    <Form.Item label="Glu" name="glu" :rules="[{ required: true, message: '请输入Glu' }]">
+                    <Form.Item label="Glu" name="glu">
                        <Input placeholder="请输入Glu" v-model:value="currentData.glu" />
                    </Form.Item>
-                    <Form.Item label="Fat" name="fat" :rules="[{ required: true, message: '请输入Fat' }]">
+                    <Form.Item label="Fat" name="fat">
                        <Input placeholder="请输入Fat" v-model:value="currentData.fat" />
                    </Form.Item>
-                    <Form.Item label="纤维素" name="cellulose" :rules="[{ required: true, message: '请输入纤维素' }]">
+                    <Form.Item label="纤维素" name="cellulose">
                        <Input placeholder="请输入纤维素" v-model:value="currentData.cellulose" />
                    </Form.Item>
-                    <Form.Item label="Na" name="na" :rules="[{ required: true, message: '请输入Na' }]">
+                    <Form.Item label="Na" name="na">
                        <Input placeholder="请输入Na" v-model:value="currentData.na" />
                    </Form.Item>
-                    <Form.Item label="K" name="k" :rules="[{ required: true, message: '请输入K' }]">
+                    <Form.Item label="K" name="k">
                        <Input placeholder="请输入K" v-model:value="currentData.k" />
                    </Form.Item>
-                    <Form.Item label="Ca" name="ca" :rules="[{ required: true, message: '请输入Ca' }]">
+                    <Form.Item label="Ca" name="ca">
                        <Input placeholder="请输入Ca" v-model:value="currentData.ca" />
                    </Form.Item>
-                    <Form.Item label="P" name="p" :rules="[{ required: true, message: '请输入P' }]">
+                    <Form.Item label="P" name="p">
                        <Input placeholder="请输入P" v-model:value="currentData.p" />
                    </Form.Item>
-                    <Form.Item label="Mg" name="mg" :rules="[{ required: true, message: '请输入Mg' }]">
+                    <Form.Item label="Mg" name="mg">
                        <Input placeholder="请输入Mg" v-model:value="currentData.mg" />
                    </Form.Item>
                </div>
--- a/src/pages/product/index.vue
+++ b/src/pages/product/index.vue
@ -15,7 +15,9 @@ import useRequest from "@/service/useRequest";
 import EditModal from "./edit-modal.vue"


-const editProduct = ref<Partial<ProductInfoModel>>()
+const editProduct = ref<Partial<ProductInfoModel>>();
+// const formState = ref<{name?:string;category?:string}>({
+// })
 const searchParams = ref<ProductSearchParam>({
    page: 1,
    limit: 10,
@ -44,13 +46,19 @@ function handleDelete(id: number) {
    })
 }
 function handleSearch(){
+    // searchParams.value = {
+    //     ...searchParams.value,
+    //     ...formState.value,
+    //     page: 1,
+
+    // }
    searchParams.value.page = 1;
    run()
 }
 </script>
 <template>
    <div class="data-fields-container">
-        <PageHeader title="输入指标编辑" description="*输入指标: 作为输入参数进行计算，可对指标进行新增、编辑、删除操作。" />
+        <PageHeader title="制剂数据编辑" description="*数据编辑: 删除数据可能导致系统无法正常计算结果,请谨慎操作。" />
        <div class="search-form">
            <Space :size="20">
                <Space class="form-item">
--- a/src/pages/result/index.vue
+++ b/src/pages/result/index.vue
@ -1,18 +1,124 @@
 <template>
-    <p>输出计算</p>
-    <!-- <DataField /> -->
-    <Button @click="showMessage">test</Button>
+    <div class="result-container">
+        <PageHeader title="输出指标编辑" description="*输出指标: 使用输入参数进行计算，可对指标进行编辑操作。">
+            <Button type="primary">保存</Button>
+        </PageHeader>
+    </div>
+    <div class="result-calc-expression-list-container overflow-auto grid grid-cols-2 gap-4"
+        style="max-height: calc(100vh - 240px);margin-right:-5px;padding-right:5px;">
+        <div class="result-item bg-gray-100 p-3 rounded" v-for="item in ResultExpressionList" :key="item.key">
+            <div class="result-item-title text-base font-bold">{{ item.title }}</div>
+            <div class="result-item-expression mt-3">
+                <textarea class="w-full h-[66px] rounded outline-none p-3 bg-none resize-none" v-model="item.expression"
+                    :placeholder="`请输入${item.title}计算公式`" />
+            </div>
+        </div>
+    </div>
+    <div class="hidden">
+        <!-- <DataField /> -->
+        <Button type="primary" @click="showMessage">test</Button>
+        <p>输出计算</p>
+    </div>
 </template>
 <script setup lang="ts">
+import PageHeader from "@/components/page-header.vue";
 // import DataField from "@/components/data-fields/index.vue"
 import Button from "@/components/button/button.vue";
 import { message } from "@/components/message";
+import { ref } from "vue";
+
+const dataList = [
+    { title: "总入液量（ml）", expression: "", key: "total" },
+    { title: "Pro（g）不含白蛋白", expression: "", key: "danbai" },
+    { title: "Pro（g）含白蛋白", expression: "", key: "danbai_baidanbai" },
+    { title: "Glu（g）", expression: "", key: "glu" },
+    { title: "Fat（g）", expression: "", key: "fat" },
+    { title: "纤维素（g）", expression: "", key: "cellulose" },
+    { title: "Na（g）", expression: "", key: "na" },
+    { title: "K（g）", expression: "", key: "k" },
+    { title: "Ca（g）", expression: "", key: "ca" },
+    { title: "P（g）", expression: "", key: "p" },
+    { title: "Mg（g）", expression: "", key: "mg" },
+    { title: "实际热卡(Kcal)", expression: "", key: "shijireka" },
+    { title: "热量/体重(Kcal/kg)", expression: "", key: "reliang_tizhong" },
+    { title: "蛋白/体重(不含白蛋白)", expression: "", key: "danbai_tizhong" },
+    {
+        title: "蛋白/体重(含白蛋白)",
+        expression: "",
+        key: "danbai_tizhong_baidanbai",
+    },
+    { title: "蛋白热卡比(不含白蛋白)", expression: "", key: "danbai_rekabi" },
+    {
+        title: "蛋白热卡比(含白蛋白)",
+        expression: "",
+        key: "danbai_rekabi_baidanbai",
+    },
+    { title: "糖热卡比", expression: "", key: "tang_rekabi" },
+    { title: "脂肪热卡比", expression: "", key: "zhifang_rekabi" },
+    { title: "氮平衡(不含白蛋白)", expression: "", key: "danpingheng" },
+    { title: "氮平衡(含白蛋白)", expression: "", key: "danpingheng_baidanbai" },
+    { title: "肠内热卡百分比", expression: "", key: "changneibi" },
+    { title: "肠外热卡百分比", expression: "", key: "changwaibi" },
+];
+const ResultExpressionList = ref(dataList);
+
+// const list = [
+//     { name: '总入液量（ml）', value: '', key: 'total' },
+//     { name: 'Pro（g）不含白蛋白', value: '', key: 'danbai' },
+//     { name: 'Pro（g）含白蛋白', value: '', key: 'danbai_baidanbai' },
+//     { name: 'Glu（g）', value: '', key: 'glu' },
+//     { name: 'Fat（g）', value: '', key: 'fat' },
+//     { name: '纤维素（g）', value: '', key: 'cellulose' },
+//     { name: 'Na（g）', value: '', key: 'na' },
+//     { name: 'K（g）', value: '', key: 'k' },
+//     { name: 'Ca（g）', value: '', key: 'ca' },
+//     { name: 'P（g）', value: '', key: 'p' },
+//     { name: 'Mg（g）', value: '', key: 'mg' },
+//     { name: '实际热卡(Kcal)', value: '', key: 'shijireka' },
+//     { name: '热量/体重(Kcal/kg)', value: '', key: 'reliang_tizhong' },
+//     { name: '蛋白/体重(不含白蛋白)', value: '', key: 'danbai_tizhong' },
+//     { name: '蛋白/体重(含白蛋白)', value: '', key: 'danbai_tizhong_baidanbai' },
+//     { name: '蛋白热卡比(不含白蛋白)', value: '', key: 'danbai_rekabi' },
+//     { name: '蛋白热卡比(含白蛋白)', value: '', key: 'danbai_rekabi_baidanbai' },
+//     { name: '糖热卡比', value: '', key: 'tang_rekabi' },
+//     { name: '脂肪热卡比', value: '', key: 'zhifang_rekabi' },
+//     { name: '氮平衡(不含白蛋白)', value: '', key: 'danpingheng' },
+//     { name: '氮平衡(含白蛋白)', value: '', key: 'danpingheng_baidanbai' },
+//     { name: '肠内热卡百分比', value: '', key: 'changneibi' },
+//     { name: '肠外热卡百分比', value: '', key: 'changwaibi' }
+// ].map(it => ({ title: it.name, expression: '', key: it.key }));
+// console.log(JSON.stringify(list))

 const showMessage = () => {
    message.show(
-        'This notification does not automatically close, and you need to click the close button to close.',
-        'Notification title',
+        "This notification does not automatically close, and you need to click the close button to close.",
+        "Notification title",
        0
-    )
-}
+    );
+};
 </script>
+
+<style lang="scss" scoped>
+// .result-calc-expression-list-container {}
+
+// .result-item {
+//     display: flex;
+//     flex-direction: column;
+//     margin-bottom: 20px;
+
+
+//     .result-item-title {
+//         font-size: 14px;
+//         font-weight: 500;
+//         color: #333333;
+//         margin-bottom: 10px;
+//     }
+
+//     .result-item-expression {}
+
+//     textarea {
+//         width: 100%;
+//         height: 40px;
+//         outline: none;
+//     }
+// }</style>
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, h, watch } from "vue";
+import { ref, h } from "vue";
 import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import {
    Pagination, Select, SelectOption, Input, Button, Space, Empty, Spin,
--- a/src/style.scss
+++ b/src/style.scss
@ -36,6 +36,21 @@
  --primary-color-2-hover: #3895ffbf;
  --primary-border-radius: 3px;
 }
+::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 5px
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4096ff80;
+  height: 10px;
+  border-radius: 5px
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4096ff;
+  cursor: pointer
+}

 [type=reset],
 [type=submit],
--- a/vite.config.ts
+++ b/vite.config.ts
@ -34,7 +34,7 @@ export default defineConfig({
    server: {
        proxy: {
            '/api': {
-                target: 'http://localhost:3001',
+                target: 'http://43.136.175.109:50001',
                changeOrigin: true,
                // rewrite: path => path.replace(/^\/api/, '')
            }