From fdd668f27002e55a6a5b8b70daff7a79e1c29c11 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Sun, 30 Jan 2022 00:53:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84render.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                 |   1 +
 components/Plugin/Plugin.vue |   4 +-
 components/Render/Render.vue | 143 ++++++++++++++---------------------
 3 files changed, 58 insertions(+), 90 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f450176..d779c18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -175,6 +175,7 @@
  - | 为了演示所有人都能看到交付物插件 | [0e14ba9](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/0e14ba9)
  - | 细节调整 | [7f9cf1f](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/7f9cf1f)
  - | 细节调整 | [3d1c463](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3d1c463)
+ - | 细节调整； | [d11b35a](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/d11b35a)
  - | 细节调整；交付物记录没有数据显示empty | [79c3051](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/79c3051)
  - | 项目列表 | [0486e98](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/0486e98)
  - | 修改插件名的输入框和查看历史记录 | [99fb88e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/99fb88e)
diff --git a/components/Plugin/Plugin.vue b/components/Plugin/Plugin.vue
index eb08749..e933ebe 100644
--- a/components/Plugin/Plugin.vue
+++ b/components/Plugin/Plugin.vue
@@ -27,8 +27,7 @@
     <p-account-management v-else-if="pluginId === '19'" class="p-2" />
     <p-domain-source-manage v-else-if="pluginId === '20'" class="p-2" />
     <p-project-version-management v-else-if="pluginId === '21'" class="p-2" />
-    
-    <!-- #ifdef H5 -->
+
     <Render
       v-else
       :task="task"
@@ -38,6 +37,7 @@
       :businessPluginId="businessPluginId"
       :param="param"
     />
+    <!-- #ifdef H5 -->
     <!-- #endif -->
   </view>
 </template>
diff --git a/components/Render/Render.vue b/components/Render/Render.vue
index 19ee7b3..6e968d5 100644
--- a/components/Render/Render.vue
+++ b/components/Render/Render.vue
@@ -1,10 +1,7 @@
 <template>
-  <view class="render-box shadow-lg" v-if="show">
-    <!-- #ifdef H5 -->
+  <view class="render-box shadow-lg" v-if="pluginInfo">
     <view
-      class="content"
-      style="border-radius: 8px"
-      :id="`project-${task.id}`"
+      :id="`render-${pluginTaskId}`"
       :data-did="task.detailId"
       :data-param="param"
       :data-pdu="task.planDuration"
@@ -17,34 +14,17 @@
       :data-token="token"
       :data-rstart="task.realStart"
       :data-uid="userId"
+      :pluginInfo="pluginInfo"
+      :change:pluginInfo="project.renderDom"
     ></view>
-    <!-- #endif -->
-    <!-- #ifdef APP-PLUS -->
-    <view
-      class="content"
-      :id="`project-${task.id}`"
-      :data-did="task.detailId"
-      :data-param="param"
-      :data-pdu="task.planDuration"
-      :data-pid="projectId"
-      :data-pstart="task.planStart"
-      :data-rdu="task.realDuration"
-      :data-rid="roleId"
-      :data-tid="task.id"
-      :data-tname="task.name"
-      :data-token="token"
-      :data-rstart="task.realStart"
-      :data-uid="userId"
-    ></view>
-    <!-- #endif -->
   </view>
 </template>
 
 <script setup>
-import { computed, reactive, watch, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
 
-defineProps({
+const props = defineProps({
   task: { default: () => {}, type: Object },
   pluginId: { default: '1', type: String },
   styleType: { default: 0, type: Number },
@@ -53,82 +33,69 @@ defineProps({
   param: { type: String, default: '' },
 });
 
-const data = reactive({ show: true });
-
 const store = useStore();
 const roleId = computed(() => store.state.role.roleId);
 const token = computed(() => store.state.user.token);
 const userId = computed(() => store.getters['user/userId']);
 const projectId = computed(() => store.getters['project/projectId']);
-const allPlugin = uni.$storage.getStorageSync('allPlugin');
+const pluginInfo = ref(null); // 插件的具体数据
+
+onMounted(() => {
+  getPlugin();
+});
+// 获取插件信息
+async function getPlugin() {
+  const allPlugin = uni.$storage.getStorageSync('allPlugin');
+  if (allPlugin && JSON.parse(allPlugin)) {
+    // 有本地数据
+    try {
+      const pluginLists = JSON.parse(allPlugin);
+      // pluginLists 肯能没有find方法,交给catch处理
+      const pluginTarget = pluginLists.find(item => item.id === props.pluginId);
+      pluginInfo.value = pluginTarget || null;
+    } catch (error) {
+      console.error('error: ', error);
+      pluginInfo.value = null;
+    }
+  } else {
+    // 没有本地数据 API 查询
+    const params = { businessPluginId: props.businessPluginId };
+    uni.$catchReq.getOtherPlugin(params, (err, res) => {
+      if (err) {
+        console.error('err: ', err);
+        pluginInfo.value = null;
+      } else {
+        pluginInfo.value = res || null;
+      }
+    });
+  }
+}
 </script>
 
 <script module="project" lang="renderjs">
+// TODO: 未处理配置 多次使用插件的复用
 export default {
-  data() {
-    return {
-      pluginContent: null,
-      pluginJs: null,
-      show: false,
-      pluginLists: [],
-      flag: false,
-      pluginInfo: {}
-    };
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.getPlugin();
-    });
-  },
-
   methods: {
-    // 获取插件信息
-    async getPlugin() {
-      if (this.allPlugin) {
-        this.pluginLists = JSON.parse(this.allPlugin);
-    
-        this.pluginLists.forEach(item => {
-          if (this.pluginId === item.id) {
-            this.flag = true;
-            this.pluginInfo = item;
-            this.show = true;
-          }
-        });
-      } else {
-        console.log(this.pluginLists);
+    /**
+     * 渲染dom
+     * @param {object|null} res 插件详情 监听的pluginInfo
+     * @param {*} b
+     * @param {object} instance 实例对象
+     */
+    renderDom(res, b, instance) {
+      console.log('res,b,instance: ', res,b,instance);
+      if (!res) return;
+      if (res.html) {
+        const content = window.document.getElementById(`render-${this.pluginTaskId}`);
+        content.innerHTML = res.html;
       }
 
-      if (this.flag) {
-        this.$nextTick(() => {
-          this.init(this.pluginInfo);
-        });
-      } else {
-        const params = { businessPluginId: this.businessPluginId };
-        this.$catchReq.getOtherPlugin(params, (err, res) => {
-          if (err) {
-            console.error('err: ', err);
-          } else {
-            if (!res) return;
-            if (res.html && res.js) {
-              this.show = true;
-              this.$nextTick(() => {
-                this.init(res);
-              });
-            }
-          }
-        });
+      if (res.js) {
+        const script = window.document.createElement('script');
+        script.innerHTML = res.js;
+        window.document.body.appendChild(script);
       }
     },
-
-    init(res) {
-      const content = document.getElementById(`project-${this.task.id}`);
-      content.innerHTML = res.html;
-
-      const script = document.createElement('script');
-      script.innerHTML = res.js;
-      document.body.appendChild(script);
-    },
   },
 };
 </script>