create-koa-boot 1.0.0

package/templates/example/frontend/src/views/system/dictItem/index.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="dict-item-management">
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>字典数据管理</span>
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增字典数据
+          </el-button>
+        </div>
+      </template>
+      
+      <div class="search-bar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="所属类型">
+            <el-select v-model="searchForm.typeId" placeholder="请选择字典类型" clearable style="width: 200px">
+              <el-option
+                v-for="type in dictTypeList"
+                :key="type.id"
+                :label="type.name"
+                :value="type.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标签">
+            <el-input v-model="searchForm.label" placeholder="请输入标签" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="值">
+            <el-input v-model="searchForm.value" placeholder="请输入值" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
+              <el-option label="启用" value="active" />
+              <el-option label="禁用" value="inactive" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">
+              <el-icon><Search /></el-icon>
+              搜索
+            </el-button>
+            <el-button @click="resetSearch">
+              <el-icon><Refresh /></el-icon>
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <el-table :data="dictItemList" style="width: 100%" stripe>
+        <el-table-column prop="typeName" label="所属类型" />
+        <el-table-column prop="label" label="标签" />
+        <el-table-column prop="value" label="值" />
+        <el-table-column prop="cssClass" label="样式类" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.cssClass" size="small" :type="getClassType(scope.row.cssClass)">
+              {{ scope.row.cssClass }}
+            </el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="80" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="active"
+              inactive-value="inactive"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="备注" />
+        <el-table-column prop="createdAt" label="创建时间" width="180" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
+              <el-icon><Edit /></el-icon>
+              编辑
+            </el-button>
+            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">
+              <el-icon><Delete /></el-icon>
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+    
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增字典数据' : '编辑字典数据'"
+      width="500px"
+    >
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+        <el-form-item label="所属类型" prop="typeId">
+          <el-select v-model="form.typeId" placeholder="请选择字典类型">
+            <el-option
+              v-for="type in dictTypeList"
+              :key="type.id"
+              :label="type.name"
+              :value="type.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签" prop="label">
+          <el-input v-model="form.label" placeholder="请输入标签" />
+        </el-form-item>
+        <el-form-item label="值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入值" />
+        </el-form-item>
+        <el-form-item label="样式类" prop="cssClass">
+          <el-select v-model="form.cssClass" placeholder="请选择样式类" clearable>
+            <el-option label="成功" value="success" />
+            <el-option label="警告" value="warning" />
+            <el-option label="危险" value="danger" />
+            <el-option label="信息" value="info" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择状态">
+            <el-option label="启用" value="active" />
+            <el-option label="禁用" value="inactive" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="description">
+          <el-input v-model="form.description" placeholder="请输入备注" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { getDictItemList, createDictItem, updateDictItem, deleteDictItem, getDictTypeList } from '../../../api'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { DictItemInfo, DictTypeInfo } from '../../../types'
+import { Plus, Search, Refresh, Edit, Delete } from '@element-plus/icons-vue'
+
+const dictItemList = ref<DictItemInfo[]>([])
+const dictTypeList = ref<DictTypeInfo[]>([])
+
+const searchForm = reactive({
+  typeId: '',
+  label: '',
+  value: '',
+  status: ''
+})
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const dialogVisible = ref(false)
+const dialogType = ref<'add' | 'edit'>('add')
+
+const form = reactive({
+  id: '',
+  typeId: '',
+  label: '',
+  value: '',
+  cssClass: '',
+  sort: 0,
+  status: 'active',
+  description: ''
+})
+
+const formRef = ref<FormInstance>()
+
+const rules = reactive<FormRules>({
+  typeId: [
+    { required: true, message: '请选择字典类型', trigger: 'change' }
+  ],
+  label: [
+    { required: true, message: '请输入标签', trigger: 'blur' }
+  ],
+  value: [
+    { required: true, message: '请输入值', trigger: 'blur' }
+  ],
+  sort: [
+    { required: true, message: '请输入排序', trigger: 'blur' }
+  ],
+  status: [
+    { required: true, message: '请选择状态', trigger: 'change' }
+  ]
+})
+
+const fetchDictItemList = async () => {
+  try {
+    const response = await getDictItemList({
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      keyword: searchForm.label || searchForm.value,
+      typeId: searchForm.typeId
+    })
+    dictItemList.value = response.data.data.list
+    pagination.total = response.data.data.pagination.total
+  } catch (error) {
+    console.error('获取字典数据列表失败:', error)
+    dictItemList.value = [
+      { id: '1', typeId: '1', typeName: '用户状态', label: '正常', value: 'active', cssClass: 'success', sort: 1, status: 'active', description: '', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      { id: '2', typeId: '1', typeName: '用户状态', label: '停用', value: 'inactive', cssClass: 'danger', sort: 2, status: 'active', description: '', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      { id: '3', typeId: '3', typeName: '订单状态', label: '待付款', value: 'pending_payment', cssClass: 'warning', sort: 1, status: 'active', description: '', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      { id: '4', typeId: '3', typeName: '订单状态', label: '已完成', value: 'completed', cssClass: 'success', sort: 2, status: 'active', description: '', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }
+    ]
+    pagination.total = dictItemList.value.length
+  }
+}
+
+const fetchDictTypeList = async () => {
+  try {
+    const response = await getDictTypeList({ page: 1, pageSize: 100 })
+    dictTypeList.value = response.data.data.list
+  } catch (error) {
+    console.error('获取字典类型列表失败:', error)
+    dictTypeList.value = [
+      { id: '1', name: '用户状态', code: 'sys_user_status', description: '', status: 'active', createdAt: '', updatedAt: '' },
+      { id: '2', name: '角色状态', code: 'sys_role_status', description: '', status: 'active', createdAt: '', updatedAt: '' },
+      { id: '3', name: '订单状态', code: 'biz_order_status', description: '', status: 'active', createdAt: '', updatedAt: '' }
+    ]
+  }
+}
+
+const handleSearch = () => {
+  pagination.page = 1
+  fetchDictItemList()
+}
+
+const resetSearch = () => {
+  searchForm.typeId = ''
+  searchForm.label = ''
+  searchForm.value = ''
+  searchForm.status = ''
+  pagination.page = 1
+  fetchDictItemList()
+}
+
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  fetchDictItemList()
+}
+
+const handleCurrentChange = (current: number) => {
+  pagination.page = current
+  fetchDictItemList()
+}
+
+const handleAdd = () => {
+  dialogType.value = 'add'
+  Object.assign(form, {
+    id: '',
+    typeId: '',
+    label: '',
+    value: '',
+    cssClass: '',
+    sort: 0,
+    status: 'active',
+    description: ''
+  })
+  dialogVisible.value = true
+}
+
+const handleEdit = (dictItem: DictItemInfo) => {
+  dialogType.value = 'edit'
+  Object.assign(form, {
+    id: dictItem.id,
+    typeId: dictItem.typeId,
+    label: dictItem.label,
+    value: dictItem.value,
+    cssClass: dictItem.cssClass,
+    sort: dictItem.sort,
+    status: dictItem.status,
+    description: dictItem.description
+  })
+  dialogVisible.value = true
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
+    if (dialogType.value === 'add') {
+      await createDictItem(form)
+      ElMessage.success('字典数据创建成功')
+    } else {
+      await updateDictItem(form.id, form)
+      ElMessage.success('字典数据更新成功')
+    }
+    
+    dialogVisible.value = false
+    fetchDictItemList()
+  } catch (error) {
+    console.error('提交失败:', error)
+  }
+}
+
+const handleDelete = async (id: string) => {
+  try {
+    await deleteDictItem(id)
+    ElMessage.success('字典数据删除成功')
+    fetchDictItemList()
+  } catch (error) {
+    console.error('删除字典数据失败:', error)
+    ElMessage.error('删除字典数据失败')
+  }
+}
+
+const handleStatusChange = async (dictItem: DictItemInfo) => {
+  try {
+    await updateDictItem(dictItem.id, { status: dictItem.status })
+    ElMessage.success('状态更新成功')
+  } catch (error) {
+    console.error('状态更新失败:', error)
+    ElMessage.error('状态更新失败')
+    dictItem.status = dictItem.status === 'active' ? 'inactive' : 'active'
+  }
+}
+
+const getClassType = (cssClass: string): string => {
+  const typeMap: Record<string, string> = {
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+    info: 'info'
+  }
+  return typeMap[cssClass] || 'default'
+}
+
+onMounted(() => {
+  fetchDictTypeList()
+  fetchDictItemList()
+})
+</script>
+
+<style scoped>
+.dict-item-management {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
+.search-form {
+  display: flex;
+  align-items: center;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .search-form {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .search-form .el-form-item {
+    margin-bottom: 10px;
+  }
+}
+</style>