feat: 插件商城接口

.env.development

@@ -1 +1,2 @@
 VITE_API_URL=https://test.tall.wiki
+VITE_API_URL_NEW=http://101.201.226.163

.env.production

@@ -1 +1,2 @@
 VITE_API_URL=http://www.tall.wiki
+VITE_API_URL_NEW=http://101.201.226.163

.env.test

@@ -1 +1,2 @@
 VITE_API_URL=https://test.tall.wiki
+VITE_API_URL_NEW=http://101.201.226.163

src/App.vue

@@ -20,6 +20,20 @@ if (userString) {
 } else {
   router.push({ name: 'signin' });
 }
+
+// 获取系统设备信息
+// function getSystemInfo() {
+//   uni.getSystemInfo({
+//     success: result => {
+//       this.$store.commit('setSystemInfo', result);
+//     },
+//     fail: error => {
+//       console.error('getSystemInfo fail:', error);
+//     },
+//   });
+// }
+
+// getSystemInfo()
 </script>
 
 <style>

src/apis/business.js

@@ -0,0 +1,21 @@
+// noinspection SpellCheckingInspection
+
+import http from 'utils/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL_NEW;
+const business = `${apiUrl}/gateway/opt/business`;
+
+// 查询插件列表
+export const queryBusiness = params => http.post(`${business}/query`, params);
+
+// 查询业务下关联的插件
+export const queryPluginByBusiness = params => http.post(`${business}/queryPlugin`, params);
+
+// 关联业务和插件
+export const relevance = params => http.post(`${business}/relevance`, params);
+
+// 添加业务信息
+export const saveBusiness = params => http.post(`${business}/save`, params);
+
+// 修改业务下的插件配置信息
+export const updateConfig = params => http.post(`${business}/updateConfig`, params);

src/apis/index.js

@@ -2,7 +2,7 @@
 
 import http from 'utils/axios';
 
-const apiUrl = import.meta.env.VITE_API_URL;
+const apiUrl = import.meta.env.VITE_API_URL_NEW;
 const users = `${apiUrl}/gateway/tall3/v3.0/users`;
 
 // 根据userId 获取token

src/apis/plugin.js

@@ -0,0 +1,15 @@
+// noinspection SpellCheckingInspection
+
+import http from 'utils/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL_NEW;
+const plugin = `${apiUrl}/gateway/opt/plugin`;
+
+// 查询插件列表
+export const queryPlugins = params => http.post(`${plugin}/query`, params);
+
+// 创建插件
+export const savePlugin = params => http.post(`${plugin}/save`, params);
+
+// 修改插件信息
+export const updatePlugin = params => http.post(`${plugin}/update`, params);

src/components/listPlugin.vue

@@ -8,14 +8,16 @@
       <div class="mt-4 desc text-sm">
         <span> 描述：</span> <span>{{ list.intro }}</span>
       </div>
-      <div class="mt-5 text-sm">
+      <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">
-        <span>行业:</span> <span>{{ list.industryName }}</span> <span class="ml-8">分类:</span> <span>{{ list.sortName }}</span>
+      <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>
+        <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>
@@ -34,7 +36,7 @@
         :page-size="pageSize"
         layout="prev, pager, next, sizes, jumper"
         :total="total"
-        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-sizes="[10, 15, 20, 30, 40, 50]"
       >
       </el-pagination>
     </el-config-provider>

src/components/searchBar.vue

@@ -9,6 +9,7 @@
     <div class="flex flex-row">
       <el-input v-model="data.keywords" placeholder="请输入插件名或标签名搜索" class="search-input" />
       <el-button type="primary" size="small" class="w-60px h-40px">搜索</el-button>
+      <el-button type="primary" icon="el-icon-plus" size="small" class="h-40px" @click="openPage">创建插件</el-button>
     </div>
   </div>
   <!-- 所属行业 -->
@@ -42,6 +43,11 @@
 
 <script lang="ts" setup="true">
 import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const router = useRouter();
+const store = useStore();
 
 const data = reactive({
   tags: ['交付物', '财务条', '签到打卡', '即时奖惩'],
@@ -89,6 +95,11 @@ function changeIndustryCheck(index) {
 function changeSortCheck(index) {
   data.sortList[index].checked = !data.sortList[index].checked;
 }
+
+function openPage() {
+  router.push({ name: 'desk-add-plugin' });
+  store.commit('plugin/setLeftIndex', 2);
+}
 </script>
 
 <style scoped>

src/store/index.js

@@ -4,12 +4,24 @@ import plugin from './plugin';
 
 export default createStore({
   modules: { user, plugin },
-  state: { menu: { show: true, collapse: false } },
+  state: {
+    menu: { show: true, collapse: false },
+    systemInfo: null, // 系统设备信息
+  },
   getters: {},
   mutations: {
     toggleCollapse(state) {
       state.menu.collapse = !state.menu.collapse;
     },
+
+    /**
+     * 设置系统信息的数据
+     * @param {object} state
+     * @param {object | null} data 获取到的数据
+     */
+    setSystemInfo(state, data) {
+      state.systemInfo = data;
+    },
   },
   actions: {},
 });

src/utils/axios.js

@@ -14,8 +14,11 @@ instance.interceptors.request.use(
   config => {
     const token = store.getters['user/token'] || sessionStorage.getItem('token');
     if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
+      // config.headers.Authorization = `Bearer ${token}`;
     }
+    // config.headers.deviceId = store.state.systemInfo.deviceId;
+    config.headers.deviceId = '1';
+    config.headers.appType = 0;
     return config;
   },
   error => {

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

@@ -70,7 +70,15 @@ const rules = {
 };
 
 const onSubmit = () => {
-  formRef.value.validate(true);
+  formRef.value.validate(valid => {
+    console.log('valid: ', valid);
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!!');
+      return false;
+    }
+  });
 };
 const resetForm = () => {
   formRef.value.resetFields();

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

@@ -33,6 +33,7 @@
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
       </el-form-item>
+      预览 预览预览预览预览
       <el-form-item label="HTML：" prop="html">
         <el-input v-model="form.html" type="textarea" placeholder="请输入HTML代码片段"></el-input>
       </el-form-item>
@@ -94,8 +95,8 @@ import { ElMessage } from 'element-plus';
 
 const formRef = ref(null);
 const form = reactive({
-  name: '',
-  versions: '',
+  name: '测试01',
+  versions: 'V1.0.0',
   intro: '',
   region: '',
   sort: '',
@@ -121,12 +122,6 @@ const rules = {
   carousel: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
 };
 
-const onSubmit = () => {
-  formRef.value.validate(true);
-};
-const resetForm = () => {
-  formRef.value.resetFields();
-};
 const options = [
   {
     value: 'HTML',
@@ -142,12 +137,26 @@ const options = [
   },
 ];
 
+function onSubmit() {
+  formRef.value.validate(valid => {
+    console.log('valid: ', valid);
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!!');
+      return false;
+    }
+  });
+}
+function resetForm() {
+  formRef.value.resetFields();
+}
+
 function handleAvatarSuccess(res, file) {
   form.preview = URL.createObjectURL(file.raw);
 }
 
 function beforeAvatarUpload(file) {
-  console.log('file: ', file);
   const isJPG = file.type === 'image/jpeg';
   const isLt2M = file.size / 1024 / 1024 < 2;
 
@@ -165,6 +174,7 @@ function handleRemove(file, fileList) {
 }
 
 function handlePictureCardPreview(file) {
+  console.log('file: ', file);
   form.carousel = file.url;
   form.dialogVisible = true;
 }

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

@@ -12,58 +12,54 @@
 
 <script lang="ts" setup="true">
 import { reactive } from 'vue';
+import { queryPlugins } from '@/apis/plugin';
 
 const data = reactive({
-  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: '医疗',
-    },
-    {
-      id: '2',
-      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,
 });
 
 function handleSizeChange(val) {
-  console.log(val);
   data.pageSize = val;
+  handleQueryPlugins();
 }
 
 function handleCurrentChange(val) {
-  console.log(val);
   data.currentPage = val;
+  handleQueryPlugins();
 }
+
+/**
+ * 查询插件列表
+ * @param {number} depth 查询深度 0则只查名称，1则查询全部
+ * @param {number} name 插件名称，为空则不实用该条件
+ * @param {number} pageNum 第几页
+ * @param {number} pageSize 每页几条信息
+ */
+async function handleQueryPlugins() {
+  try {
+    const { currentPage, pageSize } = data;
+    const params = {
+      param: {
+        depth: 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 scoped></style>