CMVR-IOT-UI/src/views/is/func/FunctionTable/FunctionTable.vue

<template>
  <div class="function-table">
    <!-- 搜索表单 -->
    <el-form :model="searchForm" class="search-form">
      <el-form-item label="功能名称">
        <el-input
          v-model="searchForm.name"
          placeholder="请输入功能名称"
          clearable
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="searchForm.description"
          placeholder="请输入描述"
          clearable
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格操作栏 -->
    <div class="table-actions">
      <el-button type="primary" @click="handleAddFunction">
        <el-icon><Plus /></el-icon>
        新增功能
      </el-button>
    </div>

    <!-- 功能表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="功能名称" min-width="120" />
      <el-table-column prop="description" label="描述" min-width="180" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建日期" width="180">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button link type="danger" @click="handleDeleteFunction(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 功能编辑对话框 -->
    <FunctionDialog
      v-model:visible="functionDialogVisible"
      :title="functionDialogTitle"
      :form-data="functionFormData"
      @confirm="handleFunctionConfirm"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import FunctionDialog from './FunctionDialog.vue'

// 表格数据
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 searchForm = reactive({
  name: '',
  description: ''
})

// 对话框相关
const functionDialogVisible = ref(false)
const functionDialogTitle = ref('')

// 表单数据
const functionFormData = reactive({
  name: '',
  description: ''
})

// 生成ID
let functionIdCounter = 100

function generateFunctionId() {
  return functionIdCounter++
}

// 搜索功能
function handleSearch() {
  // 实际项目中这里应该是API调用
  ElMessage.info('执行搜索操作')
  console.log('搜索条件:', searchForm)
}

// 重置搜索
function handleReset() {
  searchForm.name = ''
  searchForm.description = ''
  handleSearch()
}

// 新增功能
function handleAddFunction() {
  functionDialogTitle.value = '新增功能'
  functionFormData.name = ''
  functionFormData.description = ''
  functionDialogVisible.value = true
}

// 确认功能操作
function handleFunctionConfirm(valid, formData) {
  if (valid) {
    const newFunction = {
      id: generateFunctionId(),
      name: formData.name,
      description: formData.description,
      createTime: new Date().toLocaleString('zh-CN')
    }

    tableData.value.unshift(newFunction)
    functionDialogVisible.value = false
    ElMessage.success('新增功能成功')
  }
}

// 删除功能
function handleDeleteFunction(row) {
  ElMessageBox.confirm(
    `确定要删除功能"${row.name}"吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 格式化日期
function formatDate(dateString) {
  return dateString
}
</script>

<style scoped>
.function-table {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.table-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>