From 805f2233e0940299cd1fcbcced812a01c5334bf2 Mon Sep 17 00:00:00 2001
From: "weixiaobo@boe.com.cn" <weixiaobo@boe.com.cn>
Date: Mon, 31 Jul 2023 18:51:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=85=A5=E5=AD=A6=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/audience/audienceManage.vue | 383 +++++++++++++++++++++++++-
 1 file changed, 378 insertions(+), 5 deletions(-)

diff --git a/src/views/audience/audienceManage.vue b/src/views/audience/audienceManage.vue
index 7b2ffbdd..0ad3b7a3 100644
--- a/src/views/audience/audienceManage.vue
+++ b/src/views/audience/audienceManage.vue
@@ -327,7 +327,7 @@
                 <div class="search"></div>
                 <div class="btnText">添加</div>
               </div>
-              <div style="margin-right:10px" class="btn btn3" @click="handleExportAudienceMemberClick">
+              <div style="margin-right:10px" class="btn btn3" @click="handleImportAudienceMemberClick">
                 <!-- <div class="search"></div> -->
                 <div class="btnText">导入</div>
               </div>
@@ -495,6 +495,95 @@
       </div>
     </a-drawer>
     <!-- </a-modal> -->
+    <!-- <import-stu v-model:Importvisible="visibleImportAudience" /> -->
+    <a-drawer
+      :visible="visibleImportAudience"
+      class="drawerStyle impotergroupleader"
+      placement="right"
+      width="800px"
+    >
+      <div class="drawerMain">
+        <div class="header">
+          <div class="headerTitle">{{ "导入学员" }}</div>
+          <img
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeImportDrawer"
+          />
+        </div>
+        <div class="main">
+          <div class="minatitl" v-if="templateUrl">
+            <div class="up1">请下载</div>
+            <a class="up2" :href="templateUrl" target="_blank" style="cursor: pointer">模板</a>
+            <div class="up1">，按要求填写数据并导入</div>
+          </div>
+          <div class="upload">
+            <div class="text">上传：</div>
+            <div class="right">
+              <div style="height: 176px; margin-bottom: 20px">
+                <a-upload-dragger
+                  :data="{ audienceId:audienceId }"
+                  :multiple="true"
+                  name="memberExcel"
+                  :accept="accept"
+                  :action="uploadUrl"
+                  @change="handleChange"
+                  v-model:file-list="fileList"
+                >
+                  <p class="ant-upload-drag-icon">
+                    <inbox-outlined></inbox-outlined>
+                  </p>
+                  <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
+                  <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
+                  <template #itemRender="{ file }">
+                    <div class="loadstate">
+                      <div class="loadborder">
+                        <div class="content">
+                          <div class="img"></div>
+                          <div class="timebox">
+                            <div class="timetop">
+                              <div class="tit">{{ file.name }}</div>
+                              <div class="stateloading">{{
+                                  {
+                                    done: "上传成功",
+                                    uploading: "正在上传",
+                                    error: "上传失败",
+                                    removed: "正在上传",
+                                  }[file.status]
+                                }}
+                              </div>
+                            </div>
+                            <a-progress :percent="file.percent"/>
+                          </div>
+                          <div class="curloading">
+                            <div style="color: #387df7; margin-left: 20px; cursor: pointer"
+                                v-if="file.uploadState?.status === 'FAILED'"
+                                @click="downloadErrorData(file.uploadState?.url)">下载失败数据
+                            </div>
+                          </div>
+                        </div>
+                        <a-spin :spinning="true" v-if="file.uploadState?.status === 'START'"/>
+                        <div :class="file.uploadState?.status === 'SUCCESS'?'succebox':'defeatbox'">
+                          <img style="width: 14px; height: 14px; margin-left: 16px"
+                              :src="file.uploadState?.status === 'SUCCESS' ? success:err"/>
+                          <div class="tacl">
+                            {{ file.uploadState?.successNum || 0 }}条数据导入成功，{{file.uploadState?.failedNum || 0 }}条数据导入失败
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </a-upload-dragger>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btnn">
+          <button class="btn2" @click="closeImportDrawer">取消</button>
+          <button class="btn2" @click="closeImportDrawer">确定</button>
+        </div>
+      </div>
+    </a-drawer>
   </div>
 </template>
 <script setup>
@@ -793,6 +882,10 @@ const visibleAddAudience = ref(false);
 const addAudienceTitle = ref("添加受众");
 const visibleAudienceInfo = ref(false);
 const visibleAudienceMember = ref(false);
+const visibleImportAudience = ref(false);
+const templateUrl = ref(process.env.VUE_APP_BOE_API_URL+"/pc/template/usergroup_template.xlsx");
+const fileList = ref([]);
+const uploadUrl = ref(process.env.VUE_APP_BOE_API_URL + "/importMember");
 const ruleForm = ref({
   audienceName: "",
   description: "",
@@ -1440,9 +1533,13 @@ const onResetUser = () => {
   searchDataUser.value.pageNo = 1;
   getAudienceUserListFun();
 }
-const handleExportAudienceMemberClick = () => {
-  // visibleAddAudience.value = true;
-
+const handleImportAudienceMemberClick = () => {
+  visibleImportAudience.value = true;
+}
+// 关闭导入学员抽屉
+const closeImportDrawer = () => {
+  fileList.value = [];
+  visibleImportAudience.value = false;
 }
 const handleAddAudienceMember = async () => {
   let res = await addAudienceMember({
@@ -2385,12 +2482,13 @@ const closeDrawer = () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      margin-bottom: 20px;
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
         color: #333333;
         line-height: 25px;
-        margin-left: 24px;
+        // margin-left: 24px;
       }
     }
     .contentMain {
@@ -2479,4 +2577,279 @@ const closeDrawer = () => {
     }
   }
 }
+.main {
+
+  .minatitl {
+    display: flex;
+
+    .up1 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .up2 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #4ea6ff;
+      margin-left: 4px;
+    }
+  }
+
+  .upload {
+    margin-top: 32px;
+    display: flex;
+
+    .text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .right {
+      margin-left: 6px;
+      width: 500px;
+
+      .load {
+        width: 500px;
+        height: 176px;
+        background: #f5f9fd;
+        border-radius: 4px;
+        // opacity: 0.3;
+        border: 1px dashed #caddfd;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .cloud {
+          margin-top: 52px;
+          width: 28px;
+          height: 28px;
+          background-image: url(../../assets/images/basicinfo/cloud.png);
+        }
+
+        .tip {
+          font-size: 14px;
+          font-weight: 400;
+          color: #4ea6ff;
+          margin-top: 15px;
+          cursor: pointer;
+        }
+
+        .tipz {
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          margin-top: 10px;
+        }
+      }
+
+      .loadstate {
+        width: 500px;
+        margin-bottom: 50px;
+
+        .loadborder {
+          width: 500px;
+          height: 173px;
+          border-radius: 4px;
+          border: 1px dashed #eaeaea;
+          margin-bottom: 30px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          position: relative;
+
+          .content {
+            display: flex;
+            margin-left: 20px;
+            position: relative;
+
+            .defeat {
+              width: 262px;
+              padding: 10px 20px;
+              position: absolute;
+              left: 46px;
+              top: 42px;
+              font-size: 14px;
+              font-weight: 500;
+              height: 32px;
+              border-radius: 2px;
+              border: 1px solid #387df7;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              cursor: pointer;
+
+              .detext {
+                font-size: 14px;
+                font-weight: 400;
+                color: #387df7;
+              }
+            }
+
+            .img {
+              width: 30px;
+              height: 34px;
+              background-image: url(../../assets/images/basicinfo/exl.png);
+            }
+
+            .timebox {
+              margin-left: 15px;
+              margin-top: -5px;
+
+              .timetop {
+                display: flex;
+                width: 262px;
+                justify-content: space-between;
+                // margin-bottom: 8px;
+                .tit {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #333333;
+                }
+
+                .stateloading {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #4ea6ff;
+                }
+
+                .statedefeat {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ff7474;
+                }
+
+                .statesucce {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #35ae69;
+                }
+              }
+
+              .prog {
+                width: 262px;
+                height: 5px;
+                background: #eaf1fe;
+                border-radius: 4px;
+
+                .inprogloading {
+                  width: 55%;
+                  height: 5px;
+                  border-radius: 4px;
+
+                  background: #4ea6ff;
+                }
+
+                //下载失败条
+                .inprogdefeat {
+                  width: 55%;
+                  height: 5px;
+                  border-radius: 4px;
+
+                  background: #ff7474;
+                }
+
+                //下载成功条
+                .inprogsucce {
+                  width: 100%;
+                  height: 5px;
+                  border-radius: 4px;
+
+                  background: #57c887;
+                }
+              }
+            }
+
+            .curloading {
+              margin-left: 15px;
+              margin-top: 15px;
+              display: flex;
+
+              .cur {
+                font-size: 14px;
+                font-weight: 400;
+                color: #333333;
+              }
+
+              .cancel {
+                font-size: 14px;
+                font-weight: 400;
+                color: #387df7;
+              }
+            }
+          }
+
+          .downloadErr {
+            width: 120px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 2px;
+            border: 1px solid #387df7;
+            font-size: 14px;
+            font-weight: 400;
+            color: #387df7;
+            line-height: 20px;
+            cursor: pointer;
+            margin-left: 66px;
+            margin-top: 16px;
+            position: absolute;
+            bottom: 28px;
+          }
+        }
+
+        .defeatbox {
+          width: 500px;
+          height: 40px;
+          margin-top: 20px;
+          background: rgba(255, 116, 116, 0.1);
+          border: 1px solid #ff7474;
+          display: flex;
+          align-items: center;
+
+          .lefimg {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            background-size: 100%;
+          }
+
+          .tacl {
+            font-size: 14px;
+            font-weight: 400;
+            margin-left: 17px;
+            color: #ff7474;
+          }
+        }
+
+        .succebox {
+          width: 500px;
+          height: 40px;
+          background: rgba(53, 174, 105, 0.1);
+          border: 1px solid #35ae69;
+          display: flex;
+          align-items: center;
+
+          .lefimg {
+            width: 14px;
+            height: 14px;
+            margin-left: 17px;
+            margin-right: 8px;
+            background-size: 100%;
+          }
+
+          .tacl {
+            font-size: 14px;
+            font-weight: 400;
+
+            color: rgba(0, 0, 0, 0.65);
+          }
+        }
+      }
+    }
+  }
+}
 </style>