完成前端部署内容

src/components/system/dict/DictItemDrawer.vue

@@ -36,10 +36,10 @@
           </template>
           <template v-if="column.dataIndex === 'action'">
             <a-space>
-              <a-button type="link" size="small" @click="handleEditItem(record)">编辑</a-button>
+              <a-button type="link" size="small" @click="handleEditItem(record as DictItemRecord)">编辑</a-button>
               <a-popconfirm
                 title="确定删除此字典项吗？"
-                @confirm="handleDeleteItem(record.id)"
+                @confirm="handleDeleteItem((record as DictItemRecord).id!)"
               >
                 <a-button type="link" size="small" danger>删除</a-button>
               </a-popconfirm>
@@ -94,6 +94,7 @@ import { ref, reactive, watch } from 'vue'
 import { message } from 'ant-design-vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 import type { FormInstance } from 'ant-design-vue'
+import { getDictItems, createDictItem, updateDictItem, deleteDictItem } from '@/api/system/dict'
 
 // 类型定义
 interface DictRecord {
@@ -131,7 +132,7 @@ const columns = [
   { title: '默认', dataIndex: 'isDefault', width: 70 },
   { title: '状态', dataIndex: 'status', width: 70 },
   { title: '备注', dataIndex: 'remark', ellipsis: true },
-  { title: '操作', dataIndex: 'action', width: 120, fixed: 'right' }
+  { title: '操作', dataIndex: 'action', width: 120, fixed: 'right' as const }
 ]
 
 // 字典项表单
@@ -174,31 +175,11 @@ function handleClose() {
 async function loadData(dictId: number) {
   loading.value = true
   try {
-    // TODO: 接入真实API
-    // const res = await getDictItemList(dictId)
-    // tableData.value = res.data.data
-
-    // 模拟数据
-    if (dictId === 1) {
-      tableData.value = [
-        { id: 1, dictId: 1, label: '男', value: '1', sort: 1, isDefault: 1, status: 1, remark: '' },
-        { id: 2, dictId: 1, label: '女', value: '2', sort: 2, isDefault: 0, status: 1, remark: '' },
-        { id: 3, dictId: 1, label: '未知', value: '0', sort: 3, isDefault: 0, status: 1, remark: '' }
-      ]
-    } else if (dictId === 2) {
-      tableData.value = [
-        { id: 4, dictId: 2, label: '正常', value: '1', sort: 1, isDefault: 1, status: 1, remark: '' },
-        { id: 5, dictId: 2, label: '禁用', value: '0', sort: 2, isDefault: 0, status: 1, remark: '' }
-      ]
-    } else if (dictId === 3) {
-      tableData.value = [
-        { id: 6, dictId: 3, label: '待审批', value: 'pending', sort: 1, isDefault: 1, status: 1, remark: '' },
-        { id: 7, dictId: 3, label: '已通过', value: 'approved', sort: 2, isDefault: 0, status: 1, remark: '' },
-        { id: 8, dictId: 3, label: '已驳回', value: 'rejected', sort: 3, isDefault: 0, status: 1, remark: '' }
-      ]
-    } else {
-      tableData.value = []
-    }
+    const res = await getDictItems(dictId)
+    tableData.value = res.data.data || []
+  } catch (error) {
+    console.error('加载字典项失败:', error)
+    tableData.value = []
   } finally {
     loading.value = false
   }
@@ -231,11 +212,16 @@ function handleEditItem(record: DictItemRecord) {
 }
 
 async function handleDeleteItem(id: number) {
-  // TODO: 接入真实API
-  // await deleteDictItem(id)
-  message.success('删除成功')
-  if (props.dictData) {
-    loadData(props.dictData.id)
+  try {
+    await deleteDictItem(id)
+    message.success('删除成功')
+    if (props.dictData) {
+      loadData(props.dictData.id)
+    }
+  } catch (error: any) {
+    if (error?.response?.data?.message) {
+      message.error(error.response.data.message)
+    }
   }
 }
 
@@ -244,20 +230,31 @@ async function handleSubmitItem() {
     await formRef.value?.validate()
     submitLoading.value = true
 
-    // TODO: 接入真实API
-    // if (isEditItem.value) {
-    //   await updateDictItem(formData)
-    // } else {
-    //   await createDictItem(formData)
-    // }
+    const data = {
+      dictId: formData.dictId!,
+      label: formData.label,
+      value: formData.value,
+      sort: formData.sort,
+      isDefault: formData.isDefault,
+      status: formData.status,
+      remark: formData.remark
+    }
+
+    if (isEditItem.value && formData.id) {
+      await updateDictItem(formData.id, data)
+    } else {
+      await createDictItem(data)
+    }
 
     message.success(isEditItem.value ? '编辑成功' : '新增成功')
     itemModalVisible.value = false
     if (props.dictData) {
       loadData(props.dictData.id)
     }
-  } catch (error) {
-    // 验证失败
+  } catch (error: any) {
+    if (error?.response?.data?.message) {
+      message.error(error.response.data.message)
+    }
   } finally {
     submitLoading.value = false
   }