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

src/api/pt/neConfigDataLog.ts

@@ -0,0 +1,27 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 网元参数配置数据变更日志信息
+ * @param params 数据 {neType,paramName}
+ * @returns object
+ */
+export function getPtNeConfigDataLogList(params: Record<string, any>) {
+  return request({
+    url: `/pt/neConfigDataLog`,
+    params,
+    method: 'get',
+  });
+}
+
+/**
+ * 网元参数配置数据变更日志还原到数据
+ * @param data 数据 { "id": "1", "value": "old" }
+ * @returns object
+ */
+export function restorePtNeConfigDataLog(data: Record<string, any>) {
+  return request({
+    url: `/pt/neConfigDataLog/restore`,
+    method: 'put',
+    data: data,
+  });
+}

src/views/configManage/configParamTreeTable/components/OpeateDrawer.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { reactive, onMounted, toRaw, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import CodemirrorEditeDiff from '@/components/CodemirrorEditeDiff/index.vue';
+import { parseDateToStr } from '@/utils/date-utils';
+import {
+  getPtNeConfigDataLogList,
+  restorePtNeConfigDataLog,
+} from '@/api/pt/neConfigDataLog';
+import useDictStore from '@/store/modules/dict';
+import { message } from 'ant-design-vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  /**网元类型 */
+  neType: {
+    type: String,
+    default: '',
+  },
+  /**参数名 */
+  paramName: {
+    type: String,
+    default: '',
+  },
+  /**学生用户账号 */
+  student: {
+    type: String,
+    default: '',
+  },
+});
+
+const { getDict } = useDictStore();
+
+/**字典数据 */
+let dict: {
+  /**业务类型 */
+  sysBusinessType: DictType[];
+} = reactive({
+  sysBusinessType: [],
+});
+
+/**对话框对象信息状态类型 */
+type StateType = {
+  /**新增框或修改框是否显示 */
+  visibleByList: boolean;
+  /**差异比较框是否显示 */
+  visibleByDiff: boolean;
+  /**标题 */
+  title: string;
+  /**加载状态 */
+  loading: boolean;
+  /**数据 */
+  data: Record<string, any>[];
+  /**差异数据 */
+  dataDiff: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let state: StateType = reactive({
+  visibleByList: false,
+  visibleByDiff: false,
+  title: '学生操作参数名称',
+  loading: false,
+  data: [],
+  dataDiff: {},
+  confirmLoading: false,
+});
+
+function onClose() {
+  state.loading = false;
+  state.visibleByList = false;
+  state.visibleByDiff = false;
+  state.data = [];
+  state.dataDiff = {};
+  emit('cancel');
+  emit('update:visible', false);
+  queryParams = {
+    neType: '',
+    paramName: '',
+    student: '',
+    pageNum: 1,
+    pageSize: 10,
+  };
+}
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: '',
+  /**可用属性值 */
+  paramName: '',
+  /**学生账号 */
+  student: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 10,
+});
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (state.loading) return;
+  state.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    if (pageNum === 1) state.data = [];
+  }
+  getPtNeConfigDataLogList(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // tablePagination.total = res.total;
+      state.data = state.data.concat(res.rows);
+      // 去首个做标题
+      if (queryParams.pageNum === 1 && state.data.length > 0) {
+        const item = state.data[0];
+        state.title = `${item.paramDisplay} - ${item.createBy}`;
+      }
+      if (state.data.length <= res.total && res.rows.length > 0) {
+        queryParams.pageNum++;
+      }
+    }
+    state.loading = false;
+  });
+}
+
+/**差异比较框打开 */
+function fnMergeCellOpen(row: Record<string, any>) {
+  state.dataDiff = row;
+  state.dataDiff.paramJsonOld = JSON.stringify(
+    JSON.parse(state.dataDiff.paramJsonOld),
+    null,
+    2
+  );
+  state.dataDiff.paramJsonNew = JSON.stringify(
+    JSON.parse(state.dataDiff.paramJsonNew),
+    null,
+    2
+  );
+  state.visibleByDiff = true;
+}
+
+/**差异比较框关闭 */
+function fnMergeCellClose() {
+  state.visibleByDiff = false;
+  state.dataDiff = {};
+}
+
+/**差异比较还原 */
+function fnMergeCellRestore(value: 'old' | 'new') {
+  if (state.confirmLoading) return;
+  const id = state.dataDiff.id;
+  restorePtNeConfigDataLog({ id, value })
+    .then((res: any) => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+        fnMergeCellClose();
+        fnGetList(1);
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      state.confirmLoading = false;
+    });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      if (props.neType && props.paramName) {
+        queryParams.neType = props.neType;
+        queryParams.paramName = props.paramName;
+        if (props.student) {
+          queryParams.student = props.student;
+        }
+        fnGetList();
+        state.visibleByList = true;
+      }
+    }
+  }
+);
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([getDict('sys_oper_type')]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.sysBusinessType = resArr[0].value;
+    }
+  });
+});
+</script>
+
+<template>
+  <div>
+    <a-drawer
+      :width="500"
+      :title="state.title"
+      placement="right"
+      :visible="state.visibleByList"
+      @close="onClose"
+    >
+      <a-list
+        class="demo-loadmore-list"
+        item-layout="horizontal"
+        :data-source="state.data"
+      >
+        <template #loadMore>
+          <div
+            :style="{
+              textAlign: 'center',
+              marginTop: '12px',
+              height: '32px',
+              lineHeight: '32px',
+            }"
+          >
+            <a-button @click="fnGetList()" :loading="state.loading">
+              加载更多
+            </a-button>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <template #actions>
+              <a-tooltip>
+                <template #title>差异对比</template>
+                <a-button type="primary" @click.prevent="fnMergeCellOpen(item)">
+                  <template #icon><MergeCellsOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </template>
+            <a-list-item-meta>
+              <template #title>
+                <DictTag
+                  :options="dict.sysBusinessType"
+                  :value="item.operaType"
+                />
+              </template>
+              <template #description>
+                {{ parseDateToStr(item.createTime) }}
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-drawer>
+
+    <a-modal
+      :width="800"
+      :destroyOnClose="true"
+      :mask-closable="false"
+      v-model:visible="state.visibleByDiff"
+      :footer="null"
+      :body-style="{ padding: 0, maxHeight: '650px', 'overflow-y': 'auto' }"
+      @ok="fnMergeCellClose()"
+      @cancel="fnMergeCellClose()"
+    >
+      <template #title>
+        <DictTag
+          :options="dict.sysBusinessType"
+          :value="state.dataDiff.operaType"
+        />
+        {{ parseDateToStr(state.dataDiff.createTime) }}
+      </template>
+      <div class="diffBack">
+        <div>
+          <a-button
+            type="text"
+            :loading="state.confirmLoading"
+            @click.prevent="fnMergeCellRestore('old')"
+          >
+            <template #icon><MergeCellsOutlined /></template>
+            还原此版本
+          </a-button>
+        </div>
+        <div>
+          <a-button
+            type="text"
+            :loading="state.confirmLoading"
+            @click.prevent="fnMergeCellRestore('new')"
+          >
+            <template #icon><MergeCellsOutlined /></template>
+            还原此版本
+          </a-button>
+        </div>
+      </div>
+      <CodemirrorEditeDiff
+        :old-area="state.dataDiff.paramJsonOld"
+        :new-area="state.dataDiff.paramJsonNew"
+      ></CodemirrorEditeDiff>
+    </a-modal>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.diffBack {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  & > div:first-child {
+    flex: 1;
+    background: #fa9;
+  }
+  & > div:last-child {
+    flex: 1;
+    background: #8f8;
+  }
+}
+</style>

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>