后台管理

# 以下命令都运行在项目根目录

基础页面

• 效果图

• Laravel

# 生成对应的控制器文件 Model文件需要放入 [Qingwuit/Model] 目录下
php artisan make:controller Admin/xxxController # Seller/xxxController

class NoticesController extends Controller
{
    protected $modelName = 'Notice'; #对应Laravel 生成的 Model文件
    protected $setUser = true; # 是否区分所属用户默认False
}

• Vue

<!-- resources\js\views 目录下新建文件你自己vue -->
<!-- 示例：views\Admin\notices\index.vue -->
<template>
    <table-view :options="options" :searchOption="searchOptions" :dialogParam="dialogParam"></table-view>
</template>

<script>
import {reactive,getCurrentInstance} from "vue"
import tableView from "@/components/common/table"
export default {
    components:{tableView},
    setup(props) {
        const {ctx,proxy} = getCurrentInstance()
        // 列表列内容
        const options = reactive([
            {label:'标题',value:'name'},
            {label:'标签',value:'tag',type:"tags"},
            {label:'创建时间',value:'created_at'},
        ]);

        // 搜索字段
        const searchOptions = reactive([
            {label:'标题',value:'name',where:'likeRight'},
            {label:'标签',value:'tag',where:'likeRight'},
            {label:'内容',value:'content',where:'like'},
        ])

        // 表单配置 
        const addColumn = [
            {label:'标题',value:'name'},
            {label:'标签',value:'tag'},
            {label:'内容',value:'content',type:'editor',span:24,viewType:'html'},
        ]
        const dialogParam = reactive({
            rules:{
                name:[{required:true,message:'不能为空'}]
            },
            view:{column:addColumn},
            add:{column:addColumn},
            edit:{column:addColumn},
        })
        return {options,searchOptions,dialogParam}
    }
}
</script>

自定义Table列表

<template>
    <table-view :options="options" >
        <template #custom_item="row">
            <!-- 自定义内容区域 -->
        </template>
    </table-view>
</template>

<script>
import {reactive} from "vue"
import tableView from "@/components/common/table"
export default {
    components:{tableView},
    setup() {
        // 列表列内容
        const options = reactive([
            {label:'自定义列表',value:'custom_item',type:"custom"},
        ]);

        return {options}
    }
}
</script>

其他配置API

<template>
    
    <table-view :options="options" :pagination="pagination" :handleWidth="handleWidth" :handleHide="handleHide" :params="params" :searchOption="searchOptions" :btnConfig="btnConfigs" :dialogParam="dialogParam">
        <template #custom_item="row">
            <!-- 自定义内容区域 -->
        </template>
    </table-view>
</template>

<script>
import {reactive,ref} from "vue"
import tableView from "@/components/common/table"
export default {
    components:{tableView},
    setup() {
        // 列表列内容
        const options = reactive([
            {label:'自定义列表',value:'custom_item',type:"custom"},
        ]);

        // 这个参数控制 增删改查按钮的显示
        const btnConfigs = reactive({
            show:{show:true}, // 显示
            store:{show:true}, // 添加
            update:{show:true}, // 编辑
            destroy:{show:true}, // 删除
            deletes:{show:false}, // 删除单行
            search:{show:true}, // 搜索
            export:{show:true},
            import:{show:false},
        })

        const dialogParam = reactive({
            // 字典，根据键值 显示字典内容
            dictData:{
                status:[{label:proxy.$t('btn.waitUse'),value:0},{label:proxy.$t('btn.used'),value:1}]
            },
            width:'50%', // 弹框大小
            labelWidth:'90px', // form label 字体宽度
            span:12, // Item 默认宽度
            column:[], // 默认字段
            fullscreen:false, // 是否全屏
            rules:null,
            destroyOnClose:true,
            isPageDict:false,
            dict:[], // 字典链接 {name:"menus",url:'xxx.com'}
            addOpenBefore:()=>{}, // 打开添加之前执行
            editOpenBefore:()=>{}, // 打开编辑之前执行
            editOpenAfter:()=>{},
            add:{
                column:[], // {label:'我的游戏',value:'name'},{label:'定位密钥',value:'name'},{label:'头像',value:'name'}
            },
            edit:{
                column:[],
            },
            view:{
                column:[],
            }
        })

        const handleWidth = ref('120px') // 操作列宽度
        const handleHide = ref(true) // 操作列是否显示
        const pagination = ref(true) // 显示分页
        const pageUrl = ref('') // 查询列表的url 默认当前url 这里是自定义的

        // 列表显示的条件查询
        const params = reactive({
            is_belong:'0|gt',
        })

        return {options,btnConfigs,dialogParam,params,handleWidth,handleHide,pagination,pageUrl,handleHide}

    }
}
</script>

自定义页面

• Vue

<template>
    <!-- 聊天 -->
    <base-view>
        <template #main_view>
            <chat ref="chat" :closeVis="false" :params="data.chatParams" />
        </template>
    </base-view>
</template>

<script>
import {reactive,onMounted,nextTick,getCurrentInstance} from "vue"
import Chat from "@/components/common/chat"
import baseView from "@/components/common/base"
export default {
    components:{baseView,Chat},
    setup(props) {
        const {proxy} = getCurrentInstance()
        const data = reactive({
            chatParams:{provider:'users',rid:null,rtype:null,token:localStorage.getItem('seller_token')}
        })

        onMounted(()=>{
            proxy.$refs.chat.openChat()
        })

        return {
            data,
        }
    }
}
</script>

<style lang="scss" scoped>
.chat_main{
    height: 600px;
}
</style>