菜单-脚本开发-文件夹

src/views/scriptDevelopment/sqlAudit/DeptTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <div class="m-4 mr-0 overflow-hidden bg-white" style="margin-bottom: -20px">
+      <BasicTree
+        ref="treeRef"
+        toolbar
+        search
+        treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+        :clickRowToExpand="true"
+        :defaultExpandAll="true"
+        :treeData="treeData"
+        :fieldNames="{ key: 'businessId', title: 'label' }"
+        @select="handleSelect"
+      />
+    </div>
+    <a-input placeholder=""  style="margin: 10px 0;">
+      <template #prefix>
+        <Icon icon="ant-design:search-outlined" :size="20" />
+      </template>
+    </a-input>
+    <BasicTree
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :defaultExpandAll="true"
+      :treeData="treeDataTwo"
+      :fieldNames="{ key: 'businessId', title: 'label' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+
+  import { Nullable } from '@vben/types';
+  import { treeDataList, treeDataListTwo } from './mock';
+  import Icon from "@/components/Icon/Icon.vue";
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeDataTwo = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+  async function fetch() {
+    treeData.value = treeDataList;
+    treeDataTwo.value = treeDataListTwo;
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/scriptDevelopment/sqlAudit/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
+
+
+
+    </BasicTable>
+
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { reactive,onMounted } from 'vue';
+import { BasicTable, useTable } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import DeptTree from './DeptTree.vue';
+
+
+
+import { tableList } from './mock';
+import { columns, searchFormSchema } from './mainBody.data';
+
+import { useRoute, onBeforeRouteLeave } from 'vue-router';
+import { useFilterStore } from '@/store/modules/filterData';
+
+
+
+
+defineOptions({ name: 'AccountManagement' });
+
+const filterStore = useFilterStore();
+const route = useRoute();
+
+
+
+
+const searchInfo = reactive<Recordable>({});
+const [
+  registerTable,
+  { reload, getSearchInfo, getForm },
+] = useTable({
+  title: '质量任务列表',
+  api: async (params) => {
+    console.log('tableList', tableList);
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: tableList.length,
+      code: '',
+      message: '',
+      data: tableList,
+    };
+
+    return { ...response };
+  },
+  rowKey: 'businessId',
+
+  rowSelection: true,
+  columns,
+  formConfig: {
+    labelWidth: 10,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+    resetFunc: () => {
+      searchInfo.deptId = '';
+    },
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 170,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+
+
+
+
+/** 部门树的select*/
+function handleSelect(deptId = '') {
+  searchInfo.deptId = deptId;
+  reload();
+}
+
+
+onMounted(() => {
+  const path = route.path;
+  if (filterStore.getSearchParams[path]) {
+    if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
+      const params = JSON.parse(filterStore.getSearchParams[path]);
+      console.log('11111111111111111111111111111', params);
+      getForm().setFieldsValue({
+        page: params.page,
+        pageSize: params.pageSize,
+        username: params.username,
+        flag: params.flag,
+      });
+      searchInfo.deptId = params.deptId;
+    }
+  }
+});
+onBeforeRouteLeave((to, from, next) => {
+  const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
+  console.log('path', from.path);
+  console.log('params', params);
+  filterStore.setSearchParams({
+    path: from.path,
+    param: {
+      ...params,
+    },
+  });
+  next(); // 允许导航
+});
+</script>

src/views/scriptDevelopment/sqlAudit/mainBody.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '规则描述',
+    dataIndex: 'ruleDescription',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '规则类型',
+    dataIndex: 'ruleType',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '规则处置',
+    dataIndex: 'ruleHandling',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'creationTime',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 150,
+  },
+
+];
+
+
+
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+
+];
+

src/views/scriptDevelopment/sqlAudit/mock.ts

+
+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name: 'has_agg',
+    ruleDescription: 'has_agg',
+    ruleType: '预置规则',
+    ruleHandling: '建议优化',
+    creationTime: '2019/12/12 21:21:21',
+    updateTime: '2019/12/12 21:21:21',
+    owner: 'admin',
+
+  },
+  {
+    businessId: 2,
+    name: 'is_Param_Of_Agg',
+    ruleDescription: 'is_Param_Of_Agg',
+    ruleType: '自定义规则',
+    ruleHandling: '禁止执行',
+    creationTime: '2019/12/12 21:21:21',
+    updateTime: '2019/12/12 21:21:21',
+    owner: 'admin',
+
+  },
+  {
+    businessId: 3,
+    name: 'is_Location_Exists',
+    ruleDescription: 'is_Location_Exists',
+    ruleType: '自定义规则',
+    ruleHandling: 'admin',
+    creationTime: '2019/12/12 21:21:21',
+    updateTime: '2019/12/12 21:21:21',
+    owner: 'admin',
+
+  },
+
+];
+
+export const treeDataList = [
+  {
+    label: '审核规则',
+    businessId: 1,
+    children: [
+      {
+        // {
+        //   label: 'admin_个人工作区',
+        //   businessId: 2,
+        //   children: [
+        //     { label: '个人工作区1', businessId: 6 },
+        //     { label: '个人工作区2', businessId: 7 },
+        //   ],
+        // },
+        // { label: '共享工作区', businessId: 3 },
+        // { label: '商城工作区', businessId: 4 },
+        // { label: '指标工作区', businessId: 5 },
+      }
+    ],
+  },
+];
+export const treeDataListTwo = [
+  {
+    label: '提示规则',
+    businessId: 1,
+    children: [
+    ],
+  },
+  {
+    label: '错误问题规则',
+    businessId: 2,
+    children: [
+      { label: 'has_agg', businessId: 3 },
+      { label: 'is_Param_Of_Agg', businessId: 4 },
+      { label: 'is_Location_Exists', businessId: 5 },
+    ],
+  },
+];