feat: api调用

src/api/is/im/index.js

@@ -1,2 +1,32 @@
 import request from '@/utils/request'
 
+export function addUi(data) {
+  return request({
+    url: '/ti/ui',
+    method: 'post',
+    data
+  })
+}
+
+export function getUiList(params) {
+  return request({
+    url: '/ti/ui/list',
+    methods: 'get',
+    params
+  })
+}
+
+export function deleteUiList(ids) {
+  return request({
+    url: `/ti/ui/${ids}`,
+    method: 'delete'
+  })
+}
+
+export function updateUI(data) {
+  return request({
+    url: '/ti/ui',
+    method: 'put',
+    data
+  })
+}

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

@@ -66,7 +66,7 @@
       v-model:page="searchForm.pageNum"
       :total="total"
       @pagination="getList"
-  />
+    />
 
     <!-- 手动控制的预览组件，append-to-body 使其挂载到 body 末尾 -->
     <ElImageViewer

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

@@ -14,7 +14,6 @@
         :props="treeProps"
         :expand-on-click-node="false"
         :highlight-current="true"
-        default-expand-all
         @node-click="handleNodeClick"
       >
         <template #default="{ node, data }">

src/views/is/im/Table/Dialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     v-model="visible"
     :title="title"
-    width="500px"
+    width="700px"
     destroy-on-close
   >
     <el-form
@@ -11,19 +11,29 @@
       :rules="formRules"
       label-width="80px"
     >
-      <el-form-item label="界面名称" prop="name">
+      <el-form-item label="界面名称" prop="uiKey">
-        <el-input v-model="formData.name" placeholder="请输入界面名称" />
+        <el-select v-model="formData.uiKey">
+          <el-option
+            v-for="dict in ti_ui_config"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.label"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="描述" prop="description">
+      <el-form-item label="上传图片">
+        <FileUpload v-model="imgUrl" :limit="1" :fileSize="5" :fileType="['png', 'jpg', 'jpeg']" />
+      </el-form-item>
+      <el-form-item label="描述" prop="remark">
         <el-input
-          v-model="formData.description"
+          v-model="formData.remark"
           type="textarea"
           :rows="3"
           placeholder="请输入描述"
         />
       </el-form-item>
     </el-form>
-    
+    <FunctionSelection :funcIds="props.formData.funcIds" :selectNode="selectNode" :selectIds="selectIds" @updateSelectRows="getSelectRows" />
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
@@ -35,6 +45,9 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import { useDict } from '@/utils/dict'
+import FunctionSelection from './FunctionSelection.vue'
+import { ElMessage } from 'element-plus'
 
 const props = defineProps({
   visible: {
@@ -48,15 +61,22 @@ const props = defineProps({
   formData: {
     type: Object,
     default: () => {}
+  },
+  selectNode: {
+    type: Object,
+    default: () => {}
   }
 })
 const emit = defineEmits(['update:visible', 'confirm'])
 
+const imgUrl = ref('')
+const { ti_ui_config } = useDict("ti_ui_config");
+
 const formRef = ref()
 
 // 表单验证规则
 const formRules = {
-  name: [
+  uiKey: [
     { required: true, message: '请输入界面名称', trigger: 'blur' }
   ]
 }
@@ -65,6 +85,12 @@ const visible = ref(props.visible)
 
 watch(() => props.visible, (newVal) => {
   visible.value = newVal
+  if (props.formData.uiUrl) {
+    imgUrl.value = props.formData.uiUrl
+  }
+  if (props.formData.funcIds) {
+    selectIds.value = props.formData.funcIds.split(',')
+  }
 })
 
 watch(visible, (newVal) => {
@@ -72,16 +98,32 @@ watch(visible, (newVal) => {
 })
 
 function handleConfirm() {
+  if (selectIds.value.length === 0) {
+    ElMessage.warning('请先选择功能')
+    return
+  }
   if (!formRef.value) return
 
   formRef.value.validate((valid) => {
-    emit('confirm', valid, { ...props.formData })
+  const obj = {
+    ...props.formData,
+    funcIds: selectIds.value.toString()
+  }
+  if (imgUrl.value && imgUrl.value.length > 0) {
+      obj.uiUrl = imgUrl.value
+    }
+    emit('confirm', valid, { ...obj })
   })
 }
 
 function handleCancel() {
   visible.value = false
 }
+
+const selectIds = ref([])
+const getSelectRows = (arr) => {
+  selectIds.value = arr.map(item => item.id);
+};
 </script>
 
 <style scoped>

src/views/is/im/Table/FunctionSelection.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <div class="btn-container">
+      <el-button type="primary" @click="openDialog">功能选择</el-button>
+    </div>
+    <el-table :data="selectList" height="260">
+      <el-table-column
+        label="功能名称"
+        align="center"
+        prop="funcKey"
+        show-overflow-tooltip />
+      <el-table-column
+        label="功能图片"
+        align="center"
+        prop="textContent"
+        show-overflow-tooltip
+      />
+      <el-table-column
+          label="操作"
+          align="center"
+          min-width="200"
+        >
+          <template #default="{row}">
+            <el-button link type="primary" @click="unSelectRow(row)">删除</el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+
+    <el-dialog title="选择功能" v-model="open" width="700px">
+      <el-form
+        :model="queryParams"
+        ref="queryRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="功能名称" prop="funcKey">
+          <el-input
+            v-model="queryParams.funcKey"
+            placeholder="请输入功能名称"
+            clearable
+            @keyup.enter="getList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="getList"
+            >搜索</el-button
+          >
+          <el-button icon="Refresh" @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        ref="tableRef"
+        :data="tableList"
+        :height="400"
+        :tree-props="{ checkStrictly: true }"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          v-show="false"
+        />
+        <el-table-column
+          label="功能名称"
+          align="center"
+          prop="funcKey"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="功能图片"
+          align="center"
+          prop="textContent"
+          show-overflow-tooltip
+        />
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { onMounted, watch } from "vue";
+import { getFunction } from '@/api/is/func/index'
+
+const props = defineProps({
+  corpusIds: {
+    type: String,
+    default: "",
+  },
+  selectNode: {
+    type: Object,
+    default: () => {}
+  },
+  selectIds: {
+    type: Array,
+    default: () => []
+  },
+  funcIds: {
+    type: String,
+    default: ''
+  }
+});
+
+const emits = defineEmits(["updateSelectRows"]);
+
+const selectList = ref([]);
+const tableList = ref([]);
+
+const open = ref(false);
+const openDialog = () => {
+  open.value = true;
+  setTimeout(() => {
+    toggleRowSelection();
+  }, 100);
+};
+
+const toggleRowSelection = () => {
+  if (selectList.value.length > 0) {
+    tableList.value.forEach((row) => {
+      selectList.value.forEach((item) => {
+        if (item.id === row.id) {
+          tableRef.value.toggleRowSelection(row, true);
+        }
+      });
+    });
+  }
+};
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 100000,
+  funcKey: ''
+})
+
+const getList = async () => {
+  const res = await getFunction({
+    ...queryParams.value,
+    vehicleConfigId: props.selectNode.id
+  })
+  if (res.code === 200) {
+    tableList.value = res.rows
+  }
+};
+
+const getSelectList = async (funcIds) => {
+  const res = await getFunction({
+    funcIds,
+    vehicleConfigId: props.selectNode.id
+  })
+  if (res.code === 200) {
+    selectList.value = res.rows
+  }
+}
+
+const resetForm = () => {
+  queryParams.value.funcKey = ''
+  getList()
+}
+
+const tableRef = ref();
+const submitForm = () => {
+  const rows = tableRef.value.getSelectionRows();
+  selectList.value = rows;
+  emits("updateSelectRows", rows);
+  resetForm()
+  open.value = false;
+};
+
+const cancel = () => {
+  open.value = false;
+  resetForm()
+};
+
+const unSelectRow = (row) => {
+  if (tableRef.value) {
+    tableRef.value.toggleRowSelection(row, false);
+    const rows = tableRef.value.getSelectionRows();
+    selectList.value = rows;
+    emits("updateSelectRows", rows);
+  } else {
+    selectList.value = selectList.value.filter(item => {
+      item.id !== row.id
+    })
+    emits("updateSelectRows", selectList.value)
+  }
+}
+
+onMounted(() => {
+  getList();
+  if (props.funcIds) {
+    getSelectList(props.funcIds);
+  }
+});
+
+// watch(() => open,
+//   (newVal) => {
+//     if (newVal) {
+//       selectList.value = props.selectIds
+//     }
+//   }
+// )
+
+</script>
+<style lang="scss" scoped>
+.btn-container {
+  text-align: right;
+  margin-bottom: 12px;
+}
+</style>

src/views/is/im/Table/Table.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.uiKey"
           placeholder="请输入界面名称"
           clearable
           style="width: 200px"
@@ -12,21 +12,22 @@
       </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">
-      <el-button type="primary" @click="handleAddFunction">
+      <div class="title">选中左侧的车机版本后，才显示数据</div>
+      <el-button type="primary" @click="handleAddUI">
         <el-icon><Plus /></el-icon>
         新增界面
       </el-button>
@@ -34,28 +35,54 @@
 
     <!-- 界面表格 -->
     <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="uiKey" label="界面名称" />
-      <el-table-column prop="description" label="描述" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="uiUrl" label="图片" >
-      <el-table-column prop="createTime" label="创建日期" width="180">
         <template #default="{ row }">
-          {{ formatDate(row.createTime) }}
+          <el-image 
+            v-if="row.uiUrl"
+            style="height: 32px"
+            :src="getImgUrl(row.uiUrl)"
+            @click="showViewer(row.uiUrl)">
+          </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="100">
+      <el-table-column prop="funcIds" label="功能id数组" show-overflow-tooltip />
+      <el-table-column prop="remark" label="描述" show-overflow-tooltip />
+      <el-table-column prop="createTime" label="创建日期" />
+      <el-table-column label="操作" width="200">
         <template #default="{ row }">
-          <el-button link type="danger" @click="handleDeleteFunction(row)">
+        <el-button link type="primary" @click="handleUpdateUI(row)">
+            编辑
+          </el-button>
+          <el-button link type="danger" @click="handleDeleteUI(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"
       :title="functionDialogTitle"
       :form-data="functionFormData"
+      :selectNode="selectNode"
       @confirm="handleFunctionConfirm"
     />
   </div>
@@ -63,36 +90,28 @@
 
 <script setup>
 import { ref, reactive } 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 './Dialog.vue'
+import { addUi, getUiList, deleteUiList, updateUI } from '@/api/is/im/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: '',
+  uiKey: '',
-  description: ''
+  remark: '',
+  pageNum: 1,
+  pageSize: 10,
 })
 
 // 对话框相关
@@ -101,83 +120,134 @@ const functionDialogTitle = ref('')
 
 // 表单数据
 const functionFormData = reactive({
-  name: '',
+  uiKey: '',
-  description: ''
+  remark: '',
+  id: null,
+  uiUrl: null,
+  funcIds: null
 })
 
-// 生成ID
-let functionIdCounter = 100
-
-function generateFunctionId() {
-  return functionIdCounter++
-}
-
-// 搜索界面
-function handleSearch() {
-  // 实际项目中这里应该是API调用
-  ElMessage.info('执行搜索操作')
-  console.log('搜索条件:', searchForm)
-}
-
 // 重置搜索
 function handleReset() {
-  searchForm.name = ''
+  searchForm.uiKey = ''
-  searchForm.description = ''
+  searchForm.remark = ''
-  handleSearch()
+  getDataList()
 }
 
+const isAdd = ref(true)
 // 新增界面
-function handleAddFunction() {
+function handleAddUI() {
   functionDialogTitle.value = '新增界面'
-  functionFormData.name = ''
+  functionFormData.uiKey = ''
-  functionFormData.description = ''
+  functionFormData.remark = ''
+  functionFormData.id = null
+  functionFormData.uiUrl = null
+  functionFormData.funcIds = null
+  isAdd.value = true
+  functionDialogVisible.value = true
+}
+
+const handleUpdateUI = (row) => {
+  functionDialogTitle.value = '编辑界面'
+  functionFormData.uiKey = row.uiKey
+  functionFormData.remark = row.remark
+  functionFormData.id = row.id
+  functionFormData.uiUrl = row.uiUrl || null
+  functionFormData.funcIds = row.funcIds || null
+  isAdd.value = false
   functionDialogVisible.value = true
 }
 
 // 确认界面操作
-function handleFunctionConfirm(valid, formData) {
+async function handleFunctionConfirm(valid, formData) {
   if (valid) {
-    const newFunction = {
+    let res
-      id: generateFunctionId(),
+    if (isAdd.value) {
-      name: formData.name,
+      res = await addUi({
-      description: formData.description,
+        ...formData,
-      createTime: new Date().toLocaleString('zh-CN')
+        vehicleConfigId: props.selectNode.id
+      })
+      
+    } else {
+      res = await updateUI(formData)
+    }
+    if (res.code === 200) {
+      getDataList()
+      ElMessage.success(res.msg)
+      functionDialogVisible.value = false
+    } else {
+      ElMessage.error(res.msg)
     }
-
-    tableData.value.unshift(newFunction)
-    functionDialogVisible.value = false
-    ElMessage.success('新增界面成功')
   }
 }
 
 // 删除界面
-function handleDeleteFunction(row) {
+function handleDeleteUI(row) {
   ElMessageBox.confirm(
-    `确定要删除界面"${row.name}"吗？`,
+    `确定要删除界面"${row.uiKey}"吗？`,
     '警告',
     {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }
-  ).then(() => {
+  ).then(async () => {
-    const index = tableData.value.findIndex(item => item.id === row.id)
+    const res = await deleteUiList(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 getUiList({
+    ...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;
+}
+
+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;
@@ -193,8 +263,14 @@ function formatDate(dateString) {
 }
 
 .table-actions {
-  margin-bottom: 16px;
+   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/im/TreePanel/TreePanel.vue

@@ -11,7 +11,6 @@
         :props="treeProps"
         :expand-on-click-node="false"
         :highlight-current="true"
-        default-expand-all
         @node-click="handleNodeClick"
       >
         <template #default="{ node, data }">
@@ -25,62 +24,14 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { getTreeDataApi } 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 treeProps = {
@@ -88,12 +39,21 @@ const treeProps = {
   label: 'label'
 }
 
-
 // 树节点点击
 function handleNodeClick(data) {
   emit('node-click', data)
 }
 
+const getTreeData = async () => {
+  const res = await getTreeDataApi()
+  if (res) {
+    treeData.value = res
+  }
+}
+
+onMounted(() => {
+  getTreeData()
+})
 </script>
 
 <style scoped>

src/views/is/im/index.vue

@@ -7,13 +7,18 @@
 
     <!-- 右侧功能表格 -->
     <div class="right-panel">
-      <Table />
+      <Table :selectNode="selectNode" />
     </div>
   </div>
 </template>
 <script setup>
 import TreePanel from './TreePanel/TreePanel.vue'
 import Table from './Table/Table.vue';
+
+const selectNode = ref(null)
+const handleNodeClick = (data) => {
+  selectNode.value = data
+}
 </script>
 
 <style scoped>

src/views/is/project/plan/index.vue

@@ -160,8 +160,6 @@
         </el-form-item>
       </el-form>
 
-      <div>功能选择</div>
-
       <FunctionSelection />
 
       <template #footer>