feat: 删除禁用编辑功能

src/api/system/dictionary.ts

@@ -13,4 +13,9 @@ export const verifyId = (id:string) => request.post(`/dictionary/_exists`,{where
 /**
  * 保存字典
  */
-export const addDictionary = (data:any) => request.post('/dictionary',data)
+export const addDictionary = (data:any) => request.patch('/dictionary',data)
+
+/**
+ * 删除字典
+ */
+export const deleteDictionary =(id:string) => request.delete(`/dictionary/${id}`)

src/views/system/Dictionary/components/Left.vue

@@ -10,30 +10,37 @@
         <j-button type="text">下载</j-button>
         <j-button type="text">导入</j-button>
     </div>
+    
     <div>
-        <j-list :dataSource="listData">
-            <template #renderItem="{ item }">
-                <j-list-item>
-                    {{ item.name }}
-                    <template #actions>
-                        <j-switch :checked="item.status"></j-switch>
-                        <j-button type='text'>删除</j-button>
-                        <j-button type="text">编辑</j-button>
-                    </template>
-                </j-list-item>
+        <j-tree :tree-data="listData" :fieldNames="{title:'name',key:'id'}" blockNode>
+            <template #title="item">
+                <div class="treeItem">
+                    <div>{{ item.name }}</div>
+                    <div>
+                        <j-popconfirm :title="item.data.status === 1 ? '确定禁用？' : '确定启用？'" @confirm="()=>updateDic(item.data)">
+                            <j-switch v-model:checked="item.status" :checkedValue="1" :unCheckedValue="0"></j-switch>
+                        </j-popconfirm>
+                        <j-popconfirm title="确认删除？" @confirm="()=>deleteDic(item.id)">
+                            <j-button type="text">删除</j-button>
+                        </j-popconfirm>
+                        <j-button type="text" @click="()=>showEdit(item.data)">编辑</j-button>
+                    </div>
+                </div>
             </template>
-        </j-list>
+        </j-tree>
     </div>
   </div>
-  <Save v-if="saveShow" :type="addType" @close-save="saveShow = false" @success="saveSuccess"/>
+  <Save v-if="saveShow" :type="addType" @close-save="saveShow = false" @success="saveSuccess" :data="editData"/>
 </template>
 
 <script lang="ts" setup>
-import { getDicList } from '@/api/system/dictionary';
+import { getDicList ,deleteDictionary,addDictionary} from '@/api/system/dictionary';
 import Save from './save/index.vue'
+import { onlyMessage } from '@/utils/comm';
 const saveShow = ref(false)
 const addType = ref('add')
 const listData = ref<any[]>([])
+const editData = ref()
 const showSave = () =>{
     saveShow.value = true
     addType.value = 'add'
@@ -45,15 +52,66 @@ const queryData = () =>{
         }
     })
 }
-const saveSuccess = () =>{
+const changeStatus = (value:number,item:any) =>{
+    
+}
+const showEdit = (data:any) =>{
+    saveShow.value = true
+    addType.value = 'edit'
+    editData.value = data
+}
+/**
+ * 重新请求数据
+ */
+const reload = () =>{
     queryData()
 }
+const saveSuccess = () =>{
+    saveShow.value = false
+    reload()
+}
+/**
+ * 
+ * @param id 字典id
+ * 删除字典
+ */
+const deleteDic = (id:string) =>{
+    deleteDictionary(id).then((res:any)=>{
+        if(res.status === 200){
+            onlyMessage('操作成功!')
+            reload()
+        }else{
+            onlyMessage('操作失败!','error')
+        }
+    })
+}
+/**
+ * 更新字典
+ */
+const updateDic = (data:any)=>{
+    data.status = data.status === 1 ? 0 : 1
+    addDictionary(data).then((res:any)=>{
+        if(res.status===200){
+            onlyMessage('操作成功!')
+            reload()
+        }else{
+            onlyMessage('操作失败!','error')
+        }
+    })
+}
 onMounted(()=>{
     queryData()
 })
 </script>
 <style lang="less" scoped>
+:deep(.ant-tree-switcher){
+    display: none;
+}
 .controls{
     margin: 10px 0;
 }
+.treeItem{
+    display: flex;
+    justify-content: space-between;
+}
 </style>

src/views/system/Dictionary/components/save/index.vue

@@ -10,7 +10,7 @@
   >
     <j-form layout="vertical" :rules="rules" ref="formRef" :model="form">
         <j-form-item label="字典ID" name="id">
-            <j-input v-model:value="form.id"></j-input>
+            <j-input v-model:value="form.id" :disabled="type ==='edit'"></j-input>
         </j-form-item>
         <j-form-item label="字典名称" name="name">
             <j-input v-model:value="form.name"></j-input>
@@ -33,11 +33,14 @@ import { isInput } from '@/utils/regular';
 import type { Rule } from 'ant-design-vue/es/form';
 import { verifyId,addDictionary } from '@/api/system/dictionary'
 import { onlyMessage } from '@/utils/comm';
-import { error } from 'console';
 const props = defineProps({
     type:{
         type:String,
         default:'add'
+    },
+    data:{
+        type:Object,
+        default:{}
     }
 })
 const emit = defineEmits(['closeSave','success'])
@@ -96,21 +99,27 @@ const rules = {
 const submitData = () =>{
     formRef.value.validate().then(async()=>{
         loading.value = true
-        if(props.type === 'add'){
-            const res = await addDictionary(form)
+        const res = await addDictionary(form)
             if(res.status === 200){
                 onlyMessage('保存成功!')
                 emit('success')
             }else{
                 onlyMessage('操作失败!','error')
             }
-        }
         loading.value = false
     })
 }
 const closeModal = ()=>{
     emit('closeSave')
 }
+onMounted(()=>{
+    if(props.type==='edit' && props.data){
+        form.describe = props.data.describe
+        form.id = props.data.id
+        form.name = props.data.name
+        form.status = props.data.status
+    }
+})
 </script>
 <style lang="less" scoped>
 </style>