web/src/views/user/org-struct-manage/struct-manage/index.vue

<template>
  <div class="struct-manage h-full">
    <div class="flex-1 page-wrap">
      <div class="btn-group">
        <t-button
          v-perm="112"
          theme="success"
          @click="
            curRow = null;
            showAddNodeDialog = true;
          "
          >新增管理节点</t-button
        >
      </div>
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        v-loading="tableLoading"
      >
        <template #enable="{ row }">{{
          row.enable ? '启用' : '禁用'
        }}</template>
      </t-table>
    </div>
    <AddNodeDialog
      v-model:visible="showAddNodeDialog"
      :curRow="curRow"
      :orgTreeList="tableData || []"
      @success="addSuccess"
    ></AddNodeDialog>
  </div>
</template>

<script setup name="StructManage" lang="jsx">
import { computed, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useRequest } from 'vue-request';
import { getOrgStructList, toggleOrgNodeStatus } from '@/api/user';
import AddNodeDialog from './add-node-dialog.vue';
const showAddNodeDialog = ref(false);
const curRow = ref(null);
const toggleStatus = (row) => {
  toggleOrgNodeStatus({ id: row.id, enable: !row.enable }).then(() => {
    MessagePlugin.success('操作成功');
    run();
  });
};
const columns = [
  { colKey: 'name', title: '管理节点' },
  { colKey: 'enable', title: '状态' },
  {
    title: '操作',
    colKey: 'operate',
    fixed: 'right',
    cell: (h, { row }) => {
      return (
        <div class="table-operations">
          <t-link
            theme="primary"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              curRow.value = row;
              showAddNodeDialog.value = true;
            }}
          >
            修改
          </t-link>
          <t-link
            theme={row.enable ? 'danger' : 'success'}
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              toggleStatus(row);
            }}
          >
            {row.enable ? '禁用' : '启用'}
          </t-link>
        </div>
      );
    },
  },
];

const {
  data: tableData,
  loading: tableLoading,
  run,
} = useRequest(getOrgStructList);
run();
const addSuccess = () => {
  showAddNodeDialog.value = false;
  MessagePlugin.success('操作成功');
  run();
};
</script>

<style></style>