优化喷涂

.env

@@ -1,3 +1,3 @@
-VITE_API_HOST=192.168.1.199
+VITE_API_HOST=192.168.1.130
 VITE_API_PORT=8090
 VITE_WS_PATH=/ws

src/router/index.ts

@@ -7,7 +7,7 @@ import PreSpray from "@/views/PreSpray.vue";
 import SprayView from "../views/SprayView.vue";
 import PrintView from "../views/PrintView.vue";
 import Debug from '../views/debug/index.vue'
-import SpurtPrint from '../views/spurtPrint/index.vue'
+import MatrixCraft from '../views/matrixCraft/index.vue'
 import MatrixManage from '../views/matrixManage/matrixList.vue'
 
 
@@ -48,9 +48,9 @@ const router = createRouter({
 					name: "debug",
 					component: Debug,
 				},{
-					path: "/spurtPrint",
-					name: "spurtPrint",
-					component: SpurtPrint
+					path: "/matrixCraft",
+					name: "matrixCraft",
+					component: MatrixCraft
 				},{
 					path: "/matrixManage",
 					name: "matrixManage",

src/services/matrix/craft.ts

@@ -0,0 +1,12 @@
+import httpRequest, { type BaseResponse } from "../httpRequest";
+type ResponseParams = {
+  pageNum: number;
+  pageSize: number;
+}
+export function getList(params:ResponseParams){
+  return httpRequest<BaseResponse<string>>({
+      url: "/api/matrixCraft/list",
+      params: { ...params },
+      method: "GET",
+    });
+}

src/services/matrix/manage.ts

@@ -0,0 +1,27 @@
+import httpRequest, { type BaseResponse } from "../httpRequest";
+import type { MatrixItem }  from './type';
+
+
+export function getList(params: { pageNum: number; pageSize: number }){
+  return httpRequest<BaseResponse<{ list: MatrixItem[]; total: number }>>({
+      url: "/api/matrix/list",
+      params: { ...params },
+      method: "GET",
+    });
+}
+
+export function add(params:{name: string}){
+  return httpRequest<BaseResponse>({
+      url: "/api/matrix/add",
+      params: { ...params },
+      method: "POST",
+    });
+}
+
+export function updateMatrix(params:{name: string, id: number}){
+  return httpRequest<BaseResponse>({
+      url: "/api/matrix",
+      params: { ...params },
+      method: "PUT",
+    });
+}

src/services/matrix/type.ts

@@ -0,0 +1,20 @@
+export type ResponseParams = {
+  pageNum: number;
+  pageSize: number;
+}
+
+export const defaultParams = {
+  pageNum: 1,
+  pageSize: 10
+}
+
+export type MatrixItem = {
+  id: number;
+  name: string;
+  isSelected?: boolean;
+};
+
+export type MatrixItemList = {
+  list:MatrixItem,
+  total:number
+}

src/views/spurtPrint/index.vue → src/views/matrixCraft/index.vue

@@ -18,6 +18,11 @@
   </footer>
 </template>
 <script lang="ts" setup>
+  import { ref, onMounted } from 'vue'
+  import { getList } from '@/services/matrix/craft'
+  onMounted(()=>{
+    getCraftList()
+  })
   const tableData = [
     {
       craftName: '1',
@@ -25,6 +30,16 @@
       line: '1',
     }
   ]
+
+  const getCraftList = () => {
+    const params = {
+      pageNum:1,
+      pageSize:10,
+    }
+    getList(params).then(res=>{
+      console.log('res====', res)
+    })
+  }
 </script>
 <style lang="scss" scoped>
   .el-button--primary{

src/views/matrixManage/matrixList.vue

@@ -2,20 +2,22 @@
   <main>
     <div class="opt_btn p-[3rem]">
       <el-button type="primary" @click="onAdd">新增基质</el-button>
-      <el-button>编辑</el-button>
+      <el-button @click="onEdit">编辑</el-button>
       <el-button>删除</el-button>
     </div>
-    <div class="matrix_list">
-
+    <div class="matrix_list pl-[3rem]">
+      <div v-for="(item, index) in matrixList" class="w-[8rem] h-[3rem] matrix_module" @click="toggleSelection(index)" :style="{ backgroundColor: item.isSelected ? '#65a8ff' : '#ffffff' }">
+        {{ item.name }}
+      </div>
     </div>
-    <el-dialog v-model="addVisible" width="20rem" align-center>
+    <el-dialog v-if="addVisible" v-model="addVisible" width="25rem" align-center :close-on-click-modal="false" destroy-on-close>
       <template #header><h2>新增基质</h2></template>
-      <el-form ref="ruleFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
+      <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
         <el-form-item label="基质名称" prop="name">
           <el-input v-model="addForm.name" />
         </el-form-item>
       </el-form>
-      <div class="flex justify-center">
+      <div class="flex justify-center h-[5rem] pt-[2rem]">
         <el-button type="primary" @click="onSave">保存</el-button>
         <el-button @click="onCancel">取消</el-button>
       </div>
@@ -23,34 +25,122 @@
   </main>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { ref, reactive, onMounted } from 'vue'
+  import type { MatrixItem } from './type'
+  import { ElMessage } from "element-plus";
+  import {getList, add, updateMatrix} from '@/services/matrix/manage'
   const addVisible = ref(false)
-  const addForm = ref<Record<string,string>>({})
+  let addForm = reactive<Record<string,string>>({})
+  const addFormRef:any =  ref<any>()
   const rules = ref({
     name: [{
       required: true,
       message: '请输入名称',
-      trigger: 'change',
+      trigger: 'blur',
     }]
   })
-  const matrixList = ref([])
+  const matrixList = ref<Array<MatrixItem>>([])
 
+  onMounted(()=>{
+    getMatrixList()
+  })
+
+  const getMatrixList = () => {
+    const params = {
+      pageNum:1,
+      pageSize:20,
+    }
+    getList(params).then(res => {
+      if(res.success){
+        const { list } = res.data;
+        matrixList.value = list;
+      }
+    })
+  }
+  const toggleSelection = (index:number) => {
+    matrixList.value[index].isSelected = !matrixList.value[index].isSelected;
+  }
+  let saveType = 'add'
   const onAdd = () => {
     addVisible.value = true;
+    saveType = 'add'
   }
 
+  let editItem = <MatrixItem>{}
+  const onEdit = () => {
+    let list = matrixList.value.filter((item:MatrixItem) => !!item.isSelected)
+    if(list.length !== 1){
+      ElMessage.error("只能编辑一条数据")
+      return;
+    }
+    saveType = 'edit'
+    editItem = list[0]
+    addForm.name = editItem.name
+    addVisible.value = true;
+  }
   const onSave = () => {
-    console.log('form----', addForm.value)
+    addFormRef.value.validate((vali:boolean) => {
+      if(vali){
+        if(saveType === 'add'){
+          doSave()
+        }else if(saveType === 'edit'){
+          doEdit()
+        }
+        
+      }
+    })
+  }
+
+  const doEdit = () => {
+    const params = {
+      name:addForm.name,
+      id:editItem.id
+    }
+    updateMatrix(params).then(res => {
+      console.log('编辑基质-------', res)
+      if(res.success){
+        ElMessage.success('编辑成功')
+        getMatrixList()
+        onCancel()
+      }
+    })
+  }
+
+
+  const doSave = ()=>{
+    const params = {
+      name:addForm.name
+    }
+    add(params).then(res => {
+      console.log('新增基质-------', res)
+      if(res.success){
+        ElMessage.success('新增成功')
+        getMatrixList()
+        onCancel()
+      }
+    })
   }
 
   const onCancel = () => {
-    addForm.value = {}
+    addForm = {}
     addVisible.value = false;
   }
 
+
 </script>
 <style lang="scss" scoped>
   .el-button--primary{
     background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
   }
+
+  .matrix_list{
+    display: grid;
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .matrix_module{
+    background: #ffffff;
+    border-radius: 10px;
+    line-height: 3rem;
+    text-align: center;
+  }
 </style>

src/views/matrixManage/type.ts

@@ -0,0 +1,6 @@
+export type MatrixItem = {
+  id: number;
+  name: string;
+  isSelected?: boolean;
+};
+

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
 		port: 5175,
 		proxy: {
 			"/api": {
-				target: "http://192.168.1.199:8090",
+				target: "http://192.168.1.130:8090",
 				// target: "http://localhost:8080",
 				changeOrigin: true,
 				// rewrite: (path) => path.replace(/^\/api/, ''),