feat: 我的插件

src/apis/plugin.js

@@ -8,8 +8,14 @@ const plugin = `${apiUrl}/gateway/opt/plugin`;
 // 查询插件列表
 export const queryPlugins = params => http.post(`${plugin}/query`, params);
 
+// 获取一个随机id
+export const randomId = params => http.post(`${plugin}/randomId`, params);
+
 // 创建插件
 export const savePlugin = params => http.post(`${plugin}/save`, params);
 
 // 修改插件信息
 export const updatePlugin = params => http.post(`${plugin}/update`, params);
+
+// 删除插件
+export const delPlugin = params => http.post(`${plugin}/del`, params);

src/components/leftMenu.vue

@@ -21,7 +21,7 @@ const data = reactive({
     { title: '创建业务', name: 'desk-add-business', disabled: false },
     { title: '创建插件', name: 'desk-add-plugin', disabled: false },
     { title: '我的业务', name: 'desk-business-list', disabled: false },
-    { title: '我的插件', name: 'desk-plugin-list', disabled: true },
+    { title: '我的插件', name: 'desk-plugin-list', disabled: false },
   ],
 });
 

src/components/listTable.vue

@@ -1,7 +1,7 @@
 <template>
   <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="name" label="业务名称"> </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">

src/components/plugin.vue

@@ -20,7 +20,6 @@ setPlugin();
 
 // 获取插件信息
 function setPlugin() {
-  console.log('props.plugin: ', props.plugin);
   let id = '';
   if (props.plugin) {
     if (props.plugin.id) {
@@ -30,7 +29,10 @@ function setPlugin() {
       id = props.plugin.pluginId;
     }
   }
-  if (!props.plugin || !id) return;
+  if (!props.plugin || !id) {
+    previewAddPlugin();
+    return;
+  }
   const reg = /data-root=["|']?(\w+)["|']?/gi;
   let uuid = '';
   // FIXME: 没有兼容  只有js, 没有html的情况
@@ -65,4 +67,19 @@ function handleDom(js, id) {
 }
 
 // 没有id
+function previewAddPlugin() {
+  console.log('props.plugin: ', props.plugin);
+  // FIXME: 没有兼容  只有js, 没有html的情况
+  if (props.plugin.html) {
+    // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
+    data.pluginContent = props.plugin.html;
+    const scriptDom = document.createElement('script');
+    scriptDom.setAttribute('data-type', 'plugin');
+    scriptDom.innerHTML = props.plugin.js;
+    console.log('scriptDom: ', scriptDom);
+    nextTick(() => {
+      document.body.append(scriptDom);
+    });
+  }
+}
 </script>

src/components/pluginListTable.vue

@@ -0,0 +1,113 @@
+<template>
+  <div v-if="lists && lists.length">
+    <el-table :data="lists" class="bg-title" style="width: 100%">
+      <el-table-column prop="name" label="插件名称"> </el-table-column>
+      <el-table-column prop="appId" label="APPID"> </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 prop="pub" label="公开" sortable key="slot">
+        <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="changeCreateDate" label="创建日期" sortable></el-table-column>
+      <el-table-column prop="updateTime" :formatter="changeUpdateDate" label="更新日期" sortable></el-table-column>
+      <el-table-column label="操作" key="slot">
+        <template #default="scope">
+          <el-popconfirm
+            title="确定删除这条业务吗?"
+            confirm-button-text="确定"
+            cancel-button-text="再想想"
+            @confirm="deletePlugin(scope.row)"
+          >
+            <template #reference>
+              <el-button type="text" size="small">删除</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button type="text" size="small" disabled>配置</el-button>..
+          <el-button type="text" size="small" disabled>查看</el-button>
+        </template>
+      </el-table-column>
+      <template slot="empty">
+        <p>没有记录哦~</p>
+      </template>
+    </el-table>
+  </div>
+  <el-empty v-else description="暂无业务信息"></el-empty>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import time from 'utils/time';
+import { ElMessage } from 'element-plus';
+import { delPlugin } from '@/apis/plugin.js';
+
+defineProps({
+  lists: { default: () => [], type: Array },
+  currentPage: { default: 1, type: Number },
+  pageSize: { default: 10, type: Number },
+  total: { default: 0, type: Number },
+  showConfig: { default: false, type: Boolean },
+});
+
+const emit = defineEmits(['handleQueryPlugins']);
+
+function change(row) {
+  console.log('row: ', row);
+}
+
+function changeCreateDate(row) {
+  const value = row && row.createTime ? row.createTime : '';
+  return time.dateFormat(value);
+}
+
+function changeUpdateDate(row) {
+  const value = row && row.updateTime ? row.updateTime : '';
+  return time.dateFormat(value);
+}
+
+/**
+ * 删除插件
+ * @param {String} businessId
+ */
+async function deletePlugin(row) {
+  try {
+    const params = { param: { id: row.id } };
+    await delPlugin(params);
+    ElMessage.success('删除成功');
+    emit('handleQueryPlugins');
+  } catch (error) {
+    console.error('error: ', error);
+    ElMessage.error(error || '删除失败');
+  }
+}
+</script>
+
+<style scoped>
+.bg-title >>> thead tr th {
+  color: #333;
+  background: #fafafa;
+  border-top: 1px solid #e8e8e8;
+}
+.bg-title >>> thead tr th:first-child {
+  border-left: 1px solid #e8e8e8;
+}
+.bg-title >>> thead tr th:last-child {
+  border-right: 1px solid #e8e8e8;
+}
+
+.point {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+</style>

src/views/index-list/add-plugin.vue

@@ -2,6 +2,13 @@
   <div class="box">
     <h1 class="text-lg font-semibold">上传插件</h1>
     <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" class="forms">
+      <el-form-item label="插件id：" prop="id">
+        <div v-if="form.id">
+          {{ form.id }}
+          <i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(form.id)"></i>
+        </div>
+        <el-button type="success" plain size="mini" v-else>点击生成插件id</el-button>
+      </el-form-item>
       <el-form-item prop="name">
         <template v-slot:label>
           <el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end">
@@ -86,29 +93,34 @@
         <el-button type="primary" @click="onSubmit()">发布</el-button>
         <el-button @click="resetForm()">重置</el-button>
 
-        <!-- <el-button type="success" @click="visible = !visible">{{ !visible ? '预览' : '关闭预览' }}</el-button>
+        <el-button type="success" @click="visible = !visible">{{ !visible ? '预览' : '关闭预览' }}</el-button>
         <div class="plugin-box" v-if="visible">
           <div class="plugin w-full h-full overflow-y-scroll">
             <Plugin :plugin="form" />
           </div>
-        </div> -->
+        </div>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
+import useClipboard from 'vue-clipboard3';
 import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
-import { savePlugin } from '@/apis/plugin';
+import { randomId, savePlugin } from '@/apis/plugin';
+
+const { toClipboard } = useClipboard();
 
 const apiUrl = import.meta.env.VITE_API_URL_NEW;
 
 const formRef = ref(null);
 const bannerUpload = ref(null);
+const visible = ref(false);
 const form = reactive({
+  id: '',
   name: '',
-  versions: '',
+  versions: 'V1.0.0',
   intro: '',
   region: '',
   sort: '',
@@ -126,6 +138,7 @@ const form = reactive({
 });
 
 const rules = {
+  id: [{ required: true, message: '请先生成插件id', trigger: 'blur' }],
   name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }],
   versions: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
   // region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
@@ -150,6 +163,33 @@ const options = [
   },
 ];
 
+/**
+ * 获取插件id
+ */
+async function handelPluginId() {
+  try {
+    const res = await randomId();
+    form.id = res;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+// handelPluginId()
+
+// 复制
+async function copy(Msg) {
+  try {
+    // 复制
+    await toClipboard(Msg);
+    ElMessage.success('插件id复制成功');
+  } catch (e) {
+    // 复制失败
+    console.error(e);
+    ElMessage.error('插件id复制失败');
+  }
+}
+
 /**
  * 创建插件
  * @param {object} params
@@ -225,6 +265,7 @@ function handleBannerSuccess(res) {
 // 重置
 function resetForm() {
   formRef.value.resetFields();
+  handelPluginId();
 }
 </script>
 

src/views/index-list/business-detail.vue

@@ -96,8 +96,6 @@ async function copy(Msg) {
     // 复制
     await toClipboard(Msg);
     ElMessage.success('复制成功');
-    // 下面可以设置复制成功的提示框等操作
-    // ...
   } catch (e) {
     // 复制失败
     console.error(e);

src/views/index-list/business-list.vue

@@ -24,11 +24,6 @@ import { queryBusiness } from '@/apis/business.js';
 const router = useRouter();
 const store = useStore();
 
-function openPage() {
-  router.push({ name: 'desk-add-business' });
-  store.commit('plugin/setLeftIndex', 1);
-}
-
 const data = reactive({
   lists: [],
   currentPage: 1,
@@ -36,6 +31,11 @@ const data = reactive({
   total: 0,
 });
 
+function openPage() {
+  router.push({ name: 'desk-add-business' });
+  store.commit('plugin/setLeftIndex', 1);
+}
+
 function handleSizeChange(val) {
   data.pageSize = val;
   handleQueryBusiness();

src/views/index-list/plugin-list.vue

@@ -4,21 +4,79 @@
     <div class="py-6">
       <el-button type="primary" icon="el-icon-plus" @click="openPage">创建插件</el-button>
     </div>
-    <listTable />
+    <PluginListTable :lists="data.lists" @handleQueryPlugins="handleQueryPlugins" />
+    <Pagination
+      :currentPage="data.currentPage"
+      :pageSize="data.pageSize"
+      :total="data.total"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
   </div>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
+import { reactive } from 'vue';
+import { queryPlugins } from '@/apis/plugin.js';
 
 const router = useRouter();
 const store = useStore();
 
+const data = reactive({
+  lists: [],
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+
 function openPage() {
   router.push({ name: 'desk-add-plugin' });
   store.commit('plugin/setLeftIndex', 2);
 }
+
+function handleSizeChange(val) {
+  data.pageSize = val;
+  handleQueryPlugins();
+}
+
+function handleCurrentChange(val) {
+  data.currentPage = val;
+  handleQueryPlugins();
+}
+
+/**
+ * 查询插件列表
+ * @param {number} depth 查询深度 0则只查名称，1则查询全部
+ * @param {number} mine 查询全部插件还是自己的插件 0全部 1自己
+ * @param {number} name 插件名称，为空则不实用该条件
+ * @param {number} pageNum 第几页
+ * @param {number} pageSize 每页几条信息
+ */
+async function handleQueryPlugins() {
+  try {
+    const { currentPage, pageSize } = data;
+    const params = {
+      param: {
+        depth: 1,
+        mine: 1,
+        name: '',
+        pageNum: currentPage,
+        pageSize,
+      },
+    };
+    const res = await queryPlugins(params);
+    data.lists = res.list;
+    data.currentPage = res.pageNum - 0;
+    data.pageSize = res.pageSize - 0;
+    data.total = res.total - 0;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+handleQueryPlugins();
 </script>
 
 <style></style>

src/views/index-list/plugin-shop.vue

@@ -34,6 +34,7 @@ function handleCurrentChange(val) {
 /**
  * 查询插件列表
  * @param {number} depth 查询深度 0则只查名称，1则查询全部
+ * @param {number} mine 查询全部插件还是自己的插件 0全部 1自己
  * @param {number} name 插件名称，为空则不实用该条件
  * @param {number} pageNum 第几页
  * @param {number} pageSize 每页几条信息
@@ -44,6 +45,7 @@ async function handleQueryPlugins() {
     const params = {
       param: {
         depth: 1,
+        mine: 0,
         name: '',
         pageNum: currentPage,
         pageSize,