settle-vue3/src/views/system/menuOperator/components/action-table.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { useColumns } from "../columns";
import { handleTree } from "@pureadmin/utils";
import { httpList, httpStatus, httpDelete } from "/@/api/system/menuOperator";
import { TableProBar } from "/@/components/ReTable";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useNav } from "/@/layout/hooks/nav";
import { responseHandle } from "/@/utils/responseHandle";
import { useUserStoreHook } from "/@/store/modules/user";
const { logout } = useNav();
const { columns } = useColumns();
const dataList = ref([]);
const powers = ref([]);
const loading = ref(true);
const tableRef = ref();

const emit = defineEmits(["edit", "create", "view"]);
//更新状态
const handleStatus = async row => {
  const { id, status } = row;
  const { code, message } = await httpStatus({
    id,
    status: status + "" === "1" ? "0" : "1"
  });
  responseHandle({
    code,
    message,
    logout,
    handler: () => onSearch()
  });
};
//删除
const handleDelete = async row => {
  const { id } = row;
  const { code, message } = await httpDelete({
    id
  });
  responseHandle({
    code,
    message,
    logout,
    handler: () => onSearch()
  });
};
//勾选
function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}
//列表展示
async function onSearch() {
  loading.value = true;
  const { code, data, message } = await httpList({});
  responseHandle({
    code,
    message,
    logout,
    handler: () => {
      dataList.value = handleTree(data ?? []);
    }
  });
  loading.value = false;
}
//编辑
function editItem(item, id: string, type: "create" | "edit" | "view") {
  emit(type, item, id, type);
}
onMounted(() => {
  powers.value = useUserStoreHook().getMenuActions("menuOperator");
});
defineExpose({
  onSearch
});
</script>

<template>
  <div class="main flex" style="width: 100%">
    <TableProBar
      title="菜单列表"
      :loading="loading"
      :tableRef="tableRef?.getTableRef()"
      :dataList="dataList"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-button
          v-if="powers.some(i => i == '002')"
          type="primary"
          size="small"
          :icon="useRenderIcon('add')"
          @click="editItem(null, '', 'create')"
        >
          新增
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <PureTable
          ref="tableRef"
          border
          align="left"
          row-key="id"
          table-layout="auto"
          :size="size"
          :data="dataList"
          :columns="columns"
          :checkList="checkList"
          :tree-props="{ hasChildren: 'hasChildren', children: 'child' }"
          :header-cell-style="{ background: '#fafafa', color: '#606266' }"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              v-if="powers.some(i => i == '007')"
              type="primary"
              :size="size"
              @click="editItem(row, row.id, 'view')"
              :icon="useRenderIcon('eye-view')"
            />
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              v-if="powers.some(i => i == '005')"
              @click="editItem(row, row.id, 'edit')"
              :icon="useRenderIcon('edits')"
            />
            <el-popconfirm
              :title="row.status === '1' ? '改为禁用？' : '改为启用？'"
              v-if="
                (powers.some(i => i == '004') && row.status + '' === '1') ||
                (powers.some(i => i == '003') && row.status + '' === '0')
              "
              @confirm="handleStatus(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="
                    useRenderIcon(
                      row.status === '1'
                        ? 'close-circle-line'
                        : 'checkbox-circle-line'
                    )
                  "
                /> </template
            ></el-popconfirm>
            <el-popconfirm
              title="是否确认删除?"
              v-if="powers.some(i => i == '006')"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon('delete')"
                />
              </template>
            </el-popconfirm>
            <el-button
              v-if="row.menu_type + '' === '1' && powers.some(i => i == '002')"
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="editItem(null, row.id, 'create')"
              :icon="useRenderIcon('add')"
            />
          </template>
        </PureTable>
      </template>
    </TableProBar>
  </div>
</template>