班制更新

Ben Lin

2024-07-04 d582f081e148c5df7c1b334a94fa1df1cd2655a9

 src/views/tigerprojects/system/menu/index.vue

@@ -1,154 +1,219 @@
<template>
  <div class="p-2">
    <BasicTable
      @register="registerTable"
      @fetch-success="onFetchSuccess"
      @expanded-rows-change="onExpandedRChg"
    >
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除?',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
  <PageWrapper title="菜单管理" content="这里是菜单的增加删除和修改" contentBackground>
    <template #footer>
      <a-tabs default-active-key="detail" v-model:activeKey="currentKey">
        <a-tab-pane key="detailfirst" tab="BS菜单" />
        <a-tab-pane key="detailsecond" tab="PDA菜单" />
      </a-tabs>
    </template>
    <div>
      <div v-if="currentKey == 'detailfirst'">
        <div class="p-2">
          <BasicTable
            @register="registerTable"
            @fetch-success="onFetchSuccess"
            @expanded-rows-change="onExpandedRChg"
          >
            <template #toolbar>
              <a-button type="primary" @click="handleCreate('BS 菜单')"> 新增菜单 </a-button>
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handleEdit.bind(null, record, 'BS 菜单'),
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: '是否确认删除?',
                      placement: 'left',
                      confirm: handleDelete.bind(null, record),
                    },
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
      <div v-if="currentKey == 'detailsecond'">
        <div class="p-2">
          <BasicTable
            @register="registerTableSecond"
            @fetch-success="onFetchSuccess"
            @expanded-rows-change="onExpandedRChg"
          >
            <template #toolbar>
              <a-button type="primary" @click="handleCreate('PDA')"> 新增菜单 </a-button>
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handleEdit.bind(null, record, 'PDA'),
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: '是否确认删除?',
                      placement: 'left',
                      confirm: handleDelete.bind(null, record),
                    },
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
      <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, nextTick, ref, unref } from 'vue';

<script lang="ts" setup>
  import { nextTick, ref, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getMenuList, DeleteMenu } from '/@/api/tigerapi/system';
  import { useDrawer } from '/@/components/Drawer';
  import MenuDrawer from './MenuDrawer.vue';

  import { Tabs } from 'ant-design-vue';
  import { columns, searchFormSchema } from './menu.data';

  export default defineComponent({
    name: 'MenuManagement',
    components: { BasicTable, MenuDrawer, TableAction },
    setup() {
      const expandedRowKeys = ref<string[]>([]);
      const [registerDrawer, { openDrawer }] = useDrawer();
      const [registerTable, { reload, expandAll, expandRows }] = useTable({
        // const [registerTable, { reload, expandRows }] = useTable({
        title: '菜单列表',
        api: getMenuList,
        columns,
        // formConfig: {
        //   labelWidth: 120,
        //   schemas: searchFormSchema,
        // },
        isTreeTable: true,
        // pagination: false,
        // striped: false,
        // // useSearchForm: true,
        showTableSetting: true,
        // bordered: true,
        // showIndexColumn: false,
        // canResize: false,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
        rowKey: 'id',
      });

      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        });
      }

      function handleDelete(record: Recordable) {
        console.log(record);
        //删除菜单
        const apiAction = DeleteMenu(record);
        apiAction.then((onfulfilled) => {
          if (onfulfilled.IsSuccessed) {
            reload();
          }
        });
      }

      function handleSuccess({ values }) {
        reload();
        nextTick(() => {
          setTimeout(() => {
            var tdList = document.querySelectorAll(
              '.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
            );
            for (var i = 0; i < tdList.length; i++) {
              if (tdList[i].attributes['title'].nodeValue == values.menuName) {
                tdList[i].scrollIntoView();
              }
            }
          }, 1000);
          // console.log(
          //   document.querySelectorAll(
          //     '.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
          //   )[8].attributes['title'].nodeValue, //[8].attributes['data-row-key'].nodeValue
          //   values.menuName,
          // );
        });
      }

      function onFetchSuccess(record: Recordable) {
        // 演示默认展开所有表项
        nextTick(() => {
          if (expandedRowKeys.value.length == 0) {
            expandAll();
          } else {
            expandRows(expandedRowKeys.value);
          }
        });
        console.log(record);
        //nextTick(collapseAll);
        // expandRows([record.items[1].id]);
      }

      function onExpandedRChg(record: Recordable) {
        expandedRowKeys.value = record;
        console.log(11, record);
      }

      return {
        registerTable,
        registerDrawer,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        onFetchSuccess,
        onExpandedRChg,
      };
  const ATabs = ref(Tabs);
  const ATabPane = ref(Tabs.TabPane);
  var currentKey = ref('detailfirst');
  const expandedRowKeys = ref<string[]>([]);
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload, expandAll, expandRows }] = useTable({
    // const [registerTable, { reload, expandRows }] = useTable({
    title: '菜单列表',
    api: getMenuList,
    searchInfo: { menuName: 'BS 菜单' },
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    isTreeTable: true,
    // pagination: false,
    // striped: false,
    useSearchForm: true,
    showTableSetting: true,
    // bordered: true,
    // showIndexColumn: false,
    // canResize: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    rowKey: 'id',
  });

  const [registerTableSecond, { reload:reloadSecond, expandAll:expandAllSecond, expandRows:expandRowsSecond }] = useTable({
    // const [registerTable, { reload, expandRows }] = useTable({
    title: '菜单列表',
    api: getMenuList,
    searchInfo: { menuName: 'PDA' },
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    isTreeTable: true,
    // pagination: false,
    // striped: false,
    useSearchForm: true,
    showTableSetting: true,
    // bordered: true,
    // showIndexColumn: false,
    // canResize: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    rowKey: 'id',
  });

  function handleCreate(menuName: string) {
    openDrawer(true, {
      isUpdate: false,
      menuName: menuName,
    });
  }

  function handleEdit(record: Recordable, menuName: string) {
    openDrawer(true, {
      record,
      isUpdate: true,
      menuName: menuName,
    });
  }

  function handleDelete(record: Recordable) {
    console.log(record);
    //删除菜单
    const apiAction = DeleteMenu(record);
    apiAction.then((onfulfilled) => {
      if (onfulfilled.IsSuccessed) {
        reload();
      }
    });
  }

  function handleSuccess(d) {
    if (d.menuName == 'PDA') {
      reloadSecond();
    } else {
      reload();
    }
    nextTick(() => {
      setTimeout(() => {
        var tdList = document.querySelectorAll(
          '.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
        );
        for (var i = 0; i < tdList.length; i++) {
          if (tdList[i].attributes['title'].nodeValue == d.values.menuName) {
            tdList[i].scrollIntoView();
          }
        }
      }, 1000);
      // console.log(
      //   document.querySelectorAll(
      //     '.ant-table-cell.ant-table-cell-ellipsis.ant-table-cell-with-append',
      //   )[8].attributes['title'].nodeValue, //[8].attributes['data-row-key'].nodeValue
      //   values.menuName,
      // );
    });
  }

  function onFetchSuccess(record: Recordable) {
    // 演示默认展开所有表项
    nextTick(() => {
      if (expandedRowKeys.value.length == 0) {
        // expandAll();
      } else {
        expandRows(expandedRowKeys.value);
      }
    });
    console.log(record);
    //nextTick(collapseAll);
    // expandRows([record.items[1].id]);
  }

  function onExpandedRChg(record: Recordable) {
    expandedRowKeys.value = record;
    console.log(11, record);
  }
</script>