物理模型页面

src/views/metaModel/physicsModel/EditRowTable.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreateFile">新建文件夹</a-button>
+        <a-button type="primary" @click="handleCreateModel">新建元模型</a-button>
+      </template>
+    </BasicTable>
+    <ModelModal @register="registerModal" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import {getAccountList, deleteUser,exportUserList} from '@/api/system/user/user';
+import { PageWrapper } from '@/components/Page';
+import ModelTree from './ModelTree.vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { useModal } from '@/components/Modal';
+import ModelModal from './modelModal.vue';
+import { columns,searchFormSchema } from './editModel.data';
+import { useGo } from '@/hooks/web/usePage';
+import { useRoute,onBeforeRouteLeave } from 'vue-router';
+import { useFilterStore } from '@/store/modules/filterData';
+import {editTableData,editBucketData,editAreaData,editColumnData} from "@/views/metaModel/physicsModel/modelData";
+
+defineOptions({ name: 'AccountManagement' });
+const { createMessage } = useMessage();
+const filterStore = useFilterStore();
+const route = useRoute();
+const go = useGo();
+const [registerModal, { openModal }] = useModal();
+const [registerAddUserModal, { openModal:addUserModal }] = useModal();
+const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
+const searchInfo = reactive<Recordable>({});
+const tableData = ref([])
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+  title: '',
+  api: async (params) => {
+    console.log('params:',params)
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableData.value.length,
+      code:'',
+      message:'',
+      data: [],
+    };
+    //过滤data中的数据，取出等于params.deptId的数据
+    var data = []
+    //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
+    var data = [];
+    data = tableData.value.filter((item) => item.businessId !== 100);
+    return { ...response, data: data };
+  },
+  rowKey: 'businessId',
+  columns,
+  rowSelection: true,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+  },
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn: false,
+  pagination: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    return info;
+  },
+  actionColumn: {
+    width: 150,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+/** 新增元模型*/
+function handleCreateModel() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+/** 新增文件夹*/
+function handleCreateFile() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+
+/** 移动按钮*/
+function handleMove(record: Recordable) {
+  openMoveUserModal(true, {
+    record,
+    isMove: true,
+  });
+}
+
+/** 编辑按钮*/
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+  });
+}
+
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
+  tableData.value.splice(tableData.value.findIndex(item => item.businessId === record.businessId), 1);
+  createMessage.success('删除成功!');
+  reload();
+}
+
+/** 新增/编辑成功*/
+function handleSuccess({ isUpdate, values }) {
+  if (isUpdate) {
+    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+    //修改表单的值
+    const result = updateTableDataRecord(values.businessId, values);
+    reload();
+  } else {
+    tableData.value.push(values)
+    reload();
+  }
+}
+
+/** 移动*/
+function handleMoveSuccess({ isMove, values }) {
+  const rowSelection = getRowSelection().selectedRowKeys;
+  if (rowSelection.length > 0){
+    //批量移动
+    for (let i = 0; i < rowSelection.length; i++){
+      const result = updateTableDataRecord(values[i].institutionId, values[i]);
+    }
+  }else {
+    //单个移动
+    const result = updateTableDataRecord(values.businessId, values);
+  }
+  reload();
+}
+
+/** 部门树的select*/
+function handleSelect(modelId = '') {
+  searchInfo.modelId = modelId;
+  reload();
+}
+
+function handleView(record: Recordable) {
+  go('/system/account_detail/' + record.id);
+}
+
+onMounted(() => {
+  tableData.value = editTableData
+
+
+});
+onBeforeRouteLeave((to, from, next) => {
+  const params = Object.assign({},getSearchInfo(),getForm().getFieldsValue());
+  filterStore.setSearchParams(
+    {
+      path: from.path,
+      param: {
+        ...params
+      }
+    }
+  )
+  next(); // 允许导航
+});
+</script>