up

src/views/article/components/ArtCat.vue

@@ -14,8 +14,8 @@ const formRules = ref<FormRules>({
   artCatTitle: [
     { required: true, message: '请输入标题', trigger: 'blur' },
   ],
-  artCatDesc: [
-    { required: false, message: '请输入描述', trigger: 'blur' },
+  parentId: [
+    { required: true, message: '请输入描述', trigger: 'blur' },
   ],
 })
 
@@ -26,7 +26,7 @@ const state = reactive({
   formData: {
     artCatId: 0,
     artCatTitle: '',
-    artCatDesc: '',
+    parentId: 0,
   },
   search: {
     artCatId: 0,
@@ -70,23 +70,25 @@ function resetFormData() {
   state.formData = {
     artCatId: 0,
     artCatTitle: '',
-    artCatDesc: '',
+    parentId: 0,
   }
 }
 
 defineExpose({
-  showAddModel() {
+  showAddModel(parentId: number) {
     resetFormData()
-    state.title = '新增'
+    state.title = '新增内容分类'
     state.actionType = 1
+    state.formData.parentId = parentId
     state.dialogVisible = true
   },
-  showEditModel(roleId: number) {
+  showEditModel(artCatId: number) {
     resetFormData()
-    state.title = '编辑'
+    state.title = '编辑内容分类'
     state.actionType = 2
     state.dialogVisible = true
-    getData(roleId)
+    state.search.artCatId = artCatId
+    getData()
   },
 })
 </script>

src/views/article/components/ArtCatTree.vue

@@ -5,6 +5,7 @@ meta:
 
 <script lang="ts" setup>
 import { ElMessage, ElMessageBox } from 'element-plus'
+import ArtCatComponent from './ArtCat.vue'
 import { deleteArtCatById, getArtCatByList } from '@/api/system/artCatApi'
 const emit = defineEmits(['onItemSelect'])
 
@@ -69,14 +70,21 @@ const onTreeNodeClick = (node: TreeNode) => {
 }
 
 const artCatRef = ref()
+
 // 新增
 const onArtCatAdd = () => {
-  artCatRef.value.showAddModel()
+  artCatRef.value.showAddModel(0)
+}
+
+// 添加子类
+const onSubArtCatAdd = (row: any) => {
+  const artCatId = row.artCatId
+  artCatRef.value.showAddModel(artCatId)
 }
 
 // 编辑
-const onArtCatEdit = () => {
-  const artCatId = state.curArtCatId
+const onArtCatEdit = (row: any) => {
+  const artCatId = row.artCatId
   if (artCatId > 0) {
     artCatRef.value.showEditModel(artCatId)
   }
@@ -95,12 +103,29 @@ const onArtCatDelete = (row: any) => {
 
 <template>
   <el-scrollbar class="tree">
+    <el-button-group class="btns">
+      <el-button type="primary" class="add" @click="onArtCatAdd()">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:plus" />
+          </el-icon>
+        </template>
+        内容分类
+      </el-button>
+      <el-button @click="getArtCatData">
+        <template #icon>
+          <el-icon>
+            <svg-icon name="i-ep:refresh" />
+          </el-icon>
+        </template>
+      </el-button>
+    </el-button-group>
     <ElTree ref="leftTreeRef" :data="state.treeData" default-expand-all node-key="wfDefId" @node-click="onTreeNodeClick">
       <template #default="{ node, data }">
         <div class="custom-tree-node">
           <div class="label" :title="node.label">
             <el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
-              <svg-icon name="ep:connection" />
+              <svg-icon name="ep:document-copy" />
             </el-icon>
             <div class="text">
               {{ data.label }}
@@ -108,7 +133,7 @@ const onArtCatDelete = (row: any) => {
           </div>
           <div class="actions">
             <el-button-group>
-              <el-button type="primary" plain size="small" @click.stop="onArtCatAdd()">
+              <el-button type="primary" plain size="small" @click.stop="onSubArtCatAdd(data)">
                 <template #icon>
                   <el-icon>
                     <svg-icon name="i-ep:plus" />
@@ -116,7 +141,7 @@ const onArtCatDelete = (row: any) => {
                 </template>
               </el-button>
 
-              <el-button type="info" plain size="small" @click.stop="onArtCatEdit()">
+              <el-button type="info" plain size="small" @click.stop="onArtCatEdit(data)">
                 <template #icon>
                   <el-icon>
                     <svg-icon name="i-ep:edit" />
@@ -136,6 +161,7 @@ const onArtCatDelete = (row: any) => {
         </div>
       </template>
     </ElTree>
+    <ArtCatComponent ref="artCatRef" @success="getArtCatData" />
   </el-scrollbar>
 </template>