pqs-9100_client/frontend/src/views/authority/resource/index.vue

<template>
    <div class='table-box'>
      <ProTable
        ref='proTable'
        :columns='columns'
        :data='resourceData'
        @selection-change="handleSelectionChange" 
        type="selection"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
          <el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length'  @click="handleDelList"
                     >
            批量删除
          </el-button>
        </template>
        <template>
        </template>
        <!-- 表格操作 -->
        <template #operation='scope'>
          <el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type='primary' link :icon='Delete'  @click="deleteResource(scope.row)">删除</el-button>
        </template>
      </ProTable>

        <!-- 新增/编辑资源对话框 -->
    <ResourceDialog
      :visible="dialogFormVisible"
      :dialogTitle="dialogTitle"
      :formData="dialogForm"
      @update:visible="dialogFormVisible = $event"
      @submit="submitForm"
    />
    </div>

  </template>
  <script setup lang='tsx' name='useProTable'>
  import { defineComponent,ref ,reactive} from 'vue'
  import { type Resource } from '@/api/resource/interface'
  import ProTable from '@/components/ProTable/index.vue'
  import ResourceDialog from "@/views/authority/resource/components/ResourceDialog.vue"; // 导入子组件
  import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
  import resourceDataList from '@/api/resource/resourceData'
  import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
  import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
  import { useDictStore } from '@/stores/modules/dict'
import { el } from 'element-plus/es/locale';

  const dictStore = useDictStore()
  let multipleSelection = ref<string[]>([]);
  const resourceData = resourceDataList
  const dialogFormVisible = ref(false)
  const isEditMode = ref(false);
  const dialogTitle = ref('新增菜单')
  
  const dialogForm = ref<Resource.ResResourceList>({
                              id: '',
                              pid:'',
                              pids:'',
                              name: '',
                              code:'',
                              path:'',
                              icon:'',
                              sort:100,
                              type:0,
                              remark: '',
                              state:1,
                              children:[],
});
  // ProTable 实例
  const proTable = ref<ProTableInstance>()

  // 表格配置项
  const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    {
      prop: 'name',
      label: '名称',
      minWidth: 200,
      search: { el: 'input', tooltip: '我是搜索提示' },
    },
    {
      prop: 'code',
      label: '资源标识',
      minWidth: 100,
    },
    {
      prop: 'path',
      label: '路径',
      minWidth: 200,
    },
    {
    prop: 'type',
    label: '类型',
    width: 150,
    enum: dictStore.getDictData('resourceType'),
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'label', value: 'code' },
  },
    {
      prop: 'state',
      label: '权限资源状态',
      minWidth: 120,
      enum: dictStore.getDictData('status'),
      fieldNames: { label: 'label', value: 'code' },
      render: scope => {
        return (
          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
        )
      },
    },
    { prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
  ])
  // 打开 drawer(新增、查看、编辑)
  // 打开新增对话框
const openAddDialog = () => {
  dialogForm.value = {
    id: '',
    pid:'',
    pids:'',
    name: '',
    code:'',
    path:'',
    icon:'',
    sort:100,
    remark: '',
    state:1,                          
    children: [],
  };
  isEditMode.value = true;
  dialogTitle.value = '新增菜单';
  dialogFormVisible.value = true; // 打开对话框
};
// 提交表单
const submitForm = () => { 
  if (isEditMode.value) {
    const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
    if (index !== -1) {
      dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
      resourceData.value[index] = { ...dialogForm.value }; // 更新资源
    }
  } else {
   
    resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
  }
  dialogFormVisible.value = false; // 关闭对话框
};
// 打开编辑对话框
const openEditDialog = (resource: Resource.ResResourceList) => {
  dialogForm.value = { ...resource }; // 复制资源数据以便编辑
  isEditMode.value = true; // 设置为编辑模式
  dialogTitle.value = '编辑菜单';
  dialogFormVisible.value = true; // 显示对话框
 
};
 //选中
 // 处理选择变化
 const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
    multipleSelection.value = selection.map(row => row.id); // 更新选中的行
    
  };
  //批量删除
  const handleDelList =()=>{
    ElMessageBox.confirm(
    `是否删除所选菜单信息？`, // 使用模板字符串来插值
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
      multipleSelection.value = []; // Clear selected rows
      ElMessage.success("批量删除成功");
    })
     
  }
// 删除资源
const deleteResource = (params: Resource.ResResourceList) => {
  ElMessageBox.confirm(
    `是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
      ElMessage({
        type: 'success',
        message: `删除${params.name}成功!`
      })
    })
};


const formatDate = (timestamp: string|number|Date) => {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
  </script>