You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script lang="ts" setup> import { getContainerList } from '@/apis/container' import { getSolsList } from '@/apis/solution' import { useSolutionStore } from '@/stores/useSolutionStore' import { onMounted, ref } from 'vue' import liquidItem from './liquidItem.vue'
const chemicalList = ref<Container.ContainerItem[]>([]) onMounted(async () => { await querySolutionList() queryContainerList() }) const solutionList = ref<Solution.SolutionItem[]>([]) const solutionMap = ref<Record<string | number, string>>({}) const solutionStore = useSolutionStore() const querySolutionList = async () => { const res = await getSolsList() if (res && res.list) { solutionList.value = res.list solutionList.value.forEach((item) => { if (item.id) { solutionMap.value[item.id] = item.name } }) solutionStore.updateSolution(res.list) } }
const queryContainerList = () => { getContainerList().then((res) => { if (res) { const list: Container.ContainerItem[] = res.list const solutionList: Container.ContainerItem[] = [] list.forEach((item, index) => { // 只有8种,不会多也不会少, 多的不要
if (index < 8) { solutionList.push({ ...item, solutionName: solutionMap.value[item.solutionId], }) } }) chemicalList.value = solutionList } }) } </script>
<template> <div class="liquied-container"> <liquidItem v-for="(item, index) in chemicalList" :key="index" :item-index="index" :solutionItem="item" @ok="queryContainerList" /> </div> </template>
<style> .liquied-container { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } </style>
|