@yyp92-cli/template-vue-pc 1.2.0

package/template/src/views/main/fullScreen/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="fullScreen">
+        待完善
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="FullScreen"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .fullScreen {
+        width: 100vw;
+        height: 100vh;
+        background: url(./images/bg.png) no-repeat;
+        background-size: cover;
+        color: var(--primary-text-color);
+
+        .screen {
+            width: 100%;
+            height: 100%;
+            min-width: 1200px;
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>

package/template/src/views/main/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="mian-wraper">
+        <Layout />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Main"
+>
+    import Layout from '@/components/layout/index.vue'
+    // import Layout from '@/components/layout-horizontal/index.vue'
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .mian-wraper {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/template/src/views/main/product/category/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="category">
+        <h2>category</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Category"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .category {}
+</style>

package/template/src/views/main/product/goods/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="goods">
+        <h2>goods</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Goods"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .goods {}
+</style>

package/template/src/views/main/story/chat/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="chat">
+        <Toolbar
+            style="border-bottom: 1px solid #ccc"
+            :editor="editorRef"
+            :defaultConfig="toolbarConfig"
+            :mode="mode"
+        />
+
+        <Editor
+            style="height: 500px; overflow-y: hidden;"
+            v-model="valueHtml"
+            :defaultConfig="editorConfig"
+            :mode="mode"
+            @onCreated="handleCreated"
+        />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Chat"
+>
+    import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
+    // @ts-ignore
+    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+    import '@wangeditor/editor/dist/css/style.css'
+
+    const mode = 'default'
+
+    // 编辑器实例，必须用 shallowRef
+    const editorRef = shallowRef()
+
+    // 内容 HTML
+    const valueHtml = ref('<p>hello</p>')
+
+    // 模拟 ajax 异步获取内容
+    onMounted(() => {
+        setTimeout(() => {
+            valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
+        }, 1500)
+    })
+
+    const toolbarConfig = {}
+    const editorConfig = { placeholder: '请输入内容...' }
+
+    // 组件销毁时，也及时销毁编辑器
+    onBeforeUnmount(() => {
+        const editor = editorRef.value
+
+        if (editor == null) return
+
+        editor.destroy()
+    })
+
+    const handleCreated = (editor: any) => {
+        // 记录 editor 实例，重要！
+        editorRef.value = editor 
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .chat {
+        border: 1px solid var(--border-color-base);
+    }
+</style>

package/template/src/views/main/story/list/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="list">
+        <h2>list</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="List"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .list {}
+</style>

package/template/src/views/main/system/department/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="department">
+        department
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Department"
+>
+
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .department {}
+</style>

package/template/src/views/main/system/menu/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="menu">
+        <h2>menu</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Menu"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .menu {}
+</style>

package/template/src/views/main/system/role/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="role">
+        role
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Role"
+>
+
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .role {}
+</style>

package/template/src/views/main/system/user/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="user">
+        <UserSearch
+            ref="searchRef"
+            :searchForm="searchForm"
+            @query-click="handleQueryClick"
+            @reset-click="handleResetClick"
+        />
+
+        <UserContent
+            ref="contentRef"
+            :currentPage="currentPage"
+            :pageSize="pageSize"
+            :usersList="usersList"
+            :usersTotalCount="usersTotalCount"
+            :loading="loading"
+            @new-click="handleNewClick"
+            @edit-click="handleEditClick"
+            @delete-click="handleDeleteClick"
+            @query-list="fetchUserListData"
+        />
+
+        <UserModal
+            ref="modalRef"
+            :defaultModalData="defaultModalData"
+            @close-modal="handleClose"
+            @confirm-click="handleConfirmClick"
+        />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="User"
+>
+    import {ref, reactive, onMounted} from 'vue'
+    import {storeToRefs} from 'pinia'
+    import useSystemStore from '@/store/main/system'
+    import UserSearch from './user-comp/UserSearch.vue'
+    import UserContent from './user-comp/UserContent.vue'
+    import UserModal from './user-comp/UserModal.vue'
+
+    const systemStore = useSystemStore()
+
+    const searchRef = ref<InstanceType<typeof UserSearch>>()
+    const contentRef = ref<InstanceType<typeof UserContent>>()
+    const modalRef = ref<InstanceType<typeof UserModal>>()
+
+    // storeToRefs 转为响应式的
+    const {usersList, usersTotalCount} = storeToRefs(systemStore)
+    const searchForm = reactive({
+        name: '',
+        realname: '',
+        cellphone: '',
+        enable: 1,
+        createAt: ''
+    })
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const loading = ref(false)
+    const defaultModalData = ref()
+
+
+    async function fetchUserListData(pageNum?: number, newPageSize?: number) {
+        if (pageNum) {
+            currentPage.value = pageNum
+        }
+
+        if (newPageSize) {
+            pageSize.value = newPageSize
+        }
+
+        const size = pageSize.value
+        const offset = (currentPage.value - 1) * size
+        const info = {
+            size,
+            offset,
+            ...searchForm
+        }
+
+        loading.value = true
+        systemStore.postUsersListAction(info).then((res) => {
+            if (res === 'finally') {
+                loading.value = false
+            }
+        })
+    }
+
+    function handleQueryClick() {
+        fetchUserListData()
+    }
+
+    function handleResetClick() {
+        fetchUserListData(1)
+    }
+
+    function handleDeleteClick(id: number) {
+        systemStore.deleteUserByIdAction(id).then((res) => {
+            if (res === 'ok') {
+                searchRef.value?.handleFormReset()
+                fetchUserListData(1)
+            }
+        })
+    }
+
+    function handleNewClick() {
+        modalRef.value?.closeModal(true)
+        defaultModalData.value = {}
+    }
+
+    function handleEditClick(data: any = {}) {
+        modalRef.value?.closeModal(true)
+        defaultModalData.value = data
+    }
+
+    function handleClose() {
+        modalRef.value?.closeModal(false)
+        defaultModalData.value = {}
+    }
+
+    function handleConfirmClick() {
+        searchRef.value?.handleFormReset()
+        fetchUserListData(1)
+    }
+
+    // 初始化调用
+    onMounted(() => {
+        fetchUserListData(1)
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .user {
+        border-radius: 8px;
+        overflow: hidden;
+    }
+</style>

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

@@ -0,0 +1,211 @@
+<template>
+    <div class="content">
+        <div class="header">
+            <div class="title">用户列表</div>
+
+            <el-button
+                type="primary"
+                @click="handleNewUserClick"
+            >新建用户</el-button>
+        </div>
+
+        <div class="table">
+            <el-table
+                :data="usersList"
+                style="width: 100%"
+                border
+                v-loading="loading"
+            >
+                <el-table-column
+                    type="selection"
+                    width="50"
+                    align="center"
+                />
+
+                <el-table-column
+                    label="序号"
+                    prop="order"
+                    width="60"
+                    align="center"
+                />
+
+                <el-table-column 
+                    prop="name"
+                    label="用户名"
+                    width="120"
+                    align="center"
+                />
+
+
+                <el-table-column
+                    prop="realname"
+                    label="真实姓名"
+                    width="120"
+                    align="center"
+                />
+
+                <el-table-column
+                    prop="cellphone"
+                    label="手机号码"
+                    width="150"
+                    align="center"
+                />
+
+                <el-table-column
+                    prop="enable"
+                    label="状态"
+                    width="80"
+                    align="center"
+                >
+                    <!-- 作用域插槽 -->
+                    <template #default="scope">
+                        <el-tag
+                            :type="scope.row.enable ? 'primary' : 'danger'"
+                        >{{ scope.row.enable ? '启用' : '禁用' }}</el-tag>
+                    </template>
+                </el-table-column>
+
+                <el-table-column
+                    prop="createAt"
+                    label="创建时间"
+                    align="center"
+                >
+                    <template #default="scope">
+                        {{ formatUTC(scope.row.createAt) }}
+                    </template>
+                </el-table-column>
+
+                <el-table-column
+                    prop="updateAt"
+                    label="更新时间"
+                    align="center"
+                >
+                    <template #default="scope">
+                        {{ formatUTC(scope.row.updateAt) }}
+                    </template>
+                </el-table-column>
+
+                <el-table-column
+                    label="操作"
+                    width="130"
+                    align="center"
+                >
+                    <template #default="scope">
+                        <el-button
+                            size="small"
+                            text
+                            type="primary"
+                            icon="Edit"
+                            @click="handleEditBtnClick(scope.row)"
+                        >编辑</el-button>
+
+                        <el-button
+                            size="small"
+                            text
+                            type="danger"
+                            icon="Delete"
+                            @click="handleDeleteBtnClick(scope.row.id)"
+                        >删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <div class="pagination">
+            <el-pagination
+                :current-page="currentPage"
+                :page-size="pageSize"
+                :page-sizes="[10, 20, 30]"
+                background
+                layout="total, prev, pager, next, sizes, jumper"
+                :total="usersTotalCount"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+            />
+        </div>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="UserContent"
+>
+    import {formatUTC} from '@/utils/format'
+
+    defineProps([
+        'loading',
+        'currentPage',
+        'pageSize',
+        'usersList',
+        'usersTotalCount'
+    ])
+    const emit = defineEmits([
+        'newClick',
+        'editClick',
+        'deleteClick',
+        'queryList'
+    ])
+
+    function handleSizeChange(size: number) {
+        emit('queryList', 1, size)
+    }
+
+    function handleCurrentChange (page: number) {
+        emit('queryList', page)
+    }
+
+    function handleDeleteBtnClick(id: number) {
+        emit('deleteClick', id)
+    }
+
+    function handleNewUserClick() {
+        emit('newClick')
+    }
+
+    function handleEditBtnClick(data: any) {
+        emit('editClick', data)
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .content {
+        background: var(--bg-white-color);
+        margin-top: 20px;
+        padding: 20px;
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+
+            .title {
+                font-size: 18px;
+                font-weight: 600;
+                color: var(--text-color);
+            }
+        }
+
+        .table {
+            :deep(.el-table__cell) {
+                padding: 12px 0 !important;
+            }
+
+            .el-button {
+                margin-left: 0;
+                padding: 0 4px;
+            }
+        }
+
+        .pagination {
+            margin-top: 12px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
+</style>