From 05a19463ddc3998603887e6c845870b0b20ed058 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Thu, 20 Jan 2022 18:59:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/business.js                     |   3 +
 src/apis/plugin.js                       |   3 -
 src/components/listPlugin.vue            | 147 +++++++++++++++++-----
 src/components/listTable.vue             |  77 ++++++------
 src/components/plugin.vue                |  59 +++++++++
 src/components/relevance.vue             |  70 +++++++++++
 src/utils/time.js                        |  18 +++
 src/views/index-list/add-plugin.vue      |  33 ++---
 src/views/index-list/business-detail.vue | 148 +++++++++++++++--------
 src/views/index-list/business-list.vue   |   3 +-
 src/views/index-list/plugin-shop.vue     |   3 +-
 11 files changed, 422 insertions(+), 142 deletions(-)
 create mode 100644 src/components/plugin.vue
 create mode 100644 src/components/relevance.vue
 create mode 100644 src/utils/time.js

diff --git a/src/apis/business.js b/src/apis/business.js
index ad915e9..269600f 100644
--- a/src/apis/business.js
+++ b/src/apis/business.js
@@ -19,3 +19,6 @@ export const saveBusiness = params => http.post(`${business}/save`, params);
 
 // 修改业务下的插件配置信息
 export const updateConfig = params => http.post(`${business}/updateConfig`, params);
+
+// 通过id查询业务信息
+export const queryIdBusiness = params => http.post(`${business}/queryIdBusiness`, params);
diff --git a/src/apis/plugin.js b/src/apis/plugin.js
index 43e0c61..645f22f 100644
--- a/src/apis/plugin.js
+++ b/src/apis/plugin.js
@@ -13,6 +13,3 @@ export const savePlugin = params => http.post(`${plugin}/save`, params);
 
 // 修改插件信息
 export const updatePlugin = params => http.post(`${plugin}/update`, params);
-
-// 上传交付物文件(多文件)
-export const uploadFiles = params => http.post(`${apiUrl}/filedeal/file/upload/multiple`, params, { contentType: 'multipart/form-data' });
diff --git a/src/components/listPlugin.vue b/src/components/listPlugin.vue
index 82bfa14..df02b2b 100644
--- a/src/components/listPlugin.vue
+++ b/src/components/listPlugin.vue
@@ -1,41 +1,123 @@
 <template>
-  <div class="shop-content flex py-5" v-for="list in lists" :key="list.id">
-    <img :src="list.preview" alt="" class="shop-left" />
-    <div class="shop-right ml-8">
-      <div>
-        <span class="text-xl font-semibold">{{ list.name }}</span> <span class="ml-5 text-sm">{{ list.versions }}</span>
-      </div>
-      <div class="mt-4 desc text-sm">
-        <span> 描述：</span> <span>{{ list.intro }}</span>
-      </div>
-      <div class="mt-5 text-sm" v-if="list.tags && list.tags.length">
-        <el-tag v-for="item in list.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag>
-      </div>
-      <div class="mt-5 text-sm flex flex-row">
-        <span>行业:</span> <span>{{ list.industryName || '无' }}</span> <span class="ml-8">分类:</span>
-        <span>{{ list.sortName || '无' }}</span>
-      </div>
-      <div class="mt-4 text-sm">
-        <span>更新日期:</span> <span>{{ list.updateTime || '无' }}</span> <span class="ml-8">作者:</span>
-        <span>{{ list.authorName || '无' }}</span>
-      </div>
-      <div class="mt-6">
-        <el-button type="primary">下载源代码</el-button>
-        <el-button type="primary">下载示例代码</el-button>
-        <el-button type="primary">添加到业务</el-button>
-        <el-button type="primary" v-if="showConfig">配置</el-button>
+  <div v-if="data.listArray && data.listArray.length">
+    <div class="shop-content flex py-5" v-for="list in data.listArray" :key="list.id">
+      <img :src="list.preview" alt="" class="shop-left" />
+      <div class="shop-right ml-8">
+        <div>
+          <span class="text-xl font-semibold">{{ list.name }}</span> <span class="ml-5 text-sm">{{ list.versions }}</span>
+        </div>
+        <div class="mt-4 desc text-sm">
+          <span> 描述：</span> <span>{{ list.intro }}</span>
+        </div>
+        <div class="mt-5 text-sm" v-if="list.tags && list.tags.length">
+          <el-tag v-for="item in list.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag>
+        </div>
+        <div class="mt-5 text-sm flex flex-row">
+          <span>行业:</span> <span>{{ list.industryName || '无' }}</span> <span class="ml-8">分类:</span>
+          <span>{{ list.sortName || '无' }}</span>
+        </div>
+        <div class="mt-4 text-sm">
+          <span>更新日期:</span> <span>{{ list.updateTime || '无' }}</span> <span class="ml-8">作者:</span>
+          <span>{{ list.authorName || '无' }}</span>
+        </div>
+        <div class="mt-6">
+          <el-button type="primary" v-if="showConfig">移除</el-button>
+          <el-button type="primary">下载源代码</el-button>
+          <el-button type="primary">下载示例代码</el-button>
+          <!-- 添加到业务弹框 -->
+          <el-popover placement="right" title="请选择业务" :width="240" trigger="click" v-if="!showConfig">
+            <div class="radio-box">
+              <Relevance
+                :businessLists="data.businessLists"
+                :pluginId="list.id"
+                :isLastPage="data.isLastPage"
+                @changePageNum="changePageNum"
+              />
+            </div>
+            <template #reference>
+              <el-button type="primary" @click="handleQueryBusiness">添加到业务</el-button>
+            </template>
+          </el-popover>
+          <el-button type="primary" v-if="showConfig">配置</el-button>
+          <el-popover :visible="list.visible" placement="right" title="预览" :width="375">
+            <div class="radio-box">
+              <Plugin :plugin="list" v-if="list.visible" />
+            </div>
+            <template #reference>
+              <el-button type="primary" @click="list.visible = !list.visible">预览</el-button>
+            </template>
+          </el-popover>
+        </div>
       </div>
     </div>
   </div>
+  <el-empty v-else description="暂无插件信息"></el-empty>
 </template>
 
 <script lang="ts" setup="true">
-import { defineProps } from 'vue';
+import { defineProps, reactive, watchEffect } from 'vue';
+import { queryBusiness } from '@/apis/business.js';
 
-defineProps({
+const data = reactive({
+  currentPage: 1,
+  businessLists: [],
+  isLastPage: false,
+  listArray: [],
+});
+
+const props = defineProps({
   lists: { default: () => [], type: Array },
   showConfig: { default: false, type: Boolean },
 });
+
+watchEffect(() => {
+  if (props.lists && props.lists.length) {
+    data.listArray = [];
+    props.lists.forEach(item => {
+      item.visible = false;
+      data.listArray.push(item);
+    });
+  }
+});
+
+function changePageNum() {
+  data.currentPage++;
+  handleQueryBusiness();
+}
+
+/**
+ * 查询业务列表
+ * @param {number} depth 查询深度 0则只查名称，1则查询全部
+ * @param {number} name 插件名称，为空则不实用该条件
+ * @param {number} pageNum 第几页
+ * @param {number} pageSize 每页几条信息
+ */
+async function handleQueryBusiness() {
+  try {
+    const { currentPage } = data;
+    if (currentPage === 1) {
+      data.businessLists = [];
+    }
+    const params = {
+      param: {
+        depth: 0,
+        name: '',
+        pageNum: currentPage,
+        pageSize: 10,
+      },
+    };
+    const res = await queryBusiness(params);
+    if (res.list.length) {
+      res.list.forEach(item => {
+        data.businessLists.push(item);
+      });
+    }
+    data.currentPage = res.pageNum - 0;
+    data.isLastPage = res.isLastPage;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
 </script>
 
 <style scoped>
@@ -62,4 +144,15 @@ defineProps({
   width: 288px;
   height: 263px;
 }
+
+.radio-box {
+  width: 100%;
+  /* height: 200px;
+  overflow: auto; */
+}
+
+.radio-box >>> .el-radio {
+  min-width: 100%;
+  margin: 0 !important;
+}
 </style>
diff --git a/src/components/listTable.vue b/src/components/listTable.vue
index ad6dcef..bf090c2 100644
--- a/src/components/listTable.vue
+++ b/src/components/listTable.vue
@@ -1,38 +1,45 @@
 <template>
-  <el-table :data="lists" class="bg-title" style="width: 100%">
-    <el-table-column prop="name" label="业务名称1"> </el-table-column>
-    <el-table-column prop="appId" label="APPID" width="300"> </el-table-column>
-    <el-table-column prop="startUsing" label="状态" key="slot" sortable>
-      <template #default="scope">
-        <div class="flex flex-row items-center" @click="change(scope.row)">
-          <div :class="scope.row.startUsing ? 'point bg-green-500' : 'point bg-red-500'"></div>
-          <span style="margin-left: 10px">{{ scope.row.startUsing ? '启动' : '禁用' }}</span>
-        </div>
+  <div v-if="lists && lists.length">
+    <el-table :data="lists" class="bg-title" style="width: 100%">
+      <el-table-column prop="name" label="业务名称1"> </el-table-column>
+      <el-table-column prop="appId" label="APPID" width="300"> </el-table-column>
+      <el-table-column prop="startUsing" label="状态" key="slot" sortable>
+        <template #default="scope">
+          <div class="flex flex-row items-center" @click="change(scope.row)">
+            <div :class="scope.row.startUsing ? 'point bg-green-500' : 'point bg-red-500'"></div>
+            <span style="margin-left: 10px">{{ scope.row.startUsing ? '启动' : '禁用' }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="公开" sortable key="slot" width="180">
+        <template #default="scope">
+          <div class="flex flex-row items-center" @click="change(scope.row)">
+            <div :class="scope.row.pub ? 'point bg-green-500' : 'point bg-red-500'"></div>
+            <span style="margin-left: 10px">{{ scope.row.pub ? '公开' : '非公开' }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :formatter="changeDate" label="创建日期" sortable></el-table-column>
+      <el-table-column label="操作" key="slot">
+        <template #default="scope">
+          <el-button type="text" size="small">删除</el-button>
+          <el-button type="text" size="small">配置</el-button>..
+          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+        </template>
+      </el-table-column>
+      <template slot="empty">
+        <p>没有记录哦~</p>
       </template>
-    </el-table-column>
-    <el-table-column label="公开" sortable key="slot" width="180">
-      <template #default="scope">
-        <div class="flex flex-row items-center" @click="change(scope.row)">
-          <div :class="scope.row.pub ? 'point bg-green-500' : 'point bg-red-500'"></div>
-          <span style="margin-left: 10px">{{ scope.row.pub ? '公开' : '非公开' }}</span>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="createTime" :formatter="dateFormat" label="创建日期" sortable></el-table-column>
-    <el-table-column label="操作" key="slot">
-      <template #default="scope">
-        <el-button type="text" size="small">删除</el-button>
-        <el-button type="text" size="small">配置</el-button>..
-        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+    </el-table>
+  </div>
+  <el-empty v-else description="暂无业务信息"></el-empty>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { defineProps } from 'vue';
 import { useStore } from 'vuex';
+import time from 'utils/time';
 
 const router = useRouter();
 const store = useStore();
@@ -49,25 +56,13 @@ function change(row) {
 }
 
 function handleClick(row) {
-  console.log(row);
   router.push({ name: 'business-detail', query: { id: row.id } });
   store.commit('plugin/setBusinessInfo', row);
 }
 
-function dateFormat(row) {
+function changeDate(row) {
   const value = row.createTime;
-  if (value) {
-    const date = new Date(Number(value)); // 时间戳为秒：13位数
-    // let date = new Date(value * 1000)	// 时间戳为毫秒：10位数
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
-    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
-    const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
-    const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
-    const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
-    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
-  }
-  return '';
+  return time.dateFormat(value);
 }
 </script>
 
diff --git a/src/components/plugin.vue b/src/components/plugin.vue
new file mode 100644
index 0000000..d8a091d
--- /dev/null
+++ b/src/components/plugin.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="u-font-14" style="height: 100%">
+    <div v-if="data.pluginContent">
+      <div :data-token="token" :data-uid="userId" style="height: 100%" v-html="data.pluginContent"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive, nextTick, defineProps } from 'vue';
+import { useStore } from 'vuex';
+
+const props = defineProps({ plugin: { default: () => {}, type: Object } });
+
+const store = useStore();
+const token = computed(() => store.state.user.token);
+const userId = computed(() => store.state.user.userId);
+const data = reactive({ pluginContent: null });
+
+setPlugin();
+
+// 获取插件信息
+function setPlugin() {
+  if (!props.plugin || !props.plugin.id) return;
+  console.log('props.plugin: ', props.plugin);
+  const reg = /data-root=["|']?(\w+)["|']?/gi;
+  let uuid = '';
+  // FIXME: 没有兼容  只有js, 没有html的情况
+  if (props.plugin.html) {
+    // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
+    if (reg.test(props.plugin.html)) {
+      uuid = RegExp.$1;
+      const str = props.plugin.html.replace(new RegExp(uuid, 'g'), `p${props.plugin.id}`);
+      data.pluginContent = str;
+    } else {
+      data.pluginContent = props.plugin.html;
+    }
+    const str = props.plugin.js.replace(new RegExp(uuid, 'g'), `p${props.plugin.id}`);
+    handleDom(str);
+  }
+}
+
+// 创建script dom
+function handleDom(js) {
+  const domList = Array.from(document.getElementsByTagName('script'));
+  const index = domList.findIndex(item => item.id === `p${props.plugin.id}`);
+  if (index >= 0) {
+    document.body.removeChild(document.getElementById(`p${props.plugin.id}`));
+  }
+  const scriptDom = document.createElement('script');
+  scriptDom.id = `p${props.plugin.id}`;
+  scriptDom.setAttribute('data-type', 'plugin');
+  scriptDom.innerHTML = js;
+  console.log('scriptDom: ', scriptDom);
+  nextTick(() => {
+    document.body.append(scriptDom);
+  });
+}
+</script>
diff --git a/src/components/relevance.vue b/src/components/relevance.vue
new file mode 100644
index 0000000..d4ec1dc
--- /dev/null
+++ b/src/components/relevance.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-scrollbar height="200px" @scroll="scroll">
+    <el-radio @change="chooseBusiness" v-model="data.isCollapse" :label="business.id" v-for="business in businessLists" :key="business.id">
+      {{ business.name }}
+    </el-radio>
+    <div class="loading">{{ isLastPage ? '到底啦~' : '加载中...' }}</div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import { reactive, defineProps, defineEmits } from 'vue';
+import { ElMessage } from 'element-plus';
+import { relevance } from '@/apis/business.js';
+
+const props = defineProps({
+  businessLists: { default: () => [], type: Array },
+  pluginId: { default: '', type: String },
+  businessId: { default: '', type: String },
+  isLastPage: { default: false, type: Boolean },
+});
+
+const emit = defineEmits(['changePageNum', 'query']);
+
+const data = reactive({
+  isCollapse: '',
+  showLoading: false,
+  scrollTop: 0,
+});
+
+function scroll(e) {
+  if (props.isLastPage) return;
+  data.scrollTop = e.scrollTop;
+  if (e.scrollTop === 220) {
+    emit('changePageNum');
+  }
+}
+
+/**
+ * 关联业务和插件
+ * @param {string} businessId 业务id
+ * @param {string} pluginId 插件id
+ */
+async function chooseBusiness(e) {
+  try {
+    data.isCollapse = e;
+    const params = {
+      param: {
+        businessId: props.businessId ? props.businessId : e,
+        pluginId: props.pluginId ? props.pluginId : e,
+      },
+    };
+    await relevance(params);
+    ElMessage.success('关联成功');
+    if (props.businessId) {
+      emit('query', props.businessId);
+    }
+  } catch (error) {
+    ElMessage.error('关联失败');
+    console.error('error: ', error);
+  }
+}
+</script>
+
+<style scoped>
+.loading {
+  width: 100%;
+  text-align: center;
+  color: #aaa;
+}
+</style>
diff --git a/src/utils/time.js b/src/utils/time.js
new file mode 100644
index 0000000..ae8f683
--- /dev/null
+++ b/src/utils/time.js
@@ -0,0 +1,18 @@
+const time = {
+  dateFormat(value) {
+    if (value) {
+      const date = new Date(Number(value)); // 时间戳为秒：13位数
+      // let date = new Date(value * 1000)	// 时间戳为毫秒：10位数
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+      const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+      const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
+      const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
+      const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    }
+    return '';
+  },
+};
+
+export default time;
diff --git a/src/views/index-list/add-plugin.vue b/src/views/index-list/add-plugin.vue
index eb320cf..8d5fffd 100644
--- a/src/views/index-list/add-plugin.vue
+++ b/src/views/index-list/add-plugin.vue
@@ -71,11 +71,12 @@
           list-type="picture-card"
           :on-success="handleBannerSuccess"
           :on-remove="handleRemove"
+          ref="bannerUpload"
         >
           <i class="el-icon-plus"></i>
         </el-upload>
         <el-dialog :visible.sync="form.dialogVisible">
-          <img width="100%" :src="banner" alt="" />
+          <img width="100%" :src="form.banner" alt="" v-if="form.dialogVisible" />
         </el-dialog>
       </el-form-item>
       <el-form-item label="README：" prop="description">
@@ -98,10 +99,10 @@ import { savePlugin } from '@/apis/plugin';
 const apiUrl = import.meta.env.VITE_API_URL_NEW;
 
 const formRef = ref(null);
-const banner = ref('');
+const bannerUpload = ref(null);
 const form = reactive({
-  name: '测试01',
-  versions: 'V1.0.0',
+  name: '',
+  versions: '',
   intro: '',
   region: '',
   sort: '',
@@ -115,14 +116,15 @@ const form = reactive({
   carousel: [],
   dialogVisible: false,
   description: '',
+  banner: '',
 });
 
 const rules = {
   name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }],
   versions: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
-  region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
-  sort: [{ required: true, message: '请选择分类', trigger: 'blur' }],
-  tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
+  // region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
+  // sort: [{ required: true, message: '请选择分类', trigger: 'blur' }],
+  // tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
   preview: [{ required: true, message: '请上传预览图', trigger: 'blur' }],
   carousel: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
 };
@@ -155,10 +157,8 @@ function onSubmit() {
         params.param = form;
         await savePlugin(params);
         ElMessage.success('插件创建成功');
-        // for(let key in form){
-        //     form[key]  = ''
-        // }
-        banner.value = '';
+        resetForm();
+        bannerUpload.value.clearFiles();
       } else {
         ElMessage.error('插件创建失败');
         console.log('error submit!!');
@@ -170,10 +170,6 @@ function onSubmit() {
   }
 }
 
-function resetForm() {
-  formRef.value.resetFields();
-}
-
 /**
  * 上传预览图
  * @param {*} res
@@ -211,7 +207,7 @@ function handleRemove(res) {
 function handleBannerSuccess(res) {
   if (res.data && res.data.length) {
     form.dialogVisible = true;
-    banner.value = res.data[0].visitUrl;
+    form.banner = res.data[0].visitUrl;
     res.data.forEach(item => {
       if (item && item.id) {
         form.carousel.push(item.visitUrl);
@@ -219,6 +215,11 @@ function handleBannerSuccess(res) {
     });
   }
 }
+
+// 重置
+function resetForm() {
+  formRef.value.resetFields();
+}
 </script>
 
 <style scoped>
diff --git a/src/views/index-list/business-detail.vue b/src/views/index-list/business-detail.vue
index 7e4a737..1937df3 100644
--- a/src/views/index-list/business-detail.vue
+++ b/src/views/index-list/business-detail.vue
@@ -3,33 +3,45 @@
 
   <div class="pt-12">
     <h1 class="text-lg font-semibold">业务名称</h1>
-
-    <div class="flex flex-col">
+    <div class="flex flex-col" v-if="data.info && data.info.id">
       <div class="mt-3">
-        APPID: {{ businessInfo.appId }}
-        <i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(businessInfo.appId)"></i>
+        APPID: {{ data.info.appId }}
+        <i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(data.info.appId)"></i>
       </div>
-      <div class="mt-3">APPSecret: {{ businessInfo.secret }}</div>
-      <div class="mt-3">简介: {{ businessInfo.description }}</div>
+      <div class="mt-3">APPSecret: {{ data.info.secret }}</div>
+      <div class="mt-3">简介: {{ data.info.description }}</div>
       <div class="flex flex-row mt-3">
-        <div class="text-sm mr-20" v-if="businessInfo.tags && businessInfo.tags.length">
-          <el-tag v-for="item in businessInfo.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag>
+        <div class="text-sm mr-20" v-if="data.info.tags && data.info.tags.length">
+          <el-tag v-for="item in data.info.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag>
         </div>
-        <div>行业: {{ businessInfo.appId }}</div>
+        <div>行业: {{ data.info.appId }}</div>
       </div>
       <div class="flex flex-row mt-3">
-        <div class="mr-20">创建时间: {{ businessInfo.createTime }}</div>
-        <div>最新更新时间: {{ businessInfo.createTime }}</div>
+        <div class="mr-20">创建时间: {{ time.dateFormat(data.info.createTime) }}</div>
+        <div>最新更新时间: {{ time.dateFormat(data.info.createTime) }}</div>
       </div>
     </div>
 
     <div class="flex flex-col py-12">
       <div class="flex flex-nowrap justify-between">
         <h1 class="text-lg font-semibold">已绑定插件</h1>
-        <el-button type="primary" @click="openPage">添加插件</el-button>
+        <el-popover placement="bottom" title="请选择业务" :width="240" trigger="click">
+          <div class="radio-box">
+            <Relevance
+              :businessLists="data.pluginLists"
+              :businessId="data.info.id"
+              :isLastPage="data.isLastPage"
+              @changePageNum="changePageNum"
+              @query="queryPluginOfBusiness"
+            />
+          </div>
+          <template #reference>
+            <el-button type="primary" @click="handleQueryPlugin">添加插件</el-button>
+          </template>
+        </el-popover>
       </div>
       <listPlugin :lists="data.lists" :showConfig="true" />
-      <pagination
+      <Pagination
         :currentPage="data.currentPage"
         :pageSize="data.pageSize"
         :total="data.total"
@@ -42,16 +54,14 @@
 
 <script setup>
 import useClipboard from 'vue-clipboard3';
-import { reactive, computed } from 'vue';
-import { useStore } from 'vuex';
+import { reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import pagination from '@/components/pagination.vue';
-import { queryPluginByBusiness } from '@/apis/business.js';
+import time from 'utils/time';
+import { queryPluginByBusiness, queryIdBusiness } from '@/apis/business.js';
+import { queryPlugins } from '@/apis/plugin.js';
 
-const store = useStore();
 const router = useRouter();
-const businessInfo = computed(() => store.state.plugin.businessInfo);
 const { toClipboard } = useClipboard();
 
 const data = reactive({
@@ -60,36 +70,16 @@ const data = reactive({
     { title: '我的业务', name: 'desk-business-list' },
     { title: '业务详情', name: 'desk-add-business' },
   ],
-  lists: [
-    {
-      id: '1',
-      name: '插件名称',
-      versions: 'V1.0.0',
-      intro: 'In my dual profession as an educator and health care',
-      updateTime: '2021年12月20日',
-      authorName: '张三',
-      preview: 'https://s4.ax1x.com/2022/01/17/7abX3d.png',
-      mine: true,
-      tags: [
-        { btnType: 'primary', name: '医疗' },
-        { btnType: 'success', name: '打卡' },
-        { btnType: 'warning', name: '签到' },
-      ],
-      industryName: '数字医疗',
-      sortName: '医疗',
-    },
-  ],
+  lists: [],
   currentPage: 1,
   pageSize: 10,
-  total: 55,
+  total: 0,
+  info: {},
+  pluginLists: [],
+  isLastPage: false,
+  pageNum: 1,
 });
 
-// 添加插件
-function openPage() {
-  router.push({ name: 'desk-add-plugin' });
-  store.commit('plugin/setLeftIndex', 2);
-}
-
 function handleSizeChange(val) {
   console.log(val);
   data.pageSize = val;
@@ -100,6 +90,7 @@ function handleCurrentChange(val) {
   data.currentPage = val;
 }
 
+// 复制
 async function copy(Msg) {
   try {
     // 复制
@@ -114,8 +105,26 @@ async function copy(Msg) {
   }
 }
 
+/**
+ * 通过id查询业务信息
+ * @param {string} businessId 业务信息对应的id
+ */
+async function handleQueryIdBusiness(businessId) {
+  try {
+    const params = { param: { businessId } };
+    const res = await queryIdBusiness(params);
+    data.info = res;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
 /**
  * 查询业务下关联的插件
+ * @param {string} businessId 业务信息对应的id
+ * @param {number} name 插件名称，为空则不实用该条件
+ * @param {number} pageNum 第几页
+ * @param {number} pageSize 每页几条信息
  */
 async function queryPluginOfBusiness(businessId) {
   try {
@@ -128,21 +137,58 @@ async function queryPluginOfBusiness(businessId) {
       },
     };
     const res = await queryPluginByBusiness(params);
-    console.log(res);
     data.lists = res.list;
     data.currentPage = res.pageNum - 0;
     data.pageSize = res.pageSize - 0;
     data.total = res.total - 0;
   } catch (error) {
-    console.log('error: ', error);
+    console.error('error: ', error);
   }
 }
 
-const id =
-  router.currentRoute.value && router.currentRoute.value.query && router.currentRoute.value.query.id
-    ? router.currentRoute.value.query.id
-    : '';
+const routeValue = router.currentRoute.value;
+const id = routeValue && routeValue.query && routeValue.query.id ? routeValue.query.id : '';
 queryPluginOfBusiness(id);
+handleQueryIdBusiness(id);
+
+function changePageNum() {
+  data.pageNum++;
+  handleQueryPlugin();
+}
+
+/**
+ * 查询插件列表
+ * @param {number} depth 查询深度 0则只查名称，1则查询全部
+ * @param {number} name 插件名称，为空则不实用该条件
+ * @param {number} pageNum 第几页
+ * @param {number} pageSize 每页几条信息
+ */
+async function handleQueryPlugin() {
+  try {
+    const { pageNum } = data;
+    if (pageNum === 1) {
+      data.pluginLists = [];
+    }
+    const params = {
+      param: {
+        depth: 0,
+        name: '',
+        pageNum,
+        pageSize: 10,
+      },
+    };
+    const res = await queryPlugins(params);
+    if (res.list.length) {
+      res.list.forEach(item => {
+        data.pluginLists.push(item);
+      });
+    }
+    data.pageNum = res.pageNum - 0;
+    data.isLastPage = res.isLastPage;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
 </script>
 
 <style></style>
diff --git a/src/views/index-list/business-list.vue b/src/views/index-list/business-list.vue
index 5843049..db454fe 100644
--- a/src/views/index-list/business-list.vue
+++ b/src/views/index-list/business-list.vue
@@ -5,7 +5,7 @@
       <el-button type="primary" icon="el-icon-plus" @click="openPage">创建业务</el-button>
     </div>
     <listTable :lists="data.lists" />
-    <pagination
+    <Pagination
       :currentPage="data.currentPage"
       :pageSize="data.pageSize"
       :total="data.total"
@@ -20,7 +20,6 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { reactive } from 'vue';
 import { queryBusiness } from '@/apis/business.js';
-import pagination from '@/components/pagination.vue';
 
 const router = useRouter();
 const store = useStore();
diff --git a/src/views/index-list/plugin-shop.vue b/src/views/index-list/plugin-shop.vue
index 4357ecb..c110818 100644
--- a/src/views/index-list/plugin-shop.vue
+++ b/src/views/index-list/plugin-shop.vue
@@ -1,7 +1,7 @@
 <template>
   <searchBar />
   <listPlugin :lists="data.lists" />
-  <pagination
+  <Pagination
     :currentPage="data.currentPage"
     :pageSize="data.pageSize"
     :total="data.total"
@@ -13,7 +13,6 @@
 <script lang="ts" setup="true">
 import { reactive } from 'vue';
 import { queryPlugins } from '@/apis/plugin.js';
-import pagination from '@/components/pagination.vue';
 
 const data = reactive({
   lists: [],