feat: 工况库审批预览

src/views/index/approvalPreview/components/taskPool.vue

@@ -1,14 +1,53 @@
 <template>
   <div class="gl-page-content-full">
-    <div>工况清单库：{{ poolName }}</div>
-    <loadCaseTable
-      :editMode="false"
-      ref="treeTableRef"
-      readonly
-      tableName="TASK_POOL"
-      :data="fullTableData"
-      :hasOperationColumn="false"
-    > </loadCaseTable>
+    <div class="left">
+      <loadCaseTable
+        :editMode="false"
+        ref="treeTableRef"
+        readonly
+        tableName="TASK_POOL"
+        :data="fullTableData"
+        :hasOperationColumn="false"
+        :showCheckBox="false"
+      > </loadCaseTable>
+    </div>
+    <div class="right">
+      <div class="label">工况清单库</div>
+      <div class="content">
+        {{ poolName }}
+      </div>
+      <div class="label">新增数据</div>
+      <div class="content">
+        <ul v-if="addedItems.length">
+          <li v-for="(item, idx) in addedItems" :key="'add-'+idx">
+            <el-tag type="success">  {{ item.nodeName }}</el-tag>
+          </li>
+        </ul>
+        <div v-else class="empty">无新增数据</div>
+      </div>
+
+      <div class="label">修改数据</div>
+      <div class="content">
+        <ul v-if="updatedItems.length">
+          <li v-for="(item, idx) in updatedItems" :key="'upd-'+idx">
+            <el-tag type="primary">  {{ item.nodeName }}</el-tag>
+          </li>
+        </ul>
+        <div v-else class="empty">无修改数据</div>
+      </div>
+
+      <div class="label">删除数据</div>
+      <div class="content">
+        <ul v-if="deletedItems.length">
+          <li v-for="(item, idx) in deletedItems" :key="'del-'+idx">
+            <el-tag type="danger">  {{ item.nodeName }}</el-tag>
+          </li>
+        </ul>
+        <div v-else class="empty">无删除数据</div>
+      </div>
+
+    </div>
+
   </div>
 
 </template>
@@ -30,12 +69,78 @@ const approveContents = ref<any>(null);
 
 const fullTableData = ref<any>([]);
 
+const addedItems = ref<any[]>([]);
+const updatedItems = ref<any[]>([]);
+const deletedItems = ref<any[]>([]);
+
+const flattenAddGroups = (c: any) => {
+  return c.insertRecords;
+};
+
+const flattenUpdateGroups = (c: any) => {
+  return c.updateRecords;
+};
+
+const flattenDeleteGroups = (c: any) => {
+  return c.removeRecords;
+};
+
 watchEffect(() => {
   fullTableData.value = [];
+  addedItems.value = [];
+  updatedItems.value = [];
+  deletedItems.value = [];
+
   if (props.data) {
     approveContents.value = JSON.parse(props.data?.approveContents || '{}');
     fullTableData.value = approveContents.value?.fullTableData;
     poolName.value = approveContents.value?.poolBrief?.poolName;
+    const approvePreviewInfo = approveContents.value?.approvePreviewInfo || {};
+    try {
+      addedItems.value = flattenAddGroups(approvePreviewInfo || {});
+      updatedItems.value = flattenUpdateGroups(approvePreviewInfo || {});
+      deletedItems.value = flattenDeleteGroups(approvePreviewInfo || {});
+    } catch (e) {
+      console.error('flatten approvePreviewInfo fail', e);
+      addedItems.value = [];
+      updatedItems.value = [];
+      deletedItems.value = [];
+    }
   }
 });
 </script>
+<style lang="scss" scoped >
+.left {
+  width: 70%;
+  float: left;
+  padding-right: 10px;
+  border-right: 1px solid #e8e8e8;
+  height: 100%;
+}
+.right {
+  width: 30%;
+  float: left;
+  padding-left: 10px;
+  height: 100%;
+  overflow: auto;
+}
+.label {
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.content {
+  max-height: 500px;
+  overflow: auto;
+  background: #fff;
+  padding: 8px;
+  border: 1px solid #f0f0f0;
+}
+.empty {
+  color: #999;
+  font-size: 12px;
+}
+ul>li {
+  margin-bottom: 6px;
+}
+</style>