报表管理修改-提交

src/views/vent/reportManager/comment/NormalTable.vue

@@ -35,12 +35,14 @@ import DeviceModal from './DeviceModal.vue';
 import tempUpload from './common/tempUpload.vue'
 import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 import { useListPage } from '/@/hooks/system/useListPage';
-import {getQuery} from '../reportManager.api'
+import { getQuery } from '../reportManager.api'
 
 const props = defineProps({
-  reportType: {
-    type: String,
-    default: ''
+  searchParam: {
+    type: Object,
+    default: () => {
+      return {}
+    }
   },
   //下载文件接口
   downLoad: {
@@ -87,9 +89,15 @@ let reportId = ref('')//历史记录列表传参
 const emit = defineEmits(['saveAdd']);
 const record = reactive({});
 const columnList = getTableHeaderColumns('');
-let visibleUp=ref(false)
-let resetTable=ref(0)
-let optionLists=reactive<any[]>([])
+let visibleUp = ref(false)
+let resetTable = ref(0)
+let optionLists = reactive<any[]>([])
+//列表查询参数
+let searchParams = reactive({
+  busKind: '',
+  modelType: "",
+  reportType: '',
+})
 const [registerModal, { openModal, closeModal }] = useModal();
 // 列表页面公共参数、方法
 const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
@@ -121,7 +129,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useList
       width: 180,
     },
     beforeFetch: (params) => {
-      return Object.assign(params, { column: 'createTime', reportType: props.reportType });
+      return Object.assign(params, { column: 'createTime', ...searchParams });
     },
   },
 });
@@ -130,20 +138,20 @@ const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] =
 
 //报表或模板上传
 function handleUpload() {
-  visibleUp.value=true
+  visibleUp.value = true
 }
-function resetUpload(){
-  resetTable.value=new Date().getTime()
+function resetUpload() {
+  resetTable.value = new Date().getTime()
 }
 
 //获取模板报表列表数据
-async function getQueryList(){
-  let res=await getQuery()
-  console.log(res,'报表模板---------')
-  if(res.length!=0){
-    optionLists.length=0
-    res[0].children.forEach(el=>{
-      optionLists.push({label:el.itemText,value:el.id})
+async function getQueryList() {
+  let res = await getQuery()
+  console.log(res, '报表模板---------')
+  if (res.length != 0) {
+    optionLists.length = 0
+    res[0].children.forEach(el => {
+      optionLists.push({ label: el.itemText, value: el.id })
     })
   }
 }
@@ -231,6 +239,12 @@ function downFilePublic(content, fileName) {
   }
 }
 
+watch(() => props.searchParam, (newS, oldS) => {
+  searchParams.busKind = newS.busKind
+  searchParams.modelType = newS.modelType
+  searchParams.reportType = newS.reportType
+}, { immediate: true, deep: true })
+
 defineExpose({
   doRequest, onExportXls, onImportXls, reload, getForm
 });

src/views/vent/reportManager/comment/common/treeList.vue

@@ -1,19 +1,14 @@
 <template>
   <div class="vtl-node" :id="model.id" :class="{ 'vtl-leaf-node': !isFolder, 'vtl-tree-node': isFolder }">
-    <div
-      :class="treeNodeClass"
-      @mouseover="mouseOver"
-      @mouseout="mouseOut"
-      @click.stop="toggle"
-    >
+    <div :class="treeNodeClass" @mouseover="mouseOver" @mouseout="mouseOut" @click.stop="toggle">
       <div class="vtl-border-text">
         <template v-if="isFolder">
           <slot v-if="expanded" :item="{ title: model.title, isFolder: true, expanded: true }" name="icon"> </slot>
           <slot v-else :item="{ title: model.title, isFolder: true, expanded: false }" name="icon"></slot>
-       
+
         </template>
         <slot v-else :item="{ title: model.title, isFolder: false }" name="icon"></slot>
-        <span class="vtl-node-content ellipsis" >
+        <span class="vtl-node-content ellipsis">
           {{ model.title }}
         </span>
       </div>
@@ -26,14 +21,8 @@
   </div>
   <div class="vtl-tree-margin" v-show="expanded">
     <!-- 这里无法使用$attr来透传属性官方还未解决此bug -->
-    <treeList
-      @on-click="(depth) => $emit('onClick', depth)"
-      @detail-node="(depth) => $emit('detailNode', depth)"
-      v-for="newmodel in model.children"
-      :selected="selected"
-      :model="newmodel"
-      :key="newmodel.id"
-    >
+    <treeList @on-click="(depth) => $emit('onClick', depth)" @detail-node="(depth) => $emit('detailNode', depth)"
+      v-for="newmodel in model.children" :selected="selected" :model="newmodel" :key="newmodel.id">
       <template #icon="slotProps">
         <slot name="icon" v-bind="slotProps"></slot>
       </template>
@@ -44,141 +33,152 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, ref,  } from 'vue';
-  interface IFileSystem {
-    id: string;
-    title: string;
-    pid: string;
-    isFolder: boolean;
-    isAdd: boolean;
-    children?: IFileSystem[];
+import { computed, ref, } from 'vue';
+interface IFileSystem {
+  id: string;
+  title: string;
+  pid: string;
+  ppid: string,
+  isFolder: boolean;
+  isAdd: boolean;
+  children?: IFileSystem[];
+}
+// 吐出去的事件
+const emit = defineEmits([
+  'onClick',
+  'detailNode',
+]);
+// 拿到传入的值
+const props = withDefaults(
+  defineProps<{
+    model: IFileSystem;
+    selected: IFileSystem;
+  }>(),
+  {
+    // draggable: false,
   }
-  // 吐出去的事件
-  const emit = defineEmits([
-    'onClick',
-    'detailNode',
-  ]);
-  // 拿到传入的值
-  const props = withDefaults(
-    defineProps<{
-      model: IFileSystem;
-      selected: IFileSystem;
-    }>(),
-    {
-      // draggable: false,
-    }
-  );
-  //是否移入
-  const isHover = ref(false);
-  // 是否展开
-  const expanded = ref(true);
-  // 是否是文件夹
-  const isFolder = computed(() => {
-    return props.model.isFolder;
-  });
-  const isSelected = computed(() => props.selected.id === props.model.id);
+);
+//是否移入
+const isHover = ref(false);
+// 是否展开
+const expanded = ref(true);
+// 是否是文件夹
+const isFolder = computed(() => {
+  return props.model.isFolder;
+});
+const isSelected = computed(() => {
+  if (props.model.pid == '0' || props.model.pid == '1' || props.model.pid == '2') {
+    return props.selected.id === props.model.id && props.selected.pid === props.model.pid;
+  } else if (props.model.ppid == '0' || props.model.ppid == '1' || props.model.ppid == '2') {
+    return props.selected.id === props.model.id && props.selected.ppid === props.model.ppid;
+  } else {
+    return props.selected.id === props.model.id ;
+  }
+})
   // 拖拽样式
   const treeNodeClass = computed(() => {
-    return {
-      'vtl-node-main': true,
-      selected: isSelected.value,
-    };
+  return {
+    'vtl-node-main': true,
+    selected: isSelected.value,
+  };
+});
+
+// 删除目录
+const delNode = () => {
+  emit('detailNode', {
+    ...props.model,
+    eventType: 'detail',
   });
- 
-  // 删除目录
-  const delNode = () => {
-    emit('detailNode', {
+};
+
+
+// 展开收起
+const toggle = () => {
+  if (isFolder.value) {
+    console.log(props.model, 'props.model---------')
+    expanded.value = !expanded.value;
+    emit('onClick', {
+      ...props.model,
+    }); //lxh
+  } else {
+    console.log(props.model, 'props.model---------')
+    emit('onClick', {
       ...props.model,
-      eventType: 'detail',
     });
-  };
- 
-  
-  // 展开收起
-  const toggle = () => {
-    if (isFolder.value ) {
-      expanded.value = !expanded.value;
-      emit('onClick', {
-        ...props.model,
-      }); //lxh
-    } else {
-      emit('onClick', {
-        ...props.model,
-      });
-    }
-  };
-  // 拖拽结束
-  const mouseOver = () => {
-    isHover.value = true;
-  };
-  // 移出
-  const mouseOut = () => {
-    isHover.value = false;
-  };
- 
-  
-  
+  }
+};
+// 拖拽结束
+const mouseOver = () => {
+  isHover.value = true;
+};
+// 移出
+const mouseOut = () => {
+  isHover.value = false;
+};
+
+
+
 </script>
 <style lang="less">
-  .vtl-node {
-    .vtl-node-main {
-      display: flex;
-      align-items: center;
-      padding: 2px 0 2px 2px;
-      cursor: pointer;
-
-      &:hover {
-        .vtl-border-text {
-          width: 80%;
-        }
-      }
+.vtl-node {
+  .vtl-node-main {
+    display: flex;
+    align-items: center;
+    padding: 2px 0 2px 2px;
+    cursor: pointer;
 
+    &:hover {
       .vtl-border-text {
-        display: flex; //lxh
-        flex: 1;
-        align-items: center; //lxh
-        width: 100%;
-        padding-left: 5px;
-
-        .iconfont {
-          width: 16px;
-          height: 16px;
-          vertical-align: text-bottom;
-        }
+        width: 80%;
       }
+    }
+
+    .vtl-border-text {
+      display: flex; //lxh
+      flex: 1;
+      align-items: center; //lxh
+      width: 100%;
+      padding-left: 5px;
 
-      &.selected {
-        // background-color: rgba(45, 113, 134, 0.2);
-        background-color: #1c4869;
+      .iconfont {
+        width: 16px;
+        height: 16px;
+        vertical-align: text-bottom;
       }
+    }
+
+    &.selected {
+      // background-color: rgba(45, 113, 134, 0.2);
+      background-color: #1c4869;
+    }
+
 
-   
 
+    .vtl-node-content {
+      color: #fff;
+      padding-left: 5px;
+      font-size: 14px;
+      width: 80%;
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    &:hover {
       .vtl-node-content {
         color: #fff;
-        padding-left: 5px;
-        font-size: 14px;
-        width: 80%;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-
-      &:hover {
-        .vtl-node-content {
-          color: #fff;
-          overflow: hidden;
-        }
+        overflow: hidden;
       }
+    }
 
 
 
-      .vtl-operation {
-        padding-right: 10px;
-      }
+    .vtl-operation {
+      padding-right: 10px;
     }
   }
+}
 
-  .vtl-tree-margin {
-    padding-left: 1em;
-  }
+.vtl-tree-margin {
+  padding-left: 1em;
+}
 </style>

src/views/vent/reportManager/index.vue

@@ -47,21 +47,21 @@ let listArr = reactive<any[]>([
     pid: 'auto',
     isFolder: true,
     title: '自动报表',
-    id: '000',
+    id: '0',
     children: []
   },
   {
     pid: 'hand',
     isFolder: true,
     title: '手动报表',
-    id: '111',
+    id: '1',
     children: []
   },
   {
     pid: 'temp',
     isFolder: true,
     title: '报表模板',
-    id: '222',
+    id: '2',
     children: []
   },
 ]);
@@ -80,21 +80,15 @@ async function getTreeList() {
     listArr.forEach(el => {
       el.children.length = 0
       res.forEach(v => {
-        v.pid = el.id
-        v.isFolder = true
-        v.title = v.itemText
-        v.id = v.itemValue
+        // v.id=v.itemValue
+        let childre: any[] = []
         if (v.children.length != 0) {
           v.children.forEach(m => {
-            m.pid = v.id
-            m.ppid = v.pid
-            m.isFolder = false
-            m.title = m.itemText,
-              m.id = m.itemValue
+            childre.push({ pid: v.itemValue, ppid: el.id, isFolder: false, title: m.itemText, id: m.itemValue })
           })
         }
+        el.children.push({ pid: el.id, isFolder: true, title: v.itemText, id: v.itemValue, children: childre })
       })
-      el.children = res
     })
     console.log(listArr, 'listArr-----------')
   }
@@ -111,21 +105,25 @@ async function onClick(node) {
   }
 };
 function treeClick(node) {
+  dataNow.value = new Date().getTime()
   selected.id = node.id;
   selected.pid = node.pid;
   selected.title = node.title;
   selected.isFolder = node.isFolder;
-
-  listArr.forEach(el => {
-    let middleData = el.children.filter(v => v.id == node.pid)[0]
-    console.log(middleData, 'middleData-------')
-    if (middleData.pid == '')
-      console.log(middleData, 'middleData-------')
-  })
-  // searchParam.busKind=
-  // searchParam.modelType=
-  // searchParam.reportType=
-  dataNow.value = new Date().getTime()
+  selected.ppid=node.ppid
+  if (node.id == '0' || node.id == '1' || node.id == '2') {
+    searchParam.busKind = ''
+    searchParam.modelType = node.id
+    searchParam.reportType = ''
+  } else if (node.pid == '0' || node.pid == '1' || node.pid == '2') {
+    searchParam.busKind = node.id
+    searchParam.modelType = node.pid
+    searchParam.reportType = ''
+  } else {
+    searchParam.busKind = node.pid
+    searchParam.modelType = node.ppid
+    searchParam.reportType = node.id
+  }
 }
 
 async function saveAdd(params) {