mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Introducing new features. 组件放在全局中，增加vue3 api 自动导入

Browse Source
This commit is contained in:
aeizzz 2023-02-02 17:56:07 +08:00
parent 62fa196679
commit 62b468146a
15 changed files with 1250 additions and 4665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
auto-imports.d.ts vendored Normal file
View File

@ -0,0 +1,73 @@
// Generated by 'unplugin-auto-import'
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createPinia: typeof import('pinia')['createPinia']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const defineStore: typeof import('pinia')['defineStore']
const effectScope: typeof import('vue')['effectScope']
const getActivePinia: typeof import('pinia')['getActivePinia']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const mapActions: typeof import('pinia')['mapActions']
const mapGetters: typeof import('pinia')['mapGetters']
const mapState: typeof import('pinia')['mapState']
const mapStores: typeof import('pinia')['mapStores']
const mapWritableState: typeof import('pinia')['mapWritableState']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const resolveDirective: typeof import('vue')['resolveDirective']
const setActivePinia: typeof import('pinia')['setActivePinia']
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const storeToRefs: typeof import('pinia')['storeToRefs']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useLink: typeof import('vue-router')['useLink']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}

5755
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -47,11 +47,12 @@
"@typescript-eslint/parser": "^5.46.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/compiler-sfc": "^3.2.45",
"eslint": "^8.29.0",
"eslint": "8.22.0",
"eslint-plugin-vue": "^9.8.0",
"prettier": "^2.8.1",
"sass": "^1.56.2",
"typescript": "^4.9.4",
"unplugin-auto-import": "^0.13.0",
"vite": "^4.0.0",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-eslint-parser": "^9.1.0"

2
src/components/RightToolbar/index.vue
View File

@ -22,7 +22,7 @@
</div>
</template>
<script setup>
<script setup name="right-toolbar">
import {computed, ref} from "vue";
const props = defineProps({

10
src/components/index.ts Normal file
View File

@ -0,0 +1,10 @@
import Pagination from '/@/components/Pagination/index.vue'
import RightToolbar from '/@/components/RightToolbar/index.vue'
import DictTag from '/@/components/DictTag/index.vue'
export {
Pagination,
RightToolbar,
DictTag
}

10
src/hooks/table.ts
View File

@ -1,4 +1,3 @@
import {defineAsyncComponent, onMounted} from "vue";
import {ElMessage} from "element-plus";
export interface BasicTableProps{
@ -85,6 +84,7 @@ export function useTable(options?: BasicTableProps) {
}).then(res => {
state.dataList = state.isPage ? res.data.records : res.data
state.pagination!.total = state.isPage ? res.data.total : 0
ElMessage.success('删除成功');
}).catch(err => {
ElMessage.error(err.msg)
}).finally(() => {
@ -130,17 +130,11 @@ export function useTable(options?: BasicTableProps) {
query()
}
const pagination = defineAsyncComponent(() => import('/@/components/Pagination/index.vue'))
const RightToolBar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
return {
RightToolBar,
getDataList,
sizeChangeHandle,
currentChangeHandle,
sortChangeHandle,
pagination
sortChangeHandle
}
}

15
src/main.ts
View File

@ -11,9 +11,22 @@ import 'element-plus/dist/index.css';
import elementIcons from '/@//components/svgIcon/svgicon'
import '/@/theme/index.scss';
import VueGridLayout from 'vue-grid-layout';
import { Pagination,RightToolbar, DictTag } from '/@/components/index'
const app = createApp(App);
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('RightToolbar', RightToolbar)
directive(app);
other.elSvg(app);
app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(elementIcons).use(i18n).use(VueGridLayout).mount('#app');
app.use(pinia) // pinia 存储
.use(router) // 路由
.use(ElementPlus, { i18n: i18n.global.t }) // ElementPlus 全局引入
.use(elementIcons) // elementIcons 图标全局引入
.use(i18n) // 国际化
.use(VueGridLayout)
.mount('#app');

2
src/views/system/menu/form.vue
View File

@ -65,8 +65,6 @@
</template>
<script setup lang="ts" name="systemMenuDialog">
import {defineAsyncComponent, nextTick, onMounted, reactive, ref} from 'vue';
import {i18n} from '/@/i18n/index';
import {info, pageList, update, addObj} from "/@/api/admin/menu";
import type {menuData} from './menu'

1
src/views/system/menu/index.vue
View File

@ -98,7 +98,6 @@ const onTabelRowDel = (row: RouteRecordRaw) => {
.then(() => {
ElMessage.success('删除成功');
getTableData();
//await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
})
.catch(() => {});
};

3
src/views/system/role/form.vue
View File

@ -57,12 +57,9 @@
</template>
<script setup lang="ts" name="systemRoleDialog">
import {nextTick, reactive, ref} from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
import { depttree } from '/@/api/admin/dept'
import { pageList } from '/@/api/admin/menu'
// 定义变量内容
const roleDialogFormRef = ref();

6
src/views/system/role/index.vue
View File

@ -14,7 +14,7 @@
<el-button size="default" icon="folder-add" type="success" class="ml10" @click="roleDialogRef.openDialog('add')">
新增用户
</el-button>
<right-tool-bar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-toolbar>
</div>
</el-row>
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
@ -46,14 +46,12 @@
</template>
<script setup lang="ts" name="systemRole">
import {defineAsyncComponent, reactive, ref, Ref} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {BasicTableProps, useTable} from "/@/hooks/table";
import { pageList } from "/@/api/admin/role";
// 引入组件
const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
const DictTag = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
// 定义变量内容
const roleDialogRef = ref();
@ -82,8 +80,6 @@ const dictType = ref([{
// table hook
const {
RightToolBar,
pagination,
getDataList,
currentChangeHandle,
sizeChangeHandle

3
src/views/system/user/form.vue
View File

@ -92,7 +92,6 @@
</template>
<script setup lang="ts" name="systemUserDialog">
import {nextTick, reactive, ref, toRefs, watchEffect} from 'vue';
import { addObj, putObj } from '/@/api/admin/user'
import { list as roleList } from '/@/api/admin/role'
import { list as postList } from '/@/api/admin/post'
@ -104,7 +103,7 @@ const emit = defineEmits(['refresh']);
// @ts-ignore
const { lock_flag } = toRefs(useDict('lock_flag'))
const { lock_flag } = useDict('lock_flag')
// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({

18
src/views/system/user/index.vue
View File

@ -25,7 +25,7 @@
<el-button size="default" icon="folder-add" type="success" class="ml10" @click="userDialogRef.openDialog('add')">
新增用户
</el-button>
<right-tool-bar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-toolbar>
</div>
</el-row>
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
@ -35,12 +35,12 @@
<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column label="岗位" show-overflow-tooltip>
<template #default="scope">
<el-tag v-for="(item,index) in scope.row.postList" type="success">{{item.postName}}</el-tag>
<el-tag v-for="(item,index) in scope.row.postList" type="success" :key="index">{{item.postName}}</el-tag>
</template>
</el-table-column>
<el-table-column label="角色" show-overflow-tooltip>
<template #default="scope">
<el-tag v-for="(item,index) in scope.row.roleList" type="success">{{item.roleName}}</el-tag>
<el-tag v-for="(item,index) in scope.row.roleList" type="success" :key="index">{{item.roleName}}</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" show-overflow-tooltip>
@ -74,24 +74,22 @@
</template>
<script setup lang="ts" name="systemUser">
import {defineAsyncComponent, reactive, onMounted, ref, Ref, toRefs} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { pageList, delObj } from '/@/api/admin/user'
import { depttree } from '/@/api/admin/dept'
import {BasicTableProps, useTable} from '/@/hooks/table'
import { useDict } from '/@/hooks/dict'
import {ElMessage, ElMessageBox} from "element-plus";
// 引入组件
const UserDialog = defineAsyncComponent(() => import('./form.vue'));
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
const DictTag = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
// @ts-ignore
const { lock_flag } = toRefs(useDict('lock_flag'))
const { lock_flag } = useDict('lock_flag')
// 定义变量内容
const userDialogRef = ref();
const showSearch : Ref<Boolean> = ref(true)
const showSearch = ref(true)
// 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({
@ -114,8 +112,6 @@ const deptData = reactive({
// table hook
const {
RightToolBar,
pagination,
getDataList,
currentChangeHandle,
sizeChangeHandle
@ -137,7 +133,7 @@ const onRowDel = (row: any) => {
})
.then(() => {
// 删除用户的接口
delObj(row.userId).then(res => {
delObj(row.userId).then(() => {
getDataList();
ElMessage.success('删除成功');
}).catch(err => {

2
tsconfig.json
View File

@ -70,6 +70,6 @@
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
"suppressImplicitAnyIndexErrors": true
},
"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts","./auto-imports.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
}

12
vite.config.ts
View File

@ -2,6 +2,9 @@ import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, loadEnv, ConfigEnv } from 'vite';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
// vue3 自动引入
import AutoImport from 'unplugin-auto-import/vite'
const pathResolve = (dir: string) => {
return resolve(__dirname, '.', dir);
@ -15,7 +18,14 @@ const alias: Record<string, string> = {
const viteConfig = defineConfig((mode: ConfigEnv) => {
const env = loadEnv(mode.mode, process.cwd());
return {
plugins: [vue(), vueSetupExtend()],
plugins: [vue(), vueSetupExtend(),AutoImport({
imports: [
'vue',
'vue-router',
'pinia'
],
dts: './auto-imports.d.ts',
})],
root: process.cwd(),
resolve: { alias },
base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,