fix: 参数数据与示例对比差异显示功能

src/api/pt/neConfig.ts

@@ -26,6 +26,19 @@ export function ptResetAsDefault(neType: string) {
   });
 }
 
+/**
+ * 数据比较示例
+ * @param params 查询参数
+ * @returns object
+ */
+export function ptContrastAsDefault(params: Record<string, any>) {
+  return request({
+    url: `/pt/neConfigData/contrast`,
+    params,
+    method: 'get',
+  });
+}
+
 /**
  * 网元参数配置信息
  * @param params 数据 {neType,paramName}

src/views/configManage/configParamTreeTable/index.vue

@@ -20,7 +20,7 @@ import useConfigList from './hooks/useConfigList';
 import useConfigArray from './hooks/useConfigArray';
 import useConfigArrayChild from './hooks/useConfigArrayChild';
 import { getAllNeConfig } from '@/api/ne/neConfig';
-import { getPtNeConfigData } from '@/api/pt/neConfig';
+import { getPtNeConfigData, ptContrastAsDefault } from '@/api/pt/neConfig';
 import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
@@ -397,6 +397,29 @@ function openOpeateDrawer() {
   operateDrawer.value = !operateDrawer.value;
 }
 
+// 数据与示例比较
+const dataDiffState = reactive({
+  visible: false,
+  title: '对比示例',
+  exampleData: '',
+  data: '',
+});
+// 获取当前数据与示例数据
+function fnDataDiff() {
+  ptContrastAsDefault({
+    neType: treeState.neType,
+    paramName: treeState.selectNode.paramName,
+    student: classState.student,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      dataDiffState.data = JSON.stringify(res.data, null, 2);
+      dataDiffState.exampleData = JSON.stringify(res.exampleData, null, 2);
+      dataDiffState.title = treeState.selectNode.paramDisplay;
+      dataDiffState.visible = true;
+    }
+  });
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -488,7 +511,7 @@ onMounted(() => {
                   "
                   :loading="ptConfigState.applyLoading"
                 >
-                  应用学生配置
+                  应用该学生配置
                 </a-button>
                 <a-button
                   @click="
@@ -496,7 +519,7 @@ onMounted(() => {
                   "
                   :loading="ptConfigState.applyLoading"
                 >
-                  退回学生配置
+                  退回该学生配置
                 </a-button>
               </template>
 
@@ -506,14 +529,14 @@ onMounted(() => {
                 @click="ptConfigApply(treeState.neType, '2')"
                 :loading="ptConfigState.applyLoading"
               >
-                (管理员/教师) 应用到网元
+                应用配置到网元
               </a-button>
               <a-button
                 @click="ptConfigSave(treeState.neType)"
                 :loading="ptConfigState.saveLoading"
                 v-roles:has="['admin']"
               >
-                (管理员)载入网元配置为系统示例
+                载入当前网元配置
               </a-button>
               <a-button
                 @click="ptConfigReset(treeState.neType)"
@@ -521,21 +544,21 @@ onMounted(() => {
                 :loading="ptConfigState.restLoading"
                 v-roles:has="['teacher']"
               >
-                (教师)重置为系统示例
+                重置为示例
               </a-button>
               <a-button
                 @click="ptConfigReset(treeState.neType)"
                 :loading="ptConfigState.restLoading"
                 v-roles:has="['student']"
               >
-                (学生)重置为教师示例
+                重置为示例
               </a-button>
               <a-button
                 @click="ptConfigApply(treeState.neType, '0')"
                 :loading="ptConfigState.applyLoading"
                 v-roles:has="['student']"
               >
-                (学生)申请应用到 {{ treeState.neType }}
+                申请配置应用到 {{ treeState.neType }}
               </a-button>
             </a-space>
           </a-form-item>
@@ -587,7 +610,11 @@ onMounted(() => {
           :loading="treeState.selectLoading"
         >
           <template #title>
-            <a-button type="text" @click.prevent="changeCollapsible()">
+            <a-button
+              type="text"
+              size="small"
+              @click.prevent="changeCollapsible()"
+            >
               <template #icon>
                 <MenuFoldOutlined v-show="collapsible" />
                 <MenuUnfoldOutlined v-show="!collapsible" />
@@ -603,11 +630,29 @@ onMounted(() => {
           </template>
           <template #extra>
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
+              <span v-roles:has="['teacher', 'student']">
+                <a-tooltip>
+                  <template #title>与示例比较</template>
+                  <a-button
+                    type="default"
+                    size="small"
+                    @click.prevent="fnDataDiff()"
+                  >
+                    <template #icon>
+                      <BlockOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+              </span>
               <a-tooltip>
                 <template #title>历史记录</template>
-                <a-button type="default" @click.prevent="openOpeateDrawer()">
+                <a-button
+                  type="default"
+                  size="small"
+                  @click.prevent="openOpeateDrawer()"
+                >
                   <template #icon>
-                    <BlockOutlined />
+                    <BarsOutlined />
                   </template>
                 </a-button>
               </a-tooltip>
@@ -615,6 +660,7 @@ onMounted(() => {
                 <template #title>{{ t('common.reloadText') }}</template>
                 <a-button
                   type="default"
+                  size="small"
                   @click.prevent="fnActiveConfigNode('#')"
                 >
                   <template #icon>
@@ -1068,6 +1114,32 @@ onMounted(() => {
       </a-form>
     </ProModal>
 
+    <!-- 与示例对比差异 -->
+    <a-modal
+      :width="800"
+      :destroyOnClose="true"
+      :mask-closable="false"
+      v-model:visible="dataDiffState.visible"
+      :title="dataDiffState.title"
+      :footer="null"
+      :body-style="{ padding: 0, maxHeight: '650px', 'overflow-y': 'auto' }"
+    >
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        "
+      >
+        <div style="flex: 1; text-align: center">示例配置</div>
+        <div style="flex: 1; text-align: center">当前个人</div>
+      </div>
+      <CodemirrorEditeDiff
+        :old-area="dataDiffState.exampleData"
+        :new-area="dataDiffState.data"
+      ></CodemirrorEditeDiff>
+    </a-modal>
+
     <!-- 历史记录抽屉 -->
     <OpeateDrawer
       v-model:visible="operateDrawer"