refactor(.env): 修改积木和飞书基地址

.env.production

@@ -10,6 +10,6 @@ VITE_APP_BASE_API = '/api' # 小卤
 VITE_APP_PROMOTION = 'http://promotion.wxl66.cn:8010' # 促销
 
 # 飞书服务回调地址
-VITE_APP_REDIRECT_URL = 'http://111.198.15.68:86/link/'
+VITE_APP_REDIRECT_URL = 'http://1.202.71.66:85/link/'
 # 积木报表服务地址
-VITE_APP_REPORT_URL = 'http://111.198.15.68:86'
\ No newline at end of file
+VITE_APP_REPORT_URL = 'http://1.202.71.66:85'
\ No newline at end of file

src/views/bi/supply/index.vue

@@ -12,41 +12,43 @@
           </el-button>
         </div>
       </template>
-      <div v-for="item in reportList"
-        class="item">
-        <el-icon color="green"
-          size="16">
-          <Document></Document>
-        </el-icon>
-        <el-link :href="baseURL + item.previewUrl"
-          target="_blank">{{ item.name }}</el-link>
-      </div>
-
-      <p>尝试下面</p>
-      <draggable v-model="reportList" group="reports" item-key="id">
-          <template #item="{ element }">
-            <div class="item">
-              <el-icon color="green" size="16">
+      <div v-for="item in groups"
+        class="group_item">
+        <div>
+          <p class="group_name">
+            <el-icon color="blue"
+              size="18">
+              <Folder />
+            </el-icon>
+            <span>
+              {{ item.name }}
+            </span>
+          </p>
+          <div class="link_wrap">
+            <div class="link_item"
+              v-for="obj in item.items">
+              <el-icon color="green"
+                size="16">
                 <Document></Document>
               </el-icon>
-              <el-link :href="baseURL + element.previewUrl" target="_blank">{{ element.name }}</el-link>
+              <el-link :href="baseURL + obj.previewUrl"
+                target="_blank">{{ obj.name }}</el-link>
             </div>
-          </template>
-        </draggable>
-      <div class="group-container">
-        <el-card v-for="group in groups"
-          :key="group.id"
-          class="group">
-          <template #header>
-            <div class="card-header">
-              <span>{{ group.name }}</span>
-            </div>
-          </template>
-          <draggable v-model="group.items"
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-dialog title="编辑常用报表"
+      v-model="visible">
+      <div class="wrap">
+        <div class="left">
+          <draggable v-model="reportList"
             group="reports"
+             ghost-class="dragging-item-left"
             item-key="id">
             <template #item="{ element }">
-              <div class="item">
+              <div class="link_item">
                 <el-icon color="green"
                   size="16">
                   <Document></Document>
@@ -56,20 +58,51 @@
               </div>
             </template>
           </draggable>
-        </el-card>
+        </div>
+        <div class="right">
+          <div class="group-container">
+            <el-card v-for="group in groups"
+              :key="group.id"
+              class="group_card"
+              :style="{ width: '100%' }">
+              <template #header>
+                <div class="card-header">
+                  <span>{{ group.name }}</span>
+                </div>
+              </template>
+              <draggable v-model="group.items"
+                group="reports"
+                ghost-class="dragging-item"
+                item-key="id">
+                <template #item="{ element }">
+                  <div class="item">
+                    <el-icon color="green"
+                      size="16">
+                      <Document></Document>
+                    </el-icon>
+                    <el-link :href="baseURL + element.previewUrl"
+                      target="_blank">{{ element.name }}</el-link>
+                  </div>
+                </template>
+              </draggable>
+            </el-card>
+          </div>
+        </div>
       </div>
-    </el-card>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { getReportListAPI } from '@/api'
 import draggable from 'vuedraggable'
+const visible = ref(false)
 const groups = ref([
-  { id: 1, name: '分组1', items: [] },
-  { id: 2, name: '分组2', items: [] },
-  { id: 3, name: '分组3', items: [] },
-  { id: 4, name: '分组4', items: [] }
+  { id: 1, name: '品控部', items: [] },
+  { id: 2, name: '物流部', items: [] },
+  { id: 3, name: '计划部', items: [] },
+  { id: 4, name: '采购部', items: [] },
+  { id: 5, name: '滁州工厂', items: [] },
 ])
 
 
@@ -77,7 +110,7 @@ const baseURL = ref(import.meta.env.VITE_APP_REPORT_URL + '/report')
 const reportList = ref([])
 const getReportList = async () => {
   const { data } = await getReportListAPI()
-  reportList.value = data
+  reportList.value = data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data)
 }
 getReportList()
 </script>
@@ -91,13 +124,73 @@ getReportList()
     }
   }
 
-  .item {
+  .group_item {
+    .group_name {
+      display: flex;
+
+      align-items: center;
+      gap: 10px;
+      font-size: 16px;
+      font-weight: 800;
+    }
+
+    .link_wrap {
+      display: flex;
+      flex-wrap: wrap;
+
+      .link_item {
+        padding: 0 0 0 20px;
+        width: 25%;
+        /* 超出宽度文字省略号 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+  }
+
+
+  .link_item {
     margin: 10px 0;
     display: flex;
     align-items: center;
     gap: 10px;
   }
 
+  .group_card {
+    margin-top: 20px;
+  }
+
+  .wrap {
+    display: flex;
+    gap: 20px;
+    width: 100%;
+    height: 100%;
+
+    .left {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
 
+    .right {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  /* 添加拖拽时的样式 */
+  .dragging-item-left {
+    background-color: transparent;
+  }
+  .dragging-item {
+    background-color: #409eff;
+    opacity: 0.5;
+    color: white;
+  }
 
 </style>
\ No newline at end of file