116 lines
3.6 KiB
Vue
116 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, h } from "vue";
|
|
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
|
import {
|
|
Pagination, Select, SelectOption, Input, Button,
|
|
Space, Table,
|
|
} from 'ant-design-vue'
|
|
import PageHeader from '../components/page-header.vue'
|
|
import { fields, getProductValues } from "../service/data";
|
|
|
|
const searchParams = ref({
|
|
type: '',
|
|
name: ''
|
|
})
|
|
|
|
const current = ref(2);
|
|
const pageSize = ref<number>(20);
|
|
const columns = fields;
|
|
const allDataList = getProductValues();
|
|
console.log(allDataList)
|
|
|
|
const opts = [
|
|
{ label: '全部', value: '' },
|
|
{ label: '能量密度', value: 'power' },
|
|
{ label: 'Pro(g)', value: 'pro' },
|
|
{ label: 'Na(g)', value: 'na' },
|
|
]
|
|
</script>
|
|
<template>
|
|
<div class="data-fields-container">
|
|
<PageHeader title="输入指标编辑" description="*输入指标: 作为输入参数进行计算，可对指标进行新增、编辑、删除操作。" />
|
|
<div class="search-form">
|
|
<Space :size="20">
|
|
<Space class="form-item">
|
|
<span>营养制剂</span>
|
|
<Input class="search-item" placeholder="请输入营养制剂" v-model:value="searchParams.name" />
|
|
</Space>
|
|
<Space class="form-item">
|
|
<span>类型</span>
|
|
<Select class="search-item" v-model:value="searchParams.type">
|
|
<SelectOption v-for="(it, opIndex) in opts" :key="opIndex" :value="it.value">{{ it.label }}
|
|
</SelectOption>
|
|
</Select>
|
|
</Space>
|
|
<Space class="form-item" :size="15">
|
|
<Button :icon="h(SearchOutlined)" type="primary">查询</Button>
|
|
<Button :icon="h(PlusOutlined)" class="btn-info">新增</Button>
|
|
</Space>
|
|
</Space>
|
|
</div>
|
|
<div class="search-result-table">
|
|
<div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>营养制剂</th>
|
|
<th v-for="th in columns">{{th.name}}</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(tr,rowIndex) in allDataList" :key="rowIndex">
|
|
<td>{{ tr.product.name }}</td>
|
|
<td v-for="it in tr.values">{{ it.value }}</td>
|
|
<td>
|
|
<Space :size="20">
|
|
<a>编辑</a>
|
|
<a>删除</a>
|
|
</Space>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="data-page">
|
|
<Pagination v-model:current="current" v-model:page-size="pageSize" :total="50"
|
|
:show-total="total => `共 ${total} 条`" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
.search-form {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin: 10px 0;
|
|
|
|
.form-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.search-form {
|
|
|
|
.ant-input,
|
|
.ant-select .ant-select-selector {
|
|
background-color: #f7f8fa;
|
|
border: solid 1px transparent;
|
|
min-width: 100px;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
border-color: var(--primary-color-1-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-result-table {}
|
|
.data-page{
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
</style>
|