From 78a0795bcf8374d17db775568918967454222f84 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Thu, 8 May 2025 09:30:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=BA=B6=E6=B6=B2=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/container.ts              |   0
 src/apis/solution.ts               |   9 +++
 src/router/routes.ts               |   8 +--
 src/stores/useSolutionStore.ts     |  14 ++++
 src/types/solution.d.ts            |  13 ++++
 src/views/container/index.vue      |  46 ++++++++++++
 src/views/container/liquidItem.vue | 133 +++++++++++++++++++++++++++++++++++
 src/views/liquid/index.vue         |  46 ------------
 src/views/liquid/liquidItem.vue    | 128 ----------------------------------
 src/views/solution/index.vue       | 139 +++++++++++++++++++++++++++++++++++++
 10 files changed, 358 insertions(+), 178 deletions(-)
 create mode 100644 src/apis/container.ts
 create mode 100644 src/apis/solution.ts
 create mode 100644 src/stores/useSolutionStore.ts
 create mode 100644 src/types/solution.d.ts
 create mode 100644 src/views/container/index.vue
 create mode 100644 src/views/container/liquidItem.vue
 delete mode 100644 src/views/liquid/index.vue
 delete mode 100644 src/views/liquid/liquidItem.vue
 create mode 100644 src/views/solution/index.vue

diff --git a/src/apis/container.ts b/src/apis/container.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/apis/solution.ts b/src/apis/solution.ts
new file mode 100644
index 0000000..8f6b127
--- /dev/null
+++ b/src/apis/solution.ts
@@ -0,0 +1,9 @@
+import http from 'libs/http'
+
+export const getSolsList = (): Promise<any> => http.get(`/sols/list`)
+
+export const saveSols = (params: { name: string }): Promise<any> => http.post(`/sols`, params)
+
+export const editSols = (params: { id: number, name: string }): Promise<any> => http.put(`/sols`, params)
+
+export const delSols = (ids: string): Promise<any> => http.delete(`/sols/${ids}`)
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 589a597..1decf2e 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -54,9 +54,9 @@ const authRoutes: RouteRecordRaw[] = [
     },
   },
   {
-    path: '/liquid',
-    name: 'liquid',
-    component: () => import('views/liquid/index.vue'),
+    path: '/container',
+    name: 'container',
+    component: () => import('views/container/index.vue'),
     meta: {
       isDefault: true,
       title: '加液配置',
@@ -67,7 +67,7 @@ const authRoutes: RouteRecordRaw[] = [
   {
     path: '/solution',
     name: 'solution',
-    component: () => import('views/home/index.vue'),
+    component: () => import('views/solution/index.vue'),
     meta: {
       isDefault: true,
       title: '溶液管理',
diff --git a/src/stores/useSolutionStore.ts b/src/stores/useSolutionStore.ts
new file mode 100644
index 0000000..6363e32
--- /dev/null
+++ b/src/stores/useSolutionStore.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useSolutionStore = defineStore('solution', () => {
+  const solutionList = ref<Solution.SolutionItem[]>([])
+
+  const updateSolution = (list: Solution.SolutionItem[]) => {
+    solutionList.value = list
+  }
+  return {
+    solutionList,
+    updateSolution,
+  }
+})
diff --git a/src/types/solution.d.ts b/src/types/solution.d.ts
new file mode 100644
index 0000000..c06b3a7
--- /dev/null
+++ b/src/types/solution.d.ts
@@ -0,0 +1,13 @@
+declare namespace Solution {
+  interface SolutionItem {
+    id?: number
+    name: string
+    updateTime?: string
+    createTime?: string
+  }
+
+  interface SolutionItemList {
+    list: SolutionItem[]
+    total: number
+  }
+}
diff --git a/src/views/container/index.vue b/src/views/container/index.vue
new file mode 100644
index 0000000..b0ed49c
--- /dev/null
+++ b/src/views/container/index.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import liquidItem from './liquidItem.vue'
+
+interface Chemical {
+  name: string
+  volume: number
+  checked: boolean
+}
+
+const chemicalList = ref<Chemical[]>([
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+  { name: '硝酸', volume: 300, checked: true },
+])
+</script>
+
+<template>
+  <div class="liquied-container">
+    <liquidItem
+      v-for="(item, index) in chemicalList"
+      :key="index"
+      :item-index="index"
+      :item-name="item.name"
+      :item-volume="item.volume"
+      :item-checked="item.checked"
+    />
+  </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>
diff --git a/src/views/container/liquidItem.vue b/src/views/container/liquidItem.vue
new file mode 100644
index 0000000..1163f2b
--- /dev/null
+++ b/src/views/container/liquidItem.vue
@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { useSolutionStore } from '@/stores/useSolutionStore'
+import { Edit } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+
+defineProps({
+  itemIndex: {
+    type: Number,
+    required: true,
+  },
+  itemName: {
+    type: String,
+    required: true,
+  },
+  itemVolume: {
+    type: Number,
+    required: true,
+  },
+  itemChecked: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const solutionType = ref()
+
+const solutionStore = useSolutionStore()
+const liquidTotal = ref()
+
+const onInputBlur = (e: any) => {
+  console.log('ee====', e.targe.value)
+}
+</script>
+
+<template>
+  <div class="liquied-item">
+    <div class="header">
+      <div>{{ itemIndex + 1 }}</div>
+      <div style="margin-left: 5px;">
+        <el-select v-model="solutionType" size="small" placeholder="请选择" style="width: 100px; " class="right-base">
+          <el-option v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+    </div>
+    <div style="height:9.5rem">
+      <div class="liquied-main">
+        <div class="content">
+          <div class="bottle_base">
+            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+          </div>
+          <div class="bottle">
+            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-content">
+        <span>{{ itemVolume }}ml</span>
+      </div>
+      <div class="footer-edit">
+        <el-input :prefix-icon="Edit" @blur="onInputBlur" v-model="liquidTotal" style="width: 100px;" size="small" />ml
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.liquied-item {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 1rem;
+}
+.liquied-main {
+  position: relative;
+  margin-top: 1.5rem;
+}
+.content{
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.bottle_base{
+  position: absolute;
+}
+.bottle {
+  filter:hue-rotate(217deg) saturate(36);
+  mask: linear-gradient(to bottom, transparent 70%, rgb(38, 219, 50)); /* 仅显示底部 30% */
+  position: absolute;
+}
+.liquied-ml{
+  height: 38%;
+  position: absolute;
+  width: 52%;
+  margin-left: 24%;
+  margin-top: 20px;
+  background: #00ff9a;
+  border-radius: 10px;
+  bottom: 18px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(25, 137, 250, 0.1216);;
+  justify-content: center;
+  border-radius: 1rem 1rem 0 0;
+  height:2.5rem;
+}
+.content-img{
+  width: 80%;
+  height: 20vh;
+}
+.footer {
+  margin-top: 5px;
+  line-height: 20px;
+}
+.footer-content{
+  display: flex;
+  justify-content: center;
+}
+.footer-edit{
+  display: flex;
+  justify-content: center;
+  padding-left: 10px;
+}
+.checked {
+  text-decoration: line-through;
+}
+</style>
diff --git a/src/views/liquid/index.vue b/src/views/liquid/index.vue
deleted file mode 100644
index b0ed49c..0000000
--- a/src/views/liquid/index.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import liquidItem from './liquidItem.vue'
-
-interface Chemical {
-  name: string
-  volume: number
-  checked: boolean
-}
-
-const chemicalList = ref<Chemical[]>([
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-  { name: '硝酸', volume: 300, checked: true },
-])
-</script>
-
-<template>
-  <div class="liquied-container">
-    <liquidItem
-      v-for="(item, index) in chemicalList"
-      :key="index"
-      :item-index="index"
-      :item-name="item.name"
-      :item-volume="item.volume"
-      :item-checked="item.checked"
-    />
-  </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>
diff --git a/src/views/liquid/liquidItem.vue b/src/views/liquid/liquidItem.vue
deleted file mode 100644
index 6a8b40e..0000000
--- a/src/views/liquid/liquidItem.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts" setup>
-import { useLiquidStore } from '@/stores/useLiquidsStore'
-import { Edit } from '@element-plus/icons-vue'
-import { ref } from 'vue'
-
-defineProps({
-  itemIndex: {
-    type: Number,
-    required: true,
-  },
-  itemName: {
-    type: String,
-    required: true,
-  },
-  itemVolume: {
-    type: Number,
-    required: true,
-  },
-  itemChecked: {
-    type: Boolean,
-    required: true,
-  },
-})
-
-const solutionType = ref()
-
-const liquidStore = useLiquidStore()
-</script>
-
-<template>
-  <div class="liquied-item">
-    <div class="header">
-      <div>{{ itemIndex + 1 }}</div>
-      <div style="margin-left: 5px;">
-        <el-select v-model="solutionType" size="small" placeholder="请选择" style="width: 100px; " class="right-base">
-          <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </div>
-    </div>
-    <div style="height:9.5rem">
-      <div class="liquied-main">
-        <div class="content">
-          <div class="bottle_base">
-            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
-          </div>
-          <div class="bottle">
-            <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-content">
-        <span>{{ itemVolume }}ml</span>
-      </div>
-      <div class="footer-edit">
-        <el-input :prefix-icon="Edit" style="width: 100px;" size="small" />ml
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.liquied-item {
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  margin: 10px;
-  width: 150px;
-  text-align: center;
-  border-radius: 1rem;
-}
-.liquied-main {
-  position: relative;
-  margin-top: 1.5rem;
-}
-.content{
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-.bottle_base{
-  position: absolute;
-}
-.bottle {
-  filter:hue-rotate(217deg) saturate(36);
-  mask: linear-gradient(to bottom, transparent 70%, rgb(38, 219, 50)); /* 仅显示底部 30% */
-  position: absolute;
-}
-.liquied-ml{
-  height: 38%;
-  position: absolute;
-  width: 52%;
-  margin-left: 24%;
-  margin-top: 20px;
-  background: #00ff9a;
-  border-radius: 10px;
-  bottom: 18px;
-}
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(25, 137, 250, 0.1216);;
-  justify-content: center;
-  border-radius: 1rem 1rem 0 0;
-  height:2.5rem;
-}
-.content-img{
-  width: 80%;
-  height: 20vh;
-}
-.footer {
-  margin-top: 5px;
-  line-height: 20px;
-}
-.footer-content{
-  display: flex;
-  justify-content: center;
-}
-.footer-edit{
-  display: flex;
-  justify-content: center;
-  padding-left: 10px;
-}
-.checked {
-  text-decoration: line-through;
-}
-</style>
diff --git a/src/views/solution/index.vue b/src/views/solution/index.vue
new file mode 100644
index 0000000..ea0de35
--- /dev/null
+++ b/src/views/solution/index.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { delSols, getSolsList, saveSols } from '@/apis/solution'
+import { useSolutionStore } from '@/stores/useSolutionStore'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+onMounted(() => {
+  querySolutionList()
+})
+const tableData = ref([])
+const visible = ref(false)
+const name = ref('')
+const loading = ref(false)
+const selectedList = ref<Solution.SolutionItem[]>([])
+const solutionStore = useSolutionStore()
+const querySolutionList = () => {
+  getSolsList().then((res) => {
+    if (res && res.list) {
+      tableData.value = res.list
+      // 保存至store
+      solutionStore.updateSolution(res.list)
+    }
+  })
+}
+
+const addSolution = () => {
+  visible.value = true
+}
+
+const editSolution = () => {
+  visible.value = true
+}
+
+const delSolution = () => {
+  if (!selectedList.value.length) {
+    ElMessage.warning('请选择要编辑的数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确认删除选中的数据吗？',
+    '确认提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    const ids = selectedList.value.map(item => item.id)
+    delSols(ids.join(',')).then(() => {
+      ElMessage.success('删除成功')
+      querySolutionList()
+    })
+  })
+}
+
+const onSelectionChange = (rows: Solution.SolutionItem[]) => {
+  console.log('rows===', rows)
+  selectedList.value = rows
+}
+
+const onConfirm = () => {
+  if (!name.value) {
+    ElMessage.warning('请输入溶液名称')
+    return
+  }
+  loading.value = true
+  const params = {
+    name: name.value,
+  }
+  saveSols(params).then(() => {
+    ElMessage.success('保存成功')
+    visible.value = false
+    name.value = ''
+    querySolutionList()
+  })
+}
+
+const closeDialog = () => {
+  visible.value = false
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <FtButton @click="addSolution">
+        添加溶液
+      </FtButton>
+      <FtButton @click="editSolution">
+        编辑溶液
+      </FtButton>
+      <FtButton @click="delSolution">
+        删除溶液
+      </FtButton>
+    </div>
+    <div>
+      <el-table :data="tableData" stripe style="width: 100%" @selection-change="onSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="name" label="溶液名称" />
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column prop="updateTime" label="更新时间" />
+      </el-table>
+    </div>
+    <FtDialog v-model="visible" title="添加溶液" style="width:35vw; height:30vh">
+      <div class="add-content">
+        <label>溶液名称：</label>
+        <span><el-input v-model="name" style="width:200px" /></span>
+      </div>
+      <template #footer>
+        <div class="footer">
+          <FtButton @click="closeDialog">
+            取消
+          </FtButton>
+          <FtButton :click-handle="onConfirm">
+            确定
+          </FtButton>
+        </div>
+      </template>
+    </FtDialog>
+  </div>
+</template>
+
+<style scoped>
+.add-content{
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+.footer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 4rem;
+}
+.craft-tag{
+  display: flex;
+}
+</style>