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} 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';
  let multipleSelection = ref<string[]>([]);
  const resourceData = resourceDataList
  const dialogFormVisible = ref(false)
  const isEditMode = ref(false);
  const dialogTitle = ref('新增菜单')
  const dialogForm = ref<Resource.ResResourceList>({
                              id: '',
                              name: '',
                              path: '',
                              sort: 0,
                              type: '',
                              remark: '',
                              route_Name: '',
                              create_Time:  '' ,
                              update_Time:  '' ,
                              children:[],
});
  // ProTable 实例
  const proTable = ref<ProTableInstance>()
  // 表格配置项
  const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
    { type: 'selection', fixed: 'left', width: 50 },
    {
      prop: 'name',
      label: '名称',
      width: 150,
      search: { el: 'input', tooltip: '我是搜索提示' },
    },
    {
      prop: 'path',
      label: '路径',
      width: 300,
    },
    {
      prop: 'sort',
      label: '排序',
      width: 100,
      search: {
      // 自定义 search 显示内容
      render: ({ searchParam }) => {
        return (
          <div class='flx-center'>
            <el-input vModel_trim={searchParam.minAge} placeholder='最小排序' />
            <span class='mr10 ml10'>-</span>
            <el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
          </div>
         
        )
      },
    },
    },
    {
      prop: 'type',
      label: '资源类型',
      width: 150,
      // 字典数据（本地数据）
      //enum: dictStore.getDictData('type'),
      //search: { el: 'select', props: { filterable: true } },
      //fieldNames: { label: 'label', value: 'resourceType' },
      search: {
      // 自定义 search 显示内容
      render: ({ searchParam }) => {
        return (
          <div class='flx-center'>
            <el-select >
              <el-option ></el-option>
              <el-option label="未检测"></el-option>
              <el-option label="检测中"></el-option>
              <el-option label="检测完成"></el-option>
            </el-select>
          </div>
         
        )
      },
    },
    },
    {
      prop: 'route_Name',
      width: 200,
      label: '路由名称',
      search: { el: 'input' },
    },
    {
      prop: 'create_Time',
      label: '创建时间',
      width: 180,
      search: {
      el: 'date-picker',
      span: 1,
      props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
      defaultValue: ['2024-11-12', '2024-12-12'],}
    },
    {
      prop: 'update_Time',
      label: '更新时间',
      width: 180,
      
    },
    { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
  ])
  // 打开 drawer(新增、查看、编辑)
  // 打开新增对话框
const openAddDialog = () => {
  dialogForm.value = {
    id: '',
    name: '',
    path: '',
    sort: 0,
    type: '',
    remark: '',
    route_Name: '',
    create_Time:  '' ,
    update_Time:  '' ,
    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>