feat: 车机功能

src/api/is/func/index.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+// 查询语音交互-方案列表
+export function getTreeDataApi() {
+  return request({
+    url: '/ti/config/list',
+    method: 'get'
+  })
+}
+
+export function postTreeData(data) {
+  return request({
+    url: '/ti/config',
+    method: 'post',
+    data
+  })
+}
+
+export function updateTreeData(data) {
+  return request({
+    url: '/ti/config',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteTreeData(ids) {
+  return request({
+    url: `/ti/config/${ids}`,
+    method: 'delete'
+  })
+}
+
+export function addFunction(data) {
+  return request({
+    url: '/ti/function',
+    method: 'post',
+    data
+  })
+}
+
+export function getFunction(params) {
+  return request({
+    url: '/ti/function/list',
+    method: 'get',
+    params
+  })
+}
+
+export function updateFunction(data) {
+  return request({
+    url: '/ti/function',
+    method: 'put',
+    data
+  })
+}
+
+export function deleteFunction(ids) {
+  return request({
+    url: `/ti/function/${ids}`,
+    method: 'delete'
+  })
+}

src/api/is/im/index.js

@@ -0,0 +1,2 @@
+import request from '@/utils/request'
+

src/views/is/func/FunctionTable/FunctionDialog.vue

@@ -11,17 +11,22 @@
       :rules="formRules"
       label-width="80px"
     >
-      <el-form-item label="功能选择" prop="name">
+      <el-form-item label="功能选择" prop="funcKey">
-        <el-select>
+        <el-select v-model="formData.funcKey">
-          <el-option>11</el-option>
+          <el-option
+            v-for="dict in ti_function_config"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="上传图片">
-        <FileUpload :modelValue="imgUrl" :limit="1" :fileSize="5" :fileType="['png', 'jpg', 'jpeg']" />
+        <FileUpload v-model="imgUrl" :limit="1" :fileSize="5" :fileType="['png', 'jpg', 'jpeg']" />
       </el-form-item>
-      <el-form-item label="描述" prop="description">
+      <el-form-item label="描述" prop="remark">
         <el-input
-          v-model="formData.description"
+          v-model="formData.remark"
           type="textarea"
           :rows="3"
           placeholder="请输入描述"
@@ -41,6 +46,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import FileUpload from '@/components/FileUpload/index'
+import { useDict } from '@/utils/dict'
 
 const props = defineProps({
   visible: {
@@ -58,11 +64,13 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:visible', 'confirm'])
 
+const { ti_function_config } = useDict("ti_function_config");
+
 const formRef = ref()
 
 // 表单验证规则
 const formRules = {
-  name: [
+  funcKey: [
     { required: true, message: '请输入功能名称', trigger: 'blur' }
   ]
 }
@@ -73,6 +81,9 @@ const imgUrl = ref('')
 
 watch(() => props.visible, (newVal) => {
   visible.value = newVal
+  if (props.formData.iconUrl) {
+    imgUrl.value = props.formData.iconUrl
+  }
 })
 
 watch(visible, (newVal) => {
@@ -83,7 +94,11 @@ function handleConfirm() {
   if (!formRef.value) return
 
   formRef.value.validate((valid) => {
-    emit('confirm', valid, { ...props.formData })
+    const obj = { ...props.formData }
+    if (imgUrl.value && imgUrl.value.length > 0) {
+      obj.iconUrl = imgUrl.value
+    }
+    emit('confirm', valid, { ...obj })
   })
 }
 

src/views/is/func/FunctionTable/FunctionTable.vue

@@ -4,7 +4,7 @@
     <el-form :model="searchForm" class="search-form">
       <el-form-item label="功能名称">
         <el-input
-          v-model="searchForm.name"
+          v-model="searchForm.funcKey"
           placeholder="请输入功能名称"
           clearable
           style="width: 200px"
@@ -12,20 +12,21 @@
       </el-form-item>
       <el-form-item label="描述">
         <el-input
-          v-model="searchForm.description"
+          v-model="searchForm.remark"
           placeholder="请输入描述"
           clearable
           style="width: 200px"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="handleSearch">搜索</el-button>
+        <el-button type="primary" @click="getDataList()">搜索</el-button>
         <el-button @click="handleReset">重置</el-button>
       </el-form-item>
     </el-form>
 
     <!-- 表格操作栏 -->
     <div class="table-actions">
+      <div class="title">选中左侧的车机版本后，才显示数据</div>
       <el-button type="primary" @click="handleAddFunction">
         <el-icon><Plus /></el-icon>
         新增功能
@@ -34,23 +35,47 @@
 
     <!-- 功能表格 -->
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="id" label="ID" />
-      <el-table-column prop="name" label="功能名称" min-width="120" />
+      <el-table-column prop="funcKey" label="功能名称"/>
-      <el-table-column prop="description" label="描述" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="iconUrl" label="图片" >
-      <el-table-column prop="createTime" label="创建日期" width="180">
         <template #default="{ row }">
-          {{ formatDate(row.createTime) }}
+          <el-image 
+            v-if="row.iconUrl"
+            style="height: 32px"
+            :src="getImgUrl(row.iconUrl)"
+            @click="showViewer(row.iconUrl)">
+          </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="100">
+      <el-table-column prop="remark" label="描述" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="创建日期" ></el-table-column>
+      <el-table-column label="操作" width="200">
         <template #default="{ row }">
-          <el-button link type="danger" @click="handleDeleteFunction(row)">
+          <el-button link type="primary" @click="handleUpdateFunction(row)">
+            编辑
+          </el-button>
+          <el-button link type="primary" @click="handleDeleteFunction(row)">
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
+    <pagination
+      v-model:limit="searchForm.pageSize"
+      v-model:page="searchForm.pageNum"
+      :total="total"
+      @pagination="getList"
+  />
+
+    <!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
+    <ElImageViewer
+      v-if="isViewerOpen"
+      :url-list="[getImgUrl(currentImage)]"
+      @close="closeViewer"
+      append-to-body
+    />
+
     <!-- 功能编辑对话框 -->
     <FunctionDialog
       v-model:visible="functionDialogVisible"
@@ -62,37 +87,29 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox, ElImageViewer  } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import FunctionDialog from './FunctionDialog.vue'
+import { addFunction, getFunction, updateFunction, deleteFunction } from '@/api/is/func/index'
+
+const props = defineProps({
+  selectNode: {
+    type: Object,
+    default: () => {}
+  }
+})
 
 // 表格数据
-const tableData = ref([
+const tableData = ref([])
-  {
-    id: 1,
-    name: '导航系统',
-    description: '提供实时导航和路线规划功能',
-    createTime: '2024-01-15 10:30:00'
-  },
-  {
-    id: 2,
-    name: '语音助手',
-    description: '支持语音控制和智能交互',
-    createTime: '2024-01-16 14:20:00'
-  },
-  {
-    id: 3,
-    name: '娱乐系统',
-    description: '音乐、视频播放和在线流媒体',
-    createTime: '2024-01-17 09:15:00'
-  }
-])
 
+const total = ref(0)
 // 搜索表单
 const searchForm = reactive({
-  name: '',
+  funcKey: '',
-  description: ''
+  remark: '',
+  pageNum: 1,
+  pageSize: 10,
 })
 
 // 对话框相关
@@ -101,83 +118,137 @@ const functionDialogTitle = ref('')
 
 // 表单数据
 const functionFormData = reactive({
-  name: '',
+  funcKey: '',
-  description: ''
+  remark: '',
+  id: null,
+  iconUrl: null
 })
 
-// 生成ID
-let functionIdCounter = 100
-
-function generateFunctionId() {
-  return functionIdCounter++
-}
-
-// 搜索功能
-function handleSearch() {
-  // 实际项目中这里应该是API调用
-  ElMessage.info('执行搜索操作')
-  console.log('搜索条件:', searchForm)
-}
-
 // 重置搜索
 function handleReset() {
-  searchForm.name = ''
+  searchForm.funcKey = ''
-  searchForm.description = ''
+  searchForm.remark = ''
-  handleSearch()
+  searchForm.pageSize = 10
+  searchForm.pageNum = 1
+  getDataList()
 }
 
+const isAdd = ref(true)
+
 // 新增功能
 function handleAddFunction() {
+  if (props.selectNode?.type !== 'version') {
+    ElMessage.warning('请先选择车机版本')
+    return
+  }
+  isAdd.value = true
   functionDialogTitle.value = '新增功能'
-  functionFormData.name = ''
+  functionFormData.funcKey = ''
-  functionFormData.description = ''
+  functionFormData.remark = ''
+  functionFormData.iconUrl = null
+  functionFormData.id = null
   functionDialogVisible.value = true
 }
 
 // 确认功能操作
-function handleFunctionConfirm(valid, formData) {
+async function handleFunctionConfirm(valid, data) {
   if (valid) {
     const newFunction = {
-      id: generateFunctionId(),
+      ...data,
-      name: formData.name,
+      vehicleConfigId: props.selectNode.id
-      description: formData.description,
+    }
-      createTime: new Date().toLocaleString('zh-CN')
+    let res
+    if (isAdd.value) {
+      res = await addFunction(newFunction)
+    } else {
+      res = await updateFunction(newFunction)
+    }
+    if (res.code === 200) {
+      functionDialogVisible.value = false
+      getDataList()
+      ElMessage.success(res.msg)
+    } else {
+      ElMessage.error(res.msg)
     }
-
-    tableData.value.unshift(newFunction)
-    functionDialogVisible.value = false
-    ElMessage.success('新增功能成功')
   }
 }
 
 // 删除功能
 function handleDeleteFunction(row) {
   ElMessageBox.confirm(
-    `确定要删除功能"${row.name}"吗？`,
+    `确定要删除功能"${row.funcKey}"吗？`,
     '警告',
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }
-  ).then(() => {
+  ).then(async () => {
-    const index = tableData.value.findIndex(item => item.id === row.id)
+    const res = await deleteFunction(row.id)
-    if (index > -1) {
+    if (res.code === 200) {
-      tableData.value.splice(index, 1)
+      getDataList()
-      ElMessage.success('删除成功')
+      ElMessage.success(res.msg)
+    } else {
+      ElMessage.error(res.msg)
     }
   }).catch(() => {
     // 用户取消删除
   })
 }
 
-// 格式化日期
+const getDataList = async () => {
-function formatDate(dateString) {
+  if (props.selectNode?.type !== 'version') {
-  return dateString
+    ElMessage.warning('请先选择车机版本')
+    return
+  }
+  const res = await getFunction({
+    ...searchForm,
+    vehicleConfigId: props.selectNode.id
+  })
+  if (res.code === 200) {
+    tableData.value = res.rows
+    total.value = res.total
+  }
 }
+
+const getImgUrl = (url) => {
+  return import.meta.env.VITE_API_URL + url
+}
+
+const isViewerOpen = ref(false);
+const currentImage = ref('');
+
+const showViewer = (url) => {
+  currentImage.value = url;
+  isViewerOpen.value = true;
+};
+
+const closeViewer = () => {
+  isViewerOpen.value = false;
+};
+
+const handleUpdateFunction = (row) => {
+  functionDialogTitle.value = '编辑功能'
+  isAdd.value = false
+  functionFormData.funcKey = row.funcKey
+  functionFormData.remark = row.remark
+  functionFormData.id = row.id
+  functionFormData.iconUrl = row.iconUrl || null
+  functionDialogVisible.value = true
+}
+
+watch(() => props.selectNode,
+  (newVal) => {
+    if (newVal && newVal.type === 'version') {
+      getDataList()
+    } else {
+      tableData.value = []
+    }
+  }
+)
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .function-table {
   height: 100%;
   display: flex;
@@ -195,6 +266,12 @@ function formatDate(dateString) {
 .table-actions {
   margin-bottom: 16px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: end;
+
+  .title {
+    font-size: 14px;
+    color: #999;
+  }
 }
 </style>

src/views/is/func/TreePanel/TreeDialog.vue

@@ -16,7 +16,7 @@
       </el-form-item>
       <el-form-item label="描述" prop="description">
         <el-input
-          v-model="formData.description"
+          v-model="formData.remark"
           type="textarea"
           :rows="3"
           placeholder="请输入描述"
@@ -63,22 +63,16 @@ const formRules = {
   name: [
     { required: true, message: '请输入名称', trigger: 'blur' },
     { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
-  ],
-  description: [
-    { required: true, message: '请输入描述', trigger: 'blur' },
-    { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
   ]
 }
 
 const visible = ref(props.visible)
 
 watch(() => props.visible, (newVal) => {
-  console.log(123)
   visible.value = newVal
 })
 
 watch(visible, (newVal) => {
-  console.log(234)
   emit('update:visible', newVal)
 })
 

src/views/is/func/TreePanel/TreePanel.vue

@@ -13,6 +13,7 @@
         node-key="id"
         :props="treeProps"
         :expand-on-click-node="false"
+        :highlight-current="true"
         default-expand-all
         @node-click="handleNodeClick"
       >
@@ -21,7 +22,7 @@
             <span>{{ node.label }}</span>
             <span class="node-actions">
               <!-- 车企层级 -->
-              <template v-if="data.level === 1">
+              <template v-if="data.type === 'oem'">
                 <el-button link type="primary" @click="handleAddModel(data)">
                   <el-icon><Plus /></el-icon>
                 </el-button>
@@ -34,7 +35,7 @@
               </template>
               
               <!-- 车型层级 -->
-              <template v-else-if="data.level === 2">
+              <template v-else-if="data.type === 'model'">
                 <el-button link type="primary" @click="handleAddVersion(data)">
                   <el-icon><Plus /></el-icon>
                 </el-button>
@@ -47,7 +48,7 @@
               </template>
               
               <!-- 车机版本层级 -->
-              <template v-else-if="data.level === 3">
+              <template v-else-if="data.type === 'version'">
                 <el-button link type="primary" @click="handleEdit(data)">
                   <el-icon><Edit /></el-icon>
                 </el-button>
@@ -77,75 +78,28 @@ import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Edit, Delete } from '@element-plus/icons-vue'
 import TreeDialog from './TreeDialog.vue'
+import { getTreeDataApi, postTreeData, updateTreeData, deleteTreeData } from '@/api/is/func/index'
 
 // 定义 emits
 const emit = defineEmits()
 
 // 树形结构数据
-const treeData = ref([
+const treeData = ref([])
-  {
-    id: 1,
-    label: '特斯拉',
-    level: 1,
-    description: '电动汽车制造商',
-    children: [
-      {
-        id: 11,
-        label: 'Model 3',
-        level: 2,
-        description: '中型电动轿车',
-        parentId: 1,
-        children: [
-          {
-            id: 111,
-            label: 'V11.0',
-            level: 3,
-            description: '2023年车机系统版本',
-            parentId: 11
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 2,
-    label: '比亚迪',
-    level: 1,
-    description: '中国新能源汽车品牌',
-    children: [
-      {
-        id: 21,
-        label: '汉 EV',
-        level: 2,
-        description: '旗舰电动轿车',
-        parentId: 2,
-        children: [
-          {
-            id: 211,
-            label: 'DiLink 4.0',
-            level: 3,
-            description: '智能网联系统',
-            parentId: 21
-          }
-        ]
-      }
-    ]
-  }
-])
 
 // 对话框相关
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 
+const currentNode = ref(null)
 // 表单数据
 const formData = reactive({
   name: '',
-  description: ''
+  remark: '',
+  type: 'oem'
 })
 
 // 当前操作的相关信息
 const currentAction = ref('add')
-const currentNode = ref(null)
 const currentLevel = ref(0)
 
 // 树形配置
@@ -154,61 +108,51 @@ const treeProps = {
   label: 'label'
 }
 
-// 生成ID
-let treeIdCounter = 1000
-
-function generateTreeId() {
-  return treeIdCounter++
-}
-
 // 树节点点击
-function handleNodeClick(data) {
+const handleNodeClick = (data) => {
   emit('node-click', data)
 }
 
 // 新增车企
-function handleAddManufacturer() {
+const handleAddManufacturer = () => {
   currentAction.value = 'add'
-  currentLevel.value = 1
   dialogTitle.value = '新增车企'
-  resetForm()
+  formData.type = 'oem'
-  console.log('新增车企')
   dialogVisible.value = true
+  currentNode.value = null
 }
 
 // 新增车型
-function handleAddModel(node) {
+const handleAddModel = (node) => {
   currentAction.value = 'add'
-  currentLevel.value = 2
-  currentNode.value = node
   dialogTitle.value = '新增车型'
-  resetForm()
+  formData.type = 'model'
   dialogVisible.value = true
+  currentNode.value = node
 }
 
 // 新增车机版本
-function handleAddVersion(node) {
+const handleAddVersion = (node) => {
   currentAction.value = 'add'
-  currentLevel.value = 3
   currentNode.value = node
+  formData.type = 'version'
   dialogTitle.value = '新增车机版本'
-  resetForm()
   dialogVisible.value = true
 }
 
 // 编辑节点
-function handleEdit(node) {
+const handleEdit = (node) => {
   currentAction.value = 'edit'
-  currentLevel.value = node.level
-  currentNode.value = node
   dialogTitle.value = getEditTitle(node.level)
   formData.name = node.label
-  formData.description = node.description || ''
+  formData.type = node.type
+  currentNode.value = node
+  formData.remark = node.remark || ''
   dialogVisible.value = true
 }
 
 // 删除节点
-function handleDelete(node) {
+const handleDelete = (node) => {
   ElMessageBox.confirm(
     `确定要删除"${node.label}"吗？此操作不可恢复。`,
     '警告',
@@ -218,77 +162,78 @@ function handleDelete(node) {
       type: 'warning'
     }
   ).then(() => {
-    deleteNode(treeData.value, node.id)
+    deleteNode(node)
-    ElMessage.success('删除成功')
-    emit('tree-update')
   }).catch(() => {
     // 用户取消删除
   })
 }
 
-// 递归删除节点
+// 删除节点
-function deleteNode(nodes, id) {
+const deleteNode = async (node) => {
-  for (let i = 0; i < nodes.length; i++) {
+ if (node.children && node.children.length > 0) {
-    if (nodes[i].id === id) {
+    ElMessage.warning('请先删除该节点的子节点')
-      nodes.splice(i, 1)
+    return
-      return true
+ }
-    }
+  const res = await deleteTreeData(node.id)
-    if (nodes[i].children) {
+  if (res.code === 200) {
-      if (deleteNode(nodes[i].children, id)) {
+    getTree()
-        return true
-      }
-    }
   }
-  return false
+  ElMessage.success(res?.msg || '操作失败')
 }
 
 // 重置表单
-function resetForm() {
+const resetForm = () => {
   formData.name = ''
-  formData.description = ''
+  formData.remark = ''
+  formData.type = 'oem'
 }
 
 // 获取编辑标题
-function getEditTitle(level) {
+const getEditTitle = (level) => {
   const titles = ['', '编辑车企', '编辑车型', '编辑车机版本']
   return titles[level] || '编辑'
 }
 
 // 确认树节点操作
-function handleConfirm(valid, formData) {
+const handleConfirm = async (valid, data) => {
   if (valid) {
     if (currentAction.value === 'add') {
-      // 新增操作
+      const res = await postTreeData({
-      const newNode = {
+        ...data,
-        id: generateTreeId(),
+        type: formData.type,
-        label: formData.name,
+        parentId: currentNode.value.id
-        level: currentLevel.value,
+      })
-        description: formData.description,
+      if (res.code === 200) {
-        parentId: currentNode.value?.id
+        dialogVisible.value = false
+        getTree()
+        resetForm()
       }
-
+      ElMessage.success(res?.msg || '操作失败')
-      if (currentLevel.value === 1) {
+    } else if (currentAction.value === 'edit') {
-        // 新增车企
+      const res = await updateTreeData({
-        newNode.children = []
+        ...data,
-        treeData.value.push(newNode)
+        id: currentNode.value.id
-      } else if (currentNode.value) {
+      })
-        // 新增车型或版本
+      if (res.code === 200) {
-        if (!currentNode.value.children) {
+        dialogVisible.value = false
-          currentNode.value.children = []
+        getTree()
-        }
+        resetForm()
-        currentNode.value.children.push(newNode)
       }
-    } else if (currentAction.value === 'edit' && currentNode.value) {
+      ElMessage.success(res?.msg || '操作失败')
-      // 编辑操作
-      currentNode.value.label = formData.name
-      currentNode.value.description = formData.description
     }
-
-    dialogVisible.value = false
-    ElMessage.success('操作成功')
-    emit('tree-update')
   }
 }
+
+const getTree = async () => {
+  const res = await getTreeDataApi()
+  if (res) {
+    treeData.value = res
+  }
+}
+
+onMounted(() => {
+  getTree()
+})
 </script>
 
 <style scoped>

src/views/is/func/index.vue

@@ -2,12 +2,12 @@
   <div class="is-container">
     <!-- 左侧树形面板 -->
     <div class="left-panel">
-      <TreePanel @node-click="handleNodeClick" @tree-update="handleTreeUpdate" />
+      <TreePanel @node-click="handleNodeClick" />
     </div>
 
     <!-- 右侧功能表格 -->
     <div class="right-panel">
-      <FunctionTable />
+      <FunctionTable :selectNode="selectNode" />
     </div>
   </div>
 </template>
@@ -16,13 +16,11 @@
 import TreePanel from './TreePanel/TreePanel.vue'
 import FunctionTable from './FunctionTable/FunctionTable.vue'
 
-function handleNodeClick(data) {
+const selectNode = ref(null)
-  console.log('选中节点:', data)
+const handleNodeClick = (data) => {
+  selectNode.value = data
 }
 
-function handleTreeUpdate() {
-  console.log('树结构已更新')
-}
 </script>
 
 <style scoped>

src/views/is/im/TreePanel/TreePanel.vue

@@ -10,6 +10,7 @@
         node-key="id"
         :props="treeProps"
         :expand-on-click-node="false"
+        :highlight-current="true"
         default-expand-all
         @node-click="handleNodeClick"
       >

vite.config.js

@@ -35,8 +35,8 @@ export default defineConfig(({mode, command}) => {
                     //杨 http://192.168.0.10:13080
                     //赵 http://10.148.108.58:13080
                     // dev http://10.148.20.34:13080
-                    target: VITE_API_URL,
+                    // target: VITE_API_URL,
-                    // target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
+                    target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')
                 }