feat: 坐标管理

server/routes/point.js

@@ -0,0 +1,31 @@
+const baseUrl = '/api/device-point'
+export const pointRoutes = (app) => {
+  app.get(`${baseUrl}/list`, (req, res) => {
+    const mockResponse = {
+      code: '0',
+      data: [
+        {
+          id: 2,
+          name: '托盘夹取位置',
+          code: 'trayPick',
+          type: '直线距离',
+          position: null,
+        },
+      ],
+      msg: '成功',
+    }
+    setTimeout(() => {
+      res.json(mockResponse)
+    }, 1000)
+  })
+  app.put(`${baseUrl}`, (req, res) => {
+    const mockResponse = {
+      code: '0',
+      data: null,
+      msg: '成功',
+    }
+    setTimeout(() => {
+      res.json(mockResponse)
+    }, 2000)
+  })
+}

src/apis/point.ts

@@ -0,0 +1,4 @@
+import http from 'libs/http'
+
+export const getPointList = (): Promise<Point.Point[]> => http.get('/device-point/list')
+export const updatePoint = (params: Point.UpdateParams): Promise<null> => http.put('/device-point', params)

src/components/point/Edit/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { updatePoint } from 'apis/point'
+import { FtMessage } from 'libs/message'
+import { inject, ref } from 'vue'
+
+const emits = defineEmits(['ok', 'cancel'])
+
+const data = inject('currentData')
+
+const form = ref<Point.Point>(data as Point.Point)
+const formRef = ref()
+
+const rules = {
+  position: [
+    { required: true, message: '请输入坐标', trigger: 'blur' },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+
+    await updatePoint(form.value)
+    FtMessage.success('保存成功')
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const cancel = () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <FtDialog visible title="编辑" width="30%" :ok-handle="okHandle" @cancel="cancel">
+    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
+      <el-form-item label="名称">
+        <span>{{ form.name }}</span>
+      </el-form-item>
+      <el-form-item label="坐标" prop="position">
+        <el-input v-model="form.position" placeholder="请输入坐标" />
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+</style>

src/router/routes.ts

@@ -103,12 +103,12 @@ const authRoutes: RouteRecordRaw[] = [
     },
   },
   {
-    path: '/setting',
-    name: 'setting',
-    component: () => import('views/home/index.vue'),
+    path: '/point',
+    name: 'point',
+    component: () => import('views/point/index.vue'),
     meta: {
       isDefault: true,
-      title: '系统管理',
+      title: '坐标管理',
       icon: n_setting,
       activeIcon: s_setting,
     },

src/types/point.d.ts

@@ -0,0 +1,11 @@
+declare namespace Point {
+  interface Point extends UpdateParams {
+    name: string
+    code: string
+    type: string
+  }
+  interface UpdateParams {
+    id: number
+    position: string
+  }
+}

src/views/point/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { getPointList } from 'apis/point'
+import FtButton from 'components/common/FTButton/index.vue'
+import Edit from 'components/point/Edit/index.vue'
+import { cloneDeep } from 'lodash'
+import { h, provide, ref } from 'vue'
+
+const upDataVisible = ref(false)
+const currentData = ref<Point.Point>()
+provide('currentData', currentData)
+const columns = [
+  {
+    title: '名称',
+    key: 'name',
+  },
+  {
+    title: '坐标',
+    key: 'position',
+  },
+  {
+    title: '操作',
+    fixed: 'right',
+    width: 120,
+    render: (row: any) => {
+      return h(
+        FtButton,
+        {
+          class: ['table-cell-mouse-on'],
+          id: row.id,
+          onClick: () => {
+            upDataVisible.value = true
+            currentData.value = cloneDeep(row)
+          },
+        },
+        { default: () => '编辑' },
+      )
+    },
+  },
+]
+</script>
+
+<template>
+  <div>
+    <FtTable :has-header="false" :columns="columns" :get-data-fn="getPointList" />
+    <Edit v-if="upDataVisible" @ok="upDataVisible = false" @cancel="upDataVisible = false" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>