first commit

src/views/system/dict/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="container-box">
+    <div class="header-bar">
+      <h2>字典管理</h2>
+      <div class="header-actions">
+        <el-button @click="refresh">
+          <el-icon><Refresh /></el-icon>
+          刷新
+        </el-button>
+      </div>
+    </div>
+    <el-divider></el-divider>
+
+    <!-- 内容区域：根据当前视图切换 -->
+    <div v-if="currentView === 'types'">
+      <div class="tab-content">
+          <div class="toolbar">
+            <el-button type="primary" @click="handleAddType">
+              <el-icon><Plus /></el-icon>
+              添加字典类型
+            </el-button>
+            <div class="search-box">
+              <el-input
+                v-model="typeSearchKeyword"
+                placeholder="搜索字典类型名称或编码"
+                clearable
+                style="width: 300px"
+                @input="handleTypeSearch"
+              >
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
+
+          <el-table
+            :data="dictTypes"
+            stripe
+            style="width: 100%"
+            v-loading="typeLoading"
+          >
+            <el-table-column prop="id" label="ID" width="80" align="center" />
+            <el-table-column prop="dict_name" label="字典名称" min-width="150" align="center" />
+            <el-table-column prop="dict_code" label="字典编码" min-width="150" align="center">
+              <template #default="{ row }">
+                <el-tag size="small">{{ row.dict_code }}</el-tag>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="parent_id" label="父级ID" width="100" align="center">
+              <template #default="{ row }">
+                <span v-if="row.parent_id > 0">{{ row.parent_id }}</span>
+                <span v-else style="color: #999">-</span>
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="status" label="状态" width="100" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
+                  {{ row.status === 1 ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="is_global" label="全局展示" width="100" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.is_global === 1 ? 'success' : 'warning'" size="small">
+                  {{ row.is_global === 1 ? '是' : '否' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="sort" label="排序" width="80" align="center" /> -->
+            <!-- <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip /> -->
+            <el-table-column prop="create_time" label="创建时间" width="180" align="center">
+              <template #default="{ row }">
+                {{ formatDate(row.create_time) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="220" fixed="right" align="center">
+              <template #default="{ row }">
+                <el-button size="small" type="primary" link @click="handleEditType(row)">
+                  <el-icon><Edit /></el-icon>
+                  编辑
+                </el-button>
+                <el-button size="small" type="primary" link @click="handleViewItems(row)">
+                  <el-icon><List /></el-icon>
+                  查看字典项
+                </el-button>
+                <el-button size="small" type="danger" link @click="handleDeleteType(row)">
+                  <el-icon><Delete /></el-icon>
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination-bar">
+            <el-pagination
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :total="totalCount"
+              @current-change="handlePageChange"
+              layout="total, prev, pager, next"
+            />
+          </div>
+      </div>
+    </div>
+
+    <div v-else-if="currentView === 'items'">
+      <div class="tab-content">
+        <div class="toolbar">
+          <div>
+            <el-button @click="goBackToTypes">
+              返回
+            </el-button>
+          </div>
+          <div class="search-box">
+            <span v-if="selectedDictType">
+              当前字典类型：{{ selectedDictType.dict_name }}（{{ selectedDictType.dict_code }}）
+            </span>
+          </div>
+        </div>
+        <DictItemList :selected-type-id="selectedDictTypeId || undefined" @refresh="refreshTypesSilently" />
+      </div>
+    </div>
+
+    <!-- 字典类型编辑对话框 -->
+    <DictTypeEdit
+      v-model="typeDialogVisible"
+      :dict-type="currentDictType"
+      @success="handleTypeSuccess"
+    />
+
+    <!-- 字典项独立页面内操作通过 DictItemList 完成 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  Plus,
+  Edit,
+  Delete,
+  Refresh,
+  Search,
+  List,
+} from '@element-plus/icons-vue'
+import {
+  getDictTypes,
+  deleteDictType,
+} from '@/api/dict'
+import DictTypeEdit from './components/DictTypeEdit.vue'
+import DictItemList from './components/DictItemList.vue'
+
+const currentView = ref<'types' | 'items'>('types')
+const typeLoading = ref(false)
+
+// 字典类型相关
+const dictTypes = ref<any[]>([])
+const typeSearchKeyword = ref('')
+const typeDialogVisible = ref(false)
+const currentDictType = ref<any>(null)
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+
+const selectedDictTypeId = ref<number | null>(null)
+const selectedDictType = computed(() => {
+  if (!selectedDictTypeId.value) {
+    return null
+  }
+  return dictTypes.value.find((type) => type.id === selectedDictTypeId.value) || null
+})
+
+// 格式化日期
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return ''
+  try {
+    const date = new Date(dateStr)
+    return date.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  } catch {
+    return dateStr as string
+  }
+}
+
+// 获取字典类型列表
+async function fetchDictTypes() {
+  typeLoading.value = true
+  try {
+    const res = await getDictTypes({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      keyword: typeSearchKeyword.value
+    })
+    if (res.success === true && res.data) {
+      dictTypes.value = Array.isArray(res.data.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
+      totalCount.value = res.data.total || res.data.length || 0
+    } else if (Array.isArray(res)) {
+      dictTypes.value = res
+      totalCount.value = res.length
+    } else {
+      dictTypes.value = []
+      totalCount.value = 0
+      ElMessage.error(res.message || '获取字典类型失败')
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || '获取字典类型失败')
+    dictTypes.value = []
+    totalCount.value = 0
+  } finally {
+    typeLoading.value = false
+  }
+}
+
+// 字典类型搜索
+function handleTypeSearch() {
+  currentPage.value = 1
+  fetchDictTypes()
+}
+
+// 分页切换
+function handlePageChange(page: number) {
+  currentPage.value = page
+  fetchDictTypes()
+}
+
+// 添加字典类型
+function handleAddType() {
+  currentDictType.value = null
+  typeDialogVisible.value = true
+}
+
+// 编辑字典类型
+function handleEditType(row: any) {
+  currentDictType.value = { ...row }
+  typeDialogVisible.value = true
+}
+
+// 查看字典项
+function handleViewItems(row: any) {
+  selectedDictTypeId.value = row.id
+  currentView.value = 'items'
+}
+
+// 删除字典类型
+async function handleDeleteType(row: any) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除字典类型「${row.dict_name}」吗？删除后不可恢复。`,
+      '警告',
+      { type: 'warning' }
+    )
+
+    typeLoading.value = true
+    try {
+      const res = await deleteDictType(row.id)
+      if (res.success === true) {
+        ElMessage.success('删除成功')
+        fetchDictTypes()
+      } else {
+        ElMessage.error(res.message || '删除失败')
+      }
+    } catch (error: any) {
+      ElMessage.error(error.message || '删除失败')
+    } finally {
+      typeLoading.value = false
+    }
+  } catch {
+    // 取消删除
+  }
+}
+
+// 字典类型操作成功回调
+function handleTypeSuccess() {
+  fetchDictTypes()
+}
+
+// 从字典项页返回
+function goBackToTypes() {
+  currentView.value = 'types'
+}
+
+// 子页面刷新后，静默刷新类型列表
+function refreshTypesSilently() {
+  fetchDictTypes()
+}
+
+// 刷新
+async function refresh() {
+  await fetchDictTypes()
+  ElMessage.success('刷新成功')
+}
+
+onMounted(() => {
+  fetchDictTypes()
+})
+</script>
+
+<style scoped lang="less">
+.container-box {
+  padding: 20px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 10px;
+  }
+}
+
+.tab-content {
+  padding: 20px 0;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .search-box {
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-box {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.pagination-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.color-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .color-dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid #e5e5e5;
+    display: inline-block;
+  }
+}
+</style>