1

components.d.ts

@@ -0,0 +1,7 @@
+// import cButton from '@common/src/components/frame/btn-1.vue'
+
+// declare module '@vue/runtime-core' {
+//   export interface GlobalComponents {
+//     cButton: typeof cButton
+//   }
+// }

src/components/index.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'vue'
+import cButton from '@common/src/components/frame/btn-1.vue'
+
+const components: {
+  [propName: string]: Component
+} = { cButton }
+
+export default components

src/main.ts

@@ -15,6 +15,9 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import moment from 'moment'
 // lodash
 // import _ from 'lodash';
+
+// 组件
+import frameComponents from '@/components/index'
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
@@ -23,4 +26,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.config.globalProperties.$moment = moment
+
+for (const componentItme in frameComponents) {
+  app.component(componentItme, frameComponents[componentItme])
+}
+
 app.mount('#app')

src/router/index.ts

@@ -6,8 +6,8 @@ const router = createRouter({
     {
       path: '/',
       meta: { title: '基础动态管理平台' },
-      // component: () => import('@/views/homeIndex.vue')
-      component: () => import('@/views/loginIndex.vue')
+      component: () => import('@/views/homeIndex.vue')
+      // component: () => import('@/views/loginIndex.vue')
     },
     {
       path: '/loginIndex',

src/views/homeIndex.vue

@@ -1,22 +1,43 @@
 <template>
   <el-row>
     <el-col :span="24" class="main animate__animated animate__backInRight">
-      <el-col :span="24" class="one"> 系统首页 </el-col>
+      <el-col :span="24" class="one">
+        <el-table :data="list" border stripe style="width: 100%" @selection-change="toSelect">
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" label="序号" align="center" width="80" />
+          <el-table-column prop="dict_label" label="字典标签" align="center" show-overflow-tooltip sortable />
+          <el-table-column prop="dict_value" label="字典键值" align="center" show-overflow-tooltip sortable />
+          <el-table-column prop="dict_sort" label="字典排序" align="center" show-overflow-tooltip sortable />
+          <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip sortable />
+          <el-table-column fixed="right" label="操作" width="100" align="center">
+            <template #default>
+              <el-button link type="primary" size="small">修改</el-button>
+              <el-button link type="danger" size="small">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="24" class="two">
+        <cButton></cButton>
+      </el-col>
     </el-col>
   </el-row>
 </template>
+
 <script setup lang="ts">
 // 基础
-// import type { Ref } from 'vue'
+import type { Ref } from 'vue'
 // reactive, ref, onMounted
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 // 接口
-import { TestStore } from '@common/src/stores/test' //个人
+import { DictDataStore } from '@common/src/stores/users/sysdictdata'
 import type { IQueryResult } from '@/util/types.util'
-const testAxios = TestStore()
+const testAxios = DictDataStore()
 // 分页数据
 const skip = 0
 const limit = 10
+const list: Ref<any[]> = ref([])
+const total: Ref<number> = ref(0)
 // 请求
 onMounted(async () => {
   await search({ skip, limit })
@@ -24,7 +45,16 @@ onMounted(async () => {
 const search = async (e: { skip: number; limit: number }) => {
   const info = { skip: e.skip, limit: e.limit }
   const res: IQueryResult = await testAxios.query(info)
-  console.log(res)
+  if (res.errcode == '0') {
+    console.log(res.data)
+    list.value = res.data as any[]
+    total.value = res.total
+  }
+}
+// 多选
+const toSelect = (val: Array<[]>) => {
+  console.log('多选')
+  console.log(val)
 }
 </script>
 <style scoped lang="less"></style>