From 2ee5dc2ac4cf37d579ae7d46b598e51a92dce39d Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Wed, 19 Jan 2022 18:41:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/business.js                |  2 +-
 src/apis/plugin.js                  |  3 +
 src/views/index-list/add-plugin.vue | 93 +++++++++++++++++++++--------
 3 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/src/apis/business.js b/src/apis/business.js
index 7a99e74..ad915e9 100644
--- a/src/apis/business.js
+++ b/src/apis/business.js
@@ -5,7 +5,7 @@ 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);
 
 // 查询业务下关联的插件
diff --git a/src/apis/plugin.js b/src/apis/plugin.js
index 645f22f..43e0c61 100644
--- a/src/apis/plugin.js
+++ b/src/apis/plugin.js
@@ -13,3 +13,6 @@ 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/views/index-list/add-plugin.vue b/src/views/index-list/add-plugin.vue
index 998af29..eb320cf 100644
--- a/src/views/index-list/add-plugin.vue
+++ b/src/views/index-list/add-plugin.vue
@@ -18,14 +18,14 @@
       </el-form-item>
       <el-form-item label="行业：" prop="region">
         <el-select v-model="form.region" placeholder="请选择">
-          <el-option value="Zone one"></el-option>
-          <el-option value="Zone two"></el-option>
+          <el-option value="教育"></el-option>
+          <el-option value="医疗"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="分类：" prop="sort">
         <el-select v-model="form.sort" multiple placeholder="请选择，可多选">
-          <el-option value="Zone one"></el-option>
-          <el-option value="Zone two"></el-option>
+          <el-option value="康复"></el-option>
+          <el-option value="管理"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="标签：" prop="tags">
@@ -49,7 +49,7 @@
       <el-form-item label="上传预览图：" prop="preview">
         <el-upload
           class="avatar-uploader"
-          action="https://jsonplaceholder.typicode.com/posts/"
+          :action="`${apiUrl}/filedeal/file/upload/single`"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
@@ -66,15 +66,16 @@
         </template>
         <el-upload
           class="upload-dialog"
-          action="https://jsonplaceholder.typicode.com/posts/"
+          name="files"
+          :action="`${apiUrl}/filedeal/file/upload/multiple`"
           list-type="picture-card"
-          :on-preview="handlePictureCardPreview"
+          :on-success="handleBannerSuccess"
           :on-remove="handleRemove"
         >
           <i class="el-icon-plus"></i>
         </el-upload>
         <el-dialog :visible.sync="form.dialogVisible">
-          <img width="100%" :src="form.carousel" alt="" />
+          <img width="100%" :src="banner" alt="" />
         </el-dialog>
       </el-form-item>
       <el-form-item label="README：" prop="description">
@@ -92,8 +93,12 @@
 <script setup>
 import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
+import { savePlugin } from '@/apis/plugin';
+
+const apiUrl = import.meta.env.VITE_API_URL_NEW;
 
 const formRef = ref(null);
+const banner = ref('');
 const form = reactive({
   name: '测试01',
   versions: 'V1.0.0',
@@ -107,7 +112,7 @@ const form = reactive({
   config: '',
   delivery: '',
   preview: '',
-  carousel: '',
+  carousel: [],
   dialogVisible: false,
   description: '',
 });
@@ -137,23 +142,47 @@ const options = [
   },
 ];
 
+/**
+ * 创建插件
+ * @param {object} params
+ */
 function onSubmit() {
-  formRef.value.validate(valid => {
-    console.log('valid: ', valid);
-    if (valid) {
-      console.log('submit!');
-    } else {
-      console.log('error submit!!');
-      return false;
-    }
-  });
+  try {
+    formRef.value.validate(async valid => {
+      if (valid) {
+        console.log('submit!');
+        const params = {};
+        params.param = form;
+        await savePlugin(params);
+        ElMessage.success('插件创建成功');
+        // for(let key in form){
+        //     form[key]  = ''
+        // }
+        banner.value = '';
+      } else {
+        ElMessage.error('插件创建失败');
+        console.log('error submit!!');
+        return false;
+      }
+    });
+  } catch (error) {
+    console.error('error: ', error);
+  }
 }
+
 function resetForm() {
   formRef.value.resetFields();
 }
 
-function handleAvatarSuccess(res, file) {
-  form.preview = URL.createObjectURL(file.raw);
+/**
+ * 上传预览图
+ * @param {*} res
+ * @param {*} file
+ */
+function handleAvatarSuccess(res) {
+  if (res.data && res.data.visitUrl) {
+    form.preview = res.data.visitUrl;
+  }
 }
 
 function beforeAvatarUpload(file) {
@@ -169,14 +198,26 @@ function beforeAvatarUpload(file) {
   return isJPG && isLt2M;
 }
 
-function handleRemove(file, fileList) {
-  console.log(file, fileList);
+// 删除轮播图
+function handleRemove(res) {
+  if (res.response.data && res.response.data.length) {
+    const url = res.response.data[0].visitUrl;
+    const index = form.carousel.findIndex(item => item === url);
+    form.carousel.splice(index, 1);
+  }
 }
 
-function handlePictureCardPreview(file) {
-  console.log('file: ', file);
-  form.carousel = file.url;
-  form.dialogVisible = true;
+// 上传轮播图
+function handleBannerSuccess(res) {
+  if (res.data && res.data.length) {
+    form.dialogVisible = true;
+    banner.value = res.data[0].visitUrl;
+    res.data.forEach(item => {
+      if (item && item.id) {
+        form.carousel.push(item.visitUrl);
+      }
+    });
+  }
 }
 </script>