jwyu 10 месяцев назад
Родитель
Сommit
23329d6ab2

+ 1 - 1
src/views/etaChart/components/ChartWrap.vue

@@ -54,7 +54,7 @@ const columns = [
   },
   {
     colKey: 'SourceName',
-    title: '据来源',
+    title: '据来源',
     width: '150',
     align: 'center'
   }

+ 83 - 59
src/views/etaChart/components/ClassifyWrap.vue

@@ -1,32 +1,32 @@
 <script setup>
-import { reactive, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { SearchIcon, Icon } from 'tdesign-icons-vue-next';
 import { apiETAChart } from '@/api/etaChart'
-import {apiSystemCommon} from '@/api/system'
+import { apiSystemCommon } from '@/api/system'
 import { ElTree } from 'element-plus'
 import 'element-plus/es/components/tree/style/css'
-import {useClassify} from '../hooks/useClassify'
+import { useClassify } from '../hooks/useClassify'
 import MoveClassify from './MoveClassify.vue'
 
-const emits = defineEmits(['change','filter'])
+const emits = defineEmits(['change', 'filter'])
 
-const userProps={
-  label:'RealName',
-  value:'AdminId',
-  children:'ChildrenList'
+const userProps = {
+  label: 'RealName',
+  value: 'AdminId',
+  children: 'ChildrenList'
 }
 const userOpts = ref([])
-const {userVal}=useClassify()
-async function getCompanyUserData(){
-  const res=await apiSystemCommon.companyUserList()
-  if(res.Ret===200){
-    userOpts.value=res.Data.List||[]
+const { userVal } = useClassify()
+async function getCompanyUserData() {
+  const res = await apiSystemCommon.companyUserList()
+  if (res.Ret === 200) {
+    userOpts.value = res.Data.List || []
   }
 }
 getCompanyUserData()
 watch(
-  ()=>userVal.value,
-  (n)=>{
+  () => userVal.value,
+  (n) => {
     emits('filter')
     getClassify()
   }
@@ -37,44 +37,44 @@ watch(
 //   getClassify()
 // }
 
-const searchSelectKeys={
-  value:'ChartInfoId',
-  label:'ChartName'
+const searchSelectKeys = {
+  value: 'ChartInfoId',
+  label: 'ChartName'
 }
 const searchVal = ref('')
-const searchOpts=ref([])
-const searchLoading=ref(false)
-let searchPage=1
-const searchPageSize=20
-let finished=false
-function handleSearchChart(keyword){
-  finished=false
-  searchPage=1
-  searchOpts.value=[]
+const searchOpts = ref([])
+const searchLoading = ref(false)
+let searchPage = 1
+const searchPageSize = 20
+let finished = false
+function handleSearchChart(keyword) {
+  finished = false
+  searchPage = 1
+  searchOpts.value = []
   handleGetSearchChartList(keyword)
 }
-async function handleGetSearchChartList(keyword){
-  searchLoading.value=true
-  const res=await apiETAChart.chartSearch({
-    PageSize:searchPageSize,
-    CurrentIndex:searchPage,
-    SysUserIds:'',
-    Keyword:keyword
+async function handleGetSearchChartList(keyword) {
+  searchLoading.value = true
+  const res = await apiETAChart.chartSearch({
+    PageSize: searchPageSize,
+    CurrentIndex: searchPage,
+    SysUserIds: userVal.value?.join(','),
+    Keyword: keyword
   })
-  searchLoading.value=false
-  if(res.Ret===200){
-    const arr=res.Data.List||[]
-    searchOpts.value=[...searchOpts.value,...arr]
-    finished=res.Data.Paging.IsEnd
+  searchLoading.value = false
+  if (res.Ret === 200) {
+    const arr = res.Data.List || []
+    searchOpts.value = [...searchOpts.value, ...arr]
+    finished = res.Data.Paging.IsEnd
   }
 }
-async function handleLoadMoreChart(){
-  if(finished||searchLoading.value) return
+async function handleLoadMoreChart() {
+  if (finished || searchLoading.value) return
   handleGetSearchChartList()
 }
-function handleSelectChart(value,context){
-  if(value){
-    emits('change',context.option)
+function handleSelectChart(value, context) {
+  if (value) {
+    emits('change', context.option)
   }
 }
 
@@ -86,12 +86,12 @@ const classifyTreeKeys = {
   children: 'Children',
   isLeaf: 'isLeaf'
 }
-const {classifyActived}=useClassify()//当前选中的分类
+const { classifyActived } = useClassify()//当前选中的分类
 const classifyList = ref([])
 async function getClassify() {
   const res = await apiETAChart.classifyList({
     ParentId: -1,
-    SysUserIds:userVal.value?.join(',')
+    SysUserIds: userVal.value?.join(',')
   })
   if (res.Ret === 200) {
     const arr = res.Data.AllNodes || []
@@ -112,7 +112,7 @@ async function classifyLoad(node, resolve) {
     let nodes = []
     const res = await apiETAChart.classifyList({
       ParentId: node.data.ChartClassifyId,
-      SysUserIds:userVal.value?.join(',')
+      SysUserIds: userVal.value?.join(',')
     })
     if (res.Ret === 200) {
       const arr = res.Data.AllNodes || []
@@ -129,9 +129,9 @@ async function classifyLoad(node, resolve) {
 }
 function handleClassifyActiveChange(data, node) {
   classifyActived.value = data.ChartClassifyId
-  if(data.ChartInfoId){//选择的是图表
-    emits('change',data)
-  }else{
+  if (data.ChartInfoId) {//选择的是图表
+    emits('change', data)
+  } else {
     emits('filter')
   }
 }
@@ -217,6 +217,27 @@ function handleClassifyOpt(node, data, type) {
 }
 
 
+const defaultShowNodes = ref([])//当前展开的数据
+function handleNodeExpand(data) {
+  // 保存当前展开的节点
+  let flag = defaultShowNodes.value.some((item) => item === data.ChartClassifyId);
+  if (!flag) { // 不存在则存到数组里
+    defaultShowNodes.value.push(data.ChartClassifyId)
+  }
+}
+function handleNodeCollapse(data) {
+  defaultShowNodes.value.some((item, index) => {
+    if (item === data.ChartClassifyId) {
+      // 删除关闭节点
+      defaultShowNodes.value.length = index
+    }
+  })
+}
+// 有筛选条件时不允许拖动排序
+const canDragSort = computed(() => {
+  if (userVal.value.length>0) return false
+  return true
+})
 function allowDrag({ data }) {
   if (data.ChartClassifyId === 0) return false //未分类不允许拖动
   return true
@@ -307,7 +328,7 @@ function handleDropOver(b, a, i, e) {
   })
 }
 
-const showBatchMove=ref(false)
+const showBatchMove = ref(false)
 
 </script>
 
@@ -322,10 +343,11 @@ const showBatchMove=ref(false)
         :minCollapsedNum="1"
         clearable
         filterable
-        :showAllLevels='false'
+        :showAllLevels="false"
         placeholder="创建人"
       />
     </div>
+    <!-- 组件bug 如果加了loading 加载下一页后会重新回到顶部 :loading="searchLoading" -->
     <t-select
       v-model="searchVal"
       placeholder="请输入图表名称"
@@ -333,7 +355,6 @@ const showBatchMove=ref(false)
       filterable
       :keys="searchSelectKeys"
       :options="searchOpts"
-      :loading="searchLoading"
       @search="handleSearchChart"
       @change="handleSelectChart"
       :popup-props="{ 'on-scroll-to-bottom': handleLoadMoreChart }"
@@ -347,7 +368,10 @@ const showBatchMove=ref(false)
         :data="classifyList"
         :props="classifyTreeKeys"
         :current-node-key="classifyActived"
-        draggable
+        :default-expanded-keys="defaultShowNodes"
+        @node-expand="handleNodeExpand"
+        @node-collapse="handleNodeCollapse"
+        :draggable="canDragSort"
         check-on-click-node
         node-key="ChartClassifyId"
         check-strictly
@@ -365,10 +389,10 @@ const showBatchMove=ref(false)
           <div class="classify-item-box">
             <div class="label">{{ node.label }}</div>
             <div class="opt-box" v-show="showClassifyOpt(node, data)">
-              <span>
+              <span v-if="canDragSort">
                 <t-icon name="drag-move" />
               </span>
-              <span @click.stop="handleClassifyOpt(node, data, 'add')">
+              <span v-if="node.level<6" @click.stop="handleClassifyOpt(node, data, 'add')">
                 <t-icon name="add" />
               </span>
               <span @click.stop="handleClassifyOpt(node, data, 'edit')">
@@ -438,7 +462,7 @@ const showBatchMove=ref(false)
   <!-- 编辑分类 -->
   <t-dialog
     v-model:visible="showEditClassify"
-    header="新增分类"
+    :header="classifyEditState.id != 0 ? '编辑分类' : '新增分类'"
     draggable
     :confirm-on-enter="true"
     :on-confirm="handleConfirmClassify"
@@ -472,13 +496,13 @@ const showBatchMove=ref(false)
   </t-dialog>
 
   <!-- 批量移动图表 -->
-  <MoveClassify v-model:show="showBatchMove" @success="getClassify"/>
+  <MoveClassify v-model:show="showBatchMove" @success="getClassify" />
 </template>
 
 <style lang="scss">
 .classify-wrap {
   .classify-list-box {
-    .el-tree-node__content{
+    .el-tree-node__content {
       overflow: hidden;
       width: 100%;
     }