完善溶液配置

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}`)

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: '溶液管理',

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,
+  }
+})

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
+  }
+}

src/views/liquid/liquidItem.vue → src/views/container/liquidItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useLiquidStore } from '@/stores/useLiquidsStore'
+import { useSolutionStore } from '@/stores/useSolutionStore'
 import { Edit } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 
@@ -24,7 +24,12 @@ defineProps({
 
 const solutionType = ref()
 
-const liquidStore = useLiquidStore()
+const solutionStore = useSolutionStore()
+const liquidTotal = ref()
+
+const onInputBlur = (e: any) => {
+  console.log('ee====', e.targe.value)
+}
 </script>
 
 <template>
@@ -33,7 +38,7 @@ const liquidStore = useLiquidStore()
       <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-option v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </div>
     </div>
@@ -54,7 +59,7 @@ const liquidStore = useLiquidStore()
         <span>{{ itemVolume }}ml</span>
       </div>
       <div class="footer-edit">
-        <el-input :prefix-icon="Edit" style="width: 100px;" size="small" />ml
+        <el-input :prefix-icon="Edit" @blur="onInputBlur" v-model="liquidTotal" style="width: 100px;" size="small" />ml
       </div>
     </div>
   </div>

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>