添加自定义科目 新增/修改/删除接口调用

src/api/step1Component.ts

@@ -33,8 +33,6 @@ export const addGradeSubjectApi = (data:any)=>{
         data
     })
 }
-// 修改年级科目  ？？
-
 
 // 删除年级科目
 export const deleteGradeSubjectApi = (id:any)=>{
@@ -61,8 +59,6 @@ export const addGradeSelectedSubjectApi = (data:any)=>{
         data
     })
 }
-// 修改 年级选科 ？？？
-
 
 // 删除年级选科
 export const deleteGradeSelectedSubjectApi = (id:any)=>{
@@ -93,8 +89,13 @@ export const editCustomSubjectApi = (data:any)=>{
     })
 }
 
-// 删除自定义科目数据   ？？？
-
+// 删除自定义科目数据 
+export const deleteCustomSubjectApi = (id:any)=>{
+    return request({
+        url: `${teacherPrefix}/api/v1/evaluationData/deleteCustomSubjectData?id=${id}`,
+        method: 'post',
+    })
+}
 
 // 查询年级数据
 export const getGradeListApi = (evaluationId:any)=>{

src/baseComponents/TreeList.vue

@@ -27,34 +27,45 @@
             <div class="custom-tree-node">
                 <template v-if="editItemKey == data.id">
                     <el-input  @click="$event.stopPropagation()"  class="edit_input"  v-model="editTaskName"  />
-                    <el-icon style="margin-left: 5px;" @click="HandleEditConfirm($event,node,data)"><Check /></el-icon>
                 </template>
                 <span v-else>{{ node.label }}</span>
 
-                <div>
-                    <template v-if="props.operation == 'all' && (!props.operationFlagKey || props.operationFlagKey && data?.[props.operationFlagKey])">
-                        <el-button v-if="node?.level < props.maxLevel" link @click="HandleAddSubItem($event,node,data)">
-                            <el-icon style="color:#666666"><Plus /></el-icon>
-                        </el-button>
-                        <el-popover
-                            :visible="popVisible && popOperationKey==data.id"
-                            placement="bottom"
-                            popper-class="pop_operation"
-                            style="min-width: auto !important;width: auto !important;"
-                        >   
-                            <span  @click="HandleRenameSubItm(node,data)">重命名</span>
-                            <span class="delete" @click="HandleDeleteSubItm(node,data)">删除</span>
-                            <template #reference>
-                                <el-button style="margin-left: 4px" link @click="OpenMorePop($event,node, data)">
-                                    <el-icon style="transform: rotate(90deg);color:#666666"><MoreFilled /></el-icon>
-                                </el-button>
-                            </template>
-                        </el-popover>
+                <div  class="operation">
+                    <!-- 展示操作栏  -->
+                    <template v-if="props.operation == 'all' && 
+                                    (!props.operationFlagKey || props.operationFlagKey && data?.[props.operationFlagKey])">
+                        
+                        <!-- 展示修改确认操作 -->
+                        <template  v-if="editItemKey == data.id">
+                            <el-icon style="margin-left: 5px;" @click="HandleEditConfirm($event,node,data)"><Check /></el-icon>
+                        </template>
+                        <!-- 展示 ... 和 新增 -->
+                        <template v-else>
+                                <el-icon v-if="(node?.level < props.maxLevel) && props.showAddOperation" 
+                                    @click="HandleAddSubItem($event,node,data)"
+                                    style="color:#666666"><Plus />
+                                </el-icon>
+                            <el-popover
+                                :visible="popVisible && popOperationKey==data.id"
+                                placement="bottom"
+                                popper-class="pop_operation"
+                                style="min-width: auto !important;width: auto !important;"
+                            >   
+                                <span  @click="HandleRenameSubItm(node,data)">重命名</span>
+                                <span class="delete" @click="HandleDeleteSubItm(node,data)">删除</span>
+                                <template #reference>
+                                    <el-icon style="transform: rotate(90deg);color:#666666;"  
+                                            @click="OpenMorePop($event,node, data)"><MoreFilled /></el-icon>
+                                </template>
+                            </el-popover>
+                        </template>
                     </template>
 
-                    <el-button v-else-if="props.operation == 'close'  && (!props.operationFlagKey || props.operationFlagKey && data?.[props.operationFlagKey])" link @click="HandleDelete(node, data)" >
-                        <el-icon style="color:#666666"><CircleClose /></el-icon>
-                    </el-button>
+                    <!-- 展示关闭操作 -->
+                    <el-icon v-else-if="props.operation == 'close'  && 
+                            (!props.operationFlagKey || props.operationFlagKey && data?.[props.operationFlagKey])" 
+                            style="color:#666666" 
+                        @click="HandleDelete(node, data)"><CircleClose /></el-icon>
                 </div>
             </div>
         </template>
@@ -81,6 +92,7 @@ const props = defineProps({
         type:Array<{
             label:String,
             id?:[String,null,number],
+
             children?:[] | null
         }>,
     },
@@ -96,8 +108,13 @@ const props = defineProps({
         type:String,  // 'all'|'close'|'none'
         default:'all'
     },
-    operationFlagKey:{
-        type:String,  //对应键 的值 0 --无操作， 1 有操作
+    showAddOperation:{
+        type:Boolean,
+        default:true,
+    },
+    operationFlagKey:{  //配合 operation 使用
+        type:String,  // 控制 操作显隐的键 的 变量名 
+                      // 键的值 0 --无操作， 1 有操作
     },
     maxLevel:{
         type:Number,
@@ -150,11 +167,12 @@ const defaultProps = ref({
   class:'custom_tree'
 })
 
-const editItemKey = ref()  // 修改操作 选中的树节点key
+const editItemKey = defineModel('editItemKey')  // 修改操作 选中的树节点key
+const editTaskName = defineModel('editTaskName')
+
 const popVisible = ref(false)
 const popOperationKey = ref()    //更多操作 选中的树节点key
 
-const editTaskName = ref('')
 
 const treeRef = defineModel('treeRef')
 const currentSelectedSubTarget = ref<any[]>([])  //已选指标
@@ -236,16 +254,19 @@ const HandleDelete = (node,data)=>{
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    padding-right: 8px;
+    padding-right: 12px;
+    line-height: 1;
 
     .edit_input{
-        // border: solid red 1px;
         flex:1 0;
         :deep(.el-input__wrapper){
             height: 28px;
-
         }
+    }
 
+    .operation{
+        display: flex;
+        gap:10px;
     }
 }
 

src/views/reviewManagement/stepComponent/step1Component/Step1Component.vue

@@ -71,7 +71,7 @@
                     v-for="tag in gradeOpt.subjectData"
                     :key="tag"
                     closable
-                    :disable-transitions="false"
+                    :disable-transitions="true"
                     @close="HandleDeleteOpen(tag,'subject')"
                   >
                     {{ tag.name }}
@@ -96,7 +96,7 @@
                     v-for="tag in gradeOpt.selectSubjectData"
                     :key="tag"
                     closable
-                    :disable-transitions="false"
+                    :disable-transitions="true"
                     @close="HandleDeleteOpen(tag,'selectedSubject')"
                   >
                     {{ tag.name   }}
@@ -172,7 +172,8 @@
               <div class="subject_all_list">
                 <div class="description">
                   <span class="subject_desc">可选科目</span>
-                  <span class="operation">新增科目</span>
+                  <!-- 添加科目时候显示 -->
+                  <span v-if="currentOpenType == 'subject'" class="operation" @click="HandleAddCustomSubject">+ 新增科目</span>
                 </div>
 
                 <div class="tree">
@@ -180,8 +181,14 @@
                     v-model:treeRef="optionalSubjetTreeDom"
                     :defaultTreeData="allTreeData" 
                     :showCheckBox="true"
-                    operation="none"
+                    :operation="currentOpenType == 'subject' ? 'all' : ''"
+                    operationFlagKey="custom"
+                    v-model:editItemKey="optionalTreeEditItemKey"
+                    v-model:editTaskName="optionalTreeEditTaskName"
+                    :showAddOperation="false"
                     @updateSelectedTreeNode="UpdataCheckedSubject"  
+                    @updateTreeName="HandleSaveCustomSubject"
+                    @deleteTreeNode="DeleteCustomSubject"
                   >
                   </TreeList>
                 </div>
@@ -231,7 +238,7 @@ import {
     addGradeSubjectApi,addGradeSelectedSubjectApi,
     deleteGradeSubjectApi,deleteGradeSelectedSubjectApi,
     addCustomSubjectApi,editCustomSubjectApi,editGradeApi,
-    deleteGradeApi,
+    deleteGradeApi,deleteCustomSubjectApi,
     getGradeListApi,getSubjectDataApi,getSubjectSelectedDataApi,
     saveEvaluationDataDetailApi
 } from '@/api/step1Component.ts'
@@ -256,6 +263,11 @@ interface gradeOptItm {
   selectedClassData:  subjectOrClassDataItm[],
 }
 
+interface treeDataItm {
+  id:number|string,
+  label:string,
+  custom?:number,   // 0 非自定义    1 自定义
+}
 
 const route = useRoute();
 
@@ -360,13 +372,14 @@ const EditSelectedGrade =  async()=>{
 const optionalSubjetTreeDom = ref()  //可选列表Tree Dom
 const addSubjectDialogVisible = ref(false);
 const addSubjectDialogLoading = ref(false);
-const subjectTitle = ref('配置科目/选科');
+const subjectTitle = ref('');
 const currentOpenType = ref('')  //当前打开的弹窗类型  subject 、selectedSubject ，grade ,
 const currentOperationRow = ref()  //当前操作的行
-const selectedTreeData = ref([])  //已选列表
-const allTreeData = ref([])   //可选列表
+const selectedTreeData = ref<treeDataItm[]>([])  //已选列表
+const allTreeData = ref<treeDataItm[]>([])   //可选列表
 const selectedSubjectIds = ref<any[]>([]) // 当前勾选的科目ids
-
+const optionalTreeEditItemKey = ref('')  //当前编辑的id
+const optionalTreeEditTaskName = ref('')  // 当前编辑的名称
 // 可选科目列表赋值 和 已选科目列表赋值
 const RenderOptionalAndSubjectTree = async (type,row)=>{
   let res = undefined
@@ -384,7 +397,8 @@ const RenderOptionalAndSubjectTree = async (type,row)=>{
     allTreeData.value = res.data.map(item=>{
       return {
         label:item.name,
-        id:item.id
+        id:item.id,
+        custom:Number(item.detailType)===12 ? 1 : 0   //  detailType===12  自定义科目
       }
     })
 
@@ -461,6 +475,64 @@ const DeleteCheckedSubject = async (param)=>{
   optionalSubjetTreeDom.value.setCheckedKeys(selectedSubjectIds.value)
 }
 
+// 新增自定义科目，显示可编辑输入框
+const HandleAddCustomSubject = () => {
+  if(optionalTreeEditItemKey.value) return
+
+  let length = allTreeData.value.length
+  let id = allTreeData.value[length - 1]?.id + `custom_${length}`
+  allTreeData.value.push({
+    label:`学科名称`,
+    id,
+    custom:1
+  })
+  // 把状态变成编辑状态
+  optionalTreeEditItemKey.value = id
+  optionalTreeEditTaskName.value = '学科名称'
+}
+
+// 保存新增的自定义年级 科目
+const HandleSaveCustomSubject = async (customSubject: any) => {
+  const {id,label} = customSubject
+  let res = undefined
+  let params = {
+    evaluationGradeId: currentOperationRow.value.id,
+    name: label
+  }
+  try{
+    if(id.includes('custom_')){
+      // 首次新增  自定义
+      res = await addCustomSubjectApi(params)
+    }else{
+      // 修改 自定义
+      res = await editCustomSubjectApi({...params,id})
+    }
+  }catch{}
+
+  if(res?.code == 200){
+    optionalTreeEditItemKey.value = ''
+    ElMessage.success(res?.msg)
+    // 重新查询 科目 / 选科 数据
+    await RenderOptionalAndSubjectTree(currentOpenType.value,currentOperationRow.value)
+  }else{
+    optionalTreeEditItemKey.value = id
+  }
+}
+
+// 删除自定义年级科目
+const DeleteCustomSubject = async (params)=>{
+  const {node,id} = params
+
+  let res = await deleteCustomSubjectApi(id)
+  if(res?.code == 200){
+    ElMessage.success(res?.msg)
+    // 重新查询 可选科目
+    await RenderOptionalAndSubjectTree(currentOpenType.value,currentOperationRow.value)
+  }
+}
+
+
+
 // 保存配置的年级科目
 const SaveGradeSubjectOpt = async ()=>{
   addSubjectDialogLoading.value = true
@@ -729,6 +801,7 @@ onMounted(async() => {
           font-weight: 600;
           font-size: 14px;
           color: #2E64FA;
+          cursor: pointer;
         } 
       }