feat: 三级指标

src/views/evaluate/il/speech/components/MetricForm.vue

@@ -8,7 +8,7 @@
     @submit.prevent
   >
     <el-form-item label="指标名称" prop="name">
-      <el-input v-model="metric.name" placeholder="请输入一级指标名称" />
+      <el-input v-model="metric.name" placeholder="请输入指标名称" />
     </el-form-item>
   </el-form>
 </template>

src/views/evaluate/il/speech/components/ScoreTable.vue

@@ -3,12 +3,9 @@
     <!-- 表头 -->
     <div class="table-header">
       <div class="table-header-item">数值1</div>
-      <div class="table-header-item">符号1</div>
-      <div class="table-header-item">得分指标</div>
-      <div class="table-header-item">符号2</div>
+      <div class="table-header-item">符号</div>
       <div class="table-header-item">数值2</div>
       <div class="table-header-item">分数</div>
-      <div class="table-header-item">权重</div>
       <div class="table-header-item">操作</div>
     </div>
 
@@ -28,17 +25,6 @@
           <el-option label=">" value="gt"></el-option>
         </el-select>
 
-        <!-- 得分指标 -->
-        <el-input v-model="row.indicator" class="table-cell-input" :readonly="true" />
-
-        <!-- 符号2 -->
-        <el-select v-model="row.symbol2" class="table-cell-select">
-          <el-option label="≤" value="le"></el-option>
-          <el-option label="<" value="lt"></el-option>
-          <el-option label="≥" value="ge"></el-option>
-          <el-option label=">" value="gt"></el-option>
-        </el-select>
-
         <!-- 数值2 -->
         <el-input v-model="row.value2" class="table-cell-input">
           <template #append>ms</template>
@@ -47,11 +33,6 @@
         <!-- 分数 -->
         <el-input v-model="row.score" class="table-cell-input" />
 
-        <!-- 权重 -->
-        <el-input v-model="row.weight" class="table-cell-input">
-          <template #append>%</template>
-        </el-input>
-
         <!-- 操作按钮 -->
         <div class="table-cell-action">
           <el-button
@@ -183,7 +164,7 @@ $font-medium: 500;
   // 表头样式
   .table-header {
     display: grid;
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: $gap-base;
     padding: $gap-base $padding-base;
     background-color: $table-header-bg;
@@ -204,7 +185,7 @@ $font-medium: 500;
   .table-body {
     .table-row {
       display: grid;
-      grid-template-columns: repeat(8, minmax(0, 1fr));
+      grid-template-columns: repeat(5, minmax(0, 1fr));
       gap: $gap-base;
       padding: $gap-base * 1.5 $padding-base;
       border-bottom: 1px solid $table-border-color;

src/views/evaluate/il/speech/index.vue

@@ -6,22 +6,46 @@
     <div class="right">
       <div class="title">
         <h2>指标配置</h2>
-        <el-button type="primary">
+        <el-button type="primary" @click="handleAddSecondaryIndicator">
           <el-icon><Plus /></el-icon>
           添加二级指标
         </el-button>
       </div>
       <div class="secondaryIndicator-container" v-if="listData.length > 0">
-        <SecondaryIndicator v-for="value in listData" :key="value.id" :title="value.title" :weight="value.weight" />
+        <SecondaryIndicator v-for="value in listData" :key="value.id" :indicatorId="value.id" :name="value.name" :weight="value.weight" @refresh="refreshSecondaryIndicator" />
       </div>
+
+      <el-dialog v-model="showAddDialog" title="添加二级指标" width="500px">
+        <el-form 
+          ref="formRef" 
+          :model="metric" 
+          :rules="rules" 
+          label-width="100px"
+        >
+          <el-form-item label="指标名称" prop="name">
+            <el-input v-model="metric.name" placeholder="请输入指标名称" />
+          </el-form-item>
+          <el-form-item label="指标权重" prop="weight">
+            <el-input-number v-model="metric.weight" placeholder="请输入指标权重" controls-position="right" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="resetForm">取消</el-button>
+            <el-button type="primary" @click="submitMetricForm">确认</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import Indicator from './indicator.vue';
 import SecondaryIndicator from './secondaryIndicator.vue';
-import { getIndicatorByParentId } from "@/api/evaluate/indicator";
+import { getIndicatorByParentId, addIndicator } from "@/api/evaluate/indicator";
+import { ElMessage } from 'element-plus'
 
 const activeIndicatorId = ref(null);
 
@@ -35,11 +59,58 @@ const listData = ref([])
 
  */
 
+const metric = ref({
+  name: '',
+  weight: ''
+})
+
+const formRef = ref(null);
+
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入指标名称', trigger: 'blur' }
+  ],
+  weight: [
+    { required: true, message: '请输入指标权重', trigger: 'blur' }
+  ]
+})
+
 const handleActiveMetricCategory = (data) => {
   activeIndicatorId.value = data;
   getIndicatorByParentIdData(data);
 };
 
+
+const showAddDialog = ref(false);
+
+const handleAddSecondaryIndicator = () => {
+  showAddDialog.value = true;
+};
+
+const resetForm = () => {
+  showAddDialog.value = false;
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+}
+
+const submitMetricForm = () => {
+  if (formRef.value) {
+    formRef.value.validate(async (valid) => {
+      if (valid) {
+        const res = await addIndicator({ name: metric.value.name, parentId: activeIndicatorId.value, level: 2, weight: metric.value.weight });
+        if (res.code === 200) {
+          ElMessage.success('指标添加成功')
+          resetForm()
+          getIndicatorByParentIdData(activeIndicatorId.value)
+        } else {
+          ElMessage.error(res.message || '指标添加失败')
+        }
+      }
+    });
+  }
+}
+
 const getIndicatorByParentIdData = async (parentId) => {
   try {
     const res = await getIndicatorByParentId(parentId);
@@ -50,6 +121,10 @@ const getIndicatorByParentIdData = async (parentId) => {
     console.error("获取指标数据失败:", error);
   }
 };
+
+const refreshSecondaryIndicator = () => {
+  getIndicatorByParentIdData(activeIndicatorId.value)
+}
 </script>
 
 <style lang="scss" scoped>

src/views/evaluate/il/speech/indicator.vue

@@ -26,7 +26,7 @@
       <MetricForm ref="metricFormRef" :isNew="true" :metric="newMetric" @refresh="handleRefresh" />
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="showAddDialog = false">取消</el-button>
+          <el-button @click="resetForm">取消</el-button>
           <el-button type="primary" @click="submitMetricForm">确认</el-button>
         </span>
       </template>
@@ -54,7 +54,6 @@ const handleAddMetric = () => {
 
 
 const removeCategory = (categoryId) => {
-  console.log("-----------",categoryId)
   ElMessageBox.confirm(
     "确定要删除该指标及其所有子指标吗？",
     "删除确认",
@@ -93,6 +92,13 @@ const submitMetricForm = () => {
   }
 };
 
+const resetForm = () => {
+  showAddDialog.value = false;
+  if (metricFormRef.value) {
+    metricFormRef.value.resetFields();
+  }
+}
+
 const handleRefresh = () => {
   getIndicatorByParentIdData(0);
   showAddDialog.value = false;

src/views/evaluate/il/speech/secondaryIndicator.vue

@@ -4,36 +4,77 @@
       <div class="title-container">
         <div class="title-left">
           <el-tag>二级指标</el-tag>
-           <div class="title">指标名称:<span class="text">{{ props.title }}</span></div>
+           <div class="title">指标名称:<span class="text">{{ props.name }}</span></div>
         </div>
         <div>指标权重:{{ props.weight }}%</div>
         <div>
-          <el-button size="small" :icon="Edit" />
-          <el-button size="small" type="danger" :icon="Delete" />
+          <el-button size="small" :icon="Edit" @click="handleEdit" />
+          <el-button size="small" type="danger" :icon="Delete" @click="handleDelete" />
         </div>
       </div>
 
       <div>
-        <el-tabs v-model="activeTab">
+          <div style="text-align: right; margin: 10px 0px; ">
+          <el-button size="small" type="primary" @click="handleAddTab">
+            <el-icon><Plus /></el-icon>
+            添加三级指标
+          </el-button>
+        </div>
+        <el-tabs v-model="activeTab" closable @tab-remove="removeTab">
           <el-tab-pane
             v-for="item in tabList"
-            :key="item.name"
-            :label="item.title"
-            :name="item.name"
+            :key="item.id"
+            :label="item.name"
+            :name="item.id"
           >
-            <ScoreTable :title="item.title" />
+          <template #label>
+            <span>
+              <span>{{ item.name }}</span> 
+              <el-icon :size="12" style="margin-left: 5px; cursor: pointer;" @click="($event) => handleEditTab($event, item)"><Edit /></el-icon>
+            </span>
+          </template>
+            <ScoreTable :title="item.name" />
           </el-tab-pane>
         </el-tabs>
       </div>
+
+      <el-dialog v-model="showUpdateDialog" :title="dialogTitle" width="500px">
+        <el-form 
+          ref="formRef" 
+          :model="metric" 
+          :rules="rules" 
+          label-width="100px"
+        >
+          <el-form-item label="指标名称" prop="name">
+            <el-input v-model="metric.name" placeholder="请输入指标名称" />
+          </el-form-item>
+          <el-form-item v-if="level === 2" label="指标权重" prop="weight">
+            <el-input-number v-model="metric.weight" placeholder="请输入指标权重" controls-position="right" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="resetForm">取消</el-button>
+            <el-button type="primary" @click="submitMetricForm">确认</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script setup>
 import { Delete, Edit } from "@element-plus/icons-vue";
 import ScoreTable from "./components/ScoreTable.vue";
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { deleteIndicator, updateIndicator, getIndicatorByParentId, addIndicator } from "@/api/evaluate/indicator";
+import { onMounted } from "vue";
 
 const props = defineProps({
-  title: {
+  indicatorId: {
+    type: Number,
+    default: 0
+  },
+  name: {
     type: String,
     default: "无噪声唤醒",
   },
@@ -43,18 +84,172 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['refresh'])
+
 const activeTab = ref('1');
 
-const tabList = ref([
+const tabList = ref([]);
+
+const level = ref(2);
+const isNew = ref(false)
+
+const formRef = ref(null);
+const showUpdateDialog = ref(false);
+
+const metric = ref({
+  name: props.name,
+  weight: props.weight,
+  id: props.indicatorId
+})
+
+const handleEdit = () => {
+  level.value = 2;
+  isNew.value = false;
+  showUpdateDialog.value = true;
+  metric.value = {
+    name: props.name,
+    weight: props.weight,
+    id: props.indicatorId
+  }
+};
+
+const dialogTitle = computed(() => {
+  return `${isNew.value ? '添加' : '编辑'}${level.value === 2 ? '二级' : '三级'}指标`;
+});
+
+const resetForm = () => {
+  showUpdateDialog.value = false;
+};
+
+const submitMetricForm = () => {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      if (!isNew.value) { // 编辑
+        const res = await updateIndicator({ id: metric.value.id, name: metric.value.name, weight: metric.value.weight })
+        if (res.code === 200) {
+          ElMessage.success('指标修改成功')
+          resetForm()
+          if (level.value === 2) {
+            emit('refresh')
+          } else {
+            getIndicatorByParentIdData(props.indicatorId);
+          }
+          emit('refresh')
+        } else {
+          ElMessage.error(res.message || '指标修改失败')
+        }
+      } else {
+        addIndicator({ name: metric.value.name, parentId: props.indicatorId, level: level.value, weight: metric.value.weight }).then(res => {
+          if (res.code === 200) {
+            ElMessage.success('指标添加成功')
+            getIndicatorByParentIdData(props.indicatorId);
+            resetForm()
+          } else {
+            ElMessage.error(res.message || '指标添加失败')
+          }
+        })
+      }
+    } else {
+      console.log("表单验证失败");
+      return false;
+    }
+  });
+};
+
+const handleDelete = () => {
+  ElMessageBox.confirm(
+    "确定要删除该指标及其所有子指标吗？",
+    "删除确认",
     {
-    title: "唤醒时间",
-    name: "1",
-  },
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  ).then(async () => {
+    try {
+      const res = await deleteIndicator(props.indicatorId);
+      if (res.code === 200) {
+        ElMessage.success("指标删除成功");
+        emit('refresh')
+      } else {
+        ElMessage.error(res.message || "指标删除失败");
+      }
+    } catch (error) {
+      console.error("删除指标失败:", error);
+      ElMessage.error("删除指标失败");
+    }
+  }).catch(() => {
+    // 取消删除
+  });
+};
+
+const handleAddTab = () => {
+  level.value = 3;
+  isNew.value = true;
+  metric.value = {
+    name: '',
+    weight: 0,
+    id: null
+  }
+  showUpdateDialog.value = true;
+};
+
+const removeTab = (targetName) => {
+  console.log("删除了标签:", targetName);
+  ElMessageBox.confirm(
+    "确定要删除该指标及其所有子指标吗？",
+    "删除确认",
     {
-    title: "唤醒成功率",
-    name: "2",
-  },
-]);
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning",
+    }
+  ).then(async () => {
+    try {
+      const res = await deleteIndicator(targetName);
+      if (res.code === 200) {
+        ElMessage.success("指标删除成功");
+        getIndicatorByParentIdData(props.indicatorId);
+      } else {
+        ElMessage.error(res.message || "指标删除失败");
+      }
+    } catch (error) {
+      console.error("删除指标失败:", error);
+      ElMessage.error("删除指标失败");
+    }
+  }).catch(() => {
+    // 取消删除
+  });
+};
+
+const handleEditTab = (event, item) => {
+  event.stopPropagation();
+  event.preventDefault();
+  level.value = 3;
+  isNew.value = false;
+  metric.value = {
+    name: item.name,
+    weight: item.weight,
+    id: item.id
+  }
+  showUpdateDialog.value = true;
+};
+
+const getIndicatorByParentIdData = async (parentId) => {
+  try {
+    const res = await getIndicatorByParentId(parentId);
+      if (res.code === 200) {
+        tabList.value = res.data;
+        activeTab.value = tabList.value[0]?.id || '1';
+      }
+  } catch (error) {
+    console.error("获取指标数据失败:", error);
+  }
+};
+
+onMounted(() => {
+  getIndicatorByParentIdData(props.indicatorId);
+});
 </script>
 <style lang="scss" scoped>
 .container {