Pārlūkot izejas kodu

Merge branch 'ch/need_pool385' of eta_forum/eta_forum_front into master

leichen 2 mēneši atpakaļ
vecāks
revīzija
ae9eb04339

+ 2 - 0
src/main.js

@@ -8,6 +8,7 @@ import './styles/tdesign.scss'
 import 'tdesign-vue-next/es/style/index.css';
 import {formatTime} from '@/utils/common'
 
+import dragDirective from '@/utils/drag'; // 自定义指令
 
 //引入注册脚本
 import 'virtual:svg-icons-register'
@@ -22,4 +23,5 @@ app.config.globalProperties.formatTime=formatTime
 registerGlobalComponents(app)
 
 app.use(router)
+app.directive('drag', dragDirective);
 app.mount('#app')

+ 30 - 0
src/utils/drag.js

@@ -0,0 +1,30 @@
+export default {
+    mounted(el) {
+        el.style.cursor = 'ew-resize'; // 更改光标样式为水平调整大小
+
+        el.onmousedown = function (e) {
+            var init = e.clientX;
+            var box = document.querySelector('#box');
+            let total_wid = box.offsetWidth;
+            var left = document.querySelector('#left');
+            var right = document.querySelector('#right');
+            var initWidth = left.offsetWidth;
+
+            document.onmousemove = function (e) {
+                var end = e.clientX;
+                var newWidth = end - init + initWidth;
+                left.style.width = newWidth + 'px';
+                right.style.width = newWidth > 320 ? total_wid - newWidth + 'px' : total_wid - 320 + 'px';
+            };
+
+            document.onmouseup = function () {
+                document.onmousemove = document.onmouseup = null;
+                e.releaseCapture && e.releaseCapture();
+            };
+
+            e.setCapture && e.setCapture();
+            return false;
+        };
+    }
+
+};

+ 19 - 27
src/views/etaChart/Index.vue

@@ -5,6 +5,7 @@ import ChartWrap from './components/ChartWrap.vue'
 import ChartList from './components/chartList/Index.vue'
 import { apiETAChart } from '@/api/etaChart'
 import {useClassify} from './hooks/useClassify'
+import { ArrowLeftRight2Icon } from 'tdesign-icons-vue-next';
 
 const {classifyActived,userVal} =useClassify()
 
@@ -31,7 +32,7 @@ let finished = false
 const tableData = ref([])
 const tableLoading = ref(false)
 const chartTotal=ref(0)
-const showChartNameWrap=ref(true)
+const showChartNameWrap=ref(false)
 async function getTableData() {
   tableLoading.value = true
   const res = await apiETAChart.chartList({
@@ -80,31 +81,12 @@ function handleSelectChart(item) {
 </script>
 
 <template>
-  <div class="eta-chart-page">
-    <ClassifyWrap @filter="handleFilterList" @change="handleSelectChart" />
-    <div class="center-wrap">
-    <svg-icon name="show_arrow" class="show_chart_name_wrap_btn" v-if="!showChartNameWrap" @click="showChartNameWrap=true"></svg-icon>
-    <!-- <div :class="['flex chart-name-list-wrap',!showChartNameWrap?'chart-name-list-wrap_close':'']" v-loading="tableLoading">
-      <div class="flex top-box">
-        <span>所选图表</span>
-        <t-icon name="chevron-left-double" style="font-size:20px;cursor: pointer;" @click="showChartNameWrap=false"></t-icon>
-      </div>
-      <t-list class="list-content" :onScroll="tableScroll">
-        <li 
-          :class="['text-ellipsis--l1 chart-name',item.ChartInfoId === activeChartId ? 'active_row' : '']" 
-          v-for="item in tableData" 
-          :key="item.ChartInfoId"
-          @click="handleSelectChart(item)"
-        >{{item.ChartClassifyName}}</li>
-        <empty-wrap v-if="tableData.length===0"/>
-      </t-list>
-      <div class="flex bottom-box">
-        <span>共{{chartTotal}}张图表</span>
-        <span class="clear-btn" @click="activeChartId=''">清除选择</span>
-      </div>
-    </div> -->
+  <div class="eta-chart-page" id="box">
+    <ClassifyWrap @filter="handleFilterList" @change="handleSelectChart" id="left" />
+    <div class="center-wrap" v-drag>
+      <span name="show_arrow" v-drag class="show_chart_name_wrap_btn" v-if="!showChartNameWrap" ><ArrowLeftRight2Icon /></span>
     </div>
-    <div class="right-wrap">
+    <div class="right-wrap" id="right">
       <ChartList ref="chartListRef"/>
       <!-- 图表详情 -->
       <ChartWrap :chartInfoId="activeChartId" v-if="activeChartId"/>
@@ -119,16 +101,26 @@ function handleSelectChart(item) {
 
   .center-wrap{
     height: calc(100vh - 120px);
+    width: 4px;
+
     position: relative;
+    left: -24px;
   }
   .show_chart_name_wrap_btn{
     position: absolute;
     top: 50%;
-    left: -36px;
+    left: -6px;
     transform: translateY(-50%);
-    font-size: 48px;
+    font-size: 12px;
     color: #D8D8D8;
     cursor: pointer;
+    padding: 25px 0;
+
+    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px;
+    background-color: rgb(255, 255, 255);
+    z-index: 99;
+    // padding: 20px 0px;
+    border-radius: 5px;
   }
   .chart-name-list-wrap {
     background-color: #fff;

+ 13 - 12
src/views/etaChart/components/ChartWrap.vue

@@ -68,12 +68,14 @@ const columnsDescription = [
   {
     colKey: 'SysUserRealName',
     title: '创建人',
-    align: 'center'
+    align: 'center',
+    width: '120',
   },
   {
     colKey: 'CreateTime',
     title: '创建时间',
-    align: 'center'
+    align: 'center',
+    width: '200',
   },
 ]
 const tableData = ref([])
@@ -217,15 +219,14 @@ function handleGoEdbSource(data) {
         :columns="columnsDescription"
         bordered
         hover
-        max-height="300"
         cell-empty-content="-"
         resizable
       >
-        <template #Description="{ row }">
+        <!-- <template #Description="{ row }">
             <t-tooltip :content="row.Description" theme="light">
               <span class="text_description">{{ row.Description }}</span>
             </t-tooltip>
-        </template>
+        </template> -->
       </t-table>
     </div>
   </div>
@@ -265,13 +266,13 @@ function handleGoEdbSource(data) {
   .instructions-wrap {
     margin-top: 20px;
     line-height: 1.7;
-    .text_description {
-      width: 100%;
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+    // .text_description {
+    //   width: 100%;
+    //   display: inline-block;
+    //   overflow: hidden;
+    //   text-overflow: ellipsis;
+    //   white-space: nowrap;
+    // }
   }
 }
 </style>

+ 3 - 3
src/views/user/favorite/etaChart.vue

@@ -6,7 +6,7 @@ import ChartDetailPop from '@/views/etaChart/components/ChartDetailPop.vue'
 import { MessagePlugin } from 'tdesign-vue-next'
 
 const classifyId=ref(0)
-const SysUserIds=ref([])
+// const SysUserIds=ref([])
 const keyword=ref('')
 const chartList=ref([])
 const page=ref(1)
@@ -16,7 +16,7 @@ const finished=ref(false)
 async function getChartList(){
   const res=await apiETAChartUser.chartCollectList({
     CollectClassifyIds:classifyId.value||'',
-    SysUserIds:SysUserIds.value.join(','),
+    // SysUserIds:SysUserIds.value.join(','),
     Keyword:keyword.value,
     PageSize:pageSize.value,
     CurrentIndex:page.value
@@ -78,7 +78,7 @@ async function handleCancelCollect(item,index){
     </div>
     <div class="flex right-wrap">
       <div class="flex top-filter">
-        <select-chart-creator v-model="SysUserIds" @change="refreshList" style="width:300px" size="large" />
+        <!-- <select-chart-creator v-model="SysUserIds" @change="refreshList" style="width:300px" size="large" /> -->
         <t-input 
           v-model="keyword" 
           placeholder="请输入图表名称"