@yyp92-cli/template-vue-pc 1.2.0

package/template/src/views/main/system/user/user-comp/UserModal.vue

@@ -0,0 +1,225 @@
+<template>
+    <div class="user-modal">
+        <el-dialog
+            v-model ="open"
+            :title="!defaultModalData?.id ? '新建用户' : '编辑用户'"
+            width="400"
+            :destroy-on-close="true"
+        >
+            <div class="form">
+                <el-form
+                    :model="formData"
+                    label-width="80px"
+                    size="large"
+                >
+                    <el-form-item
+                        label="用户名"
+                        prop="name"
+                    >
+                        <el-input
+                            v-model="formData.name"
+                            placeholder="请输入用户名"
+                        />
+                    </el-form-item>
+
+                    <el-form-item
+                        label="真实姓名"
+                        prop="realname"
+                    >
+                        <el-input
+                            v-model="formData.realname"
+                            placeholder="请输入真实名"
+                        />
+                    </el-form-item>
+
+                    <el-form-item
+                        label="密码"
+                        prop="password"
+                        v-if="!defaultModalData?.id"
+                    >
+                        <el-input
+                            v-model="formData.password"
+                            placeholder="请输入密码"
+                            show-password
+                        />
+                    </el-form-item>
+
+                    <el-form-item
+                        label="手机号码"
+                        prop="cellphone"
+                    >
+                        <el-input
+                            v-model="formData.cellphone"
+                            placeholder="请输入手机号码"
+                        />
+                    </el-form-item>
+
+                    <el-form-item
+                        label="选择角色"
+                        prop="roleId"
+                    >
+                        <el-select
+                            v-model="formData.roleId"
+                            placeholder="请选择角色"
+                        >
+                            <template
+                                v-for="item in entireRoles"
+                                :key="item.id"
+                            >
+                                <el-option
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </template>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item
+                        label="选择部门"
+                        prop="departmentId"
+                    >
+                        <el-select
+                            v-model="formData.departmentId"
+                            placeholder="请选择部门"
+                        >
+                            <template
+                                v-for="item in entireDepartments"
+                                :key="item.id"
+                            >
+                                <el-option
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </template>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button
+                        @click="handleCloseModal"
+                    >取消</el-button>
+
+                    <el-button
+                        type="primary"
+                        :loading="bthLoading"
+                        @click="handleConfirmClick"
+                    >确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="UserModal"
+>
+    import {ref, reactive, watch} from 'vue'
+    import useMainStore from '@/store/main'
+    import { storeToRefs } from 'pinia'
+    import userSystemStore from '@/store/main/system'
+
+    const emit = defineEmits([
+        'closeModal',
+        'confirmClick'
+    ])
+    const props = defineProps(['defaultModalData'])
+
+    const mainStore = useMainStore()
+    const systemStore = userSystemStore()
+    const {entireRoles, entireDepartments} = storeToRefs(mainStore)
+
+    const open = ref(false)
+    const bthLoading = ref(false)
+    const formData = reactive<any>({
+        name: '',
+        realname: '',
+        password: '',
+        cellphone: '',
+        roleId: '',
+        departmentId: ''
+    })
+
+    function setModalVisible(data?: any) {
+        // 编辑
+        if (data?.id) {
+            for (const key in formData) {
+                formData[key] = data[key]
+            }
+        }
+        // 新建
+        else {
+            for (const key in formData) {
+                formData[key] = ''
+            }
+        }
+    }
+
+    function closeModal(show: boolean) {
+        open.value = show
+    }
+
+    function handleConfirmClick() {
+        const newData = {...formData}
+        const id = props.defaultModalData?.id
+
+        bthLoading.value = true
+        if (!id) {
+            systemStore.addUserDataActions(newData)
+                .then((res) => {
+                    if (res === 'ok') {
+                        closeModal(false)
+                        emit('confirmClick')
+                    }
+                })
+                .finally(() => {
+                    bthLoading.value = false
+                })
+        }
+        else {
+            newData.id = id
+            delete newData.password
+            systemStore.editUserDataActions(id, newData)
+                .then((res) => {
+                    if (res === 'ok') {
+                        closeModal(false)
+                        emit('confirmClick')
+                    }
+                })
+                .finally(() => {
+                    bthLoading.value = false
+                })
+        }
+    }
+
+    function handleCloseModal() {
+        emit('closeModal')
+    }
+
+    watch(
+        () => props.defaultModalData,
+        (newData) => {
+            setModalVisible(newData)
+        }
+    )
+
+    defineExpose({
+        setModalVisible,
+        closeModal
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .user-modal {
+        .form {
+            padding: 0 20px;
+        }
+    }
+</style>

package/template/src/views/main/system/user/user-comp/UserSearch.vue

@@ -0,0 +1,147 @@
+<template>
+    <div class="user-search">
+        <el-form
+            label-width="80px"
+            size="large"
+            :model="searchForm"
+            ref="formRef"
+        >
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item
+                        label="用户名"
+                        prop="name"
+                    >
+                        <el-input
+                            placeholder="请输入用户名"
+                            v-model="searchForm.name"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-form-item
+                        label="真实姓名"
+                        prop="realname"
+                    >
+                        <el-input
+                            placeholder="请输入真实姓名"
+                            v-model="searchForm.realname"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-form-item
+                        label="手机号码"
+                        prop="cellphone"
+                    >
+                        <el-input
+                            placeholder="请输入手机号码"
+                            v-model="searchForm.cellphone"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-form-item
+                        label="状态"
+                        prop="enable"
+                    >
+                        <el-select
+                            placeholder="请选择状态"
+                            v-model="searchForm.enable"
+                        >
+                            <el-option
+                                label="启用"
+                                :value="1"
+                            />
+
+                            <el-option
+                                label="禁用"
+                                :value="0"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-form-item
+                        label="创建时间"
+                        prop="createAt"
+                    >
+                        <el-date-picker
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            v-model="searchForm.createAt"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <div class="btns">
+            <el-button
+                icon="Refresh"
+                @click="handleReset"
+            >重置</el-button>
+
+            <el-button
+                type="primary"
+                icon="Search"
+                @click="handleQuery"
+            >查询</el-button>
+        </div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="UserSearch"
+>
+    import type { ElForm } from 'element-plus'
+    import {ref} from 'vue'
+
+    defineProps(['searchForm'])
+    
+    const formRef = ref<InstanceType<typeof ElForm>>()
+    const emit = defineEmits(['queryClick', 'resetClick']);
+    
+
+    function handleFormReset() {
+        formRef.value?.resetFields()
+    }
+
+    function handleReset() {
+        handleFormReset()
+        emit('resetClick')
+    }
+
+    function handleQuery() {
+        emit('queryClick')
+    }
+
+    defineExpose({handleFormReset})
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .user-search {
+        padding: 20px;
+        background-color: var(--bg-white-color);
+
+        .el-form-item {
+            padding: 12px 10px;
+            margin-bottom: 0;
+        }
+
+        .btns {
+            text-align: right;
+        }
+    }
+</style>

package/template/src/views/not-found/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="not-found-wraper">
+        <el-result
+            icon="error"
+            title="404"
+            sub-title="你访问的页面不存在！"
+        ></el-result>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="NotFound"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+</style>

package/template/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import {DefineComponent} from 'vue'
+    const component: DefineComponent
+    export default component
+}
+
+declare module '*.mjs'

package/template/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": false,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "auto-imports.d.ts",
+        "components.d.ts"
+    ]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,66 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
+
+// https://vite.dev/config/
+export default defineConfig({
+    base: './',
+    
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://123.207.32.32:5000',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, '')
+            }
+        }
+    },
+
+    build: {
+        sourcemap: true, 
+        outDir: 'dist'
+    },
+
+    plugins: [
+        vue(),
+
+        // 组件库 element-plus 按需引入
+        AutoImport(
+            {
+                resolvers: [
+                    ElementPlusResolver(),
+                    VueHooksPlusResolver()
+                ],
+            },
+        ),
+        Components({
+            resolvers: [ElementPlusResolver()],
+        }),
+        createStyleImportPlugin({
+            resolves: [
+                ElementPlusResolve(),
+            ],
+            libs: [
+                {
+                    libraryName: 'element-plus',
+                    esModule: true,
+                    resolveStyle: (name: string) => {
+                        return `element-plus/theme-chalk/${name}.css`
+                    },
+                },
+            ],
+        })
+    ],
+
+    resolve: {
+        alias: {
+            // 相对路径别名配置，使用 @ 代替 src，用于打包的时候识别路径
+            '@': path.resolve("./src"),
+        },
+    }
+})