GroupTable.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <a-table :columns="columns" :data="data">
  3. <template #name="{ record }">
  4. {{ record.owner ? record.name + '(我)' : record.name }}
  5. </template>
  6. <template #operate="{ record }">
  7. <a-button type="text" v-if="record.owner" @click="handleClick(2)">{{ $t('management.table.transfer') }}</a-button>
  8. <a-button type="text" v-if="!record.owner && record.status_code == 1" @click="handleClick(0)">{{
  9. $t('management.table.forbidden')
  10. }}</a-button>
  11. <a-button type="text" status="danger" v-if="!record.owner && record.status_code == 2" @click="handleClick(1)">{{
  12. $t('management.table.delete')
  13. }}</a-button>
  14. </template>
  15. </a-table>
  16. <ToolsModal v-if="show_modal" :show_modal="show_modal" :type="target_type" @close="closeToolsModal"></ToolsModal>
  17. </template>
  18. <script setup>
  19. import { ref, reactive, computed } from 'vue';
  20. import ToolsModal from './ToolsModal.vue';
  21. import { getStatus, getPermission } from './use_table_config';
  22. import { useI18n } from 'vue-i18n';
  23. const { t } = useI18n();
  24. const columns = computed(() => {
  25. return [
  26. {
  27. title: t('management.table.name'),
  28. dataIndex: 'name',
  29. slotName: 'name'
  30. },
  31. {
  32. title: t('management.table.add_time'),
  33. dataIndex: 'time',
  34. slotName: 'time'
  35. },
  36. {
  37. title: t('management.table.status'),
  38. dataIndex: 'status',
  39. slotName: 'status'
  40. },
  41. {
  42. title: t('management.table.permission'),
  43. dataIndex: 'permission',
  44. slotName: 'permission'
  45. },
  46. {
  47. title: t('management.table.operate'),
  48. dataIndex: 'operate',
  49. slotName: 'operate'
  50. }
  51. ];
  52. });
  53. const data = reactive([
  54. {
  55. key: '1',
  56. name: '张三',
  57. time: '2025-02.12',
  58. status_code: 1,
  59. status: getStatus(1),
  60. permission: getPermission(1),
  61. owner: 1
  62. },
  63. {
  64. key: '1',
  65. name: '张三',
  66. time: '2025-02.12',
  67. status_code: 2,
  68. status: getStatus(2),
  69. permission: getPermission(2)
  70. },
  71. {
  72. key: '1',
  73. name: '张三',
  74. time: '2025-02.12',
  75. status_code: 1,
  76. status: getStatus(1),
  77. permission: getPermission(1)
  78. }
  79. ]);
  80. const show_modal = ref(false);
  81. const target_type = ref(0);
  82. const handleClick = (type) => {
  83. target_type.value = type;
  84. show_modal.value = true;
  85. };
  86. const closeToolsModal = () => {
  87. show_modal.value = false;
  88. };
  89. </script>
  90. <style scoped></style>