ref: 数据列表组件封装

frontend/src/components/table/conf.js

@@ -0,0 +1,36 @@
+import { ref } from 'vue'
+
+// 菜单类型映射
+export const menuType = {
+  0: '目录',
+  1: '菜单',
+  2: '按钮'
+}
+
+// 请求方法颜色映射
+export const methodColor = {
+  GET: '#61AFFE',
+  POST: '#49CC90',
+  DELETE: '#F93E3E',
+  PUT: '#FCA130'
+}
+
+export const tableTree = () => {
+  // 1.适配菜单表格
+  // 展开行 https://blog.csdn.net/weixin_52691965/article/details/120494451
+  const expandedRowKeys = ref([])
+  const expand = (expanded, record) => {
+    if (expandedRowKeys.value.length > 0) {
+      let index = expandedRowKeys.value.indexOf(record.id)
+      if (index > -1) {
+        expandedRowKeys.value.splice(index, 1)
+      } else {
+        expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
+        expandedRowKeys.value.push(record.id)
+      }
+    } else {
+      expandedRowKeys.value.push(record.id)
+    }
+  }
+  return expand
+}

frontend/src/components/table/table.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { menuType, methodColor, tableTree } from './conf'
+
+/**接受父组件传递过来的值 */
+defineProps({
+  // 列配置
+  columns: {
+    type: Array,
+    require: true,
+    default: () => []
+  },
+  // 数据源
+  dataSource: {
+    type: Array,
+    require: true,
+    default: () => []
+  },
+  // 分页器配置 非必须
+  pagination: {
+    type: Object,
+    default: () => ({
+      // 默认不要分页器
+      hideOnSinglePage: true
+    })
+  },
+  // 页面名称小写-主要用于权限校验
+  pageName: {
+    type: String,
+    default: 'user'
+  },
+  listTitle: {
+    type: String
+  }
+})
+
+// 子组件事件, 父组件可通过 @updateClick进行绑定
+const emits = defineEmits(['createClick', 'updateClick', 'deleteClick'])
+
+// 事件
+const createEvent = () => {
+  console.log('点击了 table组件 新增 -> 向父组件传递')
+  emits('createClick')
+}
+
+const updateEvent = (record) => {
+  console.log('点击了 table组件 更新 -> 向父组件传递', record)
+  emits('updateClick', record)
+}
+
+const deleteEvent = (record) => {
+  console.log('点击了 table组件 删除-> 向父组件传递', record)
+  emits('deleteClick', record)
+}
+
+const expand = tableTree()
+</script>
+
+<template>
+  <div class="list">
+    <a-card :title="listTitle"
+      ><template #extra>
+        <a-button type="primary" v-per="`${pageName}:create`" @click="createEvent">
+          <template #icon>
+            <component :is="$loadIconCpn('PlusOutlined')"></component>
+          </template>
+          新增</a-button
+        >
+      </template>
+      <a-table
+        :columns="columns"
+        :scroll="{ y: 'calc(100vh - 300px)' }"
+        :data-source="dataSource"
+        :pagination="pagination"
+        :row-key="(record) => record.id"
+        @expand="expand"
+      >
+        <template #bodyCell="{ column, record }">
+          <!-- 适配菜单表格 -->
+          <template v-if="column.key === 'meta'">
+            <component :is="$loadIconCpn(record.meta?.icon)"></component>
+          </template>
+          <template v-if="column.key === 'type'">
+            {{ menuType[record.type] }}
+          </template>
+          <template v-if="column.key === 'method'">
+            <template v-if="record.method">
+              <a-tag :color="methodColor[record.method]">{{ record.method }}</a-tag>
+            </template>
+          </template>
+
+          <!-- 一般表格 -->
+          <template v-if="column.key === 'status'">
+            <a-tag :color="record.status !== 9 ? 'green' : 'red'">
+              {{ record.status !== 9 ? '正常' : '删除' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'created'">
+            {{ $formatTime(record.created) }}
+          </template>
+          <template v-else-if="column.key === 'modified'">
+            {{ $formatTime(record.modified) }}
+          </template>
+
+          <template v-else-if="column.key === 'action'">
+            <span>
+              <a v-per="`${pageName}:update`" @click="updateEvent(record)">编辑</a>
+              <a-divider type="vertical" />
+              <template v-if="record.status !== 9">
+                <a v-per="`${pageName}:delete`" @click="deleteEvent(record)">删除</a>
+              </template>
+            </span>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<style scoped>
+.list {
+  margin-top: 20px;
+}
+</style>

frontend/src/views/main/system/menu/conf.js

@@ -72,11 +72,3 @@ export const menuType = {
   1: '菜单',
   2: '按钮'
 }
-
-// 请求方法颜色映射
-export const methodColor = {
-  GET: '#61AFFE',
-  POST: '#49CC90',
-  DELETE: '#F93E3E',
-  PUT: '#FCA130'
-}

frontend/src/views/main/system/menu/menu.vue

@@ -1,35 +1,17 @@
 <script setup>
 import { ref } from 'vue'
-import { PlusOutlined } from '@ant-design/icons-vue'
 
-import { columns, menuType, methodColor } from './conf'
+import { columns } from './conf'
 import { getMenus } from '@/service/menu'
 
+import Table from '@/components/table/table.vue'
+
 // 列表数据
 const dataSource = ref([])
 
 getMenus().then((res) => (dataSource.value = res.data))
 
-// 菜单类型隐射
-
-// 展开行 https://blog.csdn.net/weixin_52691965/article/details/120494451
-const expandedRowKeys = ref([])
-
-const zi = (expanded, record) => {
-  if (expandedRowKeys.value.length > 0) {
-    let index = expandedRowKeys.value.indexOf(record.id)
-    if (index > -1) {
-      expandedRowKeys.value.splice(index, 1)
-    } else {
-      expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
-      expandedRowKeys.value.push(record.id)
-    }
-  } else {
-    expandedRowKeys.value.push(record.id)
-  }
-}
-
-//
+// 新增
 const addClick = () => {
   console.log('点击')
 }
@@ -46,58 +28,16 @@ const delClick = () => {
 
 <template>
   <div class="user">
-    <!-- 列表 -->
-    <div class="data">
-      <a-card title="菜单列表"
-        ><template #extra>
-          <a-button type="primary" v-per="'role:create'" @click="addClick">
-            <template #icon><plus-outlined /></template>
-            新增</a-button
-          >
-        </template>
-
-        <!-- 数据 -->
-        <a-table
-          :columns="columns"
-          :scroll="{ x: 1600, y: 'calc(100vh - 380px)' }"
-          :data-source="dataSource"
-          :pagination="{
-            hideOnSinglePage: true
-          }"
-          :row-key="(record) => record.id"
-          @expand="zi"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'meta'">
-              <component :is="$loadIconCpn(record.meta?.icon)"></component>
-            </template>
-            <template v-if="column.key === 'type'">
-              {{ menuType[record.type] }}
-            </template>
-            <template v-if="column.key === 'method'">
-              <template v-if="record.method">
-                <a-tag :color="methodColor[record.method]">{{ record.method }}</a-tag>
-              </template>
-            </template>
-            <template v-else-if="column.key === 'created'">
-              {{ $formatTime(record.created) }}
-            </template>
-            <template v-else-if="column.key === 'modified'">
-              {{ $formatTime(record.modified) }}
-            </template>
-            <template v-else-if="column.key === 'action'">
-              <span>
-                <a v-per="'role:update'" @click="putClick(record)">编辑</a>
-                <a-divider type="vertical" />
-                <template v-if="record.status !== 9">
-                  <a v-per="'role:delete'" @click="delClick(record)">删除</a>
-                </template>
-              </span>
-            </template>
-          </template>
-        </a-table>
-      </a-card>
-    </div>
+    <Table
+      :columns="columns"
+      :data-source="dataSource"
+      page-name="menu"
+      list-title="菜单列表"
+      @create-click="addClick"
+      @update-click="putClick"
+      @delete-click="delClick"
+    >
+    </Table>
   </div>
 </template>
 

frontend/src/views/main/system/role/role.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, reactive, onMounted, watch } from 'vue'
-
-import { PlusOutlined } from '@ant-design/icons-vue'
+import Table from '@/components/table/table.vue'
 
 import { getRoles, queryRole, delRole, putRole, addRole } from '@/service/role'
 import { getMenus } from '@/service/menu'
@@ -126,7 +125,8 @@ const onCancel = () => {
 // 点击编辑弹modal事件
 const putClick = (record) => {
   putVisible.value = !putVisible.value
-  getPutModalData(record.id)
+  console.log(record, '父组件')
+  getPutModalData(record)
 }
 
 const getPutModalData = (record) => {
@@ -214,49 +214,17 @@ watch(
       </a-form>
     </div>
 
-    <!-- 列表 -->
-    <div class="data">
-      <a-card title="角色列表"
-        ><template #extra>
-          <a-button type="primary" v-per="'role:create'" @click="addClick">
-            <template #icon><plus-outlined /></template>
-            新增</a-button
-          >
-        </template>
-
-        <!-- 数据 -->
-        <a-table
-          :columns="columns"
-          :scroll="{ y: 'calc(100vh - 460px)' }"
-          :data-source="dataSource"
-          :pagination="pagination"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'status'">
-              <a-tag :color="record.status !== 9 ? 'green' : 'red'">
-                {{ record.status !== 9 ? '正常' : '删除' }}
-              </a-tag>
-            </template>
-            <template v-else-if="column.key === 'created'">
-              {{ $formatTime(record.created) }}
-            </template>
-            <template v-else-if="column.key === 'modified'">
-              {{ $formatTime(record.modified) }}
-            </template>
-            <template v-else-if="column.key === 'action'">
-              <span>
-                <a v-per="'role:update'" @click="putClick(record)">编辑</a>
-                <a-divider type="vertical" />
-                <template v-if="record.status !== 9">
-                  <a v-per="'role:delete'" @click="delClick(record)">删除</a>
-                </template>
-              </span>
-            </template>
-          </template>
-        </a-table>
-      </a-card>
-    </div>
-
+    <Table
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      page-name="role"
+      list-title="角色列表"
+      @create-click="addClick"
+      @update-click="putClick"
+      @delete-click="delClick"
+    >
+    </Table>
     <!-- 新增 -->
     <a-modal
       v-model:visible="addVisible"

frontend/src/views/main/system/user/user.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 
-import { PlusOutlined } from '@ant-design/icons-vue'
+import Table from '@/components/table/table.vue'
 
 import { getUsers, queryUser, delUser, addUser, getUserInfo, putUser } from '@/service/user'
 import { getRoles } from '@/service/role'
@@ -207,48 +207,17 @@ const onCancelPut = () => {
       </a-form>
     </div>
 
-    <!-- 列表 -->
-    <div class="data">
-      <a-card title="用户列表"
-        ><template #extra>
-          <a-button type="primary" v-per="'user:create'" @click="addClick">
-            <template #icon><plus-outlined /></template>
-            新增</a-button
-          >
-        </template>
-
-        <!-- 数据 -->
-        <a-table
-          :columns="columns"
-          :scroll="{ y: 'calc(100vh - 460px)' }"
-          :data-source="dataSource"
-          :pagination="pagination"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'status'">
-              <a-tag :color="record.status !== 9 ? 'green' : 'red'">
-                {{ record.status !== 9 ? '正常' : '删除' }}
-              </a-tag>
-            </template>
-            <template v-else-if="column.key === 'created'">
-              {{ $formatTime(record.created) }}
-            </template>
-            <template v-else-if="column.key === 'modified'">
-              {{ $formatTime(record.modified) }}
-            </template>
-            <template v-else-if="column.key === 'action'">
-              <span>
-                <a v-per="'user:update'" @click="putClick(record)">编辑</a>
-                <a-divider type="vertical" />
-                <template v-if="record.status !== 9">
-                  <a v-per="'user:delete'" @click="delClick(record)">删除</a>
-                </template>
-              </span>
-            </template>
-          </template>
-        </a-table>
-      </a-card>
-    </div>
+    <Table
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="pagination"
+      page-name="user"
+      list-title="用户列表"
+      @create-click="addClick"
+      @update-click="putClick"
+      @delete-click="delClick"
+    >
+    </Table>
 
     <!-- 新增 用户-->
     <a-modal
@@ -320,7 +289,4 @@ const onCancelPut = () => {
   padding: 24px;
   background: #fff;
 }
-.data {
-  margin-top: 20px;
-}
 </style>