feat: 历史记录抽屉查看数据对比差异

src/views/configManage/configParamTreeTable/index.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw, watch } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  toRaw,
+  watch,
+  defineAsyncComponent,
+} from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message } from 'ant-design-vue/lib';
 import { DataNode } from 'ant-design-vue/lib/tree';
@@ -379,6 +386,16 @@ const {
   arrayEditClose,
 });
 
+// 异步加载组件
+const OpeateDrawer = defineAsyncComponent(
+  () => import('./components/OpeateDrawer.vue')
+);
+const operateDrawer = ref<boolean>(false);
+/**打开历史 */
+function openOpeateDrawer() {
+  operateDrawer.value = !operateDrawer.value;
+}
+
 onMounted(() => {
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
@@ -464,16 +481,20 @@ onMounted(() => {
                 "
               >
                 <a-button
-                  @click="ptConfigApply(treeState.neType, '2', classState.student)"
+                  @click="
+                    ptConfigApply(treeState.neType, '2', classState.student)
+                  "
                   :loading="ptConfigState.applyLoading"
                 >
-                  应用
+                  应用学生配置
                 </a-button>
                 <a-button
-                  @click="ptConfigApply(treeState.neType, '3', classState.student)"
+                  @click="
+                    ptConfigApply(treeState.neType, '3', classState.student)
+                  "
                   :loading="ptConfigState.applyLoading"
                 >
-                  退回
+                  退回学生配置
                 </a-button>
               </template>
 
@@ -582,7 +603,7 @@ onMounted(() => {
             <a-space :size="8" align="center" v-show="!treeState.selectLoading">
               <a-tooltip>
                 <template #title>历史记录</template>
-                <a-button type="default" @click.prevent="">
+                <a-button type="default" @click.prevent="openOpeateDrawer()">
                   <template #icon>
                     <BlockOutlined />
                   </template>
@@ -630,6 +651,7 @@ onMounted(() => {
                       <a-input-number
                         v-if="record['type'] === 'int'"
                         v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading"
                         style="width: 100%"
                       ></a-input-number>
                       <a-switch
@@ -637,11 +659,13 @@ onMounted(() => {
                         v-model:checked="listState.editRecord['value']"
                         :checked-children="t('common.switch.open')"
                         :un-checked-children="t('common.switch.shut')"
+                        :disabled="listState.confirmLoading"
                       ></a-switch>
                       <a-select
                         v-else-if="record['type'] === 'enum'"
                         v-model:value="listState.editRecord['value']"
                         :allow-clear="true"
+                        :disabled="listState.confirmLoading"
                         style="width: 100%"
                       >
                         <a-select-option
@@ -655,6 +679,7 @@ onMounted(() => {
                       <a-input
                         v-else
                         v-model:value="listState.editRecord['value']"
+                        :disabled="listState.confirmLoading"
                       ></a-input>
                       <a-space :size="16" align="center" direction="horizontal">
                         <a-tooltip placement="bottomRight">
@@ -667,11 +692,13 @@ onMounted(() => {
                               )
                             "
                             placement="topRight"
+                            :disabled="listState.confirmLoading"
                             @confirm="listEditOk()"
                           >
                             <a-button
                               type="text"
                               class="editable-cell__icon-edit"
+                              :disabled="listState.confirmLoading"
                             >
                               <template #icon><CheckOutlined /></template>
                             </a-button>
@@ -684,6 +711,7 @@ onMounted(() => {
                           <a-button
                             type="text"
                             class="editable-cell__icon-edit"
+                            :disabled="listState.confirmLoading"
                             @click.prevent="listEditClose()"
                           >
                             <template #icon><CloseOutlined /></template>
@@ -702,7 +730,9 @@ onMounted(() => {
                         v-if="
                           !['read-only', 'read', 'ro'].includes(
                             record.access
-                          ) && !(hasRoles(['teacher']) && classState.student)
+                          ) &&
+                          !(hasRoles(['teacher']) && classState.student) &&
+                          !listState.confirmLoading
                         "
                       />
                     </div>
@@ -1023,6 +1053,14 @@ onMounted(() => {
         </a-form-item>
       </a-form>
     </ProModal>
+
+    <!-- 历史记录抽屉 -->
+    <OpeateDrawer
+      v-model:visible="operateDrawer"
+      :ne-type="treeState.neType"
+      :param-name="treeState.selectNode.paramName"
+      :student="classState.student"
+    ></OpeateDrawer>
   </PageContainer>
 </template>